/* OSINB next-gen trial — experimental layer on top of base styles */

/* Legacy "image-free default" block removed. Condition and procedure
   pages now show real provider photos, facility photos, and anatomy
   figures — the initials-only fallback was a holdover from an earlier
   design iteration and looked broken against the rest of the site. */


/* Logo spans BOTH rows (utility bar + main bar), pulled up so it overlaps
   the utility row and reads as the dominant element. */
.site-header__main {
  position: relative !important;
  overflow: visible !important;
  min-height: 0 !important;
  gap: 0.75rem !important;
  justify-content: space-between !important;         /* brand left-pinned, nav right-pinned, no dead space */
}
.site-header__nav {
  margin-left: auto !important;                       /* push nav hard to the right */
  justify-content: flex-end !important;
}
.site-header .brand {
  position: relative !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  z-index: 10;
  box-sizing: border-box;
}
/* Scroll-shrink: two clear states.
   Rest: tall hero bar with utility strip + big logo (84px).
   Scrolled: utility strip hidden, logo collapses to 40px, main-bar padding tight. */
html body .site-header .brand {
  height: auto !important;
  align-items: center;
  padding: 0 !important;
  margin: 0 !important;
}
html body .site-header img.brand__logo {
  height: 84px !important;
  max-height: 84px !important;
  width: auto !important;
  display: block !important;
  filter: none !important;
  box-shadow: none !important;
  background: transparent !important;
  /* Blend any near-white export padding in the PNG into the cream header
     so no beige box/halo shows around the mark. */
  mix-blend-mode: multiply;
  transition: height 260ms var(--ease), max-height 260ms var(--ease);
}
html body .site-header.is-scrolled img.brand__logo {
  /* 40% larger than prior 40px scrolled height. */
  height: 56px !important;
  max-height: 56px !important;
}

/* When scrolled, the wordmark collapses and the shrunken mark is left flush
   to the gutter — visually stranded on the left. Nudge the whole brand block
   rightward so the mark sits with roughly equal whitespace on either side
   of the compact header. Tunable via --brand-scrolled-shift. */
:root { --brand-scrolled-shift: 14px; }
html body .site-header .brand {
  transition: transform 260ms var(--ease);
  will-change: transform;
}
html body .site-header.is-scrolled .brand {
  transform: translateX(var(--brand-scrolled-shift));
}

/* When the logo shrinks, the wordmark collapses and ~280px of width opens up.
   Let the nav breathe into that space — widen the padding around each nav-box
   and push the Request-Appointment button slightly outward. This reads as
   "items redistribute" rather than a dead gap in the middle of the bar. */
html body .site-header__nav--boxed .nav-box {
  transition: padding 260ms var(--ease);
}
html body .site-header.is-scrolled .site-header__nav--boxed .nav-box {
  padding: 0 1.15rem !important;
}
html body .site-header .btn-appt {
  transition: margin 260ms var(--ease), padding 220ms var(--ease);
}
html body .site-header.is-scrolled .btn-appt {
  margin-left: 0.6rem !important;
}

/* Nav slides LEFT on scroll to close the gap left by the collapsing wordmark.
   Subtle shift only — enough to absorb the visible dead space without
   colliding with the brand mark. Disabled below the drawer breakpoint. */
:root {
  --nav-scrolled-shift: clamp(24px, 5vw, 80px);
}
html body .site-header .site-header__nav {
  transition: transform 360ms var(--ease);
  will-change: transform;
}
@media (min-width: 1100px) {
  html body .site-header.is-scrolled .site-header__nav {
    transform: translateX(calc(var(--nav-scrolled-shift) * -1));
  }
}

/* Main bar padding collapses on scroll */
html body .site-header:not(.is-scrolled) .site-header__main {
  padding-top: 0.55rem !important;
  padding-bottom: 0.55rem !important;
  transition: padding 240ms var(--ease);
}
html body .site-header.is-scrolled .site-header__main {
  padding-top: 0.3rem !important;
  padding-bottom: 0.3rem !important;
  transition: padding 240ms var(--ease);
  /* No shadow / border — the header must blend seamlessly with the page.
     The previous 1px shadow + beige hairline combined to look like an
     uneven beige halo around the logo. */
  box-shadow: none !important;
  border-bottom: 0 !important;
}
/* Kill the beige hairline border on the header in ALL states. */
html body .site-header,
html body .site-header .site-header__main {
  border-bottom: 0 !important;
}
html body .site-header.is-scrolled {
  border-bottom-color: transparent !important;
}

/* Full header at rest; scrolled → minimal (utility + mega + Pay/Insurance/Forms hide). */
html body .site-header__utility {
  overflow: hidden !important;
  max-height: 60px !important;
  transition: max-height 240ms var(--ease), padding 240ms var(--ease) !important;
}
html body .site-header.is-scrolled .site-header__utility {
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: 0 !important;
}
/* Nav items remain visible in the scrolled (compact) header state —
   only the utility row and logo wordmark collapse. */
/* Kill any faint line that might appear at the bottom of the logo image. */
html body .site-header .brand,
html body .site-header .brand__logo {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Brand wordmark lockup: big O/S/I initials spell the name at rest; hides on scroll.
   The mark image sits to the left and visually rhymes with the large initials. */
.site-header .brand {
  display: flex !important;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
}
/* Wordmark: three lines where the text continues from the mark's O, S, I.
   Lines align vertically to match the approximate O (top), S (middle), I (bottom)
   positions in the mark. Tight to the mark — the letters ARE the first char. */
.site-header .brand { gap: 0 !important; align-items: stretch !important; }
html body .site-header .brand__logo { margin: 0 !important; padding: 0 !important; }
.brand__wordmark {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: var(--font-display);
  color: var(--navy);
  padding: 0;
  margin-left: -6px;                  /* overlap the mark's transparent edge so letters touch */
  white-space: nowrap;
  transform: translate(var(--logo-wordmark-shift-x, 0), var(--logo-wordmark-shift, 0));
}
.brand__wordmark-line {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--navy);
}
/* Stagger each line to follow the diagonal of the O/S/I inside the tree mark.
   The values are proportional to the *measured* centroids of the three
   letterforms in OSI_new_mark.png (O=39%, S=53%, I=79% across the mark's
   width). The three --logo-stagger-* vars let this be fine-tuned without
   hunting through source. */
:root {
  --logo-stagger-o: 0em;
  --logo-stagger-s: 0.32em;
  --logo-stagger-i: 0.64em;
  /* Push the whole wordmark block vertically. Percentage is relative to
     the wordmark's own height, which tracks the logo height. */
  --logo-wordmark-shift: 5%;
  /* Shift the whole wordmark block horizontally. Negative = left,
     positive = right. Percentage is relative to the wordmark's own width. */
  --logo-wordmark-shift-x: 0%;
}
.brand__wordmark-line--o { padding-left: var(--logo-stagger-o); }
.brand__wordmark-line--s { padding-left: var(--logo-stagger-s); }
.brand__wordmark-line--i { padding-left: var(--logo-stagger-i); }
.brand__wordmark-line--place { padding-left: var(--logo-stagger-i); }
/* "of New Braunfels" caption — small italic, muted, tucked under "Institute". */
.brand__wordmark-line--place {
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  font-style: italic;
  color: var(--text-muted) !important;
  letter-spacing: 0;
  margin-top: 2px;
}
/* The "O" line aligns to the top of the mark, "S" to middle, "I" to bottom.
   justify-content: space-between on the column handles the vertical distribution. */

/* Initials inherit (no longer separately styled). */
.brand__initial { font: inherit; color: inherit; }
/* Mark shows at all states. Wordmark spells "Orthopedic & Sports Medicine Institute"
   next to it at rest (flat typography, no emphasized initials so it doesn't re-read
   as a second "OSI"). Wordmark hides on scroll. */
html body .site-header.is-scrolled .brand__wordmark {
  display: none !important;
}
/* Mobile: keep the wordmark readable — collapse to a single tight line and
   drop the italic "of New Braunfels" since the header is already brand-marked.
   Hiding it entirely left the phone-width header reading as just an icon,
   which was indistinguishable from the favicon and cropped the identity. */
