/* ========================================================================
   OSI landing enhancements — drop-in additions to styles.css
   Load AFTER styles.css:
     <link rel="stylesheet" href="assets/enhancements.css">
   ======================================================================== */

/* ─── 0. ANATOMY ICONS (PNG raster icons, transparent bg) ─────── */
img.anat-icon {
  width: 1.6em;
  height: 1.6em;
  display: inline-block;
  vertical-align: -0.4em;
  margin-right: 0.35em;
  flex-shrink: 0;
  object-fit: contain;
}
/* Landing page — sized to sit neatly inline with chip/label text */
.lp-chip img.anat-icon {
  width: 1.9em;
  height: 1.9em;
  vertical-align: -0.55em;
  margin-right: 0.35em;
}
.lp-region-col__label img.anat-icon {
  width: 2.8em;
  height: 2.8em;
  vertical-align: -0.9em;
  margin-right: 0.4em;
}
/* Mega-menu dropdowns — 1.5× bigger */
.nav-mega__label img.anat-icon {
  width: 2.3em;
  height: 2.3em;
  vertical-align: -0.7em;
  margin-right: 0.4em;
}
.nav-mega__group a:not(.nav-mega__label) img.anat-icon {
  width: 2em;
  height: 2em;
  vertical-align: -0.6em;
  margin-right: 0.35em;
  opacity: 0.75;
}
.nav-mega__quickjump a img.anat-icon {
  width: 2em;
  height: 2em;
  vertical-align: -0.65em;
  margin-right: 0.25em;
}

/* ─── 1. HERO VIDEO LOOP ────────────────────────────────────────────────── */
/* Replaces the static hero photo with an autoplaying muted loop + overlay.
   Keeps .hero-photo__image as a still poster for mobile / reduced-motion. */
.hero-photo__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-photo__video + .hero-photo__scrim { z-index: 1; }
.hero-photo__content { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .hero-photo__video { display: none; }
}

