/* ===========================================================
   Northside Dental Mockup · Clinical Glow Luxury
   Design system: warm parchment, charcoal text, clay CTA,
   editorial serif display, Source Serif body. One stylesheet across
   all 12+ pages.
   =========================================================== */

/* --- Tokens ------------------------------------------------ */
/* Palette grounded in Northside Dental real CSS (--wp--preset--color):
   #79C142 primary green, #F1F1EB cream body, Playfair Display headings, Source Serif Pro body
   #1d1d1d text, #efe5e4 blush, #FFFFF5 ivory. Lifted toward editorial luxury. */
:root {
  /* Two-color palette: only white + Northside primary green (#79C142).
     All surface tokens collapse to white. Brand accents collapse to blue. */
  /* Cool porcelain off-whites to match B30's navy-cool palette (no warm cast) */
  --cream:        #F2F4F4;
  --cream-warm:   #F2F4F4;
  --parchment:    #E9ECEC;
  --ivory:        #FBFCFC;
  --paper:        #FFFFFF;
  --canvas-deep:  #EDF1F1;
  --blush:        #F4FAEA;
  --sage-tile:    #F4FAEA;

  /* Text - B30 cool navy neutrals: navy head, cool blue-gray body + mute */
  --ink:          #25363F;
  --ink-soft:     #3D4E59;
  --ink-body:     #5B6E7A;
  --ink-mute:     #5D6B76;
  --ink-faint:    #97A0A6;

  /* Brand accents - all Northside green */
  --teal:         #79C142;
  --teal-2:       #79C142;
  --teal-soft:    #79C142;
  --clay:         #79C142;
  --clay-deep:    #5BA12C;
  --clay-soft:    #A6D778;
  --orange-pop:   #79C142;
  --amber:        #79C142;
  --champagne:    #F4FAEA;
  --sage:         #79C142;
  /* Deep accessible green for GREEN TEXT on white/light surfaces (6.4:1 on white).
     Keeps the brand-green read while meeting WCAG AA. Bright #79C142 stays for
     fills, borders, and accents; text-on-green uses --ink (near-black). */
  --green-ink:    #3A6B15;

  /* Borders - keep as faint grays for divider readability on white */
  --line:         #E5E7EB;
  --line-soft:    #E7EBEE;
  --line-deep:    #C7CDD3;

  /* Radius */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Spacing scale (4px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 160px;

  /* Shadow - B30-style dual-layer soft (cool ink), cards float premium */
  --sh-1: 0 1px 2px rgba(15,24,34,0.06), 0 6px 18px rgba(15,24,34,0.06);
  --sh-2: 0 2px 6px rgba(15,24,34,0.07), 0 18px 44px rgba(15,24,34,0.10);
  --sh-3: 0 14px 40px rgba(15,24,34,0.10), 0 30px 80px rgba(15,24,34,0.10);
  --sh-4: 0 30px 80px rgba(15,24,34,0.16);

  /* Type - B30 pairing: Cormorant Garamond display + Roboto sans body */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body:    "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Type scale */
  --t-display-1: clamp(48px, 6.7vw, 94px);
  --t-display-2: clamp(43px, 6vw, 82px);
  --t-display-3: clamp(34px, 4.5vw, 64px);
  --t-h2:        clamp(31px, 3.8vw, 54px);
  --t-h3:        clamp(22px, 2.4vw, 32px);
  --t-h4:        clamp(18px, 1.8vw, 24px);
  --t-body-lg:   clamp(17px, 1.2vw, 19px);
  --t-body:      16px;
  --t-small:     14px;
  --t-eyebrow:   12px;

  /* Layout */
  --gutter: clamp(20px, 4vw, 40px);
  --max-w: 1320px;
  --max-w-narrow: 980px;
  --nav-h: 76px;

  /* Easings */
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; scroll-padding-top: calc(var(--nav-h) + 12px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--cream-warm);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  overflow-x: clip;
  min-height: 100dvh;
  max-width: 100vw;
}
img, picture, video, svg { max-width: 100%; display: block; }
/* intrinsic-dimension safety: width/height attrs never force a fixed height (object-fit wrappers keep height via higher specificity) */
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; transition: color .2s var(--ease-out); }
@media (hover: hover) { a:hover { color: var(--green-ink); } }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--green-ink); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }

/* Skip to content: visually hidden until focused, then pinned top-left. */
.skip-link {
  position: fixed;
  top: 8px;
  left: -9999px;
  z-index: 200;
  background: var(--ink);
  color: #ffffff;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 8px; outline: 2px solid #ffffff; outline-offset: 2px; }

/* --- Typography --- */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}
.display-1 {
  font-family: var(--font-display);
  font-size: var(--t-display-1);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.display-2 {
  font-family: var(--font-display);
  font-size: var(--t-display-2);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.018em;
  margin: 0;
}
.display-3 {
  font-family: var(--font-display);
  font-size: var(--t-display-3);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.014em;
  margin: 0;
}
.h2, h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin: 0 0 var(--s-4);
}
.h3, h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.008em;
  margin: 0 0 var(--s-3);
}
.h4, h4 {
  font-family: var(--font-body);
  font-size: var(--t-h4);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.004em;
  margin: 0 0 var(--s-3);
}
.lede {
  font-size: var(--t-body-lg);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 56ch;
}
p { margin: 0 0 var(--s-3); color: var(--ink-body); }
em.serif { font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--green-ink); }

/* --- Layout primitives --- */
.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-width: 0;
}
.wrap-narrow {
  width: 100%;
  max-width: var(--max-w-narrow);
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-width: 0;
}
.section {
  padding: clamp(56px, 9vw, 130px) 0;
}
@media (max-width: 760px) {
  /* Premium aesthetic-site mobile breathing room (Function Health / Apostrophe zone).
     Was 52px, felt competent but tight; 80px reads meaningfully more expensive. */
  .section { padding: 80px 0; }
}
.section--tight { padding: clamp(40px, 6vw, 88px) 0; }
@media (max-width: 760px) {
  .section--tight { padding: 56px 0; }
}
.section--cream { background: var(--cream); }
.section--parchment { background: var(--parchment); }
.section--ivory { background: var(--ivory); }
.section--paper { background: var(--paper); }
.section--ink {
  background: #79C142;
  color: var(--ivory);
}
.section--ink p { color: rgba(255,250,249,0.72); }
.section--ink .eyebrow { color: rgba(255,250,249,0.6); }
.section--teal {
  background: var(--teal);
  color: var(--ivory);
}
.section--teal h2, .section--teal h3 { color: var(--ivory); }
.section--teal p { color: rgba(255,250,249,0.78); }
.section--teal .eyebrow, .section--teal .kicker { color: rgba(255,250,249,0.65); }
.section--teal .kicker::before { background: rgba(255,250,249,0.5); }
/* True dark editorial section (B30's navy role, in Northside ink). Brand green is the accent. */
.section--dark { background: #25363F; color: rgba(251,248,242,0.80); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #FBF8F2; }
.section--dark p { color: rgba(251,248,242,0.72); }
.section--dark .eyebrow, .section--dark .kicker { color: var(--teal); }
.section--dark .kicker::before, .section--dark .kicker::after, .section--dark .eyebrow::before { background: var(--teal); }
.section--dark .serif { color: var(--teal); }
.section--dark .tcar__card h3 { color: #FBF8F2; }
.section--dark .tcar__card span:not(.tcar__mono) { color: rgba(251,248,242,0.62); }
.section--dark .teamrail__creds { border-top-color: rgba(251,248,242,0.16); }
.section--dark .teamrail__creds li { color: rgba(251,248,242,0.66); }
.section--canvas-deep { background: var(--canvas-deep); }

.divider { height: 1px; background: var(--line-soft); width: 100%; }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 26px;
  border-radius: var(--r-pill);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.005em;
  border: 1px solid transparent;
  transition: transform .25s var(--ease-out), background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out), box-shadow .25s var(--ease-out);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary {
  background: var(--ink);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(37,54,63,0.22);
}
.btn--primary:hover { background: #2F424D; color: #ffffff; box-shadow: 0 10px 26px rgba(37,54,63,0.32); }
/* Primary button sits directly on the navy CTA band -> invert to white so it pops */
.consult-cta .btn--primary { background: #ffffff; color: var(--ink); box-shadow: 0 8px 24px rgba(0,0,0,0.26); }
.consult-cta .btn--primary:hover { background: rgba(255,255,255,0.90); color: var(--ink); }
.btn--teal { background: var(--teal); color: var(--ink); }
.btn--teal:hover { background: var(--teal-2); color: var(--ink); }
.btn--ink {
  background: #79C142;
  color: var(--ink);
}
.btn--ink:hover { background: #5BA12C; color: var(--ink); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-deep);
}
.btn--ghost:hover { background: var(--ivory); border-color: var(--ink); color: var(--ink); }
.btn--ghost-light {
  background: transparent;
  color: var(--ivory);
  border-color: rgba(255,252,245,0.4);
}
.btn--ghost-light:hover { background: rgba(255,252,245,0.08); color: var(--ivory); border-color: var(--ivory); }
.btn--sm { height: 44px; padding: 0 18px; font-size: 14px; }
.btn--lg { height: 60px; padding: 0 34px; font-size: 16px; }
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-weight: 500;
  border-bottom: 1px solid currentColor;
  padding: 10px 0 9px;
  min-height: 40px;
}
.text-link::after { content: "→"; transition: transform .2s var(--ease-out); }
.text-link:hover::after { transform: translateX(3px); }
@media (max-width: 760px) {
  .text-link { min-height: 40px; padding: 10px 0 9px; }
}

/* --- Header / Nav --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Navy header (blue-forward); green is reserved for accents only */
  background: rgba(37,54,63,0.97);
  /* backdrop-filter removed: it stayed active behind the solid bar past the hero
     and re-blurred the marquee every scroll frame = desktop lag */
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.site-header[data-scrolled="true"] {
  background: rgba(37,54,63,1);
  border-bottom-color: rgba(255,255,255,0.12);
}
/* Nav text + links read white on the navy header */
.site-header .nav__link {
  color: rgba(255,255,255,0.88);
}
.site-header .nav__link:hover {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
.site-header .nav__link[data-active="true"] {
  color: #ffffff;
}
.site-header .nav__cta-desktop {
  background: #ffffff;
  color: var(--ink);
  border-color: #ffffff;
}
.site-header .nav__cta-desktop:hover {
  background: rgba(255,255,255,0.88);
  color: var(--ink);
}
.site-header .nav__burger {
  background: transparent;
  border-color: rgba(255,255,255,0.4);
}
.site-header .nav__burger:hover {
  background: rgba(255,255,255,0.12);
}
.site-header .nav__burger span,
.site-header .nav__burger span::before,
.site-header .nav__burger span::after {
  background: #ffffff;
}
/* Use the white logo variant on the blue header */
.site-header .nav__logo .logo-img {
  filter: brightness(0) invert(1);
  opacity: 0.96;
}
.nav {
  height: var(--nav-h);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-5);
  padding: 0 4px;
}
@media (max-width: 1000px) {
  /* On mobile, .nav__menu is display:none, which collapses out of the grid entirely.
     With auto 1fr auto + 2 remaining items, the burger lands in column 2 (middle) instead
     of column 3 (right). Override to 1fr auto so the burger reliably hugs the right edge. */
  .nav { padding: 0; gap: var(--s-3); grid-template-columns: 1fr auto; }
  /* Tighten the header wrap's right padding so the burger sits as close to the edge as the safe area allows. */
  .site-header .wrap { padding-right: 10px; }
}
.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.005em;
  color: var(--ink);
  /* Prevent the grid cell from stretching the anchor to the full column width,
     which would create a wide invisible tap target across the empty nav space. */
  justify-self: start;
  min-height: 44px;
}
.nav__logo svg { height: 28px; width: 28px; }
.nav__logo-text { font-weight: 400; font-style: italic; }
.nav__logo-text strong { font-style: normal; font-weight: 400; }
.nav__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
}
.nav__link {
  position: relative;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 8px 4px;
  letter-spacing: 0.005em;
}
.nav__link:hover { color: var(--ink); }

/* --- About dropdown: desktop hover/focus menu --- */
.nav__group { position: relative; display: inline-flex; align-items: center; }
.nav__link--parent { display: inline-flex; align-items: center; gap: 3px; }
.nav__caret { transition: transform 0.22s var(--ease-out); flex: none; }
.nav__group:hover .nav__caret,
.nav__group:focus-within .nav__caret { transform: rotate(-180deg); }
.nav__dropdown {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 188px; padding: 8px;
  background: var(--ivory); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: 0 16px 44px rgba(20, 30, 26, 0.16);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
  z-index: 60;
}
/* invisible hover bridge across the gap so the menu does not close mid-move */
.nav__dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav__group:hover .nav__dropdown,
.nav__group:focus-within .nav__dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__dropdown-link {
  padding: 9px 14px; border-radius: var(--r-sm);
  font-size: 15px; line-height: 1.2; color: var(--ink); white-space: nowrap;
  transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.nav__dropdown-link:hover,
.nav__dropdown-link[data-active="true"] { background: var(--parchment); color: var(--green-ink); }

/* --- About sub-menu inside the mobile drawer (always expanded) --- */
.mnav__sub { list-style: none; margin: 6px 0 2px; padding: 0 0 0 18px; display: flex; flex-direction: column; border-left: 1px solid var(--line-soft); }
.mnav__sub li a { font-size: 20px; opacity: 0.92; padding: 11px 0; display: block; }
.mnav__sub li a:hover { opacity: 1; }
.nav__link[data-active="true"] { color: var(--ink); }
.nav__link[data-active="true"]::after {
  content: "";
  position: absolute;
  left: 4px; right: 4px;
  bottom: -2px;
  height: 2px;
  background: var(--ink);
}
.nav__actions { display: flex; align-items: center; gap: var(--s-3); padding-right: 2px; }
@media (max-width: 1000px) {
  .nav__actions { gap: var(--s-4); padding-right: 0; }
  /* Hide the desktop Consultation pill on mobile; the floating sticky CTA at the bottom
     handles conversion. Cleaner nav (logo + burger) reads more premium. */
  .nav__cta-desktop { display: none; }
}
.nav__phone {
  font-size: 13.5px;
  color: var(--ink-mute);
  letter-spacing: 0.01em;
}
.nav__burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line-deep);
  border-radius: var(--r-pill);
  background: var(--ivory);
}
.nav__burger span {
  width: 18px; height: 1.5px; background: var(--ink); position: relative;
}
.nav__burger span::before,
.nav__burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--ink);
}
.nav__burger span::before { top: -6px; }
.nav__burger span::after { top: 6px; }

@media (max-width: 1000px) {
  /* Apple-thin mobile nav: hug the 44px burger tap target (WCAG 2.2 floor). */
  :root { --nav-h: 50px; }
  .nav__menu, .nav__phone { display: none; }
  .nav__burger { display: inline-flex; }
}

/* Mobile drawer · display:none kills it dead when closed.
   Loses the slide-in animation but guarantees ZERO leak in any browser. */
