/* ===========================================================
   Northside Dental Mockup · Clinical Glow Luxury
   Design system: warm parchment, charcoal text, clay CTA,
   editorial serif display, Inter 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. */
  --cream:        #FFFFFF;
  --cream-warm:   #FFFFFF;
  --parchment:    #FFFFFF;
  --ivory:        #FFFFFF;
  --paper:        #FFFFFF;
  --canvas-deep:  #F2F5F1;
  --blush:        #F4FAEA;
  --sage-tile:    #F4FAEA;

  /* Text (dark on white, white on blue) */
  --ink:          #0F1419;
  --ink-soft:     #2E2B26;
  --ink-mute:     #4A4A4A;
  --ink-faint:    #8A8A8A;

  /* 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;

  /* 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 */
  --sh-1: 0 1px 2px rgba(31,27,22,0.04);
  --sh-2: 0 4px 14px rgba(31,27,22,0.06);
  --sh-3: 0 14px 40px rgba(31,27,22,0.08);
  --sh-4: 0 28px 70px rgba(31,27,22,0.10);

  /* Type */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "Source Serif Pro", Georgia, "Times New Roman", serif;

  /* Type scale */
  --t-display-1: clamp(46px, 7vw, 96px);
  --t-display-2: clamp(38px, 5.4vw, 72px);
  --t-display-3: clamp(30px, 4vw, 56px);
  --t-h2:        clamp(28px, 3.4vw, 48px);
  --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; }
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; }
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); }
a:hover { color: var(--clay); }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }

/* --- 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: 350;
  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: 350;
  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: 350;
  line-height: 1.08;
  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-soft); }
em.serif { font-family: var(--font-display); font-style: italic; }

/* --- 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); }
.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(--clay);
  color: var(--ivory);
  box-shadow: 0 4px 14px rgba(186,90,58,0.22);
}
.btn--primary:hover { background: var(--clay-deep); color: var(--ivory); box-shadow: 0 8px 22px rgba(186,90,58,0.3); }
.btn--teal { background: var(--teal); color: var(--ivory); }
.btn--teal:hover { background: var(--teal-2); color: var(--ivory); }
.btn--ink {
  background: #79C142;
  color: var(--ivory);
}
.btn--ink:hover { background: #5BA12C; color: var(--ivory); }
.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: 40px; 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;
  /* Northside brand blue (#79C142) per client wordmark + signage */
  background: rgba(121,193,66,0.95);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  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(121,193,66,1);
  border-bottom-color: rgba(255,255,255,0.12);
}
/* Nav text + links read white on the blue header */
.site-header .nav__link {
  color: rgba(255,255,255,0.92);
}
.site-header .nav__link:hover,
.site-header .nav__link[data-active="true"] {
  color: #ffffff;
}
.site-header .nav__cta-desktop {
  background: #ffffff;
  color: #79C142;
  border-color: #ffffff;
}
.site-header .nav__cta-desktop:hover {
  background: #F4FAEA;
  color: #3E7A1F;
}
.site-header .nav__burger {
  background: transparent;
  border-color: rgba(255,255,255,0.55);
}
.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); }
.nav__link[data-active="true"] { color: var(--ink); }
.nav__link[data-active="true"]::after {
  content: "";
  position: absolute;
  left: 4px; right: 4px;
  bottom: -2px;
  height: 1px;
  background: var(--clay);
}
.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__links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: var(--s-4); }
.mnav__links a { font-size: 14.5px; color: var(--clay); border-bottom: 1px solid currentColor; padding: 9px 0; min-height: 40px; display: inline-flex; align-items: center; }
.mnav__links a:hover { color: var(--clay-deep); }

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

/* --- Smile Quiz (green pop accent) --- */
.quiz-sec { background: var(--paper); }
.quiz__head { text-align: center; max-width: 640px; margin: 0 auto clamp(28px,4vw,44px); }
.quiz__h { font-family: var(--font-display); font-size: var(--t-h2); font-weight: 400; margin: 12px 0 12px; letter-spacing: -0.01em; }
.quiz__sub { color: var(--ink-mute); font-size: 15.5px; margin: 0; }
.quiz {
  max-width: 720px; margin: 0 auto;
  background: var(--ivory);
  border: 1px solid var(--line);
  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: 1fr; } }
.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);
  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);
}
.quiz__opt:hover { border-color: var(--teal); background: var(--blush); color: var(--clay-deep); transform: translateY(-1px); }
.quiz__opt:focus-visible { outline: 2px solid var(--teal); 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(--clay); }
.quiz__result { text-align: center; }
.quiz__result-lab { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal); 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: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; 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(--clay); }
.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; }

