/* ===== 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) ---
     Default is a confident clinical blue — deliberately distinct from
     PT Template 1 (teal) and PT Template 2 (green). */
  --accent-h: 151; /* client forest green — #046838, verified from old site's published CSS */
  --accent-s: 93%;
  --accent-l: 21%;
  --accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l));
  --accent-strong: hsl(var(--accent-h) var(--accent-s) 24%);
  --accent-soft: hsl(var(--accent-h) 60% 92%);
  --accent-glow: hsl(var(--accent-h) 80% 45% / 0.35);
  --accent-on: #ffffff;

  /* --- Neutrals --- */
  --ink: #0e2118;
  --ink-2: #142d21;
  --ink-3: #1b3c2c;
  --bone: #f6f3ec;
  --bone-2: #efeae0;
  --white: #ffffff;
  --line-ink: hsl(151 20% 90%);
  --line-bone: hsl(40 15% 84%);

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

  /* --- Highlight (stars, tiny sparks ONLY) --- */
  --ember: #f2a33c;

  /* --- 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(151 30% 10% / 0.08), 0 2px 8px hsl(151 30% 10% / 0.05);
  --shadow-lift: 0 18px 50px hsl(151 35% 10% / 0.16), 0 6px 16px hsl(151 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; }

/* Belt-and-suspenders backstop: js/core.js already reads prefers-reduced-motion
   and reveals/finalizes [data-reveal], counters, the Journey pin, marquees, etc.
   via html.reduced-motion (see per-component rules throughout css/sections/*.css).
   This media query catches anything that isn't already gated by that class,
   e.g. a component added later without a reducedMotion branch. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 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; }
/* On dark (.on-ink) sections the brand accent is a dark green and drops to ~2.4:1
   against --ink, below the 3:1 non-text contrast minimum; use white there instead
   (verified >10:1 against --ink). Text/background colors are unchanged. */
.on-ink :focus-visible { outline-color: var(--white); }

/* --- 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(--accent);
}
.eyebrow::before {
  content: "";
  width: 2rem;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.on-ink .eyebrow { color: hsl(var(--accent-h) 70% 62%); }
.on-ink .eyebrow::before { background: hsl(var(--accent-h) 70% 62%); }

.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); box-shadow: 0 8px 24px var(--accent-glow); }
.btn--solid:hover { background: var(--accent-strong); box-shadow: 0 12px 32px var(--accent-glow); }
.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) ---
   Content is visible by default so it survives JS failure/no-JS (progressive
   enhancement). js/core.js adds html.js-reveal ONLY when it is actually going
   to animate elements in via IntersectionObserver; only then do [data-reveal]
   elements go to their pre-animation (hidden) state, immediately before being
   observed, so there is no dead/stuck-hidden content if a script errors mid-run. */
[data-reveal] { opacity: 1; transform: none; }
html.js-reveal [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.js-reveal [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 {
  display: flex;
  align-items: center;
  gap: 3rem;
  flex-shrink: 0;
  min-width: 100%;
  padding-right: 3rem;
  animation: marquee-scroll var(--marquee-dur, 36s) linear infinite;
}
.marquee:hover .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% - 3rem)); }
}

/* --- 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(0 0% 100% / 0.14);
  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;
}
.pulse-line--draw path { stroke-dashoffset: 0; }
html.js-reveal .pulse-line--draw path { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.js-reveal [data-reveal].is-visible .pulse-line--draw path,
html.js-reveal .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: currentColor;
  opacity: 0.06;
  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-clip {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Feather the top/bottom edges so the glow fades out instead of stopping at the
     section boundary (matters where two dark sections meet). */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
}
.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;
}

/* --- Skip link: first focusable element on every page (see sections/01-nav.html) --- */
.sec-01-nav__skip {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 1000;
  padding: 0.9rem 1.4rem;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: 0 0 10px 10px;
  transition: top 200ms var(--ease-out);
}
.sec-01-nav__skip:focus-visible {
  top: 0;
  outline: 3px solid var(--white);
  outline-offset: -3px;
}

/* ===== 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;
  display: flex;
  align-items: center;
  min-height: clamp(380px, 52vh, 560px);
  /* The accent glow below bleeds past the right edge (right: -10%). On
     mobile that widened every interior page's layout viewport (429px
     document on a 390px phone). clip, not hidden: no new scroll
     container, and the vertical wave bleed is untouched. */
  overflow-x: clip;
  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: none;
  transition: color 200ms var(--ease-out);
}
.sec-00-inthero__crumbs a:hover { color: var(--text-on-ink); }
.sec-00-inthero__crumbs [aria-current] { color: hsl(var(--accent-h) 70% 62%); }

.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;
  /* Light bar (client override): the client's primary logo lockup has dark
     wordmark text, which reads illegibly on the master's dark ink-glass bar.
     Bone-tinted glass keeps the same frosted feel while staying legible. */
  background: hsl(40 35% 97% / 0.82);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid hsl(40 20% 88% / 0.9);
  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(40 30% 97% / 0.96);
  border-bottom-color: hsl(40 20% 85%);
  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;
  flex-shrink: 0;
}

.sec-01-nav .sec-01-nav__logo img {
  height: clamp(2rem, 1.7rem + 1vw, 2.6rem);
  width: auto;
}

/* --- 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-bone-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(--accent);
  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-bone);
}

.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-bone-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-bone); }

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

/* --- 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(--accent);
  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: 44px;
  height: 44px;
  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-bone);
  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;
}

/* --- Desktop fit (1024px+): the bar runs wider than the 1200px content
   container and the logo, links, phone, and CTA scale fluidly between
   1024px and 1440px so the full row (about 1,300px at its largest)
   never runs past the viewport edge. --- */