.mnav {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100dvh;
  background: var(--cream);
  z-index: 60;
  flex-direction: column;
  padding: 80px var(--gutter) 32px;
  overflow-y: auto;
  animation: mnavIn .3s var(--ease-soft);
}
.mnav[data-open="true"] {
  display: flex;
}
@keyframes mnavIn {
  from { transform: translateY(-12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@supports not (height: 100dvh) {
  .mnav { height: 100vh; }
}
.mnav__close {
  position: absolute; top: 20px; right: 20px;
  width: 44px; height: 44px;
  border: 1px solid var(--line-deep);
  border-radius: var(--r-pill);
  background: var(--ivory);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.mnav__list { display: flex; flex-direction: column; gap: var(--s-3); margin-top: 12px; }
.mnav__list a {
  display: block;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  color: var(--ink);
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  line-height: 1.1;
}
.mnav__cta { margin-top: auto; padding-top: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }
.mnav__cta .btn { width: 100%; }
.mnav__meta { display: flex; flex-direction: column; gap: 4px; margin-top: var(--s-4); color: var(--ink-mute); font-size: 13px; }
.mnav__cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.mnav__cta-row .btn { width: 100%; padding-inline: 10px; font-size: 14.5px; white-space: normal; text-align: center; }
.mnav__call {
  margin-top: var(--s-2);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

/* --- Hero smile-quiz link --- */
.hero__quiz-link {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: center;
  margin: 2px auto 0;
  color: rgba(255,252,245,0.86);
  font-size: 14px; font-weight: 500;
  border-bottom: 1px solid rgba(255,252,245,0.35);
  padding: 6px 0; min-height: 36px;
}
.hero__quiz-link:hover { color: #fff; border-color: #fff; }
@media (max-width: 760px) { .hero__quiz-link { display: none; } }

/* --- Smile Quiz (green pop accent) --- */
/* Quiz section: dark editorial band (B30's finder role); the white card pops, brand green is the accent. */
.quiz-sec { background: #25363F; }
#quiz .quiz__head .kicker, #quiz .quiz__head .kicker::before { color: var(--teal); }
#quiz .quiz__head .kicker::after { background: var(--teal); }
#quiz .quiz__sub { color: rgba(251,248,242,0.75); }
#quiz .quiz__h { color: #FBF8F2; }
#quiz .quiz__h .serif { color: var(--teal); }

/* --- Sections added to mirror B30: Why-us, First-visit, Closing CTA --- */
.why .eyebrow, .first-visit__head .eyebrow, .consult-cta .eyebrow { justify-content: center; }
.why__lede { font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.7; color: var(--ink-soft); margin: 18px auto 0; max-width: 640px; }
.first-visit__head { max-width: 640px; margin: 0 auto clamp(28px, 4vw, 48px); }
.first-visit__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 28px); }
@media (max-width: 760px) { .first-visit__grid { grid-template-columns: 1fr; gap: 16px; } }
.first-visit__step { padding: clamp(24px, 2.6vw, 34px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--sh-2); }
.first-visit__num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; background: var(--teal); color: #fff; font-family: var(--font-display); font-size: 18px; margin-bottom: 16px; }
.first-visit__h { font-family: var(--font-display); font-weight: 500; font-size: 22px; color: var(--ink); margin: 0 0 8px; letter-spacing: -0.01em; }
.first-visit__p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.consult-cta__p { font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.65; color: rgba(251,248,242,0.80); margin: 18px auto 26px; max-width: 560px; }
.consult-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.quiz__head { text-align: center; max-width: 640px; margin: 0 auto clamp(18px,3vw,32px); }
.quiz__h { font-family: var(--font-display); font-size: var(--t-h2); font-weight: 500; margin: 12px 0 12px; letter-spacing: -0.01em; }
.quiz__sub { color: var(--ink-mute); font-size: clamp(16px, 1.4vw, 18.5px); line-height: 1.6; margin: 0; }
.quiz {
  max-width: 720px; margin: 0 auto;
  background: #FFFFFF;
  border: 0;
  border-radius: var(--r-xl);
  padding: clamp(24px, 4vw, 44px);
  box-shadow: var(--sh-3);
}
.quiz__progress { height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; margin-bottom: clamp(24px,4vw,36px); }
html:not(.js-ready) .quiz__progress { display: none; }
.quiz__bar { display: block; height: 100%; background: var(--teal); border-radius: 999px; transition: width .45s var(--ease-soft); }
.quiz__step, .quiz__result { animation: quizFade .35s var(--ease-soft); }
@keyframes quizFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.quiz__q { font-family: var(--font-display); font-size: clamp(21px,2.4vw,29px); font-weight: 400; text-align: center; margin: 0 0 clamp(20px,3vw,28px); letter-spacing: -0.008em; color: var(--ink); }
.quiz__opts--grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 560px) {
  .quiz__opts--grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .quiz__opt { padding: 12px 10px; font-size: 14px; min-height: 76px; }
  .quiz__opt-ic { width: 20px; height: 20px; }
}
.quiz__opt {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 60px; padding: 15px 20px;
  border: 1px solid var(--line-deep); border-radius: var(--r-md);
  background: var(--paper); color: var(--ink); box-shadow: var(--sh-2);
  font-family: var(--font-body); font-size: 16px; font-weight: 500;
  cursor: pointer; transition: transform .18s var(--ease-out), border-color .18s var(--ease-out), background-color .18s var(--ease-out), color .18s var(--ease-out);
}
@media (hover: hover) { .quiz__opt:hover { border-color: var(--teal); background: var(--blush); color: var(--green-ink); transform: translateY(-1px); } }
.quiz__opt:focus-visible { outline: 2px solid var(--green-ink); outline-offset: 2px; }
.quiz__back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; color: var(--ink-mute); background: none; border: 0;
  cursor: pointer; padding: 6px 0; margin-bottom: 12px; min-height: 40px;
}
.quiz__back:hover { color: var(--green-ink); }
.quiz__result { text-align: center; }
.quiz__result-lab { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green-ink); font-weight: 600; margin: 0 0 8px; }
.quiz__result-h { font-family: var(--font-display); font-size: clamp(23px,2.6vw,31px); font-weight: 400; margin: 0 0 24px; letter-spacing: -0.01em; color: var(--ink); }
.quiz__matches { display: grid; gap: 12px; text-align: left; margin-bottom: 28px; }
.quiz__match {
  position: relative; display: block;
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 18px 20px; background: var(--paper);
  transition: transform .2s var(--ease-out), border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.quiz__match:hover { border-color: var(--teal); box-shadow: var(--sh-2); transform: translateY(-2px); }
.quiz__match-badge { display: inline-block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); background: var(--teal); padding: 3px 10px; border-radius: 999px; margin-bottom: 8px; font-weight: 600; }
.quiz__match-name { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 400; color: var(--ink); margin-bottom: 4px; }
.quiz__match-short { display: block; font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 8px; }
.quiz__match-cta { display: inline-block; font-size: 13.5px; font-weight: 500; color: var(--green-ink); }
.quiz__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.quiz__disclaimer { font-size: 12.5px; color: var(--ink-mute); font-style: italic; margin: 18px 0 0; }
.quiz__follow { margin-top: 26px; padding: 22px 22px 18px; background: var(--paper); border: 1px solid var(--line, rgba(15,20,25,0.12)); border-radius: 14px; text-align: left; }
.quiz__follow-h { font-family: var(--font-display); font-size: 19px; font-weight: 400; color: var(--ink); margin: 0 0 8px; }
.quiz__follow-sub { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 14px; }
.quiz__follow .btn { min-height: 48px; }
.quiz__follow-note { font-size: 12px; color: var(--ink-mute); line-height: 1.55; margin: 12px 0 0; }
.qmodal { position: fixed; inset: 0; z-index: 300; }
.qmodal__scrim { position: absolute; inset: 0; background: rgba(15,20,25,0.55); }
.qmodal__panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(560px, calc(100vw - 32px)); height: min(760px, calc(100dvh - 48px)); background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 40px 90px -30px rgba(0,0,0,.5); }
.qmodal__x { position: absolute; top: 10px; right: 10px; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(15,20,25,0.08); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.qmodal__x:hover { background: rgba(15,20,25,0.16); }
.qmodal__frame { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 560px) {
  .qmodal__panel { width: 100vw; height: 100dvh; border-radius: 0; left: 0; top: 0; transform: none; }
}

/* --- Library (GEO content hub) --- */
.lib-hero { padding-top: clamp(120px, 14vw, 180px); background: linear-gradient(180deg, var(--blush) 0%, var(--paper) 100%); }
.lib-hero__h { font-family: var(--font-display); font-size: var(--t-display-3); font-weight: 500; margin: 12px 0 14px; letter-spacing: -0.014em; }
.lib-hero__sub { font-size: var(--t-body-lg); color: var(--ink-mute); max-width: 60ch; margin: 0 auto; }
.lib-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }
@media (max-width: 900px) { .lib-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .lib-grid { grid-template-columns: 1fr; } }
.lib-card {
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(22px, 2.5vw, 30px); background: var(--ivory);
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), border-color .2s var(--ease-out);
  min-height: 200px;
}
.lib-card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: var(--teal); }
.lib-card__cat { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-ink); font-weight: 600; }
.lib-card__title { font-family: var(--font-display); font-size: 22px; font-weight: 400; margin: 0; letter-spacing: -0.006em; color: var(--ink); line-height: 1.2; }
.lib-card__excerpt { font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; margin: 0; flex: 1; }
.lib-card__cta { font-size: 14px; font-weight: 500; color: var(--green-ink); margin-top: 4px; }
.lib-article { padding-top: clamp(110px, 13vw, 160px); }
.lib-crumbs { font-size: 14px; color: var(--ink-mute); margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lib-crumbs a { color: var(--ink-mute); }
.lib-crumbs @media (hover: hover) { a:hover { color: var(--green-ink); } }
.lib-article__h { font-family: var(--font-display); font-size: clamp(30px, 4vw, 52px); font-weight: 500; line-height: 1.05; letter-spacing: -0.018em; margin: 10px 0 20px; color: var(--ink); }
.lib-article__lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--ink-soft); max-width: 62ch; margin: 0 0 clamp(28px, 4vw, 44px); font-weight: 500; }
.lib-prose { max-width: 68ch; }
.lib-prose h2 { font-family: var(--font-display); font-size: clamp(23px, 2.4vw, 30px); font-weight: 400; margin: clamp(32px,4vw,48px) 0 14px; letter-spacing: -0.008em; color: var(--ink); }
.lib-prose h3 { font-family: var(--font-display); font-size: 21px; font-weight: 400; margin: 28px 0 10px; color: var(--ink); }
.lib-prose p { font-size: 16.5px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 16px; }
.lib-list { margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lib-list li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); list-style: none; }
.lib-list li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.lib-cta { margin: clamp(40px,5vw,64px) 0 0; padding: clamp(28px,3.5vw,44px); background: var(--blush); border: 1px solid var(--line); border-radius: var(--r-xl); text-align: center; }
.lib-cta h3 { font-family: var(--font-display); font-size: clamp(22px,2.2vw,28px); font-weight: 400; margin: 0 0 8px; color: var(--ink); }
.lib-cta p { font-size: 15px; color: var(--ink-mute); max-width: 48ch; margin: 0 auto 20px; }
.lib-related { margin-top: clamp(32px,4vw,48px); padding-top: 28px; border-top: 1px solid var(--line); }
.lib-related__h { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; margin: 0 0 14px; }
.lib-related__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.lib-related__chip { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 18px; border: 1px solid var(--line-deep); border-radius: var(--r-pill); font-size: 14px; color: var(--ink); font-weight: 500; transition: transform .18s var(--ease-out), border-color .18s var(--ease-out), background-color .18s var(--ease-out), color .18s var(--ease-out); }
.lib-related__chip:hover { border-color: var(--teal); background: var(--blush); color: var(--green-ink); }

/* Sticky mobile CTA, hidden while the hero is in view (its own CTA is visible).
   Slides up from the bottom after the user scrolls past the hero. */
.sticky-cta {
  position: fixed;
  left: 0; right: 0;
  /* Slide-in animates bottom, NOT transform: a transformed ancestor makes the
     glass button's backdrop-filter vanish on real iOS Safari (banked gotcha). */
  bottom: calc(env(safe-area-inset-bottom, 0px) - 96px);
  padding: 0 16px;
  z-index: 40;
  display: none;
  justify-content: center;
  background: transparent;
  transition: bottom .42s var(--ease-soft), opacity .3s var(--ease-soft);
  opacity: 0;
  pointer-events: none;
}
.sticky-cta .btn {
  /* Compact solid-green floating pill (Apple-style): sized to its label,
     soft green glow, heavy rounding. Crisp over the white page. */
  width: auto;
  max-width: 100%;
  height: 54px;
  padding: 0 32px;
  background: var(--ink);
  border: 0;
  color: #ffffff;
  font-weight: 600;
  border-radius: var(--r-pill);
  transform: none;
  box-shadow: 0 10px 30px rgba(37,54,63, 0.34), 0 2px 6px rgba(0,0,0,0.12);
}
.sticky-cta .btn:hover,
.sticky-cta .btn:active {
  background: #2F424D;
  color: #ffffff;
  transform: none;
  box-shadow: 0 12px 34px rgba(37,54,63, 0.42);
}
body[data-past-hero="true"] .sticky-cta {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 760px) {
  .sticky-cta { display: flex; }
  body { padding-bottom: 0; }
  /* No padding-bottom reservation when sticky CTA is visible, let content
     scroll all the way through behind the transparent floating pill for the
     immersive Apple-style feel. The pill floats over real content, not over
     an empty cream block. */
  .nav__logo { font-size: 18px; padding: 6px 0; }
  .nav__logo svg { height: 32px; width: 32px; }
}

/* --- Hero (homepage) --- */
.hero {
  position: relative;
  /* Cap scales with width (56.25vw = 16:9 of the viewport) so the 16:9 hero clip
     keeps its full vertical framing (headroom to shoulders) on wide monitors
     instead of a fixed 880px cap band-cropping into her mid-face. 94vh bounds it
     so the hero never exceeds the viewport. Still object-fit:cover = no borders. */
  min-height: min(94vh, 56.25vw);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
  color: var(--ivory);
  margin-top: -1px;
}
.hero__media {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero__media video,
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* no CSS filter on the playing video: it forces a per-frame GPU pass = desktop lag */
}
@media (min-width: 761px) {
  /* window-light footage: subject sits at ~62% frame width; bias the cover
     crop toward her so narrow-landscape viewports (iPad portrait, snapped
     desktop windows) don't push her off the right edge */
  .hero__media video { object-position: center 44%; }
}
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  /* Ray: NO overlay on the hero video. Readability carried by the text-shadow
     on .hero__eyebrow/.hero__h/.hero__sub/.hero__quiz-link. */
  background: none;
}
@media (max-width: 760px) {
  .hero__media::after {
    background: none;
  }
}
.hero__inner {
  position: relative; z-index: 1;
  width: 100%;
  min-height: 100%;
  padding: clamp(96px, 13vh, 168px) 0 clamp(44px, 7vh, 88px);
  display: flex; flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: clamp(15px, 1.8vw, 25px);
}
/* B30-style centered hero: one tight, vertically-centered stack over the full-bleed photo. */
.hero__eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: 0;
  color: rgba(255,252,245,0.82);
  font-size: 13px; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 500;
}
.hero__eyebrow::before, .hero__eyebrow::after {
  content: ""; height: 1px; width: clamp(26px, 5vw, 64px);
  background: rgba(255,252,245,0.42);
}
.hero__h {
  font-family: var(--font-display);
  font-size: var(--t-display-1);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ivory);
  max-width: 22ch;
  margin: 0;
}
.hero__h em { font-style: italic; color: var(--teal); font-weight: 500; }
/* Light hero gradient, so the copy leans on a dark halo shadow to stay readable over a vivid video */
.hero__eyebrow, .hero__h, .hero__sub, .hero__quiz-link { text-shadow: 0 1px 2px rgba(0,0,0,0.88), 0 1px 8px rgba(0,0,0,0.65), 0 0 24px rgba(0,0,0,0.45); }
.hero__sub {
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.55;
  font-weight: 500;
  color: #ffffff;
  max-width: 52ch;
  margin: 0;
}
.hero__ctas {
  display: flex; flex-wrap: wrap; gap: 16px;
  justify-content: center; align-items: center;
  margin: 4px 0 0;
}
.hero__trust {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
  margin: clamp(8px, 1.4vw, 20px) auto 0;
  max-width: 940px;
}
.hero__trust-item {
  display: flex; flex-direction: column; gap: 5px;
  align-items: center; text-align: center;
  padding: 2px clamp(20px, 3vw, 44px);
  border-left: 1px solid rgba(255,252,245,0.22);
}
.hero__trust-item:first-child { border-left: 0; }
.hero__trust-item strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 2.5vw, 32px);
  letter-spacing: -0.01em;
  color: var(--ivory);
  line-height: 1;
}
.hero__trust-item span {
  font-size: 12px;
  color: rgba(255,252,245,0.72);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  max-width: 15ch;
}
@media (max-width: 760px) {
  /* Hero MUST fit in one viewport on mobile.
     Math: 100dvh − nav (76) − sticky CTA + safe area (~80) − any tab bar slack. */
  .hero {
    /* Full-bleed edge-to-edge: the hero fills the whole viewport under the
       transparent fixed nav (Ray). No inset, no letterbox. */
    min-height: 100dvh;
  }
  .hero__inner {
    /* Base desktop rule has 0 horizontal · must explicitly add gutter back on mobile */
    padding: 18px var(--gutter) 18px;
    gap: 18px;
    display: flex;
    flex-direction: column;
    /* safe center: vertically center the stack when it fits, but fall back to
       top-aligned (never clipping the eyebrow under the fixed nav) on short phones. */
    justify-content: safe center;
    align-items: center;
    text-align: center;
    min-height: 100dvh;
  }
  /* Centered eyebrow: let the address wrap; keep just one hairline pair, tighter. */
  .hero__eyebrow { flex-wrap: wrap; gap: 10px; font-size: 11.5px; letter-spacing: 0.2em; }
  .hero__eyebrow::before, .hero__eyebrow::after { width: 22px; }
  .hero__h {
    max-width: 14ch;
    font-size: clamp(42px, 10.5vw, 60px);
    line-height: 0.98;
    margin: 0;
  }
  .hero__sub { display: none; } /* Drop on mobile to fit in viewport */
  .hero__quiz-link { display: none; }
  .hero__trust { display: none; } /* Integrated stats are a desktop hero enhancement; keep the mobile hero to one clean viewport */
  .hero__ctas {
    flex-direction: column;
    gap: 10px; margin-top: 4px;
    width: 100%; max-width: 340px;
  }
  .hero__ctas .btn--lg { height: 50px; padding: 0 20px; font-size: 14.5px; width: 100%; }
  /* Show her fully on the tall mobile hero: the portrait media (720x1280) nearly
     matches the frame, so contain it (instead of cover) and her head + smile are
     never cropped. Any hairline letterbox falls on the hero's own dark backdrop. */
  .hero__media { background: #25363F; }
  /* Full-bleed cover (was contain, which letterboxed = the "weird borders"). */
  .hero__media img, .hero__media video { object-fit: cover !important; object-position: 50% 40% !important; }
}
@media (max-width: 380px) {
  .hero { min-height: 100dvh; }
  .hero__trust { grid-template-columns: 1fr 1fr; gap: 8px 14px; }
  .hero__h { font-size: clamp(34px, 9.5vw, 46px); line-height: 0.96; }
  .hero__ctas .btn--lg { height: 46px; font-size: 14px; padding: 0 16px; }
}
/* iOS fallback when dvh isn't honored */
@supports not (height: 100dvh) {
  @media (max-width: 760px) {
    .hero { min-height: 100vh; }
  }
}

/* --- Press strip --- */
.press {
  padding: var(--s-7) 0;
  background: var(--parchment);
  border-bottom: 1px solid var(--line-soft);
}
@media (max-width: 760px) {
  .press { padding: 32px 0; }
  .press__label { margin-bottom: var(--s-4); }
}
.press__row {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: clamp(32px, 6vw, 72px);
  color: var(--ink-mute);
}
.press__label {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--s-5);
  text-align: center;
}

