:root {
    /* Prime Data Source brand: gold primary, teal secondary, near-black ink */
    --brand-primary: #F7A41C;
    --brand-primary-alt: #166780;
    --brand-ink: #231F20;
    --brand-ink-deeper: #18141a;
    --ethio-red: var(--brand-primary);
    --ethio-dark-blue: var(--brand-ink);
    --ethio-gold: var(--brand-primary-alt);
    --brand-teal: var(--brand-primary-alt);
    --brand-sea: var(--brand-primary);
    --brand-deep: var(--brand-ink);
    --brand-deep-elevated: #2a2326;
    --brand-deep-muted: #332d2e;
    /* Standard hero image overlay (Image Selection Guidance, Section 3) — charcoal + teal only, never amber.
       Use as: background: linear-gradient(var(--hero-overlay-standard)), url('...') center/cover no-repeat;
       --hero-overlay-light for naturally dark photography, --hero-overlay-heavy for pages needing extra text contrast. */
    --hero-overlay-light: rgba(35, 31, 32, 0.40), rgba(22, 103, 128, 0.25);
    --hero-overlay-standard: rgba(35, 31, 32, 0.50), rgba(22, 103, 128, 0.20);
    --hero-overlay-heavy: rgba(35, 31, 32, 0.70), rgba(22, 103, 128, 0.15);
    /* Footer: deeper band than page sections so the site chrome reads as distinct */
    --footer-surface-top: #0f0d0e;
    --footer-surface-bottom: #080607;
    --brand-text-soft: #d4cec9;
    --navbar-offset: calc(72px + env(safe-area-inset-top, 0px));
    --nav-surface-top: rgba(255, 255, 255, 0.97);
    --nav-surface-bottom: rgba(255, 248, 230, 0.98);
    --nav-ink: #1a1210;
    --nav-ink-muted: rgba(26, 18, 16, 0.78);
    --nav-border: rgba(22, 103, 128, 0.22);
    --nav-shadow: 0 10px 28px rgba(35, 31, 32, 0.1);
    /* Main nav row: clean white (Peraton-style hybrid nav) */
    --nav-main-surface: #ffffff;
}

html {
    margin: 0;
    padding: 0;
    font-family: "Inter", sans-serif;
    background-color: var(--ethio-dark-blue);
    color: #fff;
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Inter", sans-serif;
    background-color: var(--ethio-dark-blue);
    color: #fff;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Home: snap scroll inside .snap-container; lock window scroll (all breakpoints) */
html.home-html,
html.home-html body {
    height: 100%;
    overflow: hidden;
}

/* Ensure no horizontal scroll anywhere */
html,
body,
.snap-container {
    overflow-x: hidden !important;
    width: 100%;
}

/* Inner pages: one document scrollbar. Home overrides below. */
.snap-container {
    height: auto;
    min-height: 0;
    overflow-y: visible;
    scroll-snap-type: none;
    scroll-behavior: smooth;
    background-color: var(--ethio-dark-blue);
}

/* Full-viewport sections only — never apply to #footer-section (causes huge empty scroll) */
section:not(#footer-section) {
    position: relative;
    min-height: 100vh;
    width: 100%;
    scroll-snap-align: start;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: visible;
    z-index: 1; /* Creates a local stacking context */
    padding: 0; /* Remove extra global padding so sections sit directly under navbar */
}

/* Keep the hero vertically centered while allowing other sections to flow naturally */
#hero {
    align-items: center;
    padding-top: calc(var(--navbar-offset) + 20px);
    padding-bottom: 40px;
}

/* FIXED BACKGROUND SYSTEM - Using positive Z-index within the section */
.section-bg {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    min-height: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1; /* Bottom Layer */
    transition: transform 10s ease-out;
    transform: scale(1);
}

/* Scale up image when section is active */
section.is-visible .section-bg {
    transform: scale(1.15);
}

/* Overlay sits on top of the image but below text */
.overlay {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    min-height: 0;
    background: linear-gradient(
        to bottom,
        rgba(10, 38, 50, 0.82) 0%,
        rgba(10, 38, 50, 0.58) 100%
    );
    z-index: 2; /* Middle Layer */
}

.content-container {
    position: relative;
    max-width: 1200px;
    width: 90%;
    /* Most sections center this via the parent section's flex
       justify-content:center, but the hero nests it inside an extra
       .pds-hero__content wrapper that isn't flex — without its own margin,
       it just sat flush-left there with all the leftover space on the
       right. margin:auto centers it either way, redundant but harmless
       where a flex parent already does the job. */
    margin-left: auto;
    margin-right: auto;
    z-index: 3; /* Top Layer */
    padding-top: 8px;
    padding-bottom: 24px; /* ensure content has bottom spacing inside each section */
}

/* Typography */
.ethio-heading {
    font-weight: 900;
    font-size: clamp(2.2rem, 6vw, 4.2rem);
    line-height: 1.1;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.ethio-label {
    display: block;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 0.9rem;
    color: var(--ethio-red);
    margin-bottom: 1rem;
    font-weight: 700;
}

.sub-text {
    font-size: 1.2rem;
    max-width: 750px;
    color: #efefef;
    line-height: 1.6;
}

.btn-ethio {
    background-color: var(--ethio-red);
    color: white;
    border: none;
    padding: 15px 35px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}
.btn-ethio:hover {
    background-color: #fff;
    color: var(--ethio-red);
    transform: translateY(-5px);
}

.reveal {
    opacity: 0;
}

/* Fixed shell: brand utility strip + white main nav */
.site-header {
    z-index: 1000;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* Notched phones: keep trust bar + nav below the status bar / Dynamic Island */
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--nav-main-surface);
    border-top: 4px solid var(--brand-primary);
    border-bottom: 1px solid rgba(35, 31, 32, 0.08);
    box-shadow: 0 2px 14px rgba(35, 31, 32, 0.06);
}

/* Main nav — light bluish surface (--nav-main-surface) for logo + links */
.navbar {
    z-index: 5;
    transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    background: var(--nav-main-surface);
    border-bottom: none;
    box-shadow: none;
}

/* Tighter header row than Bootstrap py-2 (trust bar + nav overall height) */
.site-header .navbar {
    padding-top: 0.55rem !important;
    padding-bottom: 0.55rem !important;
}

/* Home: semi-transparent nav bar overlays hero — separates chrome from banner image */
body.home-page .site-header {
    transition:
        background 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease,
        backdrop-filter 0.4s ease;
}

body.pds-home .site-header:not(.is-scrolled):not(.menu-open) {
    background: rgba(0, 0, 0, 0.28);
    border-top: 4px solid var(--brand-primary);
    border-bottom: none;
    box-shadow: none;
    backdrop-filter: none;
}

body.home-page .site-header .navbar {
    background: transparent;
    border-bottom: none;
    box-shadow: none;
}

body.pds-home .site-header:not(.is-scrolled):not(.menu-open) .nav-main-links .nav-link {
    color: rgba(255, 255, 255, 0.90) !important;
}

body.pds-home .site-header:not(.is-scrolled):not(.menu-open) .nav-main-links .nav-link:hover,
body.pds-home .site-header:not(.is-scrolled):not(.menu-open) .nav-main-links .nav-link:focus {
    color: #ffffff !important;
}

body.pds-home .site-header:not(.is-scrolled):not(.menu-open) .navbar .nav-link.active {
    color: #F7A41C !important;
}

body.pds-home .site-header:not(.is-scrolled):not(.menu-open) .site-logo-image {
    /* Color logo shows naturally on dark hero — no invert needed */
}

body.pds-home .site-header:not(.is-scrolled):not(.menu-open) .nav-quote-btn {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    color: #fff !important;
    box-shadow: none !important;
}

body.pds-home .site-header:not(.is-scrolled):not(.menu-open) .nav-quote-btn:hover,
body.pds-home .site-header:not(.is-scrolled):not(.menu-open) .nav-quote-btn:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.85) !important;
    color: #fff !important;
}

body.pds-home .site-header:not(.is-scrolled):not(.menu-open) .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.35) !important;
}

body.pds-home .site-header:not(.is-scrolled):not(.menu-open) .navbar-toggler-icon {
    filter: invert(1) brightness(1.1);
}

body.pds-home .site-header:not(.is-scrolled):not(.menu-open) .dropdown-toggle::after {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

body.pds-home .site-header.is-scrolled,
body.pds-home .site-header.menu-open {
    /* Same dark/gray translucent tint as the hero state, not a white one —
       every home-page section has a dark-overlaid photo background behind
       it now (all 7 do, as of the last background-photo pass), so there's
       no longer a "light section" that needs a light header to read against
       it. Keeping one consistent look across the whole scroll journey. */
    background: rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 4px solid var(--brand-primary);
    border-bottom: none;
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.18);
}

body.pds-home .site-header.is-scrolled .nav-main-links .nav-link,
body.pds-home .site-header.menu-open .nav-main-links .nav-link {
    color: rgba(255, 255, 255, 0.90) !important;
}

body.pds-home .site-header.is-scrolled .nav-main-links .nav-link:hover,
body.pds-home .site-header.is-scrolled .nav-main-links .nav-link:focus,
body.pds-home .site-header.menu-open .nav-main-links .nav-link:hover,
body.pds-home .site-header.menu-open .nav-main-links .nav-link:focus {
    color: #ffffff !important;
}

body.pds-home .site-header.is-scrolled .navbar .nav-link.active,
body.pds-home .site-header.menu-open .navbar .nav-link.active {
    color: #F7A41C !important;
}

body.pds-home .site-header.is-scrolled .nav-quote-btn,
body.pds-home .site-header.menu-open .nav-quote-btn {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    color: #fff !important;
    box-shadow: none !important;
}

body.pds-home .site-header.is-scrolled .nav-quote-btn:hover,
body.pds-home .site-header.is-scrolled .nav-quote-btn:focus,
body.pds-home .site-header.menu-open .nav-quote-btn:hover,
body.pds-home .site-header.menu-open .nav-quote-btn:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.85) !important;
    color: #fff !important;
}

body.pds-home .site-header.is-scrolled .navbar-toggler,
body.pds-home .site-header.menu-open .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.35) !important;
}

body.pds-home .site-header.is-scrolled .navbar-toggler-icon,
body.pds-home .site-header.menu-open .navbar-toggler-icon {
    filter: invert(1) brightness(1.1);
}

body.pds-home .site-header.is-scrolled .dropdown-toggle::after,
body.pds-home .site-header.menu-open .dropdown-toggle::after {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

.site-header .navbar .navbar-brand {
    padding: 0.05rem 0;
    margin-right: 0.45rem;
    background: transparent;
    line-height: 0;
}

.site-header .navbar .nav-main-links .nav-link {
    padding-top: 0.28rem;
    padding-bottom: 0.28rem;
}

@media (min-width: 992px) {
    .site-header .navbar .nav-main-links .nav-link {
        padding-top: 0.45rem;
        padding-bottom: 0.45rem;
    }
}
.logo-text {
    font-weight: 900;
    color: #fff;
    letter-spacing: -1px;
    font-size: 1.22rem;
    line-height: 1.15;
}
.logo-red {
    color: var(--ethio-red);
}
.nav-main-links .nav-link {
    font-size: 0.82rem;
    letter-spacing: 0.5px;
    color: var(--nav-ink-muted) !important;
}

.nav-main-links .nav-link:hover,
.nav-main-links .nav-link:focus {
    color: var(--brand-primary) !important;
}

html,
body {
    margin: 0;
    overflow-x: hidden;
}

/* Keep page content below fixed navbar */
body {
    padding-top: var(--navbar-offset);
}

body.home-page {
    padding-top: 0;
}

/* Home: full-height snap scroller — navbar overlays content (all breakpoints) */
body.home-page .snap-container {
    margin-top: 0;
    height: 100dvh;
    min-height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    scroll-snap-stop: always;
    -webkit-overflow-scrolling: touch;
}

/* Keep fixed header + side dots inside content area — not over the snap scrollbar */
body.home-page .site-header.fixed-top {
    right: var(--snap-scrollbar-width, 0px);
    width: auto;
}

body.home-page .site-header {
    box-sizing: border-box;
}

body.home-page section:not(#footer-section) {
    min-height: 100dvh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* Home hero (welcome only): snap container already clears the fixed nav — do not add
   navbar offset again on padding-top or content rides high. Column + justify center
   matches the reference layout (headline block visually centered in the viewport). */
@media (min-width: 1200px) {
    body.home-page #hero {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: calc(var(--navbar-offset) + 1.5rem);
        padding-bottom: 1.5rem;
        min-height: 100dvh;
        box-sizing: border-box;
    }

    body.home-page #hero .content-container {
        padding-top: 0;
        padding-bottom: 0;
    }

    body.home-page #hero .hero-cta {
        margin-top: 3rem;
    }
}

/* Home branding: consistently blend both logo colors */
body.home-page .ethio-label {
    color: #4a9fd4;
}

body.home-page .btn-ethio {
    background: linear-gradient(135deg, var(--ethio-red) 0%, var(--ethio-dark-blue) 100%);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

body.home-page .btn-ethio:hover {
    background: linear-gradient(135deg, #ffb730 0%, #F7A41C 100%);
    color: #231F20;
}

body.home-page .ethio-heading {
    text-shadow: 0 0 24px rgba(247, 164, 28, 0.18);
}

/* QA Task 1: homepage hero heading — fit naturally within two lines */
body.home-page #hero .ethio-heading {
    font-size: clamp(1.55rem, 3.6vw, 2.85rem);
    line-height: 1.12;
    max-width: 22em;
    margin-left: auto;
    margin-right: auto;
}

/* Content-first sections: must tie or beat `body.home-page section:not(#footer-section)`
   (which is (1,1,2) — a lone #id rule loses and viewport min-height was winning). */
body.home-page section#why-prime-data,
body.home-page section#how-to-buy-banner,
body.home-page section#past-performance-highlights {
    min-height: auto;
}

/* Home page: tablets and mobile — snap scroll + compact section rhythm */
@media (max-width: 1199px) {
  body.home-page .side-dots {
    display: none;
  }

  /* Hero: full snap band — nav overlays top */
  body.home-page #hero {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: calc(var(--navbar-offset) + clamp(1.15rem, 3.8vw, 2rem));
    padding-bottom: clamp(1.25rem, 4vw, 2.25rem) !important;
    min-height: 100dvh;
  }

  body.home-page #hero .content-container {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Tighter than former Bootstrap mt-5 (~3rem) on small screens */
  body.home-page #hero .hero-cta {
    margin-top: clamp(0.55rem, 2vw, 1rem);
  }

  body.home-page #hero > .section-bg {
    min-height: 0;
  }

  /* Cards flush — no flex gap (removes black bars) */
  .home-agency-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
    background-color: var(--brand-ink);
    padding: 0;
  }

  .home-agency-stack__head {
    display: block;
    margin: 0;
    padding: 0 1rem 1rem;
  }

  .home-agency-stack__head .home-agency-mission__series {
    margin: 0;
    text-align: left;
  }

  .home-agency-stack .home-agency-mission__header--desktop {
    display: none;
  }

  /* Padding on the photo band only — not on the inner card (.home-agency-mission__inner) */
  .home-agency-stack .home-agency-mission {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100dvh;
    padding: calc(var(--navbar-offset) + clamp(1rem, 3vw, 1.5rem)) 0 clamp(1.25rem, 4vw, 2rem);
    margin: 0;
    overflow: hidden;
    background-color: var(--brand-ink);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-margin-top: 0;
  }

  body.home-page .home-agency-stack .home-agency-mission--dod {
    background-image:
      linear-gradient(rgba(6, 16, 40, 0.38), rgba(6, 16, 40, 0.38)),
      url("/images/agencies/home-bands/dod.jpg");
    background-position: 58% center;
  }

  body.home-page .home-agency-stack .home-agency-mission--doi {
    background-image:
      linear-gradient(rgba(6, 16, 40, 0.38), rgba(6, 16, 40, 0.38)),
      url("/images/agencies/home-bands/doi.jpg");
  }

  body.home-page .home-agency-stack .home-agency-mission--usda {
    background-image:
      linear-gradient(rgba(6, 16, 40, 0.38), rgba(6, 16, 40, 0.38)),
      url("/images/agencies/home-bands/usda.jpg");
  }

  body.home-page .home-agency-stack .home-agency-mission--va {
    background-image:
      linear-gradient(rgba(6, 16, 40, 0.38), rgba(6, 16, 40, 0.38)),
      url("/images/agencies/home-bands/va.jpg");
    background-position: 68% center;
  }

  body.home-page .home-agency-stack .home-agency-mission--dhs {
    background-image:
      linear-gradient(rgba(6, 16, 40, 0.38), rgba(6, 16, 40, 0.38)),
      url("/images/agencies/home-bands/dhs.jpg");
    background-position: center 40%;
  }

  body.home-page .home-agency-stack .home-agency-mission--state {
    background-image:
      linear-gradient(rgba(6, 16, 40, 0.38), rgba(6, 16, 40, 0.38)),
      url("/images/agencies/home-bands/state-municipal.jpg");
  }

  .home-agency-stack .home-agency-mission__bg {
    display: none;
  }

  .home-agency-stack .home-agency-mission .overlay {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(18, 21, 28, 0.62) 0%,
      rgba(18, 21, 28, 0.72) 50%,
      rgba(18, 21, 28, 0.82) 100%
    );
  }

  .home-agency-stack .home-agency-mission + .home-agency-mission {
    box-shadow: none;
  }

  .home-agency-stack .home-agency-mission__container.content-container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 100%;
    padding: 1rem;
    box-sizing: border-box;
    flex-shrink: 0;
  }

  .capability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .capability-card,
  .capability-card-inner {
    min-height: clamp(278px, 34vmin, 350px);
  }

  .capability-card {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 0;
  }

  .capability-card.is-flipped {
    z-index: 3;
  }

  .capability-back {
    visibility: hidden;
  }

  .capability-card.is-flipped .capability-back {
    visibility: visible;
  }

  .capability-card:hover .capability-front,
  .capability-card:focus-within .capability-front {
    opacity: 1;
    transform: none;
  }

  .capability-card:hover .capability-back,
  .capability-card:focus-within .capability-back {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* --- Navbar fixes (kept out of Blade) --- */
/* Nav label colors: all .nav-main-links .nav-link share the same base/hover (see above). */

/* Touch devices: hover JS events are skipped via isDesktop() guard in the script */

/* Request a Quote button: full-width in collapsed menu */
@media (max-width: 991.98px) {
    .nav-main-links .nav-item.d-flex.align-items-center.ms-lg-3.mt-2.mt-lg-0 {
        justify-content: flex-start !important;
        margin-left: 0 !important;
    }

    .nav-main-links .nav-quote-btn {
        width: auto;
        margin: 0;
    }
}

/* Theme quote button in navbar */
.nav-main-links .nav-quote-btn {
    border: 1px solid rgba(247, 164, 28, 0.7);
    background: linear-gradient(135deg, #F7A41C 0%, #d9880e 100%);
    color: #231F20 !important;
    letter-spacing: 0.7px;
    box-shadow: 0 8px 18px rgba(247, 164, 28, 0.28);
    transition:
        transform 0.15s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.nav-main-links .nav-quote-btn:hover,
.nav-main-links .nav-quote-btn:focus {
    background: linear-gradient(135deg, #ffb730 0%, #F7A41C 100%);
    color: #231F20 !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(247, 164, 28, 0.36);
}

/* Keep desktop navbar on one line between 992px and 1400px */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .logo-text {
        font-size: 1.2rem !important;
    }

    .nav-main-links {
        flex-wrap: nowrap;
        align-items: center;
    }

    .nav-main-links .nav-link {
        font-size: 0.64rem;
        letter-spacing: 0.15px;
        padding-left: 0.34rem !important;
        padding-right: 0.34rem !important;
        white-space: nowrap;
    }

    .nav-main-links .nav-quote-btn {
        white-space: nowrap;
    }

    .nav-main-links .nav-item.ms-lg-3 {
        margin-left: 0.4rem !important;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .logo-text {
        font-size: 1.05rem !important;
    }

    .nav-main-links .nav-link {
        font-size: 0.6rem;
        padding-left: 0.26rem !important;
        padding-right: 0.26rem !important;
    }

    .nav-main-links .nav-quote-btn {
        white-space: nowrap;
    }
}

/* Expanded navbar dropdown behavior (>=992px) */
@media (min-width: 992px) {
    .site-header .navbar {
        position: relative;
        overflow: visible;
    }

    .nav-main-links .dropdown {
        position: relative;
    }

    /* Mega menus: anchor to the main nav bar (not each narrow <li>) so panels
       stay centered and out of document flow (fixes 992–1536px layouts). */
    .site-header,
    .site-header .navbar,
    .site-header .navbar .container-fluid,
    .site-header .navbar .navbar-collapse {
        overflow: visible;
    }

    .nav-main-links .health-mega-dropdown-wrap {
        position: static;
    }

    .nav-main-links .health-mega-dropdown-wrap > .dropdown-menu {
        position: absolute !important;
        top: 100%;
        left: 50%;
        right: auto;
        width: min(1120px, calc(100vw - 2rem));
        min-width: 0;
        max-width: calc(100vw - 2rem);
        margin-top: 0;
        transform: translateX(-50%) !important;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        /* Top padding acts as an invisible hover bridge between the
           nav-link and the visible mega-panel so the cursor can cross
           without losing :hover state. Bottom padding gives a small
           buffer below the panel for the same reason. */
        padding: 0.35rem 0 1rem;
        overflow: visible !important;
        z-index: 1200;
    }

    /* About: narrower than Capabilities/Agencies, but wide enough for readable copy */
    .mega-about.health-mega-dropdown-wrap {
        position: relative;
    }

    /* QA Task 3: anchor About mega menu to the right so it stays inside the viewport */
    .mega-about.health-mega-dropdown-wrap > .dropdown-menu {
        left: auto;
        right: 0;
        width: min(760px, calc(100vw - 2rem));
        min-width: 0;
        max-width: calc(100vw - 2rem);
        transform: none !important;
    }

    .mega-panel--about {
        width: 100%;
        max-width: 100%;
    }

    .mega-capabilities.health-mega-dropdown-wrap > .dropdown-menu,
    .mega-agencies.health-mega-dropdown-wrap > .dropdown-menu {
        left: 50%;
        right: auto;
        max-width: calc(100vw - 2rem);
        transform: translateX(-50%) !important;
    }

    /* Only one mega menu at a time — visibility controlled by JS classes (not :hover) */
    .nav-main-links .dropdown.dd-hover-open > .dropdown-menu,
    .nav-main-links .dropdown.dd-force-open > .dropdown-menu {
        display: block;
        animation: pds-mega-in 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    /* Explicitly hide on second click even when hovered */
    .nav-main-links .dropdown.dd-force-closed > .dropdown-menu {
        display: none !important;
    }

    .health-mega-menu {
        display: flex;
        min-height: 260px;
        max-width: 1120px;
        margin: 0 auto;
        border-radius: 20px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(12, 16, 24, 0.92);
        box-shadow: 0 24px 62px rgba(0, 0, 0, 0.48);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        position: relative;
    }

    .health-mega-menu::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            115deg,
            rgba(255, 255, 255, 0.04),
            transparent 34%,
            transparent 66%,
            rgba(255, 255, 255, 0.04)
        );
        pointer-events: none;
    }

    .health-mega-intro {
        width: 34%;
        padding: 1.35rem 1.25rem;
        background:
            radial-gradient(
                900px 340px at 12% 0%,
                rgba(0, 153, 255, 0.24),
                transparent 58%
            ),
            radial-gradient(
                700px 280px at 88% 8%,
                rgba(149, 76, 233, 0.22),
                transparent 58%
            ),
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.08),
                rgba(255, 255, 255, 0.02)
            );
        border-right: 1px solid rgba(255, 255, 255, 0.12);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        text-align: left;
    }

    .health-mega-image {
        width: 66%;
        height: 126px;
        object-fit: cover;
        object-position: center;
        display: block;
        margin-left: 0;
        margin-bottom: 0.55rem;
        filter: none;
    }

    .health-mega-label {
        display: block;
        color: rgba(255, 255, 255, 0.72);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 1.4px;
        margin-bottom: 0.55rem;
        text-transform: uppercase;
    }

    .health-mega-title {
        color: rgba(255, 255, 255, 0.95);
        text-transform: uppercase;
        font-weight: 800;
        font-size: 0.95rem;
        line-height: 1.35;
        letter-spacing: 0.5px;
        text-align: left;
        max-width: 22rem;
    }

    .health-mega-copy {
        color: rgba(255, 255, 255, 0.72);
        text-transform: none;
        font-weight: 500;
        font-size: 0.8rem;
        line-height: 1.5;
        letter-spacing: 0;
        text-align: left;
        max-width: 22rem;
    }

    .health-mega-links {
        flex: 1;
        padding: 1rem 1.1rem;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 0.85rem;
        row-gap: 0.75rem;
        align-content: center;
        position: relative;
        z-index: 1;
    }

    .health-mega-dropdown-wrap .dropdown-item {
        display: flex;
        align-items: flex-start;
        gap: 0.7rem;
        color: rgba(255, 255, 255, 0.92);
        font-size: 0.76rem;
        letter-spacing: 0.7px;
        font-weight: 700;
        padding: 0.8rem 0.9rem;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.04);
        text-transform: none;
        transition:
            transform 0.15s ease,
            color 0.2s ease,
            border-color 0.2s ease,
            background 0.2s ease;
    }

    .health-mega-dropdown-wrap .dropdown-item .mega-item-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0;
        font-weight: 800;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.88);
        background: rgba(255, 255, 255, 0.09);
        border: 1px solid rgba(255, 255, 255, 0.16);
        position: relative;
    }

    .health-mega-dropdown-wrap .dropdown-item .mega-item-icon::before {
        content: "";
        width: 14px;
        height: 14px;
        display: inline-block;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5l-8-3Zm0 2.2 6 2.3v4.5c0 4-2.6 7.5-6 8.9-3.4-1.4-6-4.9-6-8.9V6.5l6-2.3Z'/%3E%3C/svg%3E");
    }

    .health-mega-dropdown-wrap .dropdown-item .mega-item-content {
        display: block;
        min-width: 0;
        flex: 1;
    }

    .health-mega-dropdown-wrap .dropdown-item .mega-item-title {
        display: block;
        font-size: 0.74rem;
        font-weight: 800;
        line-height: 1.3;
        letter-spacing: 0.8px;
        text-transform: uppercase;
    }

    .health-mega-dropdown-wrap .dropdown-item .mega-item-desc {
        display: block;
        margin-top: 0.3rem;
        font-size: 0.68rem;
        font-weight: 500;
        line-height: 1.35;
        color: rgba(255, 255, 255, 0.68);
        letter-spacing: 0;
        text-transform: none;
    }

    .health-mega-dropdown-wrap .dropdown-item:hover {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.24);
        transform: translateY(-1px);
    }

    .health-mega-dropdown-wrap .dropdown-item.active,
    .health-mega-dropdown-wrap .dropdown-item:active {
        color: #ffffff;
        background: rgba(13, 110, 253, 0.22);
        border-color: rgba(13, 110, 253, 0.48);
    }

    .health-mega-dropdown-wrap .dropdown-item:hover .mega-item-desc,
    .health-mega-dropdown-wrap .dropdown-item.active .mega-item-desc,
    .health-mega-dropdown-wrap .dropdown-item:active .mega-item-desc {
        color: rgba(255, 255, 255, 0.82);
    }

    .mega-capabilities .health-mega-intro {
        background:
            radial-gradient(
                900px 340px at 12% 0%,
                rgba(0, 153, 255, 0.28),
                transparent 58%
            ),
            radial-gradient(
                700px 280px at 88% 8%,
                rgba(149, 76, 233, 0.24),
                transparent 58%
            ),
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.08),
                rgba(255, 255, 255, 0.02)
            );
    }

    .mega-agencies .health-mega-intro {
        background:
            radial-gradient(
                900px 340px at 12% 0%,
                rgba(22, 103, 128, 0.26),
                transparent 58%
            ),
            radial-gradient(
                700px 280px at 88% 8%,
                rgba(22, 103, 128, 0.2),
                transparent 58%
            ),
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.08),
                rgba(255, 255, 255, 0.02)
            );
    }

    .mega-about .health-mega-intro {
        background:
            radial-gradient(
                900px 340px at 12% 0%,
                rgba(255, 123, 67, 0.24),
                transparent 58%
            ),
            radial-gradient(
                700px 280px at 88% 8%,
                rgba(217, 66, 105, 0.24),
                transparent 58%
            ),
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.08),
                rgba(255, 255, 255, 0.02)
            );
    }

    .mega-capabilities .dropdown-item .mega-item-icon {
        background: linear-gradient(
            135deg,
            rgba(16, 138, 255, 0.35),
            rgba(133, 92, 255, 0.25)
        );
    }

    .mega-agencies .dropdown-item .mega-item-icon {
        background: linear-gradient(
            135deg,
            rgba(22, 103, 128, 0.35),
            rgba(22, 103, 128, 0.22)
        );
    }

    .mega-about .dropdown-item .mega-item-icon {
        background: linear-gradient(
            135deg,
            rgba(255, 123, 67, 0.34),
            rgba(217, 66, 105, 0.25)
        );
    }

    .mega-about .health-mega-links {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin: 0 auto;
    }

    .mega-about .dropdown-item {
        min-height: 76px;
    }

    /* Menu-specific icon glyphs */
    .mega-capabilities .dropdown-item:nth-child(1) .mega-item-icon::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M4 6a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v4a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V6Zm3-1a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H7Z'/%3E%3C/svg%3E");
    }
    .mega-capabilities .dropdown-item:nth-child(2) .mega-item-icon::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M3 16v-2h2.1l1.6-4.5A2 2 0 0 1 8.6 8H14V6a2 2 0 0 1 2-2h3v2h-3v2h2a2 2 0 0 1 2 2v4h1v2h-1.2a2.8 2.8 0 0 1-5.6 0H9.8a2.8 2.8 0 0 1-5.6 0H3Z'/%3E%3C/svg%3E");
    }
    .mega-capabilities .dropdown-item:nth-child(3) .mega-item-icon::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M13 2h-2v4H7v2h4v4H7v2h4v8h2v-8h4v-2h-4V8h4V6h-4V2Z'/%3E%3C/svg%3E");
    }
    .mega-capabilities .dropdown-item:nth-child(4) .mega-item-icon::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2 2 7v2l10-5 10 5V7L12 2Zm-8 9h16v11h-2v-3a4 4 0 0 0-8 0v3H8v-3a4 4 0 0 0-4 0v3H2V11h2Z'/%3E%3C/svg%3E");
    }
    .mega-capabilities .dropdown-item:nth-child(5) .mega-item-icon::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2c3 4 3 7 0 10-3-3-3-6 0-10Zm7 6c1 6-2 10-7 14C7 18 4 14 5 8c2 6 5 8 7 9 2-1 5-3 7-9Z'/%3E%3C/svg%3E");
    }
    .mega-capabilities .dropdown-item:nth-child(6) .mega-item-icon::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M9 2h6v2h-1v5.2l4.6 7.7A3 3 0 0 1 16.1 21H7.9a3 3 0 0 1-2.5-4.6L10 9.2V4H9V2Z'/%3E%3C/svg%3E");
    }

    .mega-agencies .dropdown-item:nth-child(1) .mega-item-icon::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5l-8-3Z'/%3E%3C/svg%3E");
    }
    .mega-agencies .dropdown-item:nth-child(2) .mega-item-icon::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 3c4.4 0 8 3.6 8 8 0 5.1-3.3 9.7-8 10-4.7-.3-8-4.9-8-10 0-4.4 3.6-8 8-8Z'/%3E%3C/svg%3E");
    }
    .mega-agencies .dropdown-item:nth-child(3) .mega-item-icon::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2c4 4 5 8 0 12C7 10 8 6 12 2Zm-7 9c1 6 5 10 7 11 2-1 6-5 7-11-2 6-5 8-7 9-2-1-5-3-7-9Z'/%3E%3C/svg%3E");
    }
    .mega-agencies .dropdown-item:nth-child(4) .mega-item-icon::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 21s-7-4.5-7-11a4 4 0 0 1 7-2.5A4 4 0 0 1 19 10c0 6.5-7 11-7 11Z'/%3E%3C/svg%3E");
    }
    .mega-agencies .dropdown-item:nth-child(5) .mega-item-icon::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2 3 6v6c0 5.5 3.6 10.1 9 12 5.4-1.9 9-6.5 9-12V6l-9-4Z'/%3E%3C/svg%3E");
    }
    .mega-agencies .dropdown-item:nth-child(6) .mega-item-icon::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2 4 6v2h16V6l-8-4Zm-6 8h12v12H6V10Z'/%3E%3C/svg%3E");
    }

    .mega-about .dropdown-item:nth-child(1) .mega-item-icon::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M6 3h10a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E");
    }
    .mega-about .dropdown-item:nth-child(2) .mega-item-icon::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4Zm-7 10a7 7 0 0 1 14 0h-2a5 5 0 0 0-10 0H5Z'/%3E%3C/svg%3E");
    }
}