@media (max-width: 820px) {
  .brand__wordmark {
    display: flex;
    gap: 0;
  }
  .brand__wordmark-line {
    font-size: 0.95rem;
    line-height: 1.05;
    font-weight: 600;
  }
  .brand__wordmark-line--place {
    font-size: 0.72rem !important;
    margin-top: 1px;
  }
}
@media (max-width: 480px) {
  .brand__wordmark-line { font-size: 0.82rem; }
  .brand__wordmark-line--place { font-size: 0.62rem !important; }
}
/* Main bar padding also collapses on scroll. */
.site-header__main {
  transition: padding 220ms var(--ease) !important;
}
.site-header:not(.is-scrolled) .site-header__main {
  padding-top: 1.1rem !important;
  padding-bottom: 1.1rem !important;
}
.site-header.is-scrolled .site-header__main {
  padding-top: 0.4rem !important;
  padding-bottom: 0.4rem !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
/* Utility strip compresses on scroll too. */
.site-header__utility {
  transition: padding 220ms var(--ease), max-height 220ms var(--ease), opacity 220ms var(--ease) !important;
  overflow: hidden;
}
.site-header.is-scrolled .site-header__utility {
  padding-top: 0.18rem !important;
  padding-bottom: 0.18rem !important;
}
.site-header.is-scrolled .site-header__utility a { font-size: 0.72rem !important; }
@media (max-width: 699px) {
  .site-header .brand { top: 0 !important; height: auto !important; }
  .site-header__nav { margin-left: 0 !important; }
}

/* Utility bar — phone first (prominent), then portal & locations,
   then search pushed right. Single line; nowrap on desktop. */
.site-header__utility-inner {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 1.2rem !important;
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
  min-height: 38px !important;
}
/* Phone is the headline element of the utility bar. */
.site-header__utility-inner > a[href^="tel:"] {
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.01em !important;
  color: #fff !important;
  opacity: 1 !important;
  margin-right: auto !important;     /* pushes everything else to the right */
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
}
.site-header__utility a { color: #fff !important; opacity: 0.9; }
.site-header__utility a:hover { color: #fff !important; opacity: 1; }
.site-header__utility-inner > a[href^="tel:"]::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.18 4.18 2 2 0 0 1 4.16 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.18 4.18 2 2 0 0 1 4.16 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 699px) {
  /* Mobile utility bar: keep ONLY the phone visible — it's the most important
     link on the page. Patient Portal and Locations live in the hamburger menu
     (primary nav) so we don't cram four items into a 375px row. */
  .site-header__utility-inner {
    flex-wrap: nowrap !important;
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
    gap: 0.5rem !important;
    justify-content: space-between !important;
  }
  .site-header__utility-inner > a[href^="tel:"] {
    margin-right: 0 !important;
    font-size: 0.9rem !important;
  }
  /* Hide Patient Portal + Locations text links — reachable via hamburger */
  .site-header__utility-inner > a:not([href^="tel:"]) {
    display: none !important;
  }
  /* Keep the search pill, but make it a tight icon-only square */
  .site-header__utility-inner .util-search {
    margin-left: 0 !important;
    flex: 0 0 auto !important;
    padding: 5px 10px !important;
  }
}

/* Forgiving dropdown — wide invisible bridge + long close delay.
   The bridge sits above the menu and below the trigger so the cursor never
   falls off into "not hovering" state during the diagonal move from trigger
   to a far item. The close delay gives the user extra time to come back if
   they overshoot or want to read. */
.site-header__nav--boxed .nav-menu::before {
  top: -22px !important;
  height: 22px !important;
  left: -10px !important;
  right: -10px !important;
}
/* Side/bottom "halo" around the menu — kept tiny and behind the items so
   it doesn't intercept hover. Previously this pseudo had z-index:999 +
   pointer-events:auto, which made it sit OVER every menu item and swallow
   every mouseover — users saw the menu open but couldn't hover any word
   inside it. Now it sits behind the menu (z-index:-1) and doesn't hit-test
   (pointer-events:none); the 240ms close delay (CLOSE_DELAY_TOP in JS)
   provides the cursor-wandering grace we need. */
.site-header__nav--boxed .nav-menu::after {
  content: '';
  position: absolute;
  top: 0;
  left: -14px;
  right: -14px;
  bottom: -14px;
  pointer-events: none;
  z-index: -1;
}
/* Closing: 250ms grace period before disappearing — forgiving but not sluggish. */
.site-header__nav--boxed .nav-box--has-menu .nav-menu {
  transition: opacity 0.22s 0.25s, transform 0.22s 0.25s, visibility 0s 0.47s !important;
}
/* Opening: appear immediately. Hover-trigger intentionally removed —
   the JS engine (setupNavEngine) adds .is-open after 80ms of hover
   intent, which prevents flicker as the cursor traverses the nav bar
   and guarantees clicks never race against a half-open menu. */
.site-header__nav--boxed .nav-box--has-menu:focus-within .nav-menu,
.site-header__nav--boxed .nav-box--has-menu.is-open .nav-menu {
  transition: opacity 0.12s, transform 0.12s, visibility linear !important;
}
/* Sub-menus: same 250ms grace period */
.nav-menu .nav-submenu {
  transition: opacity 0.22s 0.25s, visibility 0s 0.47s !important;
}
.nav-menu .nav-sub:hover > .nav-submenu,
.nav-menu .nav-sub:focus-within > .nav-submenu {
  transition: opacity 0.12s, visibility linear !important;
}

/* ---------- Flagship tag inside the Locations dropdown ---------- */
.site-header__nav--boxed .nav-menu a.nav-menu__item--flagship {
  font-weight: 700;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.site-header__nav--boxed .nav-menu__flagship-tag {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a7f6b;
  background: #f4efe5;
  padding: 0.15rem 0.45rem;
  border-radius: 2px;
  flex-shrink: 0;
}
.site-header__nav--boxed .nav-menu a.nav-menu__item--flagship:hover
  .nav-menu__flagship-tag {
  color: #5a5040;
  background: #ebe2d0;
}

/* ---------- Mega-menu (full conditions / procedures listing) ----------
   Default: the WIDE mega (1080px 4-col grid) is still centered on the nav
   because it's the widest panel. But in practice the JS converts every
   mega to the 260px cascade (.nav-menu--mega-cascade), and the cascade
   anchors to the TRIGGER's left edge — see the cascade section below.
   So the centered rule is a fallback for no-JS/pre-convert paint only. */
.site-header__nav--boxed .nav-box--mega { position: static; }
/* When JS flips mega to cascade it also adds .nav-box--mega--cascade on
   the parent. That promotes the box to a positioning context so the
   cascade menu's `left: 0` resolves to the trigger (not the full nav). */
.site-header__nav--boxed .nav-box--mega--cascade { position: relative !important; }

.site-header__nav--boxed .nav-menu--mega {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  right: auto !important;
  width: min(1080px, calc(100vw - 2rem));
  max-height: 78vh;
  overflow-y: auto;
  transform: translateX(-50%) translateY(6px);
  padding: 0.6rem 1.1rem 1.1rem;
  display: block;
}
.site-header__nav--boxed .nav-menu--mega .nav-mega__grid {
  column-count: 4;
  column-gap: 1.25rem;
  column-fill: balance;
}
.site-header__nav--boxed .nav-menu--mega .nav-mega__grid .nav-mega__group {
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  display: block;
  margin-bottom: 0.55rem;
}
.site-header__nav--boxed .nav-box--has-menu.nav-box--mega:focus-within .nav-menu--mega,
.site-header__nav--boxed .nav-box--has-menu.nav-box--mega.is-open .nav-menu--mega {
  transform: translateX(-50%) translateY(0);
}

/* Quick-jump row at the top of each mega-menu */
.site-header__nav--boxed .nav-menu--mega .nav-mega__quickjump {
  padding: 0.45rem 0.5rem 0.55rem;
  border-bottom: 1px solid #e4ddd1;
  margin-bottom: 0.55rem;
  font-size: 0.78rem;
  color: #4a4a4a;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.site-header__nav--boxed .nav-menu--mega .nav-mega__quickjump-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #8a7f6b;
  margin-right: 0.4rem;
}
.site-header__nav--boxed .nav-menu--mega .nav-mega__quickjump a {
  display: inline !important;
  padding: 0 !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: #1f4ea5 !important;
  text-decoration: none;
  white-space: nowrap;
}
.site-header__nav--boxed .nav-menu--mega .nav-mega__quickjump a:hover {
  text-decoration: underline;
  background: transparent !important;
}

/* Orthopaedic category sub-heading inside each procedure column */
.site-header__nav--boxed .nav-menu--mega .nav-mega__cat {
  display: flex;
  flex-direction: column;
  margin-top: 0.35rem;
}
.site-header__nav--boxed .nav-menu--mega .nav-mega__cat-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #8a7f6b;
  padding: 0.15rem 0.5rem 0.1rem;
}
.site-header__nav--boxed .nav-menu--mega .nav-mega__group {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-bottom: 0.3rem;
}
.site-header__nav--boxed .nav-menu--mega .nav-mega__label {
  font-family: "Source Serif Pro", Georgia, serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #13243b;
  padding: 0.3rem 0.5rem 0.35rem;
  border-bottom: 1px solid #e4ddd1;
  margin-bottom: 0.2rem;
  text-transform: none;
  text-decoration: none;
}
.site-header__nav--boxed .nav-menu--mega .nav-mega__label:hover {
  color: #1f4ea5;
  background: transparent;
}
.site-header__nav--boxed .nav-menu--mega a {
  padding: 0.22rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  white-space: normal;
}
.site-header__nav--boxed .nav-menu--mega .nav-mega__empty {
  padding: 0.22rem 0.5rem;
  font-size: 0.74rem;
  font-style: italic;
  color: #8a7f6b;
}
.site-header__nav--boxed .nav-menu--mega .nav-mega__footer {
  display: block;
  margin-top: 0.4rem;
  padding: 0.55rem 0.6rem;
  border-top: 1px solid #e4ddd1;
  font-size: 0.82rem;
  font-weight: 600;
  color: #1f4ea5;
  text-decoration: none;
}
.site-header__nav--boxed .nav-menu--mega .nav-mega__footer:hover {
  background: #f4efe5;
}

/* ---------- Mega cascade: narrow region list + per-region flyout ----------
   Applied by convertMegaToCascade() in nextgen.js. Overrides the wide
   4-column mega so hover opens only a compact 260px column; each region
   reveals its conditions in a side panel on hover/focus.
   Anchors to the trigger's LEFT edge (not centered on the trigger midline)
   because JS promotes .nav-box--mega to .nav-box--mega--cascade which is
   position:relative. If anchoring left would push the whole menu off the
   right edge of the viewport, JS adds .nav-menu--mega-cascade--flip-right
   so the menu right-aligns to the trigger instead. */
.site-header__nav--boxed .nav-menu--mega-cascade {
  width: 260px !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0.5rem !important;
  left: 0 !important;
  right: auto !important;
  transform: translateY(6px) !important;
}
.site-header__nav--boxed .nav-box--has-menu.nav-box--mega:focus-within .nav-menu--mega-cascade,
.site-header__nav--boxed .nav-box--has-menu.nav-box--mega.is-open .nav-menu--mega-cascade {
  transform: translateY(0) !important;
}
/* Right-edge trigger: pin cascade menu to the trigger's right edge so it
   stays inside the viewport. */
.site-header__nav--boxed .nav-menu--mega-cascade.nav-menu--mega-cascade--flip-right {
  left: auto !important;
  right: 0 !important;
}
.site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__grid {
  column-count: initial !important;
  display: flex !important;
  flex-direction: column;
  gap: 0;
}
/* Group is position:relative so the flyout anchors to the TRIGGER ROW
   (not the top of the menu). JS adjusts individual rows near the
   bottom with .nav-mega__group--anchor-bottom so the flyout opens
   upward instead of clipping off the bottom of the viewport. */
.site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__group {
  position: relative;
  display: block;
  padding: 0;
  margin: 0;
  break-inside: auto;
}
.site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-bottom: 0;
  margin-bottom: 0;
  border-radius: 3px;
  font-family: "Source Serif Pro", Georgia, serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: #13243b;
  text-decoration: none;
  letter-spacing: 0;
}
.site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__label::after {
  content: "\203A";
  color: #8a7f6b;
  font-size: 1rem;
  margin-left: 0.5rem;
  line-height: 1;
}
.site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__group:hover > .nav-mega__label,
.site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__group:focus-within > .nav-mega__label {
  background: #f4efe5;
  color: #1f4ea5;
}
.site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__flyout {
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 380px;
  max-width: 560px;
  background: #fff;
  border: 1px solid #e4ddd1;
  border-radius: 4px;
  box-shadow: 0 12px 32px rgba(11, 42, 74, 0.12);
  padding: 0.65rem 0.75rem;
  display: none;
  /* Cap height to viewport below the nav. Scrolls internally if a
     region is tall enough to overflow. */
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  column-count: 2;
  column-gap: 1rem;
  margin-left: 0;
  z-index: 2;
}
/* For rows near the bottom of the menu, JS adds .anchor-bottom so the
   flyout opens upward (bottom-aligned) rather than clipping off the
   bottom of the viewport. Scoped away from the v2 engine, which uses
   --flyout-top + positionFlyout() clamping instead. */
:not(html[data-nav-engine="ready"]) .site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__group--anchor-bottom > .nav-mega__flyout,
html:not([data-nav-engine="ready"]) .site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__group--anchor-bottom > .nav-mega__flyout {
  top: auto;
  bottom: 0;
}
/* RULE: dropdowns can only open to the RIGHT of their previous level.
   Flyouts never flip left. If the flyout would overflow the viewport
   right edge, we cap its width instead (see .nav-mega__flyout below). */
.site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__flyout {
  left: 100% !important;
  right: auto !important;
}
/* Invisible bridge: covers the vertical space between any row and the
   top of the flyout so the cursor never drops off while sliding down
   the row list into the panel content. */
.site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__flyout::before {
  content: "";
  position: absolute;
  top: -12px;
  left: -12px;
  right: -4px;
  height: 14px;
  background: transparent;
  pointer-events: auto;
}
.site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__group:hover > .nav-mega__flyout,
.site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__group:focus-within > .nav-mega__flyout {
  display: block;
}
/* When JS hover-intent is active, disable the immediate :hover show and use
   an is-active class that JS toggles with a small delay. This prevents the
   flyout from flipping to a different row mid-travel when the cursor passes
   over other rows on its way to the current flyout. */
.site-header__nav--boxed .nav-menu--mega-cascade.hover-intent-on .nav-mega__group:hover > .nav-mega__flyout,
.site-header__nav--boxed .nav-menu--mega-cascade.hover-intent-on .nav-mega__group:focus-within > .nav-mega__flyout {
  display: none;
}
.site-header__nav--boxed .nav-menu--mega-cascade.hover-intent-on .nav-mega__group.is-active > .nav-mega__flyout {
  display: block;
}
.site-header__nav--boxed .nav-menu--mega-cascade.hover-intent-on .nav-mega__group:hover > .nav-mega__label,
.site-header__nav--boxed .nav-menu--mega-cascade.hover-intent-on .nav-mega__group:focus-within > .nav-mega__label {
  background: transparent;
  color: inherit;
}
.site-header__nav--boxed .nav-menu--mega-cascade.hover-intent-on .nav-mega__group.is-active > .nav-mega__label {
  background: #f4efe5;
  color: #1f4ea5;
}
.site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__flyout a {
  break-inside: avoid;
  display: block;
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #13243b;
  text-decoration: none;
  border-radius: 2px;
  line-height: 1.35;
  white-space: normal;
}
.site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__flyout a:hover {
  background: #f4efe5;
  color: #1f4ea5;
}
.site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__flyout .nav-mega__empty {
  padding: 0.3rem 0.5rem;
  font-size: 0.78rem;
  font-style: italic;
  color: #8a7f6b;
  column-span: all;
}
.site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__footer {
  margin-top: 0.3rem;
  padding: 0.5rem 0.75rem;
}
/* Narrow viewports: fall back to a stacked list (no flyout) so it
   doesn't overflow. The cascade's flyout is a desktop affordance. */
@media (max-width: 900px) {
  .site-header__nav--boxed .nav-menu--mega-cascade { width: auto !important; }
  .site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__flyout {
    position: static;
    display: block !important;
    box-shadow: none;
    border: 0;
    padding: 0 0 0 0.5rem;
    column-count: 1;
    background: transparent;
    margin-left: 0;
  }
  .site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__label::after { display: none; }
}
@media (max-width: 900px) {
  .site-header__nav--boxed .nav-menu--mega {
    width: min(720px, calc(100vw - 1rem));
  }
  .site-header__nav--boxed .nav-menu--mega .nav-mega__grid {
    column-count: 2;
  }
}
@media (max-width: 699px) {
  /* Mobile drawer: mega-menu flows inline as a flat indented list,
     matching the non-mega dropdowns. Single column, no fixed width,
     themed against the dark drawer background. */
  .site-header__nav--boxed .nav-menu--mega {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0.25rem 0 0.5rem !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .site-header__nav--boxed .nav-menu--mega .nav-mega__grid {
    column-count: 1;
  }
  .site-header__nav--boxed .nav-menu--mega .nav-mega__label {
    color: rgba(255,255,255,0.92) !important;
    border-bottom-color: rgba(255,255,255,0.18) !important;
    padding: 0.55rem 0.6rem 0.4rem !important;
    font-size: 0.92rem !important;
  }
  .site-header__nav--boxed .nav-menu--mega a {
    color: rgba(255,255,255,0.82) !important;
    padding: 0.4rem 0.9rem !important;
    font-size: 0.85rem !important;
  }
  .site-header__nav--boxed .nav-menu--mega .nav-mega__cat-label {
    color: rgba(255,255,255,0.55) !important;
    padding: 0.35rem 0.6rem 0.1rem !important;
  }
  .site-header__nav--boxed .nav-menu--mega .nav-mega__empty {
    color: rgba(255,255,255,0.45) !important;
  }
  /* Quick-jump row — becomes a wrapped chip row at the top */
  .site-header__nav--boxed .nav-menu--mega .nav-mega__quickjump {
    color: rgba(255,255,255,0.8) !important;
    border-bottom-color: rgba(255,255,255,0.15) !important;
    padding: 0.5rem 0.6rem 0.65rem !important;
    margin-bottom: 0.3rem !important;
  }
  .site-header__nav--boxed .nav-menu--mega .nav-mega__quickjump-label {
    color: rgba(255,255,255,0.55) !important;
    display: block;
    margin-bottom: 0.3rem;
  }
  .site-header__nav--boxed .nav-menu--mega .nav-mega__quickjump a {
    color: #fff !important;
    background: rgba(255,255,255,0.08);
    padding: 0.3rem 0.55rem !important;
    margin: 0.15rem 0.25rem 0.15rem 0;
    border-radius: 4px;
    font-size: 0.78rem !important;
  }
  .site-header__nav--boxed .nav-menu--mega .nav-mega__quickjump a:hover {
    background: rgba(255,255,255,0.18) !important;
    text-decoration: none;
  }
  .site-header__nav--boxed .nav-menu--mega .nav-mega__footer {
    grid-column: auto;
    color: rgba(255,255,255,0.9) !important;
    border-top-color: rgba(255,255,255,0.18);
  }
  /* Flagship tag — repaint for the dark drawer */
  .site-header__nav--boxed .nav-menu__flagship-tag {
    color: #fff !important;
    background: rgba(255,255,255,0.15) !important;
  }
}

/* Wide dropdown — two-column group layout for "What we treat" */
.site-header__nav--boxed .nav-menu--wide {
  min-width: 360px;
  padding: 0.6rem 0.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}
.site-header__nav--boxed .nav-menu--wide .nav-group {
  flex: 1 1 150px;
  min-width: 0;
  padding: 0 0.35rem;
}
.site-header__nav--boxed .nav-menu--wide .nav-group__label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #8a7f6b;
  padding: 0.45rem 0.6rem 0.3rem;
  border-bottom: 1px solid #e4ddd1;
  margin-bottom: 0.25rem;
}
.site-header__nav--boxed .nav-menu--wide a {
  padding: 0.4rem 0.6rem;
  font-size: 0.82rem;
}
@media (max-width: 699px) {
  .site-header__nav--boxed .nav-menu--wide {
    flex-direction: column;
    min-width: 0;
  }
  .site-header__nav--boxed .nav-menu--wide .nav-group__label {
    color: rgba(255,255,255,0.6);
    border-bottom-color: rgba(255,255,255,0.15);
  }
}

/* Nested Conditions submenu */
.nav-menu .nav-sub { position: relative; }
.nav-menu .nav-sub__label {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
}
.nav-menu .nav-sub__caret { opacity: 0.7; font-size: 0.85em; }
.nav-menu .nav-submenu {
  position: absolute; top: 0; left: 100%;
  min-width: 260px; max-height: 70vh; overflow-y: auto;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  border-radius: 8px;
  padding: 0.4rem 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 1000;
}
.nav-menu .nav-sub:hover > .nav-submenu,
.nav-menu .nav-sub:focus-within > .nav-submenu {
  opacity: 1; visibility: visible; pointer-events: auto;
}
.nav-menu .nav-submenu a {
  display: block;
  padding: 0.5rem 1rem;
  color: #0f2a44;
  text-decoration: none;
  font-size: 0.92rem;
  white-space: nowrap;
}
.nav-menu .nav-submenu a:hover { background: #f4efe5; }
@media (max-width: 699px) {
  .nav-menu .nav-submenu {
    position: static; box-shadow: none; border-radius: 0;
    opacity: 1; visibility: visible; pointer-events: auto;
    padding-left: 1rem; max-height: none;
  }
}

/* ---------- 0. Tighter bar, bigger logo ---------- */
:root {
  --logo-h: 128px;
  --header-pad: 0rem;
}
@media (max-width: 699px) {
  :root { --logo-h: 92px; --header-pad: 0rem; }
}
.brand { padding: 0 !important; margin: 0; }
.site-header__main { padding-top: 0 !important; padding-bottom: 0 !important; }
.ng-banner { display: none !important; }
.site-header__utility { padding-top: 0.6rem !important; padding-bottom: 0.6rem !important; }
.site-header__utility a { font-size: 0.78rem; }

/* ---------- 0a. Bar — flat paper fill with hairline border. z-index kept
   above Leaflet's panes (400) so popups/pins don't render over the sticky
   header when the map scrolls past. */
.site-header {
  background: var(--paper) !important;
  z-index: 1000 !important;
}
.site-header__main {
  background: var(--paper) !important;
  border-bottom: 1px solid var(--rule) !important;
}
.site-header__utility {
  background: var(--navy) !important;
  color: #fff !important;
}
.site-header__utility-inner {
  display: flex !important;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;            /* prevent overlap by wrapping instead */
  min-width: 0;
}
.site-header__utility-inner > * { min-width: 0; }
.util-search {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: var(--r-sm);
  padding: 4px 10px;
  font: inherit; font-size: 0.8rem;
  min-width: 0;              /* allow shrinking instead of forcing 260px */
  max-width: 320px;
  flex: 0 1 260px;           /* grow-0 shrink-1 basis-260 — shrinks under pressure */
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
  overflow: hidden;
}
.util-search:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.5); }
.util-search svg { opacity: 0.85; flex: 0 0 14px; }
.util-search span {
  flex: 1; text-align: left; opacity: 0.88;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.util-search kbd {
  background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.35);
  border-radius: 4px; padding: 1px 6px; font-family: inherit; font-size: 0.68rem;
  flex: 0 0 auto;
}
@media (max-width: 900px) {
  .util-search kbd { display: none; }
}
@media (max-width: 699px) {
  .util-search span { display: none; }
  .util-search { flex: 0 0 auto; padding: 4px 8px; }
}
.ng-banner {
  background: repeating-linear-gradient(
    45deg,
    #b8860b 0 22px,
    #1a1a1a 22px 44px
  ) !important;
  background-size: auto !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.35);
}
.ng-banner__label {
  background: rgba(0,0,0,0.55);
  padding: 4px 10px;
  border-radius: 4px;
  color: #ffd84d !important;
}
.ng-banner__dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: #ff5252; margin-right: 8px; vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(255,82,82,0.7);
  animation: ng-pulse 1.4s infinite;
}
@keyframes ng-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,82,82,0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(255,82,82,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,82,82,0); }
}
.ng-banner--hidden {
  background-size: 100vw auto !important;
}
.site-header__utility a { color: #fff !important; opacity: 0.9; }
.site-header__utility a:hover { opacity: 1; }
.nav-box, .nav-box__link { color: #0f2a44 !important; }
.nav-box:hover, .nav-box--has-menu:hover .nav-box__link {
  background: rgba(255,255,255,0.45) !important;
  border-color: rgba(15,42,68,0.25) !important;
}

/* Nav items — crisp rendering, no GPU layer promotion causing subpixel blur. */
.site-header__nav .nav-box,
.site-header__nav .nav-box__link { color: var(--navy) !important; }
.site-header__nav .nav-box {
  background: transparent !important;
  border: 1px solid var(--rule) !important;
  transform: none !important;
  will-change: auto !important;
  backface-visibility: visible !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  filter: none !important;
  transition:
    background 180ms var(--ease),
    border-color 180ms var(--ease),
    color 180ms var(--ease) !important;
}
.site-header__nav .nav-box:hover,
.site-header__nav .nav-box--has-menu:hover {
  background: var(--paper-sink) !important;
  border-color: var(--navy) !important;
}
.site-header__nav .nav-box:focus-visible,
.site-header__nav .nav-box__link:focus-visible {
  outline: 2px solid var(--sage-dark) !important;
  outline-offset: 2px;
}
/* Pay Online — matches the rest of the nav. */
.site-header__nav .nav-box.nav-box--pay {
  background: transparent !important;
  border-color: var(--rule) !important;
  color: var(--navy) !important;
}
.site-header__nav .nav-box.nav-box--pay:hover {
  background: var(--paper-sink) !important;
  border-color: var(--navy) !important;
}

/* Uniform nav pills (desktop). One set of metrics across the whole desktop
   range — flex-wrap handles the narrow end instead of a second breakpoint,
   so zoom never triggers a layout jump between sizes. */
@media (min-width: 700px) {
  .site-header__nav--boxed {
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 0.35rem !important;
    row-gap: 0.35rem !important;
    min-width: 0 !important;
  }
  .site-header__nav--boxed .nav-box,
  .site-header__nav--boxed .btn-appt {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 0.8rem !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }
  .site-header__nav--boxed .nav-box__link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    line-height: 1 !important;
  }
}

/* ─── Mobile header: hamburger + drawer ─── */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 6px;
  width: 44px; height: 44px;
  padding: 0; margin-left: auto;
  color: #fff;
  cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: '';
  display: block;
  width: 22px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .18s ease, opacity .18s ease, top .18s ease;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; left: 0; top: -7px; }