@media (min-width: 1024px) {
  .sec-01-nav .sec-01-nav__inner {
    width: min(1440px, 100% - 2rem);
    gap: clamp(0.6rem, -2.85rem + 5.39vw, 2rem);
  }
  .sec-01-nav .sec-01-nav__logo img {
    height: clamp(1.75rem, -0.34rem + 3.27vw, 2.6rem);
  }
  .sec-01-nav .sec-01-nav__links {
    gap: clamp(0.5rem, -2.21rem + 4.23vw, 1.6rem);
  }
  /* Nothing in the row may squeeze (the dropdown carets collapsed to 0px) */
  .sec-01-nav .sec-01-nav__links,
  .sec-01-nav .sec-01-nav__actions,
  .sec-01-nav .sec-01-nav__links > *,
  .sec-01-nav .sec-01-nav__caret {
    flex-shrink: 0;
  }
  .sec-01-nav .sec-01-nav__link,
  .sec-01-nav .sec-01-nav__phone {
    font-size: clamp(0.76rem, 0.29rem + 0.73vw, 0.95rem);
  }
  .sec-01-nav .sec-01-nav__actions {
    gap: clamp(0.5rem, -1.96rem + 3.85vw, 1.5rem);
  }
  .sec-01-nav .sec-01-nav__cta {
    padding-inline: clamp(0.85rem, -1.74rem + 4.04vw, 1.9rem);
    font-size: clamp(0.78rem, 0.485rem + 0.46vw, 0.9rem);
  }
}

/* --- Breakpoint: mobile nav (below 1024px the full desktop row can't fit) --- */
@media (max-width: 1023px) {
  .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(--white);
  border: 1px solid hsl(40 20% 90%);
  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-bone-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(40 25% 94%);
  color: var(--text-on-bone);
}

.sec-01-nav .sec-01-nav__dropdown-link--all {
  margin-top: 0.3rem;
  border-top: 1px solid hsl(40 20% 90%);
  border-radius: 0 0 10px 10px;
  color: var(--accent-strong);
  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) --- */
/* The bar (z-index 210) paints over the top of the overlay, so the content
   must start below it: with only the base padding the first group's link
   and expand button sat under the bar, where taps hit the bar instead. */
.sec-01-nav .sec-01-nav__overlay {
  overflow-y: auto;
  justify-content: flex-start;
  padding-top: calc(var(--nav-h) + clamp(1rem, 4vw, 2rem));
}
.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(--accent);
}

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(151 40% 5% / 0.94) 0%, hsl(151 35% 6% / 0.72) 32%, hsl(151 30% 6% / 0.32) 58%, hsl(151 30% 6% / 0.18) 100%),
    linear-gradient(0deg, hsl(151 40% 4% / 0.9) 0%, hsl(151 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: hsl(var(--accent-h) 75% 68%);
}
.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;
  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 {
    font-size: 0.78rem;
  }
  .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%);
  /* The body model's glow bleeds past a 320px viewport; horizontal clip only. */
  overflow-x: 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(151 30% 6% / 0.88) 0%, hsl(151 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;
  }
}

/* ===== 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(--accent);
  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(--accent); }
.sec-06-journey__dot.is-active,
.sec-06-journey__dot[aria-current="true"] {
  background: var(--accent);
  border-color: var(--accent);
  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: hsl(var(--accent-h) 70% 62%);
  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(--accent);
}

.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 --- */
/* These must outrank base.css's html.js-reveal [data-reveal].is-visible (0,3,1),
   because the phases carry data-reveal for the mobile stacked layout. Without the
   html + [data-journey-phase] qualifiers the reveal rule forces every phase to
   opacity 1 and all four stack on top of each other. */
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  html .sec-06-journey .sec-06-journey__phase[data-journey-phase] {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(18px);
    pointer-events: none;
    transition: opacity 550ms var(--ease-out), transform 550ms var(--ease-out);
  }
  html .sec-06-journey .sec-06-journey__phase[data-journey-phase].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(--accent), 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(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  text-align: center;
}
@media (max-width: 760px) {
  .sec-07-results__stats {
    grid-template-columns: repeat(2, 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(--accent);
  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__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(auto-fit, minmax(15rem, 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(--accent);
  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(--accent);
  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(--accent);
  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(--accent);
  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;
  /* minmax(0, ...) so long carrier names wrap instead of widening the page at 320px */
  grid-template-columns: minmax(0, 1fr) minmax(0, 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: repeat(2, minmax(0, 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;
  overflow-wrap: anywhere;
  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: minmax(0, 1fr);
  }
  .sec-11-insurance__accent {
    display: none;
  }
}

@media (max-width: 480px) {
  .sec-11-insurance__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- 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;
  /* var(--line-bone) is ~1.3:1 against this field's own --bone background
     (no fill difference from the page to indicate the control's extent
     otherwise), below the 3:1 non-text contrast minimum: darkened here only,
     not site-wide, to the nearest passing shade (see accessibility report). */
  border: 1.5px solid #978b72;
  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 {
  border-color: var(--accent);
  background: var(--white);
}

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

/* Preferred-office radio choice */
.sec-11-insurance__field--choice { border: 0; padding: 0; margin: 0; min-width: 0; }
.sec-11-insurance__field--choice legend {
  padding: 0;
  margin-bottom: 0.3rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--text-on-bone);
}
.sec-11-insurance__choices { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.sec-11-insurance__choice {
  position: relative;
  flex: 1 1 8rem;
}
.sec-11-insurance__field .sec-11-insurance__choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  padding: 0;
}
.sec-11-insurance__field .sec-11-insurance__choice span {
  display: block;
  text-align: center;
  padding: 0.65rem 0.85rem;
  border: 1.5px solid #978b72;
  border-radius: 12px;
  background: var(--bone);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.sec-11-insurance__choice input:checked + span {
  border-color: var(--accent);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.sec-11-insurance__choice input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.sec-11-insurance__choices.is-invalid .sec-11-insurance__choice span { border-color: #b03a3a; }

.sec-11-insurance__field-error {
  display: block;
  min-height: 1em;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: #b03a3a;
}
.sec-11-insurance__field-error:empty { display: none; }

.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: 3px solid var(--accent); outline-offset: 3px; }

.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: hsl(var(--accent-h) 70% 65%);
}

.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: hsl(var(--accent-h) 70% 65%); }

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

/* Two-office phone list: label + number on one line per location */
.sec-12-booking__row-phone {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1rem 0.5rem;
  margin-top: 0.3rem;
}
.sec-12-booking__row-phone strong {
  font-weight: 500;
  font-family: var(--font-body);
  color: var(--text-on-ink-dim);
  min-width: 6.2rem;
}
.sec-12-booking__row-phone .sec-12-booking__row-link { display: inline; }

/* Location choice (booking step 1 + benefits check) */
.sec-12-booking__locations {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  border: 0;
}
.sec-12-booking__location {
  position: relative;
  flex: 1 1 10rem;
}
.sec-12-booking__location input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.sec-12-booking__location span {
  display: block;
  text-align: center;
  padding: 0.85rem 1rem;
  border: 1.5px solid hsl(0 0% 100% / 0.16);
  border-radius: 14px;
  background: hsl(0 0% 100% / 0.05);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out);
}
.sec-12-booking__location span small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--text-on-ink-dim);
}
.sec-12-booking__location input:checked + span {
  border-color: var(--white);
  background: hsl(0 0% 100% / 0.14);
}
.sec-12-booking__location input:focus-visible + span {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}
.sec-12-booking__locations.is-invalid .sec-12-booking__location span {
  border-color: #ff7b6b;
}

.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-qualified
   to match base.css's html.js-reveal [data-reveal] specificity (this file loads later). */
html .sec-12-booking__chip[data-reveal] {
  transform: translateY(calc(-50% + 18px));
}
html .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(151 28% 13% / 0.92), hsl(151 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(--accent); }
.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 {
  /* reset the browser's default fieldset groove border + padding */
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  transition: transform 300ms var(--ease-out), opacity 300ms var(--ease-out);
}
legend.sec-12-booking__question { padding: 0; float: left; width: 100%; }
legend.sec-12-booking__question + * { clear: both; }
.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(151 15% 62%); }
.sec-12-booking__input:focus {
  border-color: hsl(0 0% 100% / 0.6);
  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: hsl(var(--accent-h) 70% 65%);
  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(--accent);
  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;
  }
  html .sec-12-booking__chip[data-reveal],
  html .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: 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: 460px;
  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: 432px;
  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);
}

