/* ============================================================
   OSI NAV — full rewrite (T-200, 2026-05-05)
   ============================================================
   Single source of truth for desktop nav + mobile drawer +
   cascade mega + accordion + hamburger + backdrop + scroll-lock.

   Loaded LAST after styles.css / enhancements.css / nextgen.css /
   mobile-drawer-clean.css. Every rule is prefixed with #site-header
   so the ID column wins the cascade against any class-only rule
   anywhere else in the codebase. The legacy nav rules in those
   files are now inert; this file fully owns nav presentation.

   Behavior decisions baked in (per Sam's survey 2026-05-05):
   • Desktop: hover with 80ms delay opens dropdown, 240ms close
     delay; one section open at a time
   • Desktop mega (What we treat / Surgical options) = cascade:
     left column shows region tiles with anatomy icons, right
     flyout reveals that region's conditions on group hover
   • Mobile: tap section toggles inline accordion; mega menus
     are flat lists with small (~22px) inline anatomy icons
     next to region headers
   • Tap deep link → drawer closes
   • Mobile drawer = white panel, navy text, hairline borders,
     32% navy backdrop, body scroll-locked
   • CTA = brand-green pill "Request Appointment", centered
   ============================================================ */

/* =============================================================
   0. BRAND LOGO — clean swap, native smoothing
   ============================================================= */
/* T-208 (2026-05-05, per Sam: "we just lost all quality in the
   logo"). T-205 set `image-rendering: crisp-edges` which is
   designed for pixel art and degrades photographic/anti-aliased
   PNGs. Reverted to browser default (auto) which gives proper
   bilinear smoothing for the OSI lockup PNG. Kept `transition:
   none` to avoid the scroll-shrink height-jump glitch. */
#site-header .brand__logo--full,
#site-header .brand__logo--mini {
  image-rendering: auto;
  transition: none !important;
}
/* Hard toggle on scroll — full at rest, mini when scrolled */
#site-header .brand__logo--full { display: block !important; }
#site-header .brand__logo--mini { display: none !important; }
#site-header.is-scrolled .brand__logo--full { display: none !important; }
#site-header.is-scrolled .brand__logo--mini { display: block !important; }

/* =============================================================
   1. SHARED — hamburger icon (visibility differs by viewport)
   ============================================================= */
#site-header .nav-toggle__bars,
#site-header .nav-toggle__bars::before,
#site-header .nav-toggle__bars::after {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 180ms ease, top 180ms ease, opacity 180ms ease, background 0s 90ms;
}
#site-header .nav-toggle__bars { position: relative; }
#site-header .nav-toggle__bars::before { position: absolute; left: 0; top: -7px; }
#site-header .nav-toggle__bars::after  { position: absolute; left: 0; top:  7px; }
#site-header.nav-open .nav-toggle__bars { background: transparent; }
#site-header.nav-open .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
#site-header.nav-open .nav-toggle__bars::after  { top: 0; transform: rotate(-45deg); }


/* ===========================================================
   1.5 BRAND ↔ NAV SPACING — applies at ALL widths
   ===========================================================
   T-209 (2026-05-05, per Sam: "providers will touch the logo
   ... with certain zooms"). The brand bar laid out with `gap:
   1.5rem` on `.site-header__main` was sometimes consumed when
   the user zoomed in and the viewport effectively shrunk —
   leaving the nav links right against the logo. Add explicit
   margin-right on .brand and margin-left on the nav to enforce
   minimum spacing regardless of flex gap collapsing. */
#site-header .brand {
  flex: 0 0 auto !important;
  margin-right: 3rem !important;     /* hard minimum gap; T-230: bumped 2→3rem so 'Providers' isn't too close to the logo at narrow desktop widths */
  min-width: 0 !important;
  z-index: 2 !important;             /* above nav at any z-collision */
  position: relative !important;
}
#site-header .site-header__nav--boxed {
  min-width: 0 !important;            /* allow nav to shrink, not crash into brand */
}

/* ===========================================================
   2. DESKTOP NAV — viewports ≥ 1100px
   ===========================================================
   T-226 (2026-05-06, per Sam): single row of plain green nav
   words, no boxes/borders around them, REQUEST APPOINTMENT
   button is NOT shown in the top bar (it lives only in the
   mobile drawer + as the in-page CTA). Removing the 187-px
   button from the top nav is what makes the row actually fit
   at 1100px — brand 200 + margin 32 + 6 items ~840 + gutters
   ≈ 1120px, comfortable at 1100+. */