.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); }

/* Hamburger + drawer kicks in below 1100. The inline nav needs ~970px for
   items + CTA inside a ~983px header; 1099px gives adequate clearance.
   Lowered from 1319px: at 1319px even lightly zoomed (>110%) desktop
   users fell into drawer mode with a broken accordion (isMobileDrawer
   was still gated at 699px so is-open was never applied). 1100px keeps
   the desktop nav usable while matching the JS isMobileDrawer threshold.
   Mobile-only logo-compress tweaks stay in the 699px block below so
   700–1099 keeps the full site-header layout. */
@media (max-width: 1099px) {
  .nav-toggle { display: inline-flex; }

  .site-header { position: relative !important; }
  /* Drawer: full-width vertical stack below the header row */
  .site-header__nav--boxed {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0.5rem 0.75rem 1rem !important;
    background: var(--brand-navy, #0f2a44) !important;
    border-top: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 1px 0 rgba(0,0,0,0.04);
    z-index: 900;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
  .site-header.nav-open .site-header__nav--boxed { display: flex !important; }

  .site-header__nav--boxed .nav-box,
  .site-header__nav--boxed .btn-appt {
    display: flex !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 0.75rem 0.9rem !important;
    margin: 0.2rem 0 !important;
    justify-content: flex-start !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.04em !important;
    border-radius: 8px !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.95) !important;
    background: transparent !important;
    border-color: rgba(255,255,255,0.14) !important;
  }
  .site-header__nav--boxed .nav-box .nav-box__link,
  .site-header__nav--boxed .nav-box:hover,
  .site-header__nav--boxed .nav-box:focus-within {
    color: #fff !important;
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.26) !important;
  }
  .site-header__nav--boxed .nav-box .nav-box__link {
    color: inherit !important;
    background: transparent !important;
  }
  .site-header__nav--boxed .nav-box.nav-box--pay {
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.28) !important;
  }
  .site-header__nav--boxed .nav-box--pay:hover {
    background: rgba(255,255,255,0.2) !important;
  }
  .site-header__nav--boxed .btn-appt {
    background: var(--brand-green, #004020) !important;
    border-color: var(--brand-green, #004020) !important;
    color: #fff !important;
    justify-content: center !important;
    font-weight: 700 !important;
  }
  .site-header__nav--boxed .btn-appt:hover {
    background: var(--brand-green-dark, #002b15) !important;
  }

  /* Mobile dropdowns: ACCORDION behavior — closed by default, tap the
     caret to open one section at a time. Keeps the drawer scannable.
     (JS adds .is-open on tap; this rule sets the collapsed baseline.) */
  .site-header__nav--boxed .nav-box--has-menu {
    flex-wrap: wrap !important;
    align-items: stretch !important;
  }
  .site-header__nav--boxed .nav-box--has-menu .nav-box__link {
    flex: 1 1 auto;
  }
  .site-header__nav--boxed .nav-box--has-menu .nav-menu {
    position: static !important;
    transform: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border: 0 !important;
    margin-top: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    /* Collapsed default — override the desktop pop-open logic */
    opacity: 1 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    transition: height 0.22s ease, padding 0.22s ease, visibility 0s linear 0.22s !important;
  }
  /* Open state — toggled via .is-open on the nav-box (set by mobile JS). */
  .site-header__nav--boxed .nav-box--has-menu.is-open .nav-menu {
    visibility: visible !important;
    pointer-events: auto !important;
    height: auto !important;
    padding: 0.25rem 0 0.5rem 0.75rem !important;
    transition: height 0.22s ease, padding 0.22s ease, visibility 0s !important;
  }
  /* Strip the hover-open so the menu only opens via explicit tap */
  .site-header__nav--boxed .nav-box--has-menu:hover .nav-menu,
  .site-header__nav--boxed .nav-box--has-menu:focus-within .nav-menu {
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
  }
  .site-header__nav--boxed .nav-box--has-menu.is-open:hover .nav-menu,
  .site-header__nav--boxed .nav-box--has-menu.is-open:focus-within .nav-menu {
    visibility: visible !important;
    pointer-events: auto !important;
    height: auto !important;
    padding: 0.25rem 0 0.5rem 0.75rem !important;
  }
  .site-header__nav--boxed .nav-menu a {
    color: rgba(255,255,255,0.88) !important;
    padding: 0.55rem 0.6rem !important;
    font-size: 0.88rem !important;
    border-radius: 6px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
  }
  .site-header__nav--boxed .nav-menu a:hover,
  .site-header__nav--boxed .nav-menu a:focus-visible {
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
    outline: none;
  }
  /* Caret rotates 180° when the section is open */
  .site-header__nav--boxed .nav-box__caret {
    opacity: 0.65;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .site-header__nav--boxed .nav-box--has-menu.is-open .nav-box__caret {
    transform: rotate(180deg);
    opacity: 1;
  }
  /* Make the whole nav-box tappable to toggle the accordion */
  .site-header__nav--boxed .nav-box--has-menu {
    cursor: pointer;
  }
}
/* Mobile: keep the logo compact in the single-row header. */
@media (max-width: 699px) {
  .site-header__main {
    flex-wrap: nowrap !important;
    padding: 0.5rem 0.9rem !important;
    gap: 0.5rem !important;
  }
  .brand__logo, .brand__mark { height: 56px !important; }
  .site-header .brand {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    height: auto !important;
    flex: 0 0 auto !important;
  }
  .site-header .brand__logo,
  .site-header .brand__mark {
    height: 52px !important;
    max-height: 52px !important;
    width: auto !important;
  }
}
/* (Legacy conflicting .is-scrolled grow rule removed — scroll-shrink lives at the top of this file.) */

/* Hero content — centered */
.hero-photo__content {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.hero-photo__cta { justify-content: center !important; }
.hero-stats { justify-content: center !important; }
.hero-photo__title--lede { margin-left: auto !important; margin-right: auto !important; }

/* Hero title — plain lede */
.hero-photo__title--lede {
  font: 700 clamp(1.8rem, 3.6vw, 2.8rem)/1.15 'Inter', sans-serif !important;
  letter-spacing: -0.018em !important;
  color: #fff !important;
  margin: 0.3rem 0 1.4rem !important;
  max-width: 720px;
}

/* Hero stats — inline flex, white-on-photo */
.hero-stats {
  list-style: none;
  margin: 0 0 1.8rem;
  padding: 0;
  display: flex; flex-wrap: wrap;
  gap: 1.4rem 2.4rem;
  color: #fff;
}
.hero-stats li {
  display: flex; align-items: baseline; gap: 0.55rem;
}
.hero-stats__num {
  font: 700 1.9rem/1 'Inter', sans-serif;
  letter-spacing: -0.02em;
  color: #fff;
}
.hero-stats__label {
  font: 500 0.9rem/1.2 'Inter', sans-serif;
  color: rgba(255,255,255,0.88);
  letter-spacing: 0.01em;
  max-width: 14ch;
}
.hero-stats .blank--suggest {
  background: rgba(255,255,255,0.18);
  padding: 0 0.35rem; border-radius: 4px;
}

/* Legacy separate bars no longer rendered on landing — hide if present elsewhere */
.stats-bar, .apptbar--slim { display: none !important; }

/* Hero wordmark overlay (legacy — kept for other pages that may still use it) */
.hero-photo__title--wordmark {
  margin: 0 0 1rem !important;
  padding: 0 !important;
  display: flex; align-items: center; justify-content: flex-start;
}
.hero-photo__wordmark {
  width: min(560px, 82vw);
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,0.45))
          drop-shadow(0 2px 4px rgba(0,0,0,0.35));
}
.hero-photo__eyebrow--below {
  margin-top: 0.2rem !important;
  margin-bottom: 1rem !important;
}

/* Apptbar — flat navy fill, editorial type */
.apptbar--slim {
  background: var(--navy) !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  color: #fff !important;
  padding: 1.2rem 1.5rem !important;
}
.apptbar--slim .apptbar__label {
  color: #fff !important;
  font: 600 1.15rem/1.3 'Inter', sans-serif !important;
  letter-spacing: 0.02em !important;
  text-align: center;
}


/* ---------- 1. View Transitions (smooth cross-page nav) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(.2,.7,.2,1);
}
::view-transition-old(root) { animation-name: ng-fade-out; }
::view-transition-new(root) { animation-name: ng-fade-in; }
@keyframes ng-fade-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes ng-fade-in  { from { opacity: 0; transform: translateY(8px); } }

/* Shared-element transitions: brand logo + hero H1 glide between pages */
/* view-transition-name removed — it was locking the img to its captured size
   and preventing the scroll-shrink from rendering. */
.brand__logo { view-transition-name: none; }
.bio-hero h1, .hero h1, h1.page-title { view-transition-name: page-title; }

/* ---------- 2. Trial banner ---------- */
.ng-banner {
  position: sticky; top: 0; z-index: 200;
  background: linear-gradient(90deg, #203070, #004020);
  color: #fff; font: 600 0.78rem/1 'Inter', sans-serif;
  padding: 0.45rem 1rem;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
}
.ng-banner__label {
  letter-spacing: 0.08em; text-transform: uppercase;
  justify-self: start;
}
.ng-banner__spacer { justify-self: end; }
.ng-banner__search {
  justify-self: center;
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.28);
  color: #fff;
  padding: 0.32rem 0.65rem 0.32rem 0.55rem;
  border-radius: var(--r-sm);
  cursor: pointer;
  min-width: 320px;
  font: 500 0.78rem/1 'Inter', sans-serif;
  letter-spacing: 0;
  text-transform: none;
  transition: background 140ms ease, border-color 140ms ease;
}
.ng-banner__search:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.45);
}
.ng-banner__search svg { opacity: 0.85; flex: 0 0 14px; }
.ng-banner__search span { flex: 1; text-align: left; opacity: 0.85; }
.ng-banner__search kbd {
  background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.35);
  border-radius: 4px; padding: 1px 6px; font-family: inherit; font-size: 0.68rem;
  letter-spacing: 0.04em;
}
@media (max-width: 720px) {
  .ng-banner { grid-template-columns: 1fr auto; gap: 0.5rem; }
  .ng-banner__spacer { display: none; }
  .ng-banner__search { min-width: 0; }
  .ng-banner__search span { display: none; }
}