/* --- 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: 350; 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: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); 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: 13.5px; font-weight: 500; color: var(--clay); margin-top: 4px; }
.lib-article { padding-top: clamp(110px, 13vw, 160px); }
.lib-crumbs { font-size: 12.5px; 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 a:hover { color: var(--clay); }
.lib-article__h { font-family: var(--font-display); font-size: clamp(30px, 4vw, 52px); font-weight: 350; 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: 12px; 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(--clay-deep); }

/* 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: #79C142;
  border: 0;
  color: #ffffff;
  font-weight: 600;
  border-radius: var(--r-pill);
  transform: none;
  box-shadow: 0 10px 30px rgba(121,193,66, 0.40), 0 2px 6px rgba(0,0,0,0.10);
}
.sticky-cta .btn:hover,
.sticky-cta .btn:active {
  background: #6BAE38;
  color: #ffffff;
  transform: none;
  box-shadow: 0 12px 34px rgba(121,193,66, 0.48);
}
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;
  min-height: min(94vh, 880px);
  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;
  filter: saturate(1.05) brightness(1.02);
}
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(20,16,12,0.52) 0%, rgba(20,16,12,0.10) 38%, rgba(20,16,12,0) 62%, rgba(20,16,12,0.12) 100%),
    linear-gradient(to right, rgba(20,16,12,0.18) 0%, rgba(20,16,12,0) 45%);
}
@media (max-width: 760px) {
  .hero__media::after {
    background:
      linear-gradient(to top, rgba(20,16,12,0.58) 0%, rgba(20,16,12,0.20) 38%, rgba(20,16,12,0.04) 65%, rgba(20,16,12,0.08) 100%);
  }
}
.hero__inner {
  position: relative; z-index: 1;
  width: 100%;
  padding: clamp(36px, 8vw, 96px) 0 clamp(36px, 6vw, 64px);
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: clamp(48px, 8vw, 96px);
  min-height: 100%;
}
.hero__top-group { display: flex; flex-direction: column; gap: var(--s-4); max-width: 720px; }
.hero__bottom-group { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 36px); }
.hero__top { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-5); flex-wrap: wrap; }
.hero__eyebrow { color: rgba(255,252,245,0.7); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; }
.hero__h {
  font-family: var(--font-display);
  font-size: var(--t-display-1);
  font-weight: 350;
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--ivory);
  max-width: 14ch;
}
.hero__h em { font-style: italic; color: var(--champagne); font-weight: 350; }
.hero__sub {
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.5;
  color: rgba(255,252,245,0.85);
  max-width: 54ch;
  margin-top: var(--s-4);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); }
.hero__trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255,252,245,0.18);
  max-width: 880px;
}
.hero__trust-item {
  display: flex; flex-direction: column; gap: 4px;
}
.hero__trust-item strong {
  font-family: var(--font-display);
  font-weight: 350;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.01em;
  color: var(--ivory);
}
.hero__trust-item span {
  font-size: 12.5px;
  color: rgba(255,252,245,0.7);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
@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 {
    min-height: 0;
    height: calc(100dvh - var(--nav-h) - 92px);
    max-height: calc(100dvh - var(--nav-h) - 92px);
  }
  .hero__inner {
    /* Base desktop rule has 0 horizontal · must explicitly add gutter back on mobile */
    padding: 18px var(--gutter) 18px;
    gap: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }
  .hero__top-group { gap: 0; }
  .hero__bottom-group { gap: 22px; }
  .hero__top { gap: 4px; flex-shrink: 0; }
  .hero__top .hero__eyebrow:nth-child(2) { display: none; }
  .hero__h {
    max-width: 12ch;
    font-size: clamp(42px, 10.5vw, 60px);
    line-height: 0.96;
    margin: 0;
  }
  .hero__sub { display: none; } /* Drop on mobile to fit in viewport */
  .hero__ctas { gap: 10px; margin-top: 6px; }
  .hero__ctas .btn--lg { height: 50px; padding: 0 20px; font-size: 14.5px; }
  .hero__trust {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 24px;
    padding-top: 16px;
    margin-top: auto; /* push trust strip to bottom of hero */
    border-top-color: rgba(255,252,245,0.22);
  }
  .hero__trust--two { grid-template-columns: repeat(2, 1fr); max-width: 460px; }
  .hero__trust-item { gap: 4px; padding-right: 4px; }
  .hero__trust-item strong { font-size: 20px; }
  .hero__trust-item span { font-size: 12px; letter-spacing: 0.12em; }
}
@media (max-width: 380px) {
  .hero {
    height: calc(100dvh - var(--nav-h) - 86px);
    max-height: calc(100dvh - var(--nav-h) - 86px);
  }
  .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 {
      height: calc(100vh - var(--nav-h) - 92px);
      max-height: calc(100vh - var(--nav-h) - 92px);
    }
  }
}