/* The sticky Call/Book bar (17-mobilebar, fixed, <=820px) has no spacer in
   the flow, so it covered the footer's last lines at the bottom of every
   page. Reserve exactly its height (same expression as its own CSS). */
@media (max-width: 820px) {
  .sec-14-footer {
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
  }
}

/* Home page only: the Revue reviews card (fixed bottom-left, ~210px tall
   with its offset, no close button) covered the copyright and accessibility
   lines at the bottom of the page on wider screens. Reserve room for it. */
@media (min-width: 821px) {
  body:has(rw-widget-floating) .sec-14-footer {
    padding-bottom: 220px;
  }
}

/* --- 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(--accent);
}

html.reduced-motion .sec-14-footer .sec-14-footer__cta-pulse path {
  transform: scaleY(1);
  stroke: var(--accent);
  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);
  font-size: 0.8rem;
}

.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.3fr 0.85fr 1.3fr 0.85fr;
  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-block;
  margin-bottom: 1.1rem;
}

.sec-14-footer .sec-14-footer__logo img {
  height: 2.6rem;
  width: auto;
}

.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(--accent);
  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__address--next { margin-top: 1.1rem; }
.sec-14-footer .sec-14-footer__office {
  display: block;
  color: var(--text-on-ink);
  font-family: var(--font-display);
  font-weight: 600;
}

.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);
}

/* Touch screens: the stacked phone/fax/email links were ~20px tall with
   0.4rem between them, easy to mis-tap. Give each a 44px target. */
@media (max-width: 820px) {
  .sec-14-footer .sec-14-footer__contact-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin-bottom: 0;
  }
}

.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;
}

/* --- 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(151 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: 3px solid var(--accent); outline-offset: 3px; }

.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: hsl(var(--accent-h) 70% 62%);
}

.sec-16-comebacks__eyebrow {
  color: hsl(var(--accent-h) 70% 62%);
}
.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;
  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(151 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(--accent);
  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(--accent);
  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: hsl(var(--accent-h) 70% 62%);
  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%);
  visibility: visible;
  transition: transform 400ms var(--ease-out), visibility 0ms linear 0ms;
  font-family: var(--font-body);
}

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

/* Third-party floating widgets (home page, loaded by the DearDoc embed)
   default to ~20px from the bottom, which put them on top of this bar's
   Call / Book Now buttons. Lift them clear of the bar wherever it shows.
   The Revue reviews badge is a custom element positioned on its host, so
   a page rule reaches it; DearDoc's launcher lives inside a shadow root and
   is lifted from js/sections/17-mobilebar.js instead. */
/* The Revue badge ships with a near-max z-index, which put it on top of the
   open mobile menu (z-index 199/210). Keep it above page content but under
   the nav at every width. */
rw-widget-floating {
  z-index: 190 !important;
}

@media (max-width: 820px) {
  rw-widget-floating {
    bottom: calc(56px + env(safe-area-inset-bottom) + 12px) !important;
  }
}

/* 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). Visibility
   is delayed until the slide-out finishes so the Call/Book links aren't
   still keyboard-tabbable while sitting off-screen. */
html.is-loaded .sec-17-mobilebar.is-hidden {
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 400ms var(--ease-out), visibility 0ms linear 400ms;
}

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(151 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 */
.sec-17-mobilebar__book {
  background: var(--accent);
  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;
  /* Final geometry (both axes) is measured from the real dot centers in
     js/sections/19-firstvisit.js; these values are only the no-JS fallback. */
  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; }

  .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;
  /* One source of truth for the VS badge: its diameter AND the clearance
     the halves reserve for it, so the two can never drift apart. */
  --vs-size: clamp(56px, 5vw + 40px, 84px);
  --half-pad: clamp(2rem, 1.5rem + 2vw, 3rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  box-shadow: var(--shadow-lift);
  border-radius: var(--radius-lg);
}

.sec-20-waiting__half {
  position: relative;
  padding: var(--half-pad);
  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);
  padding-right: calc(var(--half-pad) + var(--vs-size) / 2 + 0.75rem);
}
/* Darkened from 42%/46% lightness: those measured 4.37:1 / 3.79:1 against
   --bone-2, below the 4.5:1 AA minimum for this body-size text. */
.sec-20-waiting__half--dim .sec-20-waiting__half-title {
  color: hsl(30 6% 38%);
}
.sec-20-waiting__half--dim .sec-20-waiting__item {
  color: hsl(30 6% 38%);
}
.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);
  padding-left: calc(var(--half-pad) + var(--vs-size) / 2 + 0.75rem);
}
.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: var(--vs-size);
  height: var(--vs-size);
  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-qualified to match base.css's html.js-reveal [data-reveal] specificity (this file loads later). */