/* Press logos: real publication marks (sourced from The Northside's own CDN)
   normalized to a single height. Four use currentColor; InStyle uses an
   embedded raster so we apply grayscale + contrast filter for visual harmony. */
.plogo {
  display: inline-flex;
  align-items: center;
  height: 28px;
  line-height: 1;
  opacity: 0.62;
  color: var(--ink);
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.plogo:hover { opacity: 1; transform: translateY(-1px); }
.plogo img {
  height: 100%;
  width: auto;
  display: block;
}
/* InStyle SVG uses an embedded PNG pattern · force monochrome to match siblings */
.plogo:last-child img {
  filter: grayscale(100%) brightness(0.35) contrast(1.2);
}
@media (max-width: 600px) {
  .press__row { gap: 24px 32px; }
  .plogo { height: 22px; opacity: 0.7; }
}

/* --- Treatment finder --- */
.finder {
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 56px);
  box-shadow: var(--sh-2);
}
.finder__top {
  display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.finder__title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.008em;
}
.finder__hint { font-size: 13px; color: var(--ink-mute); }
.finder__chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: var(--s-5);
}
.chip {
  display: inline-flex; align-items: center;
  height: 40px; padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--parchment);
  border: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-soft);
  transition: all .2s var(--ease-out);
  cursor: pointer;
}
.chip:hover { border-color: var(--line-deep); color: var(--ink); }
.chip[data-active="true"] {
  background: #79C142;
  color: var(--ink);
  border-color: #79C142;
}
.chip[data-active="true"]:hover { background: #5BA12C; border-color: #5BA12C; color: var(--ink); }

/* --- Cards --- */
.card-grid {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .card-grid--3, .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns: 1fr; }
}

/* Full-bleed mobile story cards (Featured Results section). Breaks out of the
   parent .wrap gutter via negative margins so B/A photography reads cinematic,
   not contained. Border-radius drops to 0 since edges meet viewport. Section
   header (kicker + h2 + sub + button) stays inside the wrap gutter so only the
   imagery escapes, typography hierarchy preserved. */
@media (max-width: 700px) {
  .card-grid--bleed-mobile {
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    gap: 0;
  }
  .card-grid--bleed-mobile .story-card {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
  }
  .card-grid--bleed-mobile .story-card:last-child {
    border-bottom: 0;
  }
  .card-grid--bleed-mobile .story-card__media {
    aspect-ratio: 4 / 3;
  }
  .card-grid--bleed-mobile .story-card__body {
    padding: 24px var(--gutter) 32px;
  }
}

.card-tx {
  background: var(--ivory);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .2s var(--ease-out);
}
.card-tx:hover {
  transform: translateY(-4px);
  border-color: var(--line);
  box-shadow: var(--sh-3);
}
.card-tx__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--canvas-deep);
  position: relative;
}
.card-tx__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.card-tx:hover .card-tx__media img { transform: scale(1.04); }
.card-tx__badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--ivory);
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--r-pill);
}
.card-tx__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.card-tx__name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--ink);
}
.card-tx__short {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
}
.card-tx__meta {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-top: var(--s-2);
}
.card-tx__meta-pill {
  font-size: 12px;
  color: var(--ink-mute);
  background: var(--parchment);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  letter-spacing: 0.02em;
}
.card-tx__actions {
  margin-top: auto;
  padding-top: var(--s-4);
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
}
.card-tx__actions .text-link { font-size: 14px; }

/* Pillar cards (3-up philosophy) */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2vw, 32px);
}
@media (max-width: 880px) { .pillars { grid-template-columns: 1fr; } }
.pillar {
  border: 1px solid var(--line-soft);
  background: var(--ivory);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 40px);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.pillar__num {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--green-ink);
  text-transform: uppercase;
}
.pillar h3 { margin-top: 4px; margin-bottom: 4px; }
.pillar p { font-size: 15px; line-height: 1.55; }

/* --- Provider cards --- */
.provider-card {
  background: var(--ivory);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.provider-card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
.provider-card__photo {
  aspect-ratio: 4 / 5;
  background: var(--canvas-deep);
  overflow: hidden;
  position: relative;
}
.provider-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.provider-card__photo--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--champagne), var(--canvas-deep));
}
.provider-card__photo--placeholder .initials {
  font-family: var(--font-display);
  font-size: 76px; font-weight: 500;
  color: rgba(31,27,22,0.55);
  letter-spacing: -0.02em;
}
.provider-card__body { padding: var(--s-5); display: flex; flex-direction: column; gap: 6px; }
.provider-card__name { font-family: var(--font-display); font-size: 22px; font-weight: 400; margin: 0; }
.provider-card__title { font-size: 14px; color: var(--ink-mute); letter-spacing: 0.01em; }
.provider-card__creds { font-size: 13px; color: var(--green-ink); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 4px; }
.provider-card__specs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-3); }
.provider-card__specs span {
  font-size: 12px; color: var(--ink-mute);
  background: var(--parchment); padding: 4px 10px; border-radius: var(--r-pill);
}
.provider-card__cta { margin-top: var(--s-4); }

/* --- Location cards --- */
.location-card {
  background: var(--ivory);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: clamp(20px, 2vw, 28px);
  display: flex; flex-direction: column; gap: var(--s-3);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .2s var(--ease-out);
}
.location-card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: var(--line); }
.location-card__head { display: flex; align-items: start; justify-content: space-between; gap: var(--s-3); }
.location-card__name { font-family: var(--font-display); font-size: 24px; font-weight: 400; margin: 0; letter-spacing: -0.006em; }
.location-card__region { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); }
.location-card__addr { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.location-card__line { font-size: 14px; color: var(--ink-mute); font-style: italic; line-height: 1.5; }
.location-card__hours { font-size: 12.5px; color: var(--ink-mute); }
.location-card__actions { margin-top: auto; padding-top: var(--s-3); display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.location-card__badge {
  display: inline-flex; align-items: center;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--champagne); color: var(--ink);
  padding: 4px 10px; border-radius: var(--r-pill);
}

/* --- Section heads --- */
.sec-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--s-5);
  margin-bottom: clamp(28px, 4vw, 56px);
}
.sec-head h2 { margin: 0; max-width: 22ch; }
.sec-head__sub {
  font-size: 15px; color: var(--ink-mute); max-width: 36ch;
  margin: 8px 0 0;
}
@media (max-width: 760px) {
  .sec-head { grid-template-columns: 1fr; }
}

/* --- Locations homepage section --- */
.loc-section {
  background: linear-gradient(180deg, var(--parchment) 0%, var(--cream) 100%);
  position: relative;
}
.loc-section__bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 15% 30%, rgba(178,85,56,0.06) 0%, transparent 60%),
    radial-gradient(50% 40% at 85% 70%, rgba(139,154,130,0.08) 0%, transparent 60%);
  z-index: 0;
}
.loc-section > .wrap { position: relative; z-index: 1; }
.loc-search {
  display: flex;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 6px;
  max-width: 480px;
  box-shadow: var(--sh-2);
  margin-bottom: var(--s-6);
}
.loc-search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  padding: 0 18px;
  font-size: 15px;
  color: var(--ink);
}
.loc-search input::placeholder { color: var(--ink-faint); }

/* --- Result Stories (premium editorial cards, no fake before/after) --- */
.story-card {
  background: var(--ivory);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.story-card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
.story-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--canvas-deep);
  position: relative;
}
.story-card__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(121,193,66,0) 60%, rgba(121,193,66,0.20) 100%);
  pointer-events: none;
}
.story-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.story-card:hover .story-card__media img { transform: scale(1.04); }
.story-card__body { padding: var(--s-5); display: flex; flex-direction: column; gap: 12px; flex: 1; }
.story-card__tag {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-ink);
  font-weight: 500;
}
.story-card__badge {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  background: rgba(255,250,249,0.94);
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  font-weight: 500;
}
/* Body text on example-journey cards: sans body, NOT serif display.
   Reads as a descriptive note, not a quote/testimonial. */
.story-card__quote {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-soft);
  letter-spacing: -0.002em;
  margin: 0;
}
.story-card__timeline {
  margin: auto 0 0;
  font-size: 12.5px;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.results-disclaimer {
  margin-top: 32px;
  font-size: 12.5px;
  color: var(--ink-mute);
  font-style: italic;
  max-width: 70ch;
  line-height: 1.55;
}

/* --- Results / B+A cards (legacy, still used for back-compat) --- */
.ba-card {
  background: var(--ivory);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.ba-card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
.ba-card__media {
  aspect-ratio: 4 / 3;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--canvas-deep);
  overflow: hidden;
}
.ba-card__half {
  position: relative;
  overflow: hidden;
  background: var(--canvas-deep);
}
.ba-card__half img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.ba-card:hover .ba-card__half img { transform: scale(1.04); }
.ba-card__half::after {
  position: absolute; top: 12px;
  font-family: var(--font-body); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink); background: var(--ivory); padding: 5px 10px; border-radius: var(--r-pill);
  z-index: 2;
  font-weight: 500;
}
.ba-card__half--before::after { content: "Before"; left: 12px; }
.ba-card__half--after::after { content: "After"; right: 12px; }
.ba-card__half::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(121,193,66,0) 60%, rgba(121,193,66,0.20) 100%);
  z-index: 1;
}
.ba-card__half--after { border-left: 1px solid rgba(255,255,255,0.4); }
.ba-card__body { padding: var(--s-5); }
.ba-card__caption { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.ba-card__meta {
  display: flex; gap: var(--s-3); margin-top: 8px;
  font-size: 12px; color: var(--ink-mute); letter-spacing: 0.06em; text-transform: uppercase;
}

/* --- Quotes / testimonials --- */
.quote-card {
  background: var(--ivory);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--line-soft);
}
.quote-card__q {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.32;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.quote-card__attr {
  margin-top: var(--s-4);
  font-size: 13px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.quote-card__attr strong { color: var(--ink); font-weight: 500; }

/* --- Process steps --- */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 32px);
  counter-reset: step;
}
@media (max-width: 880px) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .process { grid-template-columns: 1fr; } }
.process__step {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--ink);
}
.section--ink .process__step { border-top-color: rgba(255,252,245,0.4); }
.process__num {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-ink);
}
.process__title { font-family: var(--font-display); font-size: 22px; font-weight: 400; margin: 0; letter-spacing: -0.004em; }
.process__body { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.section--ink .process__body { color: rgba(255,252,245,0.72); }

/* ────────────────────────────────────────────────────────────
   STICKY CARD STACK · Consultation Process on mobile only.
   Each step becomes a light card that pins to a slightly lower
   top offset than the previous, creating a visible "deck of cards"
   peek effect as you scroll. Desktop keeps the 4-up grid.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .section--ink .process {
    display: block;
    position: relative;
    counter-reset: step;
  }
  .section--ink .process__step {
    position: sticky;
    background: var(--ivory);
    color: var(--ink);
    padding: 26px 24px 28px;
    border-radius: 18px;
    margin-bottom: 14px;
    min-height: 220px;
    border: 0;
    box-shadow:
      0 -2px 12px rgba(0,0,0,0.25),
      0 18px 36px -12px rgba(0,0,0,0.5);
    z-index: 1;
    transition: transform .3s var(--ease-soft);
    display: flex; flex-direction: column; gap: 10px;
  }
  /* Stagger sticky top by ~14px per card so the previous card peeks above */
  .section--ink .process__step:nth-child(1) { top: 86px; z-index: 1; }
  .section--ink .process__step:nth-child(2) { top: 100px; z-index: 2; }
  .section--ink .process__step:nth-child(3) { top: 114px; z-index: 3; }
  .section--ink .process__step:nth-child(4) { top: 128px; z-index: 4; margin-bottom: 0; }

  /* Restore dark text on the light cards (overrides section--ink defaults) */
  .section--ink .process__step .process__num { color: var(--clay); }
  .section--ink .process__step .process__title { color: var(--ink); font-size: 24px; line-height: 1.1; }
  .section--ink .process__step .process__body { color: var(--ink-soft); font-size: 15px; line-height: 1.5; }

  /* Section heading needs a touch more breathing room before the stack */
  .section--ink .sec-head { margin-bottom: 28px; }
}

/* --- FAQ accordion --- */
.faq-list { display: flex; flex-direction: column; gap: 0; }
.faq-item {
  border-top: 1px solid var(--line);
  padding: var(--s-4) 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none;
  display: flex; align-items: start; justify-content: space-between; gap: var(--s-4);
  cursor: pointer;
  padding: var(--s-3) 0;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item__q {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 400;
  color: var(--ink);
  flex: 1;
  letter-spacing: -0.004em;
}
.faq-item__icon {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-deep);
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), transform .25s var(--ease-out);
}
.faq-item__icon::before, .faq-item__icon::after {
  content: ""; position: absolute;
  background: var(--green-ink);
  border-radius: 1px;
}
.faq-item__icon::before { width: 12px; height: 1.5px; }
.faq-item__icon::after { width: 1.5px; height: 12px; transition: transform .25s var(--ease-out); }
.faq-item[open] .faq-item__icon { background: var(--clay); border-color: var(--clay); }
.faq-item[open] .faq-item__icon::before,
.faq-item[open] .faq-item__icon::after { background: var(--ink); }
.faq-item[open] .faq-item__icon::after { transform: rotate(90deg); }
.faq-item__a {
  padding: 0 60px var(--s-4) 0;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 60ch;
}

/* --- Footer --- */
.site-footer {
  background: #25363F;
  color: rgba(251,248,242,0.70);
  padding: clamp(64px, 8vw, 96px) 0 32px;
}
.site-footer a { color: rgba(251,248,242,0.80); }
.site-footer a:hover { color: #FBF8F2; text-decoration: underline; text-underline-offset: 3px; }
.site-footer .btn--ghost-light { color: #FBF8F2; border-color: rgba(255,252,245,0.35); }
.site-footer .btn--ghost-light:hover { background: rgba(255,252,245,0.08); color: #FBF8F2; border-color: #FBF8F2; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: clamp(24px, 3vw, 56px);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid rgba(255,252,245,0.12);
}
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand .footer-brand__tag {
  font-family: var(--font-display);
  color: #FBF8F2;
  font-size: 28px;
  font-weight: 400;
  margin: 0 0 var(--s-3);
  letter-spacing: -0.008em;
}
.footer-brand p { font-size: 14px; line-height: 1.55; color: rgba(251,248,242,0.66); max-width: 30ch; }
.footer-brand__social { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 16px; }
.footer-brand__social a { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(251,248,242,0.66); }
.footer-brand__social a:hover { color: #FBF8F2; }
/* Legal/policy section headings: semantic <h2> (avoids the h1->h3 outline skip), styled to read as subsection heads. */
.policy-h { font-family: var(--font-body); font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--ink); margin-bottom: 10px; }
.footer-col h2 {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 var(--s-4);
}
.footer-col ul { display: flex; flex-direction: column; gap: 6px; }
.footer-col a {
  font-size: 14px;
  display: inline-block;
  padding: 8px 0;
  min-height: 40px;
  line-height: 1.5;
}
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s-3);
  padding-top: var(--s-5);
  font-size: 13px;
  color: rgba(251,248,242,0.55);
}
.footer-bottom__brand { display: flex; align-items: center; gap: 10px; }
.footer-bottom__brand svg { height: 24px; width: 24px; }
.footer-bottom__brand svg path { fill: rgba(251,248,242,0.6); }
.footer-bottom__legal a {
  color: rgba(251,248,242,0.6);
  margin-left: var(--s-4);
  display: inline-block;
  padding: 12px 0;
  min-height: 44px;
  line-height: 1.4;
}