/* ---------- 3. Command palette (Ctrl/Cmd+K) ---------- */
.ng-cmdk-backdrop {
  position: fixed; inset: 0; background: rgba(10,20,40,0.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
  animation: ng-fade-in 160ms ease-out;
}
.ng-cmdk {
  width: min(620px, 92vw);
  background: #fff; border-radius: var(--r-md);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  overflow: hidden; font-family: 'Inter', sans-serif;
}
.ng-cmdk input {
  width: 100%; border: 0; outline: 0; padding: 1.05rem 1.2rem;
  font: 500 1.05rem 'Inter', sans-serif;
  border-bottom: 1px solid #ececec;
}
.ng-cmdk ul { list-style: none; margin: 0; padding: 0.4rem; max-height: 56vh; overflow-y: auto; }
.ng-cmdk li {
  padding: 0.7rem 0.9rem; border-radius: 8px; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  color: #0f2a44; font-size: 0.95rem;
}
.ng-cmdk li[aria-selected="true"] { background: #f0f3fb; color: #203070; }
.ng-cmdk li .ng-kind {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: #7c8aa4; background: #f4f6fb; padding: 2px 8px; border-radius: var(--r-sm);
}
.ng-cmdk-footer {
  padding: 0.5rem 0.9rem; border-top: 1px solid #ececec;
  font-size: 0.75rem; color: #7c8aa4;
  display: flex; gap: 1rem; justify-content: flex-end;
}
.ng-cmdk-footer kbd {
  background: #f4f6fb; padding: 1px 6px; border-radius: 4px; font-family: inherit;
}

/* ---------- 4. Scroll-driven reveals — REMOVED ----------
   Cards used to rise in on scroll and the hero dimmed/shifted on exit.
   Both animations have been removed for a steadier, more editorial feel.
   Content appears in place; rhythm is carried by type and spacing, not motion. */

/* ---------- 5. Interactive body-map hero addition ---------- */
.ng-bodymap {
  max-width: 1100px; margin: 3rem auto; padding: 2rem 1.5rem;
  display: grid; grid-template-columns: 320px 1fr; gap: 2.5rem; align-items: stretch;
}
@media (max-width: 820px) { .ng-bodymap { grid-template-columns: 1fr; } }
.ng-bodymap__stage {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 1.25rem;
  aspect-ratio: 435.687 / 841.89;      /* matches the skeleton SVG's viewBox */
  overflow: hidden;
}
.ng-bodymap__art {
  position: absolute; inset: 1.25rem;
  background-image: url('skeleton_clean.svg');  /* Wikimedia PD skeleton by LadyofHats, labels stripped */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  transition: opacity 200ms ease;
  /* A subtle navy tint harmonizes the skeleton with the paper palette. */
  filter: sepia(1) hue-rotate(180deg) saturate(0.6) brightness(0.85);
}
.ng-bodymap__art--spine {
  background-image: url('spine-lateral.svg');
  opacity: 0; pointer-events: none;
}
.ng-bodymap.is-spine .ng-bodymap__art--front { opacity: 0; }
.ng-bodymap.is-spine .ng-bodymap__art--spine { opacity: 1; }
.ng-bodymap.is-spine .ng-bodymap__hit:not([data-region="spine"]) { opacity: 0; pointer-events: none; }
.ng-bodymap__svg { position: absolute; inset: 1rem; width: calc(100% - 2rem); height: calc(100% - 2rem); display: block; }
.ng-bodymap__hit {
  fill: rgba(32,48,112,0);
  stroke: rgba(32,48,112,0.25); stroke-width: 1.2;
  stroke-dasharray: 3 3;
  cursor: pointer; transition: all 160ms ease;
}
.ng-bodymap__hit:hover, .ng-bodymap__hit:focus,
.ng-bodymap__hit.is-active {
  fill: rgba(0,64,32,0.22);
  stroke: #004020; stroke-width: 1.6; stroke-dasharray: 0;
  outline: none;
}
.ng-bodymap__pulse {
  fill: #004020; opacity: 0; transform-origin: center;
}
.ng-bodymap__hit:hover + .ng-bodymap__pulse,
.ng-bodymap__hit.is-active + .ng-bodymap__pulse {
  animation: ng-pulse 1.4s ease-out infinite;
}
@keyframes ng-pulse {
  0%   { opacity: 0.5; r: 2; }
  100% { opacity: 0;   r: 14; }
}
.ng-bodymap__info h2 {
  font: 700 clamp(1.8rem, 3.5vw, 2.4rem)/1.05 'Inter', sans-serif;
  color: #0f2a44; letter-spacing: -0.02em; margin: 0 0 0.6rem;
}
.ng-bodymap__info p { color: #3a4a62; max-width: 48ch; }
.ng-bodymap__eyebrow {
  color: #004020; font: 600 0.72rem 'Inter',sans-serif;
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.7rem;
}

/* Focused region panel (replaces dumping all education) */
.ng-region-panel {
  margin-top: 1.25rem; background: #fff;
  border: 1px solid rgba(32,48,112,0.12); border-radius: var(--r-md);
  padding: 1.3rem 1.4rem; min-height: 220px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.ng-region-panel__header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 0.9rem;
  border-bottom: 1px solid #eef0f4; padding-bottom: 0.7rem;
}
.ng-region-panel__header h3 {
  font: 700 1.35rem/1.1 'Inter',sans-serif; color: #0f2a44;
  letter-spacing: -0.01em; margin: 0;
}
.ng-region-panel__kind {
  font: 600 0.7rem 'Inter',sans-serif; color: #7c8aa4;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.ng-region-panel__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem;
}
.ng-region-panel__list a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.75rem 0.95rem; background: #f7f8fb; border-radius: var(--r-md);
  color: #0f2a44; text-decoration: none; font-weight: 500;
  transition: all 140ms ease;
}
.ng-region-panel__list a:hover {
  background: #203070; color: #fff; transform: translateX(2px);
}
.ng-region-panel__list a::after {
  content: "→"; opacity: 0.5; margin-left: 0.5rem;
}
.ng-region-panel__list a:hover::after { opacity: 1; }
.ng-region-panel__empty {
  color: #7c8aa4; font-style: italic; padding: 0.5rem 0;
}
.ng-region-panel__cta {
  margin-top: 1rem; font-size: 0.85rem; color: #3a4a62;
}
.ng-region-panel__cta a {
  color: #004020; font-weight: 600; text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.ng-region-panel.is-empty .ng-region-panel__list { display: none; }

/* ---------- 6. Container queries on provider/location cards ---------- */
.bio-card, .location-card, .region-tile { container-type: inline-size; }
@container (min-width: 360px) {
  .bio-card .bio-card__body { padding: 1.4rem 1.6rem; }
}

/* ---------- 7. Modern :has() — highlight condition card when has image ---------- */
.condition-card:has(img) { border-left: 3px solid #004020; }

/* ---------- 8. popover API (mobile-friendly dropdowns) ---------- */
[popover] {
  border: 0; border-radius: var(--r-md); padding: 0.6rem;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
[popover]::backdrop { background: rgba(10,20,40,0.35); backdrop-filter: blur(4px); }

/* ---------- Stats bar under the hero ---------- */
.stats-bar {
  background: #f6f3ee;
  color: #3d4a5c;
  border-top: 1px solid #e4ddd1;
  border-bottom: 1px solid #e4ddd1;
}
.stats-bar__inner {
  max-width: 1000px; margin: 0 auto;
  padding: 0.6rem clamp(1rem, 4vw, 3rem);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  align-items: center;
}
@media (max-width: 720px) {
  .stats-bar__inner { grid-template-columns: 1fr; gap: 0.4rem; padding: 0.6rem 1.5rem; }
}
.stats-bar__item {
  display: flex; align-items: baseline; gap: 0.4rem;
  justify-content: center;
  text-align: left;
}
.stats-bar__num {
  font: 700 1.05rem/1 'Inter', sans-serif;
  color: #203070;
  letter-spacing: -0.01em;
  flex: 0 0 auto;
}
.stats-bar__label {
  font: 500 0.78rem/1.2 'Inter', sans-serif;
  color: #3d4a5c;
  letter-spacing: 0.01em;
  max-width: 22ch;
}
.stats-bar .blank--suggest {
  background: rgba(255,255,255,0.1);
  color: #b9d0b0;
  padding: 0 0.4rem;
  border-radius: 4px;
}

/* ---------- 10. Wide conditions directory (replaces boxes) ---------- */
.ng-conditions {
  width: 100%;
  max-width: none;
  margin: 2rem 0 3rem;
  padding: 1rem 0;
}
.directory:has(.ng-conditions) .directory__inner {
  max-width: none !important;
  padding-left: clamp(1rem, 4vw, 3rem);
  padding-right: clamp(1rem, 4vw, 3rem);
}
.ng-conditions__group {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1.5rem;
  padding: 1.1rem 0;
  border-top: 1px solid rgba(32,48,112,0.08);
  align-items: baseline;
}
.ng-conditions__group:last-child { border-bottom: 1px solid rgba(32,48,112,0.08); }
@media (max-width: 720px) {
  .ng-conditions__group { grid-template-columns: 1fr; gap: 0.35rem; }
}
.ng-conditions__label {
  font: 700 1rem/1.1 'Inter', sans-serif;
  color: #0f2a44;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.82rem;
  margin: 0;
  padding-top: 0.15rem;
  position: sticky; top: 120px;
}
.ng-conditions__label::after {
  content: "";
  display: block; width: 28px; height: 2px; background: #004020;
  margin-top: 0.4rem;
}
.ng-conditions__list {
  display: flex; flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin: 0; padding: 0;
  list-style: none;
}
.ng-conditions__list li { margin: 0; padding: 0; }
.ng-conditions__list a,
.ng-conditions__list span {
  display: inline-block;
  font: 500 0.86rem/1.2 'Inter', sans-serif;
  padding: 0.35rem 0.7rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: all 140ms ease;
}
.ng-conditions__list a {
  color: #0f2a44;
  background: #eef0f6;
  border: 1px solid transparent;
}
.ng-conditions__list a:hover {
  background: #203070; color: #fff;
}
.ng-conditions__list span {
  color: #6b7690;
  background: transparent;
  border: 1px dashed rgba(32,48,112,0.18);
  cursor: default;
}

/* Simplified provider cards — photo + name + credential + bio link */
.providers-grid--simple {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.2rem;
}
.providers-preview__grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; }
.provider-card--simple {
  display: block;
  text-align: center;
  text-decoration: none;
  color: #0f2a44;
  padding: 0;
  background: #fff;
  border: 1px solid rgba(32,48,112,0.08);
  border-radius: 4px;
  overflow: hidden;
  transition: all 160ms ease;
}
.provider-card--simple:hover {
  border-color: #004020;
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.provider-card--simple .provider-card__photo {
  width: 100%; aspect-ratio: 1 / 1; margin: 0;
  border-radius: 0; overflow: hidden; background: #f4efe5;
}
.provider-card--simple .provider-card__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
}
.provider-card--simple .provider-card__body { padding: 1rem 1rem 1.1rem; }
.provider-card--simple .provider-card__name {
  font: 700 1.05rem/1.25 'Inter', sans-serif;
  margin: 0 0 0.35rem;
  letter-spacing: -0.005em;
}
.provider-card--simple .provider-card__more {
  display: inline-block;
  font: 500 0.82rem/1 'Inter', sans-serif;
  color: #004020;
  margin-top: 0.2rem;
}
.provider-card--simple:hover .provider-card__more { text-decoration: underline; }

/* ---------- Locations map ---------- */
.locmap {
  background: #f6f3ee;
  padding: 2.4rem 0;
  overflow: hidden;   /* clamp Leaflet's zoom-animation proxy so it doesn't bleed the document's horizontal scroll */
  border-top: 1px solid #e4ddd1;
  border-bottom: 1px solid #e4ddd1;
}
.locmap__inner {
  max-width: var(--content-max); margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 3rem);
}
.locmap__head { margin-bottom: 1.2rem; }
.locmap__head h2 {
  font: 700 1.8rem/1.1 'Inter', sans-serif;
  color: #0f2a44; margin: 0 0 0.3rem;
  letter-spacing: -0.02em;
}
.locmap__head p {
  font: 400 1rem/1.5 'Inter', sans-serif;
  color: #3d4a5c; margin: 0;
}
/* Higher specificity (two classes) to override Leaflet's own
   `.leaflet-container { overflow: hidden }` which ships AFTER our
   stylesheet and would otherwise win the cascade. */
.locmap__canvas.leaflet-container {
  width: 100%; height: 480px;
  border-radius: var(--r-md);
  /* Leaflet's default `overflow: hidden` on .leaflet-container clipped
     popups that extend beyond the map rect. Popups anchor above their
     pin, so pins near the top edge (New Braunfels, Hallettsville) had
     their photo popups cut off. autoPan was unreliable at fixing it
     on first open, so we let popups escape the container visually.
     The tile pane below gets its own rounded clip so tiles still
     look neatly trimmed inside the rounded card shape. */
  overflow: visible;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  background: #dfe6e8;
}
/* Round the tile layer only (a sibling of the popup pane inside
   .leaflet-map-pane) so popups remain free to overflow the rounded
   shape of the map card. */
.locmap__canvas .leaflet-tile-pane {
  border-radius: var(--r-md);
  overflow: hidden;
}
.locmap-pin {
  display: flex; align-items: center; justify-content: center;
}
.locmap-pin__dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #203070;
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  display: block;
}
.locmap-popup {
  font: 400 0.9rem/1.4 'Inter', sans-serif;
  color: #0f2a44;
  min-width: 220px;
}
.locmap-popup strong { font-weight: 700; color: #0f2a44; }
.locmap-popup a { color: #004020; font-weight: 600; text-decoration: none; }
.locmap-popup a:hover { text-decoration: underline; }

/* ---- Photo card (lives inside the Leaflet popup) ----
   Shown at ~240px wide. Photo crops 16:9 (was 16:10) so the popup is
   about 20px shorter overall — autoPan needs headroom to keep the whole
   popup inside the map rectangle, and a shorter popup fits on shorter
   viewports without Leaflet panning the pin off-screen. */
.locmap-card { display: block; width: 100%; }
.locmap-card__photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: #e4ddd1;
  margin-bottom: 0.4rem;
}
.locmap-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.locmap-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  line-height: 1.35;
  color: #0f2a44;
}
.locmap-card__body strong { font-size: 0.95rem; font-weight: 700; }
.locmap-card__body span { color: #4a5568; }

.locmap-popup__links {
  margin-top: 0.55rem;
  padding-top: 0.45rem;
  border-top: 1px solid #e4ddd1;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
}
.locmap-popup__links span { color: #a0968a; }

/* Tighten Leaflet's default popup chrome so the photo sits flush, and
   remove the default opacity transition that made popups feel flashy
   when hovering between nearby pins. */
.leaflet-popup-content-wrapper { border-radius: var(--r-md); }
.leaflet-popup-content { margin: 10px 12px; line-height: 1.4; }
.leaflet-popup { transition: none !important; }

@media (max-width: 520px) {
  .leaflet-tooltip.locmap-tooltip { width: 180px; }
  .locmap-popup { min-width: 200px; }
}

/* ---------- Evenly-spaced locations strip ---------- */
.locations-strip .locations-strip__grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 1rem;
  align-items: stretch;
}
.locations-strip .location-card { height: 100%; }
@media (max-width: 1100px) {
  .locations-strip .locations-strip__grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 620px) {
  .locations-strip .locations-strip__grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---------- Photo strip (horizontal scroll) ---------- */
.photostrip {
  background: #f6f3ee;
  padding: 2.2rem 0 2.6rem;
  border-top: 1px solid #e4ddd1;
  border-bottom: 1px solid #e4ddd1;
}
.photostrip__head {
  max-width: var(--content-max); margin: 0 auto 1rem;
  padding: 0 clamp(1rem, 4vw, 3rem);
}
.photostrip__head h2 {
  font: 700 1.8rem/1.1 'Inter', sans-serif;
  color: #0f2a44; margin: 0;
  letter-spacing: -0.02em;
}
.photostrip__track {
  display: flex; gap: 0.9rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.3rem clamp(1rem, 4vw, 3rem) 1rem;
  scrollbar-width: thin;
}
.photostrip__track::-webkit-scrollbar { height: 8px; }
.photostrip__track::-webkit-scrollbar-thumb { background: rgba(32,48,112,0.25); border-radius: 4px; }
.photostrip__tile {
  flex: 0 0 auto;
  width: 420px; height: 300px;
  border-radius: var(--r-md); overflow: hidden;
  background: #ece6d9;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  scroll-snap-align: start;
}
.photostrip__tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (max-width: 720px) {
  .photostrip__tile { width: 82vw; height: 240px; }
}

/* Hide legacy boxed tiles when ng directory is present */
.ng-conditions ~ .region-tiles,
.directory:has(.ng-conditions) .region-tiles { display: none; }

/* ---------- 9. Reduced motion respect ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* =====================================================================
   10. Britannica-style editorial skin (scoped to article-style pages)
   Condition pages (body.is-condition) and procedure pages (body.is-procedure)
   get an encyclopedic typographic treatment: serif display face, cream
   article surface, tighter measure, quieter link accents.
   ===================================================================== */

body.is-condition,
body.is-procedure {
  background: #f7f4ee;          /* warm cream page surface */
}

body.is-condition .page-title h1,
body.is-procedure .page-title h1,
body.is-condition .content h1,
body.is-condition .content h2,
body.is-condition .content h3,
body.is-procedure .content h1,
body.is-procedure .content h2,
body.is-procedure .content h3,
body.is-condition .sidebar-card__heading,
body.is-procedure .sidebar-card__heading {
  font-family: "Source Serif Pro", "Source Serif 4", Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -0.005em;
}

body.is-condition .page-title h1,
body.is-procedure .page-title h1 {
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  line-height: 1.12;
}

body.is-condition .page-title__subtitle,
body.is-procedure .page-title__subtitle {
  font-family: "Source Serif Pro", Georgia, serif;
  font-style: italic;
  color: #4a4a4a;
  font-size: 1.08rem;
}

body.is-condition .content,
body.is-procedure .content {
  max-width: none;
  font-family: "Source Serif Pro", "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 1.06rem;
  line-height: 1.65;
  color: #1b1b1b;
}
/* Prose paragraphs still hold a readable measure (~70ch) — wider lines
   hurt scanning — but layout components (c-path, c-procs, lists of
   cards) break out to fill the full content column so desktop doesn't
   feel half-empty. */
body.is-condition .content > section > p,
body.is-procedure .content > section > p,
body.is-condition .content > section > ul,
body.is-procedure .content > section > ul,
body.is-condition .content > section > ol,
body.is-procedure .content > section > ol {
  max-width: 70ch;
}
body.is-condition .content .c-path,
body.is-procedure .content .c-path,
body.is-condition .content .c-procs,
body.is-procedure .content .c-procs,
body.is-condition .content .treatment-list,
body.is-procedure .content .treatment-list {
  max-width: none;
}

body.is-condition .content p,
body.is-procedure .content p {
  margin: 0 0 1em;
}

body.is-condition .content h2,
body.is-procedure .content h2 {
  font-size: 1.55rem;
  margin-top: 2.4rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid #d9cfbd;
}
body.is-condition .content h3,
body.is-procedure .content h3 {
  font-size: 1.2rem;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

/* First paragraph of the first section gets a refined lead */
/* Drop cap and small-caps first-line removed — too book-chapter for the rest of the site. */

/* Sidebar-card as a margin note, not a slab */
body.is-condition .sidebar-card,
body.is-procedure .sidebar-card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rule-ink);
  border-radius: 0;
  padding: 0.9rem 0 0;
  box-shadow: none;
}
body.is-condition .sidebar-card + .sidebar-card,
body.is-procedure .sidebar-card + .sidebar-card {
  margin-top: 1.75rem;
}
body.is-condition .sidebar-card__heading,
body.is-procedure .sidebar-card__heading {
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--navy);
  margin: 0 0 0.6rem;
}
body.is-condition .sidebar-card p,
body.is-procedure .sidebar-card p {
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}
/* Primary action in the margin: solid fill, rectangular */
body.is-condition .sidebar-card--blue,
body.is-procedure .sidebar-card--blue {
  background: transparent;
  border-top-color: var(--navy);
  border-top-width: 2px;
}
body.is-condition .sidebar-card--blue .btn-primary,
body.is-procedure .sidebar-card--blue .btn-primary {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  padding: 0.6rem 1.1rem;
  border-radius: var(--r-sm);
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid var(--navy);
}
body.is-condition .sidebar-phone,
body.is-procedure .sidebar-phone {
  display: inline-block;
  margin-left: 0.75rem;
  font-family: var(--font);
  font-size: 0.95rem;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}

/* (Legacy cream-box rule deleted — margin-note styling lives at section 10 above.) */

/* Surgical options callout on condition pages */
body.is-condition .surgical-options-callout {
  margin: 2rem 0;
  padding: 1.25rem 1.4rem;
  background: #fffdf7;
  border-left: 3px solid var(--brand-navy, #203070);
}
body.is-condition .surgical-options-callout h2 {
  border-bottom: none;
  margin-top: 0;
}

/* =====================================================================
   10b. Patient education — boxes ONLY on clickable cards
   Sam's rule: boxes are great IF the box is a click target. Static
   text blocks (process steps, stat callouts) should flow as prose
   without container chrome. CLICKABLE cards (link cards, CTA blocks
   whose contents are actionable, related-links sidebars) KEEP their
   box because the chrome reinforces "this whole thing is a target".
   So: flatten only c-path__step and c-fact. Leave sidebar-card,
   c-coverage, c-proc, surgical-options-callout intact.
   ===================================================================== */
body.is-condition .c-path__step,
body.is-procedure .c-path__step,
body.is-condition .c-fact,
body.is-procedure .c-fact {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Numbered-path steps: no card chrome, just number + text. */
body.is-condition .c-path__step,
body.is-procedure .c-path__step {
  display: grid !important;
  grid-template-columns: 2.2rem 1fr;
  gap: 0.2rem 0.75rem;
  margin: 0.9rem 0 !important;
  align-items: start;
}
body.is-condition .c-path__step .c-path__num,
body.is-procedure .c-path__step .c-path__num {
  grid-row: 1 / span 2;
}
body.is-condition .c-path__step h3,
body.is-procedure .c-path__step h3 {
  margin: 0;
  grid-column: 2;
}
body.is-condition .c-path__step p,
body.is-procedure .c-path__step p {
  margin: 0;
  grid-column: 2;
}

/* Sidebar CTA: button + phone sit on one row, vertically centered to
   each other. Because the button is taller (due to padding) and the
   phone is a text link, baseline-alignment pushes the phone below the
   button's visual center. vertical-align: middle re-centers both on
   the line-box axis so they read as a balanced pair. */
body.is-condition .sidebar-card--blue .btn-primary,
body.is-procedure .sidebar-card--blue .btn-primary,
body.is-condition .sidebar-card--blue .sidebar-phone,
body.is-procedure .sidebar-card--blue .sidebar-phone {
  vertical-align: middle;
}
body.is-condition .sidebar-card--blue .sidebar-phone,
body.is-procedure .sidebar-card--blue .sidebar-phone {
  margin-top: 0;  /* clear base styles.css margin-top:0.5rem that misaligns */
  line-height: 1;
}
body.is-condition .sidebar-card--blue .btn-primary,
body.is-procedure .sidebar-card--blue .btn-primary {
  margin-right: 0.25rem;
  line-height: 1.2;
}
/* Clickable card hover-state: the blue CTA card responds subtly to
   hover so its click-target nature is obvious. */
body.is-condition .sidebar-card--blue:hover,
body.is-procedure .sidebar-card--blue:hover {
  background: var(--blue-tint, #eaf2f9);
}

/* =====================================================================
   10c. Clinical figures — radiographs embedded inline in the narrative
   The figure floats to the right of the prose (Britannica-style) so
   the image fits within the flow of text rather than sitting on its
   own row. Images are presented raw (no plate, no frame). The caption
   is a small serif gloss; the credit is a near-invisible fine-print
   line so it does not compete with the clinical text.
   ===================================================================== */
.c-figure {
  float: right;
  clear: right;
  width: clamp(220px, 32%, 320px);
  margin: 0.1rem 0 0.75rem 1.5rem;
  display: block;
}
.c-figure--left {
  float: left;
  clear: left;
  margin: 0.1rem 1.5rem 0.75rem 0;
}
.c-figure__plate {
  display: block;
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.c-figure__plate img,
.c-figure > img {
  display: block;
  margin: 0;
  width: 100%;
  height: auto;
  max-height: 340px;
  object-fit: contain;
}
.c-figure__caption {
  display: block;
  margin-top: 0.45rem;
  font-family: "Source Serif Pro", Georgia, serif;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-muted);
  font-style: italic;
}
.c-figure__caption strong {
  font-style: normal;
  font-weight: 600;
  color: var(--text);
  margin-right: 0.3rem;
}
.c-figure__credit {
  display: block;
  margin-top: 0.2rem;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.01em;
  color: #a89f89;
  font-style: normal;
  opacity: 0.85;
}
.c-figure__credit a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
/* Anatomy illustrations (color diagrams) look better on a warm neutral
   background but still no hard frame. */
.c-figure--anatomy .c-figure__plate {
  background: #f7f4ec;
  padding: 0.5rem;
  border-radius: 2px;
}
/* On narrow viewports let the figure span the column rather than
   squeezing text into a 40-character gutter. */
@media (max-width: 720px) {
  .c-figure,
  .c-figure--left {
    float: none;
    width: min(100%, 360px);
    margin: 1rem auto 1.2rem;
  }
}
/* Prevent figure from overflowing out of the bottom of a section by
   forcing the section to self-clear. */
body.is-condition .content section,
body.is-procedure .content section {
  overflow: visible;
}
body.is-condition .content section::after,
body.is-procedure .content section::after {
  content: "";
  display: table;
  clear: both;
}

/* =====================================================================
   11. Inline cross-reference links (.xref) — Britannica-style blue terms
   ===================================================================== */
a.xref {
  color: #134382;               /* encyclopedia blue */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  border-bottom: none;
  cursor: help;
}
a.xref:hover,
a.xref:focus {
  color: #0b2e5c;
  text-decoration-thickness: 2px;
}

.xref-card {
  position: absolute;
  z-index: 10000;
  max-width: 320px;
  padding: 0.85rem 1rem;
  background: #fffdf7;
  color: #1b1b1b;
  border: 1px solid #d9cfbd;
  border-top: 3px solid var(--brand-navy, #203070);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  font-family: "Source Serif Pro", Georgia, serif;
  font-size: 0.95rem;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 120ms ease, transform 120ms ease;
  pointer-events: none;
}
.xref-card.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.xref-card__kind {
  display: inline-block;
  font-family: system-ui, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b6557;
  margin-bottom: 0.35rem;
}
.xref-card__title {
  font-weight: 600;
  font-size: 1.05rem;
  margin: 0 0 0.35rem;
  color: #0b2e5c;
}
.xref-card__body {
  margin: 0 0 0.6rem;
}
.xref-card__more {
  display: inline-block;
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  color: #134382;
  text-decoration: none;
  border-bottom: 1px solid #134382;
  padding-bottom: 1px;
}

/* ------------------------------------------------------------------
   Top cycling photo strip (landing page, sits between header + hero)
   ------------------------------------------------------------------
   Pre-shoot: houses 8 SVG placeholders (strip-*.svg) so Sam has slots
   to fill during the photo shoot. Post-shoot: swap SVG → JPG of same
   slug (no HTML changes needed).

   Tiles are 16:9 (matches how we'll crop the photos). Track auto-
   scrolls via @keyframes; pauses on hover; falls back to a scrollable
   strip (no animation) for users who prefer reduced motion.

   Seamless loop trick: the tile set is duplicated exactly once in the
   HTML, and the animation translates the track by -50% (i.e., one
   set's width). At animation end the second copy has moved into the
   position the first copy started at, so there's no visible snap.
   ------------------------------------------------------------------ */
.photo-strip {
  position: relative;
  width: 100%;
  background: #0f2a44;
  overflow: hidden;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.photo-strip__track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: photo-strip-scroll 60s linear infinite;
  will-change: transform;
}

.photo-strip:hover .photo-strip__track,
.photo-strip:focus-within .photo-strip__track {
  animation-play-state: paused;
}

.photo-strip__tile {
  flex: 0 0 auto;
  width: 260px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #1a3a5c;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.photo-strip__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes photo-strip-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .photo-strip { overflow-x: auto; }
  .photo-strip__track { animation: none; }
}

@media (max-width: 700px) {
  .photo-strip { padding: 8px 0; }
  .photo-strip__tile { width: 200px; }
  .photo-strip__track { gap: 10px; animation-duration: 45s; }
}

/* =====================================================================
   CONDITION-PAGE REDESIGN (promoted from acl-tear-mock.html)
   Shared across every condition page — hero band, at-a-glance facts,
   section heads, treatment-path stepper, rich procedure cards, funnel.
   ===================================================================== */

/* Hide legacy page-title block when hero band is present (prevents double
   heading on redesigned condition pages). */
.is-condition .c-hero ~ .page-title,
.is-condition.has-hero .page-title { display: none; }

/* --- Condition hero band ------------------------------------------- */
.c-hero {
  background: linear-gradient(180deg, var(--sky-tint) 0%, #fff 100%);
  border-bottom: 1px solid var(--rule-light);
  padding: 1.25rem 0 1.5rem;
}
.c-hero__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.c-hero__eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 0.35rem;
}
.c-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 2.75rem);
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 0.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.c-hero__lede {
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  color: var(--text-muted);
  max-width: 60ch;
  margin: 0 0 1.25rem;
  line-height: 1.5;
}

/* Regional coverage strip */
.c-coverage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  padding: 0.7rem 0.95rem;
  background: #fff;
  border: 1px solid var(--gray-300);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  box-shadow: 0 1px 2px rgba(11,42,74,0.04);
}
.c-coverage__label {
  font-weight: 600;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.c-coverage__label::before {
  content: "";
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 3px rgba(63,128,105,0.18);
  flex: 0 0 10px;
}
.c-coverage__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-coverage__list a {
  color: var(--blue);
  text-decoration: none;
  padding: 0.1rem 0.5rem;
  border-radius: var(--r-sm);
  background: var(--blue-tint);
  font-weight: 500;
  font-size: 0.85rem;
  transition: background 0.15s ease;
}
.c-coverage__list a:hover { background: var(--sky); color: var(--navy); }
.c-coverage__list a.is-flagship { background: var(--navy); color: #fff; }
.c-coverage__list a.is-flagship:hover { background: var(--blue-dark); }

/* --- "At a glance" quick-facts row --------------------------------- */
.c-facts {
  max-width: var(--content-max);
  margin: 1.5rem auto 0;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.85rem;
}
.c-fact {
  background: #fff;
  border: 1px solid var(--rule-light);
  border-left: 4px solid var(--teal);
  border-radius: 8px;
  padding: 0.85rem 1rem;
}
.c-fact__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-light);
  margin: 0 0 0.25rem;
}
.c-fact__value {
  font-size: 1.05rem;
  color: var(--navy);
  line-height: 1.35;
  margin: 0;
  font-weight: 500;
}

/* --- Section heads with italic tag --------------------------------- */
.is-condition .c-hero ~ .page-grid .content > section { border-bottom: 0; padding-bottom: 2rem; }
/* Section heads on condition/procedure pages — plain serif headings, no uppercase
   kicker + italic tag + blue border bar. Matches the rest of the site. */
.c-section-head {
  margin: 0 0 0.6rem;
}
.c-section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 1.65rem);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  letter-spacing: var(--tracking-tight);
  text-transform: none;
  line-height: 1.2;
}
.c-section-head__tag { display: none; }

/* --- Treatment-path visual stepper --------------------------------- */
.c-path {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 0 0 1rem;
}
@media (min-width: 720px) {
  .c-path { grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
}
.c-path__step {
  position: relative;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--rule-light);
  border-radius: var(--r-md);
  background: var(--bg);
}
.c-path__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--sage-tint);
  color: var(--sage-dark);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
.c-path__step h3 {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 0.35rem;
  line-height: 1.25;
}
.c-path__step p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

/* --- Surgical-option rich card ------------------------------------- */
.c-procs {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1fr;
}
@media (min-width: 680px) {
  .c-procs { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
.c-proc {
  display: block;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--r-md);
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.c-proc:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.c-proc__kicker {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--teal-dark);
  margin: 0 0 0.3rem;
}
.c-proc__name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 0.4rem;
  line-height: 1.25;
}
.c-proc__desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0 0 0.65rem;
  line-height: 1.5;
}
.c-proc__cta {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--blue);
}
.c-proc:hover .c-proc__cta { text-decoration: underline; }