html .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 .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;
    padding-right: var(--half-pad);
    padding-bottom: calc(var(--half-pad) + var(--vs-size) / 2 + 0.5rem);
  }
  .sec-20-waiting__half--lit {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding-left: var(--half-pad);
    padding-top: calc(var(--half-pad) + var(--vs-size) / 2 + 0.5rem);
  }
}

@media (max-width: 480px) {
  /* Tighter padding via the variable, not a padding shorthand: a shorthand
     here overrode the clearance reserved for the VS badge. */
  .sec-20-waiting__panel {
    --half-pad: 1.5rem;
  }
}

/* ===== 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__count {
  margin-top: 0.75rem;
  font-weight: 600;
  color: var(--text-on-bone);
}

.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;
}

/* --- Google reviews authority card --- */
.sec-22-awards .sec-22-awards__card--google .sec-22-awards__badge {
  filter: drop-shadow(0 6px 18px hsl(151 30% 20% / 0.14));
}

.sec-22-awards .sec-22-awards__google-g {
  position: relative;
  z-index: 1;
}

.sec-22-awards .sec-22-awards__card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.75rem;
  color: var(--accent-strong);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}

.sec-22-awards .sec-22-awards__card-link:hover { text-decoration: underline; }

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: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow-x: visible;
    scroll-snap-type: none;
    padding-inline: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .sec-40-about-gallery__slide {
    flex: none;
    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: hsl(var(--accent-h) 70% 66%);
}

/* ===== 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);
}

/* Flexbox, not grid: with an odd member count (9), a fixed column-count
   grid (including repeat(auto-fit, ...) — it still allocates a fixed
   number of tracks per row) strands the last card alone against a
   phantom empty track. Flex-wrap + justify-content:center reflows the
   same card width per row and centers any incomplete trailing row. */
.sec-40-about-team__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-gap);
}

.sec-40-about-team__card { flex: 1 1 14rem; max-width: 20rem; }

@media (max-width: 980px) {
  .sec-40-about-team__card { flex-basis: calc(50% - var(--sp-gap) / 2); max-width: none; }
}
@media (max-width: 560px) {
  .sec-40-about-team__grid { max-width: 24rem; margin-inline: auto; }
  .sec-40-about-team__card { flex-basis: 100%; }
}

.sec-40-about-team__card {
  background: var(--white);
  border-radius: var(--radius-card);
  overflow: visible;
  box-shadow: var(--shadow-soft);
  padding: 1.3rem 1.3rem 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.2rem 0 1.6rem;
}

.sec-40-about-team__name {
  font-size: var(--fs-h4);
  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.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.28rem 0.65rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

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

.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.85rem;
  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);
}

/* Support staff row (non-provider): same card, no profile link */
.sec-40-about-team__subhead {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  margin-bottom: 1.5rem;
  font-size: var(--fs-h4);
}

/* ===== 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);
}
/* Darkened from 42%/46% lightness: those measured 4.37:1 / 3.79:1 against
   --bone-2, below the 4.5:1 AA minimum for this body-size text. */
.sec-40-about-typical__half--dim .sec-40-about-typical__half-title { color: hsl(30 6% 38%); }
.sec-40-about-typical__half--dim .sec-40-about-typical__item { color: hsl(30 6% 38%); }
.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; }
}

/* ===== 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);
  /* The model's glow (inset: -14%) bleeds past the viewport on mobile and
     widened /what-we-treat/ to 413px on a 390px phone. Horizontal clip only. */
  overflow-x: 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: hsl(var(--accent-h) 70% 62%);
  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;
  /* One source of truth for the VS badge: its diameter AND the clearance
     the halves reserve for it, so the two can never drift apart. */
  --vs-size: clamp(52px, 5vw + 36px, 76px);
  --half-pad: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  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: var(--half-pad);
}

.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);
  padding-right: calc(var(--half-pad) + var(--vs-size) / 2 + 0.75rem);
}
.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);
  padding-left: calc(var(--half-pad) + var(--vs-size) / 2 + 0.75rem);
}
.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: var(--vs-size);
  height: var(--vs-size);
  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-qualified to match base.css's html.js-reveal [data-reveal] specificity (this file loads
   later). Without it, base.css's transform: none won once revealed and the badge lost its
   translate(-50%, -50%), sitting half its size below/right of the seam (same pattern as 20-waiting). */
html .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 .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;
    padding-right: var(--half-pad);
    padding-bottom: calc(var(--half-pad) + var(--vs-size) / 2 + 0.5rem);
  }
  .sec-55-cond-waiting__half--lit {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding-left: var(--half-pad);
    padding-top: calc(var(--half-pad) + var(--vs-size) / 2 + 0.5rem);
  }
}

@media (max-width: 480px) {
  /* Tighter padding via the variable, not a padding shorthand: a shorthand
     here overrode the clearance reserved for the VS badge. */
  .sec-55-cond-waiting__panel {
    --half-pad: 1.4rem;
  }
}

/* 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;
  /* Final geometry (both axes) is measured from the real dot centers in
     js/sections/65-serv-session.js; these values are only the no-JS fallback. */
  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; }

  .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-team-bio.css ===== */
/* ============================================================
   70-team-bio — bio copy, credentials, and "ask me about" callout
   for individual provider pages.
   ============================================================ */

.sec-70-team-bio__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
@media (max-width: 860px) {
  .sec-70-team-bio__grid { grid-template-columns: 1fr; }
}

.sec-70-team-bio__copy p { margin-top: 1.1rem; color: var(--text-on-bone-dim); }
.sec-70-team-bio__copy p:first-child { margin-top: 0; }

.sec-70-team-bio__aside {
  background: var(--bone-2);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
}

.sec-70-team-bio__aside-title {
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.sec-70-team-bio__ask {
  margin-bottom: 1.5rem;
}
.sec-70-team-bio__ask-label {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-on-bone-dim);
}
.sec-70-team-bio__ask-text { font-weight: 600; margin-top: 0.25rem; }

.sec-70-team-bio__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 2rem;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
.sec-70-team-bio__back:hover { text-decoration: underline; }