/* ─── 2. APPOINTMENT STRIP ──────────────────────────────────────────────── */
/* Pinned band directly under the hero — body region → auto-filters team → call. */
.apptbar {
  background: #0f2a44;
  color: #fff;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.apptbar__inner {
  max-width: var(--content-max); margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 1rem;
}
.apptbar--slim { padding: 0.9rem 1.5rem; }
.apptbar__inner--slim {
  display: block;
  text-align: center;
}
.apptbar--slim .apptbar__label {
  font-size: 1.15rem;
}
.apptbar__label {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.01em;
  margin: 0;
}
.apptbar__label span { color: #9ec5ff; font-style: italic; font-weight: 400; }
.apptbar select {
  background: #fff; color: #0f2a44;
  border: 0; border-radius: 6px;
  padding: 0.7rem 0.9rem;
  font-size: 0.95rem; font-family: inherit;
  min-width: 180px;
}
.apptbar .apptbar__providers {
  display: flex; flex-wrap: nowrap;
  align-items: center; gap: 0.9rem;
  overflow-x: auto;
  padding: 0.25rem 0.25rem 0.75rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.35) transparent;
  background: transparent;
  min-width: 0;
}
.apptbar .apptbar__providers::-webkit-scrollbar { height: 6px; }
.apptbar .apptbar__providers::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.35); border-radius: 3px; }
.apptbar .apptbar__providers img {
  width: 56px; height: 56px; flex: 0 0 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 22%;       /* bias upward so heads sit centered in the circle */
  border: 2px solid #fff;
  background: #cbd5e1;
  margin: 0;
}
.apptbar__cta {
  background: #fff; color: #0f2a44;
  padding: 0.7rem 1.25rem; border-radius: 6px;
  font-weight: 600; text-decoration: none;
  transition: background .15s;
}
.apptbar__cta:hover { background: #e6f0ff; }

@media (max-width: 820px) {
  .apptbar__inner {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  .apptbar select,
  .apptbar .apptbar__providers,
  .apptbar__cta { width: 100%; }
  .apptbar__cta { text-align: center; }
}

/* ─── 3. ZIP LOCATION PICKER ────────────────────────────────────────────── */
.locator {
  background: #f6f3ee;
  padding: 3rem 1.5rem;
  border-top: 1px solid #e4ddd1;
}
.locator__inner { max-width: 980px; margin: 0 auto; }
.locator__head { text-align: center; margin-bottom: 1.75rem; }
.locator__head h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 2rem; line-height: 1.15; margin: 0 0 0.5rem;
  color: #0f2a44; letter-spacing: -0.015em;
}
.locator__head p { color: #555; margin: 0; }

.locator__form {
  display: flex; gap: 0.5rem; justify-content: center;
  margin: 0 auto 1.5rem; max-width: 420px;
}
.locator__input {
  flex: 1;
  padding: 0.85rem 1rem;
  font-size: 1.05rem; font-family: inherit;
  border: 1px solid #c9bfae;
  border-radius: 6px; background: #fff;
}
.locator__input:focus { outline: 2px solid #0f2a44; outline-offset: 1px; }
.locator__submit {
  padding: 0.85rem 1.4rem;
  background: #0f2a44; color: #fff;
  border: 0; border-radius: 6px;
  font-weight: 600; cursor: pointer;
  font-family: inherit; font-size: 1rem;
}
.locator__submit:hover { background: #1a3a5c; }

.locator__results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.locator__result {
  background: #fff;
  padding: 1.15rem 1.25rem;
  border-radius: 8px;
  border: 1px solid #e4ddd1;
  display: flex; flex-direction: column;
  gap: 0.35rem;
  position: relative;
}
.locator__result--nearest {
  border-color: #0f2a44;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.locator__result--nearest::before {
  content: 'Nearest to you';
  position: absolute; top: -10px; left: 12px;
  background: #0f2a44; color: #fff;
  font-size: 0.72rem; font-weight: 600;
  padding: 3px 8px; border-radius: 4px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.locator__result h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.3rem; margin: 0; color: #0f2a44;
}
.locator__miles { color: #666; font-size: 0.9rem; font-weight: 500; }
.locator__addr { color: #333; font-size: 0.92rem; margin: 0.15rem 0; }
.locator__hours { color: #666; font-size: 0.85rem; font-style: italic; margin: 0; }
.locator__result a.tel {
  margin-top: 0.6rem;
  color: #0f2a44; font-weight: 600;
  text-decoration: none; font-size: 0.95rem;
}
.locator__result a.tel:hover { text-decoration: underline; }

.locator__error {
  text-align: center; color: #a02525;
  margin-top: 0.75rem; font-size: 0.92rem;
}

/* ─── 4. CONDITION-PAGE PROVIDER PHOTOS (replaces initials) ─────────────── */
/* Use alongside the <img> markup change described in the patch notes.
   Falls back to initials via data-initials attribute when no img loads. */
.physician-card__portrait,
.portrait {
  position: relative;
  overflow: hidden;
  background: #e5e0d6;
}
.physician-card__portrait img,
.portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 22%;   /* bias upward so heads sit centered in the circle */
  display: block;
  position: absolute; inset: 0;
}
.physician-card__portrait[data-initials]::before,
.portrait[data-initials]::before {
  content: attr(data-initials);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #8a7f6b; font-weight: 600;
  font-family: 'Fraunces', Georgia, serif;
  letter-spacing: 0.04em;
}
.physician-card__portrait img,
.portrait img { z-index: 1; }
/* When an <img> successfully loads it covers the ::before initials naturally. */

/* Diagram figure variant — wider, white background, no black matte.
   Use in place of .figure--xray for anatomical illustrations. */
.figure--diagram {
  width: 320px;
  background: #fafaf7;
  padding: 1rem;
}
.figure--diagram img,
.figure--diagram svg {
  background: #fff;
  padding: 0.75rem;
  border-radius: var(--r-sm);
}
.figure--diagram figcaption { color: var(--text-muted); margin-top: 0.75rem; padding: 0 0.25rem; }
.figure--diagram figcaption strong { color: var(--navy); }
@media (max-width: 720px) { .figure--diagram { width: 100%; } }

/* ─── Boxed, all-caps top nav with hover dropdowns ─────────────────────────── */
.site-header__nav--boxed {
  gap: 0.5rem;
  font-family: 'Inter', sans-serif;
}
.site-header__nav--boxed .nav-box {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 0.55rem 0.9rem;
  border: 1px solid transparent;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--navy, #0f2a44);
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
  cursor: pointer;
}
.site-header__nav--boxed .nav-box:hover,
.site-header__nav--boxed .nav-box:focus-within {
  background: #f4efe5;
  border-color: #e4ddd1;
  color: var(--navy, #0f2a44);
}
.site-header__nav--boxed .nav-box[aria-current="page"] {
  background: var(--navy, #0f2a44);
  color: #fff;
  border-color: var(--navy, #0f2a44);
}
.site-header__nav--boxed .nav-box__link {
  color: inherit; text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.site-header__nav--boxed .nav-box__caret {
  font-size: 0.65rem; opacity: 0.7;
  transition: transform .15s;
}
.site-header__nav--boxed .nav-box--has-menu:hover .nav-box__caret,
.site-header__nav--boxed .nav-box--has-menu:focus-within .nav-box__caret {
  transform: translateY(1px);
}

/* Dropdown panel — no gap between trigger and menu (hover would break across a gap) */
.site-header__nav--boxed .nav-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;          /* visual breathing room */
  min-width: 220px;
  background: #fff;
  border: 1px solid #e4ddd1;
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  padding: 0.4rem 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-2px);
  transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
  z-index: 1000;
}
/* Invisible bridge so the cursor never crosses a hover dead-zone */
.site-header__nav--boxed .nav-menu::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -8px; height: 8px;
}
/* Menu visibility — ONLY driven by .is-open (JS nav engine) or
   :focus-within (keyboard access). :hover was intentionally removed
   from the opening trigger because it bypassed the 80ms intent-hover
   debounce in setupNavEngine, causing flicker when the cursor
   traversed the nav bar and a race where clicks arrived with the
   menu already CSS-open. The engine now owns all open/close timing. */
.site-header__nav--boxed .nav-box--has-menu.is-open .nav-menu,
.site-header__nav--boxed .nav-box--has-menu:focus-within .nav-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity .12s ease, transform .12s ease, visibility 0s linear 0s;
}
.site-header__nav--boxed .nav-box--has-menu.is-open {
  background: #f4efe5;
  border-color: #e4ddd1;
  color: var(--navy, #0f2a44);
}
.site-header__nav--boxed .nav-box--has-menu.is-open .nav-box__caret {
  transform: translateY(1px);
}
.site-header__nav--boxed .nav-box--has-menu.is-switching .nav-menu {
  transition: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Right-alignment used to live on :nth-of-type(3) when Providers sat third
   in the nav. The nav order has since been reshuffled and position 3 is
   now the "What we treat" cascade mega menu, which has its own
   positionCascade() JS layout — forcing right:0 on it pushed the flyout
   off-screen on the left. Rule intentionally removed. If a simple dropdown
   (Providers / Patient resources) ever needs edge-safety, add a class
   like .nav-menu--right-aligned and target that, not the positional
   pseudo-class. */
.site-header__nav--boxed .nav-menu a {
  display: block;
  padding: 0.55rem 1rem;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--navy, #0f2a44);
  text-decoration: none;
  transition: background .12s, color .12s;
}
.site-header__nav--boxed .nav-menu a:hover {
  background: #f4efe5;
  color: var(--blue, #1f4ea5);
}

/* Request-appointment button: also all caps to match */
.site-header__nav--boxed .btn-appt {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.72rem;
}

/* Legacy <=680px nav-hide rule removed — we now have a hamburger drawer.
   The mobile nav fully lives inside .site-header__nav--boxed at <=699px
   via rules in nextgen.css. */

/* ─── Anchor scroll offset — so sticky header doesn't cover targets ───────── */
.region-tile, [id^="region-"], #conditions,
#hip, #knee, #shoulder, #elbow, #hand, #spine, #foot, #general,
section[id] { scroll-margin-top: 130px; }

/* ─── Hero aesthetic polish ─────────────────────────────────────────────── */
.hero-photo {
  min-height: 640px;
}
.hero-photo__image img {
  filter: saturate(0.92) contrast(1.02);
}
.hero-photo__scrim {
  background: linear-gradient(
    180deg,
    rgba(10,22,38,0.22) 0%,
    rgba(10,22,38,0.35) 40%,
    rgba(10,22,38,0.72) 100%
  );
}
.hero-photo__content {
  max-width: 780px;
  padding: 0 1.5rem;
}
.hero-photo__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.85;
  margin-bottom: 1rem;
}
.hero-photo__title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: clamp(2.4rem, 5.2vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.028em;
  margin: 0 0 1.1rem;
  color: #fff;
}
.hero-photo__lede {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.55;
  max-width: 620px;
  opacity: 0.92;
  margin-bottom: 2rem;
}
.hero-photo__cta { gap: 0.75rem; display: flex; flex-wrap: wrap; }
.btn-hero {
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.95rem 1.6rem;
  border-radius: 2px;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.btn-hero--primary {
  background: #fff;
  color: #0f2a44;
  border: 1px solid #fff;
}
.btn-hero--primary:hover {
  background: transparent;
  color: #fff;
  transform: translateY(-1px);
}
.btn-hero--ghost-light {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.55);
}
.btn-hero--ghost-light:hover {
  background: rgba(255,255,255,0.08);
  border-color: #fff;
}

/* ─── Slim reassurance band refinement ──────────────────────────────────── */
.apptbar--slim {
  background: #f6f3ee;
  color: #3d4a5c;
  border-top: 1px solid #e4ddd1;
  border-bottom: 1px solid #e4ddd1;
  padding: 0.85rem 1.5rem;
}
.apptbar--slim .apptbar__label {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #3d4a5c;
  text-align: center;
}

/* ============================================================
   BRAND COLOR SYSTEM (sampled from logo PNG: #203070 primary navy,
   #004020 accent green). Overrides the site palette to tie the
   logo into every surface that was previously a generic teal/blue.
   ============================================================ */
:root {
  --brand-navy:      #203070;
  --brand-navy-dark: #17235a;
  --brand-navy-soft: #eaecf5;
  --brand-green:     #004020;
  --brand-green-dark:#002b15;
  --brand-cream:     #f6f3ee;
  --brand-line:      #e4ddd1;
}
/* Map the existing tokens to the brand tokens so every component pulls brand */
:root {
  --navy:  var(--brand-navy);
  --blue:  var(--brand-navy);
  --teal:  var(--brand-green);
  --teal-dark: var(--brand-green-dark);
}

/* Header frame — a thin brand-colored underline ties the logo into the page */
.site-header {
  border-bottom: 1px solid var(--brand-line);
  box-shadow: 0 1px 0 0 var(--brand-navy) inset, 0 4px 10px rgba(32,48,112,0.04);
}
.site-header__utility {
  background: var(--brand-navy);
  color: #fff;
}
.site-header__utility a { color: #fff; opacity: 0.9; }
.site-header__utility a:hover { opacity: 1; color: #fff; }

/* Logo — let it sit on a subtle cream pad that extends the brand vertically */
.brand {
  padding: 0.4rem 0.75rem 0.4rem 0;
  display: inline-flex; align-items: center;
}
.brand__logo {
  display: block;
  filter: drop-shadow(0 1px 0 rgba(32,48,112,0.04));
}

/* Apptbar slim band picks up the brand cream */
.apptbar--slim {
  background: var(--brand-cream);
  border-color: var(--brand-line);
  color: var(--brand-navy);
}
.apptbar--slim .apptbar__label {
  color: var(--brand-navy);
}

/* Current-page boxed nav uses brand navy */
.site-header__nav--boxed .nav-box[aria-current="page"] {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  color: #fff;
}

/* Pay Online box: frosted treatment, matches every other nav box. */
.site-header__nav--boxed .nav-box--pay {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.22);
  padding: 0.55rem 1rem;
}
.site-header__nav--boxed .nav-box--pay:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.45);
  color: #fff;
}

/* ─── Region tiles: full-width grid on desktop, horizontally scrollable snap
      list on mobile so users can flick through Hip / Knee / Shoulder / … ─── */
.region-tiles {
  width: 100%;
}
@media (max-width: 820px) {
  .region-tiles {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.85rem;
    padding: 0.25rem 1rem 1rem;
    margin: 0 -1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--brand-navy) transparent;
  }
  .region-tiles::-webkit-scrollbar { height: 6px; }
  .region-tiles::-webkit-scrollbar-thumb { background: var(--brand-navy); border-radius: 3px; }
  .region-tile {
    flex: 0 0 82%;
    scroll-snap-align: start;
    min-width: 0;
  }
}

/* Locator input sits nicer with the new brand palette */
.locator__input:focus { outline-color: var(--brand-navy); }
.locator__submit { background: var(--brand-navy); }
.locator__submit:hover { background: var(--brand-navy-dark); }
.locator__result--nearest { border-color: var(--brand-navy); box-shadow: 0 1px 0 rgba(0,0,0,0.04); }
.locator__result--nearest::before { background: var(--brand-navy); }

/* Request Appointment in the top bar: solid navy CTA on paper. */
.site-header__nav--boxed .btn-appt {
  background: var(--navy) !important;
  color: #fff !important;
  border: 1px solid var(--navy) !important;
}
.site-header__nav--boxed .btn-appt:hover {
  background: var(--navy-dark) !important;
  border-color: var(--navy-dark) !important;
  color: #fff !important;
}
.btn-appt {
  background: var(--brand-green);
  color: #fff;
  border: 1px solid var(--brand-green);
}
.btn-appt:hover {
  background: var(--brand-green-dark);
  border-color: var(--brand-green-dark);
  color: #fff;
}

/* ─── Comprehensive clickable footer ──────────────────────────────────── */
.site-footer--full {
  background: var(--brand-navy);
  color: #fff;
  padding: 3.5rem var(--gutter) 2rem;
  margin-top: 3rem;
}
.site-footer--full .site-footer__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 2.5rem;
}
@media (max-width: 960px) {
  .site-footer--full .site-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .site-footer--full .site-footer__inner { grid-template-columns: 1fr; gap: 1.75rem; }
}
.site-footer--full h4 {
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 0.72rem;
  font-weight: 600;
  color: #c8cde0;
  margin: 0 0 0.9rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.site-footer--full ul { list-style: none; padding: 0; margin: 0; }
.site-footer--full li { margin: 0.35rem 0; }
.site-footer--full a {
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 180ms ease;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.site-footer--full a:hover {
  color: #9ec5ff;
  border-bottom-color: rgba(158, 197, 255, 0.5);
}
.site-footer--full a:focus-visible {
  outline: 2px solid #9ec5ff;
  outline-offset: 2px;
  border-radius: 2px;
}
.site-footer--full p { font-size: 0.9rem; line-height: 1.55; margin: 0 0 0.75rem; color: #dfe3ef; }
.site-footer--full .site-footer__muted { color: #9ca6c0; }
.site-footer--full .site-footer__social { font-size: 0.85rem; letter-spacing: 0.01em; }
.site-footer--full .site-footer__disclaimer {
  max-width: var(--content-max);
  margin: 2.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.12);
  color: #9ca6c0;
  font-size: 0.8rem;
  line-height: 1.55;
  text-align: left;
}

/* ═══════════════════════════════════════════════════════════════════════════
   POLISH LAYER — density, Patient-Portal box, and small UI corrections.
   Loaded last, so these overrides win. Every rule here exists because an
   earlier state wasted vertical space or created a visual inconsistency.
   ═══════════════════════════════════════════════════════════════════════ */

/* -- Patient Portal as a pill in the utility bar --------------------------
   The utility bar used to be plain text. "Patient Portal" reads clearly as
   an action, so give it a light-outline pill against the navy background.
   Still secondary to the phone number (no solid fill) — same visual weight
   as the nav boxes below. */
.site-header__utility-inner a:not([href^="tel:"]) {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  line-height: 1;
  transition: background 140ms ease, border-color 140ms ease;
}
.site-header__utility-inner a:not([href^="tel:"]):hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.55);
}
.site-header__utility { padding: 0.15rem 0 !important; }
.site-header__utility-inner { padding-top: 0.35rem !important; padding-bottom: 0.35rem !important; }

/* -- Whitespace compaction — tighten the macro rhythm --------------------
   Before: hero → 4rem of air → content. Generous felt empty on a site
   with this much content density. We keep air between distinct ideas,
   but no longer between every paragraph and every card. */

/* Header padding at rest: smaller vertical breathing room */
html body .site-header:not(.is-scrolled) .site-header__main {
  padding-top: 0.55rem !important;
  padding-bottom: 0.55rem !important;
}

/* Page title block — was 1.25 / 2, now 1 / 1.2 */
.page-title {
  padding: 1rem var(--gutter) 1.2rem;
}

/* Tab nav — pull it tighter to the title */
.tab-nav {
  margin-top: 0.25rem;
}

/* Main page grid — less top padding so content appears right away */
.page-grid {
  padding-top: 1.25rem !important;
  padding-bottom: 2rem !important;
}

/* Editorial hero (home) — bring the hero and the next section closer */
.editorial-hero {
  padding-top: 2rem !important;
  padding-bottom: 2.5rem !important;
}

/* Section-level wrappers — most of them use these utility classes */
.section,
.providers-preview,
.conditions-band,
.locations-band,
.treatments-band,
.insurance-band,
.practice-grid {
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}

/* Compact heading rhythm inside article bodies */
.content h2 { margin-top: 1.75rem; margin-bottom: 0.5rem; }
.content h3 { margin-top: 1.25rem; margin-bottom: 0.35rem; }
.content > section + section { margin-top: 1.5rem; }

/* Sidebar card — less air, tighter internal layout */
.sidebar-card,
.sidebar > * + * {
  margin-top: 1rem !important;
}
.sidebar-card {
  padding: 1rem 1.1rem !important;
}

/* Related-list rows — compact the vertical rhythm */
.related-list a { padding: 0.5rem 0 !important; }

/* Provider cards grid — tighten gap */
.providers-grid,
.providers-grid--full,
.providers-grid--rich,
.providers-grid--simple {
  gap: 1.25rem !important;
  row-gap: 1.25rem !important;
}

/* Location / practice cards */
.location-grid, .practice-grid, .treat-grid, .conditions-grid {
  gap: 1rem !important;
  row-gap: 1rem !important;
}

/* Footer — trim big empty band */
.site-footer--full { padding-top: 2.5rem !important; padding-bottom: 1.5rem !important; }

/* Hero photo block on internal pages — tighten */
.hero-photo { margin-bottom: 1.5rem !important; }

/* Body-map stage: pull it up under the title */
.ng-bodymap { margin: 1.5rem auto !important; }

/* Image captions + attributions — no orphaned space */
figure { margin: 0.75rem 0 1rem !important; }
.attribution { margin-top: 0.5rem !important; }

/* Mobile: even tighter — the 375px column shouldn't have 3rem gaps */
@media (max-width: 820px) {
  .page-title { padding: 0.85rem var(--gutter) 1rem; }
  .page-grid { padding-top: 1rem !important; padding-bottom: 1.5rem !important; }
  .section,
  .providers-preview,
  .conditions-band,
  .locations-band,
  .treatments-band,
  .insurance-band,
  .practice-grid { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
  .editorial-hero { padding-top: 1.25rem !important; padding-bottom: 1.75rem !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LANDING POLISH LAYER — "flashy but soft and professional."

   Moves we're making:
   • Quiet decorative rules — sage-dotted hairlines instead of flat borders
   • Editorial eyebrow labels above section heads, with a short colored cap
   • Alternating paper tone bands so the vertical rhythm reads like a
     journal spread, not a CMS dump
   • Card elevation with an actual depth story: flat hairline at rest,
     gentle 2px lift + soft shadow on hover
   • Image treatments — rounded corners, overflow hidden, 600ms optical
     zoom on hover for everything that's an <img> inside a card
   • Motion is purposeful: nothing moves unless you point at it
   ═══════════════════════════════════════════════════════════════════════ */

/* -- 1. Site-wide tokens for the polish layer ---------------------------- */
:root {
  --shadow-card-rest:  0 0 0 1px rgba(11, 42, 74, 0.06),
                       0 1px 2px rgba(11, 42, 74, 0.03);
  --shadow-card-hover: 0 0 0 1px rgba(11, 42, 74, 0.10),
                       0 8px 22px rgba(11, 42, 74, 0.10),
                       0 2px 6px rgba(11, 42, 74, 0.06);
  --shadow-panel:      0 0 0 1px rgba(11, 42, 74, 0.07),
                       0 4px 14px rgba(11, 42, 74, 0.07);
  --ring-sage:         0 0 0 3px rgba(63, 128, 105, 0.25);
  --accent:            #3F8069;       /* sage */
  --accent-soft:       #E5EEE8;
}

/* -- 2. Editorial eyebrow with a small colored cap ----------------------- */
/* Any .eyebrow or existing .c-section-head__tag gets a little sage bar
   dropped to the left. Feels like a newspaper section mark. */
.eyebrow,
.c-section-head__tag,
.c-hero__eyebrow,
.editorial-hero__kicker,
.providers-preview__tag,
.conditions-band__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before,
.c-section-head__tag::before,
.c-hero__eyebrow::before,
.editorial-hero__kicker::before,
.providers-preview__tag::before,
.conditions-band__tag::before {
  content: "";
  display: inline-block;
  width: 20px; height: 1px;
  background: var(--accent);
}

/* -- 3. Section headings with a short accent underline ------------------ */
/* On the landing page, section H2s like "Providers at OSI." / "Conditions
   we treat." benefit from a 40px sage hairline directly under them. */
.providers-preview h2,
.conditions-band h2,
.directory__inner h2,
.locations-strip h2,
.locmap h2,
.first-visit h2,
.photostrip h2 {
  position: relative;
  padding-bottom: 0.55rem;
  margin-bottom: 1rem;
}
.providers-preview h2::after,
.conditions-band h2::after,
.directory__inner h2::after,
.locations-strip h2::after,
.locmap h2::after,
.first-visit h2::after,
.photostrip h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 40px; height: 2px;
  background: var(--accent);
  border-radius: 1px;
}

/* -- 4. Single paper tone, rhythm carried by hairlines, not tint shifts -
   No more beige-on-beige bands. Every section keeps the warm paper base
   and is separated by a quiet hairline rule and an accented section head.
   The only exception is .first-visit which reads differently because its
   hue (sage-wash) is a different family, not another shade of beige. */
.providers-preview,
.photostrip,
.ng-bodymap,
.directory,
.conditions-band,
.locmap,
.locations-strip { background: transparent; }
.first-visit     { background: var(--sage-wash); }

/* Top hairline that divides sections — quiet but deliberate. */
.photostrip::before,
.ng-bodymap::before,
.directory::before,
.conditions-band::before,
.first-visit::before,
.locmap::before,
.locations-strip::before {
  content: "";
  display: block;
  height: 1px;
  max-width: var(--content-max);
  margin: 0 auto 2.25rem;
  background: linear-gradient(90deg,
              transparent,
              rgba(11, 42, 74, 0.14) 30%,
              rgba(11, 42, 74, 0.14) 70%,
              transparent);
}

/* If a section gets a background, make sure it stretches full-bleed and
   its *content* still respects the content-max container. */
.providers-preview,
.photostrip,
.directory,
.conditions-band,
.first-visit,
.locmap,
.locations-strip {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.providers-preview > *:not(.providers-grid):not(.providers-preview__track),
.photostrip > *,
.directory > *,
.conditions-band > *,
.first-visit > *,
.locmap > *,
.locations-strip > * {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* -- 5. NO boxes. Editorial, typography-forward layout ------------------
   Cards, pills, bordered tiles → all stripped. Structure carried by
   hairlines, type hierarchy, and generous spacing. Primary CTAs keep
   button treatment because they drive conversion (call/schedule). */
.provider-card,
.location-card,
.region-tile,
.treat-card,
.forms-list__row,
.sidebar-card,
.contact-grid__card,
.ng-region-panel,
.ng-bodymap__stage,
.nav-menu,
.practice-grid__card,
.c-fact,
.editorial-notes,
.callout,
.when-to-see {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Card hover becomes a quiet text shift, not a lift. */
a.provider-card,
a.location-card,
a.region-tile,
a.treat-card {
  transition: color 180ms var(--ease), opacity 180ms var(--ease) !important;
  transform: none !important;
}
a.provider-card:hover,
a.location-card:hover,
a.region-tile:hover,
a.treat-card:hover {
  box-shadow: none !important;
  transform: none !important;
  opacity: 0.8;
}
a.provider-card:focus-visible,
a.location-card:focus-visible,
a.region-tile:focus-visible,
a.treat-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  box-shadow: none !important;
}

/* Condition chips → text links, no pill backgrounds */
.ng-conditions__list a,
.conditions-grid a,
.tags a,
.related-list a {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0.35rem 0 !important;
}
.ng-conditions__list a::after,
.region-panel__list a::after { display: none; }

/* Nav dropdowns — no boxed container, clean menu */
.nav-menu,
.nav-menu--mega {
  background: var(--paper) !important;
  border: 0 !important;
  box-shadow: 0 12px 30px rgba(11, 42, 74, 0.08),
              0 2px 6px rgba(11, 42, 74, 0.04) !important;
  border-radius: 0 !important;
  padding: 1rem 1.25rem !important;
}

/* Nav boxes — strip the pill outline entirely. Selector specificity
   matches the nextgen.css rule so these win. */
html body .site-header__nav .nav-box,
html body .site-header__nav--boxed .nav-box {
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 0.7rem !important;
  height: auto !important;
  min-height: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: var(--navy) !important;
  position: relative;
}
html body .site-header__nav .nav-box:hover,
html body .site-header__nav--boxed .nav-box:hover,
html body .site-header__nav .nav-box--has-menu:hover,
html body .site-header__nav--boxed .nav-box--has-menu:hover {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--accent) !important;
}
/* Sage underline grows on hover, no pill */
html body .site-header__nav .nav-box::after,
html body .site-header__nav--boxed .nav-box::after {
  content: "";
  position: absolute;
  left: 0.7rem; right: 0.7rem;
  bottom: -2px;
  height: 1px;
  background: var(--accent, #3F8069);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms var(--ease);
  pointer-events: none;
}
html body .site-header__nav .nav-box:hover::after,
html body .site-header__nav--boxed .nav-box:hover::after,
html body .site-header__nav .nav-box[aria-current="page"]::after {
  transform: scaleX(1);
}
/* "Pay Online" — same flat treatment */
html body .site-header__nav .nav-box.nav-box--pay,
html body .site-header__nav--boxed .nav-box.nav-box--pay {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
/* Request Appointment stays a button — it's a conversion CTA */
html body .site-header__nav .btn-appt,
html body .site-header__nav--boxed .btn-appt {
  background: var(--navy) !important;
  border: 0 !important;
  border-radius: 2px !important;
  color: #fff !important;
  padding: 0.6rem 1.1rem !important;
  height: auto !important;
}

/* Center the nav-box cluster between logo and Request Appointment.
   Two auto margins — on the first nav-box and on the btn-appt — share
   the free space equally, which visually centers the cluster. */
@media (min-width: 900px) {
  html body .site-header__nav--boxed {
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }
  html body .site-header__nav--boxed > .nav-box:first-child {
    margin-left: auto !important;
  }
  html body .site-header__nav--boxed > .btn-appt {
    margin-left: auto !important;
  }
}

/* Patient Portal: unbox it too */
.site-header__utility-inner a:not([href^="tel:"]) {
  border: 0 !important;
  background: transparent !important;
  padding: 0.32rem 0 !important;
  border-radius: 0 !important;
  position: relative;
}
.site-header__utility-inner a:not([href^="tel:"])::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: rgba(255,255,255,0.5);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms var(--ease);
}
.site-header__utility-inner a:not([href^="tel:"]):hover::after {
  transform: scaleX(1);
}

/* Search pill in utility bar — thin border only, no fill */
.site-header__utility-inner .util-search,
.site-header__utility-inner [role="search"] input,
.site-header__utility-inner form input[type="search"] {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 2px !important;
}

/* Provider / location "cards" become clean vertical compositions:
   photo → name → role → cta. No frame. */
.provider-card,
.location-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}
.provider-card__body,
.location-card__body {
  padding: 0 !important;
}
.provider-card__name,
.location-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--navy);
  margin: 0;
}

/* Photos still get rounded corners (those aren't boxes, those are images). */
.provider-card__photo,
.location-card__photo,
.photostrip__tile,
.hero-photo {
  border-radius: var(--r-sm);
  overflow: hidden;
}

/* Body-map panel becomes a typographic panel, no frame */
.ng-region-panel {
  padding: 0 !important;
  margin-top: 1.25rem;
}
.ng-region-panel__list a {
  padding: 0.5rem 0 !important;
  background: transparent !important;
  border-bottom: 1px solid var(--rule-light) !important;
  border-radius: 0 !important;
}
.ng-region-panel__list a:hover {
  background: transparent !important;
  color: var(--accent) !important;
  transform: none !important;
}

/* Sidebar + forms rows also flatten */
.sidebar-card,
.forms-list__row,
.contact-grid__card {
  padding: 0 !important;
  margin-bottom: 1.5rem !important;
}
.forms-list__row {
  border-bottom: 1px solid var(--rule-light) !important;
  padding-bottom: 1rem !important;
}

/* "Coming soon" pills — tone down to plain italic label */
html:not(.show-editorial) .forms-list__btn:has(> .blank) {
  background: transparent !important;
  border: 0 !important;
  color: var(--text-light) !important;
  font-style: italic !important;
  padding: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LANDING PAGE — DATA-FORWARD DIRECTORY (Semrush-inspired, OSI palette)

   Hero: compact headline + meta + tabs. No split-screen photo.
   Stats strip: oversized serif numerals, understated labels.
   Directory: sortable table of every condition, filterable by region.
   Providers + Locations: plain typographic lists, no cards.

   Design language: sans-serif UI, serif only for the headline + numerals;
   navy on paper; sage is the only accent and appears sparingly.
   No boxes, no pills, no beige-on-beige — structure by hairlines and type.
   ═══════════════════════════════════════════════════════════════════════ */

/* Landing page lives on white, not beige. No beige-on-beige anywhere. */
body { background: #fff !important; }

/* Header also white with a navy utility strip — no cream. */
html body .site-header { background: #fff !important; }
html body .site-header__main { background: #fff !important; }

/* Hide the old landing-only decoration layer if anything slipped through */
.editorial-hero,
.providers-preview,
.photostrip,
.region-tabs,
.ng-bodymap,
.directory,
.region-tile,
.first-visit,
.locations-strip {
  display: none !important;
}

/* -- Hospitals: typographic 3-column affiliations list ---------------- */
.lp-hospitals {
  padding: 4rem 0 3.5rem;
  border-top: 1px solid rgba(11, 42, 74, 0.08);
}
.lp-hospitals__inner {
  max-width: var(--content-max, 1040px);
  margin: 0 auto;
  padding: 0 var(--gutter, clamp(1.25rem, 4vw, 2.5rem));
}
.lp-hospitals__intro {
  font-family: var(--font);
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 64ch;
  margin: 0 0 2.5rem;
}
.lp-hospital-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  border-top: 1px solid rgba(11, 42, 74, 0.1);
  padding-top: 2rem;
}
@media (max-width: 820px) {
  .lp-hospital-list { grid-template-columns: 1fr; gap: 1.75rem; }
}
.lp-hospital {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-top: 0.25rem;
  border-top: 2px solid var(--accent, #3F8069);
}
.lp-hospital__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0.35rem 0 0;
  line-height: 1.2;
}
.lp-hospital__city {
  font-family: var(--font);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  margin: 0;
}
.lp-hospital__surgeons {
  font-family: var(--font);
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0.6rem 0 0;
}
.lp-hospital__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 0.2rem;
}

/* -- Locations: split layout (map left, clickable list right) --------- */
.lp-locations__intro {
  font-family: var(--font);
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0 0 1.75rem;
  max-width: 60ch;
}
.lp-locations__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
}
.lp-locations__map {
  /* 20% bigger than the old 4/3 + 420 floor. Aspect 10/9 gives the map
     more vertical room for clinic pins spread north-south (NB → Kenedy)
     without squeezing width; 504 min-height is 420 × 1.2. overflow:hidden
     is REQUIRED so popups stay clipped to the map rectangle — Sam wants
     the popup to visually fit within the map area, not spill onto the
     surrounding page. */
  aspect-ratio: 10 / 9;
  width: 100%;
  min-height: 504px;
  border: 1px solid rgba(11, 42, 74, 0.1);
  border-radius: 4px;
  overflow: hidden;
  background: #f4f1ea;
}
@media (max-width: 820px) {
  .lp-locations__layout { grid-template-columns: 1fr; }
  .lp-locations__map { min-height: 408px; aspect-ratio: 16 / 11; }
}

/* Location list — interactive when paired with the map. */
.lp-loc-list .lp-loc {
  cursor: pointer;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
  padding: 0.65rem 0.75rem;
  margin: 0 -0.75rem;
  border-radius: 3px;
}
.lp-loc-list .lp-loc:hover,
.lp-loc-list .lp-loc.is-active {
  background: rgba(63, 128, 105, 0.07);
}
.lp-loc-list .lp-loc.is-active .lp-loc__name { color: var(--accent); }

/* -- Leaflet map pins + hover popup card ------------------------------ */
.locmap-pin {
  display: grid;
  place-items: center;
}
.locmap-pin__dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--accent, #3F8069);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(11, 42, 74, 0.28);
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.locmap-pin:hover .locmap-pin__dot,
.locmap-pin.is-active .locmap-pin__dot {
  transform: scale(1.35);
  box-shadow: 0 0 0 6px rgba(63, 128, 105, 0.2), 0 2px 8px rgba(11, 42, 74, 0.3);
}

/* Reset Leaflet's default popup chrome so our card reads as editorial. */
.leaflet-popup-content-wrapper:has(.locmap-popup) {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 10px 28px rgba(11, 42, 74, 0.18), 0 2px 6px rgba(11, 42, 74, 0.06);
  padding: 0;
}
.leaflet-popup-content:has(.locmap-popup) {
  margin: 0;
  width: 260px !important;
}
.leaflet-popup-tip { background: #fff; }

.locmap-popup { font-family: var(--font); }
/* Clinic card reads top-to-bottom: a circular photo "map icon" that echoes
   the pin's shape, then the clinic name + address. Cover-fit keeps the
   building centered in the disc regardless of the underlying photo's
   aspect ratio. */
.locmap-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0.9rem 0.35rem;
  gap: 0.65rem;
}
.locmap-card__photo {
  width: 96px;
  height: 96px;
  border-radius: 999px;
  overflow: hidden;
  background: #e9e4d8;
  box-shadow: 0 0 0 3px #ffffff,
              0 0 0 4px rgba(11, 42, 74, 0.9),
              0 4px 10px rgba(11, 42, 74, 0.22);
  flex-shrink: 0;
}
.locmap-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.locmap-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.2rem;
}
.locmap-card__body strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.locmap-card__body span {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.locmap-popup__links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem 0.75rem;
  border-top: 1px solid rgba(11, 42, 74, 0.08);
  font-size: 0.82rem;
}
.locmap-popup__links a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
}
.locmap-popup__links a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.locmap-popup__links span { color: var(--text-light); }

/* -- Hero: editorial masthead over flagship office photo --------------- */
.lp-hero {
  padding: 4rem 0 0;
  border-bottom: 1px solid rgba(11, 42, 74, 0.08);
  position: relative;
  overflow: hidden;
  background-color: #fff;
  background-image:
    linear-gradient(
      105deg,
      rgba(255, 255, 255, 0.97) 0%,
      rgba(255, 255, 255, 0.88) 38%,
      rgba(255, 255, 255, 0.55) 72%,
      rgba(255, 255, 255, 0.35) 100%
    ),
    url("photos/Col2_Photos_Locations_NBraunfels.jpg");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}
/* Heavier scrim on narrow screens — text wraps full width and needs it. */
@media (max-width: 720px) {
  .lp-hero {
    background-image:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.94) 0%,
        rgba(255, 255, 255, 0.82) 55%,
        rgba(255, 255, 255, 0.55) 100%
      ),
      url("photos/Col2_Photos_Locations_NBraunfels.jpg");
    background-position: center center;
  }
}
.lp-hero__inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem) 4rem;
  position: relative;
}

.lp-hero__text { min-width: 0; }

/* Eyebrow with a live green dot — feels "we're open" without being tacky */
.lp-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent, #3F8069);
  margin: 0 0 1.2rem;
}
.lp-hero__dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--accent, #3F8069);
  box-shadow: 0 0 0 0 rgba(63, 128, 105, 0.55);
  animation: lp-hero-pulse 2.6s ease-out infinite;
}
@keyframes lp-hero-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(63, 128, 105, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(63, 128, 105, 0); }
  100% { box-shadow: 0 0 0 0   rgba(63, 128, 105, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .lp-hero__dot { animation: none; }
}

/* Editorial masthead headline — declarative, stacked, quiet rhythm. */
.lp-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3rem, 7vw, 5.75rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin: 0 0 2rem;
  max-width: none;
}
.lp-hero__title em {
  font-style: italic;
  color: var(--navy);
  font-weight: 500;
}
/* Subtle hairline between the stacked statements and the "We fix all of it" */
.lp-hero__title br + em {
  display: inline-block;
  margin-top: 0.1em;
}

