/* css/tokens.css */
/* ============================================================
   PT Template 3 — "Modern Momentum" Design Tokens
   ONE-VARIABLE REBRAND: swap --accent-h/s/l to re-skin the site.
   ============================================================ */

:root {
  /* --- Accent system (client-configurable) ---
     Lodestar Physical Therapy brand navy (#11182b, primary brand color).
     Gold accent lives in --ember below (~#dca54a, the compass-star). */
  --accent-h: 224;
  --accent-s: 43%;
  --accent-l: 12%;
  --accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l));
  --accent-strong: hsl(var(--accent-h) var(--accent-s) 27%);
  --accent-soft: hsl(var(--accent-h) 60% 92%);
  --accent-glow: hsl(var(--accent-h) 80% 45% / 0.35);
  --accent-on: #ffffff;

  /* --- Neutrals --- */
  --ink: #0e1b21;
  --ink-2: #14252d;
  --ink-3: #1b323c;
  --bone: #f6f3ec;
  --bone-2: #efeae0;
  --white: #ffffff;
  --line-ink: hsl(200 20% 90%);
  --line-bone: hsl(40 15% 84%);

  /* --- Text on dark / light --- */
  --text-on-ink: #f2f5f4;
  --text-on-ink-dim: hsl(190 15% 72%);
  --text-on-bone: #17262d;
  --text-on-bone-dim: hsl(200 12% 38%);

  /* --- Highlight (stars, tiny sparks ONLY) --- Lodestar brand gold --- */
  --ember: #dca54a;

  /* --- Gold secondary accent (Lodestar compass-star) ---
     --gold: bright, for decorative fills + text on dark/ink surfaces.
     --gold-ink: darker, accessible for gold TEXT on the light bone background. */
  --gold: #dca54a;
  --gold-ink: hsl(40 68% 32%);

  /* --- AA-safe gold button variants ---
     White (--accent-on) text on the bright --gold/--ember fill is ~2.2:1,
     well under the 4.5:1 WCAG AA text threshold. These two darker, same-hue
     shades are for any solid button/fill that carries white text on a dark
     section (nav CTA, on-ink .btn--solid, mobile bar, footer social hover,
     journey active dot). Ratios against white: --gold-btn ~4.9:1,
     --gold-btn-hover ~9:1. See docs/accessibility-report.md, Section 4. */
  --gold-btn: hsl(40 68% 34%);
  --gold-btn-hover: hsl(40 68% 22%);

  /* --- Typography --- */
  --font-display: "Bricolage Grotesque", sans-serif;
  --font-body: "Instrument Sans", sans-serif;
  --font-quote: "Instrument Serif", serif;

  /* Fluid type scale */
  --fs-hero: clamp(2.75rem, 1.2rem + 6.5vw, 6rem);
  --fs-h2: clamp(2rem, 1rem + 3.6vw, 3.6rem);
  --fs-h3: clamp(1.35rem, 1.05rem + 1.2vw, 2rem);
  --fs-h4: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-ghost: clamp(8rem, 20vw, 22rem); /* giant ghost numerals */

  /* --- Space & shape --- */
  --sp-section: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --sp-gap: clamp(1.25rem, 1rem + 1vw, 2rem);
  --radius-card: 20px;
  --radius-lg: 32px;
  --radius-pill: 999px;

  /* --- Elevation --- */
  --shadow-soft: 0 6px 24px hsl(200 30% 10% / 0.08), 0 2px 8px hsl(200 30% 10% / 0.05);
  --shadow-lift: 0 18px 50px hsl(200 35% 10% / 0.16), 0 6px 16px hsl(200 35% 10% / 0.08);
  --shadow-glow: 0 0 60px var(--accent-glow);

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-reveal: 700ms;

  /* --- Layout --- */
  --container: 1200px;
  --nav-h: 76px;
}

/* css/base.css */
/* ============================================================
   PT Template 3 — Base: reset, typography, shared components.
   Section-specific styles belong in css/sections/*.css, scoped
   under their section root class. Do NOT add section styles here.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; }
html.reduced-motion { scroll-behavior: auto; }

/* Anchored sections must clear the fixed nav when jumped to */
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-on-bone);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg, video, iframe { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
a { color: inherit; }
ul[class], ol[class] { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  font-weight: 700;
}
h1 { font-size: var(--fs-hero); font-weight: 800; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* --- Focus ring on dark sections ---
   The default --accent ring is a near-black navy: on any dark/on-ink
   surface it sits at ~1:1 contrast against the background (invisible).
   Swap to the gold accent (already ~8:1 against --ink) wherever focus
   can land on a dark surface, whether that surface uses the shared
   .on-ink class or has its own hardcoded dark background. */
.on-ink :focus-visible, .on-ink:focus-visible,
.sec-01-nav :focus-visible, .sec-01-nav:focus-visible,
.sec-14-footer :focus-visible, .sec-14-footer:focus-visible,
.sec-16-comebacks :focus-visible, .sec-16-comebacks:focus-visible,
.sec-17-mobilebar :focus-visible, .sec-17-mobilebar:focus-visible,
.sec-55-cond-treatment :focus-visible, .sec-55-cond-treatment:focus-visible {
  outline-color: var(--gold);
}

/* --- Skip link: first focusable element on every page, off-screen until focused --- */
.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1000;
  transform: translateY(-150%);
  background: var(--ink);
  color: var(--text-on-ink);
  padding: 0.85rem 1.4rem;
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform 150ms var(--ease-out);
}
.skip-link:focus-visible {
  transform: translateY(0);
  outline-color: var(--gold);
}
html.reduced-motion .skip-link { transition: none; }

/* --- Layout --- */
.container {
  width: min(var(--container), 100% - 2.5rem);
  margin-inline: auto;
}

/* --- Section rhythm helpers --- */
.section-pad { padding-block: var(--sp-section); }
.on-ink { color: var(--text-on-ink); background: var(--ink); }
.on-ink h1, .on-ink h2, .on-ink h3, .on-ink h4 { color: var(--white); }

/* --- Eyebrow + section heading pattern --- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.eyebrow::before {
  content: "";
  width: 2rem;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}
.on-ink .eyebrow { color: var(--gold); }
.on-ink .eyebrow::before { background: var(--gold); }

.section-head { max-width: 46ch; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-head .eyebrow { margin-bottom: 1rem; }
.section-head p { margin-top: 1rem; color: var(--text-on-bone-dim); max-width: 52ch; }
.on-ink .section-head p { color: var(--text-on-ink-dim); }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 300ms var(--ease-spring), box-shadow 300ms var(--ease-out),
    background-color 200ms var(--ease-out), color 200ms var(--ease-out),
    border-color 200ms var(--ease-out);
  will-change: transform;
}
.btn--solid { background: var(--accent); color: var(--accent-on); border-color: hsl(0 0% 100% / 0.16); box-shadow: 0 8px 24px var(--accent-glow); }
.btn--solid:hover { background: var(--accent-strong); border-color: hsl(0 0% 100% / 0.24); box-shadow: 0 12px 32px var(--accent-glow); }
/* On dark (on-ink) sections the base --accent is too close to the section's
   own near-black background to read as a button — pop to a lighter,
   same-hue shade instead. */
.on-ink .btn--solid { background: var(--gold-btn); border-color: hsl(0 0% 100% / 0.2); }
.on-ink .btn--solid:hover { background: var(--gold-btn-hover); }
.btn--ghost { border-color: currentColor; background: transparent; color: inherit; }
.btn--ghost:hover { background: hsl(0 0% 100% / 0.08); }
.btn .btn__arrow { transition: transform 300ms var(--ease-spring); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* --- Reveal-on-scroll (driven by js/core.js) ---
   Only hidden-by-default once html.no-js has been removed (see the inline
   <script> at the top of every page <head>): if JavaScript never runs,
   html.no-js stays put and this rule never applies, so content stays in
   its normal visible flow instead of being stuck at opacity:0 forever. */
html:not(.no-js) [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
html:not(.no-js) [data-reveal].is-visible { opacity: 1; transform: none; }
html.reduced-motion [data-reveal] { opacity: 1; transform: none; transition: none; }

/* --- Marquee (duplicate .marquee__track content twice) --- */
.marquee { overflow: hidden; display: flex; }
.marquee__track {
  --marquee-gap: 3rem;
  display: flex;
  align-items: center;
  gap: var(--marquee-gap);
  flex-shrink: 0;
  min-width: 100%;
  padding-right: var(--marquee-gap);
  animation: marquee-scroll var(--marquee-dur, 36s) linear infinite;
}
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
html.reduced-motion .marquee__track { animation: none; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - var(--marquee-gap))); }
}

/* --- Grain texture for dark sections --- */
.grain { position: relative; }
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grain > * { position: relative; z-index: 1; }

/* --- Ghost numeral --- */
.ghost-num {
  font-family: var(--font-display);
  font-size: var(--fs-ghost);
  font-weight: 800;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1.5px hsl(40 68% 58% / 0.20);
  user-select: none;
  pointer-events: none;
}

/* --- Pulse-line brand motif (canonical EKG path lives in the addendum spec) --- */
.pulse-line { display: block; width: 100%; height: 44px; }
.pulse-line path {
  stroke: var(--accent);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html:not(.no-js) .pulse-line--draw path { stroke-dasharray: 1; stroke-dashoffset: 1; }
[data-reveal].is-visible .pulse-line--draw path,
.pulse-line--draw[data-reveal].is-visible path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1400ms var(--ease-out) 200ms;
}
html.reduced-motion .pulse-line--draw path { stroke-dashoffset: 0; transition: none; }

/* --- Auto chapter numbers (data-chapter stamped by core.js) --- */
.section-head { position: relative; }
.section-head[data-chapter]::before {
  content: attr(data-chapter);
  position: absolute;
  top: -0.55em;
  left: -0.06em;
  z-index: -1;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4.5rem, 3rem + 6vw, 7.5rem);
  line-height: 1;
  color: var(--gold);
  opacity: 0.10;
  pointer-events: none;
  user-select: none;
}

/* --- Chapter spine (injected by core.js, desktop only) --- */
.chapter-spine {
  position: fixed;
  left: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  mix-blend-mode: difference; /* legible on both bone and ink sections */
  pointer-events: none;
}
.chapter-spine__rail {
  width: 2px;
  height: 72px;
  background: hsl(0 0% 100% / 0.25);
  border-radius: 2px;
  overflow: hidden;
}
.chapter-spine__fill {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 500ms var(--ease-out);
}
.chapter-spine__total { opacity: 0.55; }

/* --- Cursor-reactive glow (injected by core.js on section.on-ink) --- */
.cursor-glow {
  position: absolute;
  top: -220px;
  left: -220px;
  width: 440px;
  height: 440px;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow), transparent 62%);
  opacity: 0;
  pointer-events: none;
  transition: transform 700ms var(--ease-out), opacity 500ms var(--ease-out);
  will-change: transform, opacity;
}

/* --- Screen-reader only --- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* css/sections/00-fonts.css */
/* ============================================================
   00-fonts — self-hosted web fonts (speed audit 2026-10-09).
   Same variable WOFF2 files Google Fonts served (latin subset, OFL), now
   served from /assets/fonts so there is no render-blocking Google Fonts
   stylesheet and no extra connection. font-display: swap shows text at once
   in a size-matched fallback; the two first-screen files are preloaded in
   each page's <head>.
   ============================================================ */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/bricolage-grotesque-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-serif-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-serif-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Size-matched fallbacks: text first paints in these, so the swap to the web
   font doesn't re-wrap lines and shift the layout. size-adjust matches each
   fallback's average glyph width to the web font (Bricolage Grotesque 800 =
   92% of Arial, Instrument Sans 400 = 101.6%; measured on the same files). */
@font-face {
  font-family: "Bricolage Fallback";
  src: local("Arial"), local("Helvetica"), local("Roboto");
  size-adjust: 92%;
}
@font-face {
  font-family: "Instrument Sans Fallback";
  src: local("Arial"), local("Helvetica"), local("Roboto");
  size-adjust: 101.6%;
}
:root {
  --font-display: "Bricolage Grotesque", "Bricolage Fallback", sans-serif;
  --font-body: "Instrument Sans", "Instrument Sans Fallback", sans-serif;
}

/* css/sections/00-interior-hero.css */
/* ============================================================
   00-interior-hero — shared compact page hero for ALL interior
   pages (About, What We Treat, Services, condition/service pages).
   Page fragments use these classes with their own content; do not
   duplicate these styles per page.
   ============================================================ */

.sec-00-inthero {
  position: relative;
  /* The ::before glow below deliberately bleeds past the right edge
     (right: -10%) for a soft edge-lit look. Without clipping it here,
     that bleed becomes real horizontal page overflow on every page that
     uses this shared hero (About, What We Treat, Services, every
     condition/service page) — a ~39px scrollable sliver on mobile that
     lets the page rubber-band sideways and can make the fixed header
     look misaligned/detached during that overscroll. 12-booking.css's
     own drifting glow already guards against this the same way. */
  overflow: clip;
  display: flex;
  align-items: center;
  min-height: clamp(380px, 52vh, 560px);
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 5vw, 4rem));
  padding-bottom: clamp(4rem, 9vw, 7rem); /* clears the wave */
}

/* Soft accent glow, echoes the home hero without the photo weight */
.sec-00-inthero::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 55%;
  height: 120%;
  background: radial-gradient(circle at 65% 40%, var(--accent-glow), transparent 60%);
  filter: blur(70px);
  opacity: 0.55;
  pointer-events: none;
}

.sec-00-inthero__crumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  font-size: 0.82rem;
  color: var(--text-on-ink-dim);
}
.sec-00-inthero__crumbs a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: hsl(0 0% 100% / 0.35);
  text-underline-offset: 2px;
  transition: color 200ms var(--ease-out), text-decoration-color 200ms var(--ease-out);
}
.sec-00-inthero__crumbs a:hover { color: var(--text-on-ink); text-decoration-color: currentColor; }
.sec-00-inthero__crumbs [aria-current] { color: var(--ember); text-decoration: none; }

.sec-00-inthero h1 {
  font-size: clamp(2.4rem, 1.4rem + 4.5vw, 4.5rem);
  max-width: 18ch;
}

.sec-00-inthero__sub {
  margin-top: 1.25rem;
  max-width: 52ch;
  color: var(--text-on-ink-dim);
  font-size: var(--fs-body);
}

.sec-00-inthero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-top: 2rem;
}

/* Small symptom/context chips usable in the meta row */
.sec-00-inthero__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid hsl(0 0% 100% / 0.22);
  color: var(--text-on-ink-dim);
  font-size: 0.82rem;
  font-family: var(--font-display);
  font-weight: 600;
}

.sec-00-inthero__wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: clamp(36px, 5.5vw, 80px);
  pointer-events: none;
}

/* css/sections/01-nav.css */
/* ============================================================
   Section 01 — Nav
   Fixed ink-glass bar, condenses on scroll, scroll-progress line,
   full-screen overlay menu on mobile. All selectors scoped under
   .sec-01-nav (plus a required body-scroll-lock state class the
   nav JS toggles while the mobile overlay is open).
   ============================================================ */

.sec-01-nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 200;
  font-family: var(--font-body);
}

/* --- Bar --- */
.sec-01-nav .sec-01-nav__bar {
  position: relative;
  /* Must paint above the mobile overlay (z-index 199) so the toggle stays clickable while the menu is open */
  z-index: 210;
  background: hsl(200 35% 6% / 0.7);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid hsl(0 0% 100% / 0.08);
  transition: background-color 400ms var(--ease-out), border-color 400ms var(--ease-out);
}

html.is-scrolled .sec-01-nav .sec-01-nav__bar {
  background: hsl(200 40% 5% / 0.86);
  border-bottom-color: hsl(0 0% 100% / 0.12);
  box-shadow: var(--shadow-soft);
}

.sec-01-nav .sec-01-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem);
  height: var(--nav-h);
  transition: height 400ms var(--ease-out);
}

html.is-scrolled .sec-01-nav .sec-01-nav__inner {
  height: calc(var(--nav-h) - 18px);
}

/* --- Logo --- */
.sec-01-nav .sec-01-nav__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}

.sec-01-nav .sec-01-nav__logo-img {
  height: 54px;
  width: auto;
  display: block;
  /* Keeps the white wordmark legible over a bright hero showing through the glassy bar */
  filter: drop-shadow(0 1px 4px hsl(200 40% 4% / 0.55));
  transition: height 400ms var(--ease-out);
}

html.is-scrolled .sec-01-nav .sec-01-nav__logo-img { height: 42px; }

.sec-01-nav .sec-01-nav__logo-dot {
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: var(--ember);
  flex-shrink: 0;
}

/* --- Center links --- */
.sec-01-nav .sec-01-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2vw, 2.25rem);
}

.sec-01-nav .sec-01-nav__link {
  position: relative;
  color: var(--text-on-ink-dim);
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  padding-block: 0.4rem;
  white-space: nowrap;
  transition: color 200ms var(--ease-out);
}

.sec-01-nav .sec-01-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--ember);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease-out);
}

.sec-01-nav .sec-01-nav__link:hover,
.sec-01-nav .sec-01-nav__link:focus-visible {
  color: var(--text-on-ink);
}

.sec-01-nav .sec-01-nav__link:hover::after,
.sec-01-nav .sec-01-nav__link:focus-visible::after {
  transform: scaleX(1);
}

/* --- Multi-location slot (kept dark-safe if ever enabled) --- */
.sec-01-nav .sec-01-nav__locations { position: relative; }
.sec-01-nav .sec-01-nav__locations-toggle {
  background: none;
  border: none;
  color: var(--text-on-ink-dim);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}
.sec-01-nav .sec-01-nav__locations-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.75rem;
  min-width: 180px;
  background: var(--ink-2);
  border-radius: var(--radius-card);
  padding: 0.5rem;
  box-shadow: var(--shadow-lift);
}

/* --- Right actions --- */
.sec-01-nav .sec-01-nav__actions {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

.sec-01-nav .sec-01-nav__phone {
  color: var(--text-on-ink-dim);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color 200ms var(--ease-out);
}
.sec-01-nav .sec-01-nav__phone:hover { color: var(--text-on-ink); }

.sec-01-nav .sec-01-nav__cta {
  padding-block: 0.7rem;
  font-size: 0.9rem;
  white-space: nowrap;
}

/* The nav bar and mobile overlay are always dark — the base --accent navy
   is too close to that background to read as a button, same fix as .on-ink. */
.sec-01-nav .sec-01-nav__cta.btn--solid,
.sec-01-nav .sec-01-nav__overlay-cta.btn--solid {
  background: var(--gold-btn);
}
.sec-01-nav .sec-01-nav__cta.btn--solid:hover,
.sec-01-nav .sec-01-nav__overlay-cta.btn--solid:hover {
  background: var(--gold-btn-hover);
}

/* --- Scroll progress: clean straight bar driven by --scroll-progress --- */
.sec-01-nav .sec-01-nav__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  overflow: hidden;
}

.sec-01-nav .sec-01-nav__progress-bar {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ember);
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left;
}

/* --- Hamburger toggle (mobile) --- */
.sec-01-nav .sec-01-nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.sec-01-nav .sec-01-nav__toggle-line {
  display: block;
  width: 24px;
  height: 2px;
  margin-inline: auto;
  background: var(--text-on-ink);
  border-radius: 2px;
  transition: transform 320ms var(--ease-spring), opacity 200ms var(--ease-out);
}

.sec-01-nav .sec-01-nav__toggle[aria-expanded="true"] .sec-01-nav__toggle-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.sec-01-nav .sec-01-nav__toggle[aria-expanded="true"] .sec-01-nav__toggle-line:nth-child(2) {
  opacity: 0;
}
.sec-01-nav .sec-01-nav__toggle[aria-expanded="true"] .sec-01-nav__toggle-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- Full-screen ink overlay menu --- */
.sec-01-nav .sec-01-nav__overlay {
  position: fixed;
  inset: 0;
  z-index: 199;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2.5rem, 8vh, 4rem);
  padding: clamp(2rem, 8vw, 4rem);
  background: var(--ink);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 380ms var(--ease-out), visibility 380ms;
}

.sec-01-nav .sec-01-nav__overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.sec-01-nav .sec-01-nav__overlay-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sec-01-nav .sec-01-nav__overlay-link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.5rem + 5vw, 3.75rem);
  letter-spacing: -0.02em;
  color: var(--text-on-ink);
  text-decoration: none;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
  transition-delay: 0ms;
}

.sec-01-nav .sec-01-nav__overlay.is-open .sec-01-nav__overlay-link {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 70ms + 80ms);
}

.sec-01-nav .sec-01-nav__overlay-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  opacity: 0;
  transition: opacity 420ms var(--ease-out);
  transition-delay: 380ms;
}

.sec-01-nav .sec-01-nav__overlay.is-open .sec-01-nav__overlay-footer {
  opacity: 1;
}

.sec-01-nav .sec-01-nav__overlay-phone {
  color: var(--text-on-ink-dim);
  font-weight: 600;
  font-size: 1.1rem;
  text-decoration: none;
}

/* Body scroll lock while the mobile overlay is open (state class set by js/sections/01-nav.js) */
body.sec-01-nav-lock {
  overflow: hidden;
}

/* --- Reduced motion: no slide/stagger, just fade --- */
html.reduced-motion .sec-01-nav .sec-01-nav__overlay-link,
html.reduced-motion .sec-01-nav .sec-01-nav__toggle-line,
html.reduced-motion .sec-01-nav .sec-01-nav__overlay {
  transition-duration: 1ms;
  transform: none;
}
html.reduced-motion .sec-01-nav .sec-01-nav__overlay.is-open .sec-01-nav__overlay-link {
  transition-delay: 0ms;
}

/* --- Breakpoint: mobile nav --- */
@media (max-width: 900px) {
  .sec-01-nav .sec-01-nav__links,
  .sec-01-nav .sec-01-nav__phone,
  .sec-01-nav .sec-01-nav__cta {
    display: none;
  }
  .sec-01-nav .sec-01-nav__toggle {
    display: flex;
  }
}

@media (max-width: 480px) {
  .sec-01-nav .sec-01-nav__overlay-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --- Desktop dropdowns (Services / What We Treat) --- */
.sec-01-nav .sec-01-nav__item { position: relative; display: flex; align-items: center; }

.sec-01-nav .sec-01-nav__link--parent {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.sec-01-nav .sec-01-nav__caret {
  transition: transform 250ms var(--ease-out);
  opacity: 0.7;
}

.sec-01-nav .sec-01-nav__item:hover .sec-01-nav__caret,
.sec-01-nav .sec-01-nav__item:focus-within .sec-01-nav__caret {
  transform: rotate(180deg);
  opacity: 1;
}

.sec-01-nav .sec-01-nav__dropdown {
  position: absolute;
  top: 100%;
  left: -0.75rem;
  margin-top: 0.9rem;
  min-width: 230px;
  padding: 0.5rem;
  background: var(--ink-2);
  border: 1px solid hsl(0 0% 100% / 0.1);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), visibility 220ms;
  z-index: 5;
}

/* Invisible hover bridge across the gap between link and panel */
.sec-01-nav .sec-01-nav__dropdown::before {
  content: "";
  position: absolute;
  top: -0.95rem;
  left: 0;
  right: 0;
  height: 1rem;
}

.sec-01-nav .sec-01-nav__item:hover .sec-01-nav__dropdown,
.sec-01-nav .sec-01-nav__item:focus-within .sec-01-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sec-01-nav .sec-01-nav__dropdown-link {
  display: block;
  padding: 0.55rem 0.85rem;
  border-radius: 10px;
  color: var(--text-on-ink-dim);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out);
}

.sec-01-nav .sec-01-nav__dropdown-link:hover,
.sec-01-nav .sec-01-nav__dropdown-link:focus-visible {
  background: hsl(0 0% 100% / 0.07);
  color: var(--text-on-ink);
}