/* --- X-ray figure on condition pages -------------------------------------
   Treatment: let the image breathe. It's a diagnostic image doing real
   educational work, so it gets the full width of the content column (no
   floating-in-the-sidebar treatment) and a near-black matte so the bone
   reads. Caption is a compact one-line meta row, not a boxed title
   card — strong/block styles from the base `.figure` rule are explicitly
   undone because the old treatment made the citation louder than the
   image.  Desktop cap: 720px. */
/* Legacy .figure--xray now inherits the inline float behaviour of the
   new .c-figure so every condition page's radiograph sits next to the
   narrative instead of sitting on its own full-width row. */
.is-condition .c-hero ~ .page-grid .figure--xray,
.is-condition .editorial-hero ~ .page-grid .figure--xray,
.is-procedure .c-hero ~ .page-grid .figure--xray {
  float: right;
  clear: right;
  width: clamp(220px, 32%, 320px);
  margin: 0.1rem 0 0.75rem 1.5rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  text-align: left;
}
.is-condition .c-hero ~ .page-grid .figure--xray img,
.is-condition .editorial-hero ~ .page-grid .figure--xray img,
.is-procedure .c-hero ~ .page-grid .figure--xray img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 340px;
  object-fit: contain;
  background: transparent;
  padding: 0;
  border-radius: 0;
  margin: 0;
}
.is-condition .c-hero ~ .page-grid .figure--xray figcaption,
.is-condition .editorial-hero ~ .page-grid .figure--xray figcaption,
.is-procedure .c-hero ~ .page-grid .figure--xray figcaption {
  margin-top: 0.45rem;
  padding: 0;
  font-family: "Source Serif Pro", Georgia, serif;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-muted);
  font-style: italic;
  text-align: left;
  letter-spacing: 0;
}
.is-condition .c-hero ~ .page-grid .figure--xray figcaption strong,
.is-condition .editorial-hero ~ .page-grid .figure--xray figcaption strong,
.is-procedure .c-hero ~ .page-grid .figure--xray figcaption strong {
  display: inline;
  font-size: inherit;
  color: var(--text);
  margin: 0 0.3rem 0 0;
  font-weight: 600;
  font-style: normal;
}
.is-condition .c-hero ~ .page-grid .figure--xray figcaption em,
.is-condition .editorial-hero ~ .page-grid .figure--xray figcaption em,
.is-procedure .c-hero ~ .page-grid .figure--xray figcaption em {
  display: block;
  margin-top: 0.18rem;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.01em;
  color: #a89f89;
  font-style: normal;
  opacity: 0.85;
}
.is-condition .c-hero ~ .page-grid .figure--xray figcaption a,
.is-condition .editorial-hero ~ .page-grid .figure--xray figcaption a,
.is-procedure .c-hero ~ .page-grid .figure--xray figcaption a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
@media (max-width: 720px) {
  .is-condition .c-hero ~ .page-grid .figure--xray,
  .is-condition .editorial-hero ~ .page-grid .figure--xray,
  .is-procedure .c-hero ~ .page-grid .figure--xray {
    float: none;
    width: min(100%, 360px);
    margin: 1rem auto 1.2rem;
  }
}