/* Tablet and below: hero trust bar variant unused on current home (trust strip is in header).
   Keep #hero content padding in the main ≤1199px home block to avoid double rules. */

@media (max-width: 1399px) {
    .nav-main-links .nav-link {
        padding-left: 0.65rem !important;
        padding-right: 0.65rem !important;
    }
}

/* Side Dots */
.side-dots {
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.dot-link {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: 0.3s;
}
.dot-link.active {
    background: var(--ethio-red);
    transform: scale(1.5);
    border-color: #fff;
}

.service-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 25px;
    margin-top: 3rem;
}
.service-item {
    background: rgba(255, 255, 255, 0.07);
    padding: 30px;
    border-bottom: 4px solid var(--ethio-red);
    backdrop-filter: blur(5px);
    transition: 0.3s;
}

#footer-section {
    background: linear-gradient(
        180deg,
        var(--footer-surface-top) 0%,
        var(--footer-surface-bottom) 100%
    );
    border-top: 1px solid rgba(247, 164, 28, 0.22);
    display: block;
    height: auto;
    min-height: auto;
    padding: 48px 0 36px;
}

.footer-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-link-list li {
    margin-bottom: 8px;
}
.footer-link-list a {
    color: #aaa;
    text-decoration: none;
    font-size: 0.85rem;
    transition: 0.3s;
}
.footer-link-list a:hover {
    color: var(--brand-primary);
}

.cta-box h2 {
    font-weight: 900;
    font-size: 1.8rem;
    text-transform: uppercase;
    margin-bottom: 15px;
}
.cta-box p {
    font-size: 0.9rem;
    color: #ccc;
    line-height: 1.5;
    margin-bottom: 25px;
}
.btn-outline-white {
    border: 1px solid #fff;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    padding: 10px 20px;
    font-size: 0.8rem;
    transition: 0.3s;
    text-decoration: none;
}
.btn-outline-white:hover {
    background: #fff;
    color: #000;
}

.footer-bottom {
    border-top: 1px solid #333;
    margin-top: 28px;
    padding: 22px 0 12px;
    font-size: 0.8rem;
    color: #888;
}
.footer-bottom a {
    color: #fff;
    text-decoration: none;
    margin-right: 20px;
    font-weight: 700;
    transition: color 0.25s ease;
}
.footer-bottom a:hover {
    color: var(--brand-primary);
}
.social-icons a {
    color: #fff;
    margin-left: 15px;
    font-size: 1.1rem;
    transition: 0.3s;
}
.social-icons a:hover {
    color: var(--brand-primary);
}

.footer-social-icons .footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    font-size: 1.2rem;
    line-height: 1;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.footer-social-icons .footer-social-link--linkedin {
    background: #0a66c2;
}
.footer-social-icons .footer-social-link--facebook {
    background: #1877f2;
}
.footer-social-icons .footer-social-link:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.35),
        0 0 0 2px rgba(22, 103, 128, 0.75);
    filter: brightness(1.08);
}
/* Footer: natural height (no forced viewport stretch) */
#footer-section {
    background: linear-gradient(
        180deg,
        var(--footer-surface-top) 0%,
        var(--footer-surface-bottom) 100%
    );
    height: auto;
    min-height: auto;
    display: block;
    scroll-snap-align: start;
    position: relative;
    overflow: hidden;
}

#footer-section .container {
    position: relative;
    z-index: 2;
}

/* Subtle footer watermark: PDS = Prime Data Source (company monogram) */
#footer-section::after {
    content: "PDS";
    position: absolute;
    bottom: -50px;
    right: -20px;
    font-size: 30vw;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.02);
    line-height: 1;
    z-index: 1;
    pointer-events: none;
}

.footer-header {
    font-weight: 900;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    margin-bottom: 25px;
    color: #fff;
}

.footer-link-list a {
    font-size: 0.9rem;
    color: #888;
    transition: color 0.3s ease;
}

.footer-link-list a:hover {
    color: var(--brand-primary);
}

.cta-box h2 {
    font-weight: 900;
    letter-spacing: -1px;
}

.letter-spacing-2 {
    letter-spacing: 2px;
}

/* Ensure bottom bar stays thin and at the bottom */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 20px;
}

@media (max-width: 991px) {
    #footer-section {
        height: auto;
        min-height: auto;
    }
    .cta-box {
        margin-top: 30px;
    }
}
/* Ensure the mobile menu has a background when expanded */
@media (max-width: 991px) {
    .navbar-collapse {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(236, 244, 252, 0.98) 100%);
        padding: 20px;
        border-radius: 10px;
        margin-top: 15px;
        border: 1px solid var(--nav-border);
        box-shadow: var(--nav-shadow);
    }

    body.home-page .navbar-collapse {
        background: rgba(18, 21, 28, 0.97);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    }

    body.home-page .navbar-collapse .nav-main-links .nav-link,
    body.home-page .navbar-collapse .nav-main-links .dropdown-toggle {
        color: rgba(255, 255, 255, 0.9) !important;
    }

    /* Submenu links (e.g. "IT & Technology") default to a dark, light-surface
       text color — invisible against this dark navy mobile menu background. */
    body.home-page .navbar-collapse .dropdown-item {
        color: rgba(255, 255, 255, 0.78) !important;
    }

    body.home-page .navbar-collapse .dropdown-item:hover,
    body.home-page .navbar-collapse .dropdown-item:focus {
        color: var(--brand-primary) !important;
        background: rgba(255, 255, 255, 0.06);
    }

    body.home-page .navbar-collapse .nav-quote-btn {
        margin-top: 0.5rem;
    }

    .nav-main-links {
        align-items: flex-start !important;
        text-align: left;
    }

    .nav-main-links .nav-item {
        width: 100%;
        display: block;
        align-items: flex-start;
    }

    .nav-main-links .nav-link,
    .nav-main-links .nav-quote-btn {
        display: inline-flex;
        justify-content: flex-start;
        text-align: left;
    }

    /* Make the toggle button more visible */
    .navbar-toggler:focus {
        box-shadow: none;
        outline: none;
    }
}

@media (max-width: 991px) {
    .navbar,
    body:not(.home-page) .navbar {
        background: var(--nav-main-surface);
        border-bottom: none;
        box-shadow: none;
    }

    .site-header .navbar .navbar-toggler {
        border: 1px solid rgba(11, 26, 46, 0.14);
        padding: 0.35rem 0.55rem;
    }

    body.home-page .site-header .navbar .navbar-toggler {
        border-color: rgba(255, 255, 255, 0.35);
    }

    body.home-page .site-header .navbar .navbar-toggler-icon {
        filter: invert(1) brightness(1.1);
    }

    body:not(.home-page),
    html:not(.home-html) {
        overflow-x: hidden;
        overflow-y: auto;
    }

    /* Navbar-offset padding is for full-bleed sections that align to the viewport top.
       Home flow sections (#agencies-strip → #why-seventh-genius, etc.) must NOT inherit it
       or a huge empty band appears between bands (generic rule beats one-id home rules). */
    /* About / Our Story uses body.about-static section padding — do not add navbar-offset again here */
    body:not(.about-static) section:not(#footer-section):not(#hero):not(#procurement):not(.home-agency-mission):not(#agencies-strip):not(#why-prime-data):not(#how-to-buy-banner):not(#past-performance-highlights) {
        height: auto;
        min-height: auto;
        overflow: visible;
        align-items: flex-start;
        /* Match real fixed header height (trust bar + nav); fixed 88px clipped content when the bar wrapped or grew */
        padding: calc(var(--navbar-offset) + 12px) 0 28px;
    }

    .content-container {
        width: 92%;
    }

    .side-dots {
        display: none;
    }

    .reveal {
        opacity: 1 !important;
    }

    .animate__animated {
        animation: none !important;
    }

    .section-bg,
    section.is-visible .section-bg {
        transition: none;
        transform: none;
    }

    .ethio-heading {
        font-size: clamp(1.7rem, 7vw, 2.4rem);
    }

    .sub-text {
        font-size: 1rem;
        line-height: 1.5;
    }

    #footer-section {
        min-height: auto;
        height: auto;
        padding-top: 40px;
        padding-bottom: 28px;
    }
}

@media (max-width: 767px) {
    body:not(.about-static) section:not(#footer-section):not(#hero):not(#procurement):not(.home-agency-mission):not(#agencies-strip):not(#why-prime-data):not(#how-to-buy-banner):not(#past-performance-highlights) {
        padding: calc(var(--navbar-offset) + 8px) 0 20px;
    }

    body.home-page #hero {
        padding-top: clamp(1rem, 3.2vw, 1.65rem);
        padding-bottom: clamp(1.1rem, 3.5vw, 2rem) !important;
    }

    body.home-page #hero .hero-cta {
        margin-top: clamp(0.45rem, 1.6vw, 0.85rem);
    }

}

/* ============================
   Home (welcome.blade.php)
   Keep styling out of Blade
   ============================ */

body.home-page #hero .content-container {
    text-align: center;
}

body.home-page #hero > .overlay {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.62) 0%,
        rgba(4, 24, 38, 0.82) 24%,
        rgba(3, 18, 30, 0.88) 52%,
        rgba(2, 10, 18, 0.96) 100%
    );
}

.section-bg {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    will-change: transform;
    /* Fallback while images load; inset:0 fills the section (no extra min-height bleed) */
    background-color: var(--brand-ink);
}

/* Short standalone heroes still need a minimum band while images load */
#hero > .section-bg {
    min-height: 520px;
}

/* Capability page hero layout and sensible fallbacks */
.capability-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 0 120px;
    position: relative;
}

/* Ensure capability pages keep content separate from the following section */
.capability-page .content-container {
    padding-top: 24px;
    padding-bottom: 48px;
}

/* Slightly smaller, consistent headings on capability pages */
.capability-page .ethio-heading {
    font-size: clamp(2.2rem, 6vw, 3.2rem);
}

/* Alias specific capability background classes to the main hero/bg behavior.
   Replace URLs with local optimized images later for best performance. */
/* Capability page hero backgrounds — each page has its own unique image.
   All individual overrides are defined further down with !important.
   This rule is intentionally left empty as a named placeholder. */
.it-data-center-bg,
.heavy-bg,
.industrial-bg,
.lab-bg,
.field-bg,
.conservation-bg {
    /* individual rules defined in the capability detail section below */
    background-color: var(--brand-ink); /* fallback dark color while image loads */
}

.hero-bg {
    background-image: url("https://images.unsplash.com/photo-1553413077-190dd305871c?q=80&w=1920&auto=format&fit=crop");
}

.procurement-bg {
    background-image:
        linear-gradient(rgba(6, 16, 40, 0.32), rgba(6, 16, 40, 0.32)),
        url("/images/procurement-bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.agencies-we-serve-bg {
    background-color: #1a2418;
    /* Agencies We Serve — military loader & container (user-supplied photo) */
    background-image:
        linear-gradient(rgba(4, 12, 22, 0.55), rgba(5, 16, 28, 0.5)),
        url("/images/agencies-we-serve-bg.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.innovation-bg {
    background-image: url("https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?q=80&w=1600&auto=format&fit=crop");
}

.sectors-bg {
    background-image: url("https://images.unsplash.com/photo-1517976487492-5750f3195933?q=80&w=1600&auto=format&fit=crop");
}

/* Responsive: load smaller images on mobile to reduce bandwidth and speed up reveals */
@media (max-width: 991px) {
  .hero-bg {
    background-image: url("https://images.unsplash.com/photo-1553413077-190dd305871c?q=80&w=1200&auto=format&fit=crop");
  }

    .agencies-we-serve-bg {
        background-image:
            linear-gradient(rgba(4, 12, 22, 0.58), rgba(5, 16, 28, 0.52)),
            url("/images/agencies-we-serve-bg.png");
        background-size: cover;
        background-position: center center;
    }
    .innovation-bg {
        background-image: url("https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?q=80&w=900&auto=format&fit=crop");
    }
    .sectors-bg {
        background-image: url("https://images.unsplash.com/photo-1517976487492-5750f3195933?q=80&w=900&auto=format&fit=crop");
    }
}

/* Core Capabilities — shared background (all breakpoints) */
body.home-page #procurement {
    position: relative;
    isolation: isolate;
    width: 100%;
    overflow: hidden;
    background-color: var(--brand-ink);
    background-image:
        linear-gradient(rgba(6, 16, 40, 0.32), rgba(6, 16, 40, 0.32)),
        url("/images/procurement-bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

body.home-page #procurement > .section-bg {
    opacity: 0;
    pointer-events: none;
}

/* Match Agencies We Serve section overlay (body.home-page section.home-agency-mission .overlay) */
body.home-page #procurement > .overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(18, 21, 28, 0.55) 0%,
        rgba(18, 21, 28, 0.68) 40%,
        rgba(18, 21, 28, 0.78) 100%
    );
}

/* Desktop snap — flex layout, full viewport band */
@media (min-width: 1200px) {
    body.home-page #procurement {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        min-height: calc(100vh - var(--navbar-offset));
        padding-top: 72px;
        padding-bottom: 2rem;
    }

    body.home-page #procurement > .content-container {
        position: relative;
        z-index: 3;
        width: 90%;
        max-width: 1220px;
        margin-inline: auto;
        padding-top: 0;
        padding-bottom: 22px;
        box-sizing: border-box;
    }

    body.home-page #procurement .capabilities-container {
        max-width: 1220px;
        padding-left: clamp(0.5rem, 2vw, 1rem);
        padding-right: clamp(0.5rem, 2vw, 1rem);
    }
}

/* Tablet + mobile — overlay covers full section; 1rem gutters like Agencies We Serve */
@media (max-width: 1199.98px) {
    body.home-page #procurement {
        display: block;
        min-height: auto;
        padding: 0;
        overflow: visible;
        scroll-margin-top: var(--navbar-offset);
    }

    /* Section padding sits outside grid areas — keep padding on content only */
    body.home-page #procurement > .overlay {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        min-height: 100%;
        margin: 0;
    }

    body.home-page #procurement > .content-container.capabilities-container {
        position: relative;
        z-index: 3;
        width: 100%;
        max-width: 100%;
        margin-inline: auto;
        padding: calc(var(--navbar-offset) + 0.75rem) 1rem 1.5rem;
        box-sizing: border-box;
    }

    body.home-page #procurement .ethio-heading {
        font-size: clamp(1.45rem, 5.5vw, 2rem);
        margin-bottom: 1rem;
    }
}

/* Home page: more dots (hero + capabilities + 6 agencies + rest) */
body.home-page .side-dots {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    z-index: 1101;
    gap: 8px;
    right: calc(var(--snap-scrollbar-width, 0px) + 16px);
    padding-right: 0;
    pointer-events: auto;
}

body.home-page .side-dots .dot-link {
    width: 9px;
    height: 9px;
}

body.home-page .side-dots .dot-link.active {
    transform: scale(1.3);
}

/* Home agency missions — match Core Capabilities overlay + centered content */
body.home-page section.home-agency-mission {
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: flex-start;
    min-height: 100dvh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding: 0;
    margin: 0;
    overflow: hidden;
    box-sizing: border-box;
}

/* Desktop snap: one agency band per viewport */
@media (min-width: 1200px) {
    .home-agency-stack {
        display: block;
        gap: 0;
        padding: 0;
        background: transparent;
    }

    .home-agency-stack__head {
        display: none;
    }

    .home-agency-stack .home-agency-mission__header--desktop {
        display: block;
    }

    .home-agency-stack .home-agency-mission {
        margin-bottom: 0;
    }

    body.home-page section.home-agency-mission {
        justify-content: center;
        min-height: 100dvh;
        padding-top: calc(var(--navbar-offset) + 1.5rem);
        padding-bottom: 40px;
        overflow: hidden;
    }

    .home-agency-stack .home-agency-mission__bg,
    .home-agency-stack .home-agency-mission .overlay {
        display: block;
    }
}

body.home-page section.home-agency-mission .home-agency-mission__bg {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

body.home-page section.home-agency-mission.is-visible .home-agency-mission__bg {
    transform: scale(1.08);
}

.home-agency-mission--dod .home-agency-mission__bg {
    background-image:
        linear-gradient(rgba(6, 16, 40, 0.38), rgba(6, 16, 40, 0.38)),
        url("/images/agencies/home-bands/dod.jpg");
    background-position: 58% center;
}

.home-agency-mission--doi .home-agency-mission__bg {
    background-image:
        linear-gradient(rgba(6, 16, 40, 0.38), rgba(6, 16, 40, 0.38)),
        url("/images/agencies/home-bands/doi.jpg");
}

.home-agency-mission--usda .home-agency-mission__bg {
    background-image:
        linear-gradient(rgba(6, 16, 40, 0.38), rgba(6, 16, 40, 0.38)),
        url("/images/agencies/home-bands/usda.jpg");
}

.home-agency-mission--va .home-agency-mission__bg {
    background-image:
        linear-gradient(rgba(6, 16, 40, 0.38), rgba(6, 16, 40, 0.38)),
        url("/images/agencies/home-bands/va.jpg");
    background-position: 68% center;
}

.home-agency-mission--dhs .home-agency-mission__bg {
    background-image:
        linear-gradient(rgba(6, 16, 40, 0.38), rgba(6, 16, 40, 0.38)),
        url("/images/agencies/home-bands/dhs.jpg");
    background-position: center 40%;
}

.home-agency-mission--state .home-agency-mission__bg {
    background-image:
        linear-gradient(rgba(6, 16, 40, 0.38), rgba(6, 16, 40, 0.38)),
        url("/images/agencies/home-bands/state-municipal.jpg");
}

body.home-page section.home-agency-mission .overlay {
    background: linear-gradient(
        180deg,
        rgba(18, 21, 28, 0.55) 0%,
        rgba(18, 21, 28, 0.68) 40%,
        rgba(18, 21, 28, 0.78) 100%
    );
}

body.home-page section.home-agency-mission .home-agency-mission__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none;
    padding: 0 clamp(16px, 3vw, 40px);
    margin: 0;
}

/* Mission card — horizontal layout, height fits content */
.home-agency-mission__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: min(920px, 94vw);
    margin: 0 auto;
}

.home-agency-mission__header {
    width: 100%;
    margin: 0 0 clamp(0.75rem, 1.4vh, 1rem);
    padding: 0;
}

.home-agency-mission__header--desktop {
    width: 100%;
}

body.home-page .home-agency-mission__header .home-agency-mission__series {
    display: block;
    margin: 0;
    text-align: left;
    letter-spacing: 0.28em;
    font-size: 0.78rem;
}