.sec-01-nav .sec-01-nav__dropdown-link--all {
  margin-top: 0.3rem;
  border-top: 1px solid hsl(0 0% 100% / 0.1);
  border-radius: 0 0 10px 10px;
  color: var(--ember);
  font-family: var(--font-display);
  font-weight: 600;
}

html.reduced-motion .sec-01-nav .sec-01-nav__dropdown,
html.reduced-motion .sec-01-nav .sec-01-nav__caret { transition: none; }

/* --- Mobile overlay groups (expandable sublists) --- */
/* overflow-y:auto + margin-block:auto on the links (below) lets the auto
   margins collapse to 0 and scroll instead of clipping when the expanded
   link list is taller than the viewport. But centering was still measured
   across the full fixed inset:0 box (0 -> 100% of the viewport), which
   includes the 76px the header bar sits over (z-index 210, above this
   overlay's 199) — on a viewport tall enough to fit the whole link list
   but not with room to spare above AND below it, that centering pushes
   the first link (About Us) up behind the header instead of clipping or
   scrolling. padding-top reserves the header's own height so centering
   only ever happens in the space actually below it. */
.sec-01-nav .sec-01-nav__overlay {
  overflow-y: auto;
  justify-content: flex-start;
  padding-top: calc(var(--nav-h) + clamp(2rem, 8vw, 4rem));
}
.sec-01-nav .sec-01-nav__overlay-links { margin-block: auto; }

.sec-01-nav .sec-01-nav__overlay-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.sec-01-nav .sec-01-nav__overlay-expand {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(0 0% 100% / 0.06);
  border: 1px solid hsl(0 0% 100% / 0.15);
  border-radius: 50%;
  color: var(--text-on-ink);
  cursor: pointer;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out),
    background-color 200ms var(--ease-out);
}

.sec-01-nav .sec-01-nav__overlay.is-open .sec-01-nav__overlay-expand {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 70ms + 80ms), calc(var(--i, 0) * 70ms + 80ms), 0ms;
}

.sec-01-nav .sec-01-nav__overlay-expand svg {
  transition: transform 250ms var(--ease-out);
}

.sec-01-nav .sec-01-nav__overlay-group.is-expanded .sec-01-nav__overlay-expand svg {
  transform: rotate(180deg);
}

.sec-01-nav .sec-01-nav__overlay-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms var(--ease-out);
}

.sec-01-nav .sec-01-nav__overlay-group.is-expanded .sec-01-nav__overlay-sub {
  grid-template-rows: 1fr;
}

.sec-01-nav .sec-01-nav__overlay-sub-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sec-01-nav .sec-01-nav__overlay-sub-inner a {
  padding: 0.55rem 0 0.55rem 1.25rem;
  color: var(--text-on-ink-dim);
  font-size: 1.05rem;
  font-weight: 500;
  text-decoration: none;
  border-left: 2px solid hsl(0 0% 100% / 0.12);
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}

.sec-01-nav .sec-01-nav__overlay-sub-inner a:hover,
.sec-01-nav .sec-01-nav__overlay-sub-inner a:focus-visible {
  color: var(--text-on-ink);
  border-left-color: var(--ember);
}

html.reduced-motion .sec-01-nav .sec-01-nav__overlay-sub,
html.reduced-motion .sec-01-nav .sec-01-nav__overlay-expand { transition: none; }

/* css/sections/02-hero.css */
/* ============================================================
   02-hero — scoped under .sec-02-hero
   ============================================================ */

.sec-02-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-h) + clamp(1.5rem, 4vw, 3.5rem));
  padding-bottom: clamp(4rem, 10vw, 7rem);
  overflow: clip;
}

/* --- Layered background --- */
.sec-02-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  isolation: isolate; /* contain mix-blend-mode to this layer only */
}

.sec-02-hero__photo {
  position: absolute;
  inset: -10% -5% -20% -5%;
  will-change: transform;
  animation: sec-02-hero-kenburns 28s ease-in-out infinite alternate;
}
.sec-02-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Duotone grade: strip color from the source photo, then let the tint
     layer below inject the accent hue via mix-blend-mode. */
  filter: grayscale(1) brightness(0.7) contrast(1.05);
}
@keyframes sec-02-hero-kenburns {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.06) translate3d(-1.5%, -1%, 0); }
}
html.reduced-motion .sec-02-hero__photo { animation: none; transform: none; }

/* Accent duotone tint — blends with the grayscale photo beneath it */
.sec-02-hero__tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    hsl(var(--accent-h) 60% 18% / 0.85),
    hsl(var(--accent-h) 30% 8% / 0.92)
  );
  mix-blend-mode: color;
}

.sec-02-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, hsl(190 40% 5% / 0.94) 0%, hsl(190 35% 6% / 0.72) 32%, hsl(190 30% 6% / 0.32) 58%, hsl(190 30% 6% / 0.18) 100%),
    linear-gradient(0deg, hsl(190 40% 4% / 0.9) 0%, hsl(190 35% 5% / 0.35) 32%, transparent 62%);
}

.sec-02-hero__glow {
  position: absolute;
  top: 10%;
  left: 55%;
  width: min(60vw, 900px);
  height: min(60vw, 900px);
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  filter: blur(10px);
  opacity: 0.7;
  animation: sec-02-hero-drift 16s var(--ease-out) infinite alternate;
}
@keyframes sec-02-hero-drift {
  from { transform: translate(-3%, -2%) scale(1); }
  to   { transform: translate(4%, 5%) scale(1.12); }
}
html.reduced-motion .sec-02-hero__glow { animation: none; }

/* --- Content row (left copy column + right figure column) --- */
.sec-02-hero__inner {
  position: relative;
  z-index: 1;
}

@media (min-width: 1024px) {
  .sec-02-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 58%) minmax(0, 42%);
    align-items: center;
    column-gap: clamp(2rem, 4vw, 4rem);
  }
}

.sec-02-hero__content {
  min-width: 0;
}

.sec-02-hero__eyebrow {
  margin-bottom: 1.4rem;
}

.sec-02-hero__headline {
  margin: 0 0 1.4rem;
  max-width: 18ch;
}

.sec-02-hero__line {
  display: block;
}

.sec-02-hero__line--rotator {
  color: var(--accent-soft);
}

/* Rotating word: sizer establishes intrinsic width from the widest option */
.sec-02-hero__rotator {
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  color: var(--ember);
}
.sec-02-hero__rotator-sizer {
  visibility: hidden;
  display: grid;
}
.sec-02-hero__rotator-sizer span {
  grid-area: 1 / 1;
}
.sec-02-hero__rotator-word {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  opacity: 1;
  transform: translateY(0);
  will-change: transform, opacity;
}
.sec-02-hero__rotator-word.is-leaving {
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
  opacity: 0;
  transform: translateY(0.35em);
}
.sec-02-hero__rotator-word.is-entering {
  transition: opacity 650ms cubic-bezier(0.22, 1, 0.36, 1), transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 1;
  transform: translateY(0);
}
html.reduced-motion .sec-02-hero__rotator-word {
  transition: none;
}

.sec-02-hero__line--static {
  color: var(--white);
}

.sec-02-hero__word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  margin-right: 0.28em;
}
.sec-02-hero__word {
  display: inline-block;
  transform: translateY(100%);
  transition: transform 700ms var(--ease-out);
}
html.is-loaded .sec-02-hero__word-wrap:nth-of-type(1) .sec-02-hero__word { transition-delay: 260ms; }
html.is-loaded .sec-02-hero__word-wrap:nth-of-type(2) .sec-02-hero__word { transition-delay: 340ms; }
html.is-loaded .sec-02-hero__word { transform: translateY(0); }
html.reduced-motion .sec-02-hero__word { transform: none; transition: none; }

.sec-02-hero__subhead {
  max-width: 46ch;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  color: var(--text-on-ink-dim);
  margin-bottom: clamp(1.8rem, 3vw, 2.4rem);
}

.sec-02-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: clamp(2.2rem, 4vw, 3rem);
}

/* --- Google rating chip --- */
.sec-02-hero__rating {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--white);
  color: var(--text-on-bone);
  border-radius: var(--radius-pill);
  padding: 0.7rem 1.25rem 0.7rem 0.75rem;
  box-shadow: var(--shadow-lift);
  animation: sec-02-hero-float 6s ease-in-out infinite;
  will-change: transform;
}
@keyframes sec-02-hero-float {
  0%, 100% { transform: translateY(-4px); }
  50% { transform: translateY(4px); }
}
html.reduced-motion .sec-02-hero__rating { animation: none; }

.sec-02-hero__rating-badge {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  background: var(--bone);
  border-radius: 50%;
  flex-shrink: 0;
}

.sec-02-hero__rating-text {
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
}
.sec-02-hero__rating-text strong {
  color: var(--text-on-bone);
  font-family: var(--font-display);
  font-weight: 700;
}
.sec-02-hero__rating-dot {
  margin: 0 0.15rem;
  color: var(--text-on-bone-dim);
}

/* --- Right visual column: duotone portrait in an arch frame --- */
.sec-02-hero__figure {
  display: none; /* desktop-only composition; mobile hero is unchanged */
}

@media (min-width: 1024px) {
  .sec-02-hero__figure {
    /* In-flow grid child: vertically centered against the headline/copy column */
    display: block;
    position: relative;
    align-self: center;
    justify-self: center;
    width: min(340px, 100%);
  }

  .sec-02-hero__figure-glow {
    position: absolute;
    inset: -22% -30%;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 72%);
    filter: blur(30px);
    opacity: 0.8;
  }

  .sec-02-hero__figure-ring {
    position: absolute;
    inset: -14px;
    z-index: 1;
    border: 1.5px solid hsl(var(--accent-h) 70% 62% / 0.4);
    border-radius: 999px 999px 32px 32px;
    transform: translate(16px, 20px);
    pointer-events: none;
  }

  .sec-02-hero__figure-frame {
    position: relative;
    z-index: 2;
    width: 100%;
    aspect-ratio: 7 / 9;
    border-radius: 999px 999px 24px 24px;
    overflow: hidden;
    box-shadow: var(--shadow-lift);
  }

  .sec-02-hero__figure-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) brightness(0.78) contrast(1.05);
    transform: scale(1.02);
    transition: filter 550ms var(--ease-out), transform 550ms var(--ease-out);
  }

  .sec-02-hero__figure-tint {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      165deg,
      hsl(var(--accent-h) 60% 20% / 0.75),
      hsl(var(--accent-h) 35% 10% / 0.85)
    );
    mix-blend-mode: color;
    transition: opacity 550ms var(--ease-out);
  }

  /* Warm slightly on hover — less tinted, a touch of life comes back in */
  .sec-02-hero__figure:hover .sec-02-hero__figure-img,
  .sec-02-hero__figure:focus-within .sec-02-hero__figure-img {
    filter: grayscale(0.5) brightness(0.92) contrast(1.02);
    transform: scale(1.05);
  }
  .sec-02-hero__figure:hover .sec-02-hero__figure-tint,
  .sec-02-hero__figure:focus-within .sec-02-hero__figure-tint {
    opacity: 0.6;
  }

  /* --- Docked chips: rating (lower-left of frame) + openings (upper-right) --- */
  .sec-02-hero__chip {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--white);
    color: var(--text-on-bone);
    border-radius: var(--radius-pill);
    padding: 0.55rem 0.95rem 0.55rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: var(--shadow-lift);
    will-change: transform;
  }
  .sec-02-hero__chip-icon {
    color: var(--accent-strong);
    flex-shrink: 0;
  }

  .sec-02-hero__chip--openings {
    top: clamp(-0.75rem, -2vw, -0.25rem);
    right: clamp(-1rem, -3vw, -0.4rem);
    animation: sec-02-hero-float-b 7s ease-in-out infinite;
  }
  @keyframes sec-02-hero-float-b {
    0%, 100% { transform: translateY(3px); }
    50% { transform: translateY(-5px); }
  }
  html.reduced-motion .sec-02-hero__chip--openings { animation: none; }

  /* Move the Google rating chip out of the copy column and dock it onto
     the frame's lower-left edge. */
  .sec-02-hero__rating {
    margin-top: clamp(-1.5rem, -3vw, -0.5rem);
    margin-left: clamp(0px, 4vw, 3rem);
    margin-right: clamp(-14rem, -16vw, -10rem);
  }
}

/* --- Curved bottom divider --- */
.sec-02-hero__divider {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(50px, 8vw, 110px);
  z-index: 1;
  pointer-events: none;
}

/* --- Layout: rating chip overlaps photo edge on tablet (figure not shown yet) --- */
@media (min-width: 900px) and (max-width: 1023px) {
  .sec-02-hero__rating {
    margin-left: clamp(0px, 4vw, 3rem);
  }
}

@media (max-width: 640px) {
  .sec-02-hero__headline { max-width: 100%; }
  .sec-02-hero__cta { flex-direction: column; align-items: stretch; }
  .sec-02-hero__cta .btn { width: 100%; }
  .sec-02-hero__rating { margin-top: 0.5rem; }
}

/* css/sections/03-trust.css */
/* ============================================================
   03-trust — scoped under .sec-03-trust
   Chip marquee, tilted -2deg on desktop, straightens ≤820px.
   ============================================================ */

.sec-03-trust {
  background: var(--bone);
  padding-block: clamp(2.25rem, 1.6rem + 2vw, 3.25rem);
  border-top: 1px solid var(--line-bone);
  border-bottom: 1px solid var(--line-bone);
  overflow: hidden;
  position: relative;
}

.sec-03-trust__inner {
  width: 100%;
}

.sec-03-trust__marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}

.sec-03-trust__track {
  --marquee-dur: 34s;
  --marquee-gap: 0.85rem;
}

/* --- Pill chips --- */
.sec-03-trust__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  background: var(--white);
  border: 1px solid var(--line-bone);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-soft);
  padding: 0.55rem 1.1rem;
}

.sec-03-trust__chip--logo {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-on-bone);
}

.sec-03-trust__chip--badge {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-on-bone);
}

.sec-03-trust__icon {
  width: 15px;
  height: 15px;
  fill: var(--accent);
  flex-shrink: 0;
}
.sec-03-trust__icon--star {
  fill: var(--ember);
}

/* --- Accent star-cluster flourish between chips --- */
.sec-03-trust__stars {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--ember);
  padding-inline: 0.15rem;
}

@media (max-width: 820px) {
  .sec-03-trust__marquee {
    transform: none;
  }
}

@media (max-width: 640px) {
  .sec-03-trust__chip--logo,
  .sec-03-trust__chip--badge {
    font-size: 0.78rem;
  }
  .sec-03-trust__chip {
    padding: 0.5rem 0.9rem;
  }
}

/* css/sections/04-conditions.css */
/* ============================================================
   04-conditions — body model + always-visible condition cards
   Every selector scoped under .sec-04-conditions.
   ============================================================ */

.sec-04-conditions {
  background: radial-gradient(120% 85% at 50% 0%, #fbf9f3 0%, var(--bone) 50%, #eee8db 100%);
  /* .bm-model__glow bleeds past its own box on purpose (inset: -14%) for
     a soft radial glow behind the model. Doesn't overflow at every
     viewport width, but nothing stops it from doing so at others —
     same class of bug fixed in 00-interior-hero.css and
     50-wwt-bodymap.css (its own bodymap has the identical glow). */
  overflow: clip;
}

/* --- Layout: mobile-first single column, model → left cards → right cards --- */
.sec-04-conditions .bm-layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "model" "left" "right";
  gap: clamp(2rem, 5vw, 3rem);
  align-items: start;
}

@media (min-width: 900px) {
  .sec-04-conditions .bm-layout {
    grid-template-columns: 1fr minmax(260px, 330px) 1fr;
    grid-template-areas: "left model right";
    align-items: center;
    gap: clamp(1.5rem, 3vw, 3rem);
  }
}

/* --- Body model + dots --- */
.sec-04-conditions .bm-model {
  grid-area: model;
  position: relative;
  width: 100%;
  max-width: 260px;
  margin-inline: auto;
}

@media (min-width: 900px) {
  .sec-04-conditions .bm-model {
    max-width: 330px;
  }
}

.sec-04-conditions .bm-model__glow {
  position: absolute;
  inset: -14%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, var(--accent-soft), transparent 68%);
  filter: blur(28px);
  pointer-events: none;
}

.sec-04-conditions .bm-model img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto; /* the img carries width/height attrs — without this it renders stretched */
  display: block;
  border-radius: 20px;
  box-shadow: var(--shadow-lift);
  filter: grayscale(1) contrast(1.04);
}

/* Accent-duotone tint over the model — tracks --accent so the render
   re-skins with the client's brand instead of shipping the raw asset look */
.sec-04-conditions .bm-model__tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 20px;
  background: linear-gradient(170deg, hsl(var(--accent-h) 55% 62% / 0.5), hsl(var(--accent-h) 65% 30% / 0.55));
  mix-blend-mode: color;
  pointer-events: none;
}

/* --- Tap hint chip (dismisses permanently on first interaction) --- */
.sec-04-conditions .bm-hint {
  position: absolute;
  z-index: 4;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--white);
  color: var(--accent-strong);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  pointer-events: none;
  animation: bm-hint-bob 2.5s ease-in-out infinite;
  transition: opacity 300ms var(--ease-out);
}

.sec-04-conditions .bm-hint.is-dismissed {
  opacity: 0;
}

@keyframes bm-hint-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-6px); }
}

html.reduced-motion .sec-04-conditions .bm-hint {
  animation: none;
}

/* --- Active region glow: soft accent halo behind the active dot --- */
.sec-04-conditions .bm-active-glow {
  position: absolute;
  z-index: 1;
  width: 90px;
  height: 90px;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow), transparent 70%);
  filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms var(--ease-out);
}

.sec-04-conditions .bm-active-glow.is-visible {
  opacity: 1;
}

html.reduced-motion .sec-04-conditions .bm-active-glow {
  transition: none;
}

html.reduced-motion .sec-04-conditions .bm-active-glow.is-visible {
  opacity: 0.55;
}

.sec-04-conditions .bm-dot {
  position: absolute;
  z-index: 2;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--white);
  color: var(--accent-strong);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.7rem;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: background 250ms var(--ease-out), color 250ms var(--ease-out),
    border-color 250ms var(--ease-out), transform 250ms var(--ease-spring);
}

/* 44px invisible tap target around the visible dot */
.sec-04-conditions .bm-dot::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}

.sec-04-conditions .bm-dot__ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  opacity: 0;
}

.sec-04-conditions .bm-dot:hover,
.sec-04-conditions .bm-dot:focus-visible {
  transform: translate(-50%, -50%) scale(1.08);
}

.sec-04-conditions .bm-dot:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.sec-04-conditions .bm-dot.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
  transform: translate(-50%, -50%) scale(1.18);
}

/* --- Idle breathing loop: attention cue on one dot at a time, pre-interaction only --- */
.sec-04-conditions .bm-dot.is-breathing {
  animation: bm-breathe 1.6s ease-in-out;
}

@keyframes bm-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: var(--shadow-soft); }
  50% { transform: translate(-50%, -50%) scale(1.12); box-shadow: var(--shadow-soft), 0 0 0 8px var(--accent-glow); }
}

html.reduced-motion .sec-04-conditions .bm-dot.is-breathing {
  animation: none;
}

.sec-04-conditions .bm-dot.is-active .bm-dot__ring {
  opacity: 1;
  animation: bm-pulse 1.8s ease-out infinite;
}

@keyframes bm-pulse {
  from { transform: scale(0.55); opacity: 0.8; }
  to { transform: scale(1.9); opacity: 0; }
}

html.reduced-motion .sec-04-conditions .bm-dot.is-active .bm-dot__ring {
  animation: none;
  opacity: 0.45;
  transform: scale(1);
}

/* --- Condition cards (always visible, both columns) --- */
.sec-04-conditions .bm-cards {
  display: grid;
  gap: clamp(0.9rem, 1.8vw, 1.15rem);
  align-content: center;
}

.sec-04-conditions .bm-cards--left { grid-area: left; }
.sec-04-conditions .bm-cards--right { grid-area: right; }

.sec-04-conditions .bm-card {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  border: 1.5px solid transparent;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  transition: border-color 250ms var(--ease-out), box-shadow 250ms var(--ease-out),
    transform 300ms var(--ease-spring);
}

.sec-04-conditions .bm-card.is-active {
  border-color: var(--accent);
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
}

.sec-04-conditions .bm-card__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.sec-04-conditions .bm-card__num {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 250ms var(--ease-out), color 250ms var(--ease-out);
}

.sec-04-conditions .bm-card.is-active .bm-card__num {
  background: var(--accent);
  color: var(--accent-on);
}

.sec-04-conditions .bm-card h3 {
  font-size: 1.05rem;
  margin: 0;
}

.sec-04-conditions .bm-card p {
  margin-top: 0.5rem;
  color: var(--text-on-bone-dim);
  font-size: 0.92rem;
  line-height: 1.55;
}

.sec-04-conditions .bm-card__link {
  margin-top: 0.65rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--accent-strong);
  text-decoration: none;
  transition: gap 200ms var(--ease-spring), color 200ms var(--ease-out);
}

.sec-04-conditions .bm-card__link:hover {
  gap: 0.65rem;
  color: var(--accent);
}

/* --- Bottom CTA --- */
.sec-04-conditions .bm-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

html.reduced-motion .sec-04-conditions .bm-dot,
html.reduced-motion .sec-04-conditions .bm-card {
  transition: none;
}

/* css/sections/05-services.css */
/* ============================================================
   05-services — bento grid, bone section.
   Scoped under .sec-05-services. See section contract in
   docs/superpowers/specs/2026-07-13-modern-momentum-home-design.md
   ============================================================ */

.sec-05-services {
  background: radial-gradient(120% 85% at 50% 0%, #fbf9f3 0%, var(--bone) 50%, #eee8db 100%);
}

.sec-05-services__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: clamp(260px, 22vw, 340px) clamp(260px, 22vw, 340px) clamp(190px, 15vw, 240px);
  gap: var(--sp-gap);
}

.sec-05-services__tile {
  position: relative;
  display: block;
  grid-column: 1 / 13;
  border-radius: var(--radius-card);
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  color: var(--white);
  box-shadow: var(--shadow-soft);
  transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out);
}

.sec-05-services__tile:hover,
.sec-05-services__tile:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}

.sec-05-services__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.85) contrast(1.05) brightness(0.85);
  transform: scale(1.02);
  transition: filter 600ms var(--ease-out), transform 900ms var(--ease-out);
}

.sec-05-services__tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: hsl(var(--accent-h) 70% 30% / 0.5);
  mix-blend-mode: color;
  z-index: 1;
  transition: opacity 500ms var(--ease-out);
}

.sec-05-services__tile:hover .sec-05-services__photo,
.sec-05-services__tile:focus-visible .sec-05-services__photo {
  filter: grayscale(0) contrast(1) brightness(0.92);
  transform: scale(1.08);
}

.sec-05-services__tile:hover::before,
.sec-05-services__tile:focus-visible::before {
  opacity: 0;
}

.sec-05-services__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, hsl(200 30% 6% / 0.88) 0%, hsl(200 30% 6% / 0.25) 55%, transparent 85%);
}

.sec-05-services__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  padding: 1.5rem 1.6rem;
  justify-content: flex-end;
}

.sec-05-services__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h4);
  letter-spacing: -0.01em;
}

.sec-05-services__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.sec-05-services__tag {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: hsl(0 0% 100% / 0.92);
  background: hsl(0 0% 100% / 0.16);
  border: 1px solid hsl(0 0% 100% / 0.32);
  border-radius: var(--radius-pill);
  padding: 0.28rem 0.7rem;
  white-space: nowrap;
  backdrop-filter: blur(6px);
}

.sec-05-services__desc {
  font-size: 0.92rem;
  line-height: 1.45;
  color: hsl(0 0% 100% / 0.82);
  max-width: 34ch;
}