@media (min-width: 1100px) {

  /* hide hamburger on desktop */
  #site-header .nav-toggle { display: none !important; }

  /* nav strip — horizontal flex */
  #site-header .site-header__nav--boxed {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.15rem !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    z-index: auto !important;
    transform: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
    inset: auto !important;
  }

  /* top-level box */
  #site-header .site-header__nav--boxed .nav-box {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    cursor: default !important;
  }

  /* trigger link
     T-227 (2026-05-06, per Sam): switched back to brand-navy
     after Sam asked for blue, not green. No background, no
     border, no rounded box — plain text with a sage-green
     hover for the blue/white/green accent. */
  #site-header .site-header__nav--boxed .nav-box__link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    padding: 0.55rem 0.85rem !important;
    color: var(--brand-navy, #203070) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    font-family: inherit !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    white-space: nowrap !important;
    transition: color 150ms ease !important;
  }

  /* hover/active accent — T-227: navy at rest, sage-green on
     hover. Gives the blue/white/green palette without the nav
     itself being green. */
  #site-header .site-header__nav--boxed .nav-box:hover .nav-box__link,
  #site-header .site-header__nav--boxed .nav-box.is-open .nav-box__link {
    color: var(--sage-dark, #3F8069) !important;
  }

  /* T-226: hide the Request Appointment pill in the desktop top
     nav per Sam — it lives only in the mobile drawer and as the
     in-page CTA further down each page. */
  #site-header .site-header__nav--boxed .btn-appt {
    display: none !important;
  }

  /* caret — muted navy at rest, matching the nav-link text */
  #site-header .site-header__nav--boxed .nav-box__caret {
    display: inline-block !important;
    color: rgba(32,48,112,0.5) !important;
    font-size: 0.65rem !important;
    margin-left: 0.1rem !important;
    transition: transform 200ms ease, color 150ms ease !important;
    opacity: 1 !important;
    filter: none !important;
    transform: rotate(0) !important;
  }
  #site-header .site-header__nav--boxed .nav-box:hover .nav-box__caret,
  #site-header .site-header__nav--boxed .nav-box.is-open .nav-box__caret {
    color: var(--sage-dark, #3F8069) !important;
  }
  #site-header .site-header__nav--boxed .nav-box.is-open .nav-box__caret {
    transform: rotate(180deg) !important;
  }

  /* === DROPDOWN PANEL (simple, non-mega) ===
     Toggled via display: none / block. No opacity transitions —
     they were causing stuck-at-0 states under certain timing
     edge cases. Display toggle is bulletproof. */
  #site-header .site-header__nav--boxed .nav-menu {
    position: absolute !important;
    top: calc(100% - 4px) !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    min-width: 240px !important;
    width: max-content !important;
    max-width: min(420px, calc(100vw - 2rem)) !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0.45rem 0 !important;
    background: #fff !important;
    border: 1px solid rgba(32,48,112,0.10) !important;
    border-radius: 8px !important;
    box-shadow: 0 16px 36px rgba(15,18,38,0.12), 0 3px 8px rgba(15,18,38,0.06) !important;
    z-index: 100 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    transition: none !important;
    display: none !important;
    overflow: visible !important;
  }
  /* RTL safety: don't overflow off right edge — shift right-leaning boxes */
  #site-header .site-header__nav--boxed .nav-box:nth-last-child(-n+2) .nav-menu:not(.nav-menu--mega) {
    left: auto !important;
    right: 0 !important;
  }

  /* dropdown open */
  #site-header .site-header__nav--boxed .nav-box.is-open .nav-menu {
    display: block !important;
  }

  /* dropdown items (non-mega) */
  #site-header .site-header__nav--boxed .nav-menu a {
    display: block !important;
    padding: 0.5rem 1rem !important;
    margin: 0 !important;
    color: #203070 !important;
    background: transparent !important;
    text-decoration: none !important;
    /* T-227 (2026-05-06): match the top nav-link font (0.92rem / 500)
       so every word inside a dropdown reads at the same size and weight
       as the trigger word above. Was 0.9rem / 400 — visibly lighter. */
    font-family: inherit !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    white-space: nowrap !important;
    transition: background 120ms ease, color 120ms ease !important;
  }
  #site-header .site-header__nav--boxed .nav-menu a:hover,
  #site-header .site-header__nav--boxed .nav-menu a:focus-visible {
    background: rgba(63,128,105,0.08) !important;
    color: var(--sage-dark, #3F8069) !important;
    outline: none !important;
  }

  /* === MEGA = 4×2 TILE GRID (T-204, 2026-05-05) ===
     Sam: "go back to the two rows of four ... I just want you to
     use the PNGs that I have in that nice color. Don't shrink them,
     make them more transparent or anything like that."

     Render PNGs natively — no filter, full opacity 1.0, no scaling
     beyond the tile's natural fit. Use the inherited body font
     (no Cinzel). Hover = subtle bg only, NO border, NO underline.
  */
  #site-header .site-header__nav--boxed .nav-menu--mega {
    width: 680px !important;
    min-width: 680px !important;
    max-width: calc(100vw - 2rem) !important;
    padding: 0.75rem !important;
    overflow: hidden !important;
    /* T-233 (2026-05-06, per Sam: "request appointment thing showing up
       whenever I hover over things that are above it"). The base
       .nav-menu rule above DOES set background: #fff — but explicitly
       re-asserting it on the mega class ensures no rule-ordering edge
       case lets the page below show through. Plus z-index 200 (was
       inherited 100) lifts the mega panel above any sticky/elevated
       element on the page underneath. */
    background: #fff !important;
    z-index: 200 !important;
  }
  #site-header .nav-menu--mega .nav-mega__quickjump,
  #site-header .nav-menu--mega .nav-mega__quickjump-label,
  #site-header .nav-menu--mega .nav-mega__flyout,
  #site-header .nav-menu--mega .nav-mega__group--has-flyout > .nav-mega__flyout {
    display: none !important;
  }

  #site-header .nav-menu--mega .nav-mega__grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-auto-rows: 1fr !important;
    column-gap: 0.5rem !important;
    row-gap: 0.5rem !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  #site-header .nav-menu--mega .nav-mega__group {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  /* Region tile: big icon above label, click = navigate */
  #site-header .nav-menu--mega .nav-mega__label {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 140px !important;
    padding: 1rem 0.5rem !important;
    color: #203070 !important;
    background: transparent !important;
    text-decoration: none !important;
    /* T-227 (2026-05-06): match every other dropdown word at
       0.92rem / 500 so tile labels are not visually heavier than
       the regular-dropdown items beside them. */
    font-family: inherit !important;          /* Sam: not Cinzel — body font */
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-transform: none !important;
    border: 0 !important;                     /* NO border (Sam: "huge underline") */
    border-radius: 8px !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    transition: background 140ms ease !important;
  }
  #site-header .nav-menu--mega .nav-mega__label::before,
  #site-header .nav-menu--mega .nav-mega__label::after {
    display: none !important;
    content: none !important;
  }

  /* PNGs as-is — natural color, full opacity, big enough to read.
     T-227 (2026-05-06, per Sam: "quality of the body part icons
     is cooked"). Removed `image-rendering: -webkit-optimize-contrast`
     — that hint forces a sharper-but-aliased downscale and was the
     reason the icons looked artifacted. With the source PNGs being
     1402×1122 and the rendered size 80px, the browser's default
     bilinear path (`auto`) gives a clean, smooth downscale. */
  #site-header .nav-menu--mega .nav-mega__label img.anat-icon {
    display: block !important;
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
    /* T-230 (2026-05-06, per Sam: "knee is shifted to the right, or the
       icon is shifted to the left, however you want to phrase it"). The
       tile is `display:flex; flex-direction:column; align-items:center`
       which SHOULD center the icon, but with the bare-text-node sibling
       ("Hip"/"Knee" etc.) acting as an anonymous flex item, the icon
       was rendering flush against the inner-padding-left edge instead of
       horizontally centered. `margin: 0 auto` forces the icon to center
       itself within the tile's cross-axis space regardless of how the
       browser handles the text-node sibling. */
    margin: 0 auto !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    object-fit: contain !important;
    filter: none !important;                   /* no invert, no brightness, no fade */
    opacity: 1 !important;                     /* Sam: don't make them more transparent */
    transition: none !important;
    image-rendering: auto !important;
  }

  /* Tile hover: subtle bg tint only — no border, no underline, no scale */
  #site-header .nav-menu--mega .nav-mega__label:hover,
  #site-header .nav-menu--mega .nav-mega__label:focus-visible {
    background: rgba(63,128,105,0.08) !important;
    color: var(--sage-dark, #3F8069) !important;
    outline: none !important;
    text-decoration: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  /* defensively kill any text-decoration on hover from legacy CSS */
  #site-header .nav-menu--mega .nav-mega__label:hover *,
  #site-header .nav-menu--mega .nav-mega__label:hover {
    text-decoration: none !important;
  }

  /* "See all conditions →" footer link */
  #site-header .nav-menu--mega .nav-mega__footer {
    display: block !important;
    margin: 0.5rem -0.75rem -0.75rem !important;
    padding: 0.7rem 1rem !important;
    border-top: 1px solid rgba(32,48,112,0.08) !important;
    color: var(--sage-dark, #3F8069) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    text-align: right !important;
    background: rgba(63,128,105,0.03) !important;
  }
  #site-header .nav-menu--mega .nav-mega__footer:hover {
    background: rgba(63,128,105,0.10) !important;
    text-decoration: none !important;
  }

  /* Center the mega menu under its trigger */
  #site-header .site-header__nav--boxed .nav-box--mega {
    position: static !important;
  }
  #site-header .site-header__nav--boxed .nav-menu--mega {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  /* Header brand spacing: ensure brand logo doesn't collide with nav */
  #site-header .site-header__main {
    display: flex !important;
    align-items: center !important;
    gap: 1.5rem !important;
    padding: 0.4rem 1.25rem !important;
  }
  #site-header .brand {
    flex: 0 0 auto !important;
    /* T-232 (2026-05-06, per Sam: "at 125% zoom, the word providers
       is right by the logo"). The `margin-right: auto` below is the
       layout mechanism that pushes the nav block to the right — at
       wide viewports the auto-margin absorbs all spare space, so no
       minimum gap is enforced. At narrow desktop widths (≈1100-1200)
       or under browser zoom, the nav fills more of the row and the
       auto-margin shrinks to ~0, leaving "Providers" right against
       the logo. `padding-right` gives a guaranteed minimum visual
       gap (3rem ≈ 51px at our 17px root font-size) that the
       auto-margin sits on top of, so wide viewports still distribute
       correctly. */
    padding-right: 3rem !important;
    margin-right: auto !important;
  }
  #site-header .site-header__nav--boxed {
    flex: 0 1 auto !important;
  }

  /* === Defensive: kill any underline/border-bottom in the entire
     nav region from legacy CSS (Sam: "huge underline that crosses
     the entire thing"). Applies to every interactive element in
     header. */
  #site-header a,
  #site-header a:hover,
  #site-header a:focus,
  #site-header a:focus-visible,
  #site-header a:active,
  #site-header .nav-box,
  #site-header .nav-box:hover,
  #site-header .nav-menu,
  #site-header .nav-menu a,
  #site-header .nav-menu a:hover,
  #site-header .nav-menu--mega *,
  #site-header .nav-mega__label,
  #site-header .nav-mega__label:hover {
    text-decoration: none !important;
    border-bottom: 0 !important;
  }
}