/* ===== css/sections/70-team-hero.css ===== */
/* ============================================================
   70-team-hero — shared hero for individual provider bio pages.
   Extends sec-00-inthero with a circular portrait.
   ============================================================ */

.sec-70-team-hero__layout {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 3.5rem);
  flex-wrap: wrap;
}

.sec-70-team-hero__media {
  position: relative;
  flex-shrink: 0;
  width: clamp(9rem, 14vw, 12rem);
  height: clamp(9rem, 14vw, 12rem);
}

.sec-70-team-hero__ring {
  position: absolute;
  inset: -0.5rem;
  border-radius: 50%;
  border: 1px solid hsl(0 0% 100% / 0.25);
}

.sec-70-team-hero__photo-wrap {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 12px 32px hsl(0 0% 0% / 0.35);
}

.sec-70-team-hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sec-70-team-hero__body { max-width: 40ch; }

.sec-70-team-hero__role {
  margin-top: 0.5rem;
  color: var(--text-on-ink-dim);
  font-size: var(--fs-body);
}

/* ===== css/sections/80-blog-body.css ===== */
/* ============================================================
   80-blog-body — single post article copy + sidebar CTA.
   Scoped under .sec-80-blog-body
   ============================================================ */

.sec-80-blog-body__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: clamp(2.5rem, 4vw, 5rem);
  align-items: start;
}

.sec-80-blog-body__copy {
  overflow-wrap: break-word;
  color: var(--text-on-bone-dim);
  font-size: var(--fs-body);
  line-height: 1.75;
  max-width: 68ch;
}

.sec-80-blog-body__copy h2,
.sec-80-blog-body__copy h3 {
  color: var(--text-on-bone);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.sec-80-blog-body__copy p {
  margin-bottom: 1.2rem;
}

.sec-80-blog-body__copy li {
  margin-bottom: 0.5rem;
}

.sec-80-blog-body__copy blockquote {
  margin: 1.5rem 0;
  padding-left: 1.4rem;
  border-left: 3px solid var(--accent);
  font-family: var(--font-quote);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--text-on-bone);
}

.sec-80-blog-body__back {
  display: inline-block;
  margin-top: 2rem;
  font-weight: 600;
  color: var(--accent-strong);
}

.sec-80-blog-body__aside {
  position: sticky;
  top: 6rem;
  background: var(--bone-2);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  box-shadow: var(--shadow-soft);
}

.sec-80-blog-body__aside-title {
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--text-on-bone);
}

.sec-80-blog-body__aside p {
  color: var(--text-on-bone-dim);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

@media (max-width: 860px) {
  /* minmax(0, 1fr), not 1fr: a 1fr track grows to fit long unbreakable
     strings (pasted URLs, long words) and widened posts past the phone. */
  .sec-80-blog-body__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .sec-80-blog-body__aside {
    position: static;
  }
}

/* ===== css/sections/80-blog-hero.css ===== */
/* ============================================================
   80-blog-hero — simple editorial hero for the blog index and
   individual post pages. Scoped under .sec-80-blog-hero
   ============================================================ */

.sec-80-blog-hero__layout {
  max-width: 46rem;
}

.sec-80-blog-hero__meta {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.9rem;
  font-size: 0.9rem;
  color: hsl(0 0% 100% / 0.7);
}

/* ===== css/sections/81-blog-index.css ===== */
/* ============================================================
   81-blog-index — text-card grid listing every post.
   Scoped under .sec-81-blog-index
   ============================================================ */

.sec-81-blog-index {
  background: var(--bone);
}

.sec-81-blog-index__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--sp-gap);
}

.sec-81-blog-index__card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  box-shadow: var(--shadow-soft);
  transition: box-shadow 300ms var(--ease-out), transform 300ms var(--ease-out);
}

.sec-81-blog-index__card:hover,
.sec-81-blog-index__card:focus-within {
  box-shadow: var(--shadow-lift);
  transform: translateY(-4px);
}

.sec-81-blog-index__date {
  font-size: 0.85rem;
  color: var(--text-on-bone-dim);
  margin-bottom: 0.5rem;
}

.sec-81-blog-index__title {
  font-size: 1.15rem;
  margin-bottom: 0.6rem;
}

.sec-81-blog-index__title a {
  color: var(--text-on-bone);
}
.sec-81-blog-index__title a:hover {
  color: var(--accent-strong);
}

.sec-81-blog-index__excerpt {
  color: var(--text-on-bone-dim);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  flex: 1;
}

.sec-81-blog-index__link {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent-strong);
}

/* ===== css/sections/82-spotlight.css ===== */
/* ============================================================
   82-spotlight — Spotlight Series (interview episodes).
   Index cards on /spotlight-series/; episode pages reuse the
   blog hero + body and add the video, guest card and transcript.
   ============================================================ */

.sec-82-spotlight {
  background: var(--bone);
}

.sec-82-spotlight__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--sp-gap);
  max-width: 62rem;
}

.sec-82-spotlight__card {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  box-shadow: var(--shadow-soft);
  transition: box-shadow 300ms var(--ease-out), transform 300ms var(--ease-out);
}

.sec-82-spotlight__card:hover,
.sec-82-spotlight__card:focus-within {
  box-shadow: var(--shadow-lift);
  transform: translateY(-4px);
}

.sec-82-spotlight__card-img {
  flex: 0 0 auto;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  object-fit: cover;
}

.sec-82-spotlight__card-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sec-82-spotlight__card-title {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}
.sec-82-spotlight__card-title a { color: var(--text-on-bone); }
.sec-82-spotlight__card-title a:hover { color: var(--accent-strong); }

.sec-82-spotlight__card-topic {
  color: var(--text-on-bone-dim);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 0.9rem;
}

.sec-82-spotlight__card-link {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent-strong);
}

@media (max-width: 480px) {
  .sec-82-spotlight__card { flex-direction: column; }
}

/* --- Episode page --- */
.sec-82-spotlight__video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--ink, #111);
  box-shadow: var(--shadow-soft);
  margin-bottom: 1.75rem;
}

.sec-82-spotlight__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.sec-82-spotlight__guest {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  background: var(--bone-2);
  border-radius: var(--radius-card);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.75rem;
}

.sec-82-spotlight__guest-img {
  flex: 0 0 auto;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  object-fit: cover;
}