/* --- Bottom "pick your surgeon / location" funnel band ------------- */
.c-funnel {
  background: var(--navy);
  color: #fff;
  padding: 2rem 0;
  margin-top: 1.5rem;
}
.c-funnel__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 820px) {
  .c-funnel__inner { grid-template-columns: 1fr 1fr; }
}
.c-funnel__col h3 {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sky);
  margin: 0 0 0.6rem;
  font-weight: 600;
}
.c-funnel__q {
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 1rem;
  line-height: 1.25;
}
.c-funnel__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.c-funnel__list a {
  display: inline-block;
  padding: 0.45rem 0.85rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--r-sm);
  color: #fff;
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.c-funnel__list a:hover {
  background: rgba(255,255,255,0.18);
  border-color: #fff;
}

/* Hide the old-style "Surgical options at OSI" callout section that was
   added by an earlier fix script — redesigned pages use .c-procs instead. */
.is-condition.has-hero #surgical-options-at-osi { display: none; }
.is-condition.has-hero .tab-nav [href="#surgical-options-at-osi"] { display: none; }

/* Mobile-first: tighter hero, but keep H1:H2 step legible on small screens */
@media (max-width: 540px) {
  .c-hero { padding: 1rem 0 1.1rem; }
  .c-hero h1 { font-size: 2.1rem; line-height: 1.12; }
  .c-hero__lede { font-size: 1rem; }
  .c-coverage { padding: 0.55rem 0.7rem; gap: 0.4rem 0.6rem; }
  .c-facts { margin-top: 1rem; gap: 0.6rem; }
  .c-fact { padding: 0.65rem 0.8rem; }
  .c-funnel { padding: 1.5rem 0; }
  .c-funnel__q { font-size: 1.15rem; }
  body.is-condition .content h2,
  body.is-procedure .content h2 { font-size: 1.4rem; margin-top: 2rem; }
  body.is-condition .content h3,
  body.is-procedure .content h3 { font-size: 1.1rem; margin-top: 1.4rem; }
}