.home-agency-mission__inner {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    padding: clamp(0.85rem, 1.6vw, 1.1rem) clamp(1rem, 2vw, 1.35rem);
    padding-top: clamp(1rem, 1.8vw, 1.25rem);
    text-align: left;
    overflow: visible;
    background: linear-gradient(
        165deg,
        rgba(18, 21, 28, 0.88) 0%,
        rgba(12, 12, 12, 0.82) 100%
    );
    border: 1px solid rgba(22, 103, 128, 0.22);
    border-top: 4px solid var(--ethio-gold);
    border-radius: 8px;
    backdrop-filter: blur(10px);
    box-shadow:
        0 24px 56px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.home-agency-mission__layout {
    display: flex;
    align-items: flex-start;
    gap: clamp(0.85rem, 1.8vw, 1.25rem);
    width: 100%;
}

.home-agency-mission__aside {
    flex-shrink: 0;
    padding-top: 0;
}

.home-agency-mission__seal-frame {
    width: clamp(72px, 9vw, 96px);
    height: clamp(72px, 9vw, 96px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.home-agency-mission__seal-frame--circle {
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    padding: clamp(4px, 0.5vw, 6px);
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.35),
        inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.home-agency-mission__seal {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.home-agency-mission--doi .home-agency-mission__seal-frame--circle {
    width: clamp(88px, 11vw, 112px);
    height: clamp(88px, 11vw, 112px);
    padding: clamp(3px, 0.35vw, 4px);
}

.home-agency-mission--doi .home-agency-mission__seal-frame--circle .home-agency-mission__seal {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transform: scale(1.18);
}

.home-agency-mission--usda .home-agency-mission__seal-frame--circle .home-agency-mission__seal {
    width: 88%;
    height: 88%;
}

.home-agency-mission--usda .home-agency-mission__seal-frame--circle {
    padding: clamp(3px, 0.4vw, 4px);
}

.home-agency-mission--state .home-agency-mission__seal-frame--circle .home-agency-mission__seal {
    width: 90%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    border-radius: 50%;
    background: #fff;
    padding: clamp(3px, 0.35vw, 4px);
    box-sizing: border-box;
}

.home-agency-mission--state .home-agency-mission__seal-frame--circle {
    padding: clamp(3px, 0.4vw, 4px);
}

.home-agency-mission__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(0.55rem, 1.1vh, 0.75rem);
    padding-right: clamp(2rem, 4.5vw, 2.75rem);
}

.home-agency-mission__step {
    position: absolute;
    top: clamp(0.75rem, 1.5vw, 0.95rem);
    right: clamp(1rem, 2vw, 1.35rem);
    margin: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: right;
    white-space: nowrap;
    color: var(--brand-sea);
}

.home-agency-mission__step span {
    color: rgba(142, 196, 232, 0.55);
}

body.home-page .home-agency-mission__title {
    margin-bottom: 0.35rem;
    font-size: clamp(1.15rem, 2.2vw, 1.65rem);
    line-height: 1.12;
    text-align: left;
}

body.home-page .home-agency-mission__copy {
    margin: 0;
    max-width: none;
    font-size: clamp(0.86rem, 1.25vw, 0.98rem);
    line-height: 1.5;
    text-align: left;
    color: rgba(239, 239, 239, 0.92);
}

.home-agency-mission__main {
    width: 100%;
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible;
}

.home-agency-mission__action {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    flex-shrink: 0;
    margin-top: 0.35rem;
}

body.home-page .home-agency-mission__action .btn-agency-mission-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    overflow: hidden;
    white-space: nowrap;
    background: linear-gradient(135deg, #166780 0%, #166780 52%, #0f5165 100%);
    border: 1px solid rgba(22, 103, 128, 0.55);
    border-radius: 3px;
    box-shadow:
        0 10px 24px rgba(18, 21, 28, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: clamp(0.62rem, 0.52rem + 0.34vw, 0.76rem);
    font-weight: 800;
    letter-spacing: 0.14em;
    padding: clamp(0.42rem, 0.32rem + 0.42vw, 0.62rem)
        clamp(0.75rem, 0.55rem + 0.95vw, 1.35rem);
    text-transform: uppercase;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

body.home-page .home-agency-mission__action .btn-agency-mission-cta__label,
body.home-page .home-agency-mission__action .btn-agency-mission-cta__icon {
    position: relative;
    z-index: 1;
}

body.home-page .home-agency-mission__action .btn-agency-mission-cta__icon {
    font-size: 0.82rem;
    transition: transform 0.25s ease;
}

body.home-page .home-agency-mission__action .btn-agency-mission-cta:hover .btn-agency-mission-cta__icon,
body.home-page .home-agency-mission__action .btn-agency-mission-cta:focus .btn-agency-mission-cta__icon {
    transform: translateX(4px);
}

body.home-page .home-agency-mission__action .btn-agency-mission-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0) 30%,
        rgba(255, 255, 255, 0.16) 50%,
        rgba(255, 255, 255, 0) 70%
    );
    transform: translateX(-120%);
    transition: transform 0.45s ease;
}

body.home-page .home-agency-mission__action .btn-agency-mission-cta:hover,
body.home-page .home-agency-mission__action .btn-agency-mission-cta:focus {
    background: linear-gradient(135deg, #166780 0%, #166780 52%, #166780 100%);
    color: #fff;
    transform: translateY(-2px);
    box-shadow:
        0 14px 28px rgba(18, 21, 28, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

body.home-page .home-agency-mission__action .btn-agency-mission-cta:hover::before,
body.home-page .home-agency-mission__action .btn-agency-mission-cta:focus::before {
    transform: translateX(120%);
}

@media (max-width: 991px) {
    .home-agency-mission__card {
        width: min(540px, 94vw);
    }

    .home-agency-stack .home-agency-mission__card {
        width: 100%;
    }

    .home-agency-mission__inner {
        padding: 0.8rem 0.95rem;
        padding-top: 1rem;
    }

    .home-agency-stack .home-agency-mission__inner {
        padding: 1.125rem 1.25rem 1.5rem;
    }

    .home-agency-mission__layout {
        flex-direction: column;
        gap: 0.75rem;
    }

    .home-agency-mission__content {
        padding-right: 2.25rem;
    }

    .home-agency-mission__seal-frame {
        width: 64px;
        height: 64px;
    }

    .home-agency-mission__seal-frame--circle {
        padding: 4px;
    }

    .home-agency-mission--doi .home-agency-mission__seal-frame--circle {
        width: 80px;
        height: 80px;
        padding: 3px;
    }

    .home-agency-mission--doi .home-agency-mission__seal-frame--circle .home-agency-mission__seal {
        transform: scale(1.16);
    }

    body.home-page .home-agency-mission__title {
        font-size: clamp(1.2rem, 4vw, 1.65rem);
    }

    body.home-page .home-agency-mission__copy {
        font-size: clamp(0.84rem, 2.8vw, 0.95rem);
        line-height: 1.48;
    }
}

@media (max-width: 1199px) {
    .home-agency-stack .home-agency-mission__card {
        width: 100%;
        margin-top: clamp(0.75rem, 2.5vw, 1.25rem);
        margin-bottom: clamp(0.75rem, 2.5vw, 1.25rem);
    }

    .home-agency-stack .home-agency-mission__inner {
        padding: 1.125rem 1.25rem 1.5rem;
        border-radius: 8px;
        background: linear-gradient(
            165deg,
            rgba(4, 14, 34, 0.48) 0%,
            rgba(18, 21, 28, 0.42) 100%
        );
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow:
            0 12px 32px rgba(0, 0, 0, 0.45),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .home-agency-stack .home-agency-mission__content {
        padding-right: 2.5rem;
        gap: 0.85rem;
    }

    .home-agency-stack .home-agency-mission__action {
        margin-top: 0.5rem;
    }

    body.home-page .home-agency-stack .home-agency-mission__title {
        margin-bottom: 0.5rem;
    }

    body.home-page .home-agency-stack .home-agency-mission__copy {
        font-size: 0.9rem;
        line-height: 1.55;
    }

    .home-agency-stack .home-agency-mission__container.content-container {
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* ----------------------------------------------------------
   Home agency — Peraton-style slide (first band)
---------------------------------------------------------- */
.home-agency-mission--slide {
    position: relative;
    justify-content: center;
    overflow: visible;
    min-height: 100dvh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

body.home-page section.home-agency-mission--slide {
    overflow: visible;
}

.home-agency-mission--slide .home-agency-mission__bg {
    display: none !important;
}

.home-agency-sliced {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.home-agency-slice {
    position: absolute;
    top: 0;
    height: 100%;
    overflow: hidden;
    will-change: transform;
}

.home-agency-slice__inside {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-image:
        linear-gradient(rgba(6, 16, 40, 0.22), rgba(6, 16, 40, 0.22)),
        var(--slice-bg-image, none);
    background-position: var(--slice-bg-position, center center);
}

.home-agency-slide__lines {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.home-agency-slide__line {
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: rgba(255, 255, 255, 0.14);
    opacity: 0;
    visibility: hidden;
}

body.home-page .home-agency-mission--slide .home-agency-mission__overlay {
    z-index: 3;
    background:
        linear-gradient(
            to top,
            rgba(6, 10, 22, 0.58) 0%,
            rgba(6, 10, 22, 0.22) 28%,
            transparent 52%
        ),
        linear-gradient(
            100deg,
            rgba(6, 16, 40, 0.62) 0%,
            rgba(6, 16, 40, 0.4) 38%,
            rgba(12, 18, 32, 0.16) 62%,
            rgba(18, 21, 28, 0.08) 100%
        ),
        radial-gradient(
            ellipse 120% 90% at 18% 50%,
            rgba(6, 16, 40, 0.32) 0%,
            transparent 68%
        );
}

.home-agency-slide__container {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    width: 100%;
    max-width: none;
    min-height: inherit;
    padding: clamp(1.25rem, 3vw, 2.75rem) clamp(1.25rem, 4vw, 3.5rem) clamp(3.5rem, 7vh, 5rem);
    box-sizing: border-box;
}

.home-agency-slide__step {
    position: absolute;
    top: clamp(1rem, 2.5vh, 1.75rem);
    right: clamp(1.25rem, 4vw, 3.5rem);
    z-index: 2;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-sea);
    pointer-events: none;
}

.home-agency-slide__step span {
    color: rgba(142, 196, 232, 0.5);
}

.home-agency-slide__grid {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    flex: 1;
}

.home-agency-slide__content {
    position: relative;
    width: min(100%, 52rem);
    max-width: 72%;
    padding: 0;
    text-align: left;
}

.home-agency-slide__eyebrow-wrap {
    margin: 0 0 clamp(0.85rem, 1.6vh, 1.15rem);
}

.home-agency-slide__eyebrow {
    display: inline-block;
    margin: 0;
    font-size: clamp(0.68rem, 0.9vw, 0.78rem);
    letter-spacing: 0.32em;
    color: rgba(255, 255, 255, 0.92);
    text-transform: uppercase;
}

.home-agency-slide__title {
    margin: 0 0 clamp(1rem, 2vh, 1.35rem);
    max-width: none;
    font-size: clamp(2rem, 4.8vw, 3.85rem);
    line-height: 1.05;
    font-weight: 900;
    color: #fff;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    overflow: hidden;
}

.home-agency-mission--title-char .home-agency-slide__title-line {
    display: block;
}

.home-agency-slide__word {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    vertical-align: top;
}

.home-agency-mission--title-char .home-agency-slide__char {
    position: relative;
    display: inline-block;
    vertical-align: bottom;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 100%, 0);
    transform-origin: 50% 100%;
    will-change: transform, opacity;
}

.home-agency-mission--title-char .home-agency-slide__char--space {
    width: 0.28em;
}

/* Sections 01, 03, 05 — full-line horizontal wipe (not per-letter) */
.home-agency-mission--title-line .home-agency-slide__title-line {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(-3.25rem, 0, 0);
    filter: blur(8px);
    will-change: transform, opacity, filter;
}

.home-agency-slide__reveal-block {
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 14px, 0);
    will-change: transform, opacity;
}

.home-agency-mission--title-char.is-text-visible .home-agency-slide__char {
    animation-name: homeAgencyCharReveal;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-fill-mode: both;
    /* animation-delay + animation-duration set per letter in custom.js (ms) */
}

.home-agency-mission--title-line.is-text-visible .home-agency-slide__title-line {
    animation-name: homeAgencyLineReveal;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-fill-mode: both;
    /* delay + duration set per line in custom.js (ms) */
}

.home-agency-mission--slide.is-text-visible .home-agency-slide__reveal-block--eyebrow {
    animation-name: homeAgencyTextReveal;
    animation-duration: 550ms;
    animation-delay: var(--eyebrow-delay-ms, 80ms);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-fill-mode: both;
}

.home-agency-mission--slide.is-text-visible .home-agency-slide__reveal-block--copy {
    animation-name: homeAgencyTextReveal;
    animation-duration: 480ms;
    animation-delay: var(--copy-delay-ms, 580ms);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-fill-mode: both;
}

.home-agency-mission--slide.is-text-visible .home-agency-slide__reveal-block--cta {
    animation-name: homeAgencyTextReveal;
    animation-duration: 450ms;
    animation-delay: var(--cta-delay-ms, 680ms);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-fill-mode: both;
}

.home-agency-mission--slide.is-text-visible .home-agency-slide__reveal-block--next {
    animation-name: homeAgencyTextReveal;
    animation-duration: 420ms;
    animation-delay: var(--next-delay-ms, 780ms);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-fill-mode: both;
}

.home-agency-mission--title-char:not(.is-text-visible) .home-agency-slide__char {
    animation: none;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 100%, 0);
}

.home-agency-mission--title-line:not(.is-text-visible) .home-agency-slide__title-line {
    animation: none;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(-3.25rem, 0, 0);
    filter: blur(8px);
}

.home-agency-mission--slide:not(.is-text-visible) .home-agency-slide__reveal-block {
    animation: none;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 14px, 0);
}

/* Hide full title until JS splits into per-letter spans (02, 04, 06) */
.home-agency-mission--title-char [data-agency-split-title]:not(:has(.home-agency-slide__char)) {
    visibility: hidden;
}

.home-agency-mission--title-char [data-agency-split-title]:has(.home-agency-slide__char) {
    visibility: visible;
}

@keyframes homeAgencyLineReveal {
    from {
        opacity: 0;
        visibility: hidden;
        transform: translate3d(-3.25rem, 0, 0);
        filter: blur(8px);
    }
    to {
        opacity: 1;
        visibility: inherit;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

@keyframes homeAgencyCharReveal {
    from {
        opacity: 0;
        visibility: hidden;
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
        visibility: inherit;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes homeAgencyTextReveal {
    from {
        opacity: 0;
        visibility: hidden;
        transform: translate3d(0, 14px, 0);
    }
    to {
        opacity: 1;
        visibility: inherit;
        transform: translate3d(0, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-agency-mission--slide.is-text-visible .home-agency-slide__char,
    .home-agency-mission--slide.is-text-visible .home-agency-slide__title-line,
    .home-agency-mission--slide.is-text-visible .home-agency-slide__reveal-block,
    .home-agency-mission--slide.is-text-reduced .home-agency-slide__char,
    .home-agency-mission--slide.is-text-reduced .home-agency-slide__title-line,
    .home-agency-mission--slide.is-text-reduced .home-agency-slide__reveal-block {
        opacity: 1;
        visibility: inherit;
        transform: none;
        filter: none;
        animation: none;
    }
}

.home-agency-slide__copy {
    margin: 0;
    max-width: 38rem;
    font-size: clamp(1rem, 1.45vw, 1.2rem);
    line-height: 1.58;
    color: rgba(239, 239, 239, 0.96);
}

.home-agency-slide__cta-wrap {
    margin: clamp(1.15rem, 2.4vh, 1.65rem) 0 0;
}

.home-agency-slide__cta.button-more {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0;
    padding: 0.7rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 2px;
    background: transparent;
    color: #fff;
    font-size: clamp(0.68rem, 0.85vw, 0.76rem);
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease,
        gap 0.25s ease;
}

.home-agency-slide__cta.button-more i {
    font-size: 0.78rem;
    transition: transform 0.25s ease;
}

.home-agency-slide__cta.button-more:hover,
.home-agency-slide__cta.button-more:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.65);
    color: #fff;
    transform: translateY(-1px);
    gap: 0.85rem;
}

.home-agency-slide__cta.button-more:hover i,
.home-agency-slide__cta.button-more:focus i {
    transform: translateX(3px);
}

.home-agency-slide__footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(1.5rem, 3.5vh, 2.5rem);
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0 clamp(1.25rem, 4vw, 3.5rem);
    box-sizing: border-box;
    pointer-events: none;
}

.home-agency-slide__next {
    margin: 0;
    padding: 0.5rem 0.85rem;
    border: 0;
    background: none;
    color: rgba(142, 196, 232, 0.82);
    font-size: clamp(0.66rem, 0.8vw, 0.74rem);
    font-weight: 800;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    cursor: pointer;
    pointer-events: auto;
    transition: color 0.2s ease;
}

.home-agency-slide__next:hover,
.home-agency-slide__next:focus {
    color: #fff;
}

.home-agency-mission--slide:not(.home-agency-mission--slide-no-slices).is-visible .home-agency-slice {
    animation: homeAgencySliceReveal 1.65s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--slice-index, 0) * 0.1s);
}

@keyframes homeAgencySliceReveal {
    from {
        transform: translateY(8%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

body.home-page .home-agency-stack .home-agency-mission--slide.home-agency-mission--slide-no-slices {
    background-image:
        linear-gradient(rgba(6, 16, 40, 0.22), rgba(6, 16, 40, 0.22)),
        var(--home-agency-slide-bg);
    background-position: var(--home-agency-slide-bg-position, center center);
    background-size: cover;
    background-repeat: no-repeat;
}

@media (min-width: 1200px) {
    body.home-page .home-agency-stack .home-agency-mission--slide:not(.home-agency-mission--slide-no-slices) {
        background-image: none;
    }

    body.home-page section.home-agency-mission--slide {
        justify-content: center;
        padding-top: 72px;
        padding-bottom: clamp(3.5rem, 6vh, 4.5rem);
    }

    .home-agency-slide__container {
        min-height: calc(100vh - var(--navbar-offset) - 72px);
        padding-bottom: clamp(4.5rem, 9vh, 6rem);
    }

    .home-agency-slide__footer {
        bottom: clamp(1.75rem, 4vh, 3rem);
    }

    .home-agency-slide__content {
        width: min(58rem, 68vw);
        max-width: 68%;
    }

    .home-agency-slide__title {
        max-width: none;
        font-size: clamp(2.75rem, 4.2vw, 4.1rem);
    }

    .home-agency-slide__copy {
        max-width: 42rem;
        font-size: clamp(1.05rem, 1.25vw, 1.22rem);
        line-height: 1.6;
    }
}

@media (max-width: 1199px) {
    .home-agency-mission--slide:not(.home-agency-mission--slide-no-slices) .home-agency-sliced,
    .home-agency-mission--slide:not(.home-agency-mission--slide-no-slices) .home-agency-slide__lines {
        display: none;
    }

    body.home-page .home-agency-stack .home-agency-mission--slide {
        background-image:
            linear-gradient(rgba(6, 16, 40, 0.22), rgba(6, 16, 40, 0.22)),
            var(--home-agency-slide-bg);
        background-position: var(--home-agency-slide-bg-position, center center);
        background-size: cover;
        background-repeat: no-repeat;
    }

    .home-agency-slide__container {
        padding: 1rem 1rem 1.75rem;
    }

    .home-agency-slide__footer {
        display: none;
    }

    .home-agency-slide__content {
        width: 100%;
        max-width: none;
    }

    .home-agency-slide__title {
        max-width: none;
        font-size: clamp(1.85rem, 7.5vw, 2.65rem);
    }

    .home-agency-slide__step {
        top: 0.75rem;
        right: 1rem;
    }
}

/* ============================
   Trust Bar (Hero, Footer, Header)
   ============================ */

.trust-bar {
    position: relative;
    z-index: 4;
    background:
        radial-gradient(circle at 18% 22%, rgba(22, 103, 128, 0.2), transparent 46%),
        radial-gradient(circle at 84% 4%, rgba(22, 103, 128, 0.11), transparent 42%),
        linear-gradient(165deg, var(--brand-ink-deeper) 0%, var(--brand-deep-muted) 56%, var(--brand-deep-elevated) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Inside hero: pinned to bottom of hero, not a new section */
.trust-bar--hero {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Hero content spacing (no pinned in-hero trust bar; global bar is in site header) */
#hero .content-container {
    padding-bottom: 40px;
}

/* Footer variant: visually consistent, but not pinned */
.trust-bar--footer {
    border-radius: 14px;
    overflow: hidden;
}

/* Top utility strip — PDS gold brand bar */
.trust-bar--header {
    z-index: 2;
    flex-shrink: 0;
    border-top: none;
    border-bottom: none;
    background: linear-gradient(90deg, #F7A41C 0%, #e8970f 50%, #F7A41C 100%);
}

.trust-bar--header .trust-bar__row {
    padding: 3px 0;
}

.trust-bar--header .trust-bar__chunk {
    font-size: 0.66rem;
    color: rgba(35, 31, 32, 0.90);
}

.trust-bar--header .trust-bar__chunk:not(:last-child)::after {
    color: rgba(35, 31, 32, 0.40);
}

.trust-bar--header .trust-bar__label {
    font-size: 0.52rem;
    color: rgba(35, 31, 32, 0.78);
}

.trust-bar--header .trust-bar__value,
.trust-bar--header .trust-bar__link {
    color: #231F20;
}

.trust-bar--header .trust-bar__link:hover {
    color: #166780;
}

@media (max-width: 575.98px) {
    .trust-bar--header .trust-bar__chunk:not(:last-child)::after {
        margin: 0 6px;
    }
}

@media (max-width: 575.98px) {
    #hero .content-container {
        padding-bottom: 32px;
    }
}

/* Keep hero trust bar visible on tablet/mobile (override base pinned style) */
@media (max-width: 1199px) {
    body.home-page .trust-bar--hero {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        margin-top: 12px;
        margin-bottom: 0;
    }
}

/* --- Separator-style layout (requested) --- */
.trust-bar__row {
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
    text-align: center;
}

.trust-bar__chunk {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    color: rgba(220, 228, 244, 0.9);
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0.015em;
    white-space: nowrap;
    font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-style: normal;
}

.trust-bar__chunk:not(:last-child)::after {
    content: "|";
    margin: 0 12px;
    color: rgba(173, 186, 211, 0.6);
    font-weight: 400;
}

.trust-bar__label {
    font-size: 0.64rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    font-weight: 500;
    color: rgba(173, 186, 211, 0.9);
}

.trust-bar__value,
.trust-bar__link {
    color: rgba(224, 232, 246, 0.94);
    font-weight: 500;
    text-decoration: none;
}

.trust-bar__link:hover {
    color: rgba(240, 245, 255, 1);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* Trust bar: wrap on tablet/phone so nothing is clipped by overflow-x on body */
@media (max-width: 991.98px) {
    .trust-bar--header .trust-bar__row {
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 4px 8px;
        padding: 5px 8px;
        max-width: 100%;
    }

    .trust-bar--header .trust-bar__chunk {
        white-space: normal;
        flex: 0 1 auto;
        max-width: 100%;
        font-size: clamp(0.62rem, 2.6vw, 0.72rem);
        text-align: center;
    }

    .trust-bar--header .trust-bar__chunk:not(:last-child)::after {
        margin: 0 8px;
    }
}

/* iPad / small laptop: keep credentials on one or two tidy rows (no overlap) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .trust-bar--header .trust-bar__row {
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        row-gap: 2px;
        column-gap: 4px;
        padding: 4px 10px;
    }

    .trust-bar--header .trust-bar__chunk {
        font-size: clamp(0.56rem, 0.95vw, 0.64rem);
        flex: 0 1 auto;
    }

    .trust-bar--header .trust-bar__chunk:not(:last-child)::after {
        margin: 0 5px;
    }
}

@media (max-width: 575.98px) {
    .trust-bar__row {
        justify-content: center;
        text-align: center;
        row-gap: 6px;
    }

    .trust-bar__chunk {
        white-space: normal;
    }

    .trust-bar__chunk:not(:last-child)::after {
        margin: 0 10px;
    }

    .trust-bar--header .trust-bar__row {
        padding: 5px 8px;
        gap: 4px 6px;
    }

    .trust-bar--header .trust-bar__chunk {
        font-size: clamp(0.6rem, 2.9vw, 0.68rem);
        line-height: 1.35;
    }

    .site-header .navbar {
        padding-top: 0.55rem !important;
        padding-bottom: 0.55rem !important;
    }

    .site-header .navbar .container-fluid {
        align-items: center;
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }

    .site-header .navbar .navbar-brand {
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.45rem;
    }
}

.innovation-card {
    background: rgba(22, 103, 128, 0.1);
    border: 1px solid var(--ethio-red);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Animation delay helpers (used with .reveal blocks) */
.delay-02 {
    animation-delay: 0.2s;
}
.delay-05 {
    animation-delay: 0.5s;
}
.delay-06 {
    animation-delay: 0.6s;
}
.delay-10 {
    animation-delay: 1s;
}

/* Collapsed hamburger menu only — do not apply at lg+ or mega panels break (992–1199px) */
@media (max-width: 991.98px) {
    .health-mega-dropdown-wrap .dropdown-menu {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    .navbar-collapse .dropdown-menu {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100%;
        min-width: 0;
        transform: none !important;
        overflow: visible;
        border: 0;
        background: transparent;
        margin-top: 0.25rem;
    }

    .navbar-collapse .dropdown {
        display: block;
    }

    .navbar-collapse .dropdown.show > .dropdown-menu {
        display: block;
    }

    .navbar-collapse .dropdown-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
    }

    .navbar-collapse .dropdown-toggle::after {
        margin-left: 0.1rem;
        vertical-align: middle;
    }

    .navbar-collapse .dropdown-toggle[aria-expanded="true"]::after {
        transform: rotate(180deg);
    }

    .navbar-collapse .dropdown-item {
        color: var(--nav-ink-muted);
        padding-left: 1.75rem;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.35;
        font-size: 0.9rem;
    }

    .navbar-collapse .dropdown-item:hover {
        color: var(--brand-primary);
        background: rgba(22, 103, 128, 0.08);
    }

    .navbar-collapse .mobile-submenu-list {
        list-style: none;
        padding-left: 1.1rem;
        margin-bottom: 0;
    }

    .navbar-collapse .mobile-submenu-list > li {
        margin-bottom: 0.1rem;
    }

    .navbar-collapse .mobile-submenu-list .dropdown-item {
        display: block;
        padding-left: 0.35rem;
    }
}

/* Mobile menu (hamburger): numbered submenu links (theme blue) */
@media (max-width: 991.98px) {
    .navbar-collapse .mobile-submenu-list {
        counter-reset: mobile-subnav;
    }

    .navbar-collapse .mobile-submenu-list > li {
        counter-increment: mobile-subnav;
    }

    .navbar-collapse .mobile-submenu-list .dropdown-item {
        position: relative;
        display: block;
        padding-left: 2.15rem;
    }

    .navbar-collapse .mobile-submenu-list .dropdown-item::before {
        content: counter(mobile-subnav) ".";
        position: absolute;
        left: 0.35rem;
        top: 0.55em;
        min-width: 1.4rem;
        text-align: right;
        color: var(--brand-primary);
        font-weight: 700;
        font-size: 0.82em;
        line-height: 1.35;
    }
}

@media (max-width: 575.98px) {
    .navbar-collapse .mobile-submenu-list .dropdown-item {
        padding-left: 2.15rem;
        padding-right: 0.75rem;
        font-size: 0.86rem;
    }
}

.navbar .nav-link.active {
    color: var(--ethio-red) !important;
}

.navbar .dropdown-menu .dropdown-item.active,
.navbar .dropdown-menu .dropdown-item:active {
    background: rgba(22, 103, 128, 0.12);
    color: var(--ethio-red);
}

.about-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 3px solid var(--ethio-red);
    backdrop-filter: blur(5px);
    padding: 2rem 1.5rem;
    height: 100%;
}

.about-card h4 {
    font-weight: 800;
    margin-bottom: 1rem;
}

.about-card p {
    color: #efefef;
    font-size: 0.95rem;
    line-height: 1.7;
}

.about-read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.76rem;
    letter-spacing: 1.1px;
    font-weight: 700;
    transition: all 0.25s ease;
}

.about-read-more::after {
    content: ">";
    font-size: 0.75rem;
    line-height: 1;
}

.about-read-more:hover {
    background: #fff;
    color: #0a192f;
    border-color: #fff;
}

.about-icon {
    color: var(--ethio-red);
    font-size: 2rem;
    margin-bottom: 1rem;
}

.about-story-image {
    display: block;
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
}

.customer-logo-wrap {
    width: 128px;
    height: 128px;
    margin: 0 auto;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    transition:
        transform 0.3s ease,
        border-color 0.3s ease;
}

.customer-logo-wrap:hover {
    transform: translateY(-4px);
    border-color: var(--ethio-red);
}

.customer-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

.contact-hero .overlay {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.2) 0%,
        rgba(0, 0, 0, 0.68) 100%
    );
}

.contact-hero {
    position: relative;
    min-height: 250px;
    display: flex;
    align-items: flex-end;
    padding: 96px 0 26px;
    overflow: hidden;
}

/* Force image-only header on contact page */
.contact-hero video,
.contact-hero .hero-video,
.contact-simple-page .contact-hero video {
    display: none !important;
}

.contact-hero-title {
    font-weight: 900;
    font-size: clamp(2.2rem, 5.8vw, 3.9rem);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.02;
}

.contact-hero-copy {
    color: rgba(255, 255, 255, 0.9);
    max-width: 680px;
    margin-top: 0.7rem;
    margin-bottom: 0;
    font-size: 0.92rem;
    letter-spacing: 0.1px;
    line-height: 1.6;
}

.contact-hero .content-container {
    max-width: 1050px;
}

.contact-main-section .content-container {
    max-width: 1200px;
}

.contact-main-section {
    --contact-field-height: 46px;
    position: relative;
    height: auto;
    min-height: auto;
    background: #060606;
    padding-top: 70px;
    padding-bottom: 72px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.contact-content-wrap {
    padding-top: 2rem;
    padding-bottom: 0;
}

.contact-top-intro {
    margin-bottom: 2.4rem;
}

.contact-section-heading {
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    margin-top: 0;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contact-white-line {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.22);
}

.contact-intro-text {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 1.1rem;
    line-height: 1.55;
}

.contact-aside-box {
    border-left: 1px solid rgba(255, 255, 255, 0.26);
    padding-left: 1.8rem;
    margin-top: 2px;
}

.contact-aside-box h3 {
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 800;
    margin-bottom: 1rem;
}

.contact-details-list {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 1rem;
}

.contact-details-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-details-list li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.contact-details-list li.contact-meta-stack {
    display: block;
    margin-top: 0.35rem;
    margin-bottom: 0;
    padding-left: 34px; /* align with text column after icon+gap */
}

.contact-meta-stack {
    display: grid;
    gap: 0.15rem;
    align-items: start;
    font-size: 0.8 rem !important;
    font-weight: 400;
    letter-spacing: 0.015em;
    color: rgba(220, 228, 244, 0.9);
    font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-style: normal;
}

.contact-meta-stack > div {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}

.contact-meta-label {
    font-size: 0.64rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    font-weight: 500;
    color: rgba(173, 186, 211, 0.9);
}

.contact-meta-value {
    color: rgba(224, 232, 246, 0.94);
    font-weight: 500;
    font-size: 0.66rem;
}

.contact-details-list i {
    color: var(--ethio-red);
    margin-top: 4px;
    min-width: 20px;
}

.contact-details-list a {
    color: #e9e9e9;
    text-decoration: none;
    line-height: 1.5;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

.contact-details-list a:hover {
    color: #fff;
    border-color: var(--ethio-red);
}

.contact-main-section .contact-form-alert.alert-success {
    background: rgba(25, 135, 84, 0.18);
    color: #b3d4eb;
    border-left: 4px solid #166780 !important;
}

.contact-main-section .contact-form-alert.alert-danger {
    background: rgba(22, 103, 128, 0.12);
    color: #b3d4eb;
    border-left: 4px solid var(--ethio-red) !important;
}

.contact-main-section .contact-form-alert ul {
    color: rgba(255, 255, 255, 0.92);
}

.contact-form-box {
    --contact-field-height: 46px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    padding: 1rem;
}

.contact-input {
    border-radius: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #f6f6f6;
    min-height: var(--contact-field-height);
    font-size: 0.84rem;
    letter-spacing: 0.3px;
}

/* Uniform single-line field height: text, email, selects, phone */
.contact-form-box input.contact-input:not(.contact-textarea),
.contact-form-box select.contact-input {
    height: var(--contact-field-height);
    min-height: var(--contact-field-height);
    max-height: var(--contact-field-height);
    padding: 0 0.75rem;
    line-height: calc(var(--contact-field-height) - 2px);
    box-sizing: border-box;
}

.contact-form-box select.contact-input {
    padding-right: 2rem;
    background-position: right 0.65rem center;
    background-size: 12px 9px;
}

.contact-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.contact-input:focus {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--ethio-red);
    color: #fff;
    box-shadow: none;
}

.contact-main-section select.contact-input option {
    color: #111;
    background: #fff;
}

.contact-main-section select.contact-input,
.contact-main-section .iti__selected-country,
.contact-main-section .iti__country {
    cursor: pointer;
}

.contact-main-section .iti {
    display: block;
    width: 100%;
    height: var(--contact-field-height);
    --iti-path-flags-1x: url("https://cdn.jsdelivr.net/npm/intl-tel-input@24.6.0/build/img/flags.webp");
    --iti-path-flags-2x: url("https://cdn.jsdelivr.net/npm/intl-tel-input@24.6.0/build/img/flags@2x.webp");
    --iti-path-globe-1x: url("https://cdn.jsdelivr.net/npm/intl-tel-input@24.6.0/build/img/globe.webp");
    --iti-path-globe-2x: url("https://cdn.jsdelivr.net/npm/intl-tel-input@24.6.0/build/img/globe@2x.webp");
}

.contact-main-section .iti .iti__country-container {
    height: 100%;
}

.contact-main-section .iti .iti__selected-country {
    height: 100%;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    border-right: 1px solid rgba(255, 255, 255, 0.22);
}

.contact-main-section .iti__country-list {
    color: #111 !important;
    background: #fff !important;
    border: 1px solid #d7d7d7;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(20, 20, 20, 0.16);
    margin-top: 6px;
    max-height: 230px;
    list-style: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    z-index: 9999;
}

.contact-main-section .iti__search-input {
    color: #111 !important;
    background: #fff !important;
    border: 1px solid #ccc !important;
}

.contact-main-section .iti__country {
    color: #111 !important;
    background: #fff !important;
    padding: 10px 12px;
    font-size: 1.02rem;
    line-height: 1.2;
    list-style: none !important;
}

.contact-main-section .iti__country::marker,
.contact-main-section .iti__country-list li::marker {
    content: "" !important;
}

.contact-main-section .iti__country:hover,
.contact-main-section .iti__country.iti__highlight {
    background: #f2f4f7 !important;
}

.contact-main-section .iti__country-name,
.contact-main-section .iti__dial-code {
    color: #111 !important;
}

.contact-main-section .iti__selected-country {
    padding: 0 10px 0 12px;
}

.contact-main-section .iti input.contact-input,
.contact-main-section .iti input[type="tel"] {
    height: var(--contact-field-height) !important;
    min-height: var(--contact-field-height) !important;
    max-height: var(--contact-field-height) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: transparent !important;
    color: #f6f6f6 !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

.contact-main-section .iti input[type="tel"]::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

.contact-main-section .iti input[type="tel"]:focus {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--ethio-red) !important;
    color: #fff !important;
}

.contact-main-section .form-label {
    color: rgba(255, 255, 255, 0.92);
}

.contact-main-section .contact-input.is-invalid {
    border-color: #166780;
}

.contact-main-section .invalid-feedback {
    color: #b3d4eb;
    font-size: 0.8rem;
}

.contact-textarea {
    min-height: 110px;
    resize: vertical;
}

.contact-recaptcha-widget {
    min-height: 78px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 480px) {
    .contact-recaptcha-widget {
        display: flex;
        justify-content: flex-start;
    }

    .contact-recaptcha-widget > div {
        transform: scale(0.92);
        transform-origin: left top;
    }
}

.contact-recaptcha-help {
    margin-top: 0.45rem;
    font-size: 0.8rem;
    color: #b3d4eb;
}

.contact-captcha-placeholder {
    max-width: 280px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: transparent;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.contact-captcha-placeholder span {
    margin-left: auto;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
}

.contact-submit-btn {
    background-color: var(--ethio-red) !important;
    color: #ffffff !important;
    border-radius: 0;
    padding: clamp(0.45rem, 0.38rem + 0.4vw, 0.62rem) clamp(0.85rem, 0.65rem + 1vw, 1.35rem) !important;
    font-size: clamp(0.7rem, 0.58rem + 0.42vw, 0.88rem) !important;
    letter-spacing: 1px;
    border: 1px solid var(--ethio-red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: min(12rem, 100%);
    transition: opacity 0.2s ease;
}

.contact-submit-btn:hover,
.contact-submit-btn:focus,
.contact-submit-btn:active {
    background-color: #ffffff !important;
    color: var(--ethio-red) !important;
    border-color: var(--ethio-red) !important;
}

.contact-submit-btn.is-loading {
    pointer-events: none;
    opacity: 0.95;
}

.contact-submit-btn .contact-submit-progress-label {
    letter-spacing: 0.06em;
}

.contact-map-wrap {
    margin-top: 2.8rem;
    margin-bottom: 2.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: none;
    overflow: hidden;
}

.contact-map-wrap iframe {
    display: block;
    width: 100%;
    height: 360px;
    border: 0;
    filter: grayscale(0.25) contrast(1.04);
}

.contact-simple-html {
    overflow-y: auto !important;
}

.contact-simple-page .side-dots {
    display: none;
}

body.contact-simple-page {
    overflow-x: hidden;
    overflow-y: auto;
}

.contact-simple-page .snap-container {
    height: auto;
    min-height: 100vh;
    overflow-y: visible;
    overflow-x: clip;
    scroll-snap-type: none;
}

/* Must beat `section:not(#footer-section)` (100vh) — that rule includes an ID in :not(), so it
   outranks `.contact-simple-page section` alone and was forcing Contact/Legal heroes full-viewport tall. */
body.contact-simple-page section:not(#footer-section) {
    scroll-snap-align: none;
    min-height: auto;
    height: auto;
    align-items: flex-start;
    padding: 0;
}

.contact-simple-page .reveal {
    opacity: 1 !important;
}

.contact-simple-page .animate__animated {
    animation: none !important;
}

/* Keep footer consistent with the shared home-page footer styles. */

@media (max-width: 991px) {
    .contact-main-section {
        padding-top: 42px;
        padding-bottom: 46px;
    }
    .contact-content-wrap {
        padding-top: 1.2rem;
    }
    .contact-section-heading {
        margin-bottom: 1.25rem;
    }
    .contact-hero {
        min-height: 220px;
        padding: 84px 0 20px;
    }

    .contact-hero-title {
        font-size: clamp(1.9rem, 9.5vw, 3rem);
    }

    .contact-map-wrap iframe {
        height: 320px;
    }

    .contact-aside-box {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.26);
        padding-left: 0;
        padding-top: 1.2rem;
        margin-top: 1rem;
    }
}

.customer-logos-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.customer-logo-item {
    flex: 0 0 auto;
}

@media (min-width: 1200px) {
    .customer-logos-row {
        flex-wrap: nowrap;
        justify-content: center;
    }

    .customer-logo-wrap {
        width: 112px;
        height: 112px;
    }
}

body.about-static,
body.about-static html {
    overflow: auto;
}

body.about-static .side-dots {
    display: none !important;
}

body.about-static .snap-container {
    height: auto;
    min-height: 0;
    overflow-y: visible;
    scroll-snap-type: none;
}

/* Must beat global `section:not(#footer-section)` { min-height: 100vh } — that selector includes an ID
   in :not(), so plain `body.about-static section` never cleared viewport height (same fix as contact-simple-page). */
body.about-static section:not(#footer-section) {
    height: auto;
    min-height: auto;
    scroll-snap-align: none;
    align-items: flex-start;
    overflow: visible;
    padding: 120px 0 80px;
}

/* Our Story lead: body already applies padding-top: var(--navbar-offset) — do not add offset again */
body.about-static section#about-story-hero {
    padding-top: clamp(1.25rem, 3.5vw, 2.75rem);
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

@media (max-width: 767.98px) {
    body.about-static section#about-story-hero {
        padding-top: clamp(0.75rem, 2.5vw, 1.35rem);
        padding-bottom: clamp(2rem, 5vw, 3.25rem);
    }
}

/* Needs to win specificity vs `section:not(#footer-section)` above so the About landing hero stays tall */
body.about-static #about-hero {
    min-height: 72vh !important;
    align-items: center;
    justify-content: center;
}

body.about-static .about-page > .content-container {
    width: 100%;
    max-width: min(1200px, calc(100vw - 2rem));
    margin-left: auto;
    margin-right: auto;
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    box-sizing: border-box;
}

/* Stats + “Looking Ahead” — avoid full hero padding (body.about-static section is 120px/80px) */
body.about-static section.about-page--compact {
    padding: clamp(2.5rem, 5vw, 4rem) 0 !important;
}

body.about-static section.about-page--compact > .content-container {
    padding-top: 0;
    padding-bottom: 0;
}

body.about-static section.about-page--compact .ethio-heading {
    margin-bottom: clamp(0.65rem, 2vw, 1.1rem);
}

body.about-static section.about-page--compact .section-bg {
    min-height: 0 !important;
}

body.about-static section.about-page--compact .about-card {
    padding: 1.35rem 1.25rem;
}

body.about-static section#about-looking-ahead {
    justify-content: center;
    overflow: hidden;
}

body.about-static .reveal {
    opacity: 1 !important;
}

body.about-static .animate__animated {
    animation: none !important;
}

body.about-static .section-bg,
body.about-static section.is-visible .section-bg {
    transition: none;
    transform: none;
}

html.federal-team-html {
    overflow-y: auto;
}

body.federal-team-page {
    overflow-x: hidden;
    overflow-y: auto;
    background: #05070d;
}

body.federal-team-page .side-dots {
    display: none !important;
}

body.federal-team-page .snap-container {
    height: auto;
    min-height: 100vh;
    overflow-y: visible;
    scroll-snap-type: none;
    background: #05070d;
}

body.federal-team-page #footer-section {
    height: auto;
    min-height: auto;
    padding-top: 52px;
    background: #060606;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

body.federal-team-page #footer-section::after {
    display: none;
}

body.federal-team-page section {
    min-height: auto;
    height: auto;
    scroll-snap-align: none;
    align-items: flex-start;
    padding: 0;
}

body.federal-team-page .reveal {
    opacity: 1 !important;
}

body.federal-team-page .animate__animated {
    animation: none !important;
}

body.federal-team-page .section-bg,
body.federal-team-page section.is-visible .section-bg {
    transform: none;
    transition: none;
}

.federal-hero {
    min-height: 70vh;
    display: flex;
    align-items: flex-end !important;
    padding: 126px 0 58px !important;
}

.federal-hero .overlay {
    background: linear-gradient(
        to bottom,
        rgba(4, 8, 16, 0.35) 0%,
        rgba(4, 8, 16, 0.84) 62%,
        rgba(4, 8, 16, 1) 100%
    );
}

.federal-hero-content {
    max-width: 1140px;
}

.federal-hero-content .ethio-heading {
    margin-bottom: 0.85rem;
    font-size: clamp(2.6rem, 7vw, 5rem);
    letter-spacing: 1px;
}

.federal-hero-content .sub-text {
    max-width: 500px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    line-height: 1.5;
}

.federal-team-section {
    background: #040404;
    padding: 36px 0 44px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.federal-team-section-alt {
    background: #080808;
}

.federal-section-title {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 900;
    font-size: clamp(1.25rem, 2.2vw, 2rem);
    margin-bottom: 1.25rem;
    text-align: center;
}

.federal-card {
    background: #101621;
    border: 1px solid rgba(255, 255, 255, 0.12);
    min-height: 100%;
    overflow: hidden;
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.federal-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}

.federal-photo {
    background: radial-gradient(
        circle at top center,
        rgba(42, 59, 82, 0.95) 0%,
        rgba(19, 28, 43, 0.98) 58%,
        rgba(10, 15, 24, 1) 100%
    );
    min-height: 240px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 20px 12px 0;
}

.federal-avatar {
    width: 164px;
    height: 164px;
    object-fit: cover;
    border-radius: 0;
    display: block;
    margin: 0 auto;
    border: 0;
}

.federal-meta {
    background: rgba(255, 255, 255, 0.82);
    color: #050505;
    text-align: left;
    padding: 0.52rem 0.66rem 0.58rem;
    min-height: 68px;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(2px);
}

.federal-meta h3 {
    margin: 0;
    color: #121821;
    font-weight: 800;
    font-size: 0.84rem;
    text-transform: uppercase;
    line-height: 1.2;
}

.federal-meta a {
    display: inline-block;
    margin-top: 0.24rem;
    color: #27313d;
    text-decoration: none;
    font-size: 0.73rem;
    line-height: 1;
    text-transform: uppercase;
}

.federal-meta a:hover {
    color: #111;
}

@media (max-width: 991px) {
    .federal-hero {
        min-height: 54vh;
        padding: 102px 0 34px !important;
    }

    .federal-team-section {
        padding: 28px 0 34px !important;
    }

    .federal-avatar {
        width: 118px;
        height: 118px;
    }

    .federal-photo {
        min-height: 186px;
    }

    .federal-meta {
        min-height: 62px;
    }

    .federal-meta h3 {
        font-size: 0.73rem;
    }

    .federal-meta a {
        font-size: 0.67rem;
    }
}

body.health-page {
    overflow-x: hidden;
    overflow-y: auto;
    background: #f4f4f4;
    color: #1d1d1d;
}

body.health-page .side-dots {
    display: none !important;
}

body.health-page .snap-container {
    height: auto;
    min-height: 100vh;
    overflow-y: visible;
    scroll-snap-type: none;
    background: #f4f4f4;
}

body.health-page section {
    min-height: auto;
    height: auto;
    scroll-snap-align: none;
    align-items: flex-start;
    padding: 0;
    color: #1d1d1d;
}

body.health-page .reveal {
    opacity: 1 !important;
}

body.health-page .animate__animated {
    animation: none !important;
}

body.health-page .section-bg,
body.health-page section.is-visible .section-bg {
    transform: none;
    transition: none;
}

.health-hero {
    min-height: 56vh;
    display: flex;
    align-items: flex-end !important;
    padding: 124px 0 48px !important;
    position: relative;
}

.health-hero .overlay {
    background: linear-gradient(
        to bottom,
        rgba(0, 40, 44, 0.18) 0%,
        rgba(0, 40, 44, 0.72) 70%,
        rgba(0, 40, 44, 0.88) 100%
    );
}

.health-hero-title {
    margin: 0;
    color: #fff;
    text-transform: uppercase;
    font-weight: 900;
    font-size: clamp(1.8rem, 4.7vw, 3.25rem);
    letter-spacing: 0.8px;
}

.health-main {
    background: #f4f4f4;
    padding: 46px 0 56px !important;
}

.health-main .content-container {
    max-width: 1100px;
}

.health-main h2 {
    color: #166780;
    font-weight: 800;
    font-size: clamp(1.35rem, 2.4vw, 2rem);
    margin-bottom: 1rem;
}

.health-main h3 {
    color: #166780;
    font-weight: 800;
    font-size: clamp(1.05rem, 2vw, 1.5rem);
    margin-top: 1.4rem;
    margin-bottom: 0.75rem;
}

.health-main p,
.health-main li {
    color: #222;
    line-height: 1.7;
    font-size: 0.97rem;
}

.health-main ul {
    padding-left: 1.15rem;
    margin-bottom: 1rem;
}

.health-page #footer-section {
    min-height: auto !important;
    height: auto;
    padding-top: 44px;
    background: #f4f4f4;
    color: #102229;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.health-page #footer-section .footer-header,
.health-page #footer-section a,
.health-page #footer-section p,
.health-page #footer-section .footer-link-list a,
.health-page #footer-section .social-icons a {
    color: #102229 !important;
}

.health-page #footer-section .footer-social-icons .footer-social-link {
    color: #fff !important;
}

.health-page #footer-section::after {
    display: none;
}

@media (max-width: 991px) {
    .health-hero {
        min-height: 40vh;
        padding: 102px 0 28px !important;
    }

    .health-main {
        padding: 32px 0 38px !important;
    }
}

html.brands-html {
    overflow-y: auto;
}

body.brands-page {
    overflow-x: hidden;
    overflow-y: auto;
    background: #05070d;
    color: #edf1fb;
}

body.brands-page .side-dots {
    display: none !important;
}

body.brands-page .snap-container {
    height: auto;
    min-height: 100vh;
    overflow-y: visible;
    scroll-snap-type: none;
    background: #05070d;
}

/* Beat global `section:not(#footer-section)` (100vh) — see contact-simple-page comment */
body.brands-page section:not(#footer-section) {
    min-height: auto;
    height: auto;
    scroll-snap-align: none;
    align-items: flex-start;
    padding: 0;
}

/* Brands hero: centered column matches .brands-intro; bottom-weighted type; not viewport-tall */
body.brands-page .brands-hero {
    align-items: flex-end !important;
    justify-content: center !important;
    min-height: clamp(300px, 48vh, 560px) !important;
    height: auto !important;
    padding: clamp(4.75rem, 8vw, 5.5rem) 0 clamp(2rem, 3.5vw, 3rem) !important;
}

body.brands-page .brands-hero .brands-hero-content {
    width: 90%;
    max-width: 1120px;
    margin-inline: auto;
    text-align: left;
}

body.brands-page .reveal {
    opacity: 1 !important;
}

body.brands-page .animate__animated {
    animation: none !important;
}

body.brands-page .section-bg,
body.brands-page section.is-visible .section-bg {
    transform: none;
    transition: none;
}

.brands-hero {
    min-height: 64vh;
    display: flex;
    align-items: flex-end !important;
    position: relative;
    padding: 132px 0 56px !important;
}

.brands-hero .overlay {
    background: linear-gradient(
        180deg,
        rgba(4, 8, 16, 0.45) 0%,
        rgba(4, 8, 16, 0.92) 62%,
        #05070d 100%
    );
}

.brands-hero-content {
    max-width: 1050px;
}

.brands-hero-title {
    margin: 0;
    color: #fff;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 1px;
    font-size: clamp(2rem, 5.5vw, 4.4rem);
}

/* Keep contact hero title smaller than generic brands pages */
.contact-simple-page .brands-hero-title {
    font-size: clamp(1.8rem, 4.2vw, 3.2rem);
}

.brands-hero-copy {
    max-width: 760px;
    margin-top: 0.8rem;
    margin-bottom: 0;
    color: rgba(236, 241, 250, 0.92);
    font-size: 0.98rem;
    line-height: 1.8;
}

.brands-intro {
    padding: 50px 0 24px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.brands-intro .content-container {
    max-width: 1120px;
}

.brands-intro h2 {
    margin-bottom: 0.9rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-size: clamp(1.2rem, 2.4vw, 2rem);
    font-weight: 800;
}

.brands-intro p {
    margin: 0;
    color: rgba(231, 238, 247, 0.9);
    font-size: 0.95rem;
    line-height: 1.8;
}

.brands-grid-section {
    padding: 26px 0 66px !important;
}

.brands-section-title {
    color: #fff;
    text-transform: uppercase;
    font-size: clamp(1rem, 2vw, 1.6rem);
    font-weight: 800;
    letter-spacing: 0.6px;
    margin-bottom: 1.15rem;
}

.brands-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.brand-card {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 2px;
    min-height: 118px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(1.5px);
}

.brand-card img {
    width: 100%;
    max-height: 74px;
    object-fit: contain;
    mix-blend-mode: normal;
}

body.brands-page #footer-section {
    min-height: auto !important;
    height: auto;
    padding-top: 52px;
    background: #06080f;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

body.brands-page #footer-section::after {
    display: none;
}

/* Partners & OEMs page */
html.partners-html {
    scroll-behavior: smooth;
}

body.partners-page {
    --partners-card-bg: rgba(255, 255, 255, 0.06);
    --partners-card-border: rgba(255, 255, 255, 0.14);
    --partners-placeholder-bg: rgba(255, 255, 255, 0.05);
    --partners-placeholder-border: rgba(255, 255, 255, 0.16);
}

body.partners-page .side-dots {
    display: none !important;
}

body.partners-page .snap-container {
    scroll-snap-type: none;
}

/* Same specificity issue as contact: `section:not(#footer-section)` uses an ID, so a lone
   `.partners-page section` rule never cleared the global 100vh min-height / flex alignment. */
body.partners-page section:not(#footer-section) {
    scroll-snap-align: unset;
    min-height: auto;
    height: auto;
    align-items: flex-start;
    padding: 0;
}

/* Partners hero: same centered column as .partners-domain-section; copy left; compact height (not full viewport) */
body.partners-page .brands-hero {
    align-items: center !important;
    justify-content: center !important;
    min-height: clamp(280px, 44vh, 520px) !important;
    height: auto !important;
    padding: clamp(4.75rem, 8vw, 5.5rem) 0 clamp(2rem, 3.5vw, 3rem) !important;
}

body.partners-page .brands-hero .brands-hero-content {
    width: 90%;
    max-width: 1200px;
    margin-inline: auto;
    text-align: left;
}

.partners-domain-section {
    background:
        radial-gradient(1200px 500px at 20% -10%, rgba(46, 114, 255, 0.22), transparent 62%),
        radial-gradient(900px 460px at 95% 8%, rgba(37, 211, 185, 0.12), transparent 58%),
        linear-gradient(180deg, #071327 0%, #0b1b34 60%, #0a1830 100%);
    padding: clamp(64px, 9vw, 96px) 0 clamp(80px, 10vw, 120px);
}

.partners-group {
    position: relative;
    margin-bottom: 28px;
    padding: clamp(18px, 2.8vw, 26px);
    border-radius: 18px;
    border: 1px solid rgba(142, 176, 255, 0.23);
    background: linear-gradient(165deg, rgba(10, 24, 49, 0.72), rgba(7, 18, 38, 0.78));
    box-shadow: 0 14px 30px rgba(2, 11, 27, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.partners-group-head {
    margin-bottom: 16px;
}

.partners-group-head h2 {
    margin: 0 0 4px;
    color: #f4f8ff;
    font-size: clamp(1.24rem, 2vw, 1.55rem);
    font-weight: 800;
    letter-spacing: 0.01em;
}

.partners-group-head p {
    margin: 0;
    color: rgba(226, 236, 255, 0.82);
    font-size: 0.95rem;
}

.partners-domain-card {
    position: relative;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin-bottom: 20px;
    overflow: visible;
    backdrop-filter: none;
    box-shadow: none;
}

.partners-domain-card::before {
    content: none;
}

.partners-domain-card h3 {
    color: #ffffff;
    font-size: clamp(1.05rem, 1.7vw, 1.18rem);
    font-weight: 800;
    letter-spacing: 0.01em;
    margin: 0 0 14px;
    position: relative;
    z-index: 1;
}

.partners-note {
    color: rgba(255, 255, 255, 0.74);
    margin: 0 0 14px;
    font-size: 0.96rem;
}

.partner-logo-tile,
.partner-logo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 92px;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
        rgba(14, 31, 58, 0.78);
    padding: 9px;
}

.partner-logo-tile {
    position: relative;
    border: 1px solid rgba(172, 197, 255, 0.2);
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.partner-logo-tile:hover {
    transform: translateY(-2px);
    border-color: rgba(142, 218, 255, 0.62);
    box-shadow: 0 10px 22px rgba(2, 10, 25, 0.35);
}

.partner-logo-tile img {
    display: block;
    width: 100%;
    height: 64px;
    object-fit: contain;
    background: #ffffff;
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.05),
        0 3px 8px rgba(0, 0, 0, 0.08);
    filter: grayscale(0%) contrast(1);
    transition: filter 0.22s ease, transform 0.22s ease;
}

.partner-logo-link {
    display: block;
    width: 100%;
    text-decoration: none;
}

.partner-logo-tile:hover img {
    transform: scale(1.015);
}

.partner-logo-placeholder {
    border: 1px dashed rgba(172, 197, 255, 0.33);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center;
}

.partners-logo-slider {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    z-index: 1;
}

.partners-logo-track {
    overflow: hidden;
    flex: 1;
    mask-image: linear-gradient(to right, transparent 0, black 7%, black 93%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 7%, black 93%, transparent 100%);
}

.partners-logo-marquee {
    display: flex;
    align-items: center;
    gap: 0;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.partners-logo-set {
    display: flex;
    align-items: center;
    gap: 12px;
}

.partners-logo-set .partner-logo-tile,
.partners-logo-set .partner-logo-placeholder {
    min-width: 176px;
    flex: 0 0 176px;
}

@media (max-width: 767.98px) {
    .partners-domain-section {
        padding-top: 54px;
    }

    .partner-logo-tile,
    .partner-logo-placeholder {
        min-width: 150px;
        flex-basis: 150px;
        min-height: 86px;
    }

    .partner-logo-tile img {
        height: 56px;
    }

    .partners-group {
        padding: 16px 14px;
    }

    .partners-group-head p {
        font-size: 0.9rem;
    }
}

@media (max-width: 1199px) {
    .brands-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .brands-hero {
        min-height: 50vh;
        padding: 108px 0 34px !important;
    }

    .brands-intro {
        padding: 38px 0 18px !important;
    }

    .brands-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .brands-grid {
        grid-template-columns: 1fr;
    }

    .brand-card {
        min-height: 98px;
        padding: 12px;
    }

    .brand-card img {
        max-height: 62px;
    }
}

/* Contact / legal interior heroes: same centered column as .contact-main-section; copy left within that column */
body.contact-simple-page .brands-hero {
    height: auto;
    min-height: 0;
    display: flex;
    align-items: center !important;
    justify-content: center !important; /* match section:not() default so hero lines up with content below */
    position: relative;
    padding: clamp(4.75rem, 8vw, 5.5rem) 0 clamp(1.5rem, 2.5vw, 2rem) !important;
}

body.contact-simple-page .brands-hero .brands-hero-content {
    width: 90%;
    max-width: 1200px;
    margin-inline: auto;
    padding-top: 0;
    padding-bottom: 0.25rem;
    text-align: left;
}

body.contact-simple-page .brands-hero-title {
    font-size: clamp(1.6rem, 3.3vw, 2.7rem) !important;
    line-height: 1.05;
}

@media (max-width: 991px) {
    body.contact-simple-page .brands-hero {
        padding: 5rem 0 1.75rem !important;
    }

    body.contact-simple-page .brands-hero-title {
        font-size: clamp(1.45rem, 7.2vw, 2.1rem) !important;
    }
}

body.health-services-page {
    overflow-x: hidden;
    overflow-y: auto;
    background: #030b1e;
}

.health-services-html {
    overflow-y: auto !important;
}

body.health-services-page .side-dots {
    display: none !important;
}

body.health-services-page .snap-container {
    height: auto;
    min-height: 100vh;
    overflow-y: visible;
    scroll-snap-type: none;
    background: #030b1e;
}

body.health-services-page section.about-page {
    min-height: auto;
    height: auto;
    align-items: flex-start;
    padding: 0;
    scroll-snap-align: none;
}

body.health-services-page .section-bg {
    background-image: url("../images/health-management/service-page-bg.png") !important;
    background-size: cover;
    background-position: center;
    filter: blur(0.5px);
}

body.health-services-page .overlay {
    background: linear-gradient(
        to bottom,
        rgba(4, 13, 34, 0.78) 0%,
        rgba(4, 13, 34, 0.88) 100%
    );
}

body.health-services-page .content-container {
    max-width: 1160px;
}

body.health-services-page .ethio-label {
    color: #e6eefc;
    letter-spacing: 2px;
}

body.health-services-page .ethio-heading {
    color: #ffffff;
}

body.health-services-page .sub-text,
body.health-services-page li,
body.health-services-page p {
    color: rgba(255, 255, 255, 0.95);
}

body.health-services-page ul {
    padding-left: 1.25rem;
}

body.health-services-page ul ul {
    margin-top: 0.35rem;
}

body.health-services-page #health-front-office-hero,
body.health-services-page #health-credentialing-hero,
body.health-services-page #health-ar-hero,
body.health-services-page #health-medical-billing-hero,
body.health-services-page #health-qpp-hero,
body.health-services-page #health-audit-hero,
body.health-services-page #health-it-hero {
    min-height: 34vh;
    display: flex;
    align-items: flex-end !important;
    padding: 122px 0 22px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

body.health-services-page #health-front-office-content,
body.health-services-page #health-credentialing-content,
body.health-services-page #health-ar-content,
body.health-services-page #health-medical-billing-content,
body.health-services-page #health-qpp-content,
body.health-services-page #health-audit-content,
body.health-services-page #health-it-content {
    padding: 24px 0 56px !important;
}

body.health-services-page #footer-section {
    min-height: auto !important;
    height: auto;
    padding-top: 44px;
    background: #030b1e;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

body.health-services-page #footer-section::after {
    display: none;
}

@media (max-width: 991px) {
    body.health-services-page #health-front-office-hero,
    body.health-services-page #health-credentialing-hero,
    body.health-services-page #health-ar-hero,
    body.health-services-page #health-medical-billing-hero,
    body.health-services-page #health-qpp-hero,
    body.health-services-page #health-audit-hero,
    body.health-services-page #health-it-hero {
        min-height: 28vh;
        padding: 104px 0 16px !important;
    }

    body.health-services-page #health-front-office-content,
    body.health-services-page #health-credentialing-content,
    body.health-services-page #health-ar-content,
    body.health-services-page #health-medical-billing-content,
    body.health-services-page #health-qpp-content,
    body.health-services-page #health-audit-content,
    body.health-services-page #health-it-content {
        padding: 16px 0 36px !important;
    }
}

/* Homepage capability cards (premium hover reveal, no inversion) */
.capabilities-container {
    max-width: 1220px;
}

.capability-grid {
    margin-top: 1.7rem;
    margin-bottom: 1.2rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

.capability-card {
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.capability-card-inner {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    height: 100%;
    min-height: 240px;
    isolation: isolate;
    transition: filter 0.35s ease;
}

.capability-face {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    padding: 0.85rem;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 8px 22px rgba(0, 0, 0, 0.22);
    transition:
        opacity 0.35s ease,
        transform 0.4s ease;
}

.capability-face::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 10% 12%,
            rgba(255, 255, 255, 0.12),
            transparent 46%
        ),
        linear-gradient(145deg, rgba(11, 48, 72, 0.64), rgba(7, 34, 52, 0.86));
    z-index: 0;
}

.capability-face::after {
    content: "";
    position: absolute;
    top: -65%;
    left: -35%;
    width: 90%;
    height: 190%;
    transform: rotate(22deg);
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.11),
        rgba(255, 255, 255, 0)
    );
    opacity: 0;
    transition:
        opacity 0.35s ease,
        transform 0.45s ease;
}

@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    .capability-card:hover .capability-face::after,
    .capability-card:focus-within .capability-face::after {
        opacity: 1;
        transform: rotate(22deg) translateX(14%);
    }
}

.capability-front > *,
.capability-back > * {
    position: relative;
    z-index: 1;
}

.capability-front {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 1;
    transform: translateY(0);
    gap: 0.45rem;
}

.capability-back {
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    gap: 0.6rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-color: rgba(22, 103, 128, 0.45);
    opacity: 0;
    transform: translateY(12px) scale(0.985);
    pointer-events: none;
}

.capability-back::before {
    background:
        radial-gradient(
            circle at 15% 12%,
            rgba(22, 103, 128, 0.18),
            transparent 43%
        ),
        linear-gradient(145deg, rgba(11, 52, 77, 0.68), rgba(7, 30, 46, 0.9));
}

.capability-front h3 {
    margin: 0 0 0.45rem;
    font-weight: 800;
    font-size: 1.14rem;
    line-height: 1.28;
    color: #fff;
    text-wrap: balance;
}

.capability-front .capability-icon {
    margin-bottom: 0;
}

.capability-front p,
.capability-back p {
    margin: 0;
    color: rgba(231, 238, 252, 0.96);
    font-size: 0.89rem;
    line-height: 1.5;
}

.capability-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: linear-gradient(
        135deg,
        rgba(22, 103, 128, 0.35),
        rgba(11, 75, 106, 0.3)
    );
    color: #fff;
    font-size: 1.18rem;
    margin-bottom: 0.7rem;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 8px 18px rgba(0, 0, 0, 0.28);
}