/* --- Section split --- */
.split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(24px, 4vw, 80px);
  align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split__media {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--canvas-deep);
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__media--ink { background: #79C142; }

/* --- Treatment detail hero --- */
.tx-hero {
  padding: clamp(110px, 14vw, 180px) 0 clamp(56px, 7vw, 96px);
  background: linear-gradient(180deg, var(--parchment) 0%, var(--cream) 100%);
}
.tx-hero__grid {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 900px) { .tx-hero__grid { grid-template-columns: 1fr; } }
.tx-hero__media {
  aspect-ratio: 4 / 5;
  background: var(--canvas-deep);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.tx-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.tx-hero__crumbs {
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--s-4);
}
.tx-hero__crumbs a {
  color: var(--ink-mute);
  display: inline-block;
  padding: 12px 0;
  min-height: 40px;
  line-height: 1.4;
}
.tx-hero__h {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin: 0 0 var(--s-4);
  color: var(--ink);
}
.tx-hero__lede {
  font-size: var(--t-body-lg); line-height: 1.5;
  color: var(--ink-soft);
  max-width: 50ch;
  margin-bottom: var(--s-5);
}
.tx-hero__facts {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: var(--s-5) 0;
}
.tx-hero__fact strong { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 400; color: var(--ink); }
.tx-hero__fact span { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }

/* --- Benefit list --- */
.benefit-list {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 32px);
}
@media (max-width: 880px) { .benefit-list { grid-template-columns: 1fr; } }
.benefit {
  background: var(--ivory);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex; flex-direction: column; gap: 8px;
}
.benefit__num {
  font-family: var(--font-display);
  font-size: 13px; color: var(--green-ink);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.benefit h3 { margin-bottom: 0; }
.benefit p { font-size: 14.5px; margin: 0; color: var(--ink-soft); line-height: 1.5; }

/* --- Booking flow --- */
.booking {
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 56px);
  display: grid; gap: var(--s-5);
  box-shadow: var(--sh-2);
}
.booking__steps {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
  margin-bottom: var(--s-4);
}
@media (max-width: 760px) { .booking__steps { grid-template-columns: repeat(3, 1fr); } }
.booking__step {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--parchment);
  font-size: 12.5px; color: var(--ink-mute);
  transition: all .2s var(--ease-out);
}
.booking__step strong {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 400;
  color: var(--ink-mute);
  letter-spacing: -0.004em;
}
.booking__step[data-active="true"] {
  background: #79C142; color: var(--ivory); border-color: #79C142;
}
.booking__step[data-active="true"] strong { color: var(--ivory); }
.booking__step[data-done="true"] strong { color: var(--green-ink); }
.booking__panels {
  display: grid; gap: var(--s-5);
}
.booking__panel { display: none; }
.booking__panel[data-active="true"] { display: grid; gap: var(--s-4); }
.option-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
@media (max-width: 760px) { .option-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .option-grid { grid-template-columns: 1fr; } }
.option-card {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--parchment);
  padding: var(--s-4);
  text-align: left;
  display: flex; flex-direction: column; gap: 4px;
  transition: all .15s var(--ease-out);
  cursor: pointer;
}
.option-card:hover { border-color: var(--ink); background: var(--ivory); }
.option-card[data-selected="true"] {
  border-color: var(--clay);
  background: var(--ivory);
  box-shadow: 0 0 0 2px var(--clay) inset, 0 4px 14px rgba(186,90,58,0.18);
  position: relative;
}
.option-card[data-selected="true"]::after {
  content: "✓";
  position: absolute;
  top: 10px; right: 12px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--clay);
  color: var(--ivory);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.option-card[data-recommended="true"]::before {
  content: "Recommended first visit";
  position: absolute;
  top: -10px; left: 12px;
  background: #79C142;
  color: var(--ivory);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-weight: 500;
}
.option-card[data-recommended="true"] {
  border-color: var(--ink);
  background: var(--ivory);
}
.option-card strong { font-family: var(--font-display); font-size: 18px; font-weight: 400; color: var(--ink); }
.option-card span { font-size: 13px; color: var(--ink-mute); }
.input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 15px;
  color: var(--ink);
}
.input:focus { outline: none; border-color: var(--ink); }
textarea.input { height: auto; padding: 12px 16px; min-height: 100px; resize: vertical; }
.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.label { display: block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px; }
.booking__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line-soft); }

/* --- Reveal pattern (default visible per memory) --- */
.reveal { opacity: 1; transform: none; transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft); }
html.js-ready .reveal { opacity: 0; transform: translateY(14px); }
html.js-ready .reveal[data-in="true"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js-ready .reveal { opacity: 1; transform: none; }
}

/* ────────────────────────────────────────────────────────────
   LOCATIONS EXPLORER · editorial map + city list
   ──────────────────────────────────────────────────────────── */
.loc-explorer {
  background: linear-gradient(180deg, var(--parchment) 0%, var(--cream) 60%, var(--parchment) 100%);
  position: relative;
  padding-bottom: clamp(64px, 9vw, 130px);
}
.loc-explorer__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--s-5);
  margin-bottom: clamp(28px, 4vw, 48px);
}
.loc-explorer__h {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.6vw, 64px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin: 12px 0 0;
  max-width: 16ch;
}
.loc-explorer__all { white-space: nowrap; }
@media (max-width: 760px) {
  .loc-explorer__head { grid-template-columns: 1fr; }
}

.loc-explorer__bar {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: var(--s-4);
  align-items: center;
  padding: 18px 22px;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-2);
  margin-bottom: var(--s-7);
}
.loc-explorer__search {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink-mute);
  border-right: 1px solid var(--line-soft);
  padding-right: 14px;
}
.loc-explorer__search input {
  border: 0; background: transparent; outline: none;
  font-size: 15px;
  width: 100%;
  min-height: 44px;
  color: var(--ink);
  padding: 6px 0;
}
.loc-explorer__search input::placeholder { color: var(--ink-faint); }
.loc-explorer__chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: flex-end;
}
.loc-chip {
  height: 40px; padding: 0 18px;
  border-radius: var(--r-pill);
  background: transparent;
  border: 1px solid transparent;
  font-size: 13px;
  color: var(--ink-mute);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all .2s var(--ease-out);
}
.loc-chip:hover { color: var(--ink); }
.loc-chip[data-active="true"] {
  background: #79C142;
  color: var(--ink);
  border-color: var(--ink);
}
@media (max-width: 900px) {
  .loc-explorer__bar {
    grid-template-columns: 1fr;
    border-radius: var(--r-lg);
    padding: 14px;
    min-width: 0;
  }
  .loc-explorer__search {
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
    padding-right: 0; padding-bottom: 10px;
    min-width: 0;
  }
  .loc-explorer__chips { justify-content: flex-start; }
}
/* Extra-small phones (Galaxy Fold closed, narrow Android) */
@media (max-width: 380px) {
  .loc-row__idx { font-size: 22px; width: 36px; padding-right: 8px; }
  .loc-row { gap: var(--s-3); }
  .team-lead__support {
    grid-template-columns: 64px 1fr auto;
    gap: 12px; padding: 10px;
  }
  .team-lead__support-media { width: 64px; height: 80px; }
  .team-lead__support-name { font-size: 17px; }
  .team-lead__support-num { font-size: 13px; }
  .team-lead__strip { padding: 14px 18px; gap: 12px; }
  .team-lead__strip-item { font-size: 14px; }
  .team-lead__strip-item strong { font-size: 17px; margin-right: 4px; }
  .team-lead__strip-divider { display: none; }
  .hero__trust { gap: var(--s-3); padding-top: var(--s-3); }
  .hero__trust-item strong { font-size: 18px; }
  .hero__trust-item span { font-size: 12px; letter-spacing: 0.06em; }
  .booking__steps { gap: 4px; }
  .booking__step { padding: 8px 10px; }
  .booking__step strong { font-size: 14px; }
}

.loc-explorer__grid {
  display: block;
}

.loc-explorer__list {
  display: flex; flex-direction: column;
  gap: var(--s-6);
}
.loc-region__bar {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 14px;
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.loc-region__mono {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  color: var(--green-ink);
  letter-spacing: 0.02em;
}
.loc-region__label {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.loc-region__rule { display: none; }

.loc-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-5);
  align-items: start;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  transition: padding .25s var(--ease-out), background-color .25s var(--ease-out);
}
.loc-row:hover {
  padding-left: 16px;
  background: linear-gradient(90deg, rgba(121,193,66,0.04) 0%, transparent 80%);
}
.loc-row[data-hi="true"] {
  background: linear-gradient(90deg, rgba(121,193,66,0.08) 0%, transparent 80%);
}
.loc-row__left { display: flex; gap: 18px; align-items: start; }
.loc-row__idx {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 36px;
  line-height: 0.9;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-feature-settings: "lnum","tnum";
  width: 56px;
  flex-shrink: 0;
  border-right: 1px solid var(--line);
  padding-right: 16px;
}
.loc-row__name {
  font-family: var(--font-display);
  font-size: clamp(22px, 1.8vw, 26px);
  font-weight: 400;
  letter-spacing: -0.006em;
  margin: 0 0 6px;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 10px;
}
.loc-row__badge {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--blush);
  color: var(--green-ink);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-weight: 500;
}
.loc-row__addr { font-size: 13.5px; color: var(--ink-mute); margin: 0 0 6px; }
.loc-row__note { font-size: 13.5px; color: var(--ink-soft); font-style: italic; margin: 0; line-height: 1.5; max-width: 40ch; }
.loc-row__right { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.loc-row__open {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: 0.06em;
  color: var(--ink-mute);
}
.loc-row__open .dot { width: 6px; height: 6px; background: var(--ink-mute); border-radius: 50%; }
.loc-row__open .dot.is-open { background: #79C142; box-shadow: 0 0 0 3px rgba(121,193,66,0.18); }
.loc-row__ctas { display: flex; align-items: center; gap: 12px; }

.loc-explorer__empty {
  text-align: center; color: var(--ink-mute); padding: 48px; font-size: 14px;
}

.loc-explorer__map {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 14px;
  box-shadow: var(--sh-3);
  overflow: hidden;
}

/* Real Leaflet map containers */
.loc-map {
  width: 100%;
  aspect-ratio: 4/5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #FFFFFF;
  position: relative;
}
.loc-map--tall { aspect-ratio: 21/9; }
@media (max-width: 760px) {
  .loc-map { aspect-ratio: 1/1; }
  .loc-map--tall { aspect-ratio: 4/3; }
}

/* Custom Leaflet marker (clay dot with glow). 28px hits 24×24 accessibility
   recommendation for map markers while staying visually proportionate. */
.eb-pin {
  width: 28px; height: 28px;
  background: var(--clay);
  border: 2px solid var(--ivory);
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(186,90,58,0.20), 0 4px 12px rgba(121,193,66,0.18);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
  cursor: pointer;
}
.eb-pin:hover, .eb-pin.is-hi {
  transform: scale(1.18);
  box-shadow: 0 0 0 10px rgba(186,90,58,0.28), 0 6px 18px rgba(29,29,29,0.22);
}

/* Tone down the OSM/CartoDB tiles slightly to match cream palette */
.leaflet-tile-pane { filter: saturate(0.78) brightness(1.02); }

/* Editorial Leaflet popup */
.leaflet-popup-content-wrapper {
  border-radius: var(--r-md) !important;
  background: var(--ivory) !important;
  box-shadow: 0 14px 40px rgba(29,29,29,0.16) !important;
  padding: 4px 4px !important;
  border: 1px solid var(--line);
}
.leaflet-popup-content {
  margin: 14px 18px !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: var(--ink-soft);
  line-height: 1.4 !important;
}
.leaflet-popup-content h4 {
  font-family: var(--font-display) !important;
  font-size: 19px !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  margin: 0 0 4px !important;
  letter-spacing: -0.005em;
}
.leaflet-popup-content .eb-pop-addr {
  color: var(--ink-mute);
  font-size: 12.5px;
  margin: 0 0 10px;
}
.leaflet-popup-content .eb-pop-cta {
  display: inline-flex; align-items: center;
  background: var(--clay);
  color: var(--ivory) !important;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-size: 13px;
  text-decoration: none !important;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-top: 4px;
}
.leaflet-popup-content .eb-pop-cta:hover { background: var(--clay-deep); }
.leaflet-popup-tip { background: var(--ivory) !important; }

/* Phone link on location detail pages, bump to proper tap-target size while
   keeping the visual underline-link treatment. */
.loc-detail__tel {
  display: inline-block;
  padding: 10px 0;
  min-height: 40px;
  line-height: 1.5;
  color: var(--ink);
  border-bottom: 1px solid var(--line-deep);
}
.loc-detail__tel:hover { color: var(--green-ink); border-bottom-color: var(--clay); }
.leaflet-container a.leaflet-popup-close-button {
  color: var(--ink-mute) !important;
  font-size: 18px !important;
  padding: 6px 8px !important;
}
.leaflet-container { font-family: var(--font-body) !important; }
.leaflet-control-attribution {
  background: rgba(255,250,249,0.85) !important;
  font-size: 12px !important;
  color: var(--ink-faint) !important;
}
.leaflet-control-attribution a { color: var(--ink-mute) !important; }
.loc-pin { transition: transform .3s var(--ease-out); transform-origin: center; transform-box: fill-box; }
.loc-pin[data-hi="true"] { transform: scale(1.45); }
.loc-pin[data-hi="true"] circle:nth-child(1) { fill: rgba(186,90,58,0.35); }
.loc-explorer__legend {
  display: flex; align-items: center; gap: 18px;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.loc-explorer__legend .dot--clay { width: 8px; height: 8px; border-radius: 50%; background: var(--clay); display: inline-block; margin-right: 8px; }
.loc-explorer__legend-rule { flex: 1; height: 1px; background: var(--line); }

/* --- Simple state accordion (matches The Northside's actual site UX) --- */
.loc-states__head { text-align: center; margin-bottom: 56px; }
.loc-states__h {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.loc-states__list { border-top: 1px solid var(--line); }
.loc-state {
  border-bottom: 1px solid var(--line);
}
.loc-state__summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 20px;
  padding: 36px 8px;
  transition: background-color .2s var(--ease-out);
}
.loc-state__summary::-webkit-details-marker { display: none; }
.loc-state__summary::marker { content: ""; }
.loc-state__summary:hover { background: rgba(121,193,66,0.04); }
.loc-state__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4.5vw, 48px);
  line-height: 1;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.loc-state__count {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-mute);
  letter-spacing: 0.005em;
  align-self: center;
}
.loc-state__chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mute);
  align-self: center;
  transition: transform .25s var(--ease-out), color .2s var(--ease-out);
}
.loc-state[open] > .loc-state__summary .loc-state__chev {
  transform: rotate(180deg);
  color: var(--ink);
}
.loc-state__body {
  padding: 0 8px 32px;
  display: grid;
  gap: 4px;
}
.loc-state-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--line-soft);
}
.loc-state-item:first-child { border-top: none; padding-top: 8px; }
.loc-state-item__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 6px;
}
.loc-state-item__addr {
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: 0 0 2px;
}
.loc-state-item__phone {
  font-size: 14px;
  color: var(--ink-mute);
  margin: 0;
  letter-spacing: 0.005em;
}
.loc-state-item__ctas {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}
.loc-states__foot {
  margin-top: 48px;
  text-align: center;
}

@media (max-width: 700px) {
  .loc-state__summary { padding: 28px 4px; gap: 12px; }
  .loc-state__name { font-size: clamp(28px, 7.5vw, 36px); }
  .loc-state__count { font-size: 13.5px; }
  .loc-state__body { padding: 0 4px 24px; }
  .loc-state-item {
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: flex-start;
  }
  .loc-state-item__ctas { width: 100%; }
}

@media (max-width: 1080px) {
  .loc-explorer__map { position: static; }
}
@media (max-width: 600px) {
  .loc-row { grid-template-columns: 1fr; }
  .loc-row__right { align-items: flex-start; }
  .loc-row__idx { font-size: 26px; width: 44px; padding-right: 12px; }
}

/* ────────────────────────────────────────────────────────────
   TREATMENT LIBRARY MOBILE ACCORDION · the simple one.
   One tap to expand a concern, see treatments stacked vertically.
   ──────────────────────────────────────────────────────────── */
.tx-library { display: none; background: var(--ivory); }
@media (max-width: 900px) {
  .tx-library { display: block; }
  .tx-finder--desktop-only { display: none; }
}

.tx-library__head { max-width: 640px; margin-bottom: 24px; }
.tx-library__h {
  font-family: var(--font-display);
  font-size: clamp(34px, 9vw, 48px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin: 10px 0 14px;
  max-width: 14ch;
}
.tx-library__sub {
  font-size: 15.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
  max-width: 38ch;
}
.tx-library__foot { margin-top: 32px; text-align: center; }
.tx-library__foot .btn { width: 100%; max-width: 320px; }

.tx-acc {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}
.tx-acc__item {
  border-bottom: 1px solid var(--line);
  background: var(--ivory);
  transition: background-color .25s var(--ease-out);
}
.tx-acc__item[data-open="true"] {
  background: var(--paper);
}

.tx-acc__head {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 22px 4px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  /* When scrollIntoView lands on this element, leave clearance for the sticky nav */
  scroll-margin-top: 88px;
}
.tx-acc__num {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  color: var(--green-ink);
  letter-spacing: 0.04em;
  font-feature-settings: "lnum","tnum";
  align-self: start;
  padding-top: 6px;
  width: 28px;
  flex-shrink: 0;
}
.tx-acc__head-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tx-acc__label {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.008em;
  line-height: 1.15;
}
.tx-acc__preview {
  font-size: 14px;
  color: var(--ink-mute);
  font-style: italic;
  letter-spacing: 0.005em;
}
.tx-acc__item[data-open="true"] .tx-acc__preview { color: var(--green-ink); font-style: normal; font-weight: 500; }

/* Plus/minus toggle indicator */
.tx-acc__toggle {
  width: 34px; height: 34px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), transform .25s var(--ease-out);
}
.tx-acc__toggle::before, .tx-acc__toggle::after {
  content: "";
  position: absolute;
  background: var(--ink);
  border-radius: 1px;
}
.tx-acc__toggle::before { width: 13px; height: 1.5px; }
.tx-acc__toggle::after { width: 1.5px; height: 13px; transition: transform .25s var(--ease-out); }
.tx-acc__item[data-open="true"] .tx-acc__toggle { background: var(--clay); border-color: var(--clay); }
.tx-acc__item[data-open="true"] .tx-acc__toggle::before,
.tx-acc__item[data-open="true"] .tx-acc__toggle::after { background: var(--ivory); }
.tx-acc__item[data-open="true"] .tx-acc__toggle::after { transform: rotate(90deg); }

/* Body (collapsible content) */
.tx-acc__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s var(--ease-soft);
  padding: 0;
}
.tx-acc__item[data-open="true"] .tx-acc__body {
  max-height: 2400px; /* large enough for content */
  padding: 8px 0 28px;
}