/* =====================================================================
   12. Editorial hero (landing page) — asymmetric, left-aligned
   ===================================================================== */
.editorial-hero {
  border-bottom: 1px solid var(--rule);
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5.5rem);
  background: var(--paper);
}
.editorial-hero__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 820px) {
  .editorial-hero__inner { grid-template-columns: 1fr; gap: 1.75rem; }
  .editorial-hero__figure { order: -1; }
}
.editorial-hero__kicker {
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 1.1rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--sage);
  display: inline-block;
}

/* Masthead lockup — big typographic expansion of the OSI acronym. The mark
   itself lives in the header; this is the spelled-out wordmark. */
.masthead-lockup {
  margin: 0 0 1.75rem;
  max-width: 100%;
}
.masthead-lockup__words {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-family: var(--font-display);
  color: var(--navy);
  line-height: 1.18;
}
.masthead-lockup__name {
  font-size: clamp(1.95rem, 3.35vw, 2.8rem);     /* 1.4× prior */
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
}
.masthead-lockup__place {
  font-size: clamp(1.4rem, 2.1vw, 1.75rem);      /* 1.4× prior */
  font-weight: 400;
  font-style: italic;
  color: var(--text-muted);
}
@media (max-width: 540px) {
  .masthead-lockup { margin-bottom: 1.25rem; }
  .masthead-lockup__name { font-size: 1.9rem; }  /* 1.4× prior (1.35rem) */
  .masthead-lockup__place { font-size: 1.4rem; } /* 1.4× prior (1rem) */
}
.editorial-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.2vw, 2.5rem);
  line-height: 1.18;
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: 0 0 1.2rem;
  max-width: 22ch;
}
.editorial-hero__lede {
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--gray-700);
  max-width: 46ch;
  margin: 0 0 1.75rem;
}
.editorial-hero__cta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  font-family: var(--font);
}
.editorial-hero__phone {
  font-size: 0.95rem;
  color: var(--gray-500);
}
.editorial-hero__phone a {
  color: var(--navy);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--rule);
}
.editorial-hero__figure {
  margin: 0;
}
.editorial-hero__figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.02);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-md);
  transition: transform 500ms var(--ease), box-shadow 500ms var(--ease), filter 500ms var(--ease);
}
.editorial-hero__figure:hover img {
  transform: scale(1.01);
  box-shadow: var(--shadow-lg);
  filter: saturate(0.95) contrast(1.02);
}
.editorial-hero__figure figcaption {
  margin-top: 0.6rem;
  font-family: var(--font);
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  color: var(--gray-500);
}

/* Flat editorial button — subtle lift on hover. Not a pill, not a gradient. */
.btn-ink {
  display: inline-flex;
  align-items: center;
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.7rem 1.4rem;
  background: var(--navy);
  color: #fff;
  border: 1px solid var(--navy);
  border-radius: var(--r-sm);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition:
    background 200ms var(--ease),
    border-color 200ms var(--ease),
    transform 200ms var(--ease),
    box-shadow 200ms var(--ease);
}
.btn-ink:hover {
  background: var(--navy-dark);
  border-color: var(--navy-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-ink:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}
.btn-ink:focus-visible { outline: 2px solid var(--sage-dark); outline-offset: 2px; }

/* Varied vertical rhythm for the landing sections */
.providers-preview { padding-top: 4rem; padding-bottom: 3rem; border-bottom: 1px solid var(--rule); }
.photostrip { padding-top: 2.5rem; padding-bottom: 3rem; }
.locmap { padding-top: 3.5rem; padding-bottom: 2.5rem; }
.locations-strip { padding-top: 3rem; padding-bottom: 4.5rem; }
.first-visit { padding-top: 4.5rem; padding-bottom: 4rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

/* Photos across the site get the same desaturated editorial mood */
.provider-card__photo img,
.location-card__photo img,
.photostrip__tile img {
  filter: saturate(0.85);
}

/* Editorial first-visit: 2-col prose + <dl>, no icon cards */
.first-visit__inner--editorial {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 820px) {
  .first-visit__inner--editorial { grid-template-columns: 1fr; gap: 2rem; }
}
.first-visit__prose {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
}
.first-visit__prose .first-visit__eyebrow {
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--navy);
  padding-left: 0.75rem;
  border-left: 2px solid var(--sage);
  display: inline-block;
  margin: 0 0 1rem;
}
.first-visit__prose h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.3vw, 1.85rem);
  line-height: 1.22;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 1.1rem;
  letter-spacing: var(--tracking-tight);
}
.first-visit__prose p { margin: 0 0 0.9rem; }
.first-visit__prose a { color: var(--navy); }
.first-visit__link {
  font-family: var(--font);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.first-visit__link:hover { border-bottom-color: var(--navy); }

.first-visit__list {
  margin: 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 821px) {
  .first-visit__list { border-top: 0; padding-top: 0.4em; }
}
.first-visit__list dt {
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 1.4rem 0 0.35rem;
}
.first-visit__list dt:first-of-type { margin-top: 0; }
.first-visit__list dd {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Referral card — for conditions OSI does not treat. Editorial, not flashy. */
.referral-card {
  margin: 1.2rem 0 1.4rem;
  padding: 1.1rem 1.25rem;
  background: #fffdf7;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--navy);
}
.referral-card__kicker {
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 0.3rem;
}
.referral-card__name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.5rem;
  letter-spacing: var(--tracking-tight);
}
.referral-card__note {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}
.referral-card__note a { color: var(--navy); }

/* ───────── Wide content variant + condition/procedure grids ─────────
   Pages like /procedures/index.html declare <main class="content content--wide">
   but no rule defined content--wide, so the main column collapsed to the
   narrow article width (68ch). That made text hug the left side. This
   variant opens the column to the site's wide content measure and
   centers it within the viewport. */
main.content.content--wide,
.content--wide {
  max-width: var(--content-max, 1200px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 2.5rem var(--gutter, 1.5rem) 4rem !important;
  font-size: var(--fs-body);
  line-height: 1.65;
}
/* Condition group = section of the procedures/conditions index. */
.condition-group {
  margin: 0 0 3rem;
}
.condition-group > h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2, 1.75rem);
  color: var(--navy);
  margin: 0 0 0.25rem;
  letter-spacing: var(--tracking-tight);
}
.condition-group > p {
  color: var(--text-muted);
  margin: 0 0 1.25rem;
  max-width: 64ch;
}
.condition-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  column-gap: 1.25rem;
  row-gap: 0.6rem;
  align-items: start;      /* let each card take its natural height */
  margin-top: 0.4rem;
}
.condition-card {
  display: block;
  padding: 0.55rem 0 0.7rem 0.85rem;
  background: transparent;
  border: 0;
  border-left: 2px solid var(--rule);
  border-radius: 0;
  color: var(--navy);
  text-decoration: none;
  transition: border-color 180ms var(--ease), transform 180ms var(--ease);
}
.condition-card:hover,
.condition-card:focus-visible {
  transform: none;
  box-shadow: none;
  border-left-color: var(--navy);
  outline: none;
}
.condition-card h3 {
  margin: 0 0 0.2rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.25;
}
.condition-card p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text);
}
.condition-card__title,
.condition-card > strong,
.condition-card > .condition-card__title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
  color: var(--navy);
}
.condition-card__sub,
.condition-card > span,
.condition-card > em {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: normal;
}

/* ───────── Top-bar CTAs (phone + Request appointment) ─────────
   Injected into the utility strip by nextgen.js so every page shows a
   clickable phone number and a prominent Request-appointment link at the
   very top. The utility strip is kept visible at every scroll position. */