/* ===========================================================
   3. MOBILE DRAWER — viewports < 1100px
   =========================================================== */
/* T-225 (2026-05-06): use 1099.98px (not 1099) so fractional
   viewport widths under HiDPI zoom — e.g. 1099.5px on a 1.5×
   display — still match the mobile query. The previous 1099/1100
   split left a sub-pixel dead zone where neither MQ matched and
   the layout silently fell back to default block flow (items
   wrapped, brand z-index:2 covered them). */
@media (max-width: 1099.98px) {

  /* show hamburger on mobile. */
  #site-header .nav-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin-left: auto !important;
    color: #203070 !important;
    background: transparent !important;
    border: 1px solid rgba(32,48,112,0.30) !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 950 !important;
  }
  /* T-220: hamburger stays in its natural in-bar position. The
     bars animate to an X via CSS when nav-open. The X sits at
     the top-right of the brand bar where the user expects it. */
  #site-header.nav-open .nav-toggle {
    background: rgba(32,48,112,0.06) !important;
  }

  /* drawer attaches to header (sticky), not __main */
  #site-header .site-header__main {
    position: static !important;
  }

  /* nuclear position-reset on every drawer descendant.
     T-212 (2026-05-05): the height/min-height/max-height parts
     of T-211a were collapsing flex children and breaking the
     drawer (huge empty white box). Reverted those. We keep only
     the position/transform reset which has been safe and useful. */
  #site-header .site-header__nav--boxed,
  #site-header .site-header__nav--boxed * {
    position: static !important;
    transform: none !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    float: none !important;
  }

  /* drawer container — T-220 (2026-05-05, per Sam: "the position
     shouldn't be top zero. It's got to fit in with where the
     hamburger icon is. I still want to see the logo and everything.
     The drop-down just needs to be kind of centered in a logical
     spot"). Drawer drops directly below the brand bar so the logo
     and hamburger remain visible. The hamburger animates to X via
     CSS — that IS the close button, in its natural position. */
  #site-header .site-header__nav--boxed {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    /* T-223 (2026-05-06): removed `inset: auto !important` here — it was a
       leftover from the nuclear-reset and, as the `inset` shorthand, it
       nullified the top/left/right values declared just above. Drawer was
       falling back to static position next to the hamburger ("too high
       and too far right"). */
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 100px) !important; /* T-221 (2026-05-06): was 75vh — too short, scrolled "Providers" off top */
    box-sizing: border-box !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0.5rem 0 1rem !important;
    background: #fff !important;
    border: 0 !important;
    border-top: 3px solid var(--brand-navy, #203070) !important;
    border-radius: 0 !important;
    box-shadow:
      0 24px 48px rgba(15,18,38,0.22),
      0 6px 12px rgba(15,18,38,0.10) !important;
    z-index: 900 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* drawer open */
  #site-header.nav-open .site-header__nav--boxed {
    display: flex !important;
  }

  /* header sits above the backdrop */
  #site-header { z-index: 1000 !important; }

  /* page scroll-lock when drawer open. T-202 (2026-05-05):
     switched the trigger from `:has(.site-header.nav-open)`
     to a JS-toggled `body.nav-drawer-open` class. :has() is
     not yet shipped in some Sam-side browsers (or is buggy
     under specific Safari builds), so the backdrop wasn't
     reliably appearing. body class is universal. */
  html.nav-drawer-open,
  body.nav-drawer-open {
    overflow: hidden !important;
    overscroll-behavior: contain !important;
  }

  /* dim backdrop behind drawer (JS class, not :has).
     T-217 (2026-05-05): bumped from 0.42 to 0.55 — stronger
     visual cue that the page is in a modal-panel state. */
  body.nav-drawer-open::before {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15,18,38,0.55) !important;
    z-index: 800 !important;
    pointer-events: none !important;
    animation: nav-backdrop-fade-in 180ms ease-out !important;
  }
  @keyframes nav-backdrop-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* === TOP-LEVEL SECTION === */
  /* T-224 (2026-05-06): added `flex: 0 0 auto`. The drawer is a flex
     column with `max-height: calc(100vh - 100px)`. Without this rule,
     `.nav-box` defaults to `flex: 0 1 auto` — flex-shrink 1 — so when
     a mega menu opens and total content exceeds the drawer's
     max-height, flex compresses the open box instead of letting the
     drawer scroll. The grid items inside then overflow the box and
     paint on top of the closed sections + the Request Appointment
     button below them ("bleed-through" Sam's screenshots). Pinning
     flex-shrink to 0 keeps each section at its natural content height
     and lets `overflow-y: auto` on the drawer do the scrolling. */
  #site-header .site-header__nav--boxed .nav-box {
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(32,48,112,0.08) !important;
    background: transparent !important;
    cursor: pointer !important;
  }
  #site-header .site-header__nav--boxed .nav-box:hover,
  #site-header .site-header__nav--boxed .nav-box:focus-within {
    background: rgba(32,48,112,0.04) !important;
  }

  /* trigger link — full-width tap target */
  #site-header .site-header__nav--boxed .nav-box__link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 0.85rem 1rem !important;
    margin: 0 !important;
    color: #203070 !important;
    background: transparent !important;
    text-decoration: none !important;
    font-family: inherit !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }

  /* caret */
  #site-header .site-header__nav--boxed .nav-box__caret {
    display: inline-block !important;
    color: rgba(32,48,112,0.55) !important;
    font-size: 0.7rem !important;
    margin-left: auto !important;
    transition: transform 180ms ease, color 180ms ease !important;
    transform: rotate(0) !important;
    opacity: 1 !important;
    filter: none !important;
  }
  #site-header .site-header__nav--boxed .nav-box.is-open .nav-box__caret {
    transform: rotate(180deg) !important;
    color: #203070 !important;
  }

  /* === DROPDOWN PANEL (collapsed default) === */
  #site-header .site-header__nav--boxed .nav-menu {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 1 !important;
    transition: none !important;
  }

  /* dropdown open — T-211 (2026-05-05, per Sam: "there must be
     contrast between dropdowns if they are gonna be right over
     each other and easily accessible"). Bulletproof contrast:
     navy gradient bg, bold left navy stripe, deep top shadow.
     Even if items position-overlap subsequent section headers
     because of legacy CSS conflicts, the user can READ them
     because the dropdown is on a clearly different colored panel.
     Plus z-index 50 so the panel paints OVER any sibling
     section header behind it. */
  #site-header .site-header__nav--boxed .nav-box.is-open {
    position: relative !important;
    z-index: 50 !important;
    background: linear-gradient(180deg, #f4f7fb 0%, #e8eef6 100%) !important;
    border-left: 4px solid var(--brand-navy, #203070) !important;
    border-bottom: 1px solid rgba(32,48,112,0.20) !important;
    box-shadow:
      inset 0 6px 10px -8px rgba(15,18,38,0.18),
      0 4px 8px rgba(15,18,38,0.06) !important;
  }
  #site-header .site-header__nav--boxed .nav-box.is-open .nav-menu {
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
    pointer-events: auto !important;
    padding: 0.5rem 0.75rem 0.75rem !important;
    background: transparent !important;
    position: relative !important;
    z-index: 51 !important;
  }
  /* Section trigger inside open box: also contrasted */
  #site-header .site-header__nav--boxed .nav-box.is-open .nav-box__link {
    background: rgba(32,48,112,0.06) !important;
    color: #203070 !important;
    font-weight: 700 !important;
  }

  /* === DROPDOWN ITEMS === */
  #site-header .site-header__nav--boxed .nav-menu a {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    min-height: 40px !important;
    margin: 0.15rem 0 !important;
    padding: 0.6rem 0.75rem !important;
    color: #203070 !important;
    /* T-216 (2026-05-05, per Sam: "we need to make it even more
       opaque. it's still translucent, you can kind of see the
       text behind"). Solid white — no rgba alpha — so nothing
       behind the item bleeds through. */
    background: #fff !important;
    text-decoration: none !important;
    font-family: inherit !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    border: 1px solid rgba(32,48,112,0.10) !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    position: relative !important;
    z-index: 52 !important;
  }
  #site-header .site-header__nav--boxed .nav-menu a:hover,
  #site-header .site-header__nav--boxed .nav-menu a:focus-visible {
    background: var(--brand-navy, #203070) !important;
    color: #fff !important;
    border-color: var(--brand-navy, #203070) !important;
    outline: none !important;
  }

  /* === MEGA MENU IN DRAWER — 2×4 REGION TILE GRID ===
     T-213 (2026-05-05, per Sam: "I want the same kind of 2 by 4
     grid of the body regions along with spine and trauma … just
     to list the body parts so they can pick and go to the
     specific page"). Same shape as desktop — region tiles only,
     condition lists hidden, click → /regions/<name>.html.
  */
  #site-header .site-header__nav--boxed .nav-menu--mega {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    background: #fff !important; /* T-222 (2026-05-06): kill bleed-through in tile-grid gaps */
    position: relative !important;
    z-index: 51 !important;
  }

  /* Hide condition lists, quick-jump, etc. on mobile */
  #site-header .site-header__nav--boxed .nav-menu--mega .nav-mega__quickjump,
  #site-header .site-header__nav--boxed .nav-menu--mega .nav-mega__quickjump-label,
  #site-header .site-header__nav--boxed .nav-menu--mega .nav-mega__flyout,
  #site-header .site-header__nav--boxed .nav-menu--mega .nav-mega__group--has-flyout > .nav-mega__flyout,
  #site-header .site-header__nav--boxed .nav-menu--mega .nav-mega__empty {
    display: none !important;
  }

  /* 2×4 grid of region tiles */
  #site-header .site-header__nav--boxed .nav-menu--mega .nav-mega__grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: 1fr !important;
    column-gap: 0.5rem !important;
    row-gap: 0.5rem !important;
    padding: 0.25rem 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
  }

  #site-header .site-header__nav--boxed .nav-menu--mega .nav-mega__group {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  /* Region tile: icon stacked above region name, click navigates */
  #site-header .site-header__nav--boxed .nav-menu--mega .nav-mega__label {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 110px !important;
    margin: 0 !important;
    padding: 0.85rem 0.5rem !important;
    color: #203070 !important;
    background: #fff !important; /* T-221 (2026-05-06): was rgba 0.92 — page bled through gaps */
    border: 1px solid rgba(32,48,112,0.14) !important;
    border-radius: 8px !important;
    font-family: inherit !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-align: center !important;
    text-decoration: none !important;
    pointer-events: auto !important;
    cursor: pointer !important;
  }
  #site-header .site-header__nav--boxed .nav-menu--mega .nav-mega__label::before,
  #site-header .site-header__nav--boxed .nav-menu--mega .nav-mega__label::after {
    display: none !important;
    content: none !important;
  }
  /* T-221 (2026-05-06): Sam — drop full-navy hover; match desktop sage tint */
  #site-header .site-header__nav--boxed .nav-menu--mega .nav-mega__label:hover,
  #site-header .site-header__nav--boxed .nav-menu--mega .nav-mega__label:focus-visible {
    background: rgba(63,128,105,0.08) !important;
    color: var(--sage-dark, #3F8069) !important;
    border-color: rgba(63,128,105,0.35) !important;
    outline: none !important;
  }

  /* PNG icon — natural color, full opacity, generous size.
     T-230 (2026-05-06): same `margin: 0 auto` fix as desktop above —
     the bare-text-node sibling pattern was causing the icon to align
     to the left padding edge instead of centering. */
  #site-header .site-header__nav--boxed .nav-menu--mega .nav-mega__label img.anat-icon {
    display: block !important;
    width: 56px !important;
    height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    flex: 0 0 auto !important;
    object-fit: contain !important;
    filter: none !important;
    opacity: 1 !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  /* T-221: removed icon-invert-on-hover (no longer needed — hover is now light sage, not navy fill) */

  /* "See all conditions →" footer link below the tile grid */
  #site-header .site-header__nav--boxed .nav-menu--mega .nav-mega__footer {
    display: block !important;
    margin: 0.75rem 0 0 !important;
    padding: 0.6rem 0.75rem !important;
    border-top: 1px solid rgba(32,48,112,0.10) !important;
    color: #203070 !important;
    background: transparent !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    text-transform: none !important;
    text-align: right !important;
  }

  /* === REQUEST APPOINTMENT BUTTON — slim brand-green pill ===
     T-210 (2026-05-05, per Sam: "patients will touch request
     an appointment with certain zooms"). Bumped top margin to
     hard-enforce a 1.5rem gap above the button so the last
     section's items can't crash into it during scroll/zoom. */
  #site-header .site-header__nav--boxed .btn-appt {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 1.5rem auto 0.5rem !important;
    padding: 0.55rem 1.25rem !important;
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 2 !important;
    background: var(--brand-green, #004020) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-family: inherit !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    text-decoration: none !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.04) !important;
    box-sizing: border-box !important;
  }
  #site-header .site-header__nav--boxed .btn-appt:hover,
  #site-header .site-header__nav--boxed .btn-appt:focus-visible {
    background: var(--brand-green-dark, #002b15) !important;
    outline: none !important;
  }
}

/* ===========================================================
   END nav.css
   =========================================================== */