.sec-05-services__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-top: 0.35rem;
  border-radius: var(--radius-pill);
  background: hsl(0 0% 100% / 0.14);
  border: 1px solid hsl(0 0% 100% / 0.28);
  font-size: 1rem;
  transition: transform 350ms var(--ease-spring), background-color 300ms var(--ease-out);
}

.sec-05-services__tile:hover .sec-05-services__arrow,
.sec-05-services__tile:focus-visible .sec-05-services__arrow {
  transform: translateX(6px);
  background: var(--accent);
}

/* --- Bento placement (desktop) --- */
@media (min-width: 861px) {
  .sec-05-services__tile--pt {
    grid-column: 1 / 8;
    grid-row: 1 / 3;
  }
  .sec-05-services__tile--sports {
    grid-column: 8 / 13;
    grid-row: 1 / 2;
  }
  .sec-05-services__tile--needling {
    grid-column: 8 / 11;
    grid-row: 2 / 3;
  }
  .sec-05-services__tile--massage {
    grid-column: 11 / 13;
    grid-row: 2 / 3;
    /* intentional offset to break perfect bento alignment */
    margin-top: 1.75rem;
  }
  .sec-05-services__tile--massage .sec-05-services__body {
    padding: 1.25rem 1.1rem;
    gap: 0.4rem;
  }
  .sec-05-services__tile--massage .sec-05-services__tags {
    gap: 0.3rem;
  }
  .sec-05-services__tile--massage .sec-05-services__tag {
    font-size: 0.64rem;
    padding: 0.24rem 0.55rem;
  }
  .sec-05-services__tile--massage .sec-05-services__desc {
    font-size: 0.82rem;
    max-width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .sec-05-services__tile--perf {
    grid-column: 1 / 13;
    grid-row: 3 / 4;
  }

  .sec-05-services__tile--pt .sec-05-services__title {
    font-size: var(--fs-h3);
  }
  .sec-05-services__tile--pt .sec-05-services__body {
    padding: 2.25rem;
  }
  .sec-05-services__tile--perf .sec-05-services__body {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem 1.5rem;
  }
  .sec-05-services__tile--perf .sec-05-services__title {
    flex: 0 0 auto;
    order: 1;
  }
  .sec-05-services__tile--perf .sec-05-services__tags {
    flex: 0 0 auto;
    order: 2;
  }
  .sec-05-services__tile--perf .sec-05-services__desc {
    flex: 1 1 320px;
    max-width: 46ch;
    order: 3;
  }
  .sec-05-services__tile--perf .sec-05-services__arrow {
    order: 4;
    margin-left: auto;
  }
}

/* --- Mobile stack --- */
@media (max-width: 860px) {
  .sec-05-services__grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .sec-05-services__tile {
    grid-column: 1 / -1;
    height: 320px;
    order: 2;
  }
  .sec-05-services__tile--pt {
    height: 380px;
    order: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sec-05-services__tile,
  .sec-05-services__photo,
  .sec-05-services__tile::before,
  .sec-05-services__arrow {
    transition: none;
  }
}

.sec-05-services__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* css/sections/06-journey.css */
/* ============================================================
   06-journey — scroll-pinned 4-phase signature section.
   Scoped under .sec-06-journey. Desktop: sticky pin + crossfade
   driven by js/sections/06-journey.js. Mobile/reduced-motion:
   stacked cards, JS pinning logic does not engage (see guard).
   ============================================================ */

.sec-06-journey {
  /* Dark act: melts into 16-comebacks strip below (see elevation addendum) */
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink) 70%, #0a1418 100%);
  position: relative;
}

/* --- Wave divider: melts the services vignette's bottom edge (#eee8db)
   into this dark section — see css/sections/05-services.css background. */
.sec-06-journey__wave {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: clamp(32px, 4.5vw, 64px);
  pointer-events: none;
}

.sec-06-journey__head {
  /* Extra top padding clears the wave (max ~64px) so it never overlaps the eyebrow/H2 */
  padding-top: calc(var(--sp-section) + clamp(32px, 4.5vw, 64px));
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
  max-width: 46ch;
}
.sec-06-journey__head p:not(.eyebrow) {
  margin-top: 1rem;
  color: var(--text-on-ink-dim);
  max-width: 52ch;
}

/* --- Pin wrapper --- */
.sec-06-journey__pin-wrap {
  position: relative;
  height: 400vh;
}

.sec-06-journey__pin {
  position: sticky;
  top: var(--nav-h);
  height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* .sec-06-journey__inner sizing comes from the shared .container class —
   don't override its width or the pinned content goes full-bleed. */

/* --- Progress nav (dots + rail + status) --- */
.sec-06-journey__nav {
  /* positioned so the absolutely-placed rail anchors here, not the sticky pin */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
  max-width: 30rem;
}

.sec-06-journey__dots {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  padding: 0;
}

.sec-06-journey__dot-item { position: relative; z-index: 2; }

.sec-06-journey__rail {
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  top: 1.2rem; /* vertical center of the 2.4rem dots row */
  height: 2px;
  transform: translateY(-50%);
  background: hsl(0 0% 100% / 0.15);
  border-radius: 2px;
  overflow: hidden;
  z-index: 1;
}

.sec-06-journey__rail-fill {
  display: block;
  height: 100%;
  width: calc(var(--journey-fill, 0) * 100%);
  background: var(--ember);
  transition: width 500ms var(--ease-out);
}

.sec-06-journey__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radius-pill);
  border: 1px solid hsl(0 0% 100% / 0.25);
  background: var(--ink-2);
  color: var(--text-on-ink-dim);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out),
    border-color 300ms var(--ease-out), transform 300ms var(--ease-spring);
}
.sec-06-journey__dot:hover { border-color: var(--ember); }
.sec-06-journey__dot.is-active,
.sec-06-journey__dot[aria-current="true"] {
  background: var(--gold-btn);
  border-color: var(--gold-btn);
  color: var(--accent-on);
  transform: scale(1.08);
}

.sec-06-journey__status {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--text-on-ink-dim);
}
.sec-06-journey__status strong,
.sec-06-journey__status span { color: var(--text-on-ink); font-weight: 600; }

/* --- Stage --- */
.sec-06-journey__stage {
  position: relative;
  min-height: clamp(360px, 46vw, 480px);
}

.sec-06-journey__line { display: none; }

.sec-06-journey__phase {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  /* Top-align so the photo tracks the content block instead of sinking
     toward the vertical center of the tall pinned stage */
  align-items: start;
  gap: clamp(2rem, 5vw, 4rem);
}

.sec-06-journey__frame {
  margin-top: 1.25rem; /* optical alignment with the timeline chip / phase name */
}

.sec-06-journey__ghost {
  position: absolute;
  top: -0.35em;
  left: -0.02em;
  z-index: 0;
}

.sec-06-journey__content {
  position: relative;
  z-index: 1;
}

.sec-06-journey__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  margin-bottom: 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}
.sec-06-journey__chip-icon { flex-shrink: 0; }

.sec-06-journey__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 0.75rem;
}

.sec-06-journey__promise {
  color: var(--white);
  margin-bottom: 1.25rem;
}

.sec-06-journey__bullets {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  color: var(--text-on-ink-dim);
  max-width: 34ch;
}
.sec-06-journey__bullets li {
  position: relative;
  padding-left: 1.4rem;
  line-height: 1.5;
}
.sec-06-journey__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--ember);
}

.sec-06-journey__frame {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-lift);
  /* Capped so the photo's height roughly matches the text block — keeps the
     two columns reading as one even row instead of the photo dominating */
  max-width: 460px;
  justify-self: end;
  width: 100%;
}
.sec-06-journey__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Micro-CTA row (below pinned wrapper) --- */
.sec-06-journey__cta {
  padding-block: clamp(2.5rem, 4vw, 4rem) clamp(2rem, 3vw, 3rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.sec-06-journey__cta-text {
  color: var(--text-on-ink-dim);
  max-width: 36ch;
  font-size: var(--fs-body);
}
.sec-06-journey__cta-btn { color: var(--white); }

/* --- Desktop pinned crossfade --- */
/* html:not(.no-js) + [data-reveal] prefix/suffix so these strictly outrank
   base.css's `html:not(.no-js) [data-reveal].is-visible` (specificity 0,3,1).
   Without the html:not(.no-js) prefix this was only 0,2,0/0,3,0 - base won
   the tie and every revealed-but-inactive phase got forced to opacity:1,
   stacking all four phases visibly instead of crossfading one at a time. */
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  html:not(.no-js) .sec-06-journey .sec-06-journey__phase[data-reveal] {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(18px);
    pointer-events: none;
    transition: opacity 550ms var(--ease-out), transform 550ms var(--ease-out);
  }
  html:not(.no-js) .sec-06-journey .sec-06-journey__phase[data-reveal].is-active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* --- Mobile / reduced-motion: stacked cards, no pinning --- */
@media (max-width: 820px), (prefers-reduced-motion: reduce) {
  .sec-06-journey__pin-wrap { height: auto; }
  .sec-06-journey__pin {
    position: static;
    top: auto;
    height: auto;
    display: block;
    overflow: visible;
  }
  .sec-06-journey__nav { display: none; }

  .sec-06-journey__stage {
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 8vw, 3rem);
    min-height: 0;
    padding-left: 1.75rem;
  }

  .sec-06-journey__line {
    display: block;
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    left: 0.35rem;
    width: 2px;
    background: linear-gradient(to bottom, var(--ember), hsl(0 0% 100% / 0.12));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 900ms var(--ease-out);
  }
  .sec-06-journey__line.is-visible { transform: scaleY(1); }
  html.reduced-motion .sec-06-journey__line { transform: scaleY(1); transition: none; }

  .sec-06-journey__phase {
    position: relative;
    display: block;
    padding: 1.75rem 1.5rem;
    border-radius: var(--radius-card);
    background: var(--ink-2);
    border: 1px solid hsl(0 0% 100% / 0.08);
    overflow: hidden;
  }

  .sec-06-journey__ghost {
    top: -0.6rem;
    left: 0.5rem;
    font-size: clamp(4.5rem, 24vw, 7.5rem);
    opacity: 0.6;
  }

  .sec-06-journey__content { margin-bottom: 1.5rem; }
  .sec-06-journey__bullets { max-width: none; }

  .sec-06-journey__frame { aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce) {
  .sec-06-journey__dot,
  .sec-06-journey__rail-fill,
  .sec-06-journey__phase {
    transition: none;
  }
}

/* css/sections/07-results.css */
/* ============================================================
   07-results — dark stat interlude band
   All selectors scoped under .sec-07-results
   ============================================================ */

.sec-07-results {
  /* Dark act continues from 16-comebacks strip / 06-journey, returns to --ink */
  background: linear-gradient(180deg, #0a1418 0%, var(--ink) 45%);
  position: relative;
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  overflow: hidden;
}

/* --- drifting background glows --- */
.sec-07-results__glow {
  position: absolute;
  width: min(60vw, 620px);
  height: min(60vw, 620px);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.55;
  z-index: 0;
}
.sec-07-results__glow--one {
  top: -10%;
  left: -8%;
  background: radial-gradient(circle, var(--accent-glow), transparent 70%);
  animation: sec-07-drift-a 22s ease-in-out infinite;
}
.sec-07-results__glow--two {
  bottom: -18%;
  right: -6%;
  background: radial-gradient(circle, hsl(var(--accent-h) 70% 50% / 0.28), transparent 70%);
  animation: sec-07-drift-b 26s ease-in-out infinite;
}
@keyframes sec-07-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6%, 8%) scale(1.1); }
}
@keyframes sec-07-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-8%, -6%) scale(1.08); }
}
html.reduced-motion .sec-07-results__glow { animation: none; }

.sec-07-results__inner {
  position: relative;
  z-index: 1;
}

.sec-07-results__head {
  text-align: center;
  margin-bottom: clamp(2.5rem, 2rem + 3vw, 4rem);
}
.sec-07-results__head .eyebrow {
  justify-content: center;
  margin-bottom: 1rem;
}
.sec-07-results__head h2 {
  max-width: 20ch;
  margin-inline: auto;
}

/* --- stat grid --- */
.sec-07-results__statwrap {
  position: relative;
}

/* Canonical pulse-line motif, stretched behind the stat row at mid-height.
   Sits under the stat text (z-index) and draws its stroke on reveal
   (base.css handles the [data-reveal].is-visible draw transition). */
.sec-07-results__pulse {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: clamp(50px, 8vw, 90px);
  transform: translateY(-50%);
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}

.sec-07-results__stats {
  position: relative;
  z-index: 1;
  display: grid;
  /* minmax(0,1fr) so an unbroken value (e.g. an unreplaced placeholder token)
     can't force the track wider than the container */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  text-align: center;
}
@media (max-width: 560px) {
  .sec-07-results__stats {
    grid-template-columns: 1fr;
    gap: 2rem 1.25rem;
  }
}

.sec-07-results__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sec-07-results__tick {
  display: block;
  width: 2px;
  height: 1.5rem;
  margin-bottom: 0.9rem;
  background: var(--ember);
  border-radius: 2px;
}

.sec-07-results__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.5rem, 2.2rem + 5.5vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 0.6rem;
  max-width: 100%;
  overflow-wrap: anywhere;
  position: relative;
  z-index: 1;
  /* local halo so the pulse-line passing behind the numerals doesn't
     compete with legibility */
  text-shadow: 0 0 22px var(--ink), 0 0 14px var(--ink), 0 0 6px var(--ink);
}

.sec-07-results__value-star {
  font-size: 0.35em;
  color: var(--ember);
  vertical-align: 0.65em;
  margin-left: 0.1em;
}

.sec-07-results__label {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-on-ink-dim);
}

/* --- divider + trust line --- */
.sec-07-results__divider {
  border: none;
  border-top: 1px solid hsl(0 0% 100% / 0.12);
  margin: clamp(2.5rem, 2rem + 3vw, 4rem) 0 clamp(1.75rem, 1.5rem + 1.5vw, 2.5rem);
}

.sec-07-results__trust {
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-on-ink-dim);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}
.sec-07-results__star {
  color: var(--ember);
}
.sec-07-results__dot {
  color: hsl(0 0% 100% / 0.3);
}

/* css/sections/08-why.css */
/* ============================================================
   08-why — sticky photo collage + sequential differentiators
   All selectors scoped under .sec-08-why
   ============================================================ */

.sec-08-why {
  background: radial-gradient(120% 85% at 50% 0%, #fbf9f3 0%, var(--bone) 50%, #eee8db 100%);
  position: relative;
}

.sec-08-why__head {
  text-align: center;
  margin-inline: auto;
}
.sec-08-why__head .eyebrow { justify-content: center; }
.sec-08-why__head h2 { margin-inline: auto; }

.sec-08-why__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 2rem + 4vw, 6rem);
  align-items: start;
}

/* --- collage column (sticky on desktop) --- */
.sec-08-why__collage-col {
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
  align-self: start;
}

.sec-08-why__collage {
  position: relative;
  padding: 2.5rem 2rem 3.5rem 0;
}

.sec-08-why__frame {
  position: absolute;
  top: 3.5rem;
  right: -0.75rem;
  width: 62%;
  height: 58%;
  border: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  z-index: 0;
}

.sec-08-why__photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  position: relative;
}
.sec-08-why__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sec-08-why__photo--a {
  width: 82%;
  aspect-ratio: 900 / 680;
  z-index: 1;
}
.sec-08-why__photo--b {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52%;
  aspect-ratio: 620 / 480;
  z-index: 2;
  border: 6px solid var(--bone);
}

.sec-08-why__badge {
  position: absolute;
  left: -0.5rem;
  bottom: 0.5rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: var(--white);
  padding: 0.85rem 1.2rem;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lift);
}
.sec-08-why__badge strong {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--text-on-bone);
}
.sec-08-why__badge span {
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-strong);
  font-weight: 600;
}

/* --- differentiator list --- */
.sec-08-why__list {
  display: flex;
  flex-direction: column;
  gap: clamp(2.25rem, 1.75rem + 2vw, 3.5rem);
}

.sec-08-why__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 1.25rem;
  padding: 0.25rem 0;
  opacity: 0.55;
  transition: opacity 400ms var(--ease-out);
}
.sec-08-why__item.is-active {
  opacity: 1;
}

.sec-08-why__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--text-on-bone-dim);
  transition: color 400ms var(--ease-out);
}
.sec-08-why__item.is-active .sec-08-why__num {
  color: var(--accent);
}

.sec-08-why__title {
  margin-bottom: 0.5rem;
}
.sec-08-why__copy {
  color: var(--text-on-bone-dim);
  max-width: 46ch;
}

.sec-08-why__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 2px solid var(--line-bone);
  color: var(--accent);
  transition: border-color 400ms var(--ease-out);
}
.sec-08-why__item.is-active .sec-08-why__check {
  border-color: var(--accent);
}
.sec-08-why__check-path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 500ms var(--ease-out);
}
.sec-08-why__item.is-active .sec-08-why__check-path {
  stroke-dashoffset: 0;
}

/* --- responsive --- */
@media (max-width: 900px) {
  .sec-08-why__grid {
    grid-template-columns: 1fr;
  }
  .sec-08-why__collage-col {
    position: static;
    top: auto;
    margin-bottom: 1rem;
  }
  .sec-08-why__collage {
    max-width: 420px;
    margin-inline: auto;
  }
  .sec-08-why__item {
    opacity: 1;
  }
  .sec-08-why__num {
    color: var(--accent);
  }
  .sec-08-why__check {
    border-color: var(--accent);
  }
  .sec-08-why__check-path {
    stroke-dashoffset: 0;
  }
}

html.reduced-motion .sec-08-why__photo {
  transform: none !important;
}

/* css/sections/09-team.css */
/* ============================================================
   09-team — team cards with duotone→color portrait hover + tilt
   All selectors scoped under .sec-09-team
   ============================================================ */

.sec-09-team__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-gap);
}

@media (max-width: 860px) {
  .sec-09-team__grid { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; }
}

.sec-09-team__card {
  background: var(--white);
  border-radius: var(--radius-card);
  overflow: visible;
  box-shadow: var(--shadow-soft);
  padding: 1.5rem 1.5rem 0;
  transition: box-shadow 400ms var(--ease-out), transform 400ms var(--ease-out);
  transform-style: preserve-3d;
  will-change: transform;
}

.sec-09-team__card:hover,
.sec-09-team__card:focus-within {
  box-shadow: var(--shadow-lift);
}

/* --- Arched signature frame: media wrapper stays overflow-visible so
   the offset ring never clips, even under the card's tilt transform --- */
.sec-09-team__media {
  position: relative;
  overflow: visible;
}

.sec-09-team__ring {
  position: absolute;
  inset: 0;
  border: 2px solid var(--accent);
  border-radius: 999px 999px var(--radius-card) var(--radius-card);
  background: none;
  opacity: 0.25;
  transform: translate(10px, 10px) scale(1);
  transition: opacity 300ms ease, transform 300ms ease;
  pointer-events: none;
}

.sec-09-team__card:hover .sec-09-team__ring,
.sec-09-team__card:focus-within .sec-09-team__ring {
  opacity: 1;
  transform: translate(10px, 10px) scale(1.02);
}

.sec-09-team__photo-wrap {
  position: relative;
  z-index: 1;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  border-radius: 999px 999px var(--radius-card) var(--radius-card);
  background: var(--bone-2);
}

.sec-09-team__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.85) contrast(1.05) brightness(0.98);
  transition: filter 600ms var(--ease-out), transform 600ms var(--ease-out);
  transform: scale(1.02);
}

.sec-09-team__photo-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--accent-glow), transparent 65%);
  mix-blend-mode: multiply;
  opacity: 0.6;
  transition: opacity 600ms var(--ease-out);
  pointer-events: none;
}

.sec-09-team__card:hover .sec-09-team__photo,
.sec-09-team__card:focus-within .sec-09-team__photo {
  filter: grayscale(0) contrast(1) brightness(1);
  transform: scale(1.06);
}

.sec-09-team__card:hover .sec-09-team__photo-wrap::after,
.sec-09-team__card:focus-within .sec-09-team__photo-wrap::after {
  opacity: 0;
}

.sec-09-team__body {
  padding: 1.5rem 0 1.8rem;
}

.sec-09-team__name {
  font-size: var(--fs-h4);
  margin-bottom: 0.2rem;
}

.sec-09-team__role {
  font-size: var(--fs-small);
  color: var(--text-on-bone-dim);
  margin-bottom: 0.9rem;
}

.sec-09-team__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.sec-09-team__chip {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.sec-09-team__quote {
  font-style: italic;
  font-size: 0.95rem;
  color: var(--text-on-bone-dim);
  border-top: 1px solid var(--line-bone);
  padding-top: 0.9rem;
}

.sec-09-team__ask {
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line-bone);
}

.sec-09-team__ask-label {
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 0.3rem;
}

.sec-09-team__ask-text {
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--text-on-bone-dim);
}

.sec-09-team__book {
  margin-top: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent-strong);
  text-decoration: none;
  transition: gap 200ms var(--ease-spring), color 200ms var(--ease-out);
}

.sec-09-team__book-arrow {
  transition: transform 300ms var(--ease-spring);
}

.sec-09-team__book:hover,
.sec-09-team__book:focus-visible {
  gap: 0.65rem;
  color: var(--accent);
}

.sec-09-team__book:hover .sec-09-team__book-arrow,
.sec-09-team__book:focus-visible .sec-09-team__book-arrow {
  transform: translateX(4px);
}

.sec-09-team__cta {
  margin-top: clamp(2rem, 4vw, 3rem);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .sec-09-team__card,
  .sec-09-team__photo,
  .sec-09-team__photo-wrap::after,
  .sec-09-team__ring,
  .sec-09-team__book-arrow {
    transition: none;
  }
}

/* html.reduced-motion (site-wide JS flag) — ring stays static, no draw-in */
html.reduced-motion .sec-09-team__ring {
  opacity: 0.5;
  transform: translate(10px, 10px) scale(1);
  transition: none;
}

html.reduced-motion .sec-09-team__card:hover .sec-09-team__ring,
html.reduced-motion .sec-09-team__card:focus-within .sec-09-team__ring {
  opacity: 0.5;
  transform: translate(10px, 10px) scale(1);
}

/* css/sections/10-testimonials.css */
/* ============================================================
   10-testimonials — cinematic quote carousel + opposite-direction
   vertical review marquee ("Proof Wall"). Scoped under
   .sec-10-testimonials
   ============================================================ */

/* --- Carousel --- */
.sec-10-testimonials__carousel {
  max-width: 48rem;
  margin: 0 auto clamp(3.5rem, 6vw, 5rem);
  text-align: center;
}

.sec-10-testimonials__viewport {
  position: relative;
  overflow: hidden;
  min-height: 15rem;
}

.sec-10-testimonials__track {
  position: relative;
  display: block;
}

.sec-10-testimonials__slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  pointer-events: none;
}

.sec-10-testimonials__slide.is-active {
  position: relative;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.sec-10-testimonials__slide.is-prev {
  transform: translateX(-24px);
}

.sec-10-testimonials__glyph {
  font-family: var(--font-quote);
  font-size: clamp(3.5rem, 4vw, 5.5rem);
  line-height: 0.6;
  color: var(--ember);
  opacity: 0.85;
}

.sec-10-testimonials__quote {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.35;
  margin: 0.5rem 0 1.5rem;
  max-width: 42ch;
}

.sec-10-testimonials__stars {
  color: var(--ember);
  letter-spacing: 0.15em;
  margin-bottom: 0.6rem;
  font-size: 0.95rem;
}

.sec-10-testimonials__attr {
  color: var(--text-on-ink-dim);
  font-size: 0.9rem;
}

.sec-10-testimonials__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 2rem;
}

.sec-10-testimonials__arrow {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid hsl(0 0% 100% / 0.2);
  background: transparent;
  color: var(--text-on-ink);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 250ms var(--ease-out), border-color 250ms var(--ease-out), transform 250ms var(--ease-spring);
}

.sec-10-testimonials__arrow:hover {
  background: hsl(0 0% 100% / 0.1);
  border-color: var(--ember);
  transform: translateY(-2px);
}