/* Agency seals on home “Agencies We Serve” cards (replaces FA icons) */
.capability-icon--agency-seal {
    flex-shrink: 0;
    padding: 5px;
    font-size: 0;
    line-height: 0;
    background: linear-gradient(
        165deg,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(234, 241, 247, 0.94) 100%
    );
    border-color: rgba(255, 255, 255, 0.38);
}

.capability-icon--agency-seal img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 44px;
    max-height: 44px;
    margin: auto;
    object-fit: contain;
}

.capability-back .btn {
    margin-top: 0;
    flex-shrink: 0;
    align-self: flex-start;
    border-radius: 999px;
    padding: 0.38rem 0.78rem;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.capability-back .btn::after {
    content: " \2192";
}

.capability-card.is-flipped .capability-card-inner {
    filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.35));
}

.capability-card.is-flipped .capability-face::after {
    opacity: 1;
    transform: rotate(22deg) translateX(14%);
}

.capability-card.is-flipped .capability-front {
    opacity: 0;
    transform: translateY(-8px);
}

.capability-card.is-flipped .capability-back {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Hover flip only on desktop — never combine with tablet visibility:hidden on .capability-back */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    .capability-card:hover .capability-card-inner,
    .capability-card:focus-within .capability-card-inner {
        filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.35));
    }

    .capability-card:hover .capability-front,
    .capability-card:focus-within .capability-front {
        opacity: 0;
        transform: translateY(-8px);
    }

    .capability-card:hover .capability-back,
    .capability-card:focus-within .capability-back {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }
}

/* Large screens: 3 cards per row */
@media (min-width: 1200px) {
    .capability-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Mid screens: max 2 per row (inherits repeat(2) from base) */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .capability-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.1rem;
    }
}

/* Below laptop: tap-to-flip — same box size as neighbors (absolute faces); no scrollbar */
@media (max-width: 1199px) {
    .capability-card {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .capability-card.is-flipped .capability-front {
        opacity: 0;
        transform: translateY(-8px);
        visibility: hidden;
        pointer-events: none;
    }

    .capability-card.is-flipped .capability-back {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
        pointer-events: auto;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    /* Fit longest back without oversized dead band */
    body.home-page #procurement .capability-card,
    body.home-page #procurement .capability-card-inner {
        min-height: clamp(278px, 36vmin, 360px);
    }

    body.home-page #procurement .capability-card {
        height: 100%;
    }
}

/* Tablet only (768–1199px): shorter tiles than the generic <1200px rule; phones & desktop unchanged */
@media (min-width: 768px) and (max-width: 1199.98px) {
    body.home-page #procurement .capability-card,
    body.home-page #procurement .capability-card-inner {
        min-height: clamp(200px, 22vmin, 268px);
    }

    body.home-page #procurement .capability-card.is-flipped,
    body.home-page #procurement .capability-card.is-flipped .capability-card-inner {
        min-height: clamp(268px, 34vmin, 360px);
    }
}

/* Small screens: 1 card per row */
@media (max-width: 767.98px) {
    .capability-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Shorter card when showing front only — removes large empty band under short copy */
    body.home-page #procurement .capability-card:not(.is-flipped),
    body.home-page #procurement .capability-card:not(.is-flipped) .capability-card-inner {
        min-height: clamp(180px, 31vmin, 218px);
    }

    /* Flipped back still needs room for longest paragraph + CTA */
    body.home-page #procurement .capability-card.is-flipped,
    body.home-page #procurement .capability-card.is-flipped .capability-card-inner {
        min-height: clamp(288px, 52vmin, 400px);
    }

    body.home-page #procurement .capability-card {
        height: auto;
        align-self: start;
    }

    /* Home procurement flip cards: slightly larger type + padding so the card doesn’t feel “shrunk” */
    body.home-page #procurement .capability-face {
        padding: 0.88rem 0.95rem;
    }

    body.home-page #procurement .capability-front h3 {
        font-size: clamp(1.12rem, 4.2vw, 1.28rem);
    }

    body.home-page #procurement .capability-front p,
    body.home-page #procurement .capability-back p {
        font-size: clamp(0.9rem, 3.5vw, 1.02rem);
    }

    body.home-page #procurement .capability-icon {
        width: clamp(52px, 14vw, 58px);
        height: clamp(52px, 14vw, 58px);
        font-size: clamp(1.1rem, 3.8vw, 1.28rem);
    }
}