.lp-hero__sub {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 2rem;
  max-width: 58ch;
}

/* Inline stat chips — data-feel without boxes */
.lp-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-bottom: 1.75rem;
  padding: 0.9rem 0;
  border-top: 1px solid rgba(11, 42, 74, 0.08);
  border-bottom: 1px solid rgba(11, 42, 74, 0.08);
}
.lp-hero__chip {
  font-family: var(--font);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: var(--text-light);
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
}
.lp-hero__chip b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--navy);
  line-height: 1;
}

/* CTAs */
.lp-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 2rem;
}
.lp-hero__btn {
  display: inline-block;
  background: var(--navy);
  color: #fff !important;
  text-decoration: none;
  padding: 0.85rem 1.35rem;
  font-family: var(--font);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 2px;
  transition: background 180ms var(--ease), transform 160ms var(--ease);
}
.lp-hero__btn:hover { background: var(--navy-dark); transform: translateY(-1px); }
.lp-hero__link {
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--navy) !important;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: border-color 160ms var(--ease), color 160ms var(--ease);
}
.lp-hero__link:hover { border-bottom-color: var(--accent); color: var(--accent) !important; }

/* Tabs (under hero CTAs) */
.lp-tabs {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--rule);
  padding-top: 0.5rem;
}
.lp-tab {
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  padding: 0.65rem 0.95rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}
.lp-tab:hover { color: var(--navy); }
.lp-tab.is-active {
  color: var(--navy);
  border-bottom-color: var(--navy);
  font-weight: 600;
}