.sec-10-testimonials__dots {
  display: flex;
  gap: 0.5rem;
}

.sec-10-testimonials__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  border: none;
  background: hsl(0 0% 100% / 0.25);
  cursor: pointer;
  padding: 0;
  transition: background 250ms var(--ease-out), transform 250ms var(--ease-out);
}

.sec-10-testimonials__dot.is-active {
  background: var(--ember);
  transform: scale(1.3);
}

/* --- Review wall --- */
.sec-10-testimonials__wall {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-gap);
  /* Static proof grid — every review fully visible, no masking, no motion.
     (Was a vertical marquee; users read it as cards being cut off.) */
  height: auto;
  overflow: visible;
  position: relative;
}

.sec-10-testimonials__col,
.sec-10-testimonials__col-track,
.sec-10-testimonials__col-set {
  display: contents;
}

.sec-10-testimonials__wall {
  align-items: start;
}

/* Duplicate marquee sets are dead weight in the static layout */
.sec-10-testimonials [data-marquee-dup] { display: none; }

@keyframes sec-10-marquee-up {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

@keyframes sec-10-marquee-down {
  from { transform: translateY(-50%); }
  to { transform: translateY(0); }
}

.sec-10-testimonials__review {
  background: #fbfbf9;
  color: var(--text-on-bone);
  border-radius: var(--radius-card);
  padding: 1.6rem 1.65rem;
  box-shadow: var(--shadow-soft);
}

.sec-10-testimonials__review-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.5rem;
}

.sec-10-testimonials__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.sec-10-testimonials__review-name {
  font-weight: 600;
  font-size: 0.9rem;
}

.sec-10-testimonials__review .sec-10-testimonials__stars {
  color: var(--ember);
  font-size: 0.8rem;
  margin-bottom: 0.4rem;
}

.sec-10-testimonials__snippet {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-on-bone);
  margin-bottom: 0.55rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sec-10-testimonials__via {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--text-on-bone-dim);
}

/* --- Google lockup --- */
.sec-10-testimonials__lockup {
  margin-top: clamp(2rem, 4vw, 3rem);
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.5rem;
}

.sec-10-testimonials__lockup-rating {
  font-weight: 600;
  color: var(--text-on-ink);
}

.sec-10-testimonials__lockup-link {
  color: var(--ember);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease-out);
}

.sec-10-testimonials__lockup-link:hover {
  border-color: currentColor;
}

/* --- Mobile: single column, first four reviews --- */
@media (max-width: 820px) {
  .sec-10-testimonials__wall {
    grid-template-columns: 1fr;
  }
  .sec-10-testimonials__col--b { display: none; }
}

/* --- Reduced motion: no auto-slide feel, no marquee scroll --- */
@media (prefers-reduced-motion: reduce) {
  .sec-10-testimonials__slide { transition: opacity 200ms linear; transform: none; }
  .sec-10-testimonials__col-track { animation: none !important; transform: none !important; }
  .sec-10-testimonials [data-marquee-dup] { display: none; }
}

html.reduced-motion .sec-10-testimonials__col-track { animation: none !important; transform: none !important; }
html.reduced-motion .sec-10-testimonials [data-marquee-dup] { display: none; }
html.reduced-motion .sec-10-testimonials__slide { transition: opacity 200ms linear; transform: none; }

/* css/sections/11-insurance.css */
/* ============================================================
   11-insurance — scoped under .sec-11-insurance
   ============================================================ */

.sec-11-insurance {
  position: relative;
  background: radial-gradient(120% 85% at 50% 0%, #fbf9f3 0%, var(--bone) 50%, #eee8db 100%);
}

/* Slightly more compact than the default section rhythm */
.sec-11-insurance.section-pad {
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
}

/* --- Panel pair --- */
.sec-11-insurance__panels {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* Decorative accent blob tucked behind panel 1's corner */
.sec-11-insurance__accent {
  position: absolute;
  top: -2.5rem;
  left: -2.5rem;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--accent-soft);
  filter: blur(36px);
  opacity: 0.85;
  z-index: 0;
  pointer-events: none;
}

.sec-11-insurance__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
}

.sec-11-insurance__panel-title {
  margin-bottom: 0.6rem;
}

.sec-11-insurance__panel-lead {
  color: var(--text-on-bone-dim);
  margin-bottom: 1.6rem;
  max-width: 40ch;
}

/* --- Insurance tile grid --- */
.sec-11-insurance__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin-bottom: 1.6rem;
  /* Fill the panel's height (the benefits form makes both panels tall):
     rows stretch so the chips grow instead of leaving dead space */
  flex: 1;
  align-content: stretch;
}

.sec-11-insurance__chip {
  border: 1px solid var(--line-bone);
  border-radius: var(--radius-card);
  padding: 1.1rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 84px;
  background: var(--bone);
  transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out), border-color 240ms var(--ease-out), background-color 240ms var(--ease-out);
}
.sec-11-insurance__chip:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
  border-color: var(--accent);
  background: var(--white);
}
.sec-11-insurance__chip span {
  font-family: var(--font-display);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.04em;
  font-weight: 650;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  line-height: 1.15;
  color: var(--text-on-bone);
}

.sec-11-insurance__footnote {
  margin-top: auto;
  font-size: var(--fs-small);
  color: var(--text-on-bone-dim);
}
.sec-11-insurance__footnote a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: hsl(var(--accent-h) 60% 60% / 0.4);
  text-underline-offset: 2px;
}
.sec-11-insurance__footnote a:hover {
  text-decoration-color: currentColor;
}

/* --- Paperwork panel --- */
.sec-11-insurance__downloads {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-bottom: 1.6rem;
}

.sec-11-insurance__download {
  justify-content: flex-start;
  border-color: var(--line-bone);
  color: var(--text-on-bone);
  width: 100%;
}
.sec-11-insurance__download:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}
.sec-11-insurance__download-icon {
  flex-shrink: 0;
}

.sec-11-insurance__reassurance {
  margin-top: auto;
  font-size: var(--fs-small);
  color: var(--text-on-bone-dim);
}

@media (max-width: 860px) {
  .sec-11-insurance__panels {
    grid-template-columns: 1fr;
  }
  .sec-11-insurance__accent {
    display: none;
  }
}

/* --- Free benefits check form (replaces the paperwork panel) --- */
.sec-11-insurance__form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem 1rem;
  margin-bottom: 1.1rem;
}

@media (max-width: 560px) {
  .sec-11-insurance__form-grid { grid-template-columns: 1fr; }
}

.sec-11-insurance__field { display: flex; flex-direction: column; gap: 0.3rem; }
.sec-11-insurance__field--wide { grid-column: 1 / -1; }

.sec-11-insurance__field span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--text-on-bone);
}

.sec-11-insurance__field small {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text-on-bone-dim);
}

.sec-11-insurance__field input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1.5px solid var(--line-bone);
  border-radius: 12px;
  background: var(--bone);
  color: var(--text-on-bone);
  font-size: 0.95rem;
  transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}

.sec-11-insurance__field input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--white);
}

.sec-11-insurance__field input.is-invalid { border-color: #d64545; }

.sec-11-insurance__form-error {
  margin-bottom: 0.9rem;
  font-size: 0.85rem;
  color: #b03a3a;
}
.sec-11-insurance__form-error a { color: inherit; font-weight: 600; }

.sec-11-insurance__submit { width: 100%; }

.sec-11-insurance__form-success {
  padding: 1.25rem;
  border-radius: var(--radius-card);
  background: var(--accent-soft);
  border: 1.5px solid var(--accent);
}
.sec-11-insurance__form-success:focus { outline: none; }

.sec-11-insurance__success-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--accent-strong);
  margin-bottom: 0.35rem;
}
.sec-11-insurance__success-text {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-on-bone);
}

/* css/sections/12-booking.css */
/* ============================================================
   12-booking — scoped under .sec-12-booking
   ============================================================ */

.sec-12-booking {
  position: relative;
  overflow: clip;
}

/* --- Wave divider (extends hero's wave language; FAQ above is --bone) --- */
.sec-12-booking__wave {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: clamp(32px, 4.5vw, 64px);
  pointer-events: none;
  z-index: 0;
}

/* --- Drifting radial accent glow behind the form panel --- */
.sec-12-booking__glow {
  position: absolute;
  top: 8%;
  right: 8%;
  width: min(52vw, 780px);
  height: min(52vw, 780px);
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 68%);
  filter: blur(20px);
  opacity: 0.85;
  z-index: 0;
  animation: sec-12-booking-drift 24s var(--ease-out) infinite alternate;
}
@keyframes sec-12-booking-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-6%, 6%) scale(1.15); }
}
html.reduced-motion .sec-12-booking__glow { animation: none; }

.sec-12-booking__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

/* --- Left: info column --- */
.sec-12-booking__info {
  padding-top: clamp(0.5rem, 2vw, 1.5rem);
}

.sec-12-booking__heading {
  margin: 1rem 0 1.1rem;
  max-width: 14ch;
}

.sec-12-booking__lead {
  max-width: 42ch;
  color: var(--text-on-ink-dim);
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

.sec-12-booking__rows {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-bottom: 2rem;
}

.sec-12-booking__row {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.sec-12-booking__row-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: hsl(0 0% 100% / 0.06);
  border: 1px solid hsl(0 0% 100% / 0.1);
  color: var(--ember);
}

.sec-12-booking__row-text {
  padding-top: 0.5rem;
  font-size: 0.98rem;
}
.sec-12-booking__row-text strong {
  color: var(--white);
  font-family: var(--font-display);
  margin-right: 0.35em;
}

.sec-12-booking__row-link {
  display: block;
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
}
.sec-12-booking__row-link:hover { color: var(--ember); }

.sec-12-booking__row-sub {
  display: block;
  color: var(--text-on-ink-dim);
  font-size: 0.86rem;
}

.sec-12-booking__trust {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-on-ink);
}
.sec-12-booking__trust span[aria-hidden] { color: var(--ember); }

/* --- Right: form panel --- */
.sec-12-booking__panel-wrap {
  position: relative;
}

/* --- Response-time trust chip, docked to the panel's top edge --- */
.sec-12-booking__chip {
  position: absolute;
  top: 0;
  right: clamp(1.5rem, 4vw, 2.5rem);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: calc(100% - 3rem);
  background: var(--white);
  color: var(--text-on-bone);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-soft);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  line-height: 1.2;
  white-space: nowrap;
}
.sec-12-booking__chip-icon {
  flex-shrink: 0;
  color: var(--accent);
}
/* Dock the chip half-on/half-off the panel's top border without fighting
   the generic [data-reveal] rules (which set transform to none/28px).
   html:not(.no-js) prefix so this strictly outranks base.css's
   `html:not(.no-js) [data-reveal].is-visible` (specificity 0,3,1) - without
   it, base's `transform: none` won the tie and the chip dropped fully
   inside the panel instead of straddling its top border. */
html:not(.no-js) .sec-12-booking__chip[data-reveal] {
  transform: translateY(calc(-50% + 18px));
}
html:not(.no-js) .sec-12-booking__chip[data-reveal].is-visible {
  transform: translateY(-50%);
}
html.reduced-motion .sec-12-booking__chip[data-reveal] {
  transform: translateY(-50%);
}

.sec-12-booking__panel {
  position: relative;
  background: linear-gradient(160deg, hsl(190 28% 13% / 0.92), hsl(190 30% 8% / 0.92));
  border: 1px solid hsl(0 0% 100% / 0.09);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  box-shadow: var(--shadow-lift), 0 0 0 1px hsl(var(--accent-h) 70% 55% / 0.08) inset, 0 0 70px hsl(var(--accent-h) 70% 40% / 0.12);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

@keyframes sec-12-booking-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}
.sec-12-booking__panel.has-error { animation: sec-12-booking-shake 420ms var(--ease-out); }
html.reduced-motion .sec-12-booking__panel.has-error { animation: none; }

/* --- Progress --- */
.sec-12-booking__progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.sec-12-booking__progress-text {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-on-ink-dim);
}

.sec-12-booking__dots {
  display: flex;
  gap: 0.4rem;
}
.sec-12-booking__dot {
  width: 1.6rem;
  height: 5px;
  border-radius: var(--radius-pill);
  background: hsl(0 0% 100% / 0.14);
  transition: background 300ms var(--ease-out);
}
.sec-12-booking__dot.is-active { background: var(--ember); }
.sec-12-booking__dot.is-complete { background: hsl(var(--accent-h) 70% 55% / 0.65); }
html.reduced-motion .sec-12-booking__dot { transition: none; }

/* --- Honeypot --- */
.sec-12-booking__hp { position: absolute; left: -9999px; }

/* --- Steps --- */
.sec-12-booking__steps {
  min-height: 9.5rem;
}

.sec-12-booking__step {
  transition: transform 300ms var(--ease-out), opacity 300ms var(--ease-out);
}
.sec-12-booking__step[hidden] { display: none; }

.sec-12-booking__step.is-leaving-fwd  { transform: translateX(-26px); opacity: 0; }
.sec-12-booking__step.is-leaving-back { transform: translateX(26px);  opacity: 0; }
.sec-12-booking__step.is-entering-fwd  { transform: translateX(26px);  opacity: 0; }
.sec-12-booking__step.is-entering-back { transform: translateX(-26px); opacity: 0; }

html.reduced-motion .sec-12-booking__step {
  transition: none !important;
  transform: none !important;
}

.sec-12-booking__question {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--white);
  margin-bottom: 1rem;
}

.sec-12-booking__input {
  width: 100%;
  background: hsl(0 0% 100% / 0.05);
  border: 1.5px solid hsl(0 0% 100% / 0.16);
  border-radius: 14px;
  padding: 0.9rem 1.1rem;
  color: var(--white);
  font-size: 1.05rem;
  transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out);
}
.sec-12-booking__input::placeholder { color: hsl(190 15% 62%); }
.sec-12-booking__input:focus {
  outline: none;
  border-color: var(--ember);
  background: hsl(0 0% 100% / 0.08);
}
.sec-12-booking__input.is-invalid {
  border-color: #ff7b6b;
}
.sec-12-booking__input--textarea {
  resize: vertical;
  min-height: 5rem;
  font-family: var(--font-body);
}

.sec-12-booking__hint {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--text-on-ink-dim);
}

.sec-12-booking__error {
  margin-top: 0.5rem;
  min-height: 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #ff7b6b;
}

/* --- Step 5: summary --- */
.sec-12-booking__summary {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1.5rem;
}
.sec-12-booking__summary-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid hsl(0 0% 100% / 0.08);
}
.sec-12-booking__summary-label {
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-on-ink-dim);
}
.sec-12-booking__summary-value {
  color: var(--white);
  font-weight: 500;
  overflow-wrap: anywhere;
}
.sec-12-booking__edit {
  background: none;
  border: none;
  padding: 0.2rem 0.3rem;
  color: var(--ember);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sec-12-booking__edit:hover { color: var(--white); }

.sec-12-booking__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-on-ink-dim);
  margin-bottom: 1.5rem;
  cursor: pointer;
}

/* A2P consent checkbox: name="sms-consent" must never be removed (launch check) */
.sec-12-booking__consent-box {
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.15rem;
  accent-color: var(--accent);
  cursor: pointer;
}

.sec-12-booking__submit { width: 100%; }

/* --- Nav row --- */
.sec-12-booking__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.25rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

.sec-12-booking__back {
  background: none;
  border: none;
  color: var(--text-on-ink-dim);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 0.5rem 0.25rem;
  margin-right: auto;
  transition: color 200ms var(--ease-out);
}
.sec-12-booking__back:hover { color: var(--white); }
.sec-12-booking__back[hidden] { display: none; }

/* Step 5 has its own full-width submit button; JS hides the shared continue nav button on that step */
.sec-12-booking__continue[hidden] { display: none; }

/* --- Success state --- */
.sec-12-booking__success {
  position: relative;
  text-align: center;
  padding: clamp(1rem, 3vw, 2rem) 0;
  overflow: hidden;
}
.sec-12-booking__success[hidden] { display: none; }

.sec-12-booking__success-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* --- Confetti micro-burst (generated by JS, removed after ~1.4s) --- */
.sec-12-booking__confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.sec-12-booking__confetti-piece {
  position: absolute;
  top: -12px;
  width: 6px;
  height: 10px;
  border-radius: 2px;
  opacity: 1;
  animation: sec-12-booking-confetti-fall var(--fall-dur, 1.1s) ease-in var(--fall-delay, 0s) forwards;
}
@keyframes sec-12-booking-confetti-fall {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translate(var(--fall-x, 0), 160px) rotate(var(--fall-rot, 260deg)); opacity: 0; }
}
html.reduced-motion .sec-12-booking__confetti { display: none; }

.sec-12-booking__check {
  color: var(--ember);
  margin: 0 auto 1.25rem;
}
.sec-12-booking__check-circle {
  stroke-dasharray: 232;
  stroke-dashoffset: 232;
  animation: sec-12-booking-draw 700ms var(--ease-out) forwards;
}
.sec-12-booking__check-mark {
  stroke-dasharray: 64;
  stroke-dashoffset: 64;
  animation: sec-12-booking-draw 480ms var(--ease-out) 620ms forwards;
}
@keyframes sec-12-booking-draw {
  to { stroke-dashoffset: 0; }
}
html.reduced-motion .sec-12-booking__check-circle,
html.reduced-motion .sec-12-booking__check-mark {
  animation: none;
  stroke-dashoffset: 0;
}

.sec-12-booking__success-heading {
  color: var(--white);
  margin-bottom: 0.6rem;
}

.sec-12-booking__success-text {
  color: var(--text-on-ink-dim);
  max-width: 32ch;
  margin: 0 auto 1.5rem;
}

/* --- Mobile: single column, info condensed above panel --- */
@media (max-width: 900px) {
  .sec-12-booking__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .sec-12-booking__heading { max-width: 100%; }
  .sec-12-booking__lead { max-width: 100%; }
  .sec-12-booking__rows { margin-bottom: 1.5rem; }
  .sec-12-booking__glow { width: 90vw; height: 90vw; top: 0; right: -20%; }
}

@media (max-width: 560px) {
  .sec-12-booking__panel { padding: 1.5rem; }
  .sec-12-booking__summary-row {
    grid-template-columns: 1fr auto;
  }
  .sec-12-booking__summary-label { grid-column: 1 / -1; }
}

/* Below 480px the pill has no room to overlap the panel corner cleanly —
   drop it into normal flow, stacked above the panel. */
@media (max-width: 480px) {
  .sec-12-booking__panel-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .sec-12-booking__chip {
    position: static;
    max-width: 100%;
    white-space: normal;
    text-align: center;
    margin-bottom: 1rem;
  }
  .sec-12-booking__chip[data-reveal],
  .sec-12-booking__chip[data-reveal].is-visible,
  html.reduced-motion .sec-12-booking__chip[data-reveal] {
    transform: none;
  }
}

/* css/sections/13-location.css */
/* ============================================================
   13-location — scoped under .sec-13-location
   ============================================================ */

.sec-13-location {
  background: radial-gradient(120% 85% at 50% 0%, var(--bone) 0%, var(--bone-2) 55%, #e7e0d2 100%);
}

/* --- Location card array: auto-fit grid.
   One card fills the row (full-width split card); a second card
   drops the layout into a multi-card row automatically. --- */
.sec-13-location__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(560px, 1fr));
  gap: clamp(1.5rem, 3vw, 2rem);
}

.sec-13-location__card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

/* --- Map half with custom styled frame --- */
.sec-13-location__map {
  position: relative;
  display: flex;
  min-height: 380px;
  padding: 14px;
  background: var(--bone-2);
}
.sec-13-location__map::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px solid var(--accent-soft);
  border-radius: calc(var(--radius-card) + 4px);
  pointer-events: none;
  z-index: 2;
}
.sec-13-location__map iframe {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 352px;
  border: 0;
  border-radius: var(--radius-card);
  position: relative;
  z-index: 1;
}

/* --- Info half --- */
.sec-13-location__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.4rem;
  padding: clamp(1.75rem, 1.3rem + 2vw, 3rem);
}

.sec-13-location__name {
  margin-bottom: 0.1rem;
}

.sec-13-location__rows {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.sec-13-location__row {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.sec-13-location__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.sec-13-location__row a,
.sec-13-location__row span {
  padding-top: 0.45rem;
  font-weight: 500;
}
.sec-13-location__row a {
  text-decoration: none;
  color: var(--text-on-bone);
  transition: color 200ms var(--ease-out);
}
.sec-13-location__row a:hover {
  color: var(--accent);
}

.sec-13-location__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.4rem;
}

@media (max-width: 760px) {
  .sec-13-location__grid {
    grid-template-columns: 1fr;
  }
  .sec-13-location__card {
    grid-template-columns: 1fr;
  }
  .sec-13-location__map {
    min-height: 280px;
  }
  .sec-13-location__map iframe {
    min-height: 252px;
  }
}

/* css/sections/14-footer.css */
/* ============================================================
   Section 14 — Footer
   Slim conversion CTA bar + mega footer w/ ghost watermark on
   --ink. All selectors scoped under .sec-14-footer.
   ============================================================ */

.sec-14-footer {
  background: var(--ink);
  color: var(--text-on-ink);
  font-family: var(--font-body);
}

/* --- Slim CTA bar --- */
.sec-14-footer .sec-14-footer__cta {
  background: var(--ink-3);
}

.sec-14-footer .sec-14-footer__cta-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding-block: 1.35rem;
  text-align: center;
}

/* Pulse-line micro-delight: renders flat by default, "comes alive" on hover
   of the CTA bar or once it scrolls into view (data-reveal.is-visible). */
.sec-14-footer .sec-14-footer__cta-pulse {
  position: absolute;
  left: 0;
  top: 50%;
  width: 180px;
  height: 30px;
  transform: translateY(-50%);
  opacity: 0.7;
  pointer-events: none;
}

.sec-14-footer .sec-14-footer__cta-pulse path {
  stroke: hsl(0 0% 100% / 0.28);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  transform: scaleY(0.05);
  transition: transform 500ms var(--ease-out), stroke 500ms var(--ease-out);
}

.sec-14-footer .sec-14-footer__cta:hover .sec-14-footer__cta-pulse path,
.sec-14-footer .sec-14-footer__cta.is-visible .sec-14-footer__cta-pulse path {
  transform: scaleY(1);
  stroke: var(--ember);
}

html.reduced-motion .sec-14-footer .sec-14-footer__cta-pulse path {
  transform: scaleY(1);
  stroke: var(--ember);
  transition: none;
}

@media (max-width: 820px) {
  .sec-14-footer .sec-14-footer__cta-pulse { display: none; }
}

.sec-14-footer .sec-14-footer__cta-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  color: var(--text-on-ink);
  margin: 0;
}

.sec-14-footer .sec-14-footer__cta-btn {
  padding-block: 0.7rem;
  font-size: 0.9rem;
  flex-shrink: 0;
}

/* --- Mega footer --- */
.sec-14-footer .sec-14-footer__main {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-section);
}

.sec-14-footer .sec-14-footer__watermark {
  position: absolute;
  left: 50%;
  bottom: -0.18em;
  transform: translateX(-50%);
  width: max-content;
  max-width: 100vw;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4rem, 15vw, 13rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: hsl(0 0% 100% / 0.045);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  z-index: 0;
}

.sec-14-footer .sec-14-footer__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
}

.sec-14-footer .sec-14-footer__col {
  min-width: 0;
}

.sec-14-footer .sec-14-footer__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
  margin-bottom: 1.1rem;
}

.sec-14-footer .sec-14-footer__logo-img {
  height: 58px;
  width: auto;
  display: block;
}

.sec-14-footer .sec-14-footer__blurb {
  color: var(--text-on-ink-dim);
  max-width: 32ch;
  margin-bottom: 1.5rem;
}

.sec-14-footer .sec-14-footer__social {
  display: flex;
  gap: 0.65rem;
}