/* Hero recommendation card inside accordion */
.tx-acc__hero {
  display: block;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .25s var(--ease-out);
  box-shadow: var(--sh-1);
}
.tx-acc__hero:hover { box-shadow: var(--sh-2); }
.tx-acc__hero-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--canvas-deep);
}
.tx-acc__hero-media img { width: 100%; height: 100%; object-fit: cover; }
.tx-acc__hero-badge {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--ivory);
  color: var(--green-ink);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-weight: 500;
}
.tx-acc__hero-body { padding: 22px 22px 24px; }
.tx-acc__hero-eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-ink);
  display: block;
  margin-bottom: 10px;
}
.tx-acc__hero-name {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.012em;
  margin: 0 0 12px;
  color: var(--ink);
}
.tx-acc__hero-short {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 18px;
}
.tx-acc__hero-facts {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0 12px;
  padding: 16px 0;
  margin: 0 0 18px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.tx-acc__hero-facts > div { display: flex; flex-direction: column; gap: 4px; }
.tx-acc__hero-facts dt {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0;
}
.tx-acc__hero-facts dd {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.005em;
  line-height: 1.15;
}
@media (max-width: 400px) {
  .tx-acc__hero-facts { grid-template-columns: 1fr; gap: 10px; padding: 14px 0; }
  .tx-acc__hero-facts > div { flex-direction: row; justify-content: space-between; align-items: baseline; }
  .tx-acc__hero-facts dt { letter-spacing: 0.1em; }
}
.tx-acc__hero-cta {
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* "Also consider" mini cards */
.tx-acc__also-label {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 22px 0 12px;
  font-weight: 500;
}
.tx-acc__mini {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px;
  margin-bottom: 8px;
  background: var(--ivory);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: transform .25s var(--ease-out), border-color .2s var(--ease-out);
}
.tx-acc__mini:hover {
  transform: translateX(3px);
  border-color: var(--line);
}
.tx-acc__mini:last-child { margin-bottom: 0; }
.tx-acc__mini-media {
  width: 88px; height: 88px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--canvas-deep);
}
.tx-acc__mini-media img { width: 100%; height: 100%; object-fit: cover; }
.tx-acc__mini-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tx-acc__mini-num {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--green-ink);
  letter-spacing: 0.04em;
}
.tx-acc__mini-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.tx-acc__mini-short {
  font-size: 12.5px;
  color: var(--ink-mute);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tx-acc__mini-arrow {
  font-size: 18px;
  color: var(--ink-faint);
  flex-shrink: 0;
  transition: transform .2s var(--ease-out), color .2s var(--ease-out);
}
.tx-acc__mini:hover .tx-acc__mini-arrow {
  transform: translateX(4px);
  color: var(--green-ink);
}
@media (max-width: 360px) {
  .tx-acc__mini { grid-template-columns: 72px 1fr auto; padding: 10px; }
  .tx-acc__mini-media { width: 72px; height: 72px; }
  .tx-acc__mini-name { font-size: 15px; }
}

/* ────────────────────────────────────────────────────────────
   TREATMENT FINDER · concern → editorial recommendation (desktop)
   ──────────────────────────────────────────────────────────── */
.tx-finder {
  background: var(--ivory);
  position: relative;
  overflow: hidden;
}
.tx-finder::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(40% 30% at 80% 20%, rgba(0,59,73,0.04) 0%, transparent 70%),
    radial-gradient(35% 30% at 20% 80%, rgba(186,90,58,0.04) 0%, transparent 70%);
  pointer-events: none;
}
.tx-finder > .wrap { position: relative; z-index: 1; }
.tx-finder__head {
  max-width: 720px;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.tx-finder__h {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 60px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin: 12px 0 16px;
  max-width: 18ch;
}
.tx-finder__sub {
  font-size: var(--t-body-lg);
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0;
}

.tx-finder__stage {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
@media (max-width: 1000px) {
  .tx-finder__stage { grid-template-columns: 1fr; }
}

.tx-finder__concerns {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line);
  list-style: none; padding: 0; margin: 0;
}

/* MOBILE: convert vertical concern list to horizontal scrolling chip strip.
   DUMMY-PROOF: visible "Swipe →" hint label above strip, animated chevron at right edge,
   strong clay active state with white text, scroll-shadow indicators. */
@media (max-width: 900px) {
  .tx-finder__head { margin-bottom: 12px; }

  /* "Swipe →" affordance label · sits above the chip strip on mobile */
  .tx-finder__stage::before {
    content: "← Swipe to explore concerns →";
    display: block;
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--green-ink);
    font-weight: 500;
    margin: 0 0 10px;
    padding-top: 4px;
    animation: swipeHint 2.4s ease-in-out infinite;
  }
  @keyframes swipeHint {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
  }

  .tx-finder__concerns {
    display: flex !important;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    border-top: 0;
    margin: 0 calc(var(--gutter) * -1);
    padding: 6px var(--gutter) 14px;
    position: sticky;
    top: var(--nav-h);
    background: var(--ivory);
    z-index: 5;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 6px 14px -10px rgba(29,29,29,0.20);
    scrollbar-width: none;
  }
  .tx-finder__concerns::-webkit-scrollbar { display: none; }
  .tx-finder__concerns li { scroll-snap-align: start; flex-shrink: 0; list-style: none; }
  .tx-finder__concern {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    width: auto;
    min-width: 0;
    height: 44px;
    padding: 0 22px !important;
    background: #FFFFFF;
    border: 1px solid var(--ink) !important;
    border-radius: var(--r-pill);
    white-space: nowrap;
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(29,29,29,0.05);
    cursor: pointer;
    line-height: 1;
    font-feature-settings: "ss01";
  }
  .tx-finder__concern:hover {
    padding-left: 22px;
    background: #FFFFFF;
  }
  /* ACTIVE: clay background, white text, strong shadow */
  .tx-finder__concern[data-active="true"] {
    padding-left: 22px !important;
    background: var(--clay) !important;
    color: var(--ink) !important;
    border-color: var(--clay) !important;
    box-shadow: 0 6px 18px rgba(60,90,20,0.32);
  }
  .tx-finder__concern[data-active="true"] .tx-finder__concern-label,
  .tx-finder__concern[data-active="true"] .tx-finder__concern-mono {
    color: var(--ink) !important;
  }
  .tx-finder__concern-mono { display: none; }
  .tx-finder__concern-label {
    font-family: var(--font-body);
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: 0;
    color: inherit;
    line-height: 1;
  }
  .tx-finder__concern-arrow { display: none; }
  .tx-finder__panel { gap: var(--s-4); margin-top: var(--s-5); }
  .tx-hero-card__name { font-size: 28px; }
  .tx-hero-card__media { aspect-ratio: 4/3; }
}
@media (max-width: 380px) {
  .tx-finder__concern { height: 46px; padding: 0 18px; }
  .tx-finder__concern-label { font-size: 14px; }
}

/* MOBILE: horizontal swipe of treatment cards (21st.dev pattern).
   Hero + 2 supports are direct children of the panel, all become snap slots.
   !important needed because the default desktop grid rule appears later in the file. */
@media (max-width: 900px) {
  .tx-finder__panel {
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    gap: 14px !important;
    padding: 0 var(--gutter) !important;
    margin: var(--s-5) calc(var(--gutter) * -1) 0 !important;
    scrollbar-width: none;
  }
  .tx-finder__panel::-webkit-scrollbar { display: none; }
  .tx-finder__panel > .tx-hero-card,
  .tx-finder__panel > .tx-support-card {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  /* All three cards: equal width snap slots */
  .tx-finder__panel > .tx-hero-card {
    flex: 0 0 86vw;
    max-width: 380px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  .tx-finder__panel > .tx-support-card {
    flex: 0 0 86vw;
    max-width: 380px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border-radius: var(--r-xl);
    background: var(--paper);
    border: 1px solid var(--line);
    grid-template-columns: none;
    grid-template-rows: none;
  }
  .tx-finder__panel > .tx-support-card:hover { transform: none; box-shadow: var(--sh-2); }
  .tx-finder__panel > .tx-support-card .tx-support-card__media {
    width: 100% !important;
    height: 220px !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    order: -1 !important;
    flex: 0 0 220px !important;
  }
  .tx-finder__panel > .tx-support-card .tx-support-card__media img {
    width: 100%; height: 100%; object-fit: cover;
  }
  .tx-finder__panel > .tx-support-card .tx-support-card__body {
    padding: 22px 22px 24px !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    order: 1 !important;
  }
  .tx-finder__panel > .tx-support-card .tx-support-card__num {
    display: block !important;
    order: 2 !important;
    position: absolute;
    top: 14px; left: 18px;
    background: rgba(255,255,255,0.94);
    padding: 5px 12px;
    border-radius: var(--r-pill);
    font-size: 12px;
    z-index: 2;
    color: var(--green-ink);
    letter-spacing: 0.14em;
    width: auto !important;
    text-transform: uppercase;
    font-weight: 500;
  }
  .tx-finder__panel > .tx-support-card { position: relative; }
  .tx-finder__panel > .tx-support-card .tx-support-card__name {
    font-size: 26px;
    margin-bottom: 4px;
  }
  .tx-finder__panel > .tx-support-card .tx-support-card__short {
    font-size: 14.5px;
    color: var(--ink-soft);
  }
  .tx-finder__panel > .tx-support-card .text-link {
    font-size: 14px;
    margin-top: auto;
    align-self: flex-start;
  }
  .tx-hero-card__meta { gap: 10px 16px; }

  /* Side fades to signal more cards offscreen */
  .tx-finder__stage { position: relative; }
  .tx-finder__stage::after {
    content: "";
    position: absolute;
    top: 0; bottom: 60px;
    right: 0;
    width: 36px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--ivory));
    z-index: 1;
  }
}

/* Dots indicator under the swipe panel */
.tx-finder__dots {
  display: none;
}
@media (max-width: 900px) {
  .tx-finder__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
  }
  .tx-finder__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(121,193,66,0.18);
    transition: all .2s var(--ease-out);
  }
  .tx-finder__dot[data-active="true"] {
    background: var(--clay);
    width: 24px;
    border-radius: 4px;
  }
}
.tx-finder__concern {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 18px 4px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  cursor: pointer;
  transition: padding .25s var(--ease-out), background-color .2s var(--ease-out);
}
.tx-finder__concern:hover {
  padding-left: 12px;
  background: linear-gradient(90deg, rgba(121,193,66,0.04), transparent 70%);
}
.tx-finder__concern[data-active="true"] {
  padding-left: 12px;
  background: linear-gradient(90deg, rgba(121,193,66,0.06), transparent 80%);
}
.tx-finder__concern-mono {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 400;
  color: var(--green-ink);
  letter-spacing: 0.04em;
  font-feature-settings: "lnum","tnum";
}
.tx-finder__concern-label {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 400;
  letter-spacing: -0.006em;
  color: var(--ink);
}
.tx-finder__concern-arrow {
  font-size: 18px;
  color: var(--ink-faint);
  opacity: 0;
  transform: translateX(-4px);
  transition: all .25s var(--ease-out);
}
.tx-finder__concern:hover .tx-finder__concern-arrow,
.tx-finder__concern[data-active="true"] .tx-finder__concern-arrow {
  opacity: 1; transform: translateX(0); color: var(--green-ink);
}

.tx-finder__panels { display: grid; min-height: 540px; }
/* Desktop panel: hero card spans rows 1-2 in col 1, supports stack in col 2 */
.tx-finder__panel {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: auto auto;
  gap: clamp(16px, 2vw, 24px) clamp(20px, 2.5vw, 36px);
  opacity: 0; transform: translateY(8px);
  transition: opacity .45s var(--ease-soft), transform .45s var(--ease-soft);
  grid-area: 1 / 1;
}
.tx-finder__panel > .tx-hero-card {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.tx-finder__panel > .tx-support-card:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.tx-finder__panel > .tx-support-card:nth-of-type(3) { grid-column: 2; grid-row: 2; }

.tx-finder__panel[data-active="true"] {
  opacity: 1; transform: none;
  position: relative;
}
.tx-finder__panel:not([data-active="true"]) {
  pointer-events: none;
  visibility: hidden;
}
@media (max-width: 900px) {
  .tx-finder__panels { min-height: auto; }
}

.tx-hero-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
  text-decoration: none;
  color: inherit;
}
.tx-hero-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.tx-hero-card__media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--canvas-deep);
}
.tx-hero-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.tx-hero-card:hover .tx-hero-card__media img { transform: scale(1.04); }
.tx-hero-card__badge {
  position: absolute; top: 14px; left: 14px;
  background: var(--ivory);
  color: var(--green-ink);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-weight: 500;
}
.tx-hero-card__body {
  padding: clamp(20px, 2vw, 32px);
  display: flex; flex-direction: column; gap: 12px;
  flex: 1;
}
.tx-hero-card__num {
  font-family: var(--font-display);
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--green-ink);
}
.tx-hero-card__name {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 36px);
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.tx-hero-card__short {
  font-size: 15.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
}
.tx-hero-card__meta {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 18px;
  padding: 14px 0 4px;
  border-top: 1px solid var(--line-soft);
  margin-top: 8px;
}
.tx-hero-card__meta span {
  font-size: 12px; color: var(--ink-mute); letter-spacing: 0.02em;
  display: block;
}
.tx-hero-card__meta strong {
  display: block;
  font-family: var(--font-display);
  font-size: 16px; font-weight: 400; color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}
.tx-hero-card__meta span {
  font-size: 12px; color: var(--ink-mute); letter-spacing: 0.12em;
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .tx-hero-card__meta { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px) {
  .tx-hero-card__meta { grid-template-columns: 1fr; gap: 10px; }
}
.tx-hero-card .text-link { margin-top: auto; align-self: flex-start; }

.tx-finder__supports {
  display: flex; flex-direction: column; gap: var(--s-4);
}
.tx-support-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.tx-support-card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.tx-support-card__num {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--green-ink);
  letter-spacing: 0.04em;
  width: 24px;
}
.tx-support-card__body { display: flex; flex-direction: column; gap: 4px; }
.tx-support-card__name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.004em;
  color: var(--ink);
}
.tx-support-card__short {
  font-size: 14px;
  color: var(--ink-mute);
  margin: 0;
  line-height: 1.45;
}
.tx-support-card .text-link { margin-top: 4px; font-size: 14px; }
.tx-support-card__media {
  width: 92px; height: 92px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--canvas-deep);
  flex-shrink: 0;
}
.tx-support-card__media img { width: 100%; height: 100%; object-fit: cover; }
/* (Old 480px rule removed · mobile swipe panel rules above handle support cards properly.) */

.tx-finder__foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: clamp(36px, 4vw, 56px);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-mute);
}
@media (max-width: 600px) {
  .tx-finder__foot { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* ────────────────────────────────────────────────────────────
   TEAM LEAD BLOCK · 1 large + 3 stacked editorial composition
   ──────────────────────────────────────────────────────────── */
.team-lead { background: var(--parchment); }
.team-lead__head {
  display: grid; grid-template-columns: 1fr auto;
  align-items: end; gap: var(--s-5);
  margin-bottom: clamp(36px, 4.5vw, 64px);
}
.team-lead__h {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 60px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin: 12px 0 0;
  max-width: 18ch;
}
@media (max-width: 760px) { .team-lead__head { grid-template-columns: 1fr; } }

.team-lead__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: stretch;
}
@media (max-width: 1000px) { .team-lead__grid { grid-template-columns: 1fr; } }

.team-lead__primary {
  display: block;
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
  text-decoration: none;
  color: inherit;
  background: var(--ink);
}
.team-lead__primary-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.team-lead__primary-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-out);
  filter: saturate(0.95);
}
.team-lead__primary:hover .team-lead__primary-media img { transform: scale(1.03); }
.team-lead__primary-overlay {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  padding: clamp(24px, 3vw, 44px);
  color: var(--ivory);
  background: linear-gradient(180deg, rgba(121,193,66,0) 30%, rgba(121,193,66,0.92) 100%);
}
.team-lead__role {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,250,249,0.7);
  margin-bottom: 10px;
}
.team-lead__name {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.014em;
  margin: 0 0 10px;
  color: var(--ivory);
}
.team-lead__creds {
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: rgba(255,250,249,0.7);
  margin: 0 0 16px;
  text-transform: uppercase;
}
.team-lead__quote {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255,250,249,0.92);
  font-style: italic;
  margin: 0 0 18px;
  max-width: 44ch;
}
.text-link--light { color: var(--ivory) !important; border-bottom-color: rgba(255,250,249,0.5); }

.team-lead__supports {
  display: flex; flex-direction: column;
  gap: 14px;
  list-style: none; padding: 0; margin: 0;
}
.team-lead__support {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 14px 18px 14px 14px;
  background: var(--ivory);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .2s var(--ease-out);
}
.team-lead__support:hover {
  transform: translateX(4px);
  box-shadow: var(--sh-2);
  border-color: var(--line);
}
.team-lead__support-media {
  width: 100px; height: 120px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--canvas-deep);
}
.team-lead__support-media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.team-lead__support-body { display: flex; flex-direction: column; gap: 3px; }
.team-lead__support-num {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--green-ink);
  letter-spacing: 0.04em;
}
.team-lead__support-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.006em;
  color: var(--ink);
}
.team-lead__support-role {
  font-size: 14px;
  color: var(--ink-mute);
}
.team-lead__support-cred {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green-ink);
  margin-top: 6px;
  font-weight: 500;
}
.team-lead__support-arrow {
  font-size: 20px;
  color: var(--ink-faint);
  transition: transform .25s var(--ease-out), color .2s var(--ease-out);
}
.team-lead__support:hover .team-lead__support-arrow {
  transform: translateX(4px);
  color: var(--green-ink);
}
@media (max-width: 480px) {
  .team-lead__support { grid-template-columns: 80px 1fr auto; padding: 10px 14px 10px 10px; }
  .team-lead__support-media { width: 80px; height: 96px; }
  .team-lead__support-name { font-size: 19px; }
}