.sec-82-spotlight__guest-facts {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  min-width: 0;
}

.sec-82-spotlight__guest-facts div {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.75rem;
}

.sec-82-spotlight__guest-facts dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--text-on-bone-dim);
}

.sec-82-spotlight__guest-facts dd {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-on-bone);
}

@media (max-width: 560px) {
  .sec-82-spotlight__guest { flex-direction: column; align-items: flex-start; }
  .sec-82-spotlight__guest-facts div { grid-template-columns: 1fr; gap: 0.1rem; }
}

.sec-82-spotlight__transcript {
  border-left: 3px solid var(--accent);
  padding-left: clamp(1rem, 2.5vw, 1.5rem);
}

.sec-82-spotlight__copy h2 {
  font-size: var(--fs-h4);
  margin: 2rem 0 0.6rem;
}

/* ===== css/sections/90-legal-body.css ===== */
.sec-90-legal-body__wrap {
  max-width: 46rem;
  /* Long email addresses must wrap on 320px phones instead of widening the page */
  overflow-wrap: anywhere;
}

.sec-90-legal-body__wrap h2 {
  margin-top: 2.5rem;
  font-size: var(--fs-h4);
}

.sec-90-legal-body__wrap h2:first-child {
  margin-top: 0;
}

.sec-90-legal-body__wrap p {
  margin-top: 0.9rem;
  color: var(--ink-2);
}

.sec-90-legal-body__wrap ul:not([class]) {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.9rem;
  padding-left: 1.25rem;
  color: var(--ink-2);
}

.sec-90-legal-body__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
}

.sec-90-legal-body__list {
  display: grid;
  gap: 1.75rem;
  margin-top: 1rem;
}

.sec-90-legal-body__item h2 {
  font-size: var(--fs-h4);
  margin-bottom: 0.35rem;
}

.sec-90-legal-body__item a {
  color: var(--accent-strong);
  font-weight: 600;
}

.sec-90-legal-body__item p {
  margin-top: 0.35rem;
  color: var(--ink-2);
}

/* ===== css/sections/94-fitness.css ===== */
/* ============================================================
   94-fitness — Specialized Fitness hub + program pages (CrossFit
   Surge, HYROX, DEKA, Senior Fitness). Follows the section order
   and layout of the client's existing pages (alternating light /
   dark bands, text-and-photo splits, program cards, tiles) using
   this site's tokens, type, and buttons. Scoped under .sec-94-fit
   ============================================================ */

.sec-94-fit { background: var(--bone); }
.sec-94-fit--white { background: var(--white); }
.sec-94-fit.on-ink { background: var(--ink); }

/* --- Headings + copy --- */
.sec-94-fit__title {
  font-size: var(--fs-h3);
  color: var(--accent);
  line-height: 1.15;
}
.on-ink .sec-94-fit__title { color: var(--white); }
.sec-94-fit__subtitle {
  font-size: var(--fs-h4);
  color: var(--accent);
}
.on-ink .sec-94-fit__subtitle { color: var(--white); }

.sec-94-fit__copy > * + * { margin-top: 1rem; }
.sec-94-fit__copy > * + .sec-94-fit__title { margin-top: clamp(1.75rem, 3vw, 2.25rem); }
.sec-94-fit__copy > .sec-94-fit__title + *,
.sec-94-fit__copy > .sec-94-fit__subtitle + * { margin-top: 1.1rem; }
.sec-94-fit__copy p,
.sec-94-fit__copy li {
  color: var(--text-on-bone-dim, var(--ink-2));
  font-size: var(--fs-body);
  line-height: 1.7;
}
.on-ink .sec-94-fit__copy p,
.on-ink .sec-94-fit__copy li { color: var(--text-on-ink-dim); }
.sec-94-fit__copy p a {
  color: var(--accent);
  font-weight: 600;
}
.on-ink .sec-94-fit__copy p a { color: var(--white); }

.sec-94-fit__center {
  max-width: 60rem;
  margin-inline: auto;
  text-align: center;
}
.sec-94-fit__center .sec-94-fit__btns,
.sec-94-fit__center .sec-94-fit__social { justify-content: center; }

/* --- Bullet + check lists --- */
/* ul. prefix outranks base.css's ul[class] list reset */
ul.sec-94-fit__bullets {
  list-style: disc;
  padding-left: 1.25rem;
}
.sec-94-fit__bullets li + li { margin-top: 0.2rem; }
.sec-94-fit__bullets li::marker { color: var(--accent); }
.on-ink .sec-94-fit__bullets li::marker { color: hsl(var(--accent-h) 70% 62%); }

.sec-94-fit__checks { list-style: none; padding: 0; }
.sec-94-fit__checks li {
  position: relative;
  padding-left: 1.9rem;
}
.sec-94-fit__checks li + li { margin-top: 0.45rem; }
.sec-94-fit__checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--accent-soft)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23046838' 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 / 70% no-repeat;
}

/* --- Text + photo splits --- */
.sec-94-fit__split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4.5vw, 4rem);
  align-items: center;
}
.sec-94-fit__split--media-first { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.sec-94-fit__split--media-first > .sec-94-fit__media { order: -1; }
.sec-94-fit__split--top { align-items: start; }
.sec-94-fit__split + .sec-94-fit__split {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line-bone);
}
@media (max-width: 820px) {
  .sec-94-fit__split,
  .sec-94-fit__split--media-first { grid-template-columns: 1fr; }
  .sec-94-fit__split--media-first > .sec-94-fit__media { order: 0; }
}

.sec-94-fit__media { min-width: 0; }
.sec-94-fit__photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  object-fit: cover;
  background: var(--bone-2);
}
.on-ink .sec-94-fit__photo { box-shadow: 0 18px 40px hsl(0 0% 0% / 0.35); }
.sec-94-fit__photo--portrait { aspect-ratio: 3 / 4; }
.sec-94-fit__photo--landscape { aspect-ratio: 4 / 3; }
.sec-94-fit__photo--square { aspect-ratio: 1; }

.sec-94-fit__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.5rem);
}