.sec-14-footer .sec-14-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: hsl(0 0% 100% / 0.06);
  color: var(--text-on-ink-dim);
  transition: background-color 220ms var(--ease-out), color 220ms var(--ease-out), transform 300ms var(--ease-spring);
}

.sec-14-footer .sec-14-footer__social-link svg {
  width: 18px;
  height: 18px;
}

.sec-14-footer .sec-14-footer__social-link:hover {
  background: var(--gold-btn);
  color: var(--accent-on);
  transform: translateY(-2px);
}

.sec-14-footer .sec-14-footer__heading {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-on-ink);
  margin-bottom: 1.1rem;
}

.sec-14-footer .sec-14-footer__list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.sec-14-footer .sec-14-footer__list a {
  color: var(--text-on-ink-dim);
  text-decoration: none;
  transition: color 200ms var(--ease-out);
}

.sec-14-footer .sec-14-footer__list a:hover {
  color: var(--text-on-ink);
}

.sec-14-footer .sec-14-footer__address {
  font-style: normal;
  color: var(--text-on-ink-dim);
  margin-bottom: 0.85rem;
  line-height: 1.5;
}

.sec-14-footer .sec-14-footer__contact-link {
  display: block;
  color: var(--text-on-ink-dim);
  text-decoration: none;
  margin-bottom: 0.4rem;
  transition: color 200ms var(--ease-out);
  word-break: break-word;
}

.sec-14-footer .sec-14-footer__contact-link:hover {
  color: var(--text-on-ink);
}

.sec-14-footer .sec-14-footer__hours {
  color: var(--text-on-ink-dim);
  white-space: pre-line;
  line-height: 1.6;
}

/* --- Bottom bar --- */
.sec-14-footer .sec-14-footer__bottom {
  border-top: 1px solid hsl(0 0% 100% / 0.08);
}

.sec-14-footer .sec-14-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 1.5rem;
  font-size: var(--fs-small);
  color: var(--text-on-ink-dim);
}

.sec-14-footer .sec-14-footer__copy a {
  color: var(--text-on-ink-dim);
  text-decoration: underline;
  text-decoration-color: hsl(0 0% 100% / 0.3);
  transition: color 200ms var(--ease-out);
}

.sec-14-footer .sec-14-footer__copy a:hover {
  color: var(--text-on-ink);
}

.sec-14-footer .sec-14-footer__a11y {
  max-width: 46ch;
  margin: 0;
}

.sec-14-footer .sec-14-footer__credit {
  margin: 0;
}

.sec-14-footer .sec-14-footer__credit a {
  color: var(--text-on-ink-dim);
  text-decoration: underline;
  text-decoration-color: hsl(0 0% 100% / 0.3);
  transition: color 200ms var(--ease-out);
}

.sec-14-footer .sec-14-footer__credit a:hover {
  color: var(--text-on-ink);
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .sec-14-footer .sec-14-footer__grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 2.5rem;
  }
}

@media (max-width: 560px) {
  .sec-14-footer .sec-14-footer__grid {
    grid-template-columns: 1fr;
  }
  .sec-14-footer .sec-14-footer__cta-inner {
    text-align: center;
    flex-direction: column;
  }
  .sec-14-footer .sec-14-footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* css/sections/15-paincheck.css */
/* ============================================================
   15-paincheck — scoped under .sec-15-paincheck
   The 30-Second Pain Check: 3-tap chip flow -> personalized result
   ============================================================ */

.sec-15-paincheck { position: relative; background: radial-gradient(120% 85% at 50% 0%, #fbf9f3 0%, var(--bone) 50%, #eee8db 100%); }

/* --- Panel: white, visually distinct from the bone section bg --- */
.sec-15-paincheck__panel {
  position: relative;
  max-width: 880px;
  margin-inline: auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid hsl(var(--accent-h) 60% 55% / 0.18);
  box-shadow: var(--shadow-lift), 0 0 0 1px hsl(var(--accent-h) 60% 55% / 0.06) inset, 0 0 70px var(--accent-glow);
  padding: clamp(1.75rem, 4vw, 3rem);
  overflow: hidden;
}

.sec-15-paincheck__glow {
  position: absolute;
  top: -30%;
  right: -18%;
  width: 60%;
  height: 140%;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  filter: blur(30px);
  opacity: 0.6;
  z-index: 0;
  pointer-events: none;
}

/* --- Progress row: back link + step dots --- */
.sec-15-paincheck__progress {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  min-height: 1.6rem;
}

.sec-15-paincheck__back {
  background: none;
  border: none;
  padding: 0.25rem 0.3rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-on-bone-dim);
  cursor: pointer;
  transition: color 200ms var(--ease-out);
}
.sec-15-paincheck__back:hover { color: var(--accent); }
.sec-15-paincheck__back[hidden] { display: none; }

.sec-15-paincheck__dots { display: flex; gap: 0.45rem; margin-left: auto; }
.sec-15-paincheck__dot {
  width: 1.6rem;
  height: 5px;
  border-radius: var(--radius-pill);
  background: hsl(200 12% 85%);
  transition: background 300ms var(--ease-out);
}
.sec-15-paincheck__dot.is-active { background: var(--accent); }
.sec-15-paincheck__dot.is-complete { background: hsl(var(--accent-h) 60% 55% / 0.55); }
html.reduced-motion .sec-15-paincheck__dot { transition: none; }

/* --- Live region wrapping the step stack + result --- */
.sec-15-paincheck__live { position: relative; z-index: 1; min-height: 9rem; }

.sec-15-paincheck__step {
  transition: transform 300ms var(--ease-out), opacity 300ms var(--ease-out);
}
.sec-15-paincheck__step[hidden] { display: none; }

.sec-15-paincheck__step.is-leaving-fwd  { transform: translateX(-26px); opacity: 0; }
.sec-15-paincheck__step.is-leaving-back { transform: translateX(26px);  opacity: 0; }
.sec-15-paincheck__step.is-entering-fwd  { transform: translateX(26px);  opacity: 0; }
.sec-15-paincheck__step.is-entering-back { transform: translateX(-26px); opacity: 0; }

html.reduced-motion .sec-15-paincheck__step {
  transition: none !important;
  transform: none !important;
}

.sec-15-paincheck__q-label {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--text-on-bone);
  margin-bottom: 1.25rem;
}

/* --- Chips --- */
.sec-15-paincheck__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.sec-15-paincheck__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.35rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line-bone);
  background: var(--white);
  color: var(--text-on-bone);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  cursor: pointer;
  transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out),
    color 200ms var(--ease-out), transform 300ms var(--ease-spring);
}
.sec-15-paincheck__chip:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}
.sec-15-paincheck__chip:active { transform: scale(0.96); }
.sec-15-paincheck__chip.is-selected {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
}
html.reduced-motion .sec-15-paincheck__chip { transition: none; }

/* --- Result state --- */
.sec-15-paincheck__result[hidden] { display: none; }

.sec-15-paincheck__result-headline {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--text-on-bone);
  margin-bottom: 1rem;
  max-width: 42ch;
}
.sec-15-paincheck__result-headline:focus { outline: none; }

.sec-15-paincheck__result-reassure {
  color: var(--text-on-bone-dim);
  max-width: 46ch;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.sec-15-paincheck__result-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.sec-15-paincheck__retake {
  background: none;
  border: none;
  padding: 0.5rem 0.25rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-on-bone-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 200ms var(--ease-out);
}
.sec-15-paincheck__retake:hover { color: var(--accent-strong); }

/* --- Mobile --- */
@media (max-width: 560px) {
  .sec-15-paincheck__panel { padding: 1.5rem; border-radius: var(--radius-card); }
  .sec-15-paincheck__chip { padding: 0.65rem 1.1rem; font-size: 0.92rem; }
  .sec-15-paincheck__result-actions { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* css/sections/16-comebacks.css */
/* ============================================================
   16-comebacks — Comeback Ticker. Scoped under .sec-16-comebacks.
   Sits between 06-journey and 07-results; bg is the shared dark-act
   color (#0a1418) so it bridges both neighbors seamlessly.
   ============================================================ */

.sec-16-comebacks {
  background: #0a1418;
  color: var(--text-on-ink);
  padding-block: clamp(2.5rem, 3vw, 3.5rem) 3rem;
  overflow: hidden;
  position: relative;
}

/* --- Eyebrow + pulse-line --- */
.sec-16-comebacks__head {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.25rem);
}

.sec-16-comebacks__eyebrow-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.sec-16-comebacks__pulse {
  width: 140px;
  height: 30px;
}
.sec-16-comebacks .pulse-line path {
  stroke: var(--ember);
}

.sec-16-comebacks__eyebrow {
  color: var(--ember);
}
.sec-16-comebacks__eyebrow::before {
  display: none;
}

/* --- Marquee --- */
.sec-16-comebacks__marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
}

.sec-16-comebacks__track {
  --marquee-dur: 55s;
  --marquee-gap: 1.5rem;
}

/* --- Outcome card --- */
.sec-16-comebacks__card {
  display: flex;
  flex-direction: column;
  min-width: 320px;
  padding: 1.5rem 1.5rem 1.25rem;
  background: hsl(200 30% 12%);
  border: 1px solid hsl(0 0% 100% / 0.08);
  border-radius: var(--radius-card);
}

.sec-16-comebacks__before {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-on-ink-dim);
}

.sec-16-comebacks__divider {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.7rem 0;
}

.sec-16-comebacks__dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--ember);
  box-shadow: 0 0 0 0 var(--accent-glow);
  animation: sec-16-comebacks-pulse 2.2s ease-in-out infinite;
}
@keyframes sec-16-comebacks-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); transform: scale(1); }
  50% { box-shadow: 0 0 0 5px transparent; transform: scale(1.3); }
}

.sec-16-comebacks__arrow {
  color: var(--ember);
  font-size: 1rem;
  line-height: 1;
}

.sec-16-comebacks__after {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--white);
}

.sec-16-comebacks__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
}

.sec-16-comebacks__tag {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-pill);
  background: hsl(0 0% 100% / 0.06);
  border: 1px solid hsl(0 0% 100% / 0.1);
  color: var(--text-on-ink-dim);
}
.sec-16-comebacks__tag--time {
  color: var(--ember);
  border-color: hsl(var(--accent-h) 60% 40% / 0.4);
}

@media (max-width: 480px) {
  .sec-16-comebacks__card {
    min-width: 280px;
    padding: 1.25rem 1.25rem 1rem;
  }
}

/* --- Reduced motion: static row of the first 3 cards --- */
html.reduced-motion .sec-16-comebacks__track[aria-hidden="true"] {
  display: none;
}
html.reduced-motion .sec-16-comebacks__track {
  animation: none;
}
html.reduced-motion .sec-16-comebacks__card:nth-child(n + 4) {
  display: none;
}
html.reduced-motion .sec-16-comebacks__marquee {
  mask-image: none;
  -webkit-mask-image: none;
  justify-content: center;
  overflow-x: auto;
}
html.reduced-motion .sec-16-comebacks__dot {
  animation: none;
}

/* css/sections/17-mobilebar.css */
/* ============================================================
   Section 17 — Sticky mobile "Call | Book Now" bar
   Fixed bottom, mobile-only (<=820px). Sits below the nav's mobile
   overlay (z-index 199/210) and above ordinary content.
   All selectors scoped under .sec-17-mobilebar.
   ============================================================ */

.sec-17-mobilebar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 180;
  align-items: flex-start;
  height: calc(56px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid hsl(0 0% 100% / 0.12);
  transform: translateY(110%);
  transition: transform 400ms var(--ease-out);
  font-family: var(--font-body);
}

@media (max-width: 820px) {
  .sec-17-mobilebar {
    display: flex;
  }
}

/* Slide up once the page has finished its load orchestration */
html.is-loaded .sec-17-mobilebar {
  transform: translateY(0);
}

/* Hidden while #booking is substantially in view, or while the nav's
   mobile overlay is open (state read via body.sec-01-nav-lock). */
html.is-loaded .sec-17-mobilebar.is-hidden {
  transform: translateY(110%);
}

html.reduced-motion .sec-17-mobilebar,
html.reduced-motion .sec-17-mobilebar.is-hidden {
  transition: none;
}

.sec-17-mobilebar__call,
.sec-17-mobilebar__book {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 56px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: filter 150ms var(--ease-out);
}

.sec-17-mobilebar__call:active,
.sec-17-mobilebar__book:active {
  filter: brightness(0.92);
}

/* Left half: dark ink-glass */
.sec-17-mobilebar__call {
  background: hsl(200 35% 8% / 0.82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  color: var(--text-on-ink);
}

.sec-17-mobilebar__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Right half: solid accent (lighter pop shade — the sibling "call" half is
   already a near-black ink-glass, so the base --accent navy would blend in) */
.sec-17-mobilebar__book {
  background: var(--gold-btn);
  color: var(--accent-on);
}

/* css/sections/18-faq.css */
/* ============================================================
   18-faq — pre-booking objection killer
   All selectors scoped under .sec-18-faq
   ============================================================ */

.sec-18-faq {
  position: relative;
  background: var(--bone);
}

.sec-18-faq__grid {
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  gap: clamp(2rem, 2rem + 2vw, 4rem);
  align-items: start;
}

/* --- Left: sticky "still have a question" card --- */
.sec-18-faq__card {
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
  align-self: start;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sec-18-faq__card-title {
  margin-bottom: 0.2rem;
}

.sec-18-faq__card-line {
  color: var(--text-on-bone-dim);
  margin-bottom: 0.6rem;
}

.sec-18-faq__card-btn {
  width: 100%;
  margin-bottom: 0.4rem;
}

.sec-18-faq__card-link {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: hsl(var(--accent-h) 60% 60% / 0.4);
  text-underline-offset: 2px;
  text-align: center;
}
.sec-18-faq__card-link:hover {
  text-decoration-color: currentColor;
}

/* --- Right: accordion --- */
.sec-18-faq__accordion {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.sec-18-faq__item {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.sec-18-faq__trigger {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--text-on-bone);
}

.sec-18-faq__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  height: 2.4rem;
  padding-inline: 0.35rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.sec-18-faq__question {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h4);
  letter-spacing: -0.01em;
}

.sec-18-faq__chevron {
  flex-shrink: 0;
  color: var(--accent);
  transition: transform 400ms var(--ease-out);
}
.sec-18-faq__trigger[aria-expanded="true"] .sec-18-faq__chevron {
  transform: rotate(180deg);
}

/* --- Animated panel: grid-template-rows 0fr -> 1fr technique --- */
.sec-18-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 450ms var(--ease-out);
}
.sec-18-faq__trigger[aria-expanded="true"] + .sec-18-faq__panel {
  grid-template-rows: 1fr;
}

.sec-18-faq__panel-inner {
  min-height: 0;
  overflow: hidden;
}
.sec-18-faq__panel-inner p {
  padding: 0 1.5rem 1.5rem calc(2.4rem + 1rem + 1.5rem);
  color: var(--text-on-bone-dim);
  max-width: 62ch;
}

html.reduced-motion .sec-18-faq__panel { transition: none; }
html.reduced-motion .sec-18-faq__chevron { transition: none; }

@media (max-width: 900px) {
  .sec-18-faq__grid {
    grid-template-columns: 1fr;
  }
  .sec-18-faq__accordion { order: 1; }
  .sec-18-faq__card {
    order: 2;
    position: static;
    top: auto;
  }
  .sec-18-faq__panel-inner p {
    padding-left: 1.5rem;
  }
}

@media (max-width: 520px) {
  .sec-18-faq__trigger {
    padding: 1rem 1.1rem;
    gap: 0.75rem;
  }
  .sec-18-faq__num {
    min-width: 2rem;
    height: 2rem;
    font-size: 0.75rem;
  }
}

/* css/sections/19-firstvisit.css */
/* ============================================================
   19-firstvisit — "Your First Visit, Minute by Minute" timeline.
   All selectors scoped under .sec-19-firstvisit.

   Design decision: section background is a flat var(--bone-2) band
   (not --white) — the spec's own type/color rules forbid flat white
   cards on a white section, and this section's cards are white.
   A subtly deeper bone tone + hairline top/bottom borders let it read
   as its own moment between 08-why and 09-team without breaking the
   "never a flat endless scroll" rhythm or the no-flat-white-on-white rule.
   ============================================================ */

.sec-19-firstvisit {
  background: var(--bone-2);
  border-top: 1px solid var(--line-bone);
  border-bottom: 1px solid var(--line-bone);
  position: relative;
}

.sec-19-firstvisit__head {
  text-align: center;
  margin-inline: auto;
}
.sec-19-firstvisit__head .eyebrow { justify-content: center; }
.sec-19-firstvisit__head h2 { margin-inline: auto; }
.sec-19-firstvisit__head p:not(.eyebrow) { margin-inline: auto; }

/* --- Timeline wrapper --- */
.sec-19-firstvisit__timeline {
  position: relative;
}

/* --- Track (the self-drawing line) ---
   Spans column centers of a 4-col grid: 12.5% .. 87.5%. Vertically
   centered on the dot row via top:0 + translateY(-50%) so it lines
   up exactly with .sec-19-firstvisit__dot (also top:0, translate -50%). */
.sec-19-firstvisit__track {
  position: absolute;
  top: 0;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  transform: translateY(-50%);
  z-index: 1;
}
.sec-19-firstvisit__track-base {
  position: absolute;
  inset: 0;
  background: var(--line-bone);
  border-radius: 2px;
}
.sec-19-firstvisit__track-fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1600ms var(--ease-out);
}
.sec-19-firstvisit__track-ball {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent-glow);
  transform: translate(-50%, -50%);
  transition: left 1600ms var(--ease-out);
}
.sec-19-firstvisit__timeline.is-drawn .sec-19-firstvisit__track-fill {
  transform: scaleX(1);
}
.sec-19-firstvisit__timeline.is-drawn .sec-19-firstvisit__track-ball {
  left: 100%;
}

/* --- Stops grid --- */
.sec-19-firstvisit__stops {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 1rem + 1vw, 2rem);
  position: relative;
  padding-top: 2.75rem; /* room for dot + time marker above each card */
}

.sec-19-firstvisit__stop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Small pulse dot on the track at this stop; lights up in sequence as
   the draw passes it. Delays are fractions of the 1600ms draw matching
   this dot's position along the track (0, 1/3, 2/3, 1). */
.sec-19-firstvisit__dot {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--line-bone);
  z-index: 2;
  transition: background-color 300ms var(--ease-out), border-color 300ms var(--ease-out),
    box-shadow 300ms var(--ease-out);
}
.sec-19-firstvisit__stop:nth-child(1) .sec-19-firstvisit__dot { transition-delay: 0ms; }
.sec-19-firstvisit__stop:nth-child(2) .sec-19-firstvisit__dot { transition-delay: 500ms; }
.sec-19-firstvisit__stop:nth-child(3) .sec-19-firstvisit__dot { transition-delay: 1050ms; }
.sec-19-firstvisit__stop:nth-child(4) .sec-19-firstvisit__dot { transition-delay: 1550ms; }
.sec-19-firstvisit__timeline.is-drawn .sec-19-firstvisit__dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 6px var(--accent-glow);
}

/* Time marker: ghost-numeral language, but solid accent (not stroked) */
.sec-19-firstvisit__time {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 1.4rem + 2vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  margin-bottom: 1rem;
}

.sec-19-firstvisit__card {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 1.5rem 1.5rem 1.75rem;
  width: 100%;
  transition: box-shadow 400ms var(--ease-out), transform 400ms var(--ease-out);
}
.sec-19-firstvisit__card:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }

.sec-19-firstvisit__card-title { font-size: var(--fs-h4); margin-bottom: 0.5rem; }
.sec-19-firstvisit__card-copy { color: var(--text-on-bone-dim); }

/* --- CTA --- */
.sec-19-firstvisit__cta {
  margin-top: clamp(3rem, 4vw, 4.5rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.sec-19-firstvisit__cta-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h4);
}

/* --- Mobile (≤820px): vertical timeline down the left edge --- */
@media (max-width: 820px) {
  .sec-19-firstvisit__timeline { padding-left: 1.75rem; }

  /* top/bottom here are only the pre-JS fallback (first paint, or JS
     disabled). js/sections/19-firstvisit.js measures the real first/last
     dot positions and sets inline top+height, which the browser lets win
     over bottom (top+height+bottom together is over-constrained, so an
     explicit height always overrides this bottom) — that's what keeps the
     line ending exactly at the last dot instead of wherever the last
     card's bottom edge happens to fall. */
  .sec-19-firstvisit__track {
    top: 0.4rem;
    bottom: 0.4rem;
    left: 0.35rem;
    right: auto;
    width: 2px;
    height: auto;
    transform: none;
  }
  .sec-19-firstvisit__track-fill {
    transform: scaleY(0);
    transform-origin: top;
  }
  .sec-19-firstvisit__track-ball {
    top: 0%;
    left: 50%;
    transition: top 1600ms var(--ease-out);
  }
  .sec-19-firstvisit__timeline.is-drawn .sec-19-firstvisit__track-fill {
    transform: scaleY(1);
  }
  .sec-19-firstvisit__timeline.is-drawn .sec-19-firstvisit__track-ball {
    top: 100%;
  }

  .sec-19-firstvisit__stops {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 8vw, 2.75rem);
    padding-top: 0;
  }

  .sec-19-firstvisit__stop { align-items: stretch; }

  .sec-19-firstvisit__dot {
    top: 0.3rem;
    left: -1.75rem;
    transform: translate(-50%, -50%);
  }

  .sec-19-firstvisit__time { margin-bottom: 0.75rem; }
}

/* --- Reduced motion: fully drawn, no travel, no delays --- */
html.reduced-motion .sec-19-firstvisit__track-fill,
html.reduced-motion .sec-19-firstvisit__track-ball,
html.reduced-motion .sec-19-firstvisit__dot {
  transition: none !important;
}
html.reduced-motion .sec-19-firstvisit__track-fill { transform: scaleX(1); }
html.reduced-motion .sec-19-firstvisit__track-ball { left: 100%; }
html.reduced-motion .sec-19-firstvisit__dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 6px var(--accent-glow);
}
@media (max-width: 820px) {
  html.reduced-motion .sec-19-firstvisit__track-fill { transform: scaleY(1); }
  html.reduced-motion .sec-19-firstvisit__track-ball { top: 100%; left: 50%; }
}

/* css/sections/20-waiting.css */
/* ============================================================
   20-waiting — "The Cost of Waiting" persuasion split
   scoped under .sec-20-waiting
   ============================================================ */

.sec-20-waiting {
  position: relative;
  background: radial-gradient(120% 90% at 50% 0%, #fbf9f3 0%, var(--bone) 45%, #eee8db 100%);
}

/* --- Split panel --- */
.sec-20-waiting__panel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  box-shadow: var(--shadow-lift);
  border-radius: var(--radius-lg);
}

.sec-20-waiting__half {
  position: relative;
  padding: clamp(2rem, 1.5rem + 2vw, 3rem);
  transition: filter 300ms var(--ease-out);
}

.sec-20-waiting__half-title {
  font-size: var(--fs-h4);
  margin-bottom: 1.4rem;
}

.sec-20-waiting__list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.sec-20-waiting__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  line-height: 1.45;
}

.sec-20-waiting__ico {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-top: 0.15em;
}

/* --- Left half: dimmed / desaturated --- */
.sec-20-waiting__half--dim {
  background: var(--bone-2);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  filter: saturate(0.55);
}
.sec-20-waiting__half--dim .sec-20-waiting__half-title {
  color: hsl(30 6% 42%);
}
.sec-20-waiting__half--dim .sec-20-waiting__item {
  color: hsl(30 6% 46%);
}
.sec-20-waiting__ico--x {
  color: hsl(30 6% 52%);
  background: hsl(30 10% 82%);
}