/* Homepage post-capabilities sections */
body.home-page #agencies-strip {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(
            180deg,
            rgba(10, 40, 55, 0.75) 0%,
            rgba(10, 40, 55, 0.82) 45%,
            rgba(5, 25, 38, 0.92) 100%
        ),
        url("https://images-assets.nasa.gov/image/GSFC_20171208_Archive_e001861/GSFC_20171208_Archive_e001861~orig.jpg");
    background-size: cover;
    background-position: center 52%;
    background-repeat: no-repeat;
    padding: clamp(1rem, 3vw, 1.5rem) 0;
}

@media (min-width: 1200px) {
    body.home-page #agencies-strip {
        min-height: 100dvh;
        scroll-snap-align: start;
        padding: calc(var(--navbar-offset) + 1rem) 0 24px;
    }
}

.agencies-panel {
    margin: 0 auto;
    max-width: 1080px;
    padding: 1rem 1.1rem 1.2rem;
    text-align: center;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: linear-gradient(
        160deg,
        rgba(22, 103, 128, 0.40) 0%,
        rgba(22, 103, 128, 0.22) 100%
    );
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

body.home-page #agencies-strip .ethio-heading {
    font-size: clamp(1.9rem, 4vw, 2.8rem);
}

.agencies-subtext {
    max-width: 900px;
    margin: 0.25rem auto 0.8rem;
    color: rgba(230, 238, 255, 0.9);
    font-size: 1rem;
}

.agency-row-label {
    display: inline-block;
    margin: 0.35rem auto 0.8rem;
    padding: 0.22rem 0.62rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(236, 242, 255, 0.95);
    background: rgba(11, 36, 84, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.agency-row-label--second {
    margin-top: 1rem;
    margin-bottom: 0.8rem;
}

.agency-marquee {
    position: relative;
    overflow: hidden;
    /* Avoid edge fade masks — they read as clipping/overlay glitches on logos; hard clip at panel edge is clearer */
    mask-image: none;
    -webkit-mask-image: none;
}

.agency-marquee--second {
    margin-top: 0;
    margin-bottom: 0.8rem;
}

.agency-track {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: max-content;
    animation: agencies-left 80s linear infinite;
    will-change: transform;
}

.agency-marquee:hover .agency-track,
.agency-marquee:focus-within .agency-track {
    animation-play-state: paused;
}

.agency-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 126px;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
        rgba(14, 31, 58, 0.78);
    border: 1px solid rgba(172, 197, 255, 0.2);
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(2, 10, 25, 0.25);
    padding: 8px;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
    flex: 0 0 220px;
    position: relative;
    overflow: visible;
}

.agency-track--regional {
    animation: agencies-right 20s linear infinite;
}

.agency-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #ffffff;
    border-radius: 10px;
    padding: 2px;
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.05),
        0 3px 8px rgba(0, 0, 0, 0.08);
    filter: grayscale(0%) contrast(1);
    border: 0 !important;
}

.agency-logo:hover,
.agency-logo:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(142, 218, 255, 0.62);
    box-shadow: 0 10px 22px rgba(2, 10, 25, 0.35);
}

.agency-logo::after {
    content: attr(aria-label);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    background: rgba(5, 18, 44, 0.96);
    color: #eef4ff;
    border: 1px solid rgba(166, 195, 255, 0.45);
    border-radius: 8px;
    padding: 0.34rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 12;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}

.agency-logo:hover::after,
.agency-logo:focus-visible::after {
    opacity: 1;
    visibility: visible;
}

@keyframes agencies-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@keyframes agencies-right {
    from {
        transform: translateX(-50%);
    }
    to {
        transform: translateX(0);
    }
}

body.home-page #why-prime-data {
    min-height: auto;
    background:
        radial-gradient(circle at 14% 18%, rgba(22, 103, 128, 0.20), transparent 48%),
        radial-gradient(circle at 84% 12%, rgba(247, 164, 28, 0.08), transparent 44%),
        linear-gradient(
            165deg,
            var(--brand-ink) 0%,
            var(--brand-deep-muted) 55%,
            var(--brand-deep-elevated) 100%
        );
    padding: 66px 0 38px;
}

.why-section-head {
    margin-bottom: 1.4rem;
}

.why-section-head .ethio-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(247, 164, 28, 0.40);
    color: var(--brand-primary);
    background: rgba(247, 164, 28, 0.10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    letter-spacing: 0.22em;
}

.why-section-head .ethio-heading {
    color: #ffffff;
    font-size: clamp(1.65rem, 3vw, 2.35rem);
    text-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.why-grid {
    align-items: stretch;
}

.why-card {
    position: relative;
    overflow: hidden;
    height: 100%;
    background: linear-gradient(
        165deg,
        #fefaf0 0%,
        var(--nav-main-surface) 50%,
        #fdf3d8 100%
    );
    border: 1px solid rgba(247, 164, 28, 0.22);
    border-radius: 12px;
    padding: 1.25rem 1.2rem 1.2rem;
    box-shadow:
        0 14px 32px rgba(22, 103, 128, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.why-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--brand-primary) 0%,
        var(--brand-primary-alt) 55%,
        var(--brand-primary) 100%
    );
    opacity: 0.95;
}

.why-card:hover {
    transform: translateY(-6px);
    border-color: rgba(247, 164, 28, 0.50);
    box-shadow:
        0 20px 42px rgba(22, 103, 128, 0.16),
        0 0 0 1px rgba(247, 164, 28, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.why-card-icon {
    width: 46px;
    height: 46px;
    margin-bottom: 0.8rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.05rem;
    background: linear-gradient(145deg, var(--brand-primary) 0%, var(--brand-primary-alt) 100%);
    box-shadow: 0 10px 22px rgba(22, 103, 128, 0.28);
}

.why-card h3 {
    margin: 0 0 0.62rem;
    color: var(--nav-ink);
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.why-card p {
    margin: 0;
    color: var(--nav-ink-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

@media (max-width: 991px) {
    body.home-page #why-prime-data {
        padding: clamp(1.5rem, 4vw, 2rem) 0 clamp(1.25rem, 3vw, 1.75rem);
    }

    .why-section-head {
        margin-bottom: 0.7rem;
    }

    body.home-page #why-prime-data .why-grid.row,
    body.home-page #past-performance-highlights .row {
        --bs-gutter-x: 0.75rem;
        --bs-gutter-y: 0.5rem;
    }

    body.home-page #agencies-strip .content-container,
    body.home-page #why-prime-data .content-container,
    body.home-page #past-performance-highlights .content-container {
        padding-top: 4px;
        padding-bottom: 10px;
    }

    body.home-page #how-to-buy-banner .content-container {
        padding-top: 0;
        padding-bottom: 0;
    }
}

body.home-page #how-to-buy-banner {
    background:
        radial-gradient(circle at 50% 0%, rgba(247, 164, 28, 0.10), transparent 42%),
        linear-gradient(180deg, var(--brand-deep-elevated) 0%, var(--brand-ink) 100%);
    /* Equal vertical rhythm around the card */
    padding: clamp(1rem, 3vw, 1.5rem) 0;
    align-items: center;
    justify-content: center;
}

@media (min-width: 1200px) {
    body.home-page #how-to-buy-banner {
        padding: clamp(1.25rem, 2.25vw, 2rem) 0;
    }
}

body.home-page #how-to-buy-banner .content-container {
    padding-top: 0;
    padding-bottom: 0;
}

.how-buy-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(22, 103, 128, 0.28);
    border-radius: 12px;
    background: linear-gradient(
        135deg,
        rgba(10, 74, 114, 0.42) 0%,
        rgba(6, 42, 66, 0.58) 48%,
        rgba(18, 21, 28, 0.9) 100%
    );
    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    padding: 1.3rem 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.how-buy-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--brand-primary) 0%,
        var(--brand-primary-alt) 100%
    );
}

.how-buy-copy h2 {
    margin: 0 0 0.55rem;
    color: #fff;
    font-size: clamp(1.45rem, 3vw, 2rem);
    font-weight: 800;
}

.how-buy-copy p {
    margin: 0 0 0.7rem;
    color: var(--brand-text-soft);
    line-height: 1.55;
    max-width: 900px;
}

.how-buy-inline {
    color: var(--brand-primary-alt);
    font-weight: 700;
    letter-spacing: 0.015em;
    font-size: 0.86rem;
}

.how-buy-cta .btn {
    white-space: nowrap;
}

@media (max-width: 991px) {
    .how-buy-card {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .how-buy-cta {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .how-buy-cta .btn {
        white-space: normal;
        width: 100%;
        max-width: 360px;
        padding-left: 18px;
        padding-right: 18px;
    }

    .how-buy-copy p {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 480px) {
    .how-buy-cta .btn {
        letter-spacing: 1px;
        font-size: 0.82rem;
        padding: 13px 14px;
    }
}

@media (max-width: 767px) {
    body.home-page #agencies-strip {
        padding: clamp(1.1rem, 3vw, 1.35rem) 0;
    }

    .agencies-panel {
        padding: 0.8rem 0.7rem 0.9rem;
    }

    .agency-logo {
        width: 188px;
        height: 108px;
        flex-basis: 188px;
    }

}

body.home-page #past-performance-highlights {
    min-height: auto;
    background:
        radial-gradient(circle at 18% 22%, rgba(22, 103, 128, 0.2), transparent 46%),
        radial-gradient(circle at 84% 4%, rgba(22, 103, 128, 0.11), transparent 42%),
        linear-gradient(165deg, var(--brand-ink-deeper) 0%, var(--brand-deep-muted) 56%, var(--brand-deep-elevated) 100%);
    padding: clamp(1rem, 2.4vw, 1.5rem) 0 clamp(0.85rem, 2vw, 1.25rem);
}

.past-performance-head .ethio-heading {
    color: #ffffff;
    font-size: clamp(1.85rem, 4vw, 2.6rem);
    margin-bottom: 0.5rem;
    text-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}

@media (min-width: 1200px) {
    body.home-page #past-performance-highlights {
        padding: 50px 0 42px;
    }

    .past-performance-head .ethio-heading {
        margin-bottom: 1rem;
    }
}

.performance-card {
    height: 100%;
    background: linear-gradient(
        165deg,
        #f2f7fc 0%,
        var(--nav-main-surface) 50%,
        #dceaf5 100%
    );
    border: 1px solid var(--nav-border);
    border-radius: 15px;
    padding: 1.05rem 1rem;
    box-shadow:
        0 14px 32px rgba(22, 103, 128, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.performance-seal {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.7rem;
    font-weight: 800;
    color: var(--nav-ink);
    font-size: 0.95rem;
}

.performance-seal img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    flex: 0 0 34px;
}

.performance-card p {
    margin: 0 0 0.7rem;
    color: var(--nav-ink-muted);
    line-height: 1.55;
    font-size: 0.92rem;
}

@media (max-width: 991px) {
    /* These 3 stacked cards were the single largest contributor to
       "Why Prime Data Source" not fitting a phone screen in one scroll —
       tighter padding/icon/type sizing here, not just smaller gaps.
       Placed after the base .why-card/.performance-card rules (same
       specificity either way) so it actually wins the cascade — an
       earlier attempt at this same override, positioned earlier in the
       file, was silently losing to these base rules. */
    .why-card {
        padding: 0.75rem 0.9rem 0.75rem;
    }

    .why-card-icon {
        width: 36px;
        height: 36px;
        margin-bottom: 0.4rem;
        font-size: 0.9rem;
    }

    .why-card h3 {
        font-size: 1rem;
        margin-bottom: 0.3rem;
    }

    .why-card p {
        font-size: 0.85rem;
        line-height: 1.45;
    }

    .performance-card {
        padding: 0.85rem 0.9rem;
    }

    .performance-seal {
        margin-bottom: 0.5rem;
    }

    .performance-seal img {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    .performance-card p {
        font-size: 0.85rem;
        line-height: 1.42;
    }
}

.performance-meta {
    display: inline-block;
    padding: 0.32rem 0.58rem;
    border-radius: 999px;
    background: linear-gradient(
        165deg,
        rgba(22, 103, 128, 0.12) 0%,
        rgba(22, 103, 128, 0.2) 100%
    );
    color: var(--nav-ink);
    border: 1px solid rgba(22, 103, 128, 0.28);
    box-shadow:
        0 2px 8px rgba(22, 103, 128, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

body.home-page #past-performance-highlights .btn-ethio {
    box-shadow: 0 10px 20px rgba(22, 103, 128, 0.35);
}

/* Match home CTA buttons to /how-to-buy "Request a Quote" style */
body.home-page .btn-home-how-buy-match {
    background: linear-gradient(135deg, #166780 0%, #166780 100%);
    border: 1px solid rgba(22, 103, 128, 0.72);
    box-shadow: 0 10px 22px rgba(18, 21, 28, 0.38);
    border-radius: 2px;
}

body.home-page .btn-home-how-buy-match:hover,
body.home-page .btn-home-how-buy-match:focus {
    background: linear-gradient(135deg, #166780 0%, #166780 100%);
    color: #fff;
    box-shadow: 0 14px 26px rgba(18, 21, 28, 0.42);
}

@media (max-width: 575.98px) {
    body.home-page #past-performance-highlights .btn-ethio {
        white-space: nowrap;
    }
}

/* Prevent perceived blank dark strip before footer animations run */
body.home-page #footer-section .reveal {
    opacity: 1;
}

/* ============================================================
   CAPABILITY DETAIL PAGES — Normal Scroll Mode
   ============================================================ */

/* 1. Unlock html/body overflow so the page scrolls normally */
html.capability-html {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
}
html.capability-html body.capability-page {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    height: auto !important;
    padding-top: var(--navbar-offset); /* stay below fixed navbar */
}

/* 2. Make the snap-container a plain flow container — no snap */
html.capability-html body.capability-page .snap-container {
    height: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
    display: block !important;
}

/* 3. Kill min-height and snap on ALL sections inside capability pages */
html.capability-html body.capability-page section,
body.capability-page section {
    min-height: 0 !important;
    height: auto !important;
    scroll-snap-align: none !important;
    display: block !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* 4. Hide side-dots — not used on normal-scroll pages */
body.capability-page .side-dots {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────
   5. HERO — cinematic banner, left-aligned, content-rich
   ───────────────────────────────────────────────────────────── */
body.capability-page .capability-hero {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    min-height: 620px !important;
    height: auto !important;
    padding-top: 100px !important;
    padding-bottom: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}
body.capability-page .capability-hero .section-bg {
    position: absolute !important;
    inset: 0;
    background-size: cover;
    background-position: center 30%;
    z-index: 1;
    transform: none !important;
    transition: none !important;
}
body.agency-page.agency-usda .capability-hero .section-bg {
    background-image: url("/images/agencies/usda-forest-bg.png");
    background-position: center center;
}
body.capability-page .capability-hero .overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(
            to right,
            rgba(6, 16, 40, 0.92) 0%,
            rgba(6, 16, 40, 0.6) 55%,
            rgba(6, 16, 40, 0.25) 100%
        ),
        linear-gradient(
            to top,
            rgba(6, 16, 40, 0.98) 0%,
            rgba(6, 16, 40, 0) 55%
        );
}
body.capability-page .capability-hero .content-container {
    position: relative;
    z-index: 3;
    text-align: left;
    padding-bottom: 0;
    padding-inline: clamp(20px, 5vw, 48px);
    box-sizing: border-box;
    max-width: 760px;
}

/* Hero inner content block — card-like bottom strip */
body.capability-page .cap-hero-inner {
    padding: 56px 0 62px;
    border-left: 4px solid var(--ethio-red);
    padding-left: 32px;
    max-width: 680px;
    position: relative;
}
body.capability-page .cap-hero-inner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 24px;
    height: 1px;
    background: linear-gradient(
        to right,
        rgba(22, 103, 128, 0.38) 0%,
        rgba(22, 103, 128, 0) 80%
    );
}
body.capability-page .cap-hero-label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ethio-red);
    margin-bottom: 14px;
}
body.capability-page .cap-hero-title {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 900;
    line-height: 1.08;
    color: #fff;
    margin: 0 0 18px;
    text-transform: none;
    letter-spacing: -0.02em;
}
body.capability-page .cap-hero-copy {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.72;
    max-width: 560px;
    margin: 0 0 28px;
}
body.capability-page .cap-hero-inner .btn-ethio {
    border-radius: 2px;
}

body.agency-page.agency-dod .capability-hero .content-container {
    max-width: 1180px;
    z-index: 4;
}
body.agency-page.agency-doi .capability-hero .content-container {
    max-width: 1180px;
    text-align: left;
}
body.agency-page:not(.agency-dod):not(.agency-doi) .capability-hero .content-container {
    max-width: 1180px;
}
body.agency-page .cap-hero-agency-layout {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: clamp(22px, 4vw, 56px);
    width: 100%;
}
body.agency-page .cap-hero-seal--agency {
    flex: 0 0 auto;
    margin: 0 0 0 auto;
    text-align: center;
    align-self: center;
}
body.agency-page .cap-hero-seal--agency img {
    width: clamp(120px, 13vw, 180px);
    height: auto;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.55));
}
body.agency-page .cap-hero-seal--circle img {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #fff;
    padding: 12px;
}
body.agency-page.agency-usda .cap-hero-seal--circle {
    width: clamp(130px, 14vw, 190px);
    height: clamp(130px, 14vw, 190px);
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}
body.agency-page.agency-usda .cap-hero-seal--circle img {
    width: 78%;
    height: 78%;
    padding: 0;
    background: transparent;
    filter: none;
}
body.agency-page.agency-doi .cap-hero-seal--circle {
    width: clamp(130px, 14vw, 190px);
    height: clamp(130px, 14vw, 190px);
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: clamp(3px, 0.35vw, 4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
}
body.agency-page.agency-doi .cap-hero-seal--circle img {
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: contain;
    object-position: center;
    transform: scale(1.16);
    transform-origin: center;
    filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.55));
}
body.agency-page.agency-doi .cap-hero-doi-layout {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(220px, 32vw, 320px);
}
body.agency-page.agency-doi .cap-hero-inner {
    margin: 0;
    max-width: 640px;
    border-left: 4px solid var(--ethio-red);
    padding-left: 32px;
}
body.agency-page.agency-doi .cap-hero-copy {
    margin-left: 0;
    margin-right: 0;
}
body.agency-page.agency-doi .cap-hero-seal--doi {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(120px, 13vw, 180px);
    height: clamp(120px, 13vw, 180px);
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(10px, 1.1vw, 14px);
    line-height: 0;
    z-index: 2;
    pointer-events: none;
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.42),
        inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
body.agency-page.agency-doi .cap-hero-seal--doi img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.55));
}
body.agency-page.agency-dod .capability-hero.agency-dod-hero .agency-dod-hero-bg {
    background-color: #050d1f;
    background-image: url("/images/agencies/dod-scenes/dod-hero-bg.png");
    background-size: cover;
    background-position: center 35%;
}
body.agency-page.agency-dod .agency-dod-hero-atmosphere {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image: url("https://images.unsplash.com/photo-1528498032893-07cb7bf7c935?auto=format&fit=crop&w=2200&q=85");
    background-size: cover;
    background-position: 78% 40%;
    opacity: 0.5;
    mix-blend-mode: soft-light;
    mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.92) 32%, rgba(0, 0, 0, 0.45) 65%, rgba(0, 0, 0, 0.12) 100%);
    mask-size: 100% 100%;
    -webkit-mask-image: linear-gradient(
        to left,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.92) 32%,
        rgba(0, 0, 0, 0.45) 65%,
        rgba(0, 0, 0, 0.12) 100%
    );
}
body.agency-page.agency-dod .capability-hero.agency-dod-hero .overlay {
    z-index: 3;
    background:
        linear-gradient(
            to right,
            rgba(6, 16, 40, 0.94) 0%,
            rgba(6, 16, 40, 0.78) 44%,
            rgba(6, 16, 40, 0.46) 68%,
            rgba(6, 16, 40, 0.22) 100%
        ),
        linear-gradient(to top, rgba(6, 16, 40, 0.82) 0%, rgba(6, 16, 40, 0.15) 52%, transparent 88%);
}
body.agency-page.agency-dod .cap-hero-dod-layout {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: clamp(22px, 4vw, 56px);
    width: 100%;
}
body.agency-page.agency-dod .cap-hero-seal {
    flex: 0 0 auto;
    margin: 0 0 0 auto;
    text-align: center;
    align-self: center;
}
body.agency-page.agency-dod .cap-hero-seal img {
    width: clamp(120px, 15vw, 200px);
    height: auto;
    display: block;
    filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.55));
}
body.agency-page.agency-dod .cap-hero-inner {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 640px;
}
body.agency-page.agency-dod .cap-hero-inner .cap-hero-copy {
    margin-bottom: 0;
}
body.agency-page.agency-dod .cap-perf-card-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}
body.agency-page.agency-dod .cap-perf-card-head {
    min-width: 0;
    flex: 1 1 auto;
}
body.agency-page.agency-dod .agency-dod-sub-card .cap-perf-card-logo {
    flex: 0 0 auto;
    line-height: 0;
}
body.agency-page.agency-dod .agency-dod-sub-card .cap-perf-card-logo img {
    width: 72px;
    height: 72px;
    max-width: 88px;
    object-fit: contain;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
    box-sizing: border-box;
}
body.agency-page.agency-doi .doi-program-card {
    position: relative;
    isolation: isolate;
    background-color: #0a1428;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 320px;
}
body.agency-page.agency-doi .doi-program-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        180deg,
        rgba(6, 16, 40, 0.42) 0%,
        rgba(6, 16, 40, 0.74) 46%,
        rgba(6, 16, 40, 0.92) 100%
    );
    z-index: 1;
    pointer-events: none;
}
body.agency-page.agency-doi .doi-program-card .cap-perf-card-top,
body.agency-page.agency-doi .doi-program-card .cap-perf-card-body {
    position: relative;
    z-index: 2;
}
body.agency-page.agency-doi .doi-program-card .cap-perf-card-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    background: rgba(6, 16, 40, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
body.agency-page.agency-doi .doi-program-card .cap-perf-card-head {
    min-width: 0;
    flex: 1 1 auto;
}
body.agency-page.agency-doi .doi-program-card .cap-perf-card-logo {
    flex: 0 0 auto;
    line-height: 0;
}
body.agency-page.agency-doi .doi-program-card .cap-perf-card-logo img {
    width: 74px;
    height: 74px;
    object-fit: contain;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}
body.agency-page.agency-doi .doi-program-card .cap-perf-card-body {
    background: rgba(6, 16, 40, 0.64);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
body.agency-page.agency-doi .doi-program-card--nps::after,
body.agency-page.agency-doi .doi-program-card--reclamation::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
}
body.agency-page.agency-doi .doi-program-card--nps::after {
    background-image: url("/images/agencies/doi/national-park-service-bg.png");
}
body.agency-page.agency-doi .doi-program-card--reclamation::after {
    background-image: url("/images/agencies/doi/bureau-of-reclamation-bg.png");
}
body.agency-page.agency-dhs .dhs-support-card {
    position: relative;
    isolation: isolate;
    background-color: #0a1428;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
body.agency-page.agency-dhs .dhs-support-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        180deg,
        rgba(6, 16, 40, 0.12) 0%,
        rgba(6, 16, 40, 0.34) 44%,
        rgba(6, 16, 40, 0.5) 100%
    );
    z-index: 1;
    pointer-events: none;
}
body.agency-page.agency-dhs .dhs-support-card .cap-perf-card-top,
body.agency-page.agency-dhs .dhs-support-card .cap-perf-card-body {
    position: relative;
    z-index: 2;
}
body.agency-page.agency-dhs .dhs-support-card .cap-perf-card-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 92px;
    background: rgba(6, 16, 40, 0.24);
}
body.agency-page.agency-dhs .dhs-support-card .cap-perf-card-head {
    min-width: 0;
    flex: 1 1 auto;
}
body.agency-page.agency-dhs .dhs-support-card .cap-perf-card-logo {
    flex: 0 0 auto;
    line-height: 0;
}
body.agency-page.agency-dhs .dhs-support-card .cap-perf-card-logo img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(10, 20, 40, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}
body.agency-page.agency-dhs .dhs-support-card .cap-perf-card-body {
    background: rgba(6, 16, 40, 0.3);
}
body.agency-page.agency-dhs .dhs-support-card--nasa::after,
body.agency-page.agency-dhs .dhs-support-card--treasury::after,
body.agency-page.agency-dhs .dhs-support-card--energy::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
}
body.agency-page.agency-dhs .dhs-support-card--nasa::after {
    background-image: url("/images/agencies/dhs-support/nasa-bg.png");
}
body.agency-page.agency-dhs .dhs-support-card--nasa .cap-perf-card-logo img {
    background: #fff;
    padding: 6px;
}
body.agency-page.agency-dhs .dhs-support-card--treasury::after {
    background-image: url("/images/agencies/dhs-support/treasury-bg.webp");
}
body.agency-page.agency-dhs .dhs-support-card--energy::after {
    background-image: url("/images/agencies/dhs-support/energy-bg.webp");
}
body.agency-page.agency-state-muni .state-muni-card .cap-perf-card-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 92px;
}
body.agency-page.agency-state-muni .state-muni-card .cap-perf-card-head {
    min-width: 0;
    flex: 1 1 auto;
}
body.agency-page.agency-state-muni .state-muni-card .cap-perf-card-logo {
    flex: 0 0 auto;
    line-height: 0;
}
body.agency-page.agency-state-muni .state-muni-card .cap-perf-card-logo img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(10, 20, 40, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}
body.agency-page.agency-state-muni .state-muni-card--ut-austin {
    position: relative;
    isolation: isolate;
    background-color: #0a1428;
}
body.agency-page.agency-state-muni .state-muni-card--ut-austin::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: url("/images/agencies/state-muni/university-of-texas-bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
}
body.agency-page.agency-state-muni .state-muni-card--kc-bpu {
    position: relative;
    isolation: isolate;
    background-color: #0a1428;
}
body.agency-page.agency-state-muni .state-muni-card--kc-bpu::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: url("/images/agencies/state-muni/kansas-city-bpu-bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
}
body.agency-page.agency-state-muni .state-muni-card--kc-bpu::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        180deg,
        rgba(6, 16, 40, 0.2) 0%,
        rgba(6, 16, 40, 0.52) 44%,
        rgba(6, 16, 40, 0.72) 100%
    );
    z-index: 1;
    pointer-events: none;
}
body.agency-page.agency-state-muni .state-muni-card--kc-bpu .cap-perf-card-top,
body.agency-page.agency-state-muni .state-muni-card--kc-bpu .cap-perf-card-body {
    position: relative;
    z-index: 2;
}
body.agency-page.agency-state-muni .state-muni-card--kc-bpu .cap-perf-card-top {
    background: rgba(6, 16, 40, 0.34);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
body.agency-page.agency-state-muni .state-muni-card--kc-bpu .cap-perf-card-logo img {
    background: #fff;
    border-radius: 50%;
    padding: 6px;
}
body.agency-page.agency-state-muni .state-muni-card--kc-bpu .cap-perf-card-body {
    background: rgba(6, 16, 40, 0.42);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
body.agency-page.agency-state-muni .state-muni-card--tx-dps {
    position: relative;
    isolation: isolate;
    background-color: #0a1428;
}
body.agency-page.agency-state-muni .state-muni-card--tx-dps::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: url("/images/agencies/state-muni/texas-dps-bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
}
body.agency-page.agency-state-muni .state-muni-card--tx-dps::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        180deg,
        rgba(6, 16, 40, 0.2) 0%,
        rgba(6, 16, 40, 0.52) 44%,
        rgba(6, 16, 40, 0.72) 100%
    );
    z-index: 1;
    pointer-events: none;
}
body.agency-page.agency-state-muni .state-muni-card--tx-dps .cap-perf-card-top,
body.agency-page.agency-state-muni .state-muni-card--tx-dps .cap-perf-card-body {
    position: relative;
    z-index: 2;
}
body.agency-page.agency-state-muni .state-muni-card--tx-dps .cap-perf-card-top {
    background: rgba(6, 16, 40, 0.34);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
body.agency-page.agency-state-muni .state-muni-card--tx-dps .cap-perf-card-body {
    background: rgba(6, 16, 40, 0.42);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
body.agency-page.agency-state-muni .state-muni-card--ut-austin::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        180deg,
        rgba(6, 16, 40, 0.2) 0%,
        rgba(6, 16, 40, 0.52) 44%,
        rgba(6, 16, 40, 0.72) 100%
    );
    z-index: 1;
    pointer-events: none;
}
body.agency-page.agency-state-muni .state-muni-card--ut-austin .cap-perf-card-top,
body.agency-page.agency-state-muni .state-muni-card--ut-austin .cap-perf-card-body {
    position: relative;
    z-index: 2;
}
body.agency-page.agency-state-muni .state-muni-card--ut-austin .cap-perf-card-top {
    background: rgba(6, 16, 40, 0.34);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
body.agency-page.agency-state-muni .state-muni-card--ut-austin .cap-perf-card-body {
    background: rgba(6, 16, 40, 0.42);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
@media (max-width: 767.98px) {
    body.agency-page .capability-hero .content-container {
        padding-bottom: clamp(24px, 6vw, 40px);
    }
    body.agency-page .cap-hero-agency-layout {
        flex-direction: column;
        align-items: stretch;
        gap: clamp(16px, 4vw, 24px);
    }
    body.agency-page .cap-hero-seal--agency {
        align-self: center;
        margin: 0 auto clamp(20px, 5vw, 32px);
    }
    body.agency-page.agency-dod .cap-hero-dod-layout {
        flex-direction: column;
        align-items: stretch;
        gap: clamp(16px, 4vw, 24px);
    }
    body.agency-page.agency-dod .cap-hero-inner {
        max-width: none;
    }
    body.agency-page.agency-dod .cap-hero-seal {
        align-self: center;
        margin: 0 auto clamp(20px, 5vw, 32px);
    }
    body.agency-page.agency-dod .agency-dod-hero-atmosphere {
        opacity: 0.4;
        background-position: center center;
        -webkit-mask-image: none;
        mask-image: none;
    }

    /* QA Task 6: prevent DOD sub-agency card text/seal overlap on mobile */
    body.agency-page.agency-dod .agency-dod-sub-card .cap-perf-card-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    body.agency-page.agency-dod .agency-dod-sub-card .cap-perf-card-logo {
        align-self: flex-start;
    }

    body.agency-page.agency-dod .agency-dod-sub-card .cap-perf-title {
        word-break: break-word;
        padding-right: 0;
    }
    body.agency-page.agency-dod .capability-hero.agency-dod-hero .overlay {
        background:
            linear-gradient(
                to bottom,
                rgba(6, 16, 40, 0.88) 0%,
                rgba(6, 16, 40, 0.94) 100%
            ),
            linear-gradient(to top, rgba(6, 16, 40, 0.82) 0%, transparent 55%);
    }
    body.agency-page.agency-doi .doi-program-card .cap-perf-card-top {
        gap: 12px;
    }
    body.agency-page.agency-doi .doi-program-card .cap-perf-card-logo img {
        width: 60px;
        height: 60px;
    }
    body.agency-page.agency-doi .cap-hero-doi-layout {
        min-height: 0;
        display: block;
    }
    body.agency-page.agency-doi .cap-hero-seal--doi {
        position: static;
        transform: none;
        margin: 0 auto 20px;
    }
}

/* ─────────────────────────────────────────────────────────────
   6. SECTION SHELL — non-hero content sections
   ───────────────────────────────────────────────────────────── */
body.capability-page .cap-section {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    background-color: var(--ethio-dark-blue);
    padding: 0 !important;
    overflow: visible !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body.capability-page .cap-section .overlay {
    display: none; /* Not needed on flat bg sections */
}
body.capability-page .cap-section .content-container {
    position: relative;
    z-index: 1;
    padding-top: 76px !important;
    padding-bottom: 82px !important;
    margin-left: auto;
    margin-right: auto;
}

/* Section heading block — consistent across all sections */
body.capability-page .cap-section-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ethio-red);
    margin-bottom: 18px;
}
body.capability-page .cap-section-label::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 2px;
    background: var(--ethio-red);
    flex-shrink: 0;
}
body.capability-page .cap-section-heading {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
    margin: 0 0 14px;
    text-transform: none;
    letter-spacing: -0.01em;
}
body.capability-page .cap-section-copy {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.7;
    max-width: 640px;
    margin: 0 0 40px;
}
.cap-deliver-grid,
.cap-agency-strip,
#cap-codes .row,
#cap-past-perf .row {
    margin-bottom: 18px;
}