/* Logos keep their own proportions and are never cropped */
.sec-94-fit__logo {
  display: block;
  height: auto;
  max-width: 100%;
}
.sec-94-fit__logo--hub { width: min(100%, 28rem); margin: 0 auto clamp(1.5rem, 3vw, 2.25rem); }
.sec-94-fit__banner {
  display: flex;
  justify-content: center;
  padding: clamp(1rem, 3vw, 2rem);
  border-radius: var(--radius-card);
  background: #000;
}
.sec-94-fit__logo--banner { width: min(100%, 500px); }
.sec-94-fit__logo--small { width: min(100%, 13rem); border-radius: var(--radius-card); }
.sec-94-fit__logo--deka { width: min(100%, 15rem); }

/* --- Buttons + social --- */
.sec-94-fit__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}
.sec-94-fit__copy > .sec-94-fit__btns { margin-top: 1.75rem; }
.sec-94-fit__btns--spaced { margin-top: clamp(2rem, 4vw, 3rem); }

.sec-94-fit__social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.sec-94-fit__btns--spaced + .sec-94-fit__social { margin-top: clamp(2rem, 4vw, 3rem); }
.sec-94-fit__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  background: var(--accent);
  color: var(--accent-on);
  transition: background-color 200ms var(--ease-out), transform 300ms var(--ease-spring);
}
.sec-94-fit__social a:hover { background: var(--accent-strong); transform: translateY(-2px); }
.sec-94-fit__social svg { width: 1.4rem; height: 1.4rem; }
.sec-94-fit__social--lg a { width: 4rem; height: 4rem; border-radius: 18px; }
.sec-94-fit__social--lg svg { width: 2rem; height: 2rem; }

/* --- Embedded media --- */
.sec-94-fit__frame {
  position: relative;
  width: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow-soft);
}
.sec-94-fit__frame--fb { aspect-ratio: 560 / 314; }
.sec-94-fit__frame--video { aspect-ratio: 16 / 9; }
.sec-94-fit__frame iframe,
.sec-94-fit__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* --- Class times --- */
.sec-94-fit__times {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}
.sec-94-fit__times p + p { margin-top: 0.5rem; }
.sec-94-fit__times .sec-94-fit__note { margin-top: 1.25rem; font-style: italic; }

/* --- Hub: program cards over the gym photo --- */
.sec-94-fit--photo-bg {
  position: relative;
  isolation: isolate;
}
.sec-94-fit__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.28;
}
.sec-94-fit__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-gap);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
@media (max-width: 820px) {
  .sec-94-fit__cards { grid-template-columns: 1fr; }
}
.sec-94-fit__card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--radius-card);
  background: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.92);
  box-shadow: 0 18px 40px hsl(0 0% 0% / 0.3);
}
.sec-94-fit__card > * + * { margin-top: 0.9rem; }
.sec-94-fit__card p,
.sec-94-fit__card li { color: var(--white); }
.sec-94-fit__card .sec-94-fit__bullets li::marker { color: var(--white); }
.sec-94-fit__card .sec-94-fit__btns { margin-top: auto; padding-top: 1.25rem; }
.sec-94-fit__card .btn--light { background: var(--white); color: var(--accent); }
.sec-94-fit__card .btn--light:hover { background: var(--bone); }

/* --- Hub: "Fitness for every stage of life" tiles --- */
.sec-94-fit__tiles {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-block: 1.25rem 1.75rem;
}
@media (max-width: 820px) {
  .sec-94-fit__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .sec-94-fit__tiles { grid-template-columns: 1fr; }
}
.sec-94-fit__copy .sec-94-fit__tiles li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 1rem 1.15rem;
  border-radius: var(--radius-card);
  background: var(--white);
  color: var(--ink-2);
  font-size: 0.98rem;
  line-height: 1.4;
  box-shadow: 0 10px 24px hsl(0 0% 0% / 0.2);
}
.sec-94-fit__tiles li::before {
  content: "";
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--accent-soft)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23046838' 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 / 70% no-repeat;
}

/* ===== css/sections/95-program.css ===== */
/* ============================================================
   95-program — CrossFit Surge / Hyrox / DEKA / Senior Fitness /
   Specialized Fitness program pages. Reuses the site's existing
   tokens, hero, and card vocabulary rather than a new visual
   language: sec-00-inthero for heroes, .section-head for eyebrow
   + h2, and the same drawn-check icon as 65-serv-benefits for
   checklists.
   ============================================================ */

.sec-95-program__block {
  max-width: 62rem;
}

.sec-95-program__block + .sec-95-program__block {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

.sec-95-program__block p {
  color: var(--text-on-bone-dim, var(--ink-2));
  font-size: var(--fs-body);
  line-height: 1.7;
  margin-top: 0.9rem;
  max-width: 60ch;
}

.sec-95-program__block h2 {
  font-size: var(--fs-h4);
}

.sec-95-program__checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin-top: 1.4rem;
}

.sec-95-program__check {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  background: var(--bone-2);
  border-radius: var(--radius-card);
  padding: 0.9rem 1.1rem;
}

.sec-95-program__check-icon {
  flex: none;
  margin-top: 0.15rem;
  color: var(--accent-strong);
}

.sec-95-program__check p {
  margin: 0;
  max-width: none;
  font-size: 0.98rem;
}

.sec-95-program__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.sec-95-program__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-gap);
  margin-top: 1.5rem;
}

@media (max-width: 900px) {
  .sec-95-program__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .sec-95-program__cards {
    grid-template-columns: 1fr;
  }
}

.sec-95-program__card {
  background: var(--bone-2);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 1.75rem;
  transition: box-shadow 400ms var(--ease-out), transform 400ms var(--ease-out);
}
.sec-95-program__card:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-4px);
}

.sec-95-program__card h3 {
  font-size: var(--fs-h5, 1.15rem);
  margin-bottom: 0.5rem;
}

.sec-95-program__card p {
  margin: 0;
  max-width: none;
  color: var(--ink-2);
  font-size: 0.96rem;
  line-height: 1.6;
}

.sec-95-program__card a.sec-95-program__card-link {
  display: inline-block;
  margin-top: 0.75rem;
  font-weight: 600;
  color: var(--accent-strong);
}

.sec-95-program__coach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--sp-gap);
  margin-top: 1.5rem;
}

.sec-95-program__coach {
  text-align: center;
}

.sec-95-program__coach-photo-wrap {
  aspect-ratio: 1;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--bone-2);
  box-shadow: var(--shadow-soft);
}