/* --- Right half: lit / accent --- */
.sec-20-waiting__half--lit {
  background: var(--white);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  box-shadow: inset 0 0 0 1.5px hsl(var(--accent-h) 70% 55% / 0.32), 0 0 46px var(--accent-glow);
  /* Both halves are left-aligned text, so the left half's content naturally
     sits away from the center VS badge while the right half's content sits
     flush against it. Extra left padding here gives the right half the same
     visual clearance from the badge that the left half gets from its own
     outer edge. */
  padding-left: clamp(5.5rem, 4.5rem + 4vw, 7rem);
}
.sec-20-waiting__half--lit .sec-20-waiting__half-title,
.sec-20-waiting__half--lit .sec-20-waiting__item {
  color: var(--text-on-bone);
}
.sec-20-waiting__ico--check {
  color: var(--accent-on);
  background: var(--accent);
}

/* --- VS badge: pinned at the seam --- */
.sec-20-waiting__vs {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: clamp(56px, 5vw + 40px, 84px);
  height: clamp(56px, 5vw + 40px, 84px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 6px var(--bone), var(--shadow-glow);
}
.sec-20-waiting__vs-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.9rem, 0.4rem + 1vw, 1.15rem);
  letter-spacing: 0.03em;
  color: var(--accent-on);
}

/* html:not(.no-js) prefix so this strictly outranks base.css's
   `html:not(.no-js) [data-reveal].is-visible` (specificity 0,3,1) - without
   it, base's `transform: none` won the tie and the badge jumped from
   centered to offset by half its own size the moment .is-visible landed. */
html:not(.no-js) .sec-20-waiting__vs[data-reveal] {
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
html:not(.no-js) .sec-20-waiting__vs[data-reveal].is-visible {
  opacity: 1;
  transform: translate(-50%, -50%);
  animation: sec-20-waiting-spin 1100ms var(--ease-out) 1;
  animation-delay: var(--reveal-delay, 0ms);
}
@keyframes sec-20-waiting-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
html.reduced-motion .sec-20-waiting__vs[data-reveal] {
  opacity: 1;
  transform: translate(-50%, -50%);
  animation: none;
  transition: none;
}

/* --- Below-panel CTA --- */
.sec-20-waiting__cta {
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}

.sec-20-waiting__cta-line {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  max-width: 42ch;
  color: var(--text-on-bone);
}

@media (max-width: 760px) {
  .sec-20-waiting__panel {
    grid-template-columns: 1fr;
  }
  .sec-20-waiting__half--dim {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .sec-20-waiting__half--lit {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }
}

@media (max-width: 480px) {
  .sec-20-waiting__half {
    padding: 1.6rem 1.4rem;
  }
}

/* css/sections/21-elfsight.css */
/* ============================================================
   21-elfsight — scoped under .sec-21-elfsight
   Light "bone" section following the dark testimonials section.
   White panel houses the lazy-loaded Elfsight Google reviews
   embed, with a static demo-state fallback for the unfilled
   [ELFSIGHT_WIDGET_ID_PLACEHOLDER] token (see js/sections/21-elfsight.js).
   ============================================================ */

.sec-21-elfsight {
  position: relative;
  background: radial-gradient(120% 85% at 50% 100%, #fbf9f3 0%, var(--bone) 55%, #eee8db 100%);
}

.sec-21-elfsight__panel {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  overflow: hidden;
}

/* Elfsight injects its own markup/height once the platform script has
   run; reserve room up front so the panel never collapses to zero
   height while the script loads (or is absent in the demo state). */
.sec-21-elfsight [data-elfsight-app-lazy] {
  display: block;
  width: 100%;
  min-height: 420px;
}

/* --- Unfilled-token fallback: soft striped placeholder, revealed by JS ---
   JS hides [data-elfsight-app-lazy] outright in the unfilled case (it will
   never be populated), so this panel never has to share space with it. */
.sec-21-elfsight__fallback {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  border-radius: var(--radius-card);
  text-align: center;
  padding: 2rem;
  background-image: repeating-linear-gradient(
    45deg,
    var(--bone) 0 14px,
    var(--bone-2) 14px 28px
  );
}
.sec-21-elfsight__fallback.is-visible { display: flex; }

.sec-21-elfsight__fallback-note {
  max-width: 38ch;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--line-bone);
  border-radius: var(--radius-card);
  padding: 1.1rem 1.5rem;
  color: var(--text-on-bone-dim);
  font-size: var(--fs-small);
  line-height: 1.5;
}

/* --- "Read every review on Google" link line below the panel --- */
.sec-21-elfsight__link {
  text-align: center;
  margin-top: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
}
.sec-21-elfsight__link a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--accent);
  text-decoration: none;
}
.sec-21-elfsight__link a:hover { color: var(--accent-strong); }
.sec-21-elfsight__link a span {
  display: inline-block;
  transition: transform 240ms var(--ease-spring);
}
.sec-21-elfsight__link a:hover span { transform: translateX(4px); }

@media (max-width: 560px) {
  .sec-21-elfsight [data-elfsight-app-lazy],
  .sec-21-elfsight__fallback {
    min-height: 320px;
  }
  .sec-21-elfsight__fallback {
    margin-top: -320px;
  }
}

/* css/sections/22-awards.css */
/* ============================================================
   22-awards — "The Hardware" award badges section (home, after
   the trust marquee). Every selector scoped under .sec-22-awards.
   Placeholder gold medals are swapped for real client badge
   images per build (see the HTML comment in the fragment).
   ============================================================ */

.sec-22-awards {
  background: radial-gradient(120% 85% at 50% 0%, #fbf9f3 0%, var(--bone) 50%, #eee8db 100%);
}

.sec-22-awards .sec-22-awards__head {
  text-align: center;
  margin-inline: auto;
}
.sec-22-awards .sec-22-awards__head .eyebrow { justify-content: center; }
.sec-22-awards .sec-22-awards__head .eyebrow::after {
  content: "";
  width: 2rem;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.sec-22-awards .sec-22-awards__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-gap);
  align-items: stretch;
}

.sec-22-awards .sec-22-awards__card {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.5rem, 2.5vw, 2.25rem) clamp(1.25rem, 2vw, 1.75rem);
  text-align: center;
  transition: transform 300ms var(--ease-spring), box-shadow 300ms var(--ease-out);
}

.sec-22-awards .sec-22-awards__card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
}

/* --- Badge medallion with a soft gold glow --- */
.sec-22-awards .sec-22-awards__badge {
  position: relative;
  width: clamp(96px, 9vw, 120px);
  aspect-ratio: 1;
  margin: 0 auto 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 6px 18px hsl(40 70% 45% / 0.35));
}

.sec-22-awards .sec-22-awards__medal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Real client badges drop in as plain imgs and inherit the same footprint */
.sec-22-awards .sec-22-awards__badge img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sec-22-awards .sec-22-awards__badge-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  color: #6d4f16;
}

.sec-22-awards .sec-22-awards__badge-big {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  line-height: 1.1;
  max-width: 84px;
  overflow-wrap: anywhere;
}

.sec-22-awards .sec-22-awards__badge-label {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: 0.8rem;
}

.sec-22-awards .sec-22-awards__badge-stars {
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: #7a5a1c;
}

/* --- Card text --- */
.sec-22-awards .sec-22-awards__title {
  font-size: 1.05rem;
  color: var(--accent-strong);
  margin-bottom: 0.5rem;
}

.sec-22-awards .sec-22-awards__blurb {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-on-bone-dim);
  max-width: 34ch;
  margin-inline: auto;
}

html.reduced-motion .sec-22-awards .sec-22-awards__card { transition: none; }

/* css/sections/40-about-community.css */
/* ============================================================
   40-about-community — neighborhood chip row + local review lockup.
   Bone (default), no on-ink — this fragment must stay bone since
   the booking section's top wave is drawn to match a bone seam.
   Scoped under .sec-40-about-community
   ============================================================ */

.sec-40-about-community__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.5rem;
}

.sec-40-about-community__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--white);
  border: 1px solid var(--line-bone);
  box-shadow: var(--shadow-soft);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-on-bone);
}

.sec-40-about-community__stat {
  margin-top: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h4);
  color: var(--text-on-bone);
}

.sec-40-about-community__stat span[aria-hidden] {
  color: var(--ember);
}

/* css/sections/40-about-gallery.css */
/* ============================================================
   40-about-gallery — horizontal scroll-snap photo gallery.
   Pure CSS: scroll-snap for the track, anchor-link dots for the
   affordance (fragment links scroll their nearest scrollable
   ancestor into view natively, no JS required).
   Stacks to a 2-col grid at <=700px.
   Scoped under .sec-40-about-gallery
   ============================================================ */

.sec-40-about-gallery__scroll {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: max(1.25rem, calc((100% - var(--container)) / 2 + 1.25rem));
  padding: 0.5rem clamp(1.25rem, 6vw, calc((100% - var(--container)) / 2 + 1.25rem)) 1.5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;

  -webkit-mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
  mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
}

.sec-40-about-gallery__slide {
  flex: 0 0 clamp(240px, 32vw, 400px);
  scroll-snap-align: start;
  scroll-margin-left: 1.25rem;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  aspect-ratio: 720 / 480;
}

.sec-40-about-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.85) contrast(1.05) brightness(0.98);
  transition: filter 600ms var(--ease-out), transform 600ms var(--ease-out);
  transform: scale(1.02);
}

.sec-40-about-gallery__slide:hover .sec-40-about-gallery__img,
.sec-40-about-gallery__slide:focus-within .sec-40-about-gallery__img {
  filter: grayscale(0) contrast(1) brightness(1);
  transform: scale(1.06);
}

.sec-40-about-gallery__dots {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.sec-40-about-gallery__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line-bone);
  transition: background-color 200ms var(--ease-out), transform 200ms var(--ease-spring);
}

.sec-40-about-gallery__dot:hover,
.sec-40-about-gallery__dot:focus-visible {
  background: var(--accent);
  transform: scale(1.2);
}

@media (max-width: 700px) {
  .sec-40-about-gallery__scroll {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-inline: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .sec-40-about-gallery__slide {
    flex: 0 1 calc(50% - 0.625rem);
    scroll-snap-align: none;
  }
  .sec-40-about-gallery__dots { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sec-40-about-gallery__img { transition: none; }
}

/* css/sections/40-about-hero.css */
/* ============================================================
   40-about-hero — About page hero content.
   Structural/positioning styles come from css/sections/00-interior-hero.css
   (shared shell). This file only adds anything unique to the About hero.
   Scoped under .sec-40-about-hero
   ============================================================ */

.sec-40-about-hero .sec-00-inthero__chip strong {
  color: var(--ember);
}

/* css/sections/40-about-story.css */
/* ============================================================
   40-about-story — founder portrait (arch frame) + narrative copy
   + pull-quote. Scoped under .sec-40-about-story
   ============================================================ */

.sec-40-about-story__grid {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: clamp(2.5rem, 4vw, 5rem);
  align-items: start;
}

/* --- Founder portrait: arch frame + offset accent ring, echoes 09-team --- */
.sec-40-about-story__media {
  position: relative;
  overflow: visible;
}

.sec-40-about-story__ring {
  position: absolute;
  inset: 0;
  border: 2px solid var(--accent);
  border-radius: 999px 999px var(--radius-card) var(--radius-card);
  opacity: 0.3;
  transform: translate(-12px, 12px);
  pointer-events: none;
}

.sec-40-about-story__photo-wrap {
  position: relative;
  z-index: 1;
  aspect-ratio: 640 / 780;
  overflow: hidden;
  border-radius: 999px 999px var(--radius-card) var(--radius-card);
  background: var(--bone-2);
  box-shadow: var(--shadow-lift);
}

.sec-40-about-story__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sec-40-about-story__caption {
  margin-top: 1.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-on-bone);
  text-align: center;
}

/* --- Narrative copy --- */
.sec-40-about-story__copy p {
  color: var(--text-on-bone-dim);
  font-size: var(--fs-body);
  line-height: 1.7;
  margin-bottom: 1.2rem;
  max-width: 60ch;
}

.sec-40-about-story__quote {
  margin-top: 2rem;
  padding-left: 1.4rem;
  border-left: 3px solid var(--accent);
}

.sec-40-about-story__quote p {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.7rem);
  line-height: 1.4;
  color: var(--text-on-bone);
  max-width: 44ch;
}

@media (max-width: 860px) {
  .sec-40-about-story__grid {
    grid-template-columns: 1fr;
  }
  .sec-40-about-story__media {
    max-width: 20rem;
    margin-inline: auto;
  }
}

/* css/sections/40-about-team.css */
/* ============================================================
   40-about-team — arch-frame team cards, duotone→color hover.
   bone-2 band. Scoped under .sec-40-about-team
   ============================================================ */

.sec-40-about-team {
  background: var(--bone-2);
}

.sec-40-about-team__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-gap);
}

.sec-40-about-team__card {
  flex: 0 1 292px;
  width: 292px;
}

@media (max-width: 560px) {
  .sec-40-about-team__card { width: 100%; max-width: 24rem; }
}

.sec-40-about-team__card {
  background: var(--white);
  border-radius: var(--radius-card);
  overflow: visible;
  box-shadow: var(--shadow-soft);
  padding: 1.5rem 1.5rem 0;
  transition: box-shadow 400ms var(--ease-out);
}

.sec-40-about-team__card:hover,
.sec-40-about-team__card:focus-within {
  box-shadow: var(--shadow-lift);
}

.sec-40-about-team__media {
  position: relative;
  overflow: visible;
}

.sec-40-about-team__ring {
  position: absolute;
  inset: 0;
  border: 2px solid var(--accent);
  border-radius: 999px 999px var(--radius-card) var(--radius-card);
  opacity: 0.25;
  transform: translate(8px, 8px) scale(1);
  transition: opacity 300ms ease, transform 300ms ease;
  pointer-events: none;
}

.sec-40-about-team__card:hover .sec-40-about-team__ring,
.sec-40-about-team__card:focus-within .sec-40-about-team__ring {
  opacity: 1;
  transform: translate(8px, 8px) scale(1.02);
}

.sec-40-about-team__photo-wrap {
  position: relative;
  z-index: 1;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  border-radius: 999px 999px var(--radius-card) var(--radius-card);
  background: var(--bone-2);
}

.sec-40-about-team__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.85) contrast(1.05) brightness(0.98);
  transition: filter 600ms var(--ease-out), transform 600ms var(--ease-out);
  transform: scale(1.02);
}

.sec-40-about-team__card:hover .sec-40-about-team__photo,
.sec-40-about-team__card:focus-within .sec-40-about-team__photo {
  filter: grayscale(0) contrast(1) brightness(1);
  transform: scale(1.06);
}

.sec-40-about-team__body {
  padding: 1.35rem 0 1.75rem;
}

.sec-40-about-team__name {
  font-size: calc(var(--fs-h4) * 1.08);
  margin-bottom: 0.5rem;
}

.sec-40-about-team__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
}

.sec-40-about-team__chip {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.sec-40-about-team__bio {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-on-bone-dim);
  border-top: 1px solid var(--line-bone);
  padding-top: 0.95rem;
}

.sec-40-about-team__book {
  margin-top: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent-strong);
  text-decoration: none;
  transition: gap 200ms var(--ease-spring), color 200ms var(--ease-out);
}

.sec-40-about-team__book:hover,
.sec-40-about-team__book:focus-visible {
  gap: 0.65rem;
  color: var(--accent);
}

.sec-40-about-team__book span {
  transition: transform 300ms var(--ease-spring);
}
.sec-40-about-team__book:hover span,
.sec-40-about-team__book:focus-visible span {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .sec-40-about-team__card,
  .sec-40-about-team__photo,
  .sec-40-about-team__ring {
    transition: none;
  }
}

html.reduced-motion .sec-40-about-team__ring {
  opacity: 0.5;
  transform: translate(8px, 8px) scale(1);
}

/* css/sections/40-about-typical.css */
/* ============================================================
   40-about-typical — compact dim/lit comparison split.
   Echoes 20-waiting's dim/lit visual language with local classes.
   Scoped under .sec-40-about-typical
   ============================================================ */

.sec-40-about-typical__panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}

.sec-40-about-typical__half {
  padding: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
}

.sec-40-about-typical__half-title {
  font-size: var(--fs-h4);
  margin-bottom: 1.1rem;
}

.sec-40-about-typical__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sec-40-about-typical__item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  line-height: 1.45;
  font-size: 0.95rem;
}

.sec-40-about-typical__ico {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-top: 0.15em;
}

/* --- Left: dimmed --- */
.sec-40-about-typical__half--dim {
  background: var(--bone-2);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  filter: saturate(0.55);
}
.sec-40-about-typical__half--dim .sec-40-about-typical__half-title { color: hsl(30 6% 42%); }
.sec-40-about-typical__half--dim .sec-40-about-typical__item { color: hsl(30 6% 46%); }
.sec-40-about-typical__ico--x { color: hsl(30 6% 52%); background: hsl(30 10% 82%); }

/* --- Right: lit --- */
.sec-40-about-typical__half--lit {
  background: var(--white);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  box-shadow: inset 0 0 0 1.5px hsl(var(--accent-h) 70% 55% / 0.32), 0 0 46px var(--accent-glow);
}
.sec-40-about-typical__half--lit .sec-40-about-typical__half-title,
.sec-40-about-typical__half--lit .sec-40-about-typical__item { color: var(--text-on-bone); }
.sec-40-about-typical__ico--check { color: var(--accent-on); background: var(--accent); }

/* --- Below-panel CTA --- */
.sec-40-about-typical__cta {
  margin-top: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}

.sec-40-about-typical__cta-line {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  max-width: 40ch;
  color: var(--text-on-bone);
}

@media (max-width: 760px) {
  .sec-40-about-typical__panel { grid-template-columns: 1fr; }
  .sec-40-about-typical__half--dim { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .sec-40-about-typical__half--lit { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
}

@media (max-width: 480px) {
  .sec-40-about-typical__half { padding: 1.5rem 1.3rem; }
}

/* css/sections/40-about-values.css */
/* ============================================================
   40-about-values — 4 value cards with self-drawing line icons.
   Icon draw uses the pulse-line stroke-dashoffset technique from
   base.css, keyed to the card's own [data-reveal].is-visible state.
   Scoped under .sec-40-about-values
   ============================================================ */

.sec-40-about-values__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-gap);
}

@media (max-width: 980px) {
  .sec-40-about-values__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .sec-40-about-values__grid { grid-template-columns: 1fr; }
}

.sec-40-about-values__card {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  transition: box-shadow 400ms var(--ease-out), transform 400ms var(--ease-out);
}

.sec-40-about-values__card:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-4px);
}

.sec-40-about-values__icon {
  width: 40px;
  height: 40px;
  color: var(--accent);
  margin-bottom: 1.2rem;
}

/* --- Self-drawing stroke: same mechanism as .pulse-line--draw --- */
.sec-40-about-values__icon-path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
[data-reveal].is-visible .sec-40-about-values__icon-path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 900ms var(--ease-out) 150ms;
}
.sec-40-about-values__icon-path:nth-of-type(2) {
  transition-delay: 300ms;
}
.sec-40-about-values__icon-path:nth-of-type(3) {
  transition-delay: 450ms;
}
html.reduced-motion .sec-40-about-values__icon-path {
  stroke-dashoffset: 0;
  transition: none;
}

.sec-40-about-values__title {
  font-size: var(--fs-h4);
  margin-bottom: 0.5rem;
}

.sec-40-about-values__copy {
  color: var(--text-on-bone-dim);
  font-size: 0.95rem;
  line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
  .sec-40-about-values__card { transition: none; }
}

/* --- Mission + vision statements above the core values --- */
.sec-40-about-values__mv {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-gap);
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
@media (max-width: 760px) {
  .sec-40-about-values__mv { grid-template-columns: 1fr; }
}
.sec-40-about-values__mv-item {
  border-left: 3px solid var(--accent);
  padding: 0.25rem 0 0.25rem clamp(1.1rem, 2vw, 1.6rem);
}
.sec-40-about-values__mv-quote {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  line-height: 1.4;
  color: var(--text-on-bone);
  margin-top: 0.6rem;
}

/* css/sections/50-wwt-bodymap.css */
/* ============================================================
   50-wwt-bodymap — two-column interactive body map. Left: body
   model w/ 7 hotspot dots (duotone tint approach echoes
   css/sections/04-conditions.css, own class names/root here).
   Right: single live card that swaps content on dot hover/tap
   (js/sections/50-wwt-bodymap.js). Scoped under .sec-50-wwt-bodymap.
   ============================================================ */

.sec-50-wwt-bodymap {
  background: var(--bone);
  /* .sec-50-wwt-bodymap__glow bleeds past its own box on purpose
     (inset: -14%) for a soft radial glow behind the model. Without
     clipping it here, that bleed becomes real horizontal page overflow
     on mobile (measured ~23px at 390px wide) — the same class of bug
     fixed in 00-interior-hero.css and already guarded against in
     12-booking.css's own drifting glow. */
  overflow: clip;
}

.sec-50-wwt-bodymap__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  align-items: center;
}

@media (min-width: 780px) {
  .sec-50-wwt-bodymap__layout {
    grid-template-columns: minmax(260px, 380px) 1fr;
  }
}

/* --- Left: body model --- */
.sec-50-wwt-bodymap__model {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin-inline: auto;
}

.sec-50-wwt-bodymap__glow {
  position: absolute;
  inset: -14%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, var(--accent-soft), transparent 68%);
  filter: blur(28px);
  pointer-events: none;
}

.sec-50-wwt-bodymap__model img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto; /* required: img ships width/height attrs which would otherwise stretch it */
  display: block;
  border-radius: 20px;
  box-shadow: var(--shadow-lift);
  filter: grayscale(1) contrast(1.04);
}

/* Accent-duotone tint over the model, tracks --accent so a client re-skin
   carries through automatically instead of shipping the raw grayscale look */
.sec-50-wwt-bodymap__tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 20px;
  background: linear-gradient(170deg, hsl(var(--accent-h) 55% 62% / 0.5), hsl(var(--accent-h) 65% 30% / 0.55));
  mix-blend-mode: color;
  pointer-events: none;
}

.sec-50-wwt-bodymap__active-glow {
  position: absolute;
  z-index: 1;
  width: 100px;
  height: 100px;
  left: 47%;
  top: 33%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow), transparent 70%);
  filter: blur(6px);
  opacity: 1;
  pointer-events: none;
  transition: opacity 300ms var(--ease-out), left 300ms var(--ease-out), top 300ms var(--ease-out);
}

html.reduced-motion .sec-50-wwt-bodymap__active-glow {
  transition: none;
}

.sec-50-wwt-bodymap__dot {
  position: absolute;
  z-index: 2;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--white);
  color: var(--accent-strong);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.72rem;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: background 250ms var(--ease-out), color 250ms var(--ease-out),
    border-color 250ms var(--ease-out), transform 250ms var(--ease-spring);
}

/* 44px invisible tap target around the visible dot */
.sec-50-wwt-bodymap__dot::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
}

.sec-50-wwt-bodymap__dot-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  opacity: 0;
}

.sec-50-wwt-bodymap__dot:hover,
.sec-50-wwt-bodymap__dot:focus-visible {
  transform: translate(-50%, -50%) scale(1.08);
}

.sec-50-wwt-bodymap__dot:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.sec-50-wwt-bodymap__dot.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
  transform: translate(-50%, -50%) scale(1.18);
}

.sec-50-wwt-bodymap__dot.is-active .sec-50-wwt-bodymap__dot-ring {
  opacity: 1;
  animation: sec-50-wwt-bodymap-pulse 1.8s ease-out infinite;
}

@keyframes sec-50-wwt-bodymap-pulse {
  from { transform: scale(0.55); opacity: 0.8; }
  to { transform: scale(1.9); opacity: 0; }
}

html.reduced-motion .sec-50-wwt-bodymap__dot.is-active .sec-50-wwt-bodymap__dot-ring {
  animation: none;
  opacity: 0.45;
  transform: scale(1);
}

html.reduced-motion .sec-50-wwt-bodymap__dot {
  transition: none;
}