/* Right: anatomical atlas — clickable silhouette as the hero visual */
.lp-atlas {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  position: relative;
}
.lp-atlas__frame {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 100 / 220;
  margin: 0 auto;
  color: var(--navy);
}
.lp-atlas__silhouette,
.lp-atlas__hits {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.lp-atlas__silhouette {
  color: var(--navy);
  opacity: 0.9;
}

/* The hotspots — invisible at rest, sage tint on hover/focus */
.lp-atlas__hit {
  fill: rgba(63, 128, 105, 0);
  stroke: rgba(63, 128, 105, 0);
  stroke-width: 0.8;
  cursor: pointer;
  transition: fill 180ms var(--ease), stroke 180ms var(--ease);
}
.lp-atlas__hits a { cursor: pointer; }
.lp-atlas__hits a:hover .lp-atlas__hit,
.lp-atlas__hits a:focus-visible .lp-atlas__hit {
  fill: rgba(63, 128, 105, 0.22);
  stroke: rgba(63, 128, 105, 0.9);
}
.lp-atlas__hits a:focus-visible {
  outline: 0;
}

/* Soft breathing animation so the hotspots suggest their own interactivity
   without a giant "click me" hint. Each ring pulses once every 4s. */
.lp-atlas__hit {
  animation: lp-atlas-breathe 4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.lp-atlas__hits a:nth-child(1) .lp-atlas__hit { animation-delay: 0s; }
.lp-atlas__hits a:nth-child(2) .lp-atlas__hit { animation-delay: 0.4s; }
.lp-atlas__hits a:nth-child(3) .lp-atlas__hit { animation-delay: 0.8s; }
.lp-atlas__hits a:nth-child(4) .lp-atlas__hit { animation-delay: 1.2s; }
.lp-atlas__hits a:nth-child(5) .lp-atlas__hit { animation-delay: 1.6s; }
.lp-atlas__hits a:nth-child(6) .lp-atlas__hit { animation-delay: 2.0s; }
.lp-atlas__hits a:nth-child(7) .lp-atlas__hit { animation-delay: 2.4s; }
@keyframes lp-atlas-breathe {
  0%, 100% { stroke: rgba(63, 128, 105, 0.18); stroke-width: 0.6; }
  50%      { stroke: rgba(63, 128, 105, 0.55); stroke-width: 1.1; }
}
.lp-atlas__hits a:hover .lp-atlas__hit,
.lp-atlas__hits a:focus-visible .lp-atlas__hit {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .lp-atlas__hit { animation: none; stroke: rgba(63, 128, 105, 0.25); }
}

/* Floating label that follows the cursor over the atlas */
.lp-atlas__label {
  position: absolute;
  pointer-events: none;
  padding: 0.35rem 0.6rem;
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--navy);
  border-radius: 2px;
  opacity: 0;
  transform: translate(-50%, -4px);
  transition: opacity 140ms var(--ease);
  z-index: 3;
  white-space: nowrap;
}
.lp-atlas__label.is-visible { opacity: 1; }
.lp-atlas__label::after {
  content: "";
  position: absolute;
  left: 50%; top: 100%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--navy);
}

/* Legend underneath the silhouette */
.lp-atlas__legend {
  font-family: var(--font);
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
  max-width: 38ch;
}
.lp-atlas__legend-dim {
  color: var(--text-light);
}

@media (max-width: 900px) {
  .lp-atlas__frame { max-width: 240px; }
  .lp-atlas__legend { font-size: 0.78rem; }
}

/* Live-feel condition ticker — scrolls slowly left; paused on hover */
.lp-ticker {
  background: var(--navy);
  color: #fff;
  padding: 0.75rem 0;
  overflow: hidden;
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.lp-ticker::before,
.lp-ticker::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.lp-ticker::before { left: 0;  background: linear-gradient(90deg, var(--navy), transparent); }
.lp-ticker::after  { right: 0; background: linear-gradient(270deg, var(--navy), transparent); }
.lp-ticker__track {
  display: flex;
  gap: 2.5rem;
  white-space: nowrap;
  animation: lp-ticker-scroll 70s linear infinite;
  will-change: transform;
  width: max-content;
}
.lp-ticker:hover .lp-ticker__track { animation-play-state: paused; }
.lp-ticker__track > span {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  opacity: 0.85;
  position: relative;
  padding-right: 2.5rem;
}
.lp-ticker__track > span:not(.lp-ticker__label)::after {
  content: "·";
  position: absolute;
  right: 1.1rem;
  color: rgba(255,255,255,0.35);
}
.lp-ticker__label {
  font-family: var(--font);
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent, #3F8069);
  opacity: 1 !important;
}
@keyframes lp-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .lp-ticker__track { animation: none; transform: translateX(0); }
}

/* -- Stats strip --------------------------------------------------------- */
.lp-stats {
  background: #fff;
  border-top: 1px solid rgba(11, 42, 74, 0.08);
  border-bottom: 1px solid rgba(11, 42, 74, 0.08);
  padding: 2rem 0;
}
.lp-stats__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
}
.lp-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border-left: 1px solid var(--rule-light);
  padding-left: 1rem;
}
.lp-stat:first-child { border-left: 0; padding-left: 0; }
.lp-stat__n {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.85rem, 3.2vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.lp-stat__l {
  font-family: var(--font);
  font-size: 0.78rem;
  color: var(--text-light);
  line-height: 1.3;
  margin-top: 0.35rem;
}
@media (max-width: 900px) {
  .lp-stats__inner { grid-template-columns: repeat(3, 1fr); row-gap: 1.4rem; }
  .lp-stat:nth-child(3n+1) { border-left: 0; padding-left: 0; }
}
@media (max-width: 520px) {
  .lp-stats__inner { grid-template-columns: repeat(2, 1fr); }
  .lp-stat:nth-child(odd)  { border-left: 0; padding-left: 0; }
  .lp-stat:nth-child(even) { border-left: 1px solid var(--rule-light); padding-left: 1rem; }
}

/* -- Directory section --------------------------------------------------- */
.lp-directory {
  padding: 3.5rem 0 3rem;
  background: #fff;
}
.lp-directory__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}
.lp-directory__title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.8vw, 2.25rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 0.5rem;
}
.lp-directory__intro {
  font-family: var(--font-display);
  color: var(--text-muted);
  max-width: 60ch;
  font-size: 1.02rem;
  line-height: 1.5;
  margin: 0 0 1.5rem;
}
.lp-directory__scope {
  font-family: var(--font-display);
  color: var(--navy);
  max-width: 68ch;
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0 0 0.65rem;
}
.lp-directory__scope strong {
  font-weight: 600;
  color: var(--navy);
}

/* Filter chips — anatomy icon + label, arranged in a clean wrapping row,
   separated from the region grid by a hairline rule. */
.lp-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1rem;               /* row-gap, column-gap */
  margin: 0 0 2rem;
  padding: 0 0 1.1rem;
  border-bottom: 1px solid rgba(11, 42, 74, 0.12);
}
.lp-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  padding: 0.35rem 0.2rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 150ms var(--ease), border-color 150ms var(--ease);
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}
.lp-chip:hover { color: var(--navy); }
.lp-chip.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.lp-chip[data-filter="all"] {
  padding-right: 0.35rem;
  margin-right: 0.35rem;
  border-right: 1px solid rgba(11, 42, 74, 0.14);
  border-bottom: 2px solid transparent;
}
.lp-chip[data-filter="all"].is-active {
  border-bottom-color: var(--accent);
}

/* Region-keyed column grid — replaces the long 137-row table. Each region
   is a small column showing its top 4 conditions, with a "See all N" button
   that expands the rest in place. Filter chips (above) hide all but the
   selected region and auto-expand it. */
.lp-regions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem 2.75rem;
  margin-top: 0.5rem;
}
@media (max-width: 1080px) { .lp-regions { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .lp-regions { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
@media (max-width: 480px)  { .lp-regions { grid-template-columns: 1fr; gap: 1.75rem; } }

.lp-region-col {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  transition: opacity 180ms var(--ease);
}
.lp-region-col.is-hidden { display: none; }

.lp-region-col__label {
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.3rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(11, 42, 74, 0.12);
}
/* Explanatory note under a region label (used on Trauma to explain the
   hospital referral / on-call workflow). Intentionally muted — it's a
   clinical framing line, not a marketing line. */
.lp-region-col__note {
  font-family: var(--font);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin: -0.1rem 0 0.2rem;
}
.lp-region-col__list,
.lp-region-col__rest {
  list-style: none;
  padding: 0;
  margin: 0;
  flex-direction: column;
  gap: 0.05rem;
}
.lp-region-col__list,
.lp-region-col__rest:not([hidden]) { display: flex; }
.lp-region-col__rest[hidden] { display: none !important; }
.lp-region-col__list li,
.lp-region-col__rest li { margin: 0; }
.lp-region-col__list a,
.lp-region-col__rest a {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--navy);
  text-decoration: none;
  padding: 0.35rem 0;
  line-height: 1.3;
  border-bottom: 1px solid transparent;
  transition: color 150ms var(--ease), border-color 150ms var(--ease), padding-left 200ms var(--ease);
}
.lp-region-col__list a:hover,
.lp-region-col__rest a:hover {
  color: var(--accent);
  padding-left: 0.25rem;
}

.lp-region-col__more {
  align-self: flex-start;
  margin-top: 0.5rem;
  background: transparent;
  border: 0;
  padding: 0.25rem 0;
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--navy);
  cursor: pointer;
  border-bottom: 1px solid var(--rule);
  transition: color 160ms var(--ease), border-color 160ms var(--ease), gap 200ms var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.lp-region-col__more:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
  gap: 0.55rem;
}
.lp-region-col.is-expanded .lp-region-col__rest[hidden] { display: block; }
.lp-region-col.is-expanded .lp-region-col__list { margin-bottom: 0; }
.lp-directory__foot {
  margin: 1.75rem 0 0;
  font-family: var(--font);
  font-size: 0.92rem;
}
.lp-directory__foot a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: border-color 160ms var(--ease);
}
.lp-directory__foot a:hover { border-bottom-color: var(--accent); }

/* -- Section meta pattern (providers, locations, first visit) ---------- */
.lp-section-meta {
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.75rem;
}
.lp-section-title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.8vw, 2.25rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 1.5rem;
  max-width: 26ch;
}

/* -- Providers list ----------------------------------------------------- */
.lp-providers {
  padding: 3.5rem 0;
  background: #fff;
  border-top: 1px solid var(--rule-light);
}
.lp-providers__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}
.lp-people {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) {
  .lp-people { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .lp-people { grid-template-columns: repeat(2, 1fr); }
}
.lp-person a {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  color: inherit;
  text-decoration: none;
  transition: opacity 180ms var(--ease);
}
.lp-person a:hover { opacity: 0.82; }
.lp-person img {
  width: 100%;
  aspect-ratio: 1 / 1.12;
  object-fit: cover;
  border-radius: 2px;
  filter: grayscale(0);
  transition: filter 300ms var(--ease);
}
.lp-person a:hover img { filter: grayscale(0.1) contrast(1.02); }
.lp-person__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--navy);
  line-height: 1.2;
}
.lp-person__role {
  font-family: var(--font);
  font-size: 0.78rem;
  color: var(--text-light);
  line-height: 1.35;
}