.sec-95-program__coach-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sec-95-program__coach-name {
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-weight: 600;
}

.sec-95-program__coach-role {
  color: var(--ink-2);
  font-size: 0.88rem;
  margin-top: 0.2rem;
}

/* --- Photo layouts (Specialized Fitness page; images from the live site) --- */
.sec-95-program__block.sec-95-program__split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.sec-95-program__split--reverse .sec-95-program__figure { order: -1; }

@media (max-width: 820px) {
  .sec-95-program__block.sec-95-program__split { grid-template-columns: 1fr; }
  .sec-95-program__split--reverse .sec-95-program__figure { order: 0; }
}

.sec-95-program__figure {
  margin: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--bone-2);
}
.sec-95-program__photo {
  display: block;
  width: 100%;
  height: auto;
}
.sec-95-program__split .sec-95-program__photo {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  max-height: 34rem;
}
.sec-95-program__figure figcaption {
  padding: 0.7rem 1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink-2);
}

.sec-95-program__duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-gap);
  margin-top: 1.5rem;
}
@media (max-width: 520px) {
  .sec-95-program__duo { grid-template-columns: 1fr; }
}
.sec-95-program__duo .sec-95-program__photo {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.sec-95-program__figure--wide { margin-top: 1.25rem; }
.sec-95-program__figure--wide .sec-95-program__photo {
  aspect-ratio: 21 / 8;
  object-fit: cover;
}

#crossfit-surge { scroll-margin-top: 6rem; }

/* ===== css/sections/96-careers.css ===== */
/* ============================================================
   96-careers — Careers page. Reuses .sec-90-legal-body__wrap for
   the intro paragraph and the site's card/checklist vocabulary.
   ============================================================ */

.sec-96-careers__block {
  max-width: 62rem;
  /* The resume email address must wrap on 320px phones */
  overflow-wrap: anywhere;
}

.sec-96-careers__block + .sec-96-careers__block,
.sec-90-legal-body__wrap + .sec-96-careers__block {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

.sec-96-careers__block h2 {
  font-size: var(--fs-h4);
  margin-bottom: 0.5rem;
}

.sec-96-careers__positions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin-top: 1.2rem;
}

.sec-96-careers__position {
  background: var(--bone-2);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 1.5rem 1.75rem;
}

.sec-96-careers__position h3 {
  font-size: var(--fs-h5, 1.1rem);
  margin-bottom: 0.4rem;
}

.sec-96-careers__position p {
  color: var(--ink-2);
  font-size: 0.96rem;
  line-height: 1.6;
  margin: 0;
}

.sec-96-careers__apply {
  margin-top: 1.25rem;
  font-weight: 600;
}
.sec-96-careers__apply a {
  color: var(--accent-strong);
}

.sec-96-careers__quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
  margin-top: 1.2rem;
}

.sec-96-careers__quote {
  margin: 0;
  background: var(--bone-2);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-card);
  padding: 1.5rem 1.75rem;
}

.sec-96-careers__quote p {
  color: var(--ink-2);
  font-size: 0.96rem;
  line-height: 1.6;
  margin: 0;
}

.sec-96-careers__quote cite {
  display: block;
  margin-top: 0.9rem;
  font-style: normal;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-on-bone);
}

.sec-96-careers__benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 0;
  list-style: none;
}

.sec-96-careers__benefits li {
  background: var(--bone-2);
  border-radius: var(--radius-card);
  padding: 0.85rem 1.1rem;
  font-weight: 500;
  font-size: 0.95rem;
}


/* --- 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/97-resource-synergy.css ===== */
/* ============================================================
   97-resource-synergy — Synergy Between Video Series page grid.
   ============================================================ */

.sec-97-synergy__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.sec-97-synergy__video {
  margin: 0;
}

.sec-97-synergy__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--bone-2);
  box-shadow: var(--shadow-soft);
}

.sec-97-synergy__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.sec-97-synergy__video figcaption {
  margin-top: 0.65rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-on-bone, var(--ink));
}

/* Each video already has a figcaption with its title; hide the facade's
   overlay label here so the title isn't shown twice. */
.sec-97-synergy__frame .video-facade__label { display: none; }

/* ===== css/sections/98-resource-products.css ===== */
/* ============================================================
   98-resource-products — Recommended Products page grid.
   ============================================================ */

.sec-98-products__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
  max-width: 62rem;
}

.sec-98-products__item {
  background: var(--bone-2);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 1.5rem 1.75rem;
}

.sec-98-products__item h3 {
  font-size: var(--fs-h5, 1.1rem);
  margin-bottom: 0.4rem;
}

.sec-98-products__item p {
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* ===== css/sections/99-video-facade.css ===== */
/* ============================================================
   99-video-facade — click-to-load video embeds
   A thumbnail button stands in for a YouTube/Facebook player and is
   swapped for the real <iframe> on click (js/sections/98-video-facade.js).
   The players cost ~1MB each, so pages with videos (Synergy series,
   Spotlight interviews, CrossFit Surge) no longer load them up front.
   Fills its parent the same way the iframe did (parents are
   position: relative + aspect-ratio). Scoped under .video-facade.
   ============================================================ */

.video-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  cursor: pointer;
  background-color: var(--ink, #111);
  background-size: cover;
  background-position: center;
  color: #fff;
}

.video-facade::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, hsl(0 0% 0% / 0.55), hsl(0 0% 0% / 0.1) 60%);
  transition: background-color 200ms var(--ease-out, ease);
}

.video-facade .video-facade__play {
  position: relative;
  width: 68px;
  height: 48px;
  border-radius: 14px;
  background: hsl(0 0% 0% / 0.72);
  transition: background-color 200ms var(--ease-out, ease), transform 200ms var(--ease-out, ease);
}

.video-facade .video-facade__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
}

.video-facade:hover .video-facade__play,
.video-facade:focus-visible .video-facade__play {
  background: var(--accent, #c00);
  transform: scale(1.06);
}

.video-facade .video-facade__label {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.85rem;
  font-family: var(--font-display, inherit);
  font-weight: 600;
  font-size: 0.95rem;
  text-align: left;
  text-shadow: 0 1px 3px hsl(0 0% 0% / 0.6);
}

html.reduced-motion .video-facade .video-facade__play { transition: none; }