.team-lead__strip {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(40px, 5vw, 64px);
  padding: 22px clamp(24px, 4vw, 56px);
  background: #79C142;
  border-radius: var(--r-xl);
  flex-wrap: wrap;
}
.team-lead__strip-item {
  font-size: 14px;
  color: var(--ink);
  letter-spacing: 0.03em;
}
.team-lead__strip-item strong {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  margin-right: 8px;
  letter-spacing: -0.005em;
}
.team-lead__strip-divider {
  width: 1px; height: 24px;
  background: rgba(15,20,25,0.22);
}

/* ────────────────────────────────────────────────────────────
   ENTERPRISE PLATFORM SECTION · PE-friendly proof block
   "One brand system. Every location, locally relevant."
   ──────────────────────────────────────────────────────────── */
.enterprise {
  background: var(--parchment);
  position: relative;
  overflow: hidden;
}
.enterprise::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(40% 35% at 12% 18%, rgba(0,59,73,0.05) 0%, transparent 70%),
    radial-gradient(35% 30% at 88% 82%, rgba(186,90,58,0.05) 0%, transparent 70%);
  pointer-events: none;
}
.enterprise > .wrap { position: relative; z-index: 1; }
.enterprise__head {
  max-width: 720px;
  margin-bottom: clamp(36px, 4.5vw, 64px);
}
.enterprise__h {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 60px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin: 12px 0 16px;
  max-width: 18ch;
}
.enterprise__sub {
  font-size: var(--t-body-lg);
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
  max-width: 60ch;
}
.enterprise__grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
@media (max-width: 1080px) { .enterprise__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .enterprise__grid { grid-template-columns: 1fr; } }
.enterprise__card {
  background: var(--ivory);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2.4vw, 32px);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.enterprise__card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.enterprise__num {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 400;
  color: var(--green-ink);
  letter-spacing: 0.14em;
}
.enterprise__card-h {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.006em;
  margin: 0;
  color: var(--ink);
}
.enterprise__card-body {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
}
.enterprise__strip {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(40px, 5vw, 64px);
  padding: 22px clamp(24px, 4vw, 56px);
  background: var(--teal);
  border-radius: var(--r-xl);
  flex-wrap: wrap;
  color: var(--ivory);
}
.enterprise__strip-item {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(255,250,249,0.78);
  display: inline-flex; align-items: baseline; gap: 8px;
}
.enterprise__strip-item strong {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--ivory);
  letter-spacing: -0.005em;
}
.enterprise__strip-divider {
  width: 1px; height: 28px;
  background: rgba(255,250,249,0.22);
}

/* --- Misc --- */
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-mute);
  background: var(--parchment);
  border: 1px solid var(--line-soft);
  padding: 4px 10px; border-radius: var(--r-pill);
}
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-mute);
}
.kicker::before { content: ""; width: 22px; height: 1px; background: var(--ink-mute); }

.banner-cta {
  background: var(--ink);
  color: var(--ivory);
  border-radius: var(--r-xl);
  padding: clamp(40px, 5vw, 80px);
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: var(--s-5);
  align-items: center;
}
@media (max-width: 760px) { .banner-cta { grid-template-columns: 1fr; } }
.banner-cta h2 { color: var(--ivory); margin: 0; max-width: 18ch; }
.banner-cta p { color: rgba(255,252,245,0.72); max-width: 44ch; margin: var(--s-3) 0 0; }

/* Provider detail 3-col responsive */
.provider-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
}
@media (max-width: 880px) {
  .provider-meta-grid { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* Book trust strip */
.trust-strip-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-7);
}
@media (max-width: 760px) {
  .trust-strip-3 { grid-template-columns: 1fr; }
}

/* Locations index filter card: keep flex top wrappable */
@media (max-width: 760px) {
  .finder .finder__top { flex-direction: column; align-items: stretch; }
  .finder .finder__top .loc-search { flex: 0 0 auto; max-width: none; }
}

/* Map placeholder */
.map-block {
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(50% 50% at 30% 30%, rgba(178,85,56,0.08) 0%, transparent 60%),
    radial-gradient(40% 40% at 70% 70%, rgba(139,154,130,0.10) 0%, transparent 60%),
    repeating-linear-gradient(0deg, rgba(31,27,22,0.04), rgba(31,27,22,0.04) 1px, transparent 1px, transparent 32px),
    repeating-linear-gradient(90deg, rgba(31,27,22,0.04), rgba(31,27,22,0.04) 1px, transparent 1px, transparent 32px),
    var(--parchment);
  border-radius: var(--r-lg);
  position: relative;
  border: 1px solid var(--line);
}
.map-block::after {
  content: "•"; position: absolute;
  top: 46%; left: 38%;
  font-size: 28px; color: var(--green-ink);
}
.map-pin {
  position: absolute;
  width: 18px; height: 18px;
  border-radius: var(--r-pill);
  background: var(--clay);
  box-shadow: 0 0 0 6px rgba(178,85,56,0.16);
}

/* Utility */
.txt-center { text-align: center; }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); }

/* --- Page hero (non-homepage) --- */
.page-hero {
  padding: clamp(110px, 14vw, 160px) 0 clamp(40px, 6vw, 80px);
  background: linear-gradient(180deg, var(--parchment) 0%, var(--cream) 100%);
}
.page-hero__eyebrow { color: var(--ink-mute); font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: var(--s-3); }
.page-hero__h {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 84px);
  font-weight: 500;
  line-height: 1; letter-spacing: -0.024em;
  margin: 0;
  max-width: 18ch;
}
.page-hero__sub {
  font-size: var(--t-body-lg);
  color: var(--ink-soft);
  margin-top: var(--s-5);
  max-width: 56ch;
}

/* Small detail decorations */
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }
.rule { display: block; width: 60px; height: 1px; background: var(--ink); margin: 0 auto var(--s-5); }

/* ---------------------------------------------------------------
   Northside hero overrides, R.A.M.-clean mobile hero standard:
   Above-fold mobile = logo + hamburger + eyebrow + big serif h1
   + 2 stacked pill CTAs. Trust signals live below the fold as
   a dedicated .trust-bar section.
   --------------------------------------------------------------- */
.hero__ctas--stack {
  flex-direction: column;
  align-items: stretch;
}
.hero__ctas--stack .btn {
  width: 100%;
  text-align: center;
  justify-content: center;
}
@media (min-width: 761px) {
  /* Desktop: horizontal CTAs (override the stack on larger screens) */
  .hero__ctas--stack {
    flex-direction: row;
    align-items: center;
  }
  .hero__ctas--stack .btn {
    width: auto;
  }
}

/* Trust-bar (below the hero, replaces the inside-hero trust strip) */
.trust-bar {
  background: var(--canvas-deep, #FFFFFF);
  border-top: 1px solid var(--line-soft, rgba(0,0,0,0.06));
  border-bottom: 1px solid var(--line-soft, rgba(0,0,0,0.06));
  padding: clamp(28px, 4vw, 48px) 0;
}
.trust-bar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 3vw, 48px);
  text-align: center;
}
.trust-bar__list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.trust-bar__list strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: -0.01em;
  color: var(--ink, #2E2B26);
  line-height: 1;
}
.trust-bar__list span {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute, rgba(0,0,0,0.55));
}
@media (max-width: 760px) {
  .trust-bar { padding: 28px 0; }
  .trust-bar__list { grid-template-columns: repeat(2, 1fr); gap: 22px 18px; }
  .trust-bar__list strong { font-size: 22px; }
  .trust-bar__list span { font-size: 12px; letter-spacing: 0.12em; }
}

/* Nav logo image styling (replaces the old SVG block) */
.nav__logo .logo-img {
  height: 38px;
  width: auto;
  display: block;
}
.footer-brand .logo-img {
  height: 38px;
  width: auto;
  display: block;
  margin-bottom: 18px;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
@media (max-width: 760px) {
  .nav__logo .logo-img { height: 32px; }
}

/* ───────────────────────────────────────────────────────────
   Northside-specific polish sections
   ─────────────────────────────────────────────────────────── */

/* Reviews grid: 3-col editorial layout with verbatim patient quotes */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-6);
  margin-top: var(--s-7);
}
.review-card {
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.review-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
  border-color: #D7DBE0;
}
.review-card__quote {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 var(--s-5);
  position: relative;
  z-index: 1;
  letter-spacing: -0.005em;
}
.review-card__attrib {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: auto 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-body);
  font-size: 14px;
}
.review-card__attrib strong {
  font-weight: 600;
  color: var(--ink);
  font-size: 15px;
}
.review-card__attrib span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-mute);
  font-size: 14px;
  letter-spacing: 0.01em;
}
.review-card__attrib .g-mark { width: 14px; height: 14px; flex: 0 0 auto; }

/* Gold review stars (authentic Google look), crisp inline SVG */
.rev-stars { display: inline-flex; align-items: center; gap: 3px; line-height: 0; }
.review-card .rev-stars { margin-bottom: var(--s-4); }
.star { width: 18px; height: 18px; flex: 0 0 auto; display: block; }
.star path { fill: #E2E5EA; }
/* Darkened amber so the filled stars reach >= 3:1 on white (1.4.11). #B0740A on
   white = ~3.95:1 and still reads gold/amber. Meter fill reuses .star--on. */
.star--on path { fill: #B0740A; }

/* Google rating summary (card-2 style: big score, star meter, count) */
.gsum {
  max-width: 540px;
  margin: 0 auto var(--s-7);
  background: var(--ivory);
  border: 1px solid var(--line);
  border-top: 3px solid #79C142;
  border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-7);
  box-shadow: var(--sh-2);
  text-align: center;
}
.gsum__head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.gsum__head .g-mark { width: 18px; height: 18px; flex: 0 0 auto; }
.gsum__body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-6);
  flex-wrap: wrap;
  margin: var(--s-5) 0 var(--s-4);
}
.gsum__score { display: inline-flex; align-items: baseline; gap: 6px; }
.gsum__num {
  font-family: var(--font-display);
  font-size: 60px;
  line-height: 0.9;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.gsum__out { font-size: 17px; color: var(--ink-mute); }
.star-meter { position: relative; display: inline-flex; line-height: 0; }
.star-meter .star { width: 28px; height: 28px; }
.star-meter__track { display: inline-flex; gap: 3px; }
.star-meter__fill {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  gap: 3px;
  overflow: hidden;
  white-space: nowrap;
}
.gsum__label { margin: 0 0 var(--s-5); font-size: 15px; color: var(--ink-mute); }
.gsum__label .gsum__count { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.gsum__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 4px 2px;
  font-weight: 600;
  font-size: 14px;
  color: var(--green-ink);
  text-decoration: none;
}
.gsum__link:hover { text-decoration: underline; }
.gsum__link svg { transition: transform 0.25s ease; }
.gsum__link:hover svg { transform: translateX(3px); }

/* Single-location card layout */
.single-loc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--s-8);
  margin-top: var(--s-7);
  align-items: stretch;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.single-loc__info {
  padding: var(--s-7) var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.single-loc__name {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
}
.single-loc__addr {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.single-loc__phone {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  margin: 0;
}
.single-loc__phone a {
  color: var(--green-ink);
  text-decoration: none;
}
.single-loc__phone a:hover { text-decoration: underline; }
.single-loc__hours {
  display: grid;
  grid-template-columns: minmax(92px, auto) 1fr;
  gap: 6px var(--s-5);
  margin: 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-body);
  font-size: 14px;
}
.single-loc__hours dd { white-space: nowrap; }
.single-loc__hours div {
  display: contents;
}
.single-loc__hours dt {
  font-weight: 600;
  color: var(--ink);
}
.single-loc__hours dd {
  color: var(--ink-soft);
  margin: 0;
}
.single-loc__ctas {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-4);
  flex-wrap: wrap;
}
.single-loc__map {
  position: relative;
  min-height: 420px;
  background: var(--line-soft);
}
.single-loc__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 880px) {
  .single-loc {
    grid-template-columns: 1fr;
  }
  .single-loc__info {
    padding: var(--s-6) var(--s-5);
  }
  .single-loc__map {
    min-height: 320px;
    order: -1;
  }
}

/* Staff grid: smaller cards for the 14-member team */
.staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--s-5) var(--s-4);
  margin-top: var(--s-6);
}
.staff-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  text-align: center;
  transition: transform 0.3s ease;
}
.staff-card:hover {
  transform: translateY(-2px);
}
.staff-card__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--line-soft);
  box-shadow: var(--sh-1);
}
.staff-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  display: block;
  transition: transform 0.6s ease;
}
.staff-card:hover .staff-card__photo img {
  transform: scale(1.04);
}
.staff-card__photo--soon {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--blush), #E4F1D6);
}
.staff-card__initial {
  font-family: var(--font-display);
  font-size: clamp(30px, 7vw, 46px);
  font-weight: 500;
  color: var(--green-ink);
  line-height: 1;
}
.staff-card__name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--ink);
  margin: 0;
}
.staff-card__role {
  font-family: var(--font-body);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}
@media (max-width: 480px) {
  .staff-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-4) var(--s-3);
  }
  .staff-card__name { font-size: 14px; }
  .staff-card__role { font-size: 13px; }
}

/* Provider grid for the doctors section on about page */
.provider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-6);
}

/* Pillar refinement: distinct "01/02/03" feel */
.pillar {
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-6);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.pillar:hover {
  transform: translateY(-3px);
  border-color: var(--clay-soft);
}
.pillar__num {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-ink);
  font-weight: 600;
  margin-bottom: var(--s-4);
}
.pillar h3, .pillar h4 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 var(--s-3);
  line-height: 1.2;
}
.pillar p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* Provider meta grid on detail pages */
.provider-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-7);
}
@media (max-width: 880px) {
  .provider-meta-grid {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
}

/* Benefit card variant, used on treatment detail pages */
.benefit-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-6);
}
.benefit {
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  transition: transform 0.3s ease;
}
.benefit:hover { transform: translateY(-3px); }
.benefit__num {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-ink);
  font-weight: 600;
  margin-bottom: var(--s-3);
}
.benefit h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 var(--s-3);
  line-height: 1.25;
}
.benefit p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* Page hero crumbs */
.tx-hero__crumbs {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 var(--s-4);
}
.tx-hero__crumbs a {
  color: var(--ink-mute);
  text-decoration: none;
}
.tx-hero__crumbs @media (hover: hover) { a:hover { color: var(--green-ink); } }

/* Trust bar polish - more editorial feel */
.trust-bar {
  background: var(--ivory);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: var(--s-6) 0;
}
.trust-bar__list {
  display: flex;
  justify-content: space-around;
  gap: var(--s-5);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.trust-bar__list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  text-align: center;
  flex: 1 1 0;
  min-width: 100px;
}
.trust-bar__list strong {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 500;
  color: var(--green-ink);
  letter-spacing: -0.012em;
  line-height: 1;
}
.trust-bar__list span {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}
@media (max-width: 760px) {
  .trust-bar {
    padding: var(--s-5) 0;
  }
  .trust-bar__list {
    gap: var(--s-4);
    justify-content: center;
  }
  .trust-bar__list li {
    min-width: 130px;
  }
}

/* Refined section spacing for $50k vibe */
.section {
  padding: clamp(48px, 6vw, 88px) 0;
}
.section--cream { background: var(--cream-warm); }
.section--ivory { background: var(--ivory); }
.section--parchment { background: var(--parchment); }

/* Italic emphasis: dark color on light sections */
.page-hero__h em,
.display-3 em,
.display-2 em,
.display-1 em,
.tx-library__h em,
.tx-finder__h em,
.loc-states__h em,
.team-lead__h em,
.enterprise__h em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-weight: 400;
}

/* Sec-head structure polish */
.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--s-6);
  margin-bottom: var(--s-7);
  flex-wrap: wrap;
}
.sec-head > div {
  max-width: 60ch;
}
@media (max-width: 760px) {
  .sec-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-4);
    margin-bottom: var(--s-6);
  }
}

/* Hero sub on desktop only */
.hero__sub--desktop-only {
  display: none;
}
@media (min-width: 760px) {
  .hero__sub--desktop-only {
    display: block;
  }
}

/* Banner CTA visually distinct */
.banner-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-6);
  align-items: center;
  background: var(--cream-warm);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--s-7);
}
.banner-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 400;
  letter-spacing: -0.014em;
  color: var(--ink);
  margin: 0 0 var(--s-3);
  line-height: 1.2;
}
.banner-cta p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 60ch;
}
@media (max-width: 760px) {
  .banner-cta {
    grid-template-columns: 1fr;
    padding: var(--s-6);
  }
  .banner-cta h2 {
    font-size: 26px;
  }
}

/* Lede paragraph for editorial copy */
.lede {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  font-weight: 400;
}

/* Sec-head sub paragraph */
.sec-head__sub {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 56ch;
}

/* Display-3 sizing */
.display-3 {
  font-family: var(--font-display);
  font-size: var(--t-display-3);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.06;
  color: var(--ink);
}

/* Split layout polish */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
  align-items: center;
}
.split__media {
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 5/4;
  background: var(--line-soft);
}
@media (max-width: 880px) {
  .split {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
}

/* mt-* utilities */
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }

/* btn-row */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* txt-center */
.txt-center { text-align: center; }

/* Kicker eyebrow */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-ink);
  font-weight: 600;
}
.kicker::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--clay);
}

/* Label */
.label {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
  display: block;
  margin-bottom: var(--s-3);
}

/* Section-narrow wrap */
.wrap-narrow {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 max(var(--s-5), 4vw);
}

/* Better wrap */
.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 max(var(--s-5), 4vw);
}