/* --- 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: 11px;
  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(--ivory);
  border-color: #79C142;
}
.chip[data-active="true"]:hover { background: #5BA12C; border-color: #5BA12C; color: var(--ivory); }

/* --- 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: 11.5px;
  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: 13.5px; }

/* 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(--clay);
  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: 350;
  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: 13.5px; color: var(--ink-mute); letter-spacing: 0.01em; }
.provider-card__creds { font-size: 12px; color: var(--clay); 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: 11.5px; 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: 11.5px; 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: 11px; 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(--clay);
  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: 11.5px;
  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: 10px; 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: 11.5px; 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: 350;
  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(--clay);
}
.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(--clay);
  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: #ffffff; }
.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: #79C142;
  color: rgba(255,252,245,0.72);
  padding: clamp(64px, 8vw, 96px) 0 32px;
}
.site-footer a { color: rgba(255,252,245,0.85); }
.site-footer a:hover { color: var(--ivory); }
.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 h3 {
  font-family: var(--font-display);
  color: var(--ivory);
  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(255,252,245,0.62); max-width: 30ch; }
.footer-col h5 {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,252,245,0.55);
  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: 12px;
  color: rgba(255,252,245,0.5);
}
.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(255,252,245,0.7); }
.footer-bottom__legal a {
  color: rgba(255,252,245,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: 12px; 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: 350;
  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(--clay);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.benefit h4 { 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(--clay); }
.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: 10px;
  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: 350;
  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(--ivory);
  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: 11px; }
  .team-lead__strip { padding: 14px 18px; gap: 12px; }
  .team-lead__strip-item { font-size: 11.5px; }
  .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: 11.5px; 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: 350;
  font-size: 14px;
  color: var(--clay);
  letter-spacing: 0.02em;
}
.loc-region__label {
  font-family: var(--font-body);
  font-size: 11px;
  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: 350;
  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: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--blush);
  color: var(--clay-deep);
  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(--clay); 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: 10px !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: 11px;
  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: 350;
  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(--clay);
  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: 13px;
  color: var(--ink-mute);
  font-style: italic;
  letter-spacing: 0.005em;
}
.tx-acc__item[data-open="true"] .tx-acc__preview { color: var(--clay-deep); 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(--clay-deep);
  font-size: 10px;
  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: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay);
  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: 10.5px;
  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: 11px;
  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: 11px;
  color: var(--clay);
  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(--clay);
}
@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: 350;
  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: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--clay);
    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: #FFFFFF !important;
    border-color: var(--clay) !important;
    box-shadow: 0 6px 18px rgba(186,90,58,0.32);
  }
  .tx-finder__concern[data-active="true"] .tx-finder__concern-label,
  .tx-finder__concern[data-active="true"] .tx-finder__concern-mono {
    color: #FFFFFF !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: 11px;
    z-index: 2;
    color: var(--clay);
    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: 13.5px;
    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(--clay);
  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(--clay);
}

.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(--clay-deep);
  font-size: 10.5px;
  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: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--clay);
}
.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: 11px; 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(--clay);
  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: 13px;
  color: var(--ink-mute);
  margin: 0;
  line-height: 1.45;
}
.tx-support-card .text-link { margin-top: 4px; font-size: 12.5px; }
.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: 350;
  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: 11px;
  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: 350;
  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: 12px;
  color: var(--clay);
  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: 13px;
  color: var(--ink-mute);
}
.team-lead__support-cred {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clay);
  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(--clay);
}
@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: 13px;
  color: rgba(255,250,249,0.7);
  letter-spacing: 0.03em;
}
.team-lead__strip-item strong {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--ivory);
  margin-right: 8px;
  letter-spacing: -0.005em;
}
.team-lead__strip-divider {
  width: 1px; height: 24px;
  background: rgba(255,250,249,0.18);
}

/* ────────────────────────────────────────────────────────────
   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: 350;
  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(--clay);
  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: 11.5px; 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(--clay);
}
.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: 12px; 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: 350;
  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, "Raleway", sans-serif);
  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: 11.5px;
  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: 11px; 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: 13px;
  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; }
.star--on path { fill: #F5A623; }

/* 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;
  font-weight: 600;
  font-size: 14px;
  color: #3A6B15;
  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(--clay);
  text-decoration: none;
}
.single-loc__phone a:hover { text-decoration: underline; }
.single-loc__hours {
  display: grid;
  grid-template-columns: 110px 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 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;
  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: 350;
  color: var(--clay-deep);
  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: 12px;
  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: 11px; }
}

/* 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: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
  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: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
  font-weight: 600;
  margin-bottom: var(--s-3);
}
.benefit h4 {
  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: 12px;
  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 a:hover { color: var(--clay); }

/* 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(--clay);
  letter-spacing: -0.012em;
  line-height: 1;
}
.trust-bar__list span {
  font-family: var(--font-body);
  font-size: 11px;
  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(64px, 9vw, 128px) 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: 400;
  letter-spacing: -0.018em;
  line-height: 1.1;
  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: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
  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;
  }
  /* When scrolled past hero: solid green nav, no dark overlay */
  body[data-has-hero] .site-header[data-scrolled="true"] {
    background: rgba(121,193,66,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(121,193,66,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 {
    min-height: 100dvh;
  }
}

/* Desktop: nav is normal sticky, hero content padding stays as designed */

/* 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 CTAs need more clearance from the trust-bar section below.
   Default clamp(36px, 6vw, 64px) caps at 64px which still feels cramped on
   large viewports. Bump up to feel premium. */
@media (min-width: 761px) {
  .hero__inner {
    padding-bottom: clamp(72px, 8vw, 120px) !important;
  }
}