/* --- Right: swapping live card --- */
.sec-50-wwt-bodymap__card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: clamp(2rem, 2vw + 1.5rem, 3rem);
  max-width: 480px;
}

.sec-50-wwt-bodymap__card.is-swapping {
  transition: opacity 200ms var(--ease-out);
  opacity: 0.35;
}

html.reduced-motion .sec-50-wwt-bodymap__card.is-swapping {
  transition: none;
  opacity: 1;
}

.sec-50-wwt-bodymap__card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 1.25rem;
}

.sec-50-wwt-bodymap__card h3 {
  font-size: var(--fs-h3);
  margin-bottom: 0.75rem;
}

.sec-50-wwt-bodymap__card p {
  color: var(--text-on-bone-dim);
  max-width: 40ch;
}

.sec-50-wwt-bodymap__card-link {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--accent-strong);
  text-decoration: none;
  transition: gap 200ms var(--ease-spring), color 200ms var(--ease-out);
}

.sec-50-wwt-bodymap__card-link:hover {
  gap: 0.65rem;
  color: var(--accent);
}

/* css/sections/50-wwt-grid.css */
/* ============================================================
   50-wwt-grid — full 12-condition grid, white section.
   Scoped under .sec-50-wwt-grid.
   ============================================================ */

.sec-50-wwt-grid {
  background: var(--white);
}

.sec-50-wwt-grid__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.1rem, 1.8vw, 1.5rem);
}

.sec-50-wwt-grid__card {
  background: var(--bone);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.4rem, 2vw, 1.9rem);
  border: 1.5px solid transparent;
  transition: border-color 250ms var(--ease-out), box-shadow 250ms var(--ease-out),
    transform 300ms var(--ease-spring);
}

.sec-50-wwt-grid__card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-lift);
  transform: translateY(-4px);
}

.sec-50-wwt-grid__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  margin-bottom: 1rem;
  transition: background 250ms var(--ease-out), color 250ms var(--ease-out);
}

.sec-50-wwt-grid__card:hover .sec-50-wwt-grid__num {
  background: var(--accent);
  color: var(--accent-on);
}

.sec-50-wwt-grid__card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.sec-50-wwt-grid__card p {
  color: var(--text-on-bone-dim);
  font-size: 0.92rem;
  line-height: 1.55;
}

.sec-50-wwt-grid__link {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--accent-strong);
  text-decoration: none;
  transition: gap 200ms var(--ease-spring), color 200ms var(--ease-out);
}

.sec-50-wwt-grid__link:hover {
  gap: 0.65rem;
  color: var(--accent);
}

html.reduced-motion .sec-50-wwt-grid__card {
  transition: none;
}

/* css/sections/50-wwt-hero.css */
/* ============================================================
   50-wwt-hero — What We Treat index hero. Uses the shared
   .sec-00-inthero styles (css/sections/00-interior-hero.css);
   only page-specific tweaks live here, scoped under
   .sec-50-wwt-hero.
   ============================================================ */

.sec-50-wwt-hero .eyebrow {
  margin-bottom: 1rem;
}

/* css/sections/50-wwt-notsure.css */
/* ============================================================
   50-wwt-notsure — compact closing CTA band, bone section.
   Must stay bone: the booking section's wave transition expects
   a bone background immediately above it. Scoped under
   .sec-50-wwt-notsure.
   ============================================================ */

.sec-50-wwt-notsure {
  background: var(--bone-2);
  padding-block: clamp(3rem, 5vw, 4.5rem);
}

.sec-50-wwt-notsure__band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: clamp(2rem, 3vw, 3rem);
}

.sec-50-wwt-notsure__copy h2 {
  font-size: var(--fs-h3);
  margin-bottom: 0.5rem;
}

.sec-50-wwt-notsure__copy p {
  color: var(--text-on-bone-dim);
}

.sec-50-wwt-notsure__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

@media (max-width: 640px) {
  .sec-50-wwt-notsure__band {
    flex-direction: column;
    align-items: flex-start;
  }
  .sec-50-wwt-notsure__actions {
    width: 100%;
  }
  .sec-50-wwt-notsure__actions .btn {
    width: 100%;
  }
}

/* css/sections/55-cond-causes.css */
/* ============================================================
   55-cond-causes — plain-language cause explainer, white section.
   Scoped under .sec-55-cond-causes.
   ============================================================ */

.sec-55-cond-causes {
  background: var(--white);
}

.sec-55-cond-causes__split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
}

@media (min-width: 860px) {
  .sec-55-cond-causes__split {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.sec-55-cond-causes__copy p {
  color: var(--text-on-bone-dim);
  margin-bottom: 1.1rem;
  max-width: 56ch;
}
.sec-55-cond-causes__copy p:last-child {
  margin-bottom: 0;
}

.sec-55-cond-causes__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}

/* css/sections/55-cond-faq.css */
/* ============================================================
   55-cond-faq — 3-question accordion + FAQPage JSON-LD (echoes
   css/sections/18-faq.css accordion pattern, own class names/
   root here). Bone section; this is the LAST condition-page
   fragment, so it must stay bone (the shared booking section's
   incoming wave expects a bone background above it).
   Scoped under .sec-55-cond-faq.
   ============================================================ */

.sec-55-cond-faq {
  background: var(--bone);
}

.sec-55-cond-faq__accordion {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: 54rem;
}

.sec-55-cond-faq__item {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.sec-55-cond-faq__trigger {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--text-on-bone);
}

.sec-55-cond-faq__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  height: 2.4rem;
  padding-inline: 0.35rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.sec-55-cond-faq__question {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h4);
  letter-spacing: -0.01em;
}

.sec-55-cond-faq__chevron {
  flex-shrink: 0;
  color: var(--accent);
  transition: transform 400ms var(--ease-out);
}
.sec-55-cond-faq__trigger[aria-expanded="true"] .sec-55-cond-faq__chevron {
  transform: rotate(180deg);
}

.sec-55-cond-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 450ms var(--ease-out);
}
.sec-55-cond-faq__trigger[aria-expanded="true"] + .sec-55-cond-faq__panel {
  grid-template-rows: 1fr;
}

.sec-55-cond-faq__panel-inner {
  min-height: 0;
  overflow: hidden;
}
.sec-55-cond-faq__panel-inner p {
  padding: 0 1.5rem 1.5rem calc(2.4rem + 1rem + 1.5rem);
  color: var(--text-on-bone-dim);
  max-width: 62ch;
}

html.reduced-motion .sec-55-cond-faq__panel { transition: none; }
html.reduced-motion .sec-55-cond-faq__chevron { transition: none; }

@media (max-width: 520px) {
  .sec-55-cond-faq__trigger {
    padding: 1rem 1.1rem;
    gap: 0.75rem;
  }
  .sec-55-cond-faq__num {
    min-width: 2rem;
    height: 2rem;
    font-size: 0.75rem;
  }
  .sec-55-cond-faq__panel-inner p {
    padding-left: 1.5rem;
  }
}

/* css/sections/55-cond-hero.css */
/* ============================================================
   55-cond-hero — condition-page hero. Uses shared .sec-00-inthero
   styles (css/sections/00-interior-hero.css); only page-specific
   tweaks live here, scoped under .sec-55-cond-hero.
   ============================================================ */

.sec-55-cond-hero .eyebrow {
  margin-bottom: 1rem;
}

.sec-55-cond-hero .sec-00-inthero__meta .btn {
  margin-left: 0.25rem;
}

@media (max-width: 560px) {
  .sec-55-cond-hero .sec-00-inthero__meta .btn {
    width: 100%;
    margin-left: 0;
  }
}

/* css/sections/55-cond-proof.css */
/* ============================================================
   55-cond-proof — one Instrument Serif testimonial quote + one
   comeback card (echoes css/sections/10-testimonials.css quote
   styling and css/sections/16-comebacks.css card styling, own
   class names/root here). Bone section. Scoped under
   .sec-55-cond-proof.
   ============================================================ */

.sec-55-cond-proof {
  background: var(--bone);
}

.sec-55-cond-proof__quote-wrap {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

.sec-55-cond-proof__glyph {
  display: block;
  font-family: var(--font-quote);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.sec-55-cond-proof__quote {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.1rem);
  line-height: 1.35;
  color: var(--text-on-bone);
  margin-bottom: 1.5rem;
}

.sec-55-cond-proof__stars {
  color: var(--ember);
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  margin-bottom: 0.75rem;
}

.sec-55-cond-proof__attr {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-on-bone-dim);
}

.sec-55-cond-proof__comeback {
  display: flex;
  flex-direction: column;
  max-width: 380px;
  margin: clamp(2.5rem, 4vw, 3.5rem) auto 0;
  padding: 1.5rem 1.5rem 1.25rem;
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}

.sec-55-cond-proof__before {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-on-bone-dim);
}

.sec-55-cond-proof__divider {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.7rem 0;
}

.sec-55-cond-proof__dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-glow);
  animation: sec-55-cond-proof-pulse 2.2s ease-in-out infinite;
}
@keyframes sec-55-cond-proof-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); transform: scale(1); }
  50% { box-shadow: 0 0 0 5px transparent; transform: scale(1.3); }
}
html.reduced-motion .sec-55-cond-proof__dot {
  animation: none;
}

.sec-55-cond-proof__arrow {
  color: var(--accent);
  font-size: 1rem;
  line-height: 1;
}

.sec-55-cond-proof__after {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-on-bone);
}

.sec-55-cond-proof__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
}

.sec-55-cond-proof__tag {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-pill);
  background: var(--bone-2);
  border: 1px solid var(--line-bone);
  color: var(--text-on-bone-dim);
}
.sec-55-cond-proof__tag--time {
  color: var(--accent-strong);
  border-color: hsl(var(--accent-h) 60% 50% / 0.4);
}

/* css/sections/55-cond-related.css */
/* ============================================================
   55-cond-related — 3 related-condition cards, white section.
   Scoped under .sec-55-cond-related.
   ============================================================ */

.sec-55-cond-related {
  background: var(--white);
}

.sec-55-cond-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.1rem, 1.8vw, 1.5rem);
}

@media (max-width: 780px) {
  .sec-55-cond-related__grid {
    grid-template-columns: 1fr;
  }
}

.sec-55-cond-related__card {
  display: block;
  background: var(--bone);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.4rem, 2vw, 1.9rem);
  border: 1.5px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: border-color 250ms var(--ease-out), box-shadow 250ms var(--ease-out),
    transform 300ms var(--ease-spring);
}

.sec-55-cond-related__card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-lift);
  transform: translateY(-4px);
}

.sec-55-cond-related__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  margin-bottom: 1rem;
  transition: background 250ms var(--ease-out), color 250ms var(--ease-out);
}

.sec-55-cond-related__card:hover .sec-55-cond-related__num {
  background: var(--accent);
  color: var(--accent-on);
}

.sec-55-cond-related__card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.sec-55-cond-related__card p {
  color: var(--text-on-bone-dim);
  font-size: 0.92rem;
  line-height: 1.55;
}

.sec-55-cond-related__link {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--accent-strong);
  transition: gap 200ms var(--ease-spring), color 200ms var(--ease-out);
}

.sec-55-cond-related__card:hover .sec-55-cond-related__link {
  gap: 0.65rem;
  color: var(--accent);
}

html.reduced-motion .sec-55-cond-related__card {
  transition: none;
}

/* css/sections/55-cond-symptoms.css */
/* ============================================================
   55-cond-symptoms — lived-experience checklist, bone section.
   Check icons draw their stroke on reveal (same dasharray/
   dashoffset technique as .pulse-line--draw in css/base.css,
   applied locally so it doesn't require the shared class).
   Scoped under .sec-55-cond-symptoms.
   ============================================================ */

.sec-55-cond-symptoms {
  background: var(--bone);
}

.sec-55-cond-symptoms__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem) clamp(1.5rem, 3vw, 3rem);
  max-width: 56rem;
}

@media (max-width: 720px) {
  .sec-55-cond-symptoms__list {
    grid-template-columns: 1fr;
  }
}

.sec-55-cond-symptoms__item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  font-size: 1.05rem;
  line-height: 1.5;
}

.sec-55-cond-symptoms__check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: 0.1em;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-on);
}

.sec-55-cond-symptoms__check path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.sec-55-cond-symptoms__item.is-visible .sec-55-cond-symptoms__check path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 700ms var(--ease-out) 250ms;
}

html.reduced-motion .sec-55-cond-symptoms__check path {
  stroke-dashoffset: 0;
  transition: none;
}

.sec-55-cond-symptoms__close {
  margin-top: clamp(2rem, 3vw, 2.75rem);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h4);
}

/* css/sections/55-cond-treatment.css */
/* ============================================================
   55-cond-treatment — dark ink band, 4 phase cards w/ weeks
   chips (echoes css/sections/06-journey.css chip pattern, own
   class names/root here). Design decision: this section ends
   with a shallow OUTGOING wave (ink -> bone) rather than a clean
   edge, since the next fragment (06-proof) is a bone section and
   every other ink-to-bone seam on this template uses a wave.
   Scoped under .sec-55-cond-treatment.
   ============================================================ */

.sec-55-cond-treatment {
  position: relative;
  background: var(--ink);
  padding-block: var(--sp-section) clamp(4rem, 6vw, 6rem);
  overflow: hidden;
}

.sec-55-cond-treatment__head {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.sec-55-cond-treatment__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.1rem, 1.8vw, 1.5rem);
}

@media (max-width: 980px) {
  .sec-55-cond-treatment__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .sec-55-cond-treatment__grid {
    grid-template-columns: 1fr;
  }
}

.sec-55-cond-treatment__card {
  background: var(--ink-2);
  border: 1px solid hsl(0 0% 100% / 0.08);
  border-radius: var(--radius-card);
  padding: clamp(1.5rem, 2vw, 1.9rem);
}

.sec-55-cond-treatment__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  margin-bottom: 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}
.sec-55-cond-treatment__chip-icon { flex-shrink: 0; }

.sec-55-cond-treatment__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 0.6rem;
}

.sec-55-cond-treatment__card h3 {
  color: var(--white);
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

.sec-55-cond-treatment__desc {
  color: var(--text-on-ink-dim);
  font-size: 0.92rem;
  line-height: 1.55;
}

.sec-55-cond-treatment__wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: clamp(32px, 4.5vw, 64px);
  pointer-events: none;
}

/* css/sections/55-cond-waiting.css */
/* ============================================================
   55-cond-waiting — condensed 3-row dim/lit split, echoes
   css/sections/20-waiting.css's visual language (own class
   names/root, own root here). Scoped under .sec-55-cond-waiting.
   ============================================================ */

.sec-55-cond-waiting {
  position: relative;
  background: var(--bone-2);
}

.sec-55-cond-waiting__panel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  box-shadow: var(--shadow-lift);
  border-radius: var(--radius-lg);
}

.sec-55-cond-waiting__half {
  position: relative;
  padding: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
}

.sec-55-cond-waiting__half-title {
  font-size: var(--fs-h4);
  margin-bottom: 1.2rem;
}

.sec-55-cond-waiting__list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.sec-55-cond-waiting__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  line-height: 1.45;
}

.sec-55-cond-waiting__ico {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-top: 0.15em;
}

.sec-55-cond-waiting__half--dim {
  background: var(--white);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  filter: saturate(0.55);
}
.sec-55-cond-waiting__half--dim .sec-55-cond-waiting__half-title {
  color: hsl(30 6% 42%);
}
.sec-55-cond-waiting__half--dim .sec-55-cond-waiting__item {
  color: hsl(30 6% 46%);
}
.sec-55-cond-waiting__ico--x {
  color: hsl(30 6% 52%);
  background: hsl(30 10% 82%);
}

.sec-55-cond-waiting__half--lit {
  background: var(--white);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  box-shadow: inset 0 0 0 1.5px hsl(var(--accent-h) 70% 55% / 0.32), 0 0 46px var(--accent-glow);
  /* Both halves are left-aligned text, so the left half's content naturally
     sits away from the center VS badge while the right half's content sits
     flush against it. Extra left padding here gives the right half the same
     visual clearance from the badge that the left half gets from its own
     outer edge. */
  padding-left: clamp(5rem, 4rem + 3.6vw, 6.25rem);
}
.sec-55-cond-waiting__half--lit .sec-55-cond-waiting__half-title,
.sec-55-cond-waiting__half--lit .sec-55-cond-waiting__item {
  color: var(--text-on-bone);
}
.sec-55-cond-waiting__ico--check {
  color: var(--accent-on);
  background: var(--accent);
}

.sec-55-cond-waiting__vs {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: clamp(52px, 5vw + 36px, 76px);
  height: clamp(52px, 5vw + 36px, 76px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 6px var(--bone-2), var(--shadow-glow);
}
.sec-55-cond-waiting__vs-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.85rem, 0.4rem + 1vw, 1.05rem);
  letter-spacing: 0.03em;
  color: var(--accent-on);
}

/* html:not(.no-js) prefix so this strictly outranks base.css's
   `html:not(.no-js) [data-reveal].is-visible` (specificity 0,3,1) - without
   it, base's `transform: none` won the tie and the badge jumped from
   centered to offset by half its own size the moment .is-visible landed. */
html:not(.no-js) .sec-55-cond-waiting__vs[data-reveal] {
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
html:not(.no-js) .sec-55-cond-waiting__vs[data-reveal].is-visible {
  opacity: 1;
  transform: translate(-50%, -50%);
  animation: sec-55-cond-waiting-spin 1000ms var(--ease-out) 1;
  animation-delay: var(--reveal-delay, 0ms);
}
@keyframes sec-55-cond-waiting-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
html.reduced-motion .sec-55-cond-waiting__vs[data-reveal] {
  opacity: 1;
  transform: translate(-50%, -50%);
  animation: none;
  transition: none;
}

@media (max-width: 720px) {
  .sec-55-cond-waiting__panel {
    grid-template-columns: 1fr;
  }
  .sec-55-cond-waiting__half--dim {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .sec-55-cond-waiting__half--lit {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }
}

@media (max-width: 480px) {
  .sec-55-cond-waiting__half {
    padding: 1.5rem 1.35rem;
  }
}

/* Closer line (money copy) below the split panel */
.sec-55-cond-waiting .sec-55-cond-waiting__closer {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  color: var(--text-on-bone);
  max-width: 44ch;
  margin-inline: auto;
}

/* css/sections/60-svc-choose.css */
/* ============================================================
   60-svc-choose — compact "not sure which you need" band.
   Scoped under .sec-60-svc-choose. Must render on a bone
   background: 12-booking's own wave overlay expects the
   section immediately before it to be bone-colored.
   ============================================================ */

.sec-60-svc-choose {
  background: var(--bone-2);
  border-top: 1px solid var(--line-bone);
  border-bottom: 1px solid var(--line-bone);
  padding-block: clamp(3rem, 2.4rem + 3vw, 5rem);
}

.sec-60-svc-choose__inner {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sec-60-svc-choose__inner .eyebrow {
  justify-content: center;
}

.sec-60-svc-choose__inner h2 {
  margin-top: 0.75rem;
}

.sec-60-svc-choose__lead {
  margin-top: 1rem;
  color: var(--text-on-bone-dim);
  max-width: 48ch;
}

.sec-60-svc-choose__btn {
  margin-top: 2rem;
}

/* css/sections/60-svc-grid.css */
/* ============================================================
   60-svc-grid — Services index: expanded showcase, 5 alternating
   split rows (image left/right). Scoped under .sec-60-svc-grid.
   ============================================================ */

.sec-60-svc-grid {
  background: var(--bone);
}

.sec-60-svc-grid__rows {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 2.25rem + 3vw, 5.5rem);
}

.sec-60-svc-grid__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1.5rem + 2vw, 4rem);
  align-items: center;
}

.sec-60-svc-grid__media {
  order: 1;
  position: relative;
  aspect-ratio: 800 / 560;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-soft);
  transition: box-shadow 400ms var(--ease-out);
}
.sec-60-svc-grid__row:hover .sec-60-svc-grid__media {
  box-shadow: var(--shadow-lift);
}

.sec-60-svc-grid__content { order: 2; }

.sec-60-svc-grid__row--alt .sec-60-svc-grid__media { order: 2; }
.sec-60-svc-grid__row--alt .sec-60-svc-grid__content { order: 1; }

.sec-60-svc-grid__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.85) contrast(1.05) brightness(0.94);
  transform: scale(1.02);
  transition: filter 600ms var(--ease-out), transform 900ms var(--ease-out);
}
.sec-60-svc-grid__row:hover .sec-60-svc-grid__photo,
.sec-60-svc-grid__row:focus-within .sec-60-svc-grid__photo {
  filter: grayscale(0) contrast(1) brightness(1);
  transform: scale(1.06);
}

.sec-60-svc-grid__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.sec-60-svc-grid__tag {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-radius: var(--radius-pill);
  padding: 0.32rem 0.8rem;
  white-space: nowrap;
}

.sec-60-svc-grid__title { margin-bottom: 0.85rem; }

.sec-60-svc-grid__desc {
  color: var(--text-on-bone-dim);
  max-width: 46ch;
  margin-bottom: 1.5rem;
}

.sec-60-svc-grid__benefits {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1.9rem;
}
.sec-60-svc-grid__benefits li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.95rem;
  color: var(--text-on-bone);
}
.sec-60-svc-grid__check {
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--accent);
}

/* --- Mobile stack: media always first, tags order dropped --- */
@media (max-width: 780px) {
  .sec-60-svc-grid__row,
  .sec-60-svc-grid__row--alt {
    grid-template-columns: 1fr;
  }
  .sec-60-svc-grid__media,
  .sec-60-svc-grid__row--alt .sec-60-svc-grid__media {
    order: 1;
  }
  .sec-60-svc-grid__content,
  .sec-60-svc-grid__row--alt .sec-60-svc-grid__content {
    order: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sec-60-svc-grid__media,
  .sec-60-svc-grid__photo {
    transition: none;
  }
}

/* css/sections/60-svc-hero.css */
/* ============================================================
   60-svc-hero — Services index hero.
   Uses ONLY the shared interior hero pattern from
   css/sections/00-interior-hero.css. No overrides needed:
   this file exists for naming/traceability per the section
   ownership contract, intentionally left otherwise empty.
   ============================================================ */

/* css/sections/65-serv-benefits.css */
/* ============================================================
   65-serv-benefits — 4 benefit cards with drawn-check icons.
   Scoped under .sec-65-serv-benefits. Section background is
   white (per spec, echoing 65-serv-helps' third tone); cards
   use bone-2 + shadow-soft so they never read as flat white
   cards on a white section.

   Check-icon draw echoes the .pulse-line--draw technique in
   css/base.css: stroke-dasharray/dashoffset driven purely by
   the [data-reveal].is-visible state core.js already applies
   to the card itself — no extra JS needed.
   ============================================================ */

.sec-65-serv-benefits {
  background: var(--white);
}

.sec-65-serv-benefits__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-gap);
}

.sec-65-serv-benefits__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.9rem;
  background: var(--bone-2);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 2rem 1.5rem;
  transition: box-shadow 400ms var(--ease-out), transform 400ms var(--ease-out);
}
.sec-65-serv-benefits__card:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-4px);
}

.sec-65-serv-benefits__icon {
  color: var(--accent);
  padding: 0.6rem;
  border-radius: 50%;
  background: var(--accent-soft);
}
.sec-65-serv-benefits__icon path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  vector-effect: non-scaling-stroke;
}
.sec-65-serv-benefits__card[data-reveal].is-visible .sec-65-serv-benefits__icon path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 900ms var(--ease-out) 250ms;
}

.sec-65-serv-benefits__text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  max-width: 20ch;
}

@media (max-width: 900px) {
  .sec-65-serv-benefits__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .sec-65-serv-benefits__grid { grid-template-columns: 1fr; }
}

html.reduced-motion .sec-65-serv-benefits__icon path {
  stroke-dashoffset: 0;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .sec-65-serv-benefits__card { transition: none; }
}