.site-header__utility-inner {
  display: flex !important;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.site-header__utility-phone {
  font-weight: 600 !important;
  color: #fff !important;
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.site-header__utility-phone:hover { text-decoration: underline; }
.site-header__utility-cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  background: var(--sage-dark, #3F8069);
  color: #fff !important;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 160ms var(--ease);
}
.site-header__utility-cta:hover { background: #2F6450; color: #fff !important; }

/* Keep the utility strip visible on scroll — this used to collapse.
   That's OVERRIDDEN so the phone and Request-appointment CTA stay in view. */
html body .site-header.is-scrolled .site-header__utility {
  max-height: 60px !important;
  padding-top: 0.45rem !important;
  padding-bottom: 0.45rem !important;
  overflow: visible !important;
  border: 0 !important;
}

@media (max-width: 520px) {
  .site-header__utility-inner { gap: 0.55rem; }
  .site-header__utility-cta { padding: 0.3rem 0.65rem; font-size: 0.78rem; }
  .site-header__utility-phone { font-size: 0.82rem; }
}

/* ---------- Unified dropdown typography ----------
   Use the Locations-dropdown treatment (Inter 0.86rem / weight 500 / navy)
   across every dropdown panel — simple menus AND mega menus — so the
   whole nav feels like one consistent family. */
html body .site-header__nav--boxed .nav-menu a,
html body .site-header__nav--boxed .nav-menu--mega a,
html body .site-header__nav--boxed .nav-menu--mega .nav-mega__label,
html body .site-header__nav--boxed .nav-menu--mega .nav-mega__footer,
html body .site-header__nav--boxed .nav-menu--mega .nav-mega__quickjump,
html body .site-header__nav--boxed .nav-menu--mega .nav-mega__quickjump a,
html body .site-header__nav--boxed .nav-menu--mega .nav-mega__cat-label,
html body .site-header__nav--boxed .nav-menu--mega .nav-mega__quickjump-label,
html body .site-header__nav--boxed .nav-menu--mega .nav-mega__empty {
  font-family: var(--font, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
  letter-spacing: 0.01em !important;
}
html body .site-header__nav--boxed .nav-menu--mega a,
html body .site-header__nav--boxed .nav-menu--mega .nav-mega__label {
  font-size: 0.86rem !important;
  font-weight: 500 !important;
  color: var(--navy, #0f2a44) !important;
  text-transform: none !important;
}
html body .site-header__nav--boxed .nav-menu--mega .nav-mega__label {
  font-weight: 600 !important;
  border-bottom: 1px solid #e4ddd1 !important;
}
html body .site-header__nav--boxed .nav-menu--mega .nav-mega__footer {
  font-size: 0.84rem !important;
  font-weight: 500 !important;
}
html body .site-header__nav--boxed .nav-menu--mega .nav-mega__cat-label,
html body .site-header__nav--boxed .nav-menu--mega .nav-mega__quickjump-label {
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #8a7f6b !important;
}

/* ---------- Universal hover affordance ----------
   Every clickable thing should show it's clickable on hover. The goal is a
   subtle, consistent cue — underline + color shift for text links, a gentle
   background tint on dropdown rows, and a lift for any card/button that
   doesn't already have its own hover treatment. */

/* Every anchor in main content gets a color shift + smooth transition. */
main a,
footer a {
  transition: color 140ms var(--ease), background-color 140ms var(--ease),
              text-decoration-color 140ms var(--ease), opacity 140ms var(--ease);
}

/* Body-copy text links: underline on hover + accent color. */
main a:hover,
main a:focus-visible,
footer a:hover,
footer a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  color: #1f4ea5;
}

/* But not on cards / provider tiles / region lists — those have their own. */
.condition-card:hover,
.lp-person a:hover,
.lp-region-col__list a:hover,
.lp-region-col__rest a:hover,
.nav-box:hover,
.nav-box__link:hover,
.nav-menu a:hover,
.nav-menu--mega a:hover,
.btn-appt:hover {
  text-decoration: none !important;
}

/* Dropdown rows: subtle tinted background + slight inward nudge on hover. */
html body .site-header__nav--boxed .nav-menu a,
html body .site-header__nav--boxed .nav-menu--mega a,
html body .site-header__nav--boxed .nav-menu--mega .nav-mega__label {
  transition: background-color 140ms var(--ease), color 140ms var(--ease),
              padding-left 140ms var(--ease) !important;
}
html body .site-header__nav--boxed .nav-menu a:hover,
html body .site-header__nav--boxed .nav-menu a:focus-visible {
  background: #f4efe5 !important;
  color: #1f4ea5 !important;
}
html body .site-header__nav--boxed .nav-menu--mega a:hover,
html body .site-header__nav--boxed .nav-menu--mega a:focus-visible {
  background: #f4efe5 !important;
  color: #1f4ea5 !important;
}
html body .site-header__nav--boxed .nav-menu--mega .nav-mega__label:hover,
html body .site-header__nav--boxed .nav-menu--mega .nav-mega__label:focus-visible {
  color: #1f4ea5 !important;
}

/* Condition-directory region lists — underline + color on hover. */
.lp-region-col__list a,
.lp-region-col__rest a {
  transition: color 140ms var(--ease), text-decoration-color 140ms var(--ease);
}
.lp-region-col__list a:hover,
.lp-region-col__list a:focus-visible,
.lp-region-col__rest a:hover,
.lp-region-col__rest a:focus-visible {
  color: #1f4ea5;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Region chips (filter pills) — subtle lift on hover. */
.lp-chip {
  transition: background-color 140ms var(--ease), color 140ms var(--ease),
              border-color 140ms var(--ease), transform 140ms var(--ease);
}
.lp-chip:hover:not(.is-active),
.lp-chip:focus-visible:not(.is-active) {
  background: #f4efe5;
  border-color: var(--navy, #0f2a44);
  color: var(--navy, #0f2a44);
}

/* Footer links: restore a clear hover since they're on white. */
.site-footer a {
  transition: color 140ms var(--ease), text-decoration-color 140ms var(--ease);
}
.site-footer a:hover,
.site-footer a:focus-visible {
  color: #1f4ea5;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Request-Appointment CTA button: deepen on hover. */
.btn-appt {
  transition: background-color 160ms var(--ease), color 160ms var(--ease),
              box-shadow 160ms var(--ease), transform 160ms var(--ease);
}
.btn-appt:hover,
.btn-appt:focus-visible {
  filter: brightness(0.94);
  box-shadow: 0 6px 16px rgba(20, 30, 60, 0.18);
  transform: translateY(-1px);
}

/* Breadcrumb link hover — border-bottom handled in styles.css; just tint color. */
.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  color: #1f4ea5;
}

/* Phone & mail links in header utility — soft brighten. */
.site-header__utility a:hover,
.site-header__utility a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* All interactive elements get explicit pointer cursor as a safety net. */
a, button, .condition-card, .lp-person a, .nav-box, .nav-box__link, .btn-appt, .lp-chip {
  cursor: pointer;
}

/* ─────────────────────────────────────────────
   Provider reviews (per-doctor)
   Renders a clean summary + review cards. Wired
   to accept Google Business Profile reviews once
   Place IDs + API key are provided — see
   assets/nextgen.js, loadGoogleReviews().
   ───────────────────────────────────────────── */
.provider-reviews {
  max-width: 78ch;
  margin: 3rem auto 3.5rem;
  padding: 0 1.25rem;
}
.provider-reviews__eyebrow {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}
.provider-reviews__title {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--navy, #0f2a44);
  margin: 0 0 1.1rem;
}
.reviews-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1rem;
  padding: 0.85rem 0 1rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.25rem;
}
.reviews-summary__score {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--navy, #0f2a44);
  line-height: 1;
}
.reviews-summary__stars,
.review-card__stars {
  color: #d97706;
  letter-spacing: 0.1em;
  font-size: 1rem;
  font-family: system-ui, -apple-system, sans-serif;
}
.reviews-summary__count {
  color: var(--text-muted);
  font-size: 0.88rem;
}
.reviews-summary__source {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.reviews-summary__source a {
  color: var(--text-muted);
  border-bottom: 1px dotted var(--rule);
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem 1.25rem;
}
.review-card {
  border-left: 2px solid var(--rule);
  padding: 0.55rem 0 0.75rem 0.9rem;
  background: transparent;
}
.review-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.65rem;
  margin-bottom: 0.35rem;
}
.review-card__name {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text, #1d2231);
}
.review-card__date {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.review-card__body {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text, #1d2231);
  margin: 0;
}
.review-card__body--placeholder {
  color: var(--text-muted);
  font-style: italic;
}
.reviews-cta {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.reviews-cta__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--navy, #0f2a44);
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--navy, #0f2a44);
  text-decoration: none;
  transition: background-color 140ms var(--ease), color 140ms var(--ease);
}
.reviews-cta__link:hover,
.reviews-cta__link:focus-visible {
  background: var(--navy, #0f2a44);
  color: #fff;
  text-decoration: none;
}

/* ─────────────────────────────────────────────
   Site credit signature (below main footer)
   Quiet dark band. Cross-platform handle +
   website feedback link.
   ───────────────────────────────────────────── */
.site-credit {
  background: #0a1524;
  color: #b4bdd0;
  font-size: 0.78rem;
  line-height: 1.5;
  padding: 0.95rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.site-credit__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 1.3rem;
  text-align: center;
}
.site-credit__mark {
  color: #dbe0ec;
  letter-spacing: 0.01em;
}
.site-credit__mark strong {
  color: #fff;
  font-weight: 600;
}
.site-credit__sep {
  opacity: 0.35;
  user-select: none;
}
.site-credit__social,
.site-credit__feedback {
  color: #c5ccdd;
  text-decoration: none;
  border-bottom: 1px dotted rgba(197, 204, 221, 0.35);
  padding-bottom: 1px;
  transition: color 140ms var(--ease), border-color 140ms var(--ease);
}
.site-credit__social:hover,
.site-credit__social:focus-visible,
.site-credit__feedback:hover,
.site-credit__feedback:focus-visible {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.75);
  border-bottom-style: solid;
  text-decoration: none;
}
@media (max-width: 540px) {
  .site-credit__sep { display: none; }
  .site-credit__inner { gap: 0.25rem 0.9rem; }
}

/* ═══════════════════════════════════════════════════════════
   NAV ENGINE v2 — state-machine-driven dropdowns
   ═══════════════════════════════════════════════════════════

   Active when <html data-nav-engine="ready"> is set by JS
   (see nextgen.js → NavEngine IIFE near bottom of file).

   Single source of truth per trigger:
     <div class="nav-box nav-box--has-menu" data-nav-state="closed|open">
   And per cascade row:
     <div class="nav-mega__group ..." data-flyout-state="closed|open">

   Legacy :hover / .is-open CSS above remains as fallback if JS
   fails to load — graceful degradation, no deletions needed.

   Rules override legacy selectors via the html[data-nav-engine]
   attribute scope. Wins cleanly in specificity + cascade order.
   ─────────────────────────────────────────────────────────── */

/* 1) When the engine is ready, every dropdown menu starts hidden
      and only opens when data-nav-state="open". Legacy :hover and
      .is-open rules are neutralized by this more-specific scope. */
html[data-nav-engine="ready"] .site-header__nav--boxed .nav-box--has-menu .nav-menu {
  display: block;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  visibility: hidden;
  transition:
    opacity 170ms cubic-bezier(.2,.7,.3,1),
    transform 170ms cubic-bezier(.2,.7,.3,1),
    visibility 0s linear 170ms;
}

html[data-nav-engine="ready"] .site-header__nav--boxed .nav-box--has-menu[data-nav-state="open"] > .nav-menu,
html[data-nav-engine="ready"] .site-header__nav--boxed .nav-box--has-menu[data-nav-state="open"] .nav-menu:not(.nav-submenu) {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
  transition:
    opacity 170ms cubic-bezier(.2,.7,.3,1),
    transform 170ms cubic-bezier(.2,.7,.3,1),
    visibility 0s linear 0s;
}

/* 2) Kill legacy :hover-based opening on mega-cascade flyouts. Only
      data-flyout-state="open" opens them. */
html[data-nav-engine="ready"] .site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__group:hover > .nav-mega__flyout,
html[data-nav-engine="ready"] .site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__group:focus-within > .nav-mega__flyout,
html[data-nav-engine="ready"] .site-header__nav--boxed .nav-menu--mega-cascade.hover-intent-on .nav-mega__group.is-active > .nav-mega__flyout {
  display: block;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* 3) Uniform cascade rows — "Hip", "Knee", etc. match the flyout
      item type exactly so the left column reads as one tidy list,
      not "big region label + small sub-links". Sleek and quiet. */
html[data-nav-engine="ready"] .site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__label {
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0.46rem 0.72rem;
  color: #13243b;
  border-radius: 3px;
  line-height: 1.3;
  transition: background-color 140ms cubic-bezier(.2,.7,.3,1),
              color 140ms cubic-bezier(.2,.7,.3,1);
}
html[data-nav-engine="ready"] .site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__label::after {
  content: "\203A";
  font-size: 0.9rem;
  color: #b5a990;
  margin-left: auto;
  line-height: 1;
  transition: color 140ms cubic-bezier(.2,.7,.3,1),
              transform 140ms cubic-bezier(.2,.7,.3,1);
}
html[data-nav-engine="ready"] .site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__group[data-flyout-state="open"] > .nav-mega__label {
  background: #f1ebdd;
  color: #1f4ea5;
}
html[data-nav-engine="ready"] .site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__group[data-flyout-state="open"] > .nav-mega__label::after {
  color: #1f4ea5;
  transform: translateX(2px);
}

/* 4) Flyout positioning driven by --flyout-top CSS var written by
      JS. Replaces the brittle anchor-bottom class toggling. */
html[data-nav-engine="ready"] .site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__flyout {
  display: block !important;
  position: absolute;
  top: var(--flyout-top, 0);
  left: 100%;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-3px);
  visibility: hidden;
  transition:
    opacity 150ms cubic-bezier(.2,.7,.3,1),
    transform 150ms cubic-bezier(.2,.7,.3,1),
    visibility 0s linear 150ms;
}
html[data-nav-engine="ready"] .site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__group[data-flyout-state="open"] > .nav-mega__flyout {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(0) !important;
  visibility: visible !important;
  transition:
    opacity 150ms cubic-bezier(.2,.7,.3,1),
    transform 150ms cubic-bezier(.2,.7,.3,1),
    visibility 0s linear 0s !important;
}

/* 5) On narrow viewports (< 900px), cascade flattens: flyouts flow
      inline as a single scrolling list, data-flyout-state is ignored,
      transitions disabled. Matches existing mobile drawer feel. */
@media (max-width: 900px) {
  html[data-nav-engine="ready"] .site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__flyout {
    position: static !important;
    top: auto !important;
    left: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    visibility: visible !important;
    transition: none !important;
  }
  html[data-nav-engine="ready"] .site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__label::after {
    display: none;
  }
}

/* 6) Respect prefers-reduced-motion — kill all transitions. */
@media (prefers-reduced-motion: reduce) {
  html[data-nav-engine="ready"] .site-header__nav--boxed .nav-menu,
  html[data-nav-engine="ready"] .site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__flyout {
    transition: none !important;
    transform: none !important;
  }
}

/* 7) Mobile drawer (< 700px): data-nav-state drives accordion rather
      than positioned dropdown. Menus flow inline in the drawer. */
@media (max-width: 699px) {
  html[data-nav-engine="ready"] .site-header__nav--boxed .nav-box--has-menu .nav-menu {
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: none !important;
    max-height: 0;
    overflow: hidden;
  }
  html[data-nav-engine="ready"] .site-header__nav--boxed .nav-box--has-menu[data-nav-state="open"] .nav-menu {
    max-height: none;
    transition: none !important;
  }
}

/* 8) Keyboard focus rings — visible but quiet. */
html[data-nav-engine="ready"] .site-header__nav--boxed .nav-box--has-menu .nav-box__link:focus-visible,
html[data-nav-engine="ready"] .site-header__nav--boxed .nav-menu a:focus-visible,
html[data-nav-engine="ready"] .site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__label:focus-visible,
html[data-nav-engine="ready"] .site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__flyout a:focus-visible {
  outline: 2px solid #1f4ea5;
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Further Reading — authoritative-sources block appearing at end of
   condition/procedure pages. Links are a mix of external (Britannica, AAOS
   OrthoInfo) and internal (OSI glossary). Keep the block visually quieter
   than a primary content list so readers recognize it as references, not
   care instructions.
   --------------------------------------------------------------------------- */
#further-reading { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(32, 48, 112, 0.14); }
#further-reading > p { color: #4a4f63; margin: 0.4rem 0 0.9rem; }
.further-reading-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.4rem;
}
.further-reading-list li {
  position: relative;
  padding-left: 1.1rem;
  line-height: 1.5;
}
.further-reading-list li::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 0;
  color: #4c63a7;
  font-weight: 600;
}
.further-reading-list a {
  color: #1f4ea5;
  text-decoration: none;
  border-bottom: 1px dotted rgba(31, 78, 165, 0.35);
}
.further-reading-list a:hover,
.further-reading-list a:focus-visible {
  color: #143a82;
  border-bottom-color: #143a82;
  background: rgba(31, 78, 165, 0.04);
}
.further-reading-list a[target="_blank"]::after {
  content: " \2197";
  font-size: 0.85em;
  color: #6b7190;
  margin-left: 2px;
}