/* -- Locations list ----------------------------------------------------- */
.lp-locations {
  padding: 3.5rem 0;
  background: #fff;
  border-top: 1px solid var(--rule-light);
}
.lp-locations__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}
.lp-loc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--rule);
}
.lp-loc {
  /* Single-column block: earlier revisions had a 2.2rem `__idx` column
     that is no longer rendered in markup. Leaving it in forced the body
     to auto-place into col 1 (2.2rem wide), squishing every city name
     and wrapping "New Braunfels" onto two lines. */
  position: relative;
  display: block;
  padding: 0.9rem 0.4rem 0.9rem 0.75rem;
  border-bottom: 1px solid var(--rule-light);
  transition: background-color 200ms var(--ease), padding-left 200ms var(--ease);
}
.lp-loc::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9rem;
  bottom: 0.9rem;
  width: 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 200ms var(--ease);
}
.lp-loc:hover,
.lp-loc.is-active {
  background: rgba(184, 148, 69, 0.05);
  padding-left: 1rem;
}
.lp-loc:hover::before,
.lp-loc.is-active::before { opacity: 1; }
.lp-loc--flagship { border-top: 1px solid var(--rule); }
.lp-loc__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.lp-loc__idx {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.12em;
}
.lp-loc__name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  line-height: 1.25;
  /* inline-flex caused the Flagship tag to force "New Braunfels" into an
     awkward two-line break at tight column widths. Plain inline flow with
     an nbsp between "New" and "Braunfels" in markup keeps the city name
     on one line while still letting the Flagship tag wrap below naturally. */
  display: inline;
  transition: color 180ms var(--ease);
}
.lp-loc__name:hover { color: var(--accent); }
.lp-loc__flag {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.1rem 0.4rem;
  font-family: var(--font);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(184, 148, 69, 0.12);
  border-radius: 2px;
  vertical-align: middle;
  transform: translateY(-1px);
  white-space: nowrap;
}
.lp-loc__facility {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0.1rem 0 0;
  line-height: 1.3;
}
.lp-loc__addr {
  font-family: var(--font);
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0.1rem 0 0;
  line-height: 1.45;
}
.lp-loc__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.4rem 0 0;
  font-family: var(--font);
  font-size: 0.75rem;
  line-height: 1.4;
}
.lp-loc__meta-badge {
  display: inline-block;
  padding: 0.18rem 0.5rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(184, 148, 69, 0.06);
  white-space: nowrap;
}
.lp-loc__meta-text {
  color: var(--text-muted);
  font-style: italic;
}
.lp-loc__providers {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  font-family: var(--font);
  font-size: 0.76rem;
  line-height: 1.4;
}
.lp-loc__providers li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.lp-loc__providers li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--rule);
  margin-left: 0.55rem;
  vertical-align: middle;
}
.lp-loc__providers a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 180ms var(--ease), color 180ms var(--ease);
  white-space: nowrap;
}
.lp-loc__providers a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.lp-loc__providers-pa a {
  font-style: italic;
  color: var(--text-muted);
}

/* -- First visit block -------------------------------------------------- */
.lp-first-visit {
  padding: 3.5rem 0;
  background: #fff;
  border-top: 1px solid var(--rule-light);
}
.lp-first-visit__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}
.lp-first-visit__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 1.75rem;
}
@media (max-width: 780px) {
  .lp-first-visit__cols { grid-template-columns: 1fr; gap: 1.25rem; }
}
.lp-first-visit__cols h3 {
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.5rem;
}
.lp-first-visit__cols p {
  font-family: var(--font-display);
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}
.lp-first-visit__cta {
  font-family: var(--font);
  font-size: 0.95rem;
  color: var(--text-muted);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-light);
}
.lp-first-visit__cta a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: border-color 150ms var(--ease);
}
.lp-first-visit__cta a:hover { border-bottom-color: var(--accent); }

/* -- Neighborhood mini-map on individual location pages ----------------
   Inserted by proxy.py after the bio-hero section. Non-interactive by
   design: a framed "picture" showing where the clinic sits in town. */
.loc-minimap-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter) 1.5rem;
}
.loc-minimap {
  margin: 0;
  border: 1px solid rgba(11, 42, 74, 0.12);
  border-radius: 6px;
  overflow: hidden;
  background: #f4f1ea;
}
.loc-minimap__map {
  width: 100%;
  height: 200px;
}
@media (max-width: 820px) {
  .loc-minimap__map { height: 220px; }
}
.loc-minimap__pin {
  background: transparent !important;
  border: 0 !important;
  filter: drop-shadow(0 2px 4px rgba(11, 42, 74, 0.22));
}

/* OSI-logo pin — shared between home regional map and location mini-map.
   Circular white badge ringed in navy so the monogram pops against OSM
   tile greens/greys without needing a tooltip. */
.locmap-pin,
.loc-minimap__pin {
  background: transparent !important;
  border: 0 !important;
}
.locmap-pin__badge {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(11, 42, 74, 0.35),
              0 0 0 2px rgba(11, 42, 74, 0.9);
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
/* Leaflet ships `.leaflet-container .leaflet-marker-pane img { width: auto }`,
   which is 2-class specificity and beats a bare `.locmap-pin__badge img`.
   Prefix with `.leaflet-container` to tie; also note: percentages on an <img>
   inside display:grid resolve against the intrinsic image size, not the 40px
   badge, so pixel values are required. */
.leaflet-container .locmap-pin__badge img,
.locmap-pin__badge img {
  width: 28px;
  height: 28px;
  max-width: 28px;
  max-height: 28px;
  object-fit: contain;
  display: block;
}
.locmap-pin:hover .locmap-pin__badge,
.locmap-pin.is-active .locmap-pin__badge {
  transform: scale(1.15);
  box-shadow: 0 0 0 6px rgba(63, 128, 105, 0.25),
              0 4px 10px rgba(11, 42, 74, 0.4),
              0 0 0 2px rgba(11, 42, 74, 0.9);
}

/* Photo pin — circular thumbnail of the actual clinic. Used on the home
   regional map so each pin reads as both "there's a clinic here" and
   "here's what it looks like" at a glance. Kept small (52px icon → ~46px
   visible disc) so six pins fit comfortably on the south-Texas view. */
.locmap-pin--photo .locmap-pin__photo {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background-size: cover;
  background-position: center;
  background-color: #e9e4d8;
  box-shadow: 0 0 0 3px #ffffff,
              0 0 0 4px rgba(11, 42, 74, 0.85),
              0 3px 8px rgba(11, 42, 74, 0.35);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.locmap-pin--photo.is-active .locmap-pin__photo {
  transform: scale(1.18);
  box-shadow: 0 0 0 3px #ffffff,
              0 0 0 5px #1f4ea5,
              0 0 0 9px rgba(31, 78, 165, 0.22),
              0 6px 14px rgba(11, 42, 74, 0.4);
}
/* Active-pin feedback for OSI badge pins (scale when its clinic-list row
   is hovered). Matches the photo-pin variant's active treatment but uses
   a larger scale so the monogram remains legible from further away. */
.locmap-pin.is-active .locmap-pin__badge {
  transform: scale(1.18);
  box-shadow: 0 0 0 3px rgba(31, 78, 165, 0.22),
              0 0 0 4px #1f4ea5,
              0 4px 12px rgba(11, 42, 74, 0.4);
}

/* Belt-and-suspenders: even with attributionControl:false on our maps,
   any future Leaflet init could still spawn one. Keep it pinned inside
   its .leaflet-container so it can't visually escape onto the page
   (was previously floating over the header on Safari when scrolled). */
.leaflet-container .leaflet-control-attribution {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
}
.leaflet-control-attribution:empty,
.loc-minimap .leaflet-control-attribution {
  display: none !important;
}
.loc-minimap__cap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.7rem 1rem 0.8rem;
  border-top: 1px solid rgba(11, 42, 74, 0.1);
  background: #fff;
  font-family: var(--font);
  font-size: 0.85rem;
  color: var(--text-muted);
}
.loc-minimap__cap a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--rule, rgba(11,42,74,0.15));
  padding-bottom: 2px;
  transition: border-color 160ms var(--ease);
}
.loc-minimap__cap a:hover { border-bottom-color: var(--accent); }
.loc-minimap__attr {
  font-size: 0.7rem;
  color: rgba(11, 42, 74, 0.42);
  letter-spacing: 0.02em;
}
.loc-minimap__attr a {
  color: inherit !important;
  font-weight: 400 !important;
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.loc-minimap__attr a:hover { color: var(--navy) !important; }
@media (max-width: 560px) {
  .loc-minimap__cap { flex-direction: column; gap: 0.3rem; }
}

/* -- Non-operative care block (home) ----------------------------------
   Three editorial cards that link to dedicated injection / biologic
   treatment pages. Styled to echo .lp-providers / .lp-first-visit so
   the section sits cleanly between the directory and first-visit. */
.lp-nonop {
  padding: 3.5rem 0;
  background: #fff;
  border-top: 1px solid var(--rule-light);
}
.lp-nonop__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}
.lp-nonop__lead {
  font-family: var(--font-display);
  color: var(--text-muted);
  max-width: 64ch;
  font-size: 1.02rem;
  line-height: 1.5;
  margin: 0 0 1.75rem;
}
.lp-nonop__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 900px) {
  .lp-nonop__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .lp-nonop__grid { grid-template-columns: 1fr; gap: 1rem; }
}
.lp-nonop__grid > li { margin: 0; }
.lp-nonop__grid > li > a {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.25rem 1.25rem 1.35rem;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: inherit;
  text-decoration: none;
  height: 100%;
  transition: border-color 180ms var(--ease), transform 180ms var(--ease);
}
.lp-nonop__grid > li > a:hover,
.lp-nonop__grid > li > a:focus-visible {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.lp-nonop__grid > li > a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.lp-nonop__grid h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.005em;
}
.lp-nonop__grid p {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0;
}

.lp-btn {
  display: inline-block;
  background: var(--navy) !important;
  color: #fff !important;
  padding: 0.7rem 1.15rem !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  border: 0 !important;
  margin-right: 0.9rem;
  transition: background 180ms var(--ease) !important;
}
.lp-btn:hover { background: var(--navy-dark) !important; }

/* Mobile: reduce aggressive table for narrow screens — hide the category
   column; name and region are enough. */
@media (max-width: 560px) {
  .lp-th--kind,
  .lp-row__kind { display: none; }
  .lp-row__name { width: auto; }
  .lp-row__region { width: auto; }
}

/* -- 6. Image treatments — rounded corners + optical zoom --------------- */
.provider-card__photo,
.location-card__photo,
.photostrip__tile,
.hero-photo {
  overflow: hidden;
  border-radius: var(--r-lg);
}
.provider-card__photo img,
.location-card__photo img,
.photostrip__tile img,
.hero-photo img {
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.provider-card:hover .provider-card__photo img,
.location-card:hover .location-card__photo img,
.photostrip__tile:hover img {
  transform: scale(1.035);
}

/* -- 7. Hero flourish — a lightly pulsing dot next to the eyebrow -------
   Conveys "we're here, and we've been here 20 years" without an overt
   marketing slam. Motion stops for prefers-reduced-motion. */
.editorial-hero__kicker {
  position: relative;
}
.editorial-hero__kicker::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 0.7rem;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(63, 128, 105, 0.5);
  animation: osi-pulse 2.4s ease-out infinite;
}
@keyframes osi-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(63, 128, 105, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(63, 128, 105, 0); }
  100% { box-shadow: 0 0 0 0   rgba(63, 128, 105, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .editorial-hero__kicker::after { animation: none; }
}

/* -- 8. Region tiles (Hip/Knee/Shoulder/... numbered) ------------------ */
/* These are the 01–08 cards. Give the numbers editorial weight. */
.region-tile {
  padding: 1.4rem 1.4rem 1.2rem !important;
}
.region-tile__index,
.region-tile .tile__number {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 0.45rem;
  display: block;
}

/* -- 9. Section-to-section seams — thin paper-toned rule ---------------- */
/* Rather than a hard line, use a 1px rule tinted to the paper color so
   it reads as a crease in a folded page. */
.providers-preview + *,
.photostrip + *,
.ng-bodymap + *,
.directory + *,
.conditions-band + *,
.first-visit + *,
.locmap + *,
.locations-strip + * {
  position: relative;
}

/* -- 10. Buttons — add a subtle reflective pass on hover --------------- */
.btn-primary,
.btn-appt,
.btn-hero--primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-primary::after,
.btn-appt::after,
.btn-hero--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
              transparent 30%,
              rgba(255, 255, 255, 0.18) 50%,
              transparent 70%);
  transform: translateX(-120%);
  transition: transform 800ms ease;
  pointer-events: none;
  z-index: -1;
}
.btn-primary:hover::after,
.btn-appt:hover::after,
.btn-hero--primary:hover::after {
  transform: translateX(120%);
}

/* -- 11. Footer polish — tighter rhythm + sage link underline sweep ---- */
.site-footer--full h3 {
  position: relative;
  padding-bottom: 0.5rem;
}
.site-footer--full h3::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 24px; height: 1px;
  background: rgba(255, 255, 255, 0.35);
}

/* -- 12. Body-map stage — softer frame --------------------------------- */
.ng-bodymap__stage {
  background: #fff !important;
  border: 0 !important;
  box-shadow: var(--shadow-panel) !important;
}
.ng-region-panel {
  box-shadow: var(--shadow-panel) !important;
  border: 0 !important;
}

/* -- 13. Links — underline sweep on body copy (not nav, not buttons) --- */
.content a:not(.btn-primary):not(.btn-appt):not(.btn-hero):not(.nav-box):not(.sidebar-phone),
p a:not(.btn-primary):not(.btn-appt):not(.btn-hero):not(.nav-box) {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0 1px;
  background-position: 0 100%;
  text-decoration: none;
  transition: background-size 260ms var(--ease), color 180ms var(--ease);
  padding-bottom: 1px;
}
.content a:hover,
p a:hover {
  background-size: 100% 1px;
}

/* -- 14. Focus visibility on cards and interactive tiles --------------- */
.region-tile:focus-visible,
.ng-bodymap__hit:focus-visible,
.location-card:focus-visible {
  outline: none;
  box-shadow: var(--shadow-card-hover), var(--ring-sage);
}

/* -- 15. "See full team / locations / surgeries" mini-links ------------
   Existing markup uses "See full X →". Style consistently so it reads as
   a continuation cue everywhere. */