/* ───────────────────────────────────────────────────────────
   Transparent nav over hero (mobile-only)
   Logo + hamburger float over the hero video; once the user
   scrolls past the hero (data-scrolled=true) the solid green
   bar comes back in.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* Position nav over the hero, not below it */
  body[data-has-hero] .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 0;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  }
  /* Subtle dark-to-transparent overlay so white logo + hamburger lines
     read cleanly against any frame of the hero video. Only on mobile
     hero pages, only while not scrolled. */
  body[data-has-hero] .site-header::before {
    content: "";
    position: absolute;
    inset: 0 0 -32px 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.18) 60%, rgba(0,0,0,0) 100%);
    pointer-events: none;
    z-index: -1;
    transition: opacity 0.3s ease;
  }
  /* Not scrolled (floating over the hero video): burger lines + border go WHITE
     on the dark scrim. Once scrolled the header is solid green, so the base
     dark-ink burger rules above apply. */
  body[data-has-hero] .site-header:not([data-scrolled="true"]) .nav__burger span,
  body[data-has-hero] .site-header:not([data-scrolled="true"]) .nav__burger span::before,
  body[data-has-hero] .site-header:not([data-scrolled="true"]) .nav__burger span::after {
    background: #ffffff;
  }
  body[data-has-hero] .site-header:not([data-scrolled="true"]) .nav__burger {
    border-color: rgba(255,255,255,0.55);
  }
  /* When scrolled past hero: solid green nav, no dark overlay */
  body[data-has-hero] .site-header[data-scrolled="true"] {
    background: rgba(37,54,63,1);
    border-bottom: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  }
  body[data-has-hero] .site-header[data-scrolled="true"]::before {
    opacity: 0;
  }
  /* Hero content needs top padding equal to nav height since nav is now
     fixed and doesn't push content down. The hero already has top spacing
     baked in for the eyebrow, so the existing layout still reads well. */
  body[data-has-hero] .hero {
    padding-top: 0;
  }
}

/* Non-hero pages (about, treatments, etc.) keep the solid green nav */
body:not([data-has-hero]) .site-header {
  background: rgba(37,54,63,1);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Hero content sits below the floating mobile nav.
   .site-header is position:fixed on mobile hero pages, so hero starts at
   viewport top. Add nav-height padding to inner so eyebrow + h1 land below. */
@media (max-width: 760px) {
  body[data-has-hero] .hero__inner {
    padding-top: calc(var(--nav-h) + clamp(20px, 5vw, 40px));
  }
  /* Hero needs a touch more bottom space so the trust-bar gradient reads */
  body[data-has-hero] .hero {
    /* Full-bleed: at least one viewport tall, and GROWS to fit the copy so the
       eyebrow never collides with the fixed nav and the CTAs never clip into the
       marquee. object-fit:cover keeps the team photo edge-to-edge at any height. */
    min-height: 100dvh;
  }
}

/* Desktop: transparent nav floating over the hero (B30-style premium); the solid
   green bar returns once scrolled past the hero. Inner pages stay solid (rule above). */
@media (min-width: 761px) {
  body[data-has-hero] .site-header {
    position: fixed; top: 0; left: 0; right: 0;
    background: transparent;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-bottom: 0;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  }
  body[data-has-hero] .site-header::before {
    content: ""; position: absolute; inset: 0 0 -48px 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.18) 55%, rgba(0,0,0,0) 100%);
    pointer-events: none; z-index: -1; transition: opacity 0.3s ease;
  }
  /* Over the hero (not scrolled): logo already inverts white; links + burger go white too. */
  body[data-has-hero] .site-header:not([data-scrolled="true"]) .nav__link,
  body[data-has-hero] .site-header:not([data-scrolled="true"]) .nav__link:hover,
  body[data-has-hero] .site-header:not([data-scrolled="true"]) .nav__link[data-active="true"] {
    color: #ffffff;
  }
  body[data-has-hero] .site-header:not([data-scrolled="true"]) .nav__burger span,
  body[data-has-hero] .site-header:not([data-scrolled="true"]) .nav__burger span::before,
  body[data-has-hero] .site-header:not([data-scrolled="true"]) .nav__burger span::after {
    background: #ffffff;
  }
  /* Scrolled past the hero: the solid green bar returns. */
  body[data-has-hero] .site-header[data-scrolled="true"] {
    background: rgba(37,54,63,1);
    border-bottom: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 2px 10px rgba(0,0,0,0.10);
  }
  body[data-has-hero] .site-header[data-scrolled="true"]::before { opacity: 0; }
  /* Hero content clears the now-fixed nav. */
  body[data-has-hero] .hero { padding-top: 0; }
  body[data-has-hero] .hero__inner {
    padding-top: calc(var(--nav-h) + clamp(28px, 4vw, 64px));
  }
}

/* Hero CTAs need more breathing room between them on desktop.
   Default gap is 12px which feels too tight for premium pitch. */
@media (min-width: 761px) {
  .hero__ctas {
    gap: var(--s-5);  /* 24px */
    margin-top: var(--s-4);
  }
  .hero__ctas--stack {
    gap: var(--s-5);
  }
}

/* Mobile stacked CTAs: more vertical breathing room */
@media (max-width: 760px) {
  .hero__ctas {
    gap: var(--s-3);  /* 12px between stacked CTAs */
    margin-top: var(--s-4);
  }
  .hero__ctas--stack {
    gap: var(--s-3);
  }
}

/* Hero bottom padding: give the last CTA room to breathe before next section.
   Default 18px feels cramped, especially after gradient ends. */
@media (max-width: 760px) {
  body[data-has-hero] .hero__inner {
    padding-bottom: clamp(40px, 9vw, 64px);
  }
}

/* Desktop hero: balanced top/bottom padding so the centered stack sits like B30
   (was oversized for an old trust-bar section that no longer exists). */
@media (min-width: 761px) {
  .hero__inner {
    padding-bottom: clamp(48px, 6vh, 92px) !important;
  }
}

/* ───────────────────────────────────────────────────────────
   Insurance logo marquee (under hero): the client's real
   in-network PPO logos, grayscale, seamless pure-CSS loop.
   ─────────────────────────────────────────────────────────── */
