body.nav-new .site-header__nav--boxed{display:flex;gap:0.25rem;align-items:center}
/* T-300: drawer contact cluster is mobile-drawer-only; hide on desktop nav bar. */
body.nav-new #primary-nav .nav-contact{display:none}
body.nav-new .nav__item{position:static}
body.nav-new .nav__trigger{position:relative;font-family:var(--font-display);background:transparent;border:0;color:#203070;font-size:1.05rem;font-weight:600;padding:0.7rem 0.7rem;cursor:pointer;letter-spacing:-0.012em;display:inline-flex;align-items:center;text-decoration:none !important;border-radius:0;transition:color 140ms ease;white-space:nowrap;font-variation-settings:"opsz" 36}
/* Animated underline grows from the center on hover/open — replaces the
   little dropdown arrow Sam didn't like. */
body.nav-new .nav__trigger::after{content:"";position:absolute;left:50%;bottom:0.45rem;width:0;height:2px;background:#3F8069;border-radius:1px;transform:translateX(-50%);transition:width 240ms cubic-bezier(0.16,1,0.3,1),opacity 200ms ease;opacity:0;border:0;margin:0}
body.nav-new .nav__item:hover .nav__trigger,body.nav-new .nav__item.is-open .nav__trigger{color:#2B5E4C}
body.nav-new .nav__item:hover .nav__trigger::after,body.nav-new .nav__item.is-open .nav__trigger::after{width:calc(100% - 1.4rem);opacity:1}

/* Panel sits anchored just below the nav row at all times. On open it
   un-clips from the TOP edge downward — height "grows" from 0 down to
   its natural size, like a roller blind dropping from under the trigger.
   No translate, so it never wipes across the screen.  */
html body.nav-new .mega{position:fixed;left:0;width:100vw;top:var(--new-nav-mega-top,120px);background:#fff;border-top:1px solid rgba(32,48,112,0.06);border-bottom:1px solid rgba(32,48,112,0.06);box-shadow:0 24px 40px rgba(15,18,38,0.08),0 8px 16px rgba(15,18,38,0.04);display:none;pointer-events:none;z-index:9000}
html body.nav-new .mega.is-open{display:block !important;pointer-events:auto !important}
/* Switching from one open mega to another: skip the wipe so content
   appears to flow between them. Applied for one frame on both the
   closing and opening panels during a hover-switch. */
body.nav-new .mega.is-instant{transition:none !important}

/* Flex layout so the content columns GROW to fill the row instead of
   sitting in fixed 1fr grid cells. With flex 1 1 0, 2 columns split the
   row 50/50, 3 columns 33/33/33 — no dead air on the right. The CTA
   rail keeps a fixed 280px. */
body.nav-new .mega__inner{max-width:1440px;margin:0 auto;padding:1.5rem 1.5rem 1.5rem;display:flex;gap:2rem;align-items:stretch}
body.nav-new .mega__col{flex:1 1 0;min-width:0}
body.nav-new .mega__rail{flex:0 0 280px}
body.nav-new .mega__col-title{font-size:0.7rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#2B5E4C;margin-bottom:0.85rem;padding-bottom:0.45rem;border-bottom:1px solid rgba(32,48,112,0.06)}

body.nav-new .mega__link{position:relative;display:block;text-decoration:none !important;color:#1a2654 !important;padding:0.55rem 0 0.55rem 0.85rem !important;border-radius:6px !important;transition:color 160ms ease,transform 160ms ease,background 160ms ease;background:transparent !important;white-space:normal !important;border:0 !important;margin:0 !important}
body.nav-new .mega__link::before{content:"" !important;position:absolute !important;left:0 !important;top:50% !important;width:2px !important;height:0 !important;background:#3F8069 !important;border-radius:1px !important;transform:translateY(-50%) !important;transition:height 200ms ease,opacity 200ms ease !important;opacity:0 !important;display:block !important}
/* Nudge right via transform (not padding) so the content box never changes
   width — the description text keeps its wrap points and never reflows on
   hover. Applies to every dropdown via the shared .mega__link. */
body.nav-new .mega__link:hover{color:#2B5E4C !important;transform:translateX(0.28rem) !important;background:transparent !important}
body.nav-new .mega__link:hover::before{height:60% !important;opacity:1 !important}
body.nav-new .mega__link-title{font-size:1.1rem;font-weight:700;letter-spacing:-0.012em;line-height:1.3;display:block;margin-bottom:0.15rem}
/* Provider rows: face thumbnail + name, no extra description */
body.nav-new .mega__link--person{display:flex !important;align-items:center;gap:0.85rem;padding:0.5rem 0 0.5rem 0.85rem !important}
body.nav-new .mega__face{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 22%;flex:0 0 44px;background:#f0f2f5;border:1px solid rgba(32,48,112,0.08)}
body.nav-new .mega__col--people .mega__link-title{font-size:0.95rem;font-weight:600}
body.nav-new .mega__link-sub{font-size:0.82rem;font-weight:400;color:#6c7593;line-height:1.45;margin-top:0.15rem;display:block}
body.nav-new .mega__link-sub + .mega__link-sub{margin-top:0.05rem}
body.nav-new .mega__link-sub--soft{font-style:italic;font-size:0.78rem;color:#8a92a8}
body.nav-new .mega__link-stack{display:flex;flex-direction:column;min-width:0}
/* Full-width "general pain" header at the top of each What-we-treat region
   panel. Links to the region overview page; the specific diagnoses flow in
   the columns below it as before. Sits OUTSIDE .mega__panel-flow so it spans
   the whole width instead of joining the column flow. */
/* Region lead entry. Same title + one-line description structure as the
   condition links below it, just full-width and a touch larger so it reads as
   the section's overview link. Keeps the dropdown uniform. */
body.nav-new .mega__panel-feature{display:block;width:100%;box-sizing:border-box;text-decoration:none !important;padding:0 0 0.7rem 0.85rem;margin:0 0 0.8rem;border-bottom:1px solid rgba(32,48,112,0.12);border-left:2px solid transparent !important;border-radius:6px !important;transition:color 160ms ease,transform 160ms ease,background 160ms ease}
body.nav-new .mega__feature-title{display:block;font-family:var(--font-display);font-weight:700;font-size:1.2rem;letter-spacing:-0.012em;line-height:1.25;color:#203070 !important;transition:color 140ms ease}
body.nav-new .mega__feature-sub{display:block;font-size:0.84rem;font-weight:400;color:#6c7593;line-height:1.45;margin-top:0.18rem}
body.nav-new .mega__panel-feature:hover .mega__feature-title{color:#2B5E4C !important}
body.nav-new .mega__panel-feature:hover{transform:translateX(0.28rem) !important;border-left-color:#3F8069 !important}
body.nav-new .mega__panel-feature:hover .mega__feature-sub{color:#2a3760 !important}
body.nav-new .mega__link:hover .mega__link-sub{color:#2a3760}

body.nav-new .mega__rail{background:linear-gradient(180deg,#f7f8fa,#eef0f5);border-radius:14px;padding:1.4rem 1.25rem 1.25rem !important;display:flex !important;flex-direction:column;gap:0.7rem;text-decoration:none !important;color:inherit;transition:background 240ms ease;width:auto !important;min-width:0 !important;margin:0 !important;border:0 !important;white-space:normal !important}
body.nav-new .mega__rail::before{display:none !important}
body.nav-new .mega__rail:hover{background:linear-gradient(180deg,#eef0f5,#e2e7ef)}
body.nav-new .mega__rail-eyebrow{font-size:0.7rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#2B5E4C}
body.nav-new .mega__rail-title{font-family:var(--font-display);font-size:1.05rem;line-height:1.3;font-weight:600;color:#1a2654;letter-spacing:-0.005em}
body.nav-new .mega__rail-cta{margin-top:auto;font-size:0.85rem;font-weight:600;color:#1a2654}
body.nav-new .mega__rail-cta::after{content:" \2192";color:#2B5E4C}

/* ── Cascade variant: anatomy regions split into two vertical 1-col
   rails — far LEFT + far RIGHT — flanking the conditions/procedures
   panel in the middle. Cursor travels straight in (horizontal) from
   whichever side without crossing a sibling tile. Single column per
   rail = no diagonal hover conflicts. ── */
body.nav-new .mega--cascade .mega__inner{display:flex !important;flex-direction:column;gap:0.5rem;padding:1rem 1.5rem 1.25rem;align-items:stretch}
body.nav-new .mega--cascade .mega__main{display:flex !important;flex-direction:column;gap:0.75rem;width:100%}
body.nav-new .mega__regions{display:flex !important;flex-direction:row !important;gap:0.4rem !important;margin:0 !important;padding:0 0 0.6rem !important;border:0 !important;border-bottom:1px solid rgba(32,48,112,0.06) !important;background:transparent !important;width:100%;justify-content:space-between}
body.nav-new .mega__region{flex:1 1 0;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:flex-start !important;gap:0.4rem !important;padding:0.6rem 0.4rem !important;border-radius:10px !important;cursor:pointer;font-size:0.85rem !important;font-weight:600 !important;color:#1a2654 !important;transition:background 140ms ease,border-color 140ms ease,color 140ms ease,transform 160ms ease;text-decoration:none !important;background:transparent !important;white-space:nowrap !important;border:1px solid transparent !important;border-left:2px solid transparent !important;margin:0 !important;font-family:inherit;text-align:center;min-width:0}
body.nav-new .mega__region::before{display:none !important}
body.nav-new .mega__region .ico{width:150px;height:150px;max-width:100%;background-size:contain;background-repeat:no-repeat;background-position:center;opacity:0.95;flex:0 0 auto;filter:grayscale(0.05);transition:opacity 160ms ease,transform 160ms ease}
body.nav-new .mega__region-label{font-size:1rem;font-weight:700;line-height:1.2;letter-spacing:-0.005em}
/* Region buttons hover like every other dropdown item (2026-06-07): green
   left-border accent + green label + subtle slide + icon brightens/lifts —
   matches the unified .mega__link hover so the icon tiles feel like the rest. */
body.nav-new .mega__region:hover{background:transparent !important;border-color:transparent !important;border-left-color:#3F8069 !important;color:#2B5E4C !important;transform:translateX(0.28rem) !important}
body.nav-new .mega__region.is-active{background:rgba(63,128,105,0.10) !important;border-color:transparent !important;border-left-color:#3F8069 !important;color:#2B5E4C !important}
body.nav-new .mega__region:hover .ico,body.nav-new .mega__region.is-active .ico{opacity:1;transform:translateY(-1px) scale(1.04)}
/* The "All areas" back bar (.mega__back) is a mobile drill-down control,
   injected by new-nav.js on the homepage. Hide it on desktop so it does not
   render as a stray gray button atop the mega dropdown. Mobile rules below
   re-show it only when a region is drilled into. */
body.nav-new .mega--cascade .mega__back{display:none}
body.nav-new .mega--cascade .mega__panels{align-self:start;min-height:0}
body.nav-new .mega--providers .mega__inner{display:block !important;padding:1.25rem 1.5rem}
body.nav-new .mega__providers-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:auto;gap:0.6rem 1.5rem;width:100%}
body.nav-new .mega__provider{padding:0.65rem 0.85rem !important;border-radius:10px !important}
body.nav-new .mega__provider-empty{visibility:hidden}
body.nav-new .mega--locations .mega__inner{display:block !important;padding:1.25rem 1.5rem}
body.nav-new .mega__locations-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.5rem 1.5rem;width:100%}
body.nav-new .mega__loc{padding:0.65rem 0.85rem !important;border-radius:10px !important}
@media (max-width:1100px){body.nav-new .mega__locations-grid{grid-template-columns:repeat(2,1fr)}}
body.nav-new .mega__disclaimer{display:flex;align-items:baseline;gap:0.7rem;margin-top:0.6rem;padding-top:0.6rem;border-top:1px solid rgba(32,48,112,0.06)}
body.nav-new .mega__disclaimer-eyebrow{font-size:0.7rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#2B5E4C;flex:0 0 auto}
body.nav-new .mega__disclaimer-text{font-size:0.82rem;color:#6c7593;line-height:1.45;font-weight:400}

body.nav-new .mega__panels{position:relative;min-height:0}
body.nav-new .mega__panel{display:none}
body.nav-new .mega__panel.is-active{display:block}
/* Items flow row-major across a CSS grid so the first column is always
   filled before the next column gets a second row. CSS multi-columns
   (column-fill:balance) left short lists with a blank gap on the LEFT
   when one column's content was tall enough to balance into a single
   item — items in row 2 lived only in cols 2/3 with empty space at row
   2/col 1. Grid keeps row order, so the empty cell (when item count
   doesn't divide evenly) lands on the RIGHT instead. */
body.nav-new .mega__panel-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:1.5rem;row-gap:0.1rem}
body.nav-new .mega__panel-flow .mega__link{padding-top:0.3rem !important;padding-bottom:0.3rem !important}
/* Unified dropdown hover (2026-06-07): every .mega__link uses a left border
   accent that lights up on hover, the same "box line" the cascade panels use.
   Replaces the old absolute ::before bar (which Chrome also mis-painted across
   multi-column panels). The 2px border is reserved transparent at rest so the
   line never causes reflow when it turns green. Applies to every dropdown
   (Providers, Locations, What we treat, Non-Operative Care, Surgical Options,
   Patient Resources) on every page. */
body.nav-new .mega__link{border-left:2px solid transparent !important}
body.nav-new .mega__link::before{display:none !important}
body.nav-new .mega__link:hover,
body.nav-new .mega__link:active{border-left-color:#3F8069 !important}
/* "All Non-Operative Care" footer link spans full width below the columns. */
body.nav-new .mega:has(.mega__nonop-all) .mega__inner{flex-wrap:wrap}
body.nav-new .mega__nonop-all{flex:0 0 100%;margin-top:0.4rem;padding-top:0.7rem;border-top:1px solid rgba(32,48,112,0.10)}
/* Hero intro split into short paragraphs (was a wall of text) — keep them spaced. */
body.nav-new .lp-hero__sub + .lp-hero__sub{margin-top:0.7em}
@media (min-width:1500px){body.nav-new .mega__panel-flow{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1100px){body.nav-new .mega__panel-flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
body.nav-new .mega__note{font-size:0.78rem;color:#6c7593;font-style:italic;margin-bottom:0.85rem;padding-bottom:0.45rem;border-bottom:1px solid rgba(32,48,112,0.06)}
body.nav-new .mega__viewall{display:inline-block;margin-top:0.4rem;font-size:0.88rem;font-weight:600;color:#2B5E4C !important;text-decoration:none !important;padding:0.25rem 0 !important;background:transparent !important;border:0 !important}
body.nav-new .mega__viewall::before{display:none !important}
body.nav-new .mega__viewall:hover{color:#1a2654 !important}

body.nav-new .ico-shoulder{background-image:url('/assets/anatomy/icons/shoulder.png')}
body.nav-new .ico-hip{background-image:url('/assets/anatomy/icons/hip.png')}
body.nav-new .ico-knee{background-image:url('/assets/anatomy/icons/knee.png')}
body.nav-new .ico-elbow{background-image:url('/assets/anatomy/icons/elbow.png')}
body.nav-new .ico-hand{background-image:url('/assets/anatomy/icons/hand.png')}
body.nav-new .ico-foot{background-image:url('/assets/anatomy/icons/ankle.png')}
body.nav-new .ico-spine{background-image:url('/assets/anatomy/icons/spine.png')}
body.nav-new .ico-trauma{background-image:url('/assets/anatomy/icons/trauma.png')}

body.nav-new .flagship-tag{display:inline-block;font-size:0.6rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#b88a3a;background:rgba(255,216,102,0.16);padding:2px 8px;border-radius:999px;margin-left:0.45rem;vertical-align:middle}
/* Location provider chip — sage pill that separates the provider name
   from the venue text, so "Dr. Twitero" / "All Providers" reads as
   practice metadata rather than another address line. */
body.nav-new .provider-tag-row{display:flex;flex-wrap:wrap;align-items:center;gap:0.3rem 0.55rem;margin-top:0.3rem}
body.nav-new .provider-tag{display:inline-flex;align-items:center;font-size:0.78rem;font-weight:400;letter-spacing:0;color:#4a5573;background:transparent;border:0;padding:0;line-height:1.35;text-transform:none}
body.nav-new .provider-tag:not(:last-child)::after{content:"·";margin-left:0.55rem;color:rgba(32,48,112,0.32);font-weight:400}
body.nav-new .provider-tag-schedule{font-size:0.75rem;color:#6c7593;font-style:italic;line-height:1.3}

/* Hide hamburger at desktop widths only. Below 1180 the new nav can't
   fit (6 Fraunces triggers + CTA), so production's hamburger drawer
   takes over and the new-nav CSS below sleeps. */
@media (min-width:1180px){
  body.nav-new .nav-toggle{display:none !important}
}
/* Below 1180, hide new nav + show hamburger (production drawer takes over) */
@media (max-width:1179.98px){
  body.nav-new #primary-nav .nav__item,
  body.nav-new #primary-nav .btn-appt{display:none !important}
}

/* Single inline row at all desktop widths. Brand shrinks to fit so the
   six Fraunces triggers + CTA always sit next to the logo (per Sam:
   "the drop-downs need to be in line with the logo. We can shrink the
   logo if we need to."). */
/* Flatten the nav so brand + 6 triggers + CTA all become direct flex
   children of .site-header__main. With `display: contents` the <nav>
   stays semantic but disappears from layout, letting one
   `justify-content: space-between` distribute every gap uniformly:
   edge → brand → trig × 6 → CTA → edge are all the same air gap. */
html body.nav-new #site-header .site-header__main{gap:1rem !important;flex-wrap:nowrap !important;align-items:center !important;justify-content:space-between !important;padding:0.5rem clamp(0.75rem,1.4vw,1.25rem) !important}
html body.nav-new #site-header .brand{margin:0 !important;flex:0 0 auto !important;flex-shrink:0 !important;border-top:0 !important;padding-top:0 !important;width:auto !important}
html body.nav-new #site-header .site-header__nav--boxed{display:contents !important}
html body.nav-new #site-header .site-header__nav--boxed .btn-appt{margin:0 !important;flex:0 0 auto}
/* Smooth fluid logo size so the wordmark stays legible at every desktop
   width. Floor 70px = smallest size where "Orthopedic & Sports Medicine
   Institute" still reads cleanly. Ceiling 100px keeps it from dominating
   the row on wide screens. Linear in between via 5.2vw — no abrupt media
   step. */
html body.nav-new #site-header .brand img.brand__logo--full{max-height:clamp(80px,6.5vw,120px) !important;width:auto !important;height:auto !important;transition:max-height 320ms cubic-bezier(0.16,1,0.3,1)}
/* When the header is in its compact (scrolled) state, the logo shrinks
   smoothly and the nav row redistributes via justify-content:space-between
   automatically — triggers visually slide left into the freed space. */
/* Production toggles a `.is-scrolled` class on the header that
   shrinks the bar, swaps to a mini OSI letter mark, collapses
   padding, and rearranges the utility row — every scroll tick
   flickers between two layouts. The new nav nukes that toggle entirely
   (see MutationObserver below) and forces both possible states to
   render as the at-rest layout. Single static header. */
html body.nav-new #site-header .brand__logo--full,
html body.nav-new #site-header.is-scrolled .brand__logo--full{display:block !important}
html body.nav-new #site-header .brand__logo--mini,
html body.nav-new #site-header.is-scrolled .brand__logo--mini{display:none !important}
html body.nav-new #site-header{transition:padding 240ms ease}
html body.nav-new #site-header.is-compact .site-header__main{padding-top:0.35rem !important;padding-bottom:0.35rem !important}
body.nav-new .site-header__nav--boxed{flex-shrink:1;min-width:0;flex-wrap:nowrap !important;justify-content:flex-end}
/* Trigger padding tightens as viewport narrows so 6 items + CTA stay
   inline. Logo height is fluid via clamp() above — no per-media step. */
@media (max-width:1499.98px){
  body.nav-new .nav__trigger{padding:0.6rem 0.5rem !important;font-size:0.98rem !important}
}
@media (min-width:1180px) and (max-width:1379.98px){
  /* Tighten the inter-item air gap so the six triggers + CTA + logo stay on
     one line across the whole narrow-desktop band, down to the 1180px
     hamburger breakpoint. The header uses justify-content:space-between, so
     this is a MINIMUM gap — when the viewport is wider than the row's
     intrinsic width the extra space is redistributed automatically and the
     spacing opens back up. Without this the 1rem gap (x7 ~ 112px of fixed
     spacing) pushed the row past the viewport: ~1248px was needed but the
     desktop nav showed from 1180px, and the >1280 band (0.98rem + full gap)
     needed ~1320px — so "Request Appointment" clipped off the right edge
     anywhere from 1180–1319px. Most visible at 125% zoom, whose effective
     viewport (~1180–1210px) lands inside this band. At 0.9rem + 0.5rem gap
     the row needs ~1165px, fitting from 1180px up with margin to spare. */
  html body.nav-new #site-header .site-header__main{gap:0.5rem !important}
  body.nav-new .nav__trigger{padding:0.5rem 0.28rem !important;font-size:0.9rem !important}
  body.nav-new .btn-appt{padding:0.45rem 0.7rem !important;font-size:0.82rem !important}
}

body.nav-new .brand img,
body.nav-new .brand__logo--full{image-rendering:-webkit-optimize-contrast;transform:translateZ(0)}

@media (min-width:1180px) and (max-width:1379.98px){
  body.nav-new .nav__trigger{padding:0.6rem 0.5rem;font-size:0.9rem}
}

/* ── MOBILE DRAWER (<1180px) ───────────────────────────────────────
   Athena-style accordion drawer. The same nav markup pivots into a
   full-viewport panel that slides down under the header bar; each
   section is a tap-target row; tapping a trigger expands its `.mega`
   inline; cascade sections drill region → procedures inside the
   drawer. Only one section open at a time. */
@media (max-width:1179.98px){
  /* Win against the desktop rule that flattens .site-header__nav--boxed
     via `display: contents` (single ancestor specificity) and against
     production's `#site-header .site-header__nav { position:absolute; top:100% }`
     by matching the same depth + !important everywhere that conflicts. */
  html body.nav-new #site-header .site-header__nav--boxed{display:flex !important;flex-direction:column !important}
  /* Drawer: hidden by default, shown when body has .is-nav-open. Using
     display toggle (not transform) to dodge a cascade conflict where
     a transform/transition on the same selector was sticking at -110%
     even when overridden by !important on the open variant. Drawer
     still slide-fades via opacity instead. */
  /* Drawer: hidden by default, shown when body has .is-nav-open. Using
     display toggle (not transform) to dodge a cascade conflict where
     a transform/transition on the same selector was sticking at -110%
     even when overridden by !important on the open variant. */
  html body.nav-new #site-header #primary-nav{display:none !important;position:fixed !important;top:var(--new-nav-mega-top,80px) !important;left:0 !important;right:0 !important;bottom:0 !important;width:100vw !important;height:auto !important;background:#fff !important;z-index:8500 !important;flex-direction:column !important;justify-content:flex-start !important;align-items:stretch !important;overflow-y:auto !important;overflow-x:hidden !important;padding:0 !important;margin:0 !important;border:0 !important;opacity:1 !important}
  html body.nav-new.is-nav-open #site-header #primary-nav{display:flex !important;animation:nav-drawer-in 240ms cubic-bezier(0.22,0.61,0.36,1) both;min-height:calc(100dvh - var(--new-nav-mega-top,80px)) !important}
  @keyframes nav-drawer-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
  body.nav-new.is-nav-open{overflow:hidden;overscroll-behavior:contain}
  /* T-308: the drawer is the scroll surface; touch-action:none on body blocked
     touch-drag scrolling once content (tall region grid) exceeded the viewport.
     Re-enable vertical pan on the drawer itself. */
  body.nav-new.is-nav-open #primary-nav{touch-action:pan-y !important;-webkit-overflow-scrolling:touch !important;overscroll-behavior:contain !important}
  /* T-314: ONE cohesive scroll surface. T-276 turns every .mega__inner into a
     nested scroll box (max-height + overflow:auto); inside the drawer that traps
     scroll when the pointer is over a panel and makes panels feel like separate
     sections. Kill the inner box in the open drawer — the whole drawer scrolls as
     one, panels flow inline (standard mobile-nav behaviour). */
  body.nav-new.is-nav-open .mega,
  body.nav-new.is-nav-open .mega .mega__inner,
  body.nav-new.is-nav-open .mega .mega__main,
  body.nav-new.is-nav-open .mega .mega__panels,
  body.nav-new.is-nav-open .mega .mega__panel{max-height:none !important;overflow:visible !important;overflow-y:visible !important}
  /* T-192: overflow:hidden on body DISABLES position:sticky, so the moment
     the drawer opened, the header un-stuck and jumped off-screen by the
     scroll distance, leaving the drawer free-floating. While the drawer is
     open, pin the header fixed at the viewport top: header + drawer read as
     one attached unit at any scroll depth. Page behind is frozen + covered. */
  body.nav-new.is-nav-open #site-header{position:fixed !important;top:0 !important;left:0 !important;right:0 !important;z-index:9000 !important}
  body.nav-new #primary-nav .nav__item{display:block !important;width:100%;border-bottom:1px solid rgba(32,48,112,0.08);position:static !important;flex:0 0 auto !important;flex-shrink:0 !important}
  body.nav-new .nav__trigger{display:flex !important;align-items:center !important;justify-content:space-between !important;width:100%;padding:1.1rem 1.25rem !important;font-size:1.4rem !important;font-weight:600 !important;color:#1a2654 !important;background:transparent !important;text-decoration:none !important;min-height:60px;white-space:normal !important}
  body.nav-new .nav__trigger::after{display:none !important}
  body.nav-new .nav__chev{display:inline-block;width:9px;height:9px;border-right:2px solid #6c7593;border-bottom:2px solid #6c7593;transform:rotate(45deg);transition:transform 220ms cubic-bezier(0.22,0.61,0.36,1);flex:0 0 auto;margin-left:0.85rem}
  body.nav-new .nav__item.is-open .nav__chev{transform:rotate(-135deg);border-color:#3F8069}
  body.nav-new .nav__item.is-open > .nav__trigger{color:#2B5E4C !important;background:rgba(63,128,105,0.04) !important}
  body.nav-new .mega{position:static !important;left:auto !important;right:auto !important;width:auto !important;top:auto !important;max-height:0 !important;clip-path:none !important;visibility:visible !important;opacity:1 !important;overflow:hidden !important;transform:none !important;box-shadow:none !important;border-top:0 !important;border-bottom:0 !important;transition:max-height 360ms cubic-bezier(0.22,0.61,0.36,1) !important;background:#f7f8fa !important;pointer-events:auto !important;z-index:auto !important}
  body.nav-new .nav__item.is-open > .mega{max-height:none !important;height:auto !important}
  body.nav-new .mega__inner{display:block !important;padding:0.5rem 1rem 0.75rem !important;max-width:none !important;gap:0 !important;margin:0 !important}
  body.nav-new .mega--cascade .mega__inner{display:block !important;padding:0.5rem 1rem 0.75rem !important;grid-template-columns:none !important}
  body.nav-new .mega--cascade .mega__main{display:block !important;width:auto !important}
  body.nav-new .mega__regions{display:block !important;border:0 !important;padding:0 !important;margin:0 0 0.25rem !important;width:auto !important;justify-content:flex-start !important}
  body.nav-new .mega__region{width:100% !important;padding:0.85rem 0.85rem !important;display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:flex-start !important;gap:0.85rem !important;flex:none !important;border-radius:10px !important;border:1px solid rgba(32,48,112,0.08) !important;margin:0 0 0.4rem !important;background:#fff !important;white-space:normal !important;text-align:left !important}
  body.nav-new .mega__region .ico{width:42px !important;height:42px !important;flex:0 0 42px !important}
  body.nav-new .mega__region-label{font-size:1rem !important;text-align:left !important;flex:1 1 auto}
  body.nav-new .mega__region.is-active{background:rgba(63,128,105,0.10) !important;border-color:rgba(63,128,105,0.30) !important}
  body.nav-new .mega__panels{display:block !important}
  body.nav-new .mega__panel{display:none !important;padding:0.35rem 0.25rem 0.5rem !important}
  body.nav-new .mega__panel.is-active{display:block !important}
  body.nav-new .mega__panel-flow{grid-template-columns:1fr !important;column-gap:0 !important;row-gap:0 !important;padding:0}
  body.nav-new .mega__link{padding:0.7rem 0.6rem 0.7rem 0.95rem !important;border-radius:8px !important;position:relative}
  body.nav-new .mega__link::before{height:48% !important;opacity:0.38 !important}
  body.nav-new .mega__link:active{color:#2B5E4C !important;transform:translateX(0.3rem) !important}
  body.nav-new .mega__link:active::before{height:64% !important;opacity:1 !important}
  body.nav-new .mega__link-title{font-size:1rem !important;margin-bottom:0.1rem}
  body.nav-new .mega__link-sub{font-size:0.84rem !important;line-height:1.4}
  body.nav-new .mega__panel-feature{padding:0.4rem 0.25rem 0.6rem;margin:0 0 0.6rem}
  body.nav-new .mega__feature-title{font-size:1.1rem}
  body.nav-new .mega__col{margin-bottom:0.6rem}
  body.nav-new .mega__col-title{margin-bottom:0.45rem;padding-bottom:0.35rem}
  body.nav-new .mega__viewall{display:inline-block !important;margin-top:0.4rem !important;padding:0.3rem 0 !important}
  body.nav-new .mega__disclaimer{margin:0.5rem 0 0 !important;padding:0.6rem 0 0 !important;flex-direction:column !important;align-items:flex-start !important;gap:0.25rem !important}
  body.nav-new .mega__locations-grid,
  body.nav-new .mega__providers-grid{display:block !important;grid-template-columns:none !important}
  body.nav-new .mega__provider-empty{display:none !important}
  body.nav-new #primary-nav .btn-appt{display:block !important;width:auto !important;margin:1rem 1.25rem 2rem !important;padding:1.05rem 1rem !important;text-align:center;font-size:1.05rem !important;font-weight:700 !important;background:#004020 !important;color:#fff !important;border-radius:10px !important;text-decoration:none !important;box-shadow:0 2px 8px rgba(0,64,32,0.18)}
  /* T-300 (MOCK, homepage only): fill the drawer's bottom void. Pin the Schedule
     CTA + a contact cluster (tap-to-call / hours / quick links) to the bottom of
     the full-height drawer instead of leaving white space. Scoped to .ed-home for
     staging review; broaden the selector + propagate markup sitewide on approval. */
  body.nav-new.ed-home #primary-nav .btn-appt{margin-top:1.25rem !important;margin-bottom:0.85rem !important}
  /* T-312: drawer = CONTENT height (no full-screen stretch); bottom block flows
     right after the menu rows. Removes the empty space above the Schedule/contact
     block and below it. Dimmed page below via the T-299 backdrop. */
  html body.nav-new.ed-home.is-nav-open #site-header #primary-nav{min-height:0 !important;height:auto !important;bottom:auto !important;max-height:calc(100dvh - var(--new-nav-mega-top,80px)) !important}
  /* T-313: tighten expanded-dropdown entry spacing — pack items, cut the empty
     gaps between provider/link entries. */
  body.nav-new.ed-home .mega--providers .mega__inner{padding:0.2rem 1rem 0.4rem !important}
  body.nav-new.ed-home .mega__provider{padding:0.4rem 0.55rem !important}
  body.nav-new.ed-home .mega__provider .mega__link-sub{line-height:1.3 !important;margin-top:0.08rem !important}
  body.nav-new.ed-home .mega__link{padding:0.4rem 0.6rem !important}
  body.nav-new.ed-home .mega__col{margin-bottom:0.3rem !important}
  body.nav-new.ed-home #primary-nav .nav-contact{display:block !important;width:100% !important;box-sizing:border-box;padding:1.15rem 1.25rem 1.6rem !important;border-top:1px solid rgba(32,48,112,0.10);background:rgba(32,48,112,0.03);text-align:center}
  body.nav-new.ed-home #primary-nav .nav-contact__call{display:flex !important;flex-direction:column;align-items:center;gap:0.12rem;text-decoration:none;min-height:0}
  body.nav-new.ed-home #primary-nav .nav-contact__call-eyebrow{font-size:0.72rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:rgba(32,48,112,0.55)}
  body.nav-new.ed-home #primary-nav .nav-contact__call-num{font-size:1.5rem;font-weight:700;color:#203070;letter-spacing:0.01em}
  body.nav-new.ed-home #primary-nav .nav-contact__hours{margin:0.55rem 0 0 !important;font-size:0.9rem;color:rgba(32,48,112,0.7)}
  body.nav-new.ed-home #primary-nav .nav-contact__links{margin-top:0.65rem;font-size:0.9rem;display:flex;justify-content:center;align-items:center;gap:0.55rem}
  body.nav-new.ed-home #primary-nav .nav-contact__links a{color:#2B5E4C;font-weight:600;text-decoration:none}
  body.nav-new.ed-home #primary-nav .nav-contact__links span{color:rgba(32,48,112,0.3)}
  /* T-301 (MOCK, homepage): kill the green "glow box" over region icons.
     Active = label color + icon lift only, no filled background box / border. */
  body.nav-new.ed-home .mega__region,
  body.nav-new.ed-home .mega__region.is-active{background:transparent !important;border-color:transparent !important;border-left-color:transparent !important;box-shadow:none !important}
  body.nav-new.ed-home .mega__region.is-active{color:#2B5E4C !important;font-weight:700 !important}
  body.nav-new.ed-home .mega__region.is-active .mega__region-label{text-decoration:underline;text-decoration-color:rgba(63,128,105,0.5);text-underline-offset:4px}
  /* T-302 (MOCK, homepage): cascade = 2-col region grid -> drill into one
     region's conditions with a back bar. Mobile + .ed-home only. */
  body.nav-new.ed-home .mega--cascade .mega__regions{display:grid !important;grid-template-columns:1fr 1fr 1fr !important;gap:0.35rem !important;margin:0 !important;padding:0.25rem 0 0.4rem !important}
  body.nav-new.ed-home .mega--cascade .mega__region{width:auto !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;text-align:center !important;gap:0.35rem !important;padding:0.7rem 0.2rem !important;min-height:120px !important;background:transparent !important;border:0 !important;border-radius:0 !important;transition:transform 160ms ease,color 140ms ease !important}
  body.nav-new.ed-home .mega--cascade .mega__region .ico{width:82px !important;height:82px !important;flex:0 0 82px !important;opacity:0.95;transition:transform 160ms ease,opacity 160ms ease !important}
  body.nav-new.ed-home .mega--cascade .mega__region-label{font-size:1rem !important;font-weight:600 !important;text-align:center !important;line-height:1.15}
  /* press = desktop hover tech (icon lifts + scales, label greens); NO colored box */
  body.nav-new.ed-home .mega--cascade .mega__region:active .ico{opacity:1 !important;transform:translateY(-2px) scale(1.07) !important}
  body.nav-new.ed-home .mega--cascade .mega__region:active .mega__region-label{color:#2B5E4C !important}
  /* grid view: hide panels + back bar */
  body.nav-new.ed-home .mega--cascade .mega__panels{display:none !important}
  body.nav-new.ed-home .mega--cascade .mega__back{display:none}
  /* drilled view: hide grid, show active panel + back bar */
  body.nav-new.ed-home .mega--cascade.is-drilled .mega__regions{display:none !important}
  body.nav-new.ed-home .mega--cascade.is-drilled .mega__panels{display:block !important}
  body.nav-new.ed-home .mega--cascade.is-drilled .mega__back{display:flex !important;align-items:center;gap:0.4rem;width:100%;padding:0.55rem 0.25rem 0.7rem;margin:0 0 0.5rem;border:0;border-bottom:1px solid rgba(32,48,112,0.10);background:transparent;color:#2B5E4C;font-weight:700;font-size:0.95rem;cursor:pointer;font-family:inherit;text-align:left}
  body.nav-new.ed-home .mega--cascade.is-drilled .mega__back::before{content:'\2190';font-size:1.15rem;line-height:1}
  /* T-311: kill the gray fill in expanded mobile dropdowns. Panels read white
     (part of the drawer) instead of a gray block = removes the empty gray space.
     Tighten panel padding so content packs without dead space. */
  body.nav-new.ed-home .mega{background:#fff !important}
  body.nav-new.ed-home #primary-nav .nav-contact{background:#fff !important}
  body.nav-new.ed-home .mega__inner,
  body.nav-new.ed-home .mega--cascade .mega__inner{padding:0.15rem 1rem 0.5rem !important}
  body.nav-new .nav-toggle{display:inline-flex !important;align-items:center;justify-content:center;width:44px;height:44px;background:transparent;border:0;cursor:pointer;z-index:9001;position:relative}
  body.nav-new.is-nav-open .nav-toggle__bars{background:transparent}
  body.nav-new.is-nav-open .nav-toggle__bars::before{top:0;transform:rotate(45deg)}
  body.nav-new.is-nav-open .nav-toggle__bars::after{top:0;transform:rotate(-45deg)}
}

/* T-276: tall dropdown panels must never run off-screen — cap to viewport
   and scroll inside. 150px ≈ utility bar + header above the open mega. */
body.nav-new .mega .mega__inner {
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ── Dropdown typography: Newsreader serif (2026-06-17) ──────────────
   Self-host the font here so it is available on every page the nav
   renders on (the existing @font-face lives in editorial.css /
   provider.css, which are NOT loaded sitewide). Applied DESKTOP-ONLY
   via @media (min-width:1180px) so the mobile drawer keeps its current
   font until the mobile pass. `body.nav-new .mega *` ties the explicit
   var(--font-display) rules on .mega__feature-title / .mega__rail-title
   and wins by source order. */
@font-face{font-family:"Newsreader";src:url("fonts/Newsreader-normal-latin.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("fonts/Newsreader-italic-latin.woff2") format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
/* EB Garamond display face (2026-06-20, per Sam): self-hosted here so it is
   available sitewide (same reason as Newsreader above). Drives the homepage
   hero title and the provider-page name. Variable, weights 400-800. */
@font-face{font-family:"EB Garamond";src:url("fonts/EBGaramond-normal-latin.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url("fonts/EBGaramond-italic-latin.woff2") format("woff2");font-weight:400 800;font-style:italic;font-display:swap}
@media (min-width:1180px){
  body.nav-new .nav__trigger,
  body.nav-new .btn-appt,
  body.nav-new .mega,
  body.nav-new .mega *{
    font-family:"Newsreader", Georgia, "Times New Roman", serif;
  }
  /* Clear the Inter-specific optical-size pin so Newsreader uses
     automatic optical sizing for the triggers. */
  body.nav-new .nav__trigger{font-variation-settings:normal}
}