/* ─────────────────────────────────────────────────────────────
   7. DELIVER CARDS — premium grid
   ───────────────────────────────────────────────────────────── */
.cap-deliver-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    overflow: hidden;
}
.cap-deliver-grid--five {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    justify-content: center;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    overflow: hidden;
}
.cap-deliver-grid--five .cap-deliver-card {
    width: calc((100% - 2px) / 3);
}
.cap-deliver-grid--five .cap-deliver-card:nth-child(4),
.cap-deliver-grid--five .cap-deliver-card:nth-child(5) {
    width: calc((100% - 1px) / 2);
}
.cap-deliver-card {
    background: rgba(8, 20, 46, 0.95);
    border: none;
    border-left: none;
    border-radius: 0;
    padding: 28px 26px;
    transition:
        background 0.22s ease,
        box-shadow 0.22s ease;
    position: relative;
}
a.cap-deliver-card {
    display: block;
    text-decoration: none;
    color: inherit;
}
.cap-deliver-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 0;
    background: var(--ethio-red);
    transition: height 0.3s ease;
}
.cap-deliver-card:hover::before {
    height: 100%;
}
.cap-deliver-card:hover {
    background: rgba(12, 28, 60, 0.98);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.cap-deliver-card h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: 0;
}
.cap-deliver-card h4 i {
    color: var(--ethio-red);
    font-size: 0.95rem;
    opacity: 1;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}
.cap-deliver-card p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    margin-bottom: 0;
    line-height: 1.65;
}

/* ─────────────────────────────────────────────────────────────
   8. AGENCY STRIP — polished row
   ───────────────────────────────────────────────────────────── */
.cap-agency-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 42px;
    justify-content: flex-start;
    align-items: flex-start;
}
.cap-agency-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.cap-agency-logo {
    width: 92px;
    height: 92px;
    object-fit: contain;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}
.cap-agency-logo:hover {
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}
.cap-agency-name {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.62);
    text-align: center;
    letter-spacing: 0.03em;
    line-height: 1.3;
}
.cap-agency-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.82);
    border-radius: 3px;
    padding: 7px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}
.cap-agency-badge:hover {
    border-color: var(--ethio-red);
    background: rgba(22, 103, 128, 0.08);
    color: #fff;
}
.cap-agency-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    min-height: 64px;
    padding: 10px 12px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-align: center;
    line-height: 1.2;
}

/* Agency detail pages: premium capability cards */
.agency-cap-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.agency-cap-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    min-height: 78px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
        rgba(9, 21, 48, 0.92);
    color: #f1f4fb;
    text-decoration: none;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}
.agency-cap-card:hover,
.agency-cap-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(22, 103, 128, 0.65);
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.32),
        inset 0 0 0 1px rgba(22, 103, 128, 0.16);
    background:
        linear-gradient(180deg, rgba(22, 103, 128, 0.12), rgba(22, 103, 128, 0.05)),
        rgba(10, 24, 54, 0.96);
    color: #fff;
}
.agency-cap-card-num {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}
.agency-cap-card-title {
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.35;
}
.agency-cap-card-arrow {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.7);
}
.agency-cap-card:hover .agency-cap-card-arrow,
.agency-cap-card:focus-visible .agency-cap-card-arrow {
    color: #fff;
}

/* ─────────────────────────────────────────────────────────────
   9. CODE BOXES — structured data tables
   ───────────────────────────────────────────────────────────── */
.cap-code-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-top: 2px solid var(--ethio-gold);
    border-radius: 4px;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

/* QA Task 2: consistent inner padding for footprint / stat cards */
.cap-code-box > p,
.cap-code-box > .mb-0 {
    margin: 0;
    padding: 12px 20px 16px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.55;
}
.cap-code-label {
    display: block;
    color: var(--ethio-gold);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(197, 160, 89, 0.06);
    margin-bottom: 0;
}
.cap-code-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cap-code-list li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.82rem;
    padding: 11px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-family: "Courier New", monospace;
    line-height: 1.5;
    transition: background 0.15s ease;
}
.cap-code-list li:hover {
    background: rgba(255, 255, 255, 0.03);
}
.cap-code-list li:last-child {
    border-bottom: none;
}

/* ─────────────────────────────────────────────────────────────
   10. PAST PERFORMANCE CARDS — high-impact data cards
   ───────────────────────────────────────────────────────────── */
.cap-perf-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 0;
    height: 100%;
    overflow: hidden;
    transition:
        border-color 0.25s ease,
        transform 0.25s ease;
}
.cap-perf-card:hover {
    border-color: rgba(197, 160, 89, 0.4);
    transform: translateY(-3px);
}
.cap-perf-card-top {
    padding: 28px 28px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(197, 160, 89, 0.04);
}
.cap-perf-card-body {
    padding: 20px 28px 24px;
}
.cap-perf-amount {
    font-size: 2.6rem;
    font-weight: 900;
    color: var(--ethio-gold);
    line-height: 1;
    margin-bottom: 4px;
    letter-spacing: -0.02em;
}
.cap-perf-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
    line-height: 1.3;
}
.cap-perf-detail {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.38);
    font-family: "Courier New", monospace;
    letter-spacing: 0.02em;
    margin: 0;
}
.cap-perf-card-body p {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.62);
    margin: 0;
    line-height: 1.68;
}
.cap-perf-card--note .cap-perf-card-top {
    background: rgba(22, 103, 128, 0.05);
}

/* DoD agency page — full-card scene background (local assets; replaces remote <img> strips) */
body.agency-page.agency-dod .agency-dod-sub-card {
    position: relative;
    isolation: isolate;
    background-color: #0a1428;
    min-height: 320px;
}
body.agency-page.agency-dod .agency-dod-sub-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: var(--dod-scene);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
}
body.agency-page.agency-dod .agency-dod-sub-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        180deg,
        rgba(6, 16, 40, 0.35) 0%,
        rgba(6, 16, 40, 0.72) 42%,
        rgba(6, 16, 40, 0.9) 100%
    );
    z-index: 1;
    pointer-events: none;
}
body.agency-page.agency-dod .agency-dod-sub-card .cap-perf-card-top,
body.agency-page.agency-dod .agency-dod-sub-card .cap-perf-card-body {
    position: relative;
    z-index: 2;
}
body.agency-page.agency-dod .agency-dod-sub-card .cap-perf-card-top {
    background: rgba(6, 16, 40, 0.52);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.agency-page.agency-dod .agency-dod-sub-card .cap-perf-card-body {
    background: rgba(6, 16, 40, 0.62);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Scene-backed agency perf cards: photo + tint reach every edge of the rounded frame */
body.agency-page.agency-dod .agency-dod-sub-card,
body.agency-page.agency-doi .doi-program-card,
body.agency-page.agency-dhs .dhs-support-card,
body.agency-page.agency-state-muni .state-muni-card--kc-bpu,
body.agency-page.agency-state-muni .state-muni-card--tx-dps,
body.agency-page.agency-state-muni .state-muni-card--ut-austin {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-clip: border-box;
    background-origin: border-box;
    border: none;
    box-shadow: inset 0 0 0 1px rgba(22, 103, 128, 0.18);
}
body.agency-page.agency-dod .agency-dod-sub-card .cap-perf-card-top,
body.agency-page.agency-doi .doi-program-card .cap-perf-card-top,
body.agency-page.agency-dhs .dhs-support-card .cap-perf-card-top,
body.agency-page.agency-state-muni .state-muni-card--kc-bpu .cap-perf-card-top,
body.agency-page.agency-state-muni .state-muni-card--tx-dps .cap-perf-card-top,
body.agency-page.agency-state-muni .state-muni-card--ut-austin .cap-perf-card-top {
    flex-shrink: 0;
}
body.agency-page.agency-dod .agency-dod-sub-card .cap-perf-card-body,
body.agency-page.agency-doi .doi-program-card .cap-perf-card-body,
body.agency-page.agency-dhs .dhs-support-card .cap-perf-card-body,
body.agency-page.agency-state-muni .state-muni-card--kc-bpu .cap-perf-card-body,
body.agency-page.agency-state-muni .state-muni-card--tx-dps .cap-perf-card-body,
body.agency-page.agency-state-muni .state-muni-card--ut-austin .cap-perf-card-body {
    flex: 1 1 auto;
}

/* USASpending source line */
.cap-source-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.28);
    letter-spacing: 0.04em;
}
.cap-source-line::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}

/* ─────────────────────────────────────────────────────────────
   11. CTA SECTION — accent stripe + centered call-to-action
   ───────────────────────────────────────────────────────────── */
body.capability-page .cap-cta-section {
    display: block !important;
    padding: 0 !important;
    text-align: center;
    background: transparent !important;
    border-bottom: none;
}
body.capability-page .cap-cta-section .cap-cta-inner {
    padding: 80px 0 0;
    position: relative;
}
body.capability-page .cap-cta-section .cap-cta-inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 3px;
    background: var(--ethio-red);
    border-radius: 2px;
}
body.capability-page .cap-cta-section .overlay {
    display: none;
}
body.capability-page .cap-cta-section .cap-section-label {
    justify-content: center;
}
body.capability-page .cap-cta-section .cap-section-label::before {
    display: none;
}
body.capability-page .cap-cta-section .cap-section-heading {
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    margin-bottom: 14px;
}
body.capability-page .cap-cta-section .cap-section-copy {
    max-width: 520px;
    margin: 0 auto 32px;
    color: rgba(255, 255, 255, 0.58);
}
body.capability-page .cap-cta-section .btn-ethio {
    border-radius: 2px;
}

/* Trust bar inside CTA */
body.capability-page .cap-cta-section .trust-bar {
    margin-top: 28px;
    margin-bottom: 0;
    border-top: none;
    padding-top: 0;
}

/* ─────────────────────────────────────────────────────────────
   12. FOOTER — natural flow, no extra height
   ───────────────────────────────────────────────────────────── */
body.capability-page #footer-section {
    min-height: auto !important;
    height: auto !important;
    display: block !important;
    scroll-snap-align: none !important;
    /* Same as global #footer-section; vertical padding from Footer Unification block */
    overflow: hidden !important;
}

/* ============================================================
   CAPABILITY HERO BACKGROUNDS
   Each page has a unique, subject-matched image.
   Sources: NASA (public domain), Unsplash, Wikimedia/Bureau of Reclamation
   ============================================================ */

.it-bg {
    background-image:
        linear-gradient(var(--hero-overlay-standard)),
        url("/images/hero-networking-fiber.jpg") !important;
    background-position: center center !important;
    background-size: cover !important;
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE — capability detail pages
   ───────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .cap-deliver-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .cap-deliver-grid--five .cap-deliver-card {
        width: calc((100% - 1px) / 2);
    }
    body.capability-page .cap-section {
        padding: 0 !important;
    }
    body.capability-page .cap-section .content-container {
        padding-top: 64px !important;
        padding-bottom: 68px !important;
    }
    body.capability-page .capability-hero {
        min-height: 520px !important;
        align-items: center !important;
    }
    body.capability-page .cap-hero-inner {
        /* Keep left inset on tablet widths; shorthand had reset it to 0. */
        padding: 40px 0 44px 28px;
    }
    .agency-cap-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .agency-cap-card {
        min-height: 72px;
        padding: 14px 14px;
    }
    .agency-cap-card-title {
        font-size: 0.8rem;
    }
}
@media (max-width: 767px) {
    .cap-deliver-grid {
        grid-template-columns: 1fr;
    }
    .cap-deliver-grid--five .cap-deliver-card {
        width: 100%;
    }
    /* Override higher-specificity desktop rule so items 4–5 stack, not sit in two columns */
    .cap-deliver-grid--five .cap-deliver-card:nth-child(4),
    .cap-deliver-grid--five .cap-deliver-card:nth-child(5) {
        width: 100%;
    }
    body.capability-page .cap-section {
        padding: 0 !important;
    }
    body.capability-page .cap-section .content-container {
        padding-top: 52px !important;
        padding-bottom: 56px !important;
    }
    .cap-agency-logo {
        width: 78px;
        height: 78px;
        padding: 8px;
    }
    body.capability-page .capability-hero {
        min-height: 400px !important;
        padding-top: 80px !important;
    }
    body.capability-page .cap-hero-inner {
        border-left: none;
        padding-left: 0;
        border-top: 3px solid var(--ethio-red);
        padding-top: 24px;
    }
    .cap-agency-strip {
        gap: 8px;
    }
    .agency-cap-grid {
        grid-template-columns: 1fr;
    }
    .agency-cap-card {
        min-height: 66px;
        border-radius: 7px;
    }
    .agency-cap-card-num {
        font-size: 0.64rem;
    }
    .agency-cap-card-title {
        font-size: 0.78rem;
    }
    .cap-perf-amount {
        font-size: 2.1rem;
    }
    .cap-perf-card-top,
    .cap-perf-card-body {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* 4. Scientific & Laboratory Equipment
   Modern analytical laboratory with precision instruments and clean bench space.
   Source: Unsplash */
.lab-bg {
    background-image:
        linear-gradient(var(--hero-overlay-standard)),
        url("/images/hero-medical-laboratory.jpg") !important;
    background-position: center center !important;
    background-size: cover !important;
}

/* 5. Field Operations & Temporary Infrastructure
   Large group of tents in an open field — disaster relief / emergency staging.
   Multiple structures visible, natural backdrop — matches blueprint description:
   "temporary shelter camp in remote/field location — disaster response staging."
   Source: Unsplash (photo by Salah Darwish — tagged: disaster relief, emergency shelter, tent city) */
.field-bg {
    background-image:
        linear-gradient(var(--hero-overlay-standard)),
        url("/images/hero-field-operations.jpg") !important;
    background-size: cover !important;
    background-position: center center !important;
}

/* 6. Conservation & Environmental Services
   Glen Canyon Dam panoramic — iconic Bureau of Reclamation arch dam
   with Lake Powell and surrounding canyon landscape.
   Source: Wikimedia Commons / U.S. Bureau of Reclamation (public domain) */
.conservation-bg {
    background-image:
        linear-gradient(
            to right,
            rgba(6, 16, 40, 0.85) 0%,
            rgba(6, 16, 40, 0.45) 50%,
            rgba(6, 16, 40, 0.2) 100%
        ),
        linear-gradient(
            to top,
            rgba(6, 16, 40, 0.95) 0%,
            rgba(6, 16, 40, 0) 45%
        ),
        url("https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Glen_Canyon_Dam_MC.jpg/1920px-Glen_Canyon_Dam_MC.jpg") !important;
    background-position: center 55% !important;
}

/* ============================================================
   COMMAND CENTER MEGA MENU — Capabilities Dropdown
   ============================================================ */
@media (min-width: 992px) {
    /* Keep a small top/bottom padding on the dropdown menu so the cursor
       has a continuous hover surface between the nav-link and the visible
       mega-panel (prevents flicker when moving the mouse down into it). */
    .mega-capabilities .dropdown-menu,
    .mega-agencies .dropdown-menu,
    .mega-about .dropdown-menu {
        padding-top: 0.35rem !important;
        padding-bottom: 0.5rem !important;
    }

    /* ----------------------------------------------------------
       CMD — Command Center (Capabilities)
    ---------------------------------------------------------- */
    .cmd-mega-menu {
        display: flex;
        min-height: 340px;
        max-width: 1120px;
        margin: 0 auto;
        border-radius: 18px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(8, 14, 28, 0.97);
        box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .cmd-tabs-col {
        width: 38%;
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        display: flex;
        flex-direction: column;
        padding: 0.5rem 0;
    }

    .cmd-tab {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.82rem 1.2rem;
        color: rgba(255, 255, 255, 0.65);
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        border-left: 3px solid transparent;
        text-decoration: none;
        transition:
            color 0.18s ease,
            border-left-color 0.18s ease,
            background 0.18s ease;
        position: relative;
    }

    .cmd-tab:hover,
    .cmd-tab.cmd-tab--active {
        color: #fff;
        border-left-color: #166780;
        background: rgba(22, 103, 128, 0.07);
    }

    .cmd-tab-icon {
        width: 30px;
        height: 30px;
        min-width: 30px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.12);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        position: relative;
        transition:
            background 0.18s ease,
            border-color 0.18s ease;
    }

    .cmd-tab:hover .cmd-tab-icon,
    .cmd-tab.cmd-tab--active .cmd-tab-icon {
        background: rgba(22, 103, 128, 0.18);
        border-color: rgba(22, 103, 128, 0.4);
    }

    /* SVG icons via ::before on each icon class */
    .cmd-tab-icon::before {
        content: "";
        width: 14px;
        height: 14px;
        display: block;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .cmd-icon-it::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M4 6a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v4a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V6Zm3-1a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H7Zm-2 9h14v2H5v-2Z'/%3E%3C/svg%3E");
    }

    .cmd-icon-eq::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M3 16v-2h2.1l1.6-4.5A2 2 0 0 1 8.6 8H14V6a2 2 0 0 1 2-2h3v2h-3v2h2a2 2 0 0 1 2 2v4h1v2h-1.2a2.8 2.8 0 0 1-5.6 0H9.8a2.8 2.8 0 0 1-5.6 0H3Z'/%3E%3C/svg%3E");
    }

    .cmd-icon-in::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M13 2h-2v4H7v2h4v4H7v2h4v8h2v-8h4v-2h-4V8h4V6h-4V2Z'/%3E%3C/svg%3E");
    }

    .cmd-icon-fo::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2 2 7v2l10-5 10 5V7L12 2Zm-6 9h12v10H6V11Z'/%3E%3C/svg%3E");
    }

    .cmd-icon-ce::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2c3 4 3 7 0 10-3-3-3-6 0-10Zm7 6c1 6-2 10-7 14C7 18 4 14 5 8c2 6 5 8 7 9 2-1 5-3 7-9Z'/%3E%3C/svg%3E");
    }

    .cmd-icon-sl::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M9 2h6v2h-1v5.2l4.6 7.7A3 3 0 0 1 16.1 21H7.9a3 3 0 0 1-2.5-4.6L10 9.2V4H9V2Z'/%3E%3C/svg%3E");
    }

    .cmd-tab-label {
        flex: 1;
        line-height: 1.3;
    }

    .cmd-tab-arrow {
        color: rgba(255, 255, 255, 0.25);
        font-size: 1.3rem;
        line-height: 1;
        transition:
            color 0.18s ease,
            transform 0.18s ease;
    }

    .cmd-tab:hover .cmd-tab-arrow,
    .cmd-tab.cmd-tab--active .cmd-tab-arrow {
        color: #166780;
        transform: translateX(3px);
    }

    .cmd-panel-col {
        flex: 1;
        position: relative;
        overflow: hidden;
    }

    .cmd-panel {
        position: absolute;
        inset: 0;
        padding: 2.5rem 2rem;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-image:
            repeating-linear-gradient(
                45deg,
                rgba(255, 255, 255, 0.012) 0px,
                rgba(255, 255, 255, 0.012) 1px,
                transparent 1px,
                transparent 44px
            ),
            repeating-linear-gradient(
                -45deg,
                rgba(255, 255, 255, 0.012) 0px,
                rgba(255, 255, 255, 0.012) 1px,
                transparent 1px,
                transparent 44px
            );
    }

    .cmd-panel.cmd-panel--visible {
        opacity: 1;
        pointer-events: auto;
    }

    .cmd-panel-eyebrow {
        font-size: 0.62rem;
        text-transform: uppercase;
        letter-spacing: 2.5px;
        color: #166780;
        font-weight: 700;
        margin-bottom: 0.6rem;
    }

    .cmd-panel-title {
        font-size: 1.5rem;
        font-weight: 900;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: -0.5px;
        line-height: 1.15;
        margin-bottom: 0.9rem;
    }

    .cmd-panel-copy {
        color: rgba(255, 255, 255, 0.6);
        font-size: 0.8rem;
        line-height: 1.65;
        font-weight: 400;
        text-transform: none;
        letter-spacing: 0;
        max-width: 360px;
        margin-bottom: 0;
    }

    .cmd-panel-link {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        margin-top: 1.2rem;
        color: #166780;
        font-weight: 800;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        text-decoration: none;
        transition:
            gap 0.18s ease,
            color 0.18s ease;
    }

    .cmd-panel-link:hover {
        color: #8ec4e8;
        gap: 0.6rem;
    }

    /* ----------------------------------------------------------
       MSN — Mission Briefing (Agencies We Serve)
    ---------------------------------------------------------- */
    .msn-mega-menu {
        max-width: 1120px;
        margin: 0 auto;
        border-radius: 18px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(8, 14, 28, 0.97);
        box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        padding: 1.5rem 1.75rem 1.75rem;
    }

    .msn-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 0.9rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        margin-bottom: 1.25rem;
    }

    .msn-header-label {
        font-size: 0.62rem;
        text-transform: uppercase;
        letter-spacing: 2.5px;
        color: rgba(255, 255, 255, 0.45);
        font-weight: 700;
    }

    .msn-header-tagline {
        font-size: 0.7rem;
        color: rgba(255, 255, 255, 0.32);
        font-style: italic;
        font-weight: 400;
        text-transform: none;
        letter-spacing: 0;
        max-width: 55%;
        text-align: right;
    }

    .msn-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.9rem;
    }

    .msn-card {
        position: relative;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.035);
        border: 1px solid rgba(255, 255, 255, 0.09);
        overflow: hidden;
        padding: 1rem 1.1rem 1rem;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 0.9rem;
        transition:
            transform 0.2s ease,
            border-color 0.2s ease,
            background 0.2s ease,
            box-shadow 0.2s ease;
    }

    .msn-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--card-accent, #1a3a6e);
        transition: height 0.2s ease;
    }

    .msn-card:hover {
        transform: translateY(-3px);
        border-color: rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.07);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }

    .msn-card:hover::before {
        height: 4px;
    }

    .msn-card--active {
        border-color: rgba(255, 255, 255, 0.22);
        background: rgba(255, 255, 255, 0.06);
    }

    .msn-seal {
        width: 46px;
        height: 46px;
        min-width: 46px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.18);
        background: rgba(255, 255, 255, 0.06);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.5rem;
        font-weight: 900;
        color: rgba(255, 255, 255, 0.85);
        letter-spacing: 0.5px;
        text-align: center;
        text-transform: uppercase;
        line-height: 1.1;
        flex-shrink: 0;
        transition:
            border-color 0.2s ease,
            background 0.2s ease;
    }

    .msn-card:hover .msn-seal {
        border-color: var(--card-accent, rgba(255, 255, 255, 0.35));
        background: rgba(255, 255, 255, 0.12);
    }

    .msn-card-name {
        color: rgba(255, 255, 255, 0.92);
        font-weight: 800;
        font-size: 0.73rem;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        line-height: 1.3;
    }

    .msn-card-desc {
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.67rem;
        line-height: 1.4;
        text-transform: none;
        font-weight: 400;
        letter-spacing: 0;
        margin-top: 0.2rem;
    }

    /* ----------------------------------------------------------
       STORY — Story Reveal (About)
    ---------------------------------------------------------- */
    .story-mega-menu {
        display: flex;
        max-width: 1120px;
        margin: 0 auto;
        border-radius: 18px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(8, 14, 28, 0.97);
        box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        min-height: 260px;
    }

    .story-left {
        flex: 1;
        padding: 2.25rem 2.5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        position: relative;
    }

    .story-left::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #166780 0%, transparent 70%);
    }

    .story-eyebrow {
        font-size: 0.62rem;
        letter-spacing: 2.5px;
        color: rgba(255, 255, 255, 0.28);
        text-transform: uppercase;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .story-brand {
        font-size: 2.2rem;
        font-weight: 900;
        color: rgba(255, 255, 255, 0.06);
        letter-spacing: -1.5px;
        text-transform: uppercase;
        line-height: 0.95;
        margin-bottom: 0.9rem;
        user-select: none;
    }

    .story-divider {
        height: 2px;
        width: 60px;
        background: linear-gradient(90deg, #166780, transparent);
        margin-bottom: 1.5rem;
        border-radius: 999px;
    }

    .story-chapters {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
    }

    .story-chapter {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        text-decoration: none;
        padding: 0.7rem 0.9rem;
        border-radius: 10px;
        border: 1px solid transparent;
        transition:
            background 0.2s ease,
            border-color 0.2s ease;
    }

    .story-chapter:hover,
    .story-chapter.story-chapter--active {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.1);
    }

    .story-chapter-num {
        font-size: 0.62rem;
        color: #166780;
        font-weight: 900;
        letter-spacing: 1px;
        padding-top: 3px;
        flex-shrink: 0;
        font-family: "Courier New", Courier, monospace;
    }

    .story-chapter-body {
        flex: 1;
    }

    .story-chapter-title {
        color: rgba(255, 255, 255, 0.92);
        font-weight: 800;
        font-size: 0.88rem;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .story-chapter-title::after {
        content: "\2192";
        font-size: 0.82rem;
        opacity: 0;
        transform: translateX(-5px);
        transition:
            opacity 0.2s ease,
            transform 0.2s ease;
        display: inline-block;
        color: #166780;
    }

    .story-chapter:hover .story-chapter-title::after,
    .story-chapter.story-chapter--active .story-chapter-title::after {
        opacity: 1;
        transform: translateX(0);
    }

    .story-chapter-desc {
        color: rgba(255, 255, 255, 0.48);
        font-size: 0.71rem;
        margin-top: 0.2rem;
        line-height: 1.45;
        text-transform: none;
        font-weight: 400;
        letter-spacing: 0;
    }

    .story-right {
        width: 38%;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 2rem 1.75rem;
    }

    .story-right::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(
                ellipse at 30% 50%,
                rgba(22, 103, 128, 0.16) 0%,
                transparent 60%
            ),
            radial-gradient(
                ellipse at 80% 20%,
                rgba(58, 123, 213, 0.13) 0%,
                transparent 55%
            ),
            radial-gradient(
                ellipse at 60% 85%,
                rgba(149, 76, 233, 0.1) 0%,
                transparent 50%
            );
        animation: storyGlow 7s ease-in-out infinite alternate;
    }

    @keyframes storyGlow {
        from {
            opacity: 0.65;
        }
        to {
            opacity: 1;
        }
    }

    .story-creds {
        position: relative;
        z-index: 1;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.9rem;
    }

    .story-creds-label {
        font-size: 0.6rem;
        color: rgba(255, 255, 255, 0.38);
        text-transform: uppercase;
        letter-spacing: 2.5px;
        font-weight: 700;
    }

    .story-pills {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
    }

    .story-pill {
        padding: 0.38rem 1rem;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        background: rgba(255, 255, 255, 0.05);
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .story-pill--highlight {
        border-color: rgba(22, 103, 128, 0.45);
        background: rgba(22, 103, 128, 0.12);
        color: #8fe4da;
    }

    .story-tagline {
        font-size: 0.67rem;
        color: rgba(255, 255, 255, 0.3);
        text-align: center;
        max-width: 150px;
        line-height: 1.5;
        font-style: italic;
        font-weight: 400;
        text-transform: none;
        letter-spacing: 0;
    }
} /* end @media (min-width: 992px) */

/* ============================================================
   UNIFIED MEGA-PANEL SYSTEM
   One structural pattern for all three dropdowns:
   Capabilities · Agencies We Serve · About
   ============================================================ */
@media (min-width: 992px) {
    /* ── Shared: strip leftover side padding from the Bootstrap dropdown-menu.
       Keep a small top/bottom padding as an invisible hover bridge so the
       cursor doesn't drop out of :hover when moving from the nav-link to
       the visible mega-panel. ── */
    .mega-capabilities .dropdown-menu,
    .mega-agencies .dropdown-menu,
    .mega-about .dropdown-menu {
        padding: 0.35rem 0 0.5rem !important;
    }

    /* ────────────────────────────────────────────────────────────
       OUTER SHELL  (.mega-panel)
       Dark glass card — identical across all three dropdowns
    ──────────────────────────────────────────────────────────── */
    .mega-panel {
        display: flex;
        width: min(1120px, calc(100vw - 2rem));
        max-width: 1120px;
        margin: 0 auto;
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid rgba(22, 103, 128, 0.2);
        background: rgba(18, 21, 28, 0.97);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        /* Top accent line — shared, overridden per-dropdown below */
        position: relative;
    }

    .mega-panel--about {
        width: 100%;
        max-width: 100%;
    }

    /* Red gradient top border shared across all panels */
    .mega-panel::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(
            90deg,
            #166780 0%,
            rgba(22, 103, 128, 0.2) 60%,
            transparent 100%
        );
        z-index: 2;
        pointer-events: none;
    }

    /* ────────────────────────────────────────────────────────────
       LEFT INTRO COLUMN  (.mega-intro)
       Same layout, width, typography — accent color varies per dropdown
    ──────────────────────────────────────────────────────────── */
    .mega-intro {
        width: 290px;
        min-width: 290px;
        padding: 2rem 1.75rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        position: relative;
        /* Default tint — overridden per dropdown */
        background: radial-gradient(
            ellipse 160% 120% at 0% 50%,
            rgba(22, 103, 128, 0.14) 0%,
            transparent 70%
        );
    }

    /* Per-dropdown intro tint — Capabilities: blue/violet */
    .mega-panel--capabilities .mega-intro {
        background: radial-gradient(
            ellipse 160% 120% at 0% 50%,
            rgba(16, 130, 255, 0.16) 0%,
            transparent 70%
        );
    }

    /* Per-dropdown intro tint — Agencies: brand blue */
    .mega-panel--agencies .mega-intro {
        background: radial-gradient(
            ellipse 160% 120% at 0% 50%,
            rgba(22, 103, 128, 0.18) 0%,
            transparent 70%
        );
    }

    /* Per-dropdown intro tint — About: amber/red */
    .mega-panel--about .mega-intro {
        background: radial-gradient(
            ellipse 160% 120% at 0% 50%,
            rgba(22, 103, 128, 0.16) 0%,
            transparent 70%
        );
    }

    .mega-eyebrow {
        display: block;
        font-size: 0.6rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2.5px;
        color: #166780;
        margin-bottom: 0.65rem;
    }

    .mega-intro-title {
        font-size: 1.3rem;
        font-weight: 900;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: -0.3px;
        line-height: 1.15;
        margin: 0 0 0.85rem;
    }

    .mega-intro-copy {
        font-size: 0.77rem;
        color: rgba(255, 255, 255, 0.58);
        line-height: 1.6;
        font-weight: 400;
        text-transform: none;
        letter-spacing: 0;
        margin: 0;
    }

    /* ────────────────────────────────────────────────────────────
       RIGHT ITEMS COLUMN  (.mega-items)
       Grid of link rows — same structure for all three dropdowns
    ──────────────────────────────────────────────────────────── */
    .mega-items {
        flex: 1;
        padding: 1.1rem 1.25rem;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
        align-content: center;
    }

    /* About only has 2 items — single column, items are taller */
    .mega-items--about {
        flex: 1 1 auto;
        min-width: 0;
        grid-template-columns: 1fr;
        max-width: none;
        width: auto;
        padding: 1.5rem 1.75rem;
    }

    /* ────────────────────────────────────────────────────────────
       INDIVIDUAL ITEM ROW  (.mega-item)
       Shared across all three dropdowns
    ──────────────────────────────────────────────────────────── */
    .mega-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.7rem 0.85rem;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.07);
        background: rgba(255, 255, 255, 0.03);
        text-decoration: none;
        color: inherit;
        transition:
            background 0.18s ease,
            border-color 0.18s ease,
            transform 0.18s ease;
    }

    .mega-item:hover,
    .mega-item.mega-item--active {
        background: rgba(255, 255, 255, 0.07);
        border-color: rgba(255, 255, 255, 0.18);
        transform: translateY(-1px);
    }

    /* Taller rows for About (only 2 items in the col) */
    .mega-item--tall {
        padding: 1.1rem 1rem;
        align-items: flex-start;
    }

    /* ── Number badge ── */
    .mega-item-num {
        width: 34px;
        height: 34px;
        min-width: 34px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 0.65rem;
        font-weight: 900;
        font-family: "Courier New", Courier, monospace;
        letter-spacing: 0;
        color: #6eb5dd;
        background: rgba(22, 103, 128, 0.1);
        border: 1px solid rgba(22, 103, 128, 0.32);
        transition:
            background 0.18s ease,
            border-color 0.18s ease,
            color 0.18s ease;
    }

    .mega-item:hover .mega-item-num,
    .mega-item.mega-item--active .mega-item-num {
        color: #166780;
        background: rgba(22, 103, 128, 0.1);
        border-color: rgba(22, 103, 128, 0.3);
    }

    /* ── Body text ── */
    .mega-item-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .mega-item-title {
        display: block;
        font-size: 0.72rem;
        font-weight: 800;
        color: rgba(255, 255, 255, 0.9);
        text-transform: uppercase;
        letter-spacing: 0.6px;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mega-item-desc {
        display: block;
        margin-top: 0.2rem;
        font-size: 0.66rem;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.48);
        text-transform: none;
        letter-spacing: 0;
        line-height: 1.4;
    }

    /* Taller items can wrap their title */
    .mega-item--tall .mega-item-title {
        white-space: normal;
    }

    /* ── Arrow chevron ── */
    .mega-item-arrow {
        font-size: 1.1rem;
        line-height: 1;
        color: rgba(255, 255, 255, 0.2);
        flex-shrink: 0;
        transition:
            color 0.18s ease,
            transform 0.18s ease;
    }

    .mega-item:hover .mega-item-arrow,
    .mega-item.mega-item--active .mega-item-arrow {
        color: #166780;
        transform: translateX(3px);
    }

    .mega-panel--about .mega-item--tall .mega-item-desc {
        max-width: 36em;
    }

    /* Tablet desktop (lg, below xl): slightly tighter panel so titles are not clipped */
    @media (max-width: 1199.98px) {
        .mega-panel:not(.mega-panel--about) {
            width: min(960px, calc(100vw - 1.5rem));
        }

        .mega-about.health-mega-dropdown-wrap > .dropdown-menu {
            width: min(680px, calc(100vw - 1.5rem));
            min-width: 0;
        }

        .mega-intro {
            width: 240px;
            min-width: 240px;
            padding: 1.35rem 1.15rem;
        }

        .mega-intro-title {
            font-size: 1.1rem;
        }

        .mega-items {
            padding: 0.85rem 1rem;
        }

        .mega-item-title {
            white-space: normal;
        }
    }
} /* end unified mega-panel system */