.section__cta,
a.see-more,
.see-full-link,
a[href*="team"][href$=".html"]:has(> span),
.providers-preview__cta,
.conditions-band__cta {
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--navy);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 180ms var(--ease), gap 220ms var(--ease);
}
.section__cta:hover,
a.see-more:hover,
.providers-preview__cta:hover,
.conditions-band__cta:hover {
  color: var(--accent);
  gap: 0.7rem;
}

/* -- 16. Mobile tuning for landing-page flourishes --------------------- */
@media (max-width: 820px) {
  /* On mobile the alternating paper bands can stripe too harshly —
     knock the contrast back slightly. */
  body > :is(section, main) .photostrip,
  body > :is(section, main) .directory,
  body > :is(section, main) .conditions-band,
  body > :is(section, main) .locmap {
    background: var(--paper);
  }
  body > :is(section, main) .first-visit {
    background: var(--paper-sink);
  }
  /* Smaller accent rule on section heads */
  .providers-preview h2::after,
  .conditions-band h2::after,
  .directory__inner h2::after,
  .locations-strip h2::after,
  .locmap h2::after,
  .first-visit h2::after,
  .photostrip h2::after { width: 32px; }
}

/* ===================================================================
   Dropdown / mega-menu polish (2026-04-21)
   Goal: feel editorial + high-end, in keeping with the rest of the
   site's serif display type and muted paper palette. The previous
   styles worked but looked utilitarian. This layer tightens spacing,
   deepens shadow, and unifies type treatment across the simple
   dropdowns (Providers, Locations) and the cascade mega menu (What
   we treat, Surgical options).
   =================================================================== */

/* ----- Shared panel chrome (simple + mega) ----- */
.site-header__nav--boxed .nav-menu,
.site-header__nav--boxed .nav-menu--mega,
.site-header__nav--boxed .nav-menu--mega-cascade,
.site-header__nav--boxed .nav-mega__flyout {
  background: #fdfbf6 !important;
  border: 1px solid rgba(11, 42, 74, 0.08) !important;
  border-radius: 10px !important;
  box-shadow:
    0 1px 2px rgba(11, 42, 74, 0.04),
    0 12px 28px rgba(11, 42, 74, 0.14),
    0 22px 60px rgba(11, 42, 74, 0.08) !important;
}