.ins-marquee {
  background: var(--ivory);
  border-bottom: 1px solid var(--line-soft);
  padding: 26px 0 24px;
  overflow: hidden;
}
.ins-marquee__label {
  margin: 0 0 18px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-mute);
}
.ins-marquee__viewport { overflow: hidden; }
.ins-marquee__track {
  display: flex;
  width: max-content;
  animation: ins-scroll 46s linear infinite;
}
.ins-marquee:hover .ins-marquee__track { animation-play-state: paused; }
.ins-marquee__row {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 40px);
  list-style: none;
  margin: 0;
  padding: 0 clamp(12px, 1.4vw, 22px);
}
/* Even, fixed-width slots so mixed logo widths/resolutions sit on a uniform rhythm. */
.ins-marquee__row li { flex: 0 0 clamp(96px, 9vw, 124px); display: flex; align-items: center; justify-content: center; }
.ins-marquee__row img {
  max-height: 30px;
  max-width: 100%;
  width: auto;
  height: auto;
  filter: grayscale(1);
  opacity: 0.6;
}
@keyframes ins-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 760px) {
  .ins-marquee { padding: 20px 0 18px; }
  .ins-marquee__label { font-size: 12px; margin-bottom: 14px; }
  .ins-marquee__row img { height: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  .ins-marquee__track { animation: none; }
  .ins-marquee__viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Patient actions strip: the three real patient flows as one row */
.pt-actions {
  padding: clamp(36px, 5vw, 56px) 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: var(--ivory);
}
.pt-actions__kicker { display: flex; justify-content: center; margin-bottom: 22px; }
.pt-actions__row {
  display: flex;
  justify-content: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.pt-actions__row .btn { min-width: 220px; }
@media (max-width: 560px) {
  .pt-actions__row { flex-direction: column; }
  .pt-actions__row .btn { width: 100%; min-width: 0; }
}


/* Patient flow buttons (drawer pair + actions strip): green so they read as
   actions, AA-safe (deep green text on pale green tint; ink on green hover) */
.mnav__cta-row .btn,
.pt-actions__row .btn--ghost {
  background: transparent;
  border: 1.5px solid var(--line-deep);
  color: var(--ink);
}
.mnav__cta-row .btn:hover,
.pt-actions__row .btn--ghost:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #ffffff;
}


/* Quiz accent card: the smile quiz is the color moment of the page.
   Same brand green as the nav and CTAs (#79C142), ink text (8.4:1), white pills. */
.quiz__progress { background: rgba(15,20,25,0.18); }
.quiz__bar { background: var(--ink); }
.quiz__opt { background: #FFFFFF; border-color: #FFFFFF; color: var(--ink); }
@media (hover: hover) { .quiz__opt:hover { background: #F2F9E9; border-color: #FFFFFF; color: var(--ink); transform: translateY(-1px); } }
.quiz__opt:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.quiz__back { color: var(--ink); }
.quiz__back:hover { color: var(--ink); text-decoration: underline; }
.quiz__result-lab { color: var(--ink); }
.quiz__disclaimer { color: rgba(15,20,25,0.78); }
.quiz__match { background: #FFFFFF; border-color: #FFFFFF; }
.quiz__match:hover { border-color: var(--ink); }
.quiz .btn--primary { background: var(--ink); color: #FFFFFF; }
.quiz .btn--primary:hover { background: #000000; color: #FFFFFF; }
.quiz .btn--ghost { background: #FFFFFF; border-color: #FFFFFF; color: var(--ink); }
.quiz .btn--ghost:hover { background: #F2F9E9; border-color: #FFFFFF; color: var(--ink); }


/* ───────────────────────────────────────────────────────────
   Type polish pass ($100K bar):
   - one unified card-title tier (size, weight, tracking, rhythm)
   - true lining + tabular numerals on every stat and number label
   - trust-bar numerals on the display face with display tracking
   ─────────────────────────────────────────────────────────── */
.card-tx__name,
.lib-card__title,
.provider-card__name,
.quiz__match-name {
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.008em;
  line-height: 1.18;
}
.trust-bar__list strong {
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.015em;
}
.gsum__num,
.gsum__count,
.benefit__num,
.pillar__num,
.tx-hero-card__num,
.tx-support-card__num,
.tx-acc__num,
.team-lead__support-num,
.tx-finder__concern-mono {
  font-variant-numeric: lining-nums tabular-nums;
}

/* Reviews grid: 3-up on desktop (3 cards = no empty cell) */
@media (min-width: 1000px) {
  .reviews-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Insurance plan checker (financing page) */
.ins-check { text-align: center; padding: clamp(28px, 4vw, 44px) 0 8px; }
.ins-check .kicker { justify-content: center; }
.ins-check__row {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  margin-top: 26px;
}
.ins-check__input {
  flex: 1 1 340px; max-width: 420px;
  height: 52px; padding: 0 18px;
  border: 1px solid var(--line-deep, #D7DBE0); border-radius: 999px;
  font-family: var(--font-body); font-size: 16px; color: var(--ink);
  background: #FFFFFF;
}
.ins-check__input:focus-visible { outline: 2px solid var(--green-ink); outline-offset: 2px; }
.ins-check__result {
  max-width: 60ch; margin: 20px auto 0; font-size: 15.5px; line-height: 1.55;
  padding: 16px 20px; border-radius: var(--r-lg); text-align: left;
}
.ins-check__result[data-state="yes"] { background: #F2F9E9; border: 1px solid #79C142; }
.ins-check__result[data-state="check"] { background: var(--ivory); border: 1px solid var(--line); }
.ins-check__result[data-state="idle"] { background: var(--ivory); border: 1px solid var(--line); }

/* Quiz option icon cards: monoline concern icons on the white pills */
.quiz__opt--icon {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px 14px 16px;
}
.quiz__opt-ic { width: 34px; height: 34px; color: var(--green-ink); }
@media (hover: hover) { .quiz__opt--icon:hover .quiz__opt-ic { color: var(--ink); } }
@media (min-width: 700px) {
  .quiz__opts--grid { grid-template-columns: repeat(3, 1fr); }
}

/* Review carousel (homepage): horizontal scroll-snap row of all 9 reviews */
.rev-carousel { position: relative; margin-top: 34px; }
.rev-carousel__track {
  display: flex; gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 18px;
  scrollbar-width: none;
}
.rev-carousel__track::-webkit-scrollbar { display: none; }
.rev-carousel__track:focus-visible { outline: 2px solid var(--green-ink); outline-offset: 4px; border-radius: 8px; }
.rev-carousel .review-card {
  flex: 0 0 min(340px, 84vw);
  scroll-snap-align: start;
}
.rev-carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ivory); border: 1px solid var(--line-deep, #D7DBE0);
  color: var(--ink); display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-2); z-index: 2; cursor: pointer;
}
.rev-carousel__nav:hover { border-color: var(--ink); }
.rev-carousel__nav--prev { left: -10px; }
.rev-carousel__nav--next { right: -10px; }
@media (max-width: 760px) {
  .rev-carousel__nav { width: 38px; height: 38px; }
  .rev-carousel__nav--prev { left: 2px; }
  .rev-carousel__nav--next { right: 2px; }
}

/* --- Homepage editorial chapter numbers (B30-style) --- */
.home-chapters { counter-reset: chap; }
.home-chapters .kicker { gap: 10px; }
/* B30 match: no section numbers, just a hairline + label. */
.home-chapters .kicker::before { content: none; }
.home-chapters .kicker::after { content: ""; width: 24px; height: 1px; background: var(--clay); order: -1; }
.home-chapters .section--teal .kicker::before { background: none; color: rgba(255,250,249,0.85); }
.home-chapters .section--teal .kicker::after { background: rgba(255,250,249,0.5); }

/* --- Services marquee: dark editorial band, serif service names --- */
.svc-marquee { background: #25363F; padding: clamp(26px, 3.5vw, 46px) 0; overflow: hidden; }
.svc-marquee__track { display: flex; width: max-content; animation: ins-scroll 64s linear infinite; }
.svc-marquee:hover .svc-marquee__track { animation-play-state: paused; }
.svc-marquee__row { display: flex; align-items: center; gap: clamp(26px, 3.5vw, 48px); padding: 0 clamp(13px, 1.75vw, 24px); }
.svc-marquee__row span { font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 3vw, 36px); letter-spacing: -0.01em; color: #FBF8F2; white-space: nowrap; }
.svc-marquee__row em { font-style: italic; color: var(--teal); }
.svc-marquee__row i { font-style: normal; color: var(--teal); font-size: clamp(16px, 2vw, 24px); }
@media (prefers-reduced-motion: reduce) { .svc-marquee__track { animation: none; } }


/* --- The Full Range belt (B30 cmq pattern, Northside DNA): counter-scrolling
   concern/treatment rows behind a floating conversation card. No face map. --- */
.cmq { /* tightened */ background-color: #25363F; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E"); padding-block: clamp(44px, 5.5vw, 78px) clamp(44px, 5.5vw, 80px); overflow: hidden; }
.cmq__head { text-align: center; margin-bottom: clamp(24px, 3.5vw, 46px); padding-top: clamp(6px, 1vw, 18px); }
.cmq__h { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 4vw, 46px); letter-spacing: -0.02em; color: #FBF8F2; text-wrap: balance; }
.cmq__h .serif-i { font-style: italic; font-weight: 400; color: var(--teal); }

/* ── Brand-green shimmer on the two display emphases Ray flagged (hero headline +
   marquee), the B30 / West Rock "sparkle": a bright band sweeps across the green
   italic via background-clip:text. Pure CSS, renders with no JS. Base color stays
   solid green as the fallback for no-support browsers and reduced-motion. ── */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__h em,
  .cmq__h .serif-i,
  .section--dark .serif,
  #quiz .quiz__h .serif {
    background: linear-gradient(100deg, var(--teal) 43%, var(--champagne) 50%, var(--teal) 57%) no-repeat;
    background-size: 300% 100%;
    background-position: 0% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* negative delay starts the sweep already on the text so the gleam plays at load, not ~1s later */
    animation: nsGreenShine 3.4s linear -0.85s infinite;
  }
}
@keyframes nsGreenShine { to { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero__h em,
  .cmq__h .serif-i,
  .section--dark .serif,
  #quiz .quiz__h .serif {
    animation: none;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--teal);
    filter: none;
  }
}
/* Hero emphasis = brand green with a shimmer that only LIGHTENS (Ray: shimmer that does not
   darken). Base is their green; the sweep is a BRIGHTER green highlight, because a near-white
   champagne band (used on the dark sections) just vanishes on the bright photo. Solid-green
   fallback for no-@supports and reduced-motion. */
.hero .hero__h em {
  color: #adff3d;
  -webkit-text-fill-color: #adff3d;
  background: none;
  animation: none;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero .hero__h em {
    background: linear-gradient(100deg, #adff3d 40%, #ffffff 50%, #adff3d 60%) no-repeat;
    background-size: 320% 100%;
    background-position: 0% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: nsGreenShine 3.4s linear -0.85s infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero__h em {
    animation: none;
    background: none;
    -webkit-text-fill-color: #adff3d;
    color: #adff3d;
  }
}
.cmq__belt { position: relative; display: flex; flex-direction: column; gap: clamp(16px, 2.4vw, 28px); padding-block: clamp(36px, 5vw, 64px); }
.cmq__row { display: flex; overflow: hidden; position: relative; transform: translateZ(0); }
.cmq__row::before, .cmq__row::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(64px, 10vw, 140px); z-index: 2; pointer-events: none; }
.cmq__row::before { left: 0; background: linear-gradient(90deg, #25363F, rgba(15,20,25,0)); }
.cmq__row::after { right: 0; background: linear-gradient(270deg, #25363F, rgba(15,20,25,0)); }
.cmq__track { display: flex; align-items: center; width: max-content; margin: 0; padding: 0; list-style: none; animation: cmqL 84s linear infinite; will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cmq__row--rev .cmq__track { animation: cmqR 96s linear infinite; }
.cmq:hover .cmq__track { animation-play-state: paused; }
.cmq__track li { flex: 0 0 auto; display: flex; align-items: center; white-space: nowrap; font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2.6vw, 34px); letter-spacing: -0.01em; color: #FBF8F2; }
.cmq__row--rev .cmq__track li { color: rgba(251, 248, 242, 0.55); }
.cmq__track li::after { content: ""; width: 5px; height: 5px; margin: 0 clamp(20px, 2.6vw, 38px); transform: rotate(45deg); background: var(--teal); opacity: 0.6; flex: 0 0 auto; }
.cmq__card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; width: min(430px, calc(100vw - 48px)); background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg); box-shadow: 0 26px 80px rgba(0, 0, 0, 0.5); padding: clamp(24px, 3vw, 36px); text-align: center; }
.cmq__eyebrow { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--green-ink); margin-bottom: 12px; }
.cmq__copy { margin: 0 0 18px; color: var(--ink-soft, #3d4750); font-size: 16px; line-height: 1.55; }
@media (max-width: 760px) {
  .cmq__belt { padding-block: clamp(10px, 3vw, 20px); }
  .cmq__card { position: static; transform: none; margin: 26px auto 0; }
}
@media (prefers-reduced-motion: reduce) { .cmq__track { animation: none !important; } }
@keyframes cmqL { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes cmqR { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* --- Treatments card rail (B30 tcar pattern at treatment scale) --- */
.txcar__head { max-width: 760px; margin: 0 auto clamp(34px, 3.8vw, 54px); text-align: center; }
.txcar__head .kicker { justify-content: center; }
.txcar__intro { margin: 16px auto 0; color: var(--ink-mute); font-size: clamp(16px, 1.4vw, 18.5px); line-height: 1.6; max-width: 52ch; }
.txcar__rail { position: relative; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding: 10px 4px 16px; scrollbar-width: none; }
.txcar__rail::-webkit-scrollbar { display: none; }
.txcar__track { list-style: none; display: flex; gap: 22px; margin: 0; padding: 0; }
/* Services rail is a centered ~4-card window (rest scroll); keeps the row visually
   centered in the middle instead of left-aligned to a full-width content box. */
.txcar .railwrap { max-width: 1160px; margin-left: auto; margin-right: auto; }
/* B30-style boxed card: bordered white box, portrait image flush at top,
   body padded, "Learn more" pinned to the bottom so every card aligns + is equal height. */
.txcar__card { flex: none; width: 268px; scroll-snap-align: start; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2); transition: transform .25s ease, box-shadow .25s ease; }
.txcar__card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(15, 20, 25, 0.11); }
.txcar__card a { display: flex; flex-direction: column; height: 100%; color: inherit; }
.txcar__ph { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--line-soft); }
.txcar__ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.txcar__card a:hover .txcar__ph img { transform: scale(1.045); }
.txcar__card h3 { font-family: var(--font-display); font-weight: 400; font-size: 20px; margin: 0; padding: 18px 20px 6px; color: var(--ink); letter-spacing: -0.01em; }
.txcar__card p { margin: 0; padding: 0 20px 16px; font-size: 14px; line-height: 1.55; color: var(--ink-mute); }
.txcar__more { margin-top: auto; padding: 4px 20px 20px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.txcar__ctas { display: flex; gap: 26px; align-items: center; justify-content: center; margin-top: 10px; flex-wrap: wrap; text-align: center; }

/* --- Team rail (B30 tcar) --- */
.teamrail__head { max-width: 820px; margin: 0 auto clamp(24px, 3vw, 40px); text-align: center; }
.teamrail__intro { margin: 14px auto 0; color: rgba(251,248,242,0.72); font-size: clamp(16px, 1.4vw, 18.5px); line-height: 1.6; max-width: 56ch; }
.tcar__rail { position: relative; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding: 14px 0 8px; scrollbar-width: none; }
.tcar__rail::-webkit-scrollbar { display: none; }
.tcar__track { list-style: none; display: flex; gap: clamp(18px, 2.4vw, 34px); margin: 0; padding: 0 max(24px, calc((100vw - 1140px) / 2)); }
.tcar__card { flex: none; width: 150px; text-align: center; scroll-snap-align: start; }
.tcar__card img, .tcar__mono { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; display: block; margin: 0 auto 10px; border: 2px solid #fff; box-shadow: 0 8px 22px rgba(15, 20, 25, 0.16); }
.tcar__mono { display: flex; align-items: center; justify-content: center; background: #E7F2DC; color: var(--green-ink); font-family: var(--font-display); font-size: 30px; }
.tcar__card h3 { font-weight: 600; font-size: 13.5px; color: var(--ink); margin: 0 0 2px; line-height: 1.25; }
.tcar__card span:not(.tcar__mono) { font-size: 11.5px; color: var(--ink-mute); line-height: 1.3; display: block; }
.tcar__ctas { display: flex; gap: 28px; align-items: center; justify-content: center; margin-top: 18px; }
.teamrail__creds { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; margin: 28px auto 0; max-width: 820px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.teamrail__creds li { font-size: 13.5px; color: var(--ink-mute); letter-spacing: 0.02em; }

/* --- Receipts (B30 "Earned, not advertised") --- */
/* Match B30: centered "Earned, not advertised." head; the tagline below is
   supporting text, not a competing second heading. */
.rev__head { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.rev__head .kicker { justify-content: center; }
.rev__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(28px, 4vw, 64px); align-items: start; margin-bottom: clamp(30px, 4vw, 48px); }
.rev__lead blockquote { margin: 0 0 16px; font-family: var(--font-display); font-weight: 400; font-size: clamp(19px, 2vw, 27px); line-height: 1.32; letter-spacing: -0.008em; color: var(--ink); text-wrap: balance; }
.rev__cap { display: flex; gap: 12px; align-items: baseline; }
.rev__cap .nm { font-weight: 600; font-size: 14px; color: var(--ink); }
.rev__cap .st { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.rev__intro { margin: 14px 0 0; color: var(--ink-mute); font-size: 14.5px; line-height: 1.55; max-width: 46ch; }
.award { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: clamp(26px, 3.4vw, 44px); box-shadow: 0 14px 44px rgba(15, 20, 25, 0.08); }
.award__rating { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.award__score { font-family: var(--font-display); font-weight: 400; font-size: clamp(52px, 5vw, 68px); line-height: 1; color: var(--ink); }
.award__ratlab { font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); line-height: 1.5; }
.award__rule { height: 1px; background: var(--line-soft); margin: clamp(18px, 2.4vw, 28px) 0; }
.award__creds { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.award__creds li { font-size: 14px; line-height: 1.5; color: var(--ink-soft, #3d4750); }
@media (max-width: 860px) {
  .rev__grid { grid-template-columns: 1fr; }
  .txcar__track, .tcar__track { padding: 0 20px; }
}

/* --- Bigpic: full-bleed team photo band (B30 pattern) --- */
.bigpic { position: relative; overflow: hidden; }
.bigpic img { width: 100%; height: clamp(320px, 46vw, 620px); object-fit: cover; object-position: 50% 40%; display: block; }
.bigpic__cap { position: absolute; left: 0; right: 0; bottom: 18px; color: #FBF8F2; font-size: 13px; letter-spacing: 0.06em; text-shadow: 0 1px 12px rgba(0,0,0,0.55); }

/* --- Our Story: B30 2-column photo + text band --- */
.our-story__grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 76px); align-items: center; }
.our-story__media { border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,0.30); }
.our-story__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; aspect-ratio: 4 / 5; transition: transform 0.7s ease; }
@media (hover: hover) { .our-story:hover .our-story__media img { transform: scale(1.04); } }
.our-story__body { max-width: 52ch; }
.our-story__p { font-size: clamp(16px, 1.4vw, 18.5px); line-height: 1.7; color: rgba(251,248,242,0.80); margin: 18px 0 28px; }
@media (max-width: 860px) {
  .our-story__grid { grid-template-columns: 1fr; gap: 26px; }
  .our-story__media { max-width: 460px; margin: 0 auto; }
  .our-story__media img { aspect-ratio: 3 / 2; object-position: 50% 20%; }
  .our-story__body { max-width: none; text-align: center; }
  .our-story__body .kicker { justify-content: center; }
}

/* mobile quiz compaction (must trail the .quiz__opt--icon base rules to win) */
@media (max-width: 560px) {
  .quiz__opt--icon { gap: 6px; padding: 13px 8px 11px; }
  .quiz__opt-ic { width: 22px; height: 22px; }
  .quiz__opt { min-height: 72px; font-size: 13.5px; }
}

/* txcar: single-row horizontal scroll rail at every width (~4 cards visible, rest
   scroll via the prev/next arrows). The 4-then-3 wrapping grid read as an awkward
   orphan row, so the rail pattern (same as the team row) is used throughout. */


/* --- B30 lcard location card (shared: homepage + /locations/) --- */
/* Clean 2-panel: white info card + rounded map, equal height, no outer wrapper */
.single-loc--lcard { align-items: stretch; background: none; border: 0; border-radius: 0; overflow: visible; }
.single-loc--lcard .single-loc__info.lcard { display: flex; flex-direction: column; padding: 0; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2); }
.single-loc--lcard .single-loc__map { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-soft); background: var(--ivory); min-height: 100%; }
.lcard__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ivory); }
.lcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
@media (hover: hover) { .single-loc--lcard .lcard:hover .lcard__media img { transform: scale(1.045); } }
.lcard__body { display: flex; flex-direction: column; flex: 1; padding: clamp(18px, 1.7vw, 26px); }
.lcard__state { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-ink); margin: 0 0 8px; }
.lcard__name { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 1.8vw, 27px); letter-spacing: -0.02em; color: var(--ink); margin: 0 0 10px; line-height: 1.08; }
.lcard__addr { font-style: normal; font-size: 14px; line-height: 1.5; color: var(--ink-mute); margin: 0 0 8px; }
.lcard__addr span { display: block; }
.lcard__tel { display: inline-block; font-size: 14.5px; font-weight: 600; color: var(--green-ink); margin-bottom: 4px; }
.single-loc--lcard .single-loc__hours { margin-top: 12px; }
.single-loc--lcard .single-loc__ctas { margin-top: auto; padding-top: 16px; }

/* --- Rail nav arrows (match the review carousel circles) --- */
.railwrap { position: relative; }
.railnav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ivory); border: 1px solid var(--line-deep, #D7DBE0);
  color: var(--ink); display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-2); z-index: 2; cursor: pointer;
}
.railnav:hover { border-color: var(--ink); }
.railnav--prev { left: 8px; }
.railnav--next { right: 8px; }
@media (max-width: 760px) {
  .railnav { width: 38px; height: 38px; }
  .railnav--prev { left: 4px; }
  .railnav--next { right: 4px; }
}


/* Marquee animations run only while their section is on screen (JS sets data-anim). */
.ins-marquee[data-anim="off"] .ins-marquee__track,
.cmq[data-anim="off"] .cmq__track { animation-play-state: paused; }

/* Map: instant static image on mobile (tap opens Google Maps); live embed on desktop */
.single-loc__map-static { display: none; position: relative; }
.single-loc__map-static img { width: 100%; height: 100%; object-fit: cover; display: block; }
.single-loc__map-open { position: absolute; left: 12px; bottom: 12px; background: #fff; color: var(--green-ink); font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 999px; box-shadow: 0 6px 20px rgba(15,20,25,0.18); }
@media (max-width: 860px) {
  .single-loc__map-static { display: block; height: 100%; min-height: 300px; }
  .single-loc__map iframe { display: none; }
}

/* Mobile Visit section compaction: short map, tighter lcard */
@media (max-width: 860px) {
  .single-loc__map-static { min-height: 0; height: 200px; }
  .single-loc__map-static img { height: 200px; object-fit: cover; object-position: 50% 44%; }
  .single-loc--lcard .lcard__media { aspect-ratio: 21 / 9; }
  .single-loc--lcard .lcard__body { padding: 16px 16px 18px; }
  .single-loc--lcard .single-loc__hours { font-size: 13px; gap: 4px 18px; padding-top: 12px; margin-top: 10px; }
  .single-loc--lcard .lcard__name { font-size: 21px; margin-bottom: 8px; }
  .single-loc--lcard .single-loc__ctas { padding-top: 12px; }
}


/* iOS tap reliability + Visit map container collapse on mobile */
.quiz__opt, .quiz__opt * { touch-action: manipulation; }
@media (max-width: 860px) {
  .single-loc__map { height: 200px; min-height: 0; }
}

/* ───────────────────────────────────────────────────────────
   HERO PHOTO VARIANTS (build with HERO=storefront|team|reception)
   The practice's own photographs as the hero. Two things matter here:
   1. object-position per variant per breakpoint. These are landscape
      group shots; a phone viewport is portrait, so a default center
      crop drops most of the faces or the storefront sign out of frame.
   2. a heavier scrim than the video hero uses. The photos are brighter
      and busier than the window-light footage, and the ivory copy has
      to stay readable over autumn foliage and a lit white sign.
   ─────────────────────────────────────────────────────────── */
.hero--photo .hero__media img {
  /* the video rule biases to 62% for the window-light subject; photos
     each set their own below, so neutralise that inherited bias */
  object-position: center center;
}
.hero--photo .hero__media::after {
  background:
    linear-gradient(to top, rgba(20,16,12,0.72) 0%, rgba(20,16,12,0.34) 40%, rgba(20,16,12,0.16) 66%, rgba(20,16,12,0.42) 100%),
    linear-gradient(to right, rgba(20,16,12,0.62) 0%, rgba(20,16,12,0.36) 34%, rgba(20,16,12,0.06) 68%);
}
@media (max-width: 760px) {
  .hero--photo .hero__media::after {
    background:
      linear-gradient(to top, rgba(20,16,12,0.78) 0%, rgba(20,16,12,0.42) 34%, rgba(20,16,12,0.24) 56%, rgba(20,16,12,0.52) 86%, rgba(20,16,12,0.58) 100%);
  }
}

/* Storefront: the lit sign is the top third and the team is the lower
   middle. Hold the top of the frame so the sign never crops away. */
@media (min-width: 761px) { .hero--storefront .hero__media img { object-position: center 32%; } }
@media (max-width: 760px) { .hero--storefront .hero__media img { object-position: 52% 28%; } }

/* Team on Clark: faces sit across the middle band, Dr. Agran centre-left.
   On a phone hold centre-left so the front row reads instead of parked cars. */
@media (min-width: 761px) { .hero--team .hero__media img { object-position: center 42%; } }
@media (max-width: 760px) { .hero--team .hero__media img { object-position: 46% 44%; } }

/* Reception: the lit logo wall is the right third, the desk the centre.
   Desktop keeps the whole room; portrait phones bias right to the logo. */
@media (min-width: 761px) { .hero--reception .hero__media img { object-position: center 46%; } }
@media (max-width: 760px) { .hero--reception .hero__media img { object-position: 68% 46%; } }

/* ───────────────────────────────────────────────────────────
   HERO PROOF LINE - 4.8 / 558 Google reviews + the 50-year line.
   The strongest commercial fact this practice owns, moved into the fold.
   Numbers render from data/results.mjs, never hard-coded in markup.
   ─────────────────────────────────────────────────────────── */
.hero__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: rgba(255,252,245,0.86);
}
.hero__proof strong { color: var(--ivory); font-weight: 600; }
.hero__proof-stars { color: var(--champagne); letter-spacing: 0.06em; font-size: 13px; }
.hero__proof-sep { color: rgba(255,252,245,0.45); }
@media (max-width: 760px) {
  .hero__proof { font-size: 13.5px; gap: 4px 8px; }
  /* the 50-year clause is the first thing to drop when space is tight */
  .hero__proof-sep { display: none; }
  .hero__proof > span:last-child { flex-basis: 100%; }
}

/* ───────────────────────────────────────────────────────────
   MOBILE FOLD FIXES (apply to every hero variant incl. the video)
   1. The eyebrow wraps to two lines at 375-393 and the second line
      collided with the ascenders of the H1. Give it its own leading
      and a real gap instead of relying on the flex gap alone.
   2. hero__sub was --desktop-only, so the phone fold carried no
      positioning copy at all: H1 plus two buttons and nothing else.
      Show a trimmed version on mobile.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .hero__eyebrow {
    display: block;
    line-height: 1.7;
    margin-bottom: 6px;
    font-size: 11.5px;
    letter-spacing: 0.18em;
  }
  .hero__sub {
    display: block;
    font-size: 15px;
    line-height: 1.5;
    max-width: 34ch;
    margin-top: var(--s-3);
  }
}

/* ── Cookie consent banner (non-blocking bottom bar; gates GA via Consent Mode) ── */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px 24px;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--ivory);
  border-top: 1px solid var(--line-soft);
  box-shadow: 0 -6px 26px rgba(37, 54, 63, 0.13);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__text {
  margin: 0; max-width: 720px;
  font-size: 14px; line-height: 1.55; color: var(--ink-soft);
}
.cookie-banner__text a { color: var(--green-ink); text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-banner__actions .btn { min-height: 44px; }
@media (max-width: 560px) {
  .cookie-banner { gap: 12px; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .cookie-banner__text { font-size: 13.5px; text-align: center; }
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__actions .btn { flex: 1; }
}