/* =====================================================================
   Seventh Genius brand refresh (logo-aligned blue + ink palette)
   ===================================================================== */
body,
html,
.snap-container {
    background-color: var(--brand-deep);
}

.overlay {
    background: linear-gradient(
        to bottom,
        rgba(18, 21, 28, 0.9) 0%,
        rgba(18, 21, 28, 0.62) 100%
    );
}

body.home-page #hero > .overlay {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.62) 0%,
        rgba(4, 24, 38, 0.82) 24%,
        rgba(3, 18, 30, 0.88) 52%,
        rgba(2, 10, 18, 0.96) 100%
    );
}

.site-logo-image {
    height: clamp(32px, 3.2vw, 40px);
    width: auto;
    max-width: min(140px, 30vw);
    display: block;
    object-fit: contain;
    background: transparent;
}

.logo-text {
    letter-spacing: 0;
    line-height: 1;
}

.ethio-label,
.navbar .nav-link.active,
.footer-link-list a:hover,
.footer-bottom a:hover,
.social-icons a:hover {
    color: var(--brand-primary) !important;
}

.sub-text,
.about-card p,
.cta-box p,
.footer-link-list a {
    color: var(--brand-text-soft);
}

a {
    color: #5aa8d4;
}

a:hover {
    color: #8ec4e8;
}

.btn-ethio,
.nav-main-links .nav-quote-btn {
    border-color: rgba(22, 103, 128, 0.72);
    background: linear-gradient(135deg, #166780 0%, #166780 100%);
    box-shadow: 0 10px 22px rgba(18, 21, 28, 0.38);
}

.btn-ethio:hover,
.nav-main-links .nav-quote-btn:hover,
.nav-main-links .nav-quote-btn:focus {
    background: linear-gradient(135deg, #166780 0%, #166780 100%);
    color: #fff !important;
    box-shadow: 0 14px 26px rgba(18, 21, 28, 0.42);
}

.health-mega-menu {
    border-color: rgba(22, 103, 128, 0.22);
    background: rgba(18, 21, 28, 0.95);
}

.mega-item:hover,
.mega-item.mega-item--active {
    border-color: rgba(22, 103, 128, 0.4);
    background: linear-gradient(
        130deg,
        rgba(22, 103, 128, 0.26),
        rgba(18, 21, 28, 0.4)
    );
}

.mega-item-num {
    color: #6eb5dd;
    background: rgba(22, 103, 128, 0.1);
    border-color: rgba(22, 103, 128, 0.32);
}

.mega-item:hover .mega-item-num,
.mega-item.mega-item--active .mega-item-num {
    color: #8ec4e8;
    background: rgba(22, 103, 128, 0.2);
    border-color: rgba(22, 103, 128, 0.5);
}

.mega-panel--agencies .mega-intro {
    background: radial-gradient(
        ellipse 160% 120% at 0% 50%,
        rgba(22, 103, 128, 0.18) 0%,
        transparent 70%
    );
}

.mega-panel {
    border-color: rgba(22, 103, 128, 0.2);
    background: rgba(18, 21, 28, 0.97);
}

.mega-item:hover .mega-item-arrow,
.mega-item.mega-item--active .mega-item-arrow {
    color: #6eb5dd;
}

.service-item,
.about-card {
    border-bottom-color: var(--brand-sea);
}

#footer-section,
body.contact-simple-page #footer-section,
body.federal-team-page #footer-section,
body.health-page #footer-section,
body.brands-page #footer-section,
body.health-services-page #footer-section {
    background: linear-gradient(
        180deg,
        var(--footer-surface-top) 0%,
        var(--footer-surface-bottom) 100%
    );
}

.footer-social-icons .footer-social-link--linkedin {
    background: #166780;
}

.footer-social-icons .footer-social-link--facebook {
    background: #166780;
}

/* Secondary accent from logo: controlled blue highlight usage */
.ethio-heading strong,
.ethio-heading .highlight,
.performance-seal,
.why-card h3 strong {
    color: var(--ethio-gold);
}

.btn-ethio:focus-visible,
.nav-main-links .nav-quote-btn:focus-visible {
    outline: 2px solid rgba(22, 103, 128, 0.75);
    outline-offset: 2px;
}

/* =====================================================================
   Detail Pages Brand Harmonization (Capabilities + Agencies)
   Balanced blue treatment from logo palette
   ===================================================================== */
body.capability-page .capability-hero .overlay {
    background:
        radial-gradient(circle at 14% 22%, rgba(22, 103, 128, 0.2) 0%, transparent 44%),
        radial-gradient(circle at 86% 12%, rgba(22, 103, 128, 0.12) 0%, transparent 40%),
        linear-gradient(
            to right,
            rgba(18, 21, 28, 0.92) 0%,
            rgba(18, 21, 28, 0.62) 55%,
            rgba(18, 21, 28, 0.24) 100%
        ),
        linear-gradient(
            to top,
            rgba(18, 21, 28, 0.97) 0%,
            rgba(18, 21, 28, 0) 55%
        );
}

body.agency-page.agency-dod .capability-hero.agency-dod-hero .overlay {
    background:
        radial-gradient(circle at 12% 24%, rgba(22, 103, 128, 0.2) 0%, transparent 42%),
        radial-gradient(circle at 82% 10%, rgba(22, 103, 128, 0.1) 0%, transparent 38%),
        linear-gradient(
            to right,
            rgba(18, 21, 28, 0.94) 0%,
            rgba(18, 21, 28, 0.78) 44%,
            rgba(18, 21, 28, 0.44) 68%,
            rgba(18, 21, 28, 0.2) 100%
        ),
        linear-gradient(to top, rgba(18, 21, 28, 0.84) 0%, rgba(18, 21, 28, 0.14) 52%, transparent 88%);
}

/* Gold vertical accent: tablet and up only. A global rule here was overriding
   the max-width:767px hero reset (border-left:none; padding-left:0) without
   restoring padding, so the accent and copy sat flush on small screens. */
@media (min-width: 768px) {
    body.capability-page .cap-hero-inner {
        border-left: 4px solid var(--ethio-gold);
    }
}

body.capability-page .cap-hero-inner::after {
    background: linear-gradient(
        to right,
        rgba(22, 103, 128, 0.45) 0%,
        rgba(22, 103, 128, 0.35) 36%,
        rgba(22, 103, 128, 0) 86%
    );
}

body.capability-page .cap-hero-label {
    color: #8ec4e8;
}

body.capability-page .cap-section {
    background-color: var(--brand-deep-elevated);
    border-top: 1px solid rgba(22, 103, 128, 0.16);
    border-bottom: 1px solid rgba(22, 103, 128, 0.14);
}

body.capability-page .cap-section:nth-child(even) {
    background-color: var(--brand-ink);
}

body.capability-page .cap-section-label {
    color: #8ec4e8;
}

body.capability-page .cap-section-label::before {
    background: linear-gradient(90deg, var(--ethio-gold) 0%, var(--brand-sea) 100%);
}

body.capability-page .cap-section-copy {
    color: rgba(226, 236, 241, 0.76);
}

.cap-deliver-grid,
.cap-deliver-grid--five {
    background: rgba(22, 103, 128, 0.09);
    border: 1px solid rgba(22, 103, 128, 0.14);
}

.cap-deliver-card {
    background: rgba(8, 34, 52, 0.95);
}

.cap-deliver-card::before {
    background: linear-gradient(180deg, var(--ethio-gold) 0%, var(--brand-sea) 100%);
}

.cap-deliver-card:hover {
    background: rgba(11, 43, 63, 0.98);
    box-shadow: inset 0 0 0 1px rgba(22, 103, 128, 0.24);
}

.cap-deliver-card h4 i {
    color: var(--ethio-gold);
}

.cap-agency-badge:hover {
    border-color: rgba(22, 103, 128, 0.68);
    background: linear-gradient(180deg, rgba(22, 103, 128, 0.16), rgba(22, 103, 128, 0.1));
    color: #fff;
}

.agency-cap-card:hover,
.agency-cap-card:focus-visible {
    border-color: rgba(22, 103, 128, 0.58);
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.32),
        inset 0 0 0 1px rgba(22, 103, 128, 0.2);
    background:
        linear-gradient(180deg, rgba(22, 103, 128, 0.14), rgba(22, 103, 128, 0.08)),
        rgba(10, 32, 52, 0.96);
}

.cap-perf-card {
    border-color: rgba(22, 103, 128, 0.18);
}

.cap-perf-card:hover {
    border-color: rgba(22, 103, 128, 0.5);
}

body.agency-page.agency-dod .agency-dod-sub-card:hover,
body.agency-page.agency-doi .doi-program-card:hover,
body.agency-page.agency-dhs .dhs-support-card:hover,
body.agency-page.agency-state-muni .state-muni-card--kc-bpu:hover,
body.agency-page.agency-state-muni .state-muni-card--tx-dps:hover,
body.agency-page.agency-state-muni .state-muni-card--ut-austin:hover {
    box-shadow: inset 0 0 0 1px rgba(22, 103, 128, 0.5);
}

.cap-perf-card-top {
    background: linear-gradient(180deg, rgba(22, 103, 128, 0.08), rgba(22, 103, 128, 0.05));
    border-bottom-color: rgba(22, 103, 128, 0.2);
}

.cap-perf-card--note {
    border-top: 2px solid var(--ethio-gold);
}

body.agency-page.agency-doi .doi-program-card::before,
body.agency-page.agency-dhs .dhs-support-card::before,
body.agency-page.agency-state-muni .state-muni-card--kc-bpu::before,
body.agency-page.agency-state-muni .state-muni-card--tx-dps::before,
body.agency-page.agency-state-muni .state-muni-card--ut-austin::before,
body.agency-page.agency-dod .agency-dod-sub-card::before {
    background: linear-gradient(
        180deg,
        rgba(18, 21, 28, 0.22) 0%,
        rgba(18, 21, 28, 0.56) 46%,
        rgba(18, 21, 28, 0.78) 100%
    );
}

body.agency-page.agency-doi .doi-program-card .cap-perf-card-top,
body.agency-page.agency-dhs .dhs-support-card .cap-perf-card-top,
body.agency-page.agency-state-muni .state-muni-card--kc-bpu .cap-perf-card-top,
body.agency-page.agency-state-muni .state-muni-card--tx-dps .cap-perf-card-top,
body.agency-page.agency-state-muni .state-muni-card--ut-austin .cap-perf-card-top,
body.agency-page.agency-dod .agency-dod-sub-card .cap-perf-card-top {
    background: linear-gradient(180deg, rgba(18, 21, 28, 0.58), rgba(18, 21, 28, 0.46));
    border-bottom: 1px solid rgba(22, 103, 128, 0.24);
}

body.agency-page.agency-doi .doi-program-card .cap-perf-card-body,
body.agency-page.agency-dhs .dhs-support-card .cap-perf-card-body,
body.agency-page.agency-state-muni .state-muni-card--kc-bpu .cap-perf-card-body,
body.agency-page.agency-state-muni .state-muni-card--tx-dps .cap-perf-card-body,
body.agency-page.agency-state-muni .state-muni-card--ut-austin .cap-perf-card-body,
body.agency-page.agency-dod .agency-dod-sub-card .cap-perf-card-body {
    background: rgba(18, 21, 28, 0.62);
}

body.agency-page.agency-doi .doi-program-card .cap-perf-card-logo img,
body.agency-page.agency-dhs .dhs-support-card .cap-perf-card-logo img,
body.agency-page.agency-state-muni .state-muni-card .cap-perf-card-logo img,
body.agency-page.agency-dod .agency-dod-sub-card .cap-perf-card-logo img {
    border: 1px solid rgba(22, 103, 128, 0.3);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(22, 103, 128, 0.15) inset;
}

body.capability-page .cap-cta-section .cap-cta-inner::before {
    background: linear-gradient(90deg, var(--ethio-gold) 0%, var(--brand-sea) 100%);
}

/* Capability hero image overlays keep same photos, updated brand tint */
.it-data-center-bg {
    background-image:
        linear-gradient(var(--hero-overlay-standard)),
        url("/images/hero-it-technology.jpg") !important;
    background-position: center center !important;
    background-size: cover !important;
}

.heavy-bg {
    background-image:
        linear-gradient(var(--hero-overlay-standard)),
        url("/images/hero-industrial-heavy-equipment.jpg") !important;
    background-position: center center !important;
    background-size: cover !important;
}

.industrial-bg {
    background-image:
        linear-gradient(var(--hero-overlay-standard)),
        url("/images/hero-facilities-infrastructure.jpg") !important;
    background-position: center center !important;
    background-size: cover !important;
}

/* =====================================================================
   Page-Specific Harmonization:
   How to Buy, Past Performance, Contact, Terms, Privacy
   ===================================================================== */

/* How to Buy detail page */
body.capability-page.capability-how-buy .how-buy-bg {
    background-image:
        linear-gradient(var(--hero-overlay-standard)),
        url("/images/hero-how-to-buy.jpg") !important;
    background-size: cover !important;
    background-position: center center !important;
}

body.capability-page.capability-how-buy .how-buy-reference-card {
    border-color: rgba(22, 103, 128, 0.28);
    border-top-color: var(--ethio-gold);
    background: linear-gradient(165deg, rgba(8, 35, 53, 0.95), rgba(6, 28, 43, 0.92));
}

body.capability-page.capability-how-buy .how-buy-reference-card h3,
body.capability-page.capability-how-buy .how-buy-reference-body h4 {
    color: #8ec4e8;
}

body.capability-page.capability-how-buy .how-buy-ref-grid {
    border-color: rgba(22, 103, 128, 0.2);
    background: rgba(9, 36, 54, 0.35);
}

body.capability-page.capability-how-buy .how-buy-ref-panel {
    border-right-color: rgba(22, 103, 128, 0.2);
    border-bottom-color: rgba(22, 103, 128, 0.2);
}

body.capability-page.capability-how-buy .how-buy-ref-row {
    border-bottom-color: rgba(22, 103, 128, 0.14);
}

body.capability-page.capability-how-buy .how-buy-ref-row span {
    color: rgba(218, 233, 241, 0.78);
}

body.capability-page.capability-how-buy .how-buy-ref-row strong {
    color: #d4e8f6;
}

/* Past Performance detail page */
body.past-performance-page .capability-hero .overlay {
    background:
        radial-gradient(circle at 16% 24%, rgba(22, 103, 128, 0.2), transparent 42%),
        radial-gradient(circle at 82% 10%, rgba(22, 103, 128, 0.13), transparent 38%),
        linear-gradient(to right, rgba(18, 21, 28, 0.92) 0%, rgba(18, 21, 28, 0.6) 55%, rgba(18, 21, 28, 0.24) 100%),
        linear-gradient(to top, rgba(18, 21, 28, 0.95) 0%, rgba(18, 21, 28, 0) 52%);
}

body.past-performance-page .cap-perf-card-top {
    background: linear-gradient(180deg, rgba(22, 103, 128, 0.1), rgba(22, 103, 128, 0.06));
}

body.past-performance-page .cap-perf-detail {
    color: rgba(236, 223, 170, 0.84);
}

/* Contact + Legal pages (Terms/Privacy share contact-simple-page shell) */
body.contact-simple-page .brands-hero .overlay {
    background:
        radial-gradient(circle at 14% 22%, rgba(22, 103, 128, 0.2), transparent 44%),
        radial-gradient(circle at 86% 12%, rgba(22, 103, 128, 0.12), transparent 40%),
        linear-gradient(180deg, rgba(18, 21, 28, 0.5) 0%, rgba(18, 21, 28, 0.88) 62%, rgba(7, 34, 52, 0.98) 100%);
}

body.contact-simple-page .brands-hero .ethio-label {
    color: #8ec4e8;
}

body.contact-simple-page .contact-main-section {
    background: linear-gradient(180deg, var(--brand-deep-elevated) 0%, var(--brand-ink) 100%);
    border-top-color: rgba(22, 103, 128, 0.18);
    border-bottom-color: rgba(22, 103, 128, 0.16);
}

body.contact-simple-page .contact-white-line {
    background: linear-gradient(90deg, rgba(22, 103, 128, 0.45), rgba(22, 103, 128, 0.42));
}

body.contact-simple-page .contact-section-heading {
    color: #d4e8f6;
}

body.contact-simple-page .contact-aside-box {
    border-left-color: rgba(22, 103, 128, 0.4);
}

body.contact-simple-page .contact-details-list i {
    color: var(--ethio-gold);
}

body.contact-simple-page .contact-details-list a:hover {
    border-color: var(--ethio-gold);
    color: #d4e8f6;
}

body.contact-simple-page .contact-input:focus,
body.contact-simple-page .contact-main-section .iti input[type="tel"]:focus {
    border-color: rgba(22, 103, 128, 0.82) !important;
    box-shadow: 0 0 0 1px rgba(22, 103, 128, 0.22);
}

body.contact-simple-page .contact-submit-btn {
    background: linear-gradient(135deg, #166780 0%, #166780 100%) !important;
    border-color: rgba(22, 103, 128, 0.74) !important;
}

body.contact-simple-page .contact-submit-btn:hover,
body.contact-simple-page .contact-submit-btn:focus,
body.contact-simple-page .contact-submit-btn:active {
    background: linear-gradient(135deg, #166780 0%, #166780 100%) !important;
    color: #1a3a42 !important;
    border-color: rgba(163, 136, 41, 0.66) !important;
}

/* Legal content typography accents */
body.contact-simple-page .contact-main-section h3 {
    color: #8ec4e8;
}

body.contact-simple-page .contact-main-section ul li::marker {
    color: rgba(22, 103, 128, 0.82);
}

/* About / Our Story page */
body.about-static .about-page .overlay {
    /* Slight past bottom edge covers GPU sub-pixel seam vs .section-bg */
    bottom: -2px;
    background:
        radial-gradient(circle at 14% 22%, rgba(22, 103, 128, 0.2), transparent 44%),
        radial-gradient(circle at 86% 12%, rgba(22, 103, 128, 0.12), transparent 40%),
        linear-gradient(
            to bottom,
            rgba(18, 21, 28, 0.88) 0%,
            rgba(18, 21, 28, 0.72) 46%,
            rgba(18, 21, 28, 0.86) 100%
        );
}

body.about-static .about-page {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border-top: 1px solid rgba(22, 103, 128, 0.14);
    border-bottom: 1px solid rgba(22, 103, 128, 0.14);
}

body.about-static .ethio-label {
    color: #8ec4e8;
    font-size: clamp(0.78rem, 1.2vw, 0.95rem);
    letter-spacing: 0.22em;
}

body.about-static .sub-text {
    color: rgba(224, 236, 242, 0.93);
}

body.about-static .about-card {
    background: linear-gradient(165deg, rgba(9, 37, 55, 0.84), rgba(7, 30, 47, 0.88));
    border-color: rgba(22, 103, 128, 0.34);
    border-bottom: 3px solid var(--ethio-gold);
    box-shadow: 0 14px 32px rgba(4, 18, 29, 0.34);
    font-size: 1rem;
    line-height: 1.55;
    text-align: center;
}

body.about-static .about-card strong {
    color: #8ec4e8;
    font-size: clamp(1.35rem, 2.8vw, 1.85rem);
    display: inline-block;
    margin-bottom: 0.35rem;
}

body.about-static #footer-section .footer-header {
    font-size: 0.95rem;
}

body.about-static #footer-section .footer-link-list li,
body.about-static #footer-section .footer-link-list a {
    font-size: 0.92rem;
}

body.about-static #footer-section .footer-bottom {
    font-size: 0.88rem;
}

body.about-static .about-story-image {
    border: 1px solid rgba(22, 103, 128, 0.36);
    box-shadow:
        0 16px 34px rgba(3, 14, 24, 0.34),
        0 0 0 1px rgba(22, 103, 128, 0.2) inset;
}

/* =====================================================================
   GLOBAL BUTTON UNIFICATION
   Keep one visual language across the entire website
   ===================================================================== */
a.btn,
button.btn,
.btn,
.btn-ethio,
.nav-main-links .nav-quote-btn,
input[type="submit"],
input[type="button"] {
    background: linear-gradient(135deg, #166780 0%, #166780 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(22, 103, 128, 0.72) !important;
    border-radius: 2px !important;
    box-shadow: 0 10px 22px rgba(18, 21, 28, 0.38) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

a.btn:hover,
button.btn:hover,
.btn:hover,
.btn-ethio:hover,
.nav-main-links .nav-quote-btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a.btn:focus,
button.btn:focus,
.btn:focus,
.btn-ethio:focus,
.nav-main-links .nav-quote-btn:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
a.btn:active,
button.btn:active,
.btn:active,
.btn-ethio:active,
.nav-main-links .nav-quote-btn:active,
input[type="submit"]:active,
input[type="button"]:active {
    background: linear-gradient(135deg, #166780 0%, #166780 100%) !important;
    color: #fff !important;
    border-color: rgba(22, 103, 128, 0.82) !important;
    box-shadow: 0 14px 26px rgba(18, 21, 28, 0.42) !important;
    transform: translateY(-2px);
}

a.btn:focus-visible,
button.btn:focus-visible,
.btn:focus-visible,
.btn-ethio:focus-visible,
.nav-main-links .nav-quote-btn:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible {
    outline: 2px solid rgba(22, 103, 128, 0.75) !important;
    outline-offset: 2px !important;
}

button:disabled,
.btn:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    box-shadow: none !important;
    transform: none !important;
}

/* =====================================================================
   SITE-WIDE RESPONSIVE BUTTON SCALE
   Applies to primary CTAs site-wide. Excludes navbar quote (separate rule).
   ===================================================================== */
a.btn:not(.nav-quote-btn):not(.contact-submit-btn),
button.btn:not(.nav-quote-btn):not(.contact-submit-btn),
input.btn:not(.nav-quote-btn),
.btn-ethio:not(.nav-quote-btn),
input[type="submit"]:not(.contact-submit-btn),
input[type="button"] {
    font-size: clamp(0.68rem, 0.54rem + 0.45vw, 0.92rem) !important;
    padding: clamp(0.46rem, 0.32rem + 0.52vw, 0.72rem)
        clamp(0.78rem, 0.55rem + 1.05vw, 1.85rem) !important;
    line-height: 1.3 !important;
    letter-spacing: 0.1em !important;
}

a.btn.btn-sm:not(.nav-quote-btn),
button.btn.btn-sm:not(.nav-quote-btn),
input.btn.btn-sm,
.btn-ethio.btn-sm {
    font-size: clamp(0.62rem, 0.5rem + 0.34vw, 0.8rem) !important;
    padding: clamp(0.34rem, 0.26rem + 0.36vw, 0.56rem)
        clamp(0.65rem, 0.48rem + 0.85vw, 1.35rem) !important;
    line-height: 1.25 !important;
}

/* Navbar quote: higher specificity so it wins over generic .btn rules below */
.site-header .nav-main-links a.nav-quote-btn {
    font-size: clamp(0.58rem, 0.48rem + 0.32vw, 0.68rem) !important;
    padding: clamp(5px, 0.32rem + 0.42vw, 7px) clamp(11px, 0.62rem + 0.85vw, 18px) !important;
    letter-spacing: 0.1em !important;
    line-height: 1.2 !important;
    border-radius: 2px !important;
}

/* Keep all navbar links vertically centered with CTA button */
.nav-main-links {
    align-items: center;
}

.nav-main-links .nav-item {
    display: block;
}

@media (min-width: 992px) {
    .site-header .navbar .container-fluid,
    .site-header .navbar .navbar-collapse,
    .site-header .navbar .nav-main-links {
        align-items: center;
    }

    .site-header .navbar .nav-main-links {
        margin-bottom: 0 !important;
    }

    .nav-main-links .nav-item {
        display: flex;
        align-items: center;
    }

    .site-header .navbar .nav-main-links .nav-link,
    .site-header .navbar .nav-main-links .dropdown-toggle.nav-link {
        display: inline-flex;
        align-items: center;
        align-self: center;
        line-height: 1.25;
        padding-top: 0.45rem;
        padding-bottom: 0.45rem;
    }

    .site-header .navbar .nav-main-links .dropdown-toggle::after {
        margin-top: 0;
        vertical-align: middle;
    }

    .site-header .navbar .navbar-collapse {
        max-height: none !important;
        overflow: visible !important;
    }
}

/* =====================================================================
   Footer Unification
   Keep footer appearance identical to home across all pages.
   ===================================================================== */
body.contact-simple-page #footer-section,
body.federal-team-page #footer-section,
body.health-page #footer-section,
body.brands-page #footer-section,
body.health-services-page #footer-section,
body.capability-page #footer-section,
body.agency-page #footer-section,
body.partners-page #footer-section,
body.about-static #footer-section {
    background: linear-gradient(
            180deg,
            var(--footer-surface-top) 0%,
            var(--footer-surface-bottom) 100%
        )
        !important;
    color: #fff !important;
    border-top: 1px solid rgba(22, 103, 128, 0.22) !important;
    min-height: auto !important;
    height: auto !important;
    /* Match home footer breathing room (was 32/14 and clipped SG + bottom row) */
    padding-top: 48px !important;
    padding-bottom: 48px !important;
}

body.contact-simple-page #footer-section .footer-header,
body.federal-team-page #footer-section .footer-header,
body.health-page #footer-section .footer-header,
body.brands-page #footer-section .footer-header,
body.health-services-page #footer-section .footer-header,
body.capability-page #footer-section .footer-header,
body.agency-page #footer-section .footer-header,
body.partners-page #footer-section .footer-header,
body.about-static #footer-section .footer-header,
body.contact-simple-page #footer-section .footer-bottom a,
body.federal-team-page #footer-section .footer-bottom a,
body.health-page #footer-section .footer-bottom a,
body.brands-page #footer-section .footer-bottom a,
body.health-services-page #footer-section .footer-bottom a,
body.capability-page #footer-section .footer-bottom a,
body.agency-page #footer-section .footer-bottom a,
body.partners-page #footer-section .footer-bottom a,
body.about-static #footer-section .footer-bottom a {
    color: #fff !important;
}