/* ----- Simple dropdown (Providers, Locations) ----- */
.site-header__nav--boxed .nav-menu {
  min-width: 240px !important;
  padding: 0.45rem 0 !important;
  margin-top: 10px !important;
}
.site-header__nav--boxed .nav-menu a {
  position: relative;
  padding: 0.55rem 1.1rem 0.55rem 1.25rem !important;
  font-family: var(--font, "Inter", -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 0.86rem !important;
  font-weight: 500 !important;
  color: var(--navy, #0f2a44) !important;
  letter-spacing: 0 !important;
  transition: background 140ms var(--ease, ease), color 140ms var(--ease, ease),
              padding-left 140ms var(--ease, ease);
}
.site-header__nav--boxed .nav-menu a::before {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 50%;
  width: 3px;
  height: 18px;
  border-radius: 2px;
  background: var(--sage-dark, #3F8069);
  transform: translateY(-50%) scaleY(0.4);
  opacity: 0;
  transition: opacity 140ms var(--ease, ease), transform 140ms var(--ease, ease);
}
.site-header__nav--boxed .nav-menu a:hover,
.site-header__nav--boxed .nav-menu a:focus-visible {
  background: rgba(63, 128, 105, 0.06) !important;
  color: var(--navy, #0f2a44) !important;
  padding-left: 1.35rem !important;
}
.site-header__nav--boxed .nav-menu a:hover::before,
.site-header__nav--boxed .nav-menu a:focus-visible::before {
  opacity: 1;
  transform: translateY(-50%) scaleY(1);
}
.site-header__nav--boxed .nav-menu .nav-menu__item--flagship {
  font-weight: 600 !important;
}
.site-header__nav--boxed .nav-menu .nav-menu__flagship-tag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--sage-dark, #3F8069);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
  vertical-align: middle;
}

/* ----- Mega cascade (What we treat, Surgical options) ----- */
.site-header__nav--boxed .nav-menu--mega-cascade {
  width: 280px !important;
  padding: 0.5rem !important;
  margin-top: 10px !important;
}
.site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__label {
  padding: 0.55rem 1.1rem 0.55rem 1.25rem !important;
  font-family: var(--font, "Inter", -apple-system, BlinkMacSystemFont, sans-serif) !important;
  font-size: 0.86rem !important;
  font-weight: 500 !important;
  color: var(--navy, #0f2a44) !important;
  border-radius: 6px !important;
  transition: background 140ms var(--ease, ease), color 140ms var(--ease, ease);
}
.site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__label::after {
  color: rgba(11, 42, 74, 0.35) !important;
  font-size: 1rem !important;
  transition: color 140ms var(--ease, ease), transform 140ms var(--ease, ease);
}
.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: rgba(63, 128, 105, 0.06) !important;
  color: var(--navy, #0f2a44) !important;
  padding-left: 1.35rem !important;
}
.site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__group:hover > .nav-mega__label::after,
.site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__group:focus-within > .nav-mega__label::after {
  color: var(--sage-dark, #3F8069) !important;
  transform: translateX(2px);
}

/* Flyout panel — position overrides only apply without the v2 engine;
   v2 writes top via --flyout-top and uses left:100% already. */
html:not([data-nav-engine="ready"]) .site-header__nav--boxed .nav-mega__flyout {
  top: -4px !important;
  left: calc(100% + 8px) !important;
}
.site-header__nav--boxed .nav-mega__flyout {
  min-width: 380px !important;
  max-width: 560px !important;
  padding: 0.9rem 1rem !important;
  column-count: 2 !important;
  column-gap: 1.25rem !important;
  column-rule: 1px solid rgba(11, 42, 74, 0.06);
}
.site-header__nav--boxed .nav-mega__flyout a {
  padding: 0.55rem 1.1rem 0.55rem 1.25rem !important;
  font-family: var(--font, "Inter", -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 0.86rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  color: var(--navy, #0f2a44) !important;
  border-radius: 4px !important;
  transition: background 140ms var(--ease, ease), color 140ms var(--ease, ease),
              padding-left 140ms var(--ease, ease);
}
.site-header__nav--boxed .nav-mega__flyout a:hover,
.site-header__nav--boxed .nav-mega__flyout a:focus-visible {
  background: rgba(63, 128, 105, 0.06) !important;
  color: var(--navy, #0f2a44) !important;
  padding-left: 1.35rem !important;
}
.site-header__nav--boxed .nav-mega__flyout .nav-mega__empty {
  padding: 0.45rem 0.55rem !important;
  font-family: var(--font, "Inter", -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 0.82rem !important;
  font-style: italic;
  color: rgba(11, 42, 74, 0.55) !important;
  column-span: all;
}

/* Footer link at bottom of cascade menu */
.site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__footer {
  display: block;
  margin: 0.45rem 0.25rem 0.15rem !important;
  padding: 0.55rem 0.75rem !important;
  border-top: 1px solid rgba(11, 42, 74, 0.08) !important;
  font-family: var(--font, "Inter", -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: var(--sage-dark, #3F8069) !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: color 140ms var(--ease, ease);
}
.site-header__nav--boxed .nav-menu--mega-cascade .nav-mega__footer:hover {
  color: var(--navy, #0f2a44) !important;
}

/* ----- Trigger button refinement (Providers ▾, What we treat ▾ etc.) ----- */
.site-header__nav--boxed .nav-box,
.site-header__nav--boxed .nav-box__link {
  font-family: var(--font, "Inter", -apple-system, BlinkMacSystemFont, sans-serif);
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}
.site-header__nav--boxed .nav-box--has-menu:hover,
.site-header__nav--boxed .nav-box--has-menu:focus-within,
.site-header__nav--boxed .nav-box--has-menu.is-open {
  background: rgba(63, 128, 105, 0.08) !important;
  border-color: rgba(11, 42, 74, 0.22) !important;
  color: var(--navy, #0f2a44) !important;
}
.site-header__nav--boxed .nav-box__caret {
  color: rgba(11, 42, 74, 0.5) !important;
  transition: transform 160ms var(--ease, ease), color 160ms var(--ease, ease);
}
.site-header__nav--boxed .nav-box--has-menu:hover .nav-box__caret,
.site-header__nav--boxed .nav-box--has-menu.is-open .nav-box__caret {
  color: var(--sage-dark, #3F8069) !important;
  transform: translateY(1px);
}

/* Close-delay timing is owned by nextgen.css (forgiving-hover block). */

/* Treatment-path overflow list: continues the 1/2/3 card grid above it.
   Without this reset the overflow <ol> restarts its counter from 1, so
   the page appears to have two separate "step 1, step 2, step 3" tracks
   when it is actually one linear 6-step protocol. */
.treatment-list--overflow { counter-reset: treatment 3 !important; }

/* -- Care pathway strip (landing) --------------------------------------
   Echoes the breadcrumb aesthetic but at the journey level. Five numbered
   steps, each a link to the relevant section. Visible hover state mirrors
   the breadcrumb + dropdown hover language (color-shift + border lift). */
.lp-pathway {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 2.4rem var(--gutter) 0.4rem;
}
.lp-pathway__eyebrow {
  font-family: var(--font);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}
.lp-pathway__flow {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-auto-rows: auto;
  justify-content: start;
  column-gap: 0.45rem;
  row-gap: 0.9rem;
  position: relative;
}
.lp-pathway__node {
  display: flex;
  align-items: center;
  margin: 0;
  grid-row: 1;
}
.lp-pathway__node:nth-child(1) { grid-column: 1; }
.lp-pathway__node:nth-child(2) { grid-column: 2; }
.lp-pathway__node:nth-child(3) { grid-column: 3; }
.lp-pathway__node:nth-child(4) { grid-column: 4; }
/* Chevrons only appear between consecutive nodes on the main row. */
.lp-pathway__node:not(.lp-pathway__branch):not(:first-child)::before {
  content: "›";
  color: rgba(11, 42, 74, 0.35);
  margin: 0 0.4rem 0 0;
  font-size: 1.15rem;
  font-family: var(--font-display);
  line-height: 1;
}
.lp-pathway a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid rgba(11, 42, 74, 0.12);
  background: #fff;
  border-radius: 999px;
  color: var(--navy);
  text-decoration: none;
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 500;
  transition:
    border-color 180ms var(--ease),
    background 180ms var(--ease),
    color 180ms var(--ease),
    transform 180ms var(--ease),
    box-shadow 180ms var(--ease);
}
.lp-pathway a:hover,
.lp-pathway a:focus-visible {
  border-color: rgba(31, 78, 165, 0.45);
  background: #f4efe5;
  color: #1f4ea5;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(20, 30, 60, 0.08);
}
.lp-pathway__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  background: var(--navy, #0f2a44);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.lp-pathway a:hover .lp-pathway__step,
.lp-pathway a:focus-visible .lp-pathway__step {
  background: #1f4ea5;
}
.lp-pathway__label { white-space: nowrap; }
.lp-pathway__note {
  text-transform: none;
  letter-spacing: 0.01em;
  color: rgba(11, 42, 74, 0.58);
  font-style: italic;
}
/* Branch node: sits in grid row 2, anchored under step 3 (column 3). Spans
   columns 3-4 so the longer "Surgery, only if..." pill has room without
   pushing step-3's column wider. A dashed connector drops from step 3 into
   the branch so the off-ramp reads as a decision that hangs off step 3. */
.lp-pathway__node.lp-pathway__branch {
  grid-row: 2;
  grid-column: 3 / span 2;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  position: relative;
  padding-left: 0.65rem;
}
.lp-pathway__node.lp-pathway__branch::before {
  content: "";
  position: absolute;
  top: -0.9rem;
  left: 0.9rem;
  width: 0.9rem;
  height: 1.1rem;
  border-left: 1px dashed rgba(11, 42, 74, 0.38);
  border-bottom: 1px dashed rgba(11, 42, 74, 0.38);
  border-bottom-left-radius: 0.4rem;
}
.lp-pathway__branch-label {
  font-family: var(--font);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(11, 42, 74, 0.52);
  white-space: nowrap;
}
.lp-pathway__branch a {
  border-style: dashed;
  border-color: rgba(11, 42, 74, 0.22);
  background: transparent;
  color: rgba(11, 42, 74, 0.72);
}
.lp-pathway__branch .lp-pathway__step {
  background: rgba(11, 42, 74, 0.55);
}
.lp-pathway__branch a:hover,
.lp-pathway__branch a:focus-visible {
  border-style: solid;
  border-color: rgba(31, 78, 165, 0.45);
  background: #f4efe5;
  color: #1f4ea5;
}
@media (max-width: 900px) {
  .lp-pathway__flow {
    grid-template-columns: auto;
    row-gap: 0.5rem;
  }
  .lp-pathway__node,
  .lp-pathway__node:nth-child(1),
  .lp-pathway__node:nth-child(2),
  .lp-pathway__node:nth-child(3),
  .lp-pathway__node:nth-child(4) {
    grid-row: auto;
    grid-column: 1;
  }
  .lp-pathway__node.lp-pathway__branch {
    grid-row: auto;
    grid-column: 1;
    padding-left: 1.2rem;
  }
  .lp-pathway__node:not(.lp-pathway__branch):not(:first-child)::before {
    display: none;
  }
  .lp-pathway__node.lp-pathway__branch::before {
    top: -0.4rem;
    left: 0.4rem;
    width: 0.6rem;
    height: 0.7rem;
  }
  .lp-pathway__label { white-space: normal; }
}

/* =====================================================================
   HORIZONTAL SCROLL SHELF
   ---------------------------------------------------------------------
   Apple-store style: snap-scrolling track, hidden scrollbar, circular
   arrow controls, right-edge fade that shows "more to the right."
   Cards are fixed-width, media-above-text, with an anatomy SVG as a
   clinical-feeling hero illustration. Reusable: drop any
   <section class="shelf"> block into a page and the JS wires it up.
   ===================================================================== */
.shelf {
  max-width: var(--content-max);
  margin: 3.2rem auto 2.6rem;
  padding: 0 var(--gutter);
  position: relative;
}
.shelf__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.2rem;
  margin-bottom: 1.35rem;
}
.shelf__head-text { max-width: 640px; }
.shelf__eyebrow {
  font-family: var(--font);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.45rem;
}
.shelf__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 0.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.shelf__sub {
  color: rgba(11, 42, 74, 0.68);
  font-family: var(--font);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}
.shelf__controls {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  flex-shrink: 0;
}
.shelf__btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(11, 42, 74, 0.16);
  background: #fff;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition:
    border-color 180ms var(--ease),
    color 180ms var(--ease),
    background 180ms var(--ease),
    transform 180ms var(--ease),
    box-shadow 180ms var(--ease),
    opacity 180ms var(--ease);
}
.shelf__btn:hover:not([disabled]) {
  border-color: rgba(31, 78, 165, 0.5);
  color: #1f4ea5;
  background: #f4efe5;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(11, 42, 74, 0.08);
}
.shelf__btn[disabled] {
  opacity: 0.32;
  cursor: not-allowed;
}
.shelf__btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shelf__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(260px, 30vw, 340px);
  gap: 1.1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0.3rem 0.2rem 0.6rem;
  margin: 0 -0.2rem;
}
.shelf__track::-webkit-scrollbar { display: none; }

.shelf__card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(11, 42, 74, 0.09);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition:
    transform 220ms var(--ease),
    box-shadow 220ms var(--ease),
    border-color 220ms var(--ease);
}
.shelf__card:hover,
.shelf__card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(31, 78, 165, 0.28);
  box-shadow: 0 14px 32px rgba(11, 42, 74, 0.09);
  outline: none;
}
.shelf__card-media {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #f5efe3 0%, #e9e0cd 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shelf__card--accent .shelf__card-media {
  background: linear-gradient(135deg, #0f2a44 0%, #1f4ea5 100%);
  color: rgba(255,255,255,0.92);
}
.shelf__card-media svg.shelf__card-anat {
  width: 60%;
  height: 60%;
  color: rgba(11, 42, 74, 0.42);
  transition: color 220ms var(--ease), transform 400ms var(--ease);
}
.shelf__card-media img.shelf__card-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;     /* keep anatomy centered, never edge-cropped */
  transition: transform 500ms var(--ease), filter 300ms var(--ease);
  filter: saturate(0.92) contrast(1.02);
}
.shelf__card:hover .shelf__card-media img.shelf__card-photo {
  transform: scale(1.04);
  filter: saturate(1) contrast(1.05);
}
.shelf__card--accent .shelf__card-media svg.shelf__card-anat {
  color: rgba(255,255,255,0.7);
}
.shelf__card:hover .shelf__card-media svg.shelf__card-anat {
  color: #1f4ea5;
  transform: scale(1.05);
}
.shelf__card--accent:hover .shelf__card-media svg.shelf__card-anat {
  color: #fff;
}
.shelf__card-badge {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  background: rgba(255,255,255,0.92);
  color: var(--navy);
  font-family: var(--font);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  font-weight: 600;
  backdrop-filter: blur(6px);
}
.shelf__card--accent .shelf__card-badge {
  background: rgba(255,255,255,0.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
}
.shelf__card-body {
  padding: 1.15rem 1.25rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.shelf__card-kicker {
  font-family: var(--font);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}
.shelf__card-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--navy);
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.shelf__card-desc {
  color: rgba(11, 42, 74, 0.72);
  font-family: var(--font);
  font-size: 0.92rem;
  line-height: 1.45;
  margin: 0;
}
.shelf__card-cta {
  margin-top: auto;
  padding-top: 0.7rem;
  color: #1f4ea5;
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: gap 220ms var(--ease);
}
.shelf__card:hover .shelf__card-cta {
  gap: 0.55rem;
}
.shelf__card-cta::after {
  content: "→";
  transition: transform 220ms var(--ease);
}
.shelf__card:hover .shelf__card-cta::after {
  transform: translateX(2px);
}

/* Edge fades tell the user there's more content off-screen. */
.shelf__fade {
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  z-index: 2;
  opacity: 0;
  transition: opacity 220ms var(--ease);
}
.shelf__fade--left { left: 0; background: linear-gradient(90deg, var(--bg, #fafaf7) 0%, transparent 100%); }
.shelf__fade--right { right: 0; background: linear-gradient(270deg, var(--bg, #fafaf7) 0%, transparent 100%); }
.shelf.has-overflow-left .shelf__fade--left { opacity: 1; }
.shelf.has-overflow-right .shelf__fade--right { opacity: 1; }

/* Dot pagination under the track. One dot per card; active dot widens. */
.shelf__dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1rem;
}
.shelf__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(11, 42, 74, 0.2);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 180ms var(--ease), width 220ms var(--ease);
}
.shelf__dot.is-active {
  background: var(--navy);
  width: 22px;
}

@media (max-width: 700px) {
  .shelf { margin: 2.2rem auto 1.8rem; }
  .shelf__head { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
  .shelf__track { grid-auto-columns: 82%; }
  .shelf__controls { display: none; }
  .shelf__dots { margin-top: 0.7rem; }
}

/* =====================================================================
   CONDITION-PAGE "BRITANNICA" DEPTH LAYER
   Long-form reference typography for condition detail pages. Adds:
   lede, quick-facts band, feel-list, cause-dl, exam-list, mythbox,
   imaging-list, timeline, prevention-list, FAQ, and two new sidebar
   card variants (facts, glossary). All built to sit cleanly alongside
   the existing .c-section-head / .c-path / .treatment-list rhythm.
   ===================================================================== */

/* Lede: the opening paragraph under Overview. First word is a larger
   navy drop cap so the article reads like an encyclopedia entry. */
.is-condition .content > section > .c-lede:first-of-type,
.c-lede {
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.65;
  color: var(--navy);
}
.c-lede strong:first-child {
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* Quick-facts horizontal band at the top of the overview. Four tiles
   side-by-side with big number + small label, bordered to read as a
   reference-card rather than marketing. */
.c-quickfacts {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 1.8rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid rgba(11, 42, 74, 0.14);
  border-radius: 6px;
  overflow: hidden;
  background: #faf7f2;
}
.c-quickfacts li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  border-right: 1px solid rgba(11, 42, 74, 0.09);
  margin: 0;
}
.c-quickfacts li:last-child { border-right: 0; }
.c-quickfacts__n {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.c-quickfacts__l {
  font-family: var(--font);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-top: 0.25rem;
}
@media (max-width: 720px) {
  .c-quickfacts { grid-template-columns: repeat(2, 1fr); }
  .c-quickfacts li:nth-child(2) { border-right: 0; }
  .c-quickfacts li:nth-child(-n+2) { border-bottom: 1px solid rgba(11, 42, 74, 0.09); }
}

/* Figure credit line — small, muted, block under caption */
.figure__credit {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

/* Callout panel: "what it isn't", sidebar-like info block inline with
   the article flow. Soft beige background, left accent, compact. */
.c-callout {
  border-left: 3px solid var(--accent, #c8a96a);
  background: #faf7f2;
  padding: 0.9rem 1.1rem 1rem;
  margin: 1.5rem 0;
  border-radius: 0 4px 4px 0;
}
.c-callout h4 {
  margin: 0 0 0.35rem;
  font-family: var(--font);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
}
.c-callout p { margin: 0; font-size: 0.98rem; line-height: 1.6; }

/* Myth/fact pair — two short lines, visually contrasted. */
.c-mythbox {
  border: 1px solid rgba(11, 42, 74, 0.14);
  border-radius: 6px;
  padding: 0.85rem 1.1rem;
  margin: 1.5rem 0;
  background: #fff;
}
.c-mythbox__m, .c-mythbox__f {
  margin: 0;
  padding: 0.4rem 0;
  font-size: 0.98rem;
  line-height: 1.55;
}
.c-mythbox__m { color: #7a2e2e; }
.c-mythbox__f {
  color: var(--navy);
  border-top: 1px dashed rgba(11, 42, 74, 0.2);
  margin-top: 0.25rem;
  padding-top: 0.6rem;
}

/* Symptom feel-list: tighter paragraphs with strong lead-ins. */
.c-feel-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 1.2rem;
}
.c-feel-list li {
  padding: 0.55rem 0 0.55rem 1.3rem;
  border-bottom: 1px solid rgba(11, 42, 74, 0.07);
  position: relative;
  font-size: 1rem;
  line-height: 1.55;
}
.c-feel-list li:last-child { border-bottom: 0; }
.c-feel-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: 6px;
  height: 6px;
  background: var(--accent, #c8a96a);
  border-radius: 50%;
}

/* Cause & exam lists: definition-list form for dense reference reading. */
.c-cause-list,
.c-img-list,
.c-prev-list { margin: 1rem 0 1.2rem; }
.c-cause-list dt {
  font-family: var(--font);
  font-weight: 600;
  color: var(--navy);
  margin-top: 0.9rem;
  font-size: 0.98rem;
}
.c-cause-list dt:first-child { margin-top: 0; }
.c-cause-list dd {
  margin: 0.2rem 0 0;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--text);
}
.c-exam-list {
  padding-left: 1.4rem;
  margin: 1rem 0 1.2rem;
}
.c-exam-list li {
  margin: 0.45rem 0;
  font-size: 0.98rem;
  line-height: 1.6;
}
.c-img-list, .c-prev-list {
  list-style: none;
  padding: 0;
}
.c-img-list li,
.c-prev-list li {
  padding: 0.5rem 0 0.5rem 1.3rem;
  position: relative;
  border-bottom: 1px solid rgba(11, 42, 74, 0.06);
  font-size: 0.98rem;
  line-height: 1.6;
}
.c-img-list li:last-child,
.c-prev-list li:last-child { border-bottom: 0; }
.c-img-list li::before,
.c-prev-list li::before {
  content: "›";
  position: absolute;
  left: 0.25rem;
  top: 0.45rem;
  color: var(--accent, #c8a96a);
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1;
}

/* Recovery timeline: stacked horizontal ordered rail. */
.c-timeline {
  list-style: none;
  padding: 0;
  margin: 1rem 0 1.4rem;
  counter-reset: tl;
  border-left: 2px solid rgba(11, 42, 74, 0.15);
}
.c-timeline li {
  position: relative;
  padding: 0.2rem 0 0.9rem 1.4rem;
  counter-increment: tl;
}
.c-timeline li::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 0.45rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--navy);
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(11, 42, 74, 0.15);
}
.c-timeline__when {
  display: block;
  font-family: var(--font);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.15rem;
}
.c-timeline p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.55;
}

/* FAQ: native <details>/<summary>, styled as clean reference rows. */
.c-faq details {
  border-bottom: 1px solid rgba(11, 42, 74, 0.1);
  padding: 0.65rem 0;
}
.c-faq details:last-child { border-bottom: 0; }
.c-faq summary {
  font-family: var(--font);
  font-weight: 600;
  font-size: 1rem;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
  padding-right: 1.2rem;
  position: relative;
  transition: color 160ms var(--ease);
}
.c-faq summary:hover { color: #1f4ea5; }
.c-faq summary::-webkit-details-marker { display: none; }
.c-faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: -2px;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--accent, #c8a96a);
  transition: transform 200ms var(--ease);
}
.c-faq details[open] summary::after {
  content: "–";
  color: var(--navy);
}
.c-faq details p {
  margin: 0.55rem 0 0.15rem;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--text);
}

/* Sidebar "Quick facts" and "Terms" cards — DL-driven reference blocks. */
.sidebar-card--facts dl,
.sidebar-card--glossary dl {
  margin: 0;
}
.sidebar-card--facts dt,
.sidebar-card--glossary dt {
  font-family: var(--font);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.8rem;
  font-weight: 600;
}
.sidebar-card--facts dt:first-of-type,
.sidebar-card--glossary dt:first-of-type { margin-top: 0; }
.sidebar-card--facts dd,
.sidebar-card--glossary dd {
  margin: 0.2rem 0 0;
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--text);
}
.sidebar-card--glossary dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--navy);
}

/* ═══════════════════════════════════════════════════════════════════════
   Inline citations + References section
   Tiny superscript markers next to load-bearing factual claims, with a
   collapsed References block at the bottom of the homepage. Tone: match
   .lp-nonop / .lp-directory editorial polish. Should not interrupt
   reading rhythm — sage accent, subdued, hover-only underline.
   ═══════════════════════════════════════════════════════════════════════ */

/* -- Inline citation marker ------------------------------------------- */
.cite {
  font-size: 0.65em;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--accent);
  vertical-align: super;
  line-height: 0;
  margin-left: 0.15em;
  white-space: nowrap;
}
.cite a {
  color: inherit;
  text-decoration: none;
  transition: color 160ms var(--ease);
}
.cite a:hover,
.cite a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cite a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 1px;
}

/* -- References section (sits just before the footer) ----------------- */
.lp-refs {
  padding: 1.75rem 0 2rem;
  background: #FAF8F4;
  border-top: 1px solid var(--rule-light);
}
.lp-refs__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}
.lp-refs__title {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  font-weight: 600;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin: 0 0 0.85rem;
  max-width: 40ch;
}
.lp-refs__list {
  list-style: decimal;
  padding: 0 0 0 1.15rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  counter-reset: refs;
}
.lp-refs__list > li {
  margin: 0 0 0.4rem;
  padding-left: 0.15rem;
  scroll-margin-top: 1.25rem;
}
.lp-refs__list > li:target {
  background: var(--accent-soft);
  border-radius: 2px;
  box-shadow: -0.4rem 0 0 var(--accent-soft), 0.4rem 0 0 var(--accent-soft);
  transition: background 200ms var(--ease);
}
.lp-refs__list cite {
  font-style: italic;
  color: var(--navy);
}
.lp-refs__list a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms var(--ease);
}
.lp-refs__list a:hover,
.lp-refs__list a:focus-visible {
  border-bottom-color: var(--accent);
}
@media (max-width: 560px) {
  .lp-refs { padding: 1.25rem 0 1.5rem; }
  .lp-refs__list { font-size: 0.7rem; }
}

/* ───── In the operating room (surgical-craft showcase) ───── */
.lp-craft {
  padding: 5rem 0 5.5rem;
  background: radial-gradient(circle at 30% 0%, #14334f 0%, #0a1c2e 55%, #061421 100%);
  color: #e6eef7;
  border-top: 1px solid var(--rule-light);
}
.lp-craft__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}
.lp-craft__meta {
  color: var(--accent);
  opacity: 0.95;
}
.lp-craft__title {
  color: #fff;
  margin-bottom: 1.1rem;
}
.lp-craft__lead {
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.55;
  color: #b9c7d5;
  max-width: 62ch;
  margin: 0 0 2.75rem;
}
.lp-craft__grid {
  list-style: none;
  padding: 0;
  margin: 0 0 2.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
}
@media (max-width: 1080px) {
  .lp-craft__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (max-width: 560px) {
  .lp-craft__grid { grid-template-columns: 1fr; gap: 1.75rem; }
}
.lp-craft__card {
  margin: 0;
}
.lp-craft__card figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.lp-craft__card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 2px;
  filter: saturate(0.9) contrast(1.02);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
  transition: transform 280ms var(--ease), filter 280ms var(--ease);
}
.lp-craft__card:hover img {
  transform: translateY(-2px);
  filter: saturate(1) contrast(1.05);
}
.lp-craft__card figcaption {
  font-family: var(--font-display);
  font-size: 0.88rem;
  line-height: 1.5;
  color: #a9b6c4;
}
.lp-craft__card figcaption strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  color: #fff;
  margin-bottom: 0.3rem;
}

/* ─────────────────────────────────────────────────────────────────
   Team-photo placeholder slots. Visible, intentional-looking boxes
   that tell the client (and any viewer) exactly where a commissioned
   documentary photo of a specific surgeon+PA pairing will land.
   Two variants: --dark sits on the navy lp-craft gradient,
   default (light) sits on cream shelf / directory backgrounds.
   ───────────────────────────────────────────────────────────────── */
.team-slot {
  aspect-ratio: 4 / 3;
  width: 100%;
  border: 1.5px dashed rgba(15, 42, 68, 0.32);
  border-radius: 2px;
  background: linear-gradient(135deg, #f4efe5 0%, #ece4d3 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.2rem;
  gap: 0.45rem;
  transition: border-color 220ms var(--ease), background 220ms var(--ease);
}
.team-slot:hover {
  border-color: rgba(15, 42, 68, 0.55);
  background: linear-gradient(135deg, #efe9dc 0%, #e5dcc6 100%);
}
.team-slot__eyebrow {
  font-family: var(--font);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
.team-slot__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--navy);
  line-height: 1.3;
  max-width: 22ch;
}
.team-slot__hint {
  font-family: var(--font-display);
  font-size: 0.75rem;
  color: var(--text-muted);
  max-width: 24ch;
  line-height: 1.45;
  font-style: italic;
}

/* Dark variant — dashed placeholder on lp-craft's navy gradient. */
.lp-craft__card--placeholder .team-slot,
.team-slot--dark {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.035);
}
.lp-craft__card--placeholder .team-slot:hover,
.team-slot--dark:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.06);
}
.lp-craft__card--placeholder .team-slot__eyebrow,
.team-slot--dark .team-slot__eyebrow {
  color: rgba(255, 255, 255, 0.55);
}
.lp-craft__card--placeholder .team-slot__name,
.team-slot--dark .team-slot__name {
  color: #fff;
}
.lp-craft__card--placeholder .team-slot__hint,
.team-slot--dark .team-slot__hint {
  color: rgba(255, 255, 255, 0.65);
}
.lp-craft__card--placeholder figcaption {
  font-style: italic;
}

/* -- Team-pair strip inside .lp-providers ----------------------------- */
.lp-team-pairs {
  margin-top: 2.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule-light);
}
.lp-team-pairs__caption {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--text-muted);
  max-width: 60ch;
  line-height: 1.55;
  margin: 0 0 1.4rem;
}
.lp-team-pairs__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
}
.lp-team-pairs__grid > li { margin: 0; }
@media (max-width: 720px) {
  .lp-team-pairs__grid { grid-template-columns: 1fr; }
}
.lp-team-pairs .team-slot {
  aspect-ratio: 16 / 9;     /* wider than the 4/3 craft-deck variant */
}
.lp-craft__note {
  font-family: var(--font-display);
  font-size: 0.76rem;
  color: #7e8e9f;
  font-style: italic;
  line-height: 1.55;
  max-width: 60ch;
  padding: 1.4rem 0 0;
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LANDING PAGE — BACKGROUND DEPTH + SECTION RHYTHM (polish pass)
   Subtle by design: most opacities <0.06. Scoped to body + .lp-* only.
   Does NOT touch: site-header (sticky/scroll/dropdown), .lp-craft (navy),
   .site-footer, typography, accent color, hero photo, Leaflet map,
   team-slot cards, refs, cite markers.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. Paper tone — body shifts off pure white. Supersedes L1189 !important. */
html body { background: #FBF9F4 !important; }
/* Header itself stays crisp white so the sticky plane still reads distinct */
html body .site-header { background: #FFFFFF !important; }

/* 2. Soften the utility-bar → main-nav → hero seam */
html body .site-header__utility {
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}
html body .site-header__main {
  border-bottom: 1px solid rgba(63, 128, 105, 0.14);
  box-shadow: 0 1px 0 rgba(27, 27, 27, 0.03);
}

/* 3. Full-page grain overlay (~3.5% opacity). Fixed so it doesn't tile with
      scroll; pointer-events: none so it never blocks clicks. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}
.site-header, .site-footer { position: relative; z-index: 2; }

/* 4. Hero radial wash — soft sage + faint navy glow UNDER the existing photo
      gradient. ::after layer, so we don't touch the complex backgroundImage. */
.lp-hero { position: relative; isolation: isolate; }
.lp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 12% 28%, rgba(63, 128, 105, 0.07) 0%, rgba(63, 128, 105, 0) 60%),
    radial-gradient(ellipse 55% 50% at 92% 110%, rgba(32, 48, 112, 0.05) 0%, rgba(32, 48, 112, 0) 70%);
}
.lp-hero > * { position: relative; z-index: 1; }
.lp-hero {
  box-shadow: inset 0 12px 20px -14px rgba(32, 48, 112, 0.08);
}

/* 5. Section rhythm — alternating warm/cool bands. Values within ~4 pts of
      the paper body; the eye reads bands, not boxes. */
.lp-stats        { background: #F5EFE2; }
.lp-providers    { background: #FEFDFA; }
.lp-locations    { background: #FBF9F4; }
.lp-directory    { background: #F5EFE2; }
.lp-nonop        { background: #FEFDFA; }
.lp-first-visit  { background: #F5EFE2; }

/* 6. Hairline dividers + sage dot between bands */
.lp-stats,
.lp-providers,
.lp-locations,
.lp-directory,
.lp-nonop,
.lp-first-visit { position: relative; }

.lp-providers::before,
.lp-locations::before,
.lp-directory::before,
.lp-nonop::before,
.lp-first-visit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(120px, 18vw);
  height: 1px;
  background: linear-gradient(90deg,
    rgba(228, 222, 209, 0) 0%,
    rgba(228, 222, 209, 0.9) 50%,
    rgba(228, 222, 209, 0) 100%);
  pointer-events: none;
  z-index: 2;
}
.lp-providers > i.lp-divdot,
.lp-locations > i.lp-divdot,
.lp-directory > i.lp-divdot,
.lp-nonop > i.lp-divdot,
.lp-first-visit > i.lp-divdot { display: none; } /* reserved for future markup */

/* Sage dot centered on the hairline. Uses a second pseudo to avoid clashing
   with any existing ::after (none exist on these sections today, but be safe). */
.lp-providers::after,
.lp-locations::after,
.lp-directory::after,
.lp-nonop::after,
.lp-first-visit::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(63, 128, 105, 0.5);
  pointer-events: none;
  z-index: 3;
}

/* 7. Oversized pale numeral watermarks. Scoped to each section's inner
      container so they sit within the content column, not edge-to-edge. */
.lp-stats__inner,
.lp-providers__inner,
.lp-locations__inner,
.lp-nonop__inner,
.lp-first-visit__inner { position: relative; }
.lp-directory .ng-bodymap { position: relative; }

.lp-stats__inner::before,
.lp-providers__inner::before,
.lp-locations__inner::before,
.lp-directory .ng-bodymap::before,
.lp-nonop__inner::before,
.lp-first-visit__inner::before {
  position: absolute;
  top: -0.18em;
  right: 0.2rem;
  font-family: var(--font-display, "Newsreader", serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(5.5rem, 11vw, 10rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(27, 27, 27, 0.055);
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
.lp-stats__inner::before        { content: "01"; }
.lp-providers__inner::before    { content: "02"; }
.lp-locations__inner::before    { content: "03"; }
.lp-directory .ng-bodymap::before { content: "04"; }
.lp-nonop__inner::before        { content: "05"; }
.lp-first-visit__inner::before  { content: "06"; }

/* Lift real content above the watermark */
.lp-stats__inner > *,
.lp-providers__inner > *,
.lp-locations__inner > *,
.lp-directory .ng-bodymap > *,
.lp-nonop__inner > *,
.lp-first-visit__inner > * { position: relative; z-index: 1; }

@media (max-width: 720px) {
  .lp-stats__inner::before,
  .lp-providers__inner::before,
  .lp-locations__inner::before,
  .lp-directory .ng-bodymap::before,
  .lp-nonop__inner::before,
  .lp-first-visit__inner::before {
    font-size: 5rem;
    color: rgba(27, 27, 27, 0.045);
  }
}

/* 8. Lift shelf cards off the warm paper. Shelves are transparent, so
      cards were dissolving. Add warmth + hairline border + whisper shadow.
      Higher specificity selector (html body .shelf ...) so cascade beats
      the 0.2s transition timing quirk that was zeroing the computed value. */
html body .shelf .shelf__card {
  background: #FFFFFF;
  border: 1px solid rgba(228, 222, 209, 0.7);
  box-shadow:
    0 1px 2px rgba(27, 27, 27, 0.04),
    0 6px 16px rgba(27, 27, 27, 0.05) !important;
}
html body .shelf .shelf__card:hover,
html body .shelf .shelf__card:focus-visible {
  box-shadow:
    0 2px 4px rgba(27, 27, 27, 0.05),
    0 12px 28px rgba(27, 27, 27, 0.08) !important;
  border-color: rgba(63, 128, 105, 0.32);
}

/* 9. PRESERVATION: explicitly guard lp-craft, shelves, and site-footer from
      any of the band rules above — belt-and-braces. */
.lp-craft { background: #0b1930 !important; }
.lp-craft::before, .lp-craft::after { content: none !important; }
.shelf { background: transparent !important; }
.shelf::before, .shelf::after { content: none !important; }

/* 10. Suppress grain in high-contrast mode */
@media (prefers-contrast: more) {
  body::before { display: none; }
}


/* -- Location provider boxes ----------------------------------------- */
.loc-providers {
  padding: 2.5rem 0 2.75rem;
  border-top: 1px solid var(--rule-light);
  margin-top: 2.5rem;
}
.loc-providers__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--navy);
  margin: 0 0 1.25rem;
  letter-spacing: -0.005em;
}
.loc-providers__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.85rem;
}
.provider-box {
  position: relative;
  background: #fff;
  border: 1.5px solid var(--rule-light);
  border-left-width: 5px;
  border-radius: 3px;
  transition: border-color 180ms var(--ease), transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.provider-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -12px rgba(15, 42, 68, 0.18);
}
.provider-box a {
  display: block;
  padding: 0.9rem 1rem;
  text-decoration: none;
  color: var(--navy);
}
.provider-box__role {
  display: block;
  font-family: var(--font);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.provider-box__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
}

/* Surgeon (green — sage accent, existing site language) */
.provider-box--surgeon {
  border-left-color: #3f8069;        /* site sage */
}
.provider-box--surgeon .provider-box__role {
  color: #3f8069;
}
.provider-box--surgeon:hover {
  border-color: #3f8069;
}

/* PA (blue — matches site navy/blue family) */
.provider-box--pa {
  border-left-color: #1f4ea5;        /* site blue */
}
.provider-box--pa .provider-box__role {
  color: #1f4ea5;
}
.provider-box--pa:hover {
  border-color: #1f4ea5;
}

/* ═══════════════════════════════════════════════════════════════════════
   TX FIGURE — treatment-page inline imagery
   Lives under .page-title, centered, max-width constrained, with italic
   caption + a small attribution span in muted ink.
   ═══════════════════════════════════════════════════════════════════════ */
.tx-figure {
  margin: 1.75rem auto 2.25rem;
  max-width: 640px;
  text-align: center;
}
.tx-figure--lead { margin-top: 1rem; }
.tx-figure img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 2px;
  background: #f8f4ea;
  padding: 0.4rem;
  border: 1px solid var(--rule-light, rgba(15, 42, 68, 0.1));
}
.tx-figure figcaption {
  font-family: var(--font-display, Newsreader, serif);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-muted, #5d6b7d);
  margin-top: 0.75rem;
  padding: 0 0.5rem;
}
.tx-figure__attr {
  display: block;
  margin-top: 0.3rem;
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--text-muted, #5d6b7d);
  opacity: 0.85;
}