/* css/sections/65-serv-faq.css */
/* ============================================================
   65-serv-faq — service-page FAQ accordion (3 questions).
   Scoped under .sec-65-serv-faq. Must render on bone: this is
   the last fragment on the service template and 12-booking's
   own wave overlay expects bone immediately before it.
   ============================================================ */

.sec-65-serv-faq {
  background: var(--bone);
}

.sec-65-serv-faq__accordion {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: 760px;
  margin-inline: auto;
}

.sec-65-serv-faq__item {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.sec-65-serv-faq__trigger {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--text-on-bone);
}

.sec-65-serv-faq__question {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h4);
  letter-spacing: -0.01em;
}

.sec-65-serv-faq__chevron {
  flex-shrink: 0;
  color: var(--accent);
  transition: transform 400ms var(--ease-out);
}
.sec-65-serv-faq__trigger[aria-expanded="true"] .sec-65-serv-faq__chevron {
  transform: rotate(180deg);
}

.sec-65-serv-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 450ms var(--ease-out);
}
.sec-65-serv-faq__trigger[aria-expanded="true"] + .sec-65-serv-faq__panel {
  grid-template-rows: 1fr;
}

.sec-65-serv-faq__panel-inner {
  min-height: 0;
  overflow: hidden;
}
.sec-65-serv-faq__panel-inner p {
  padding: 0 1.5rem 1.5rem;
  color: var(--text-on-bone-dim);
  max-width: 62ch;
}
.sec-65-serv-faq__panel-inner a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
}

html.reduced-motion .sec-65-serv-faq__panel { transition: none; }
html.reduced-motion .sec-65-serv-faq__chevron { transition: none; }

@media (max-width: 520px) {
  .sec-65-serv-faq__trigger { padding: 1rem 1.1rem; }
  .sec-65-serv-faq__panel-inner p { padding: 0 1.1rem 1.25rem; }
}

/* css/sections/65-serv-helps.css */
/* ============================================================
   65-serv-helps — "What It Helps" condition chip-card grid.
   Scoped under .sec-65-serv-helps. Section background is a true
   white (per spec) to add a third tone against the surrounding
   bone sections; cards use bone-2 so they never read as a flat
   white-on-white pairing.
   ============================================================ */

.sec-65-serv-helps {
  background: var(--white);
}

.sec-65-serv-helps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-gap);
}

.sec-65-serv-helps__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--bone-2);
  border: 1px solid var(--line-bone);
  border-radius: var(--radius-card);
  padding: 1.5rem 1.6rem;
  text-decoration: none;
  color: var(--text-on-bone);
  font-family: var(--font-display);
  font-weight: 700;
  transition: transform 350ms var(--ease-out), box-shadow 350ms var(--ease-out),
    border-color 350ms var(--ease-out), background-color 350ms var(--ease-out);
}

.sec-65-serv-helps__card:hover,
.sec-65-serv-helps__card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
  border-color: transparent;
  background: var(--white);
}

.sec-65-serv-helps__label {
  font-size: var(--fs-h4);
  letter-spacing: -0.01em;
}

.sec-65-serv-helps__arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.95rem;
  transition: transform 350ms var(--ease-spring), background-color 300ms var(--ease-out),
    color 300ms var(--ease-out);
}

.sec-65-serv-helps__card:hover .sec-65-serv-helps__arrow,
.sec-65-serv-helps__card:focus-visible .sec-65-serv-helps__arrow {
  transform: translateX(4px);
  background: var(--accent);
  color: var(--accent-on);
}

/* --- Unlinked "Chronic Tightness" card: same footprint, no arrow, no hover lift --- */
.sec-65-serv-helps__card--static {
  cursor: default;
  border-style: dashed;
  justify-content: flex-start;
}
.sec-65-serv-helps__card--static:hover,
.sec-65-serv-helps__card--static:focus-visible {
  transform: none;
  box-shadow: none;
  border-color: var(--line-bone);
  background: var(--bone-2);
}

@media (max-width: 900px) {
  .sec-65-serv-helps__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .sec-65-serv-helps__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .sec-65-serv-helps__card,
  .sec-65-serv-helps__arrow {
    transition: none;
  }
}

/* css/sections/65-serv-hero.css */
/* ============================================================
   65-serv-hero — Service template (dry needling) hero.
   Uses ONLY the shared interior hero pattern from
   css/sections/00-interior-hero.css. No overrides needed:
   this file exists for naming/traceability per the section
   ownership contract, intentionally left otherwise empty.
   ============================================================ */

/* css/sections/65-serv-pairs.css */
/* ============================================================
   65-serv-pairs — "Pairs Well With" 2-card grid. Scoped under
   .sec-65-serv-pairs. Bone section, white cards w/ shadow-soft
   (reuses the site's white-cards-on-bone vocabulary).
   ============================================================ */

.sec-65-serv-pairs {
  background: var(--bone);
}

.sec-65-serv-pairs__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-gap);
}

.sec-65-serv-pairs__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  text-decoration: none;
  color: var(--text-on-bone);
  transition: box-shadow 400ms var(--ease-out), transform 400ms var(--ease-out);
}
.sec-65-serv-pairs__card:hover,
.sec-65-serv-pairs__card:focus-visible {
  box-shadow: var(--shadow-lift);
  transform: translateY(-4px);
}

.sec-65-serv-pairs__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
}

.sec-65-serv-pairs__desc {
  color: var(--text-on-bone-dim);
  max-width: 40ch;
}

.sec-65-serv-pairs__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-top: 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-strong);
  transition: transform 350ms var(--ease-spring), background-color 300ms var(--ease-out),
    color 300ms var(--ease-out);
}
.sec-65-serv-pairs__card:hover .sec-65-serv-pairs__arrow,
.sec-65-serv-pairs__card:focus-visible .sec-65-serv-pairs__arrow {
  transform: translateX(6px);
  background: var(--accent);
  color: var(--accent-on);
}

@media (max-width: 700px) {
  .sec-65-serv-pairs__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .sec-65-serv-pairs__card,
  .sec-65-serv-pairs__arrow {
    transition: none;
  }
}

/* css/sections/65-serv-session.css */
/* ============================================================
   65-serv-session — "What A Session Looks Like" mini timeline.
   Echoes the 19-firstvisit self-drawing track/dot pattern with
   3 stops instead of 4, own scoped classes under
   .sec-65-serv-session. Bone section.
   ============================================================ */

.sec-65-serv-session {
  background: var(--bone);
}

.sec-65-serv-session__head {
  text-align: center;
  margin-inline: auto;
}
.sec-65-serv-session__head .eyebrow { justify-content: center; }
.sec-65-serv-session__head h2 { margin-inline: auto; }

.sec-65-serv-session__timeline {
  position: relative;
}

/* --- Track: centers of a 3-col grid sit at 1/6, 1/2, 5/6 --- */
.sec-65-serv-session__track {
  position: absolute;
  top: 0;
  left: 16.667%;
  right: 16.667%;
  height: 2px;
  transform: translateY(-50%);
  z-index: 1;
}
.sec-65-serv-session__track-base {
  position: absolute;
  inset: 0;
  background: var(--line-bone);
  border-radius: 2px;
}
.sec-65-serv-session__track-fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1400ms var(--ease-out);
}
.sec-65-serv-session__track-ball {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent-glow);
  transform: translate(-50%, -50%);
  transition: left 1400ms var(--ease-out);
}
.sec-65-serv-session__timeline.is-drawn .sec-65-serv-session__track-fill {
  transform: scaleX(1);
}
.sec-65-serv-session__timeline.is-drawn .sec-65-serv-session__track-ball {
  left: 100%;
}

/* --- Stops --- */
.sec-65-serv-session__stops {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  position: relative;
  padding-top: 2.5rem;
  text-align: center;
}

.sec-65-serv-session__stop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sec-65-serv-session__dot {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--line-bone);
  z-index: 2;
  transition: background-color 300ms var(--ease-out), border-color 300ms var(--ease-out),
    box-shadow 300ms var(--ease-out);
}
.sec-65-serv-session__stop:nth-child(1) .sec-65-serv-session__dot { transition-delay: 0ms; }
.sec-65-serv-session__stop:nth-child(2) .sec-65-serv-session__dot { transition-delay: 700ms; }
.sec-65-serv-session__stop:nth-child(3) .sec-65-serv-session__dot { transition-delay: 1350ms; }
.sec-65-serv-session__timeline.is-drawn .sec-65-serv-session__dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 6px var(--accent-glow);
}

.sec-65-serv-session__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 1.8rem + 1.6vw, 3rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

.sec-65-serv-session__text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  max-width: 22ch;
}

/* --- Mobile (≤820px): vertical rail down the left edge --- */
@media (max-width: 820px) {
  .sec-65-serv-session__timeline { padding-left: 1.75rem; }

  /* top/bottom here are only the pre-JS fallback (first paint, or JS
     disabled). js/sections/65-serv-session.js measures the real first/last
     dot positions and sets inline top+height, which the browser lets win
     over bottom (top+height+bottom together is over-constrained, so an
     explicit height always overrides this bottom) — that's what keeps the
     line ending exactly at the last dot instead of wherever the last
     step's bottom edge happens to fall. */
  .sec-65-serv-session__track {
    top: 0.4rem;
    bottom: 0.4rem;
    left: 0.35rem;
    right: auto;
    width: 2px;
    height: auto;
    transform: none;
  }
  .sec-65-serv-session__track-fill {
    transform: scaleY(0);
    transform-origin: top;
  }
  .sec-65-serv-session__track-ball {
    top: 0%;
    left: 50%;
    transition: top 1400ms var(--ease-out);
  }
  .sec-65-serv-session__timeline.is-drawn .sec-65-serv-session__track-fill {
    transform: scaleY(1);
  }
  .sec-65-serv-session__timeline.is-drawn .sec-65-serv-session__track-ball {
    top: 100%;
  }

  .sec-65-serv-session__stops {
    grid-template-columns: 1fr;
    gap: clamp(1.75rem, 6vw, 2.5rem);
    padding-top: 0;
    text-align: left;
  }
  .sec-65-serv-session__stop { align-items: flex-start; }

  .sec-65-serv-session__dot {
    top: 0.3rem;
    left: -1.75rem;
    transform: translate(-50%, -50%);
  }

  .sec-65-serv-session__num { margin-top: 0; }
}

/* --- Reduced motion: fully drawn instantly --- */
html.reduced-motion .sec-65-serv-session__track-fill,
html.reduced-motion .sec-65-serv-session__track-ball,
html.reduced-motion .sec-65-serv-session__dot {
  transition: none !important;
}
html.reduced-motion .sec-65-serv-session__track-fill { transform: scaleX(1); }
html.reduced-motion .sec-65-serv-session__track-ball { left: 100%; }
html.reduced-motion .sec-65-serv-session__dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 6px var(--accent-glow);
}
@media (max-width: 820px) {
  html.reduced-motion .sec-65-serv-session__track-fill { transform: scaleY(1); }
  html.reduced-motion .sec-65-serv-session__track-ball { top: 100%; left: 50%; }
}

/* css/sections/65-serv-what.css */
/* ============================================================
   65-serv-what — "What It Is" explainer split. Scoped under
   .sec-65-serv-what.
   ============================================================ */

.sec-65-serv-what {
  background: var(--bone);
}

.sec-65-serv-what__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 1.5rem + 2vw, 4rem);
  align-items: center;
}

.sec-65-serv-what__copy {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.sec-65-serv-what__copy p {
  color: var(--text-on-bone-dim);
  max-width: 54ch;
}

.sec-65-serv-what__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}

.sec-65-serv-what__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 800 / 600;
  object-fit: cover;
}

.sec-65-serv-what__chip {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  max-width: calc(100% - 2.5rem);
  background: var(--white);
  color: var(--text-on-bone);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.65rem 1.1rem;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-soft);
}

@media (max-width: 860px) {
  .sec-65-serv-what__split {
    grid-template-columns: 1fr;
  }
  .sec-65-serv-what__media { order: -1; }
}

/* css/sections/70-resources.css */
/* ============================================================
   70-resources — Patient Resources hub, Insurance, Testimonials
   & FAQ, Blog (index + post), Spotlight Series. New pages added
   per client request; shares .sec-00-inthero for hero banners.
   ============================================================ */

/* --- Simple card grid (Patient Resources hub) --- */
.sec-70-resources-grid {
  background: var(--bone);
}
.sec-70-resources-grid__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-gap);
}
.sec-70-resources-grid__card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 2rem 1.75rem;
  text-decoration: none;
  transition: box-shadow 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.sec-70-resources-grid__card:hover,
.sec-70-resources-grid__card:focus-visible {
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
}
.sec-70-resources-grid__icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  flex-shrink: 0;
}
.sec-70-resources-grid__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h4);
  color: var(--text-on-bone);
}
.sec-70-resources-grid__desc {
  color: var(--text-on-bone-dim);
  font-size: 0.95rem;
  line-height: 1.5;
}
.sec-70-resources-grid__link {
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent-strong);
}

/* --- Blog index grid --- */
.sec-70-blog-grid {
  background: var(--bone);
}
.sec-70-blog-grid__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-gap);
}
.sec-70-blog-grid__card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.sec-70-blog-grid__card:hover,
.sec-70-blog-grid__card:focus-visible {
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
}
.sec-70-blog-grid__photo {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.sec-70-blog-grid__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.6rem;
  padding: 1.75rem;
}
.sec-70-blog-grid__date {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
.sec-70-blog-grid__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--text-on-bone);
}
.sec-70-blog-grid__excerpt {
  color: var(--text-on-bone-dim);
  font-size: 0.92rem;
  line-height: 1.55;
}
.sec-70-blog-grid__more {
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--accent-strong);
}

/* --- Blog post prose body --- */
.sec-71-blog-post {
  background: var(--bone);
}
.sec-71-blog-post__wrap {
  max-width: 42rem;
  margin-inline: auto;
}
.sec-71-blog-post__meta {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 1.5rem;
}
.sec-71-blog-post__body {
  color: var(--text-on-bone);
  line-height: 1.7;
  font-size: 1.02rem;
}
.sec-71-blog-post__body h2 {
  font-size: var(--fs-h3);
  margin: 2.25rem 0 1rem;
}
.sec-71-blog-post__body h3 {
  font-size: var(--fs-h4);
  margin: 1.75rem 0 0.85rem;
}
.sec-71-blog-post__body p {
  margin-bottom: 1.15rem;
}
.sec-71-blog-post__body ul {
  margin: 0 0 1.15rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sec-71-blog-post__body li {
  list-style: disc;
}
.sec-71-blog-post__body a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: hsl(var(--accent-h) 60% 60% / 0.4);
  text-underline-offset: 2px;
}
.sec-71-blog-post__body a:hover {
  text-decoration-color: currentColor;
}
.sec-71-blog-post__cta {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-bone);
  text-align: center;
}
.sec-71-blog-post__cta p {
  margin-bottom: 1.25rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--text-on-bone);
}
.sec-71-blog-post__back {
  display: inline-block;
  margin-bottom: 2rem;
  color: var(--accent-strong);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}
.sec-71-blog-post__back:hover { color: var(--accent); }

/* --- Spotlight series grid --- */
.sec-72-spotlight {
  background: var(--bone);
}
.sec-72-spotlight__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-gap);
}
.sec-72-spotlight__card {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.sec-72-spotlight__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
}
.sec-72-spotlight__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.sec-72-spotlight__body {
  padding: 1.25rem 1.4rem 1.5rem;
}
.sec-72-spotlight__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-on-bone);
  margin-bottom: 0.2rem;
}

.sec-72-spotlight__role {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-strong);
  margin-bottom: 0.6rem;
}
.sec-72-spotlight__desc {
  color: var(--text-on-bone-dim);
  font-size: 0.9rem;
  line-height: 1.5;
}

@media (max-width: 560px) {
  .sec-70-resources-grid__card {
    padding: 1.4rem;
  }
  .sec-70-blog-grid__body {
    padding: 1.4rem;
  }
}

/* css/sections/73-legal-content.css */
/* ============================================================
   73-legal-content — shared prose styling for simple legal/info
   pages (privacy, accessibility statement). Scoped under
   .sec-legal-content. Loaded on every page per the build's
   "every CSS file loads everywhere" rule; harmless elsewhere
   since the class only exists on these two pages.
   ============================================================ */

.sec-legal-content a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: hsl(var(--accent-h) 60% 60% / 0.4);
  text-underline-offset: 2px;
}
.sec-legal-content a:hover {
  text-decoration-color: currentColor;
}

/* css/sections/74-spotlight-episode.css */
/* ============================================================
   74-spotlight-episode — individual Spotlight Series interview
   pages (/spotlight-series/interview-with-NAME/): video, guest
   details, full transcript. Prose reuses the blog-post body
   (70-resources.css). Also the "Read the interview" link on the
   /spotlight-series/ grid cards.
   ============================================================ */

.sec-74-episode__video {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-bottom: 2rem;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow-soft);
}

.sec-74-episode__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.sec-74-episode__details {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  margin-bottom: 2.5rem;
  color: var(--text-on-bone);
  line-height: 1.6;
}

.sec-74-episode__photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius-card) * 0.6);
  margin-bottom: 1.25rem;
}

.sec-74-episode__facts p + p {
  margin-top: 0.7rem;
}

.sec-74-episode__transcript p strong {
  color: var(--accent-strong);
}

.sec-72-spotlight__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent-strong);
  text-decoration: none;
  transition: gap 200ms var(--ease-spring), color 200ms var(--ease-out);
}

.sec-72-spotlight__more:hover,
.sec-72-spotlight__more:focus-visible {
  gap: 0.65rem;
  color: var(--accent);
}

/* css/sections/75-staff.css */
/* ============================================================
   75-staff — individual staff bio pages (/staff/<slug>/).
   Prose reuses the blog-post body from 70-resources.css; this
   adds the headshot and the patient testimonial quotes.
   Scoped under .sec-75-staff, plus the "Read bio" links on the
   home and About team cards.
   ============================================================ */

.sec-75-staff__photo {
  display: block;
  width: min(100%, 22rem);
  height: auto;
  aspect-ratio: 715 / 871;
  object-fit: cover;
  margin: 0 auto 2.25rem;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}

.sec-75-staff__reviews {
  margin-top: 2.5rem;
}

.sec-75-staff__reviews h2 {
  font-size: var(--fs-h3);
  margin-bottom: 1.25rem;
}

.sec-75-staff__quote {
  margin: 0 0 1.25rem;
  padding: clamp(1.2rem, 3vw, 1.6rem);
  background: var(--white);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  color: var(--text-on-bone);
  line-height: 1.65;
}

.sec-75-staff__quote p + p {
  margin-top: 0.75rem;
}

.sec-75-staff__quote cite {
  display: block;
  margin-top: 0.75rem;
  font-style: normal;
  font-weight: 600;
}

/* Team cards: "Read bio" sits above the booking link */
.sec-09-team__book--bio,
.sec-40-about-team__book--bio {
  display: flex;
  width: fit-content;
}

/* css/sections/96-careers.css */
/* ============================================================
   96-careers — Careers page application form (#apply). Field,
   error and success styles reuse the benefits-check form
   vocabulary from 11-insurance.css.
   ============================================================ */

.sec-96-careers__apply-panel {
  max-width: 44rem;
  margin: clamp(2.5rem, 4vw, 3.5rem) auto 0;
  background: var(--bone-2);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.sec-96-careers__apply-panel h2 {
  font-size: var(--fs-h4);
  margin-bottom: 0.5rem;
}

.sec-96-careers__apply-lead {
  color: var(--ink-2);
  margin-bottom: 1.4rem;
}

.sec-96-careers__form .sec-11-insurance__field input[type="file"] {
  padding: 0.55rem 0.7rem;
  font-size: 0.9rem;
  cursor: pointer;
}

.sec-96-careers__form .sec-11-insurance__field input[type="file"]::file-selector-button {
  margin-right: 0.8rem;
  padding: 0.4rem 0.9rem;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
  cursor: pointer;
}

/* css/sections/99-client-fixes.css */
/* ============================================================
   99 — Lodestar post-launch QA fixes (2026-10-09 audit)
   Loads after every other section stylesheet so these overrides win.
   ============================================================ */

/* --- Chat widget: hide it while the mobile menu is open so it can't
   cover menu items or block the menu's phone / Schedule buttons. --- */
body.sec-01-nav-lock chat-widget {
  display: none !important;
}

/* --- Footer "Areas We Serve" list sits under Hours --- */
.sec-14-footer__heading--areas {
  margin-top: 1.75rem;
}

/* --- Insurance plan tiles: compact rows instead of tall empty boxes --- */
.sec-11-insurance__grid {
  flex: 0 0 auto;
  align-content: start;
}
.sec-11-insurance__chip {
  min-height: 0;
  justify-content: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.25rem;
  text-align: left;
  background: var(--white);
}
.sec-11-insurance__chip::before {
  content: "";
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 62% no-repeat;
}
.sec-11-insurance__chip span {
  font-variant-caps: normal;
  letter-spacing: 0;
  font-size: 1.15rem;
}

@media (max-width: 820px) {
  /* --- Tap targets (44px minimum) --- */
  .sec-01-nav .sec-01-nav__toggle {
    width: 44px;
    height: 44px;
  }
  /* Grow the tappable area without moving the layout */
  .sec-00-inthero__crumbs a,
  .sec-71-blog-post__back,
  .sec-14-footer__contact-link,
  .bm-card__link,
  .sec-09-team__book,
  .sec-40-about-team__book,
  .sec-72-spotlight__more,
  .sec-50-wwt-bodymap__card-link,
  .sec-10-testimonials__lockup-link,
  .sec-18-faq__card-link {
    display: inline-block;
    padding-block: 12px;
    margin-block: -12px;
  }
  .sec-01-nav .sec-01-nav__overlay-phone,
  .sec-12-booking .sec-12-booking__row-link,
  .sec-13-location .sec-13-location__row a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .sec-10-testimonials__dot {
    position: relative;
  }
  .sec-10-testimonials__dot::before {
    content: "";
    position: absolute;
    inset: -18px -4px;
  }

  /* --- Readable text: sentences at 16px, small labels at 13px+ --- */
  .sec-55-cond-treatment__desc,
  .sec-55-cond-proof__before,
  .sec-55-cond-related__card p,
  .sec-12-booking__hint,
  .sec-12-booking__trust,
  .sec-14-footer__copy,
  .sec-14-footer__a11y,
  .sec-14-footer__credit,
  .sec-70-resources-grid__desc,
  .sec-11-insurance__footnote,
  .sec-11-insurance__reassurance,
  .sec-10-testimonials__attr,
  .sec-10-testimonials__snippet,
  .sec-72-spotlight__desc,
  .sec-70-blog-grid__excerpt,
  .sec-22-awards__blurb,
  .sec-16-comebacks__before,
  .sec-07-results__trust,
  .sec-09-team__role,
  .sec-09-team__quote,
  .sec-40-about-story__caption,
  .sec-40-about-values__copy,
  .sec-40-about-typical__item,
  .sec-40-about-team__bio,
  .sec-60-svc-grid li,
  .sec-22-awards .sec-22-awards__blurb,
  .sec-04-conditions .bm-card p,
  .sec-09-team .sec-09-team__ask-text,
  .sec-11-insurance .sec-11-insurance__form-error,
  .sec-11-insurance .sec-11-insurance__success-text {
    font-size: 1rem;
  }
  .eyebrow,
  .sec-55-cond-treatment__chip,
  .sec-12-booking__chip,
  .sec-12-booking__progress-text,
  .sec-10-testimonials__via,
  .sec-72-spotlight__role,
  .sec-06-journey__chip,
  .sec-09-team__chip,
  .sec-09-team__ask-label,
  .sec-40-about-team__chip {
    font-size: 0.8125rem;
  }
}

/* --- Mobile menu: keep the big headings on one line on phones --- */
@media (max-width: 480px) {
  .sec-01-nav .sec-01-nav__overlay-link {
    font-size: clamp(1.625rem, 6.5vw, 2.25rem);
  }
}