body.contact-simple-page #footer-section .footer-link-list a,
body.federal-team-page #footer-section .footer-link-list a,
body.health-page #footer-section .footer-link-list a,
body.brands-page #footer-section .footer-link-list a,
body.health-services-page #footer-section .footer-link-list a,
body.capability-page #footer-section .footer-link-list a,
body.agency-page #footer-section .footer-link-list a,
body.partners-page #footer-section .footer-link-list a,
body.about-static #footer-section .footer-link-list a {
    color: #888 !important;
}

/* Theme blue on hover (must match Footer Unification specificity + !important) */
body.contact-simple-page #footer-section .footer-link-list a:hover,
body.federal-team-page #footer-section .footer-link-list a:hover,
body.health-page #footer-section .footer-link-list a:hover,
body.brands-page #footer-section .footer-link-list a:hover,
body.health-services-page #footer-section .footer-link-list a:hover,
body.capability-page #footer-section .footer-link-list a:hover,
body.agency-page #footer-section .footer-link-list a:hover,
body.partners-page #footer-section .footer-link-list a:hover,
body.about-static #footer-section .footer-link-list a:hover {
    color: var(--brand-primary) !important;
}

body.contact-simple-page #footer-section .footer-bottom a:hover,
body.federal-team-page #footer-section .footer-bottom a:hover,
body.health-page #footer-section .footer-bottom a:hover,
body.brands-page #footer-section .footer-bottom a:hover,
body.health-services-page #footer-section .footer-bottom a:hover,
body.capability-page #footer-section .footer-bottom a:hover,
body.agency-page #footer-section .footer-bottom a:hover,
body.partners-page #footer-section .footer-bottom a:hover,
body.about-static #footer-section .footer-bottom a:hover {
    color: var(--brand-primary) !important;
}
#footer-section .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#footer-section .footer-bottom {
    margin-top: 18px !important;
    padding-top: 16px !important;
    padding-bottom: 20px !important;
}

/* Final non-home footer reset — do not zero padding-bottom (was clipping footer vs home) */
body:not(.home-page) #footer-section {
    min-height: auto !important;
    height: auto !important;
    display: block !important;
    scroll-snap-align: none !important;
    margin-bottom: 0 !important;
}

body:not(.home-page) #footer-section > .container {
    margin-bottom: 0 !important;
}

/* About page office placeholder (Task 3.5) */
.about-office-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    background: linear-gradient(135deg, rgba(18, 21, 28, 0.92), rgba(30, 45, 72, 0.88));
    border: 1px dashed rgba(172, 197, 255, 0.35);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.75);
    text-align: center;
    padding: 2rem;
}

.about-office-placeholder__label {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.partners-warranty-copy {
    margin-top: 1rem;
}

/* Accessibility: minimum 24x24px touch targets */
.nav-link,
.nav-quote-btn,
.agency-logo,
.partner-logo-link,
.btn-ethio,
.footer-link-list a,
.contact-form-box .btn {
    min-height: 24px;
    min-width: 24px;
}

.nav-link:focus-visible,
.agency-logo:focus-visible,
.partner-logo-link:focus-visible,
.btn-ethio:focus-visible,
.contact-form-box .form-control:focus-visible {
    outline: 2px solid var(--ethio-gold, #c9a227);
    outline-offset: 2px;
}

/* Responsive verification breakpoints (Task 4) */
@media (max-width: 1024px) {
    .performance-card,
    .capability-card,
    .why-card {
        margin-bottom: 0;
    }

    .agency-logo {
        width: 180px;
        height: 108px;
        flex: 0 0 180px;
    }
}

@media (max-width: 768px) {
    /* Previously made this horizontally swipeable on mobile (overflow-x:auto
       + touch-action:pan-x, with the auto-scroll animation turned off so the
       user could drag it themselves) — but touch-action:pan-x explicitly
       blocks vertical panning through the element, so any vertical swipe
       gesture starting over these logo rows got eaten instead of scrolling
       the page. With two of these rows stacked in the "Who We Serve"
       section, that made it feel like the page was stuck there. Reverted to
       the same non-interactive, auto-scrolling behavior as desktop — the
       logos are still all visible over time, and vertical scroll is never
       captured. */

    .contact-content-wrap > .row {
        flex-direction: column-reverse;
    }

    .contact-map-wrap iframe {
        min-height: 220px;
        width: 100%;
    }

    .partners-logo-slider {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 393px) {
    .ethio-heading {
        font-size: clamp(1.35rem, 7vw, 2rem) !important;
    }

    .agency-logo {
        width: 150px;
        height: 96px;
        flex: 0 0 150px;
    }

    .performance-meta {
        font-size: 0.82rem;
        word-break: break-word;
    }

    .brands-hero-title,
    .cap-hero-title {
        font-size: clamp(1.5rem, 8vw, 2.2rem);
    }
}

@media (max-width: 375px) {
    .content-container {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .capability-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 320px) {
    .trust-bar__chunk {
        font-size: 0.68rem;
    }

    .navbar-brand .site-logo-image {
        max-width: 140px;
    }

    .footer-platforms {
        flex-direction: column;
        align-items: flex-start;
    }
}



/* ================================================================
   PERATON-STYLE HOME PAGE -- PDS Redesign
   All rules scoped to html.pds-home-html / body.pds-home
================================================================ */

/* -- Remove snap-scroll, restore normal page scroll -- */
html.pds-home-html,
html.pds-home-html body {
    height: auto !important;
    overflow: visible !important;
}

body.pds-home .snap-container {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    scroll-snap-stop: unset !important;
}

body.pds-home section,
body.pds-home .pds-section {
    scroll-snap-align: none !important;
    scroll-snap-stop: unset !important;
    /* scrollIntoView({block:'start'}) (wheel/touch/dot-nav jumps) aligns the
       section's top edge to the scroll container's top edge, which is
       exactly where the fixed header sits — without this, the header covers
       the top of whatever section was just scrolled to. */
    scroll-margin-top: var(--navbar-offset);
}

body.pds-home section:not(#footer-section) {
    min-height: 100dvh !important;
    box-sizing: border-box !important;
}

body.pds-home .site-header.fixed-top {
    right: 0 !important;
    width: 100% !important;
}

body.pds-home {
    padding-top: var(--navbar-offset);
}

body.pds-home #hero {
    padding-top: 0;
    margin-top: calc(-1 * var(--navbar-offset));
}


/* ================================================================
   HERO -- Video background
================================================================ */
.pds-hero {
    position: relative;
    height: 100vh;
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pds-hero__video-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.pds-hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.pds-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        160deg,
        rgba(10, 38, 50, 0.78) 0%,
        rgba(35, 31, 32, 0.65) 100%
    );
}

.pds-hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
}

.pds-hero__title {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.01em;
    line-height: 1.08;
    text-transform: uppercase;
    margin: 1rem 0 1.5rem;
    text-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

.pds-hero__sub {
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    color: rgba(255,255,255,0.88);
    max-width: 700px;
    margin: 0 auto 2.5rem;
    line-height: 1.65;
}

.pds-hero__ctas {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.pds-hero__scroll-cue {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255,255,255,0.6);
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.pds-scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, rgba(247,164,28,0.9), transparent);
    animation: pds-scroll-pulse 1.8s ease-in-out infinite;
}

@keyframes pds-scroll-pulse {
    0%, 100% { opacity: 1; transform: scaleY(1); }
    50%       { opacity: 0.4; transform: scaleY(0.6); }
}


/* ================================================================
   BUTTONS
================================================================ */
.pds-btn {
    display: inline-block;
    padding: 0.82rem 2.2rem;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 3px;
    transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.pds-btn--gold {
    background: var(--brand-primary);
    color: #231F20;
    border: 2px solid var(--brand-primary);
}
.pds-btn--gold:hover {
    background: #e8970f;
    color: #231F20;
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(247,164,28,0.38);
}

.pds-btn--outline {
    background: transparent;
    color: #ffffff;
    border: 2px solid rgba(255,255,255,0.65);
}
.pds-btn--outline:hover {
    background: rgba(255,255,255,0.12);
    color: #ffffff;
    border-color: #ffffff;
    transform: translateY(-3px);
}

.pds-btn--outline-light {
    background: transparent;
    color: rgba(255,255,255,0.90);
    border: 2px solid rgba(255,255,255,0.45);
}
.pds-btn--outline-light:hover {
    background: rgba(255,255,255,0.1);
    color: #ffffff;
    border-color: rgba(255,255,255,0.85);
    transform: translateY(-3px);
}


/* ================================================================
   EYEBROW LABELS & TYPOGRAPHY
================================================================ */
.pds-eyebrow {
    display: inline-block;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-primary);
    margin-bottom: 1rem;
}

/* --section is now identical to base — semantic alias */
.pds-eyebrow--section {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    margin-bottom: 1rem;
}

.pds-eyebrow--hero {
    color: rgba(255,255,255,0.75);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    margin-bottom: 0.6rem;
}

.pds-eyebrow--light {
    color: var(--brand-primary);
}

.pds-section-title {
    font-size: clamp(1.75rem, 3vw, 2.6rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--brand-ink);
    margin: 0 0 1.2rem;
}

.pds-section-title--light {
    color: #ffffff;
}

.pds-body-text {
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(35,31,32,0.78);
    margin-bottom: 1.5rem;
}

.pds-body-text--light {
    color: rgba(255,255,255,0.82);
}

.pds-text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-primary-alt);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
    transition: border-color 0.2s ease, gap 0.2s ease;
}

.pds-text-link:hover {
    border-color: var(--brand-primary-alt);
    gap: 0.7rem;
    color: var(--brand-primary-alt);
}

.pds-text-link--gold {
    color: var(--brand-primary);
}
.pds-text-link--gold:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}


/* ================================================================
   CREDENTIALS BAND
================================================================ */
.pds-credentials-band {
    background: #ffffff;
    border-bottom: 1px solid rgba(35,31,32,0.08);
    padding: 1.1rem 0;
    position: relative;
    z-index: 2;
}

.pds-creds-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
}

.pds-cred {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--brand-ink);
    white-space: nowrap;
}

.pds-cred i {
    color: var(--brand-primary);
    font-size: 0.95rem;
}

.pds-cred--cta a {
    color: var(--brand-primary-alt);
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.pds-cred--cta a:hover { color: var(--brand-primary); }


/* ================================================================
   SECTIONS -- base
================================================================ */
.pds-section {
    padding: clamp(4rem, 8vw, 7rem) 0;
}


/* ================================================================
   VALUE PROP / INTRO SECTION
================================================================ */
.pds-intro-section {
    background: #ffffff;
}

.pds-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

@media (max-width: 991px) {
    .pds-intro-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    /* Every other home-page section is center-aligned on mobile (hero,
       agencies, why-us, past-performance, how-to-buy) — this one was left
       left-aligned from the desktop 2-column layout, reading as visually
       inconsistent/off against everything else once stacked to one column. */
    .pds-intro-text {
        text-align: center;
    }
}

.pds-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.pds-stat-box {
    background: linear-gradient(165deg, #f2f7fc 0%, #ffffff 55%, #dceaf5 100%);
    border: 1px solid rgba(22, 103, 128, 0.18);
    border-radius: 10px;
    padding: 1.5rem 1.2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(22, 103, 128, 0.08), inset 0 1px 0 rgba(255,255,255,0.8);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.pds-stat-box:hover {
    border-color: rgba(22, 103, 128, 0.35);
    box-shadow: 0 14px 32px rgba(22, 103, 128, 0.14), inset 0 1px 0 rgba(255,255,255,0.9);
    transform: translateY(-3px);
}

.pds-stat-box::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-primary-alt));
}

.pds-stat-num {
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 900;
    color: var(--brand-primary-alt);
    line-height: 1;
    margin-bottom: 0.4rem;
}

.pds-stat-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: rgba(35,31,32,0.6);
    text-transform: uppercase;
}


/* ================================================================
   FEATURE BLOCKS
================================================================ */
.pds-feature--dark {
    background: linear-gradient(135deg, var(--brand-ink) 0%, #2a2326 100%);
}

.pds-feature--light {
    background: #f8f9fa;
}

.pds-feature--teal {
    background: linear-gradient(135deg, var(--brand-primary-alt) 0%, #0f5165 100%);
}

/* Capability spotlight sections — full section background photo with a dark
   gradient layer for readability. The photo lives on ::before so it can be
   transformed/animated independently of the section box; overflow:hidden
   keeps the moving edges from showing. Each section gets a distinct motion
   style (zoom in / zoom out / pan) rather than repeating the same effect
   three times — a generous inset bleed covers all three motion ranges.
   Every home-page section with a background photo shares this block. */
#value-prop,
#it-technology,
#industrial,
#medical-facilities,
#why-prime-data,
#past-performance-highlights,
#how-to-buy-banner {
    overflow: hidden !important;
    /* Dark gray, not the near-black brand-ink — this is what's visible
       for the brief moment before the photo has faded in. */
    background-color: #2b2d30;
}

#value-prop::before,
#it-technology::before,
#industrial::before,
#medical-facilities::before,
#why-prime-data::before,
#past-performance-highlights::before,
#how-to-buy-banner::before {
    content: '';
    position: absolute;
    inset: -6%;
    z-index: 0;
    background-size: cover;
    background-position: center;
    will-change: transform, opacity;
    /* Section starts on plain dark gray; JS adds .pds-bg-in once the
       section scrolls into view, fading the photo in on top of it. Text
       reveal is intentionally delayed a beat after this (see the JS) so
       the image is visibly there first, then the copy follows. */
    opacity: 0;
    transition: opacity 1s ease-out;
}

#value-prop.pds-bg-in::before,
#it-technology.pds-bg-in::before,
#industrial.pds-bg-in::before,
#medical-facilities.pds-bg-in::before,
#why-prime-data.pds-bg-in::before,
#past-performance-highlights.pds-bg-in::before,
#how-to-buy-banner.pds-bg-in::before {
    opacity: 1;
}

#value-prop::after,
#it-technology::after,
#industrial::after,
#medical-facilities::after,
#why-prime-data::after,
#past-performance-highlights::after,
#how-to-buy-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.5);
}

#value-prop::before {
    background-image: url('/images/what-we-do.avif');
    animation: pds-bg-zoom-pan-diag 26s ease-in-out infinite alternate;
}

#it-technology::before {
    background-image: url('https://images.unsplash.com/photo-1558494949-ef010cbdcc31?q=80&w=1920&auto=format&fit=crop');
    animation: pds-bg-zoom-in 24s ease-in-out infinite alternate;
}

#industrial::before {
    background-image: url('https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?q=80&w=1920&auto=format&fit=crop');
    animation: pds-bg-zoom-out 27s ease-in-out infinite alternate;
}

#medical-facilities::before {
    background-image: url('https://images.unsplash.com/photo-1576091160550-2173dba999ef?q=80&w=1920&auto=format&fit=crop');
    animation: pds-bg-pan 30s ease-in-out infinite alternate;
}

#why-prime-data::before {
    background-image: url('/images/why-pds.jpg');
    animation: pds-bg-pan-vertical 28s ease-in-out infinite alternate;
}

#past-performance-highlights::before {
    background-image: url('/images/past-performance.jpeg');
    animation: pds-bg-zoom-out 25s ease-in-out infinite alternate;
}

#how-to-buy-banner::before {
    background-image: url('/images/ready-to-procure.webp');
    animation: pds-bg-zoom-in 23s ease-in-out infinite alternate;
}

@keyframes pds-bg-zoom-in {
    from { transform: scale(1) translate(0, 0); }
    to { transform: scale(1.12) translate(-1.5%, -1%); }
}

@keyframes pds-bg-zoom-out {
    from { transform: scale(1.14) translate(1%, -1%); }
    to { transform: scale(1) translate(0, 0); }
}

@keyframes pds-bg-pan {
    from { transform: scale(1.08) translate(-3%, 0); }
    to { transform: scale(1.08) translate(3%, 0); }
}

@keyframes pds-bg-zoom-pan-diag {
    from { transform: scale(1.05) translate(-2%, -2%); }
    to { transform: scale(1.18) translate(2%, 2%); }
}

@keyframes pds-bg-pan-vertical {
    from { transform: scale(1.08) translate(0, -3%); }
    to { transform: scale(1.08) translate(0, 3%); }
}

@media (prefers-reduced-motion: reduce) {
    #value-prop::before,
    #it-technology::before,
    #industrial::before,
    #medical-facilities::before,
    #why-prime-data::before,
    #past-performance-highlights::before,
    #how-to-buy-banner::before {
        animation: none;
        opacity: 1;
        transition: none;
    }
}

/* Hide side image divs — images are now full backgrounds */
#it-technology .pds-feature-image,
#industrial .pds-feature-image,
#medical-facilities .pds-feature-image {
    display: none !important;
}

/* Text takes full width now that image column is removed */
#it-technology .pds-feature-grid,
#industrial .pds-feature-grid,
#medical-facilities .pds-feature-grid {
    grid-template-columns: 1fr;
    max-width: 780px;
    margin: 0 auto;
}

.pds-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.pds-feature-grid--img-left .pds-feature-text {
    order: 2;
}
.pds-feature-grid--img-left .pds-feature-image {
    order: 1;
}

@media (max-width: 991px) {
    .pds-feature-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .pds-feature-grid--img-left .pds-feature-text,
    .pds-feature-grid--img-left .pds-feature-image {
        order: unset;
    }

    /* Same reasoning as .pds-intro-text — match the center alignment every
       other home-page section already uses on mobile. */
    .pds-feature-text {
        text-align: center;
    }
}

.pds-feature-image img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.22);
    display: block;
}

@media (max-width: 767px) {
    .pds-feature-image img { height: 240px; }
}


/* ================================================================
   AGENCIES SECTION
================================================================ */
.pds-agencies-section {
    background: linear-gradient(160deg, var(--brand-ink) 0%, #2a2326 100%);
}

.pds-agencies-sub {
    color: rgba(255,255,255,0.65);
    font-size: 0.95rem;
    margin-bottom: 2.5rem;
    letter-spacing: 0.04em;
}

.pds-agency-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
    margin-top: 2.5rem;
}

.pds-agency-pill {
    display: inline-block;
    padding: 0.5rem 1.2rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 999px;
    color: rgba(255,255,255,0.85);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pds-agency-pill:hover {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #231F20;
}


/* ================================================================
   WHY SECTION
================================================================ */
.pds-why-section {
    background: #ffffff;
}

.pds-why-head {
    margin-bottom: 3rem;
}

/* The "Quality Equipment. Seamless Procurement." title used teal for contrast
   back when this section had a plain white background — now that it has a
   photo background, it needs the same white treatment as the other photo
   sections, hence the --light override below (same specificity, must come
   after to win the tie). */
.pds-why-section .pds-section-title {
    color: var(--brand-primary-alt);
}

.pds-why-section .pds-section-title--light {
    color: #ffffff;
}

/* Why-cards: match the blue-white gradient treatment of performance-cards */
.pds-why-section .why-card {
    background: linear-gradient(165deg, #f2f7fc 0%, #ffffff 55%, #dceaf5 100%);
    border-color: rgba(22, 103, 128, 0.18);
    box-shadow: 0 14px 32px rgba(22, 103, 128, 0.10), inset 0 1px 0 rgba(255,255,255,0.8);
}

.pds-why-section .why-card:hover {
    border-color: rgba(22, 103, 128, 0.40);
    box-shadow: 0 20px 42px rgba(22, 103, 128, 0.16), inset 0 1px 0 rgba(255,255,255,0.9);
}


/* ================================================================
   PAST PERFORMANCE SECTION
================================================================ */
.pds-past-section {
    background: linear-gradient(135deg, #1c3d52 0%, #0f2738 100%);
}

.pds-past-head {
    margin-bottom: 2rem;
}


/* ================================================================
   HOW TO BUY CTA SECTION
================================================================ */
.pds-cta-section {
    background: linear-gradient(135deg, var(--brand-primary-alt) 0%, #0f5165 100%);
}

.pds-cta-sub {
    color: rgba(255,255,255,0.82);
    font-size: 1.05rem;
    max-width: 680px;
    margin: 0 auto 2rem;
    line-height: 1.65;
}

.pds-cta-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.pds-cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 999px;
    padding: 0.45rem 1rem;
    color: rgba(255,255,255,0.90);
    font-size: 0.82rem;
    font-weight: 600;
}

.pds-cta-badge i {
    color: var(--brand-primary);
}

.pds-cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}


/* ================================================================
   PERFORMANCE CARDS (past performance section)
================================================================ */
.pds-perf-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: 2rem 1.75rem;
    height: 100%;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.pds-perf-card:hover {
    background: rgba(255,255,255,0.10);
    border-color: rgba(247,164,28,0.4);
}

.pds-perf-card__icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--brand-primary), #e8970f);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #231F20;
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
}

.pds-perf-card__client {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand-primary);
    margin-bottom: 0.6rem;
}

.pds-perf-card__title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.75rem;
    line-height: 1.25;
}

.pds-perf-card__desc {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.65;
    margin: 0;
}


/* ================================================================
   RESPONSIVE UTILITIES
================================================================ */
@media (max-width: 767px) {
    .pds-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .pds-hero__title {
        font-size: clamp(1.65rem, 8vw, 2.4rem);
    }

    .pds-creds-row {
        gap: 0.5rem 1rem;
    }

    .pds-cred {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    /* Was 1fr (stacks all 4 stat boxes in a single column) below 480px —
       that's most modern phones (375-430px wide), and stacking roughly
       doubled this block's height, a major contributor to "What We Do"
       not fitting on one screen. A 2x2 grid fits comfortably even at
       320px, so keep it at every mobile width. */

    .pds-hero__ctas {
        flex-direction: column;
        align-items: center;
    }

    .pds-btn {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }
}


/* ================================================================
   DROPDOWN FADE-IN  (desktop mega menus)
================================================================ */
@keyframes pds-mega-in {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Item stagger inside the mega panel */
@media (min-width: 992px) {
    .nav-main-links .dropdown.dd-hover-open .mega-item,
    .nav-main-links .dropdown.dd-force-open .mega-item {
        animation: pds-mega-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .nav-main-links .dropdown.dd-hover-open .mega-item:nth-child(1),
    .nav-main-links .dropdown.dd-force-open .mega-item:nth-child(1) { animation-delay: 0.04s; }
    .nav-main-links .dropdown.dd-hover-open .mega-item:nth-child(2),
    .nav-main-links .dropdown.dd-force-open .mega-item:nth-child(2) { animation-delay: 0.08s; }
    .nav-main-links .dropdown.dd-hover-open .mega-item:nth-child(3),
    .nav-main-links .dropdown.dd-force-open .mega-item:nth-child(3) { animation-delay: 0.12s; }
    .nav-main-links .dropdown.dd-hover-open .mega-item:nth-child(4),
    .nav-main-links .dropdown.dd-force-open .mega-item:nth-child(4) { animation-delay: 0.16s; }
    .nav-main-links .dropdown.dd-hover-open .mega-item:nth-child(5),
    .nav-main-links .dropdown.dd-force-open .mega-item:nth-child(5) { animation-delay: 0.20s; }
    .nav-main-links .dropdown.dd-hover-open .mega-item:nth-child(6),
    .nav-main-links .dropdown.dd-force-open .mega-item:nth-child(6) { animation-delay: 0.24s; }

    .nav-main-links .dropdown.dd-hover-open .mega-intro,
    .nav-main-links .dropdown.dd-force-open .mega-intro {
        animation: pds-mega-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) 0.02s both;
    }
}


/* ================================================================
   SCROLL REVEAL ANIMATIONS
================================================================ */
@keyframes pds-reveal-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pds-reveal-left {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pds-reveal-right {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pds-reveal-scale {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Base hidden state — JS adds .pds-in when the element enters viewport */
.pds-reveal {
    opacity: 0;
}

.pds-reveal.pds-in {
    animation: pds-reveal-up 1.72s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.pds-reveal--left.pds-in {
    animation: pds-reveal-left 1.72s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.pds-reveal--right.pds-in {
    animation: pds-reveal-right 1.72s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.pds-reveal--scale.pds-in {
    animation: pds-reveal-scale 1.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Stagger delays */
.pds-reveal--d1.pds-in { animation-delay: 0.08s; }
.pds-reveal--d2.pds-in { animation-delay: 0.16s; }
.pds-reveal--d3.pds-in { animation-delay: 0.24s; }
.pds-reveal--d4.pds-in { animation-delay: 0.32s; }
.pds-reveal--d5.pds-in { animation-delay: 0.40s; }

/* Letter-by-letter reveal for short eyebrow labels — JS (in welcome.blade.php)
   splits the text into .pds-char spans with a staggered animation-delay.
   Placed after the directional variants so it wins the cascade when combined
   with --left/--right/--scale on the same element: the parent's own fade is
   suppressed and replaced by the per-character reveal. */
@keyframes pds-char-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.pds-reveal--chars {
    opacity: 1;
}

.pds-reveal--chars.pds-in {
    animation: none;
}

.pds-reveal--chars .pds-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(8px);
    /* A lone regular space as the entire content of an inline-block span
       can get whitespace-collapsed to zero width — pre keeps it visible
       regardless of which space character the JS happens to insert. */
    white-space: pre;
}

.pds-reveal--chars.pds-in .pds-char {
    animation: pds-char-in 1.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .pds-reveal {
        opacity: 1;
    }
    .pds-reveal.pds-in,
    .pds-reveal--left.pds-in,
    .pds-reveal--right.pds-in,
    .pds-reveal--scale.pds-in {
        animation: none;
    }
    .pds-reveal--chars .pds-char {
        opacity: 1;
        transform: none;
    }
    .pds-reveal--chars.pds-in .pds-char {
        animation: none;
    }
}

/* ─── pds-home: disable CSS scroll-snap (JS handles section navigation) ────
   scroll-snap-type:mandatory conflicts with programmatic scrollTo() — the
   browser can snap back to the wrong section after a smooth scroll.          */
body.pds-home .snap-container {
    scroll-snap-type: none !important;
}
body.pds-home section {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
}

/* ─── Per-page navbar logo swap ────────────────────────────────────────────
   Blue logo is the default; original multicolor logo shows on the homepage. */
.site-logo--home { display: none; }
.site-logo--default { display: block; }

body.pds-home .site-logo--default { display: none; }
body.pds-home .site-logo--home { display: block; }

/* ─── Homepage snap: all sections must fill viewport for proper snap stops ─
   Override the content-first min-height:auto exception when snap is active. */
html.home-html body.home-page section#why-prime-data,
html.home-html body.home-page section#how-to-buy-banner,
html.home-html body.home-page section#past-performance-highlights {
    min-height: 100dvh;
    align-items: center;
    padding-top: calc(var(--navbar-offset) + 2rem);
    padding-bottom: 3rem;
    box-sizing: border-box;
}

/* ─── Feature sections: content vertically centered in the 100dvh panel.
   (Was briefly switched to flex-start/top-aligned because centering left a
   large gap under the header on tall monitors when the header was ~121px —
   now that the header is ~63px, and per explicit user request, centered
   reads as the intended "editorial" balance rather than "stuck at the top".) */
body.pds-home #value-prop,
body.pds-home #it-technology,
body.pds-home #industrial,
body.pds-home #medical-facilities {
    align-items: center;
    padding-top: calc(var(--navbar-offset) + 3rem);
    padding-bottom: 3rem;
    box-sizing: border-box;
}

/* ─── Homepage dot active color — brand gold instead of legacy red ──────── */
body.pds-home .side-dots .dot-link.active {
    background: #F7A41C;
    border-color: #F7A41C;
}

/* ─── Homepage dot tooltip on hover ─────────────────────────────────────── */
body.pds-home .dot-link {
    position: relative;
}
body.pds-home .dot-link::before {
    content: attr(title);
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 11px;
    white-space: nowrap;
    padding: 3px 8px;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
body.pds-home .dot-link:hover::before {
    opacity: 1;
}