/* BUILD OUTPUT: concatenation of css/fonts.css + css/sections/*.css (see build.mjs). Do not edit. */

/* ---- css/fonts.css ---- */
/* ============================================================
   Self-hosted web fonts (latin subset), served from /assets/fonts/.
   Replaces the Google Fonts stylesheet (speed audit 2026-10-13): one
   fewer render-blocking cross-origin request, and the two main files
   are preloaded in every page head so text renders in the final font
   without a swap jump. Files and unicode-range copied from the Google
   Fonts CSS for the same families/axes (Bricolage Grotesque and
   Instrument Sans are variable: one file covers every weight).
   Bundled into css/sections.bundle.css by build.mjs.
   ============================================================ */

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

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

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

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

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

/* ---- 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;
  /* ::before below is a glow at right:-10%. Without clipping it widens the layout
     viewport on mobile (a 390px device rendered a 429px viewport, i.e. the whole page
     zoomed out with a dead gutter) on every interior page. overflow-x:clip contains it
     without creating a scroll container and without clipping the wave on the Y axis. */
  overflow-x: clip;
  display: flex;
  align-items: center;
  min-height: clamp(380px, 52vh, 560px);
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 5vw, 4rem));
  padding-bottom: clamp(4rem, 9vw, 7rem); /* clears the wave */
}

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

.sec-00-inthero__crumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  font-size: 0.82rem;
  color: var(--text-on-ink-dim);
}
.sec-00-inthero__crumbs a {
  color: inherit;
  text-decoration: 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: var(--text-on-ink); }

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

/* --- Tap targets (QA 2026-10-12) ---
   Invisible ::after extends the tap area to at least 44px tall without moving
   anything visually. */
.sec-00-inthero__crumbs a {
  position: relative;
}

.sec-00-inthero__crumbs a::after {
  content: "";
  position: absolute;
  inset: -12px -4px;
}

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

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

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

html.is-scrolled .sec-01-nav .sec-01-nav__bar {
  background: hsl(182.3 55% 38% / 0.94);
  border-bottom-color: hsl(0 0% 100% / 0.12);
  box-shadow: var(--shadow-soft);
}

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

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

/* --- Logo --- */
.sec-01-nav .sec-01-nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 0.9rem + 0.4vw, 1.35rem);
  letter-spacing: -0.01em;
  color: var(--text-on-ink);
  text-decoration: none;
  white-space: nowrap;
}

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

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

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

.sec-01-nav .sec-01-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--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-ink);
}

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

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

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

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

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

/* --- 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; /* 44x44 minimum tap target (was 42) */
  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-ink);
  border-radius: 2px;
  transition: transform 320ms var(--ease-spring), opacity 200ms var(--ease-out);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.sec-01-nav .sec-01-nav__dropdown-link--all {
  margin-top: 0.3rem;
  border-top: 1px solid hsl(0 0% 100% / 0.1);
  border-radius: 0 0 10px 10px;
  color: var(--text-on-ink);
  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) --- */
.sec-01-nav .sec-01-nav__overlay { overflow-y: auto; justify-content: flex-start; }
.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; }

/* --- Image logo (optional) ---
   The default logo is a text wordmark. To use a client's real logo, swap the wordmark in
   sections/01-nav.html for:
     <a href="/" class="sec-01-nav__logo" aria-label="[CLINIC_NAME_PLACEHOLDER] home">
       <img class="sec-01-nav__logo-img" src="assets/images/logo.webp"
            alt="[CLINIC_NAME_PLACEHOLDER]" width="560" height="166">
     </a>
   Height-driven so it tracks the bar's scrolled shrink. Supply a white/knockout logo:
   the bar is dark in every state. */
.sec-01-nav .sec-01-nav__logo-img {
  height: clamp(30px, 2.4vw, 38px);
  width: auto;
  display: block;
  transition: height 400ms var(--ease-out);
}
html.is-scrolled .sec-01-nav .sec-01-nav__logo-img {
  height: clamp(26px, 2vw, 32px);
}

/* --- Long dropdowns ---
   A client with many condition/service pages produces a tall single-column dropdown that
   can run off a laptop screen. Add sec-01-nav__dropdown--cols2 to the panel for two
   columns; the max-height is a backstop for anything longer still.
   NOTE: if you add TOP-LEVEL nav items, or the clinic name is long, re-check the desktop
   row just above the hamburger breakpoint and raise it if the CTA clips. The breakpoint is
   1200px because the row (logo + 4 links + phone + CTA) needs about 1200px once the logo is
   a full clinic name; it used to be 900px, which left the CTA overflowing the container
   from 901px up to ~1200px on every load. The shrink guards below keep a longer-than-usual
   name from breaking the row outright, but an image logo is the better answer. */
.sec-01-nav .sec-01-nav__inner { flex-wrap: nowrap; }
.sec-01-nav .sec-01-nav__logo {
  min-width: 0;
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sec-01-nav .sec-01-nav__actions { flex-shrink: 0; }
.sec-01-nav .sec-01-nav__dropdown {
  max-height: calc(100vh - var(--nav-h) - 3rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sec-01-nav .sec-01-nav__dropdown--cols2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  gap: 0 1rem;
  min-width: 470px;
}
.sec-01-nav .sec-01-nav__dropdown--cols2 .sec-01-nav__dropdown-link--all {
  grid-column: 1 / -1;
}

/* --- Tap targets (QA 2026-10-12) ---
   Invisible ::after extends the tap area to at least 44px tall without moving
   anything visually. */
/* The logo clips overflow (long-name guard above), so it grows by padding instead of a
   pseudo-element; the negative margin keeps the bar layout unchanged. */
.sec-01-nav .sec-01-nav__logo {
  padding-block: 9px;
  margin-block: -9px;
}

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

/* .on-ink's default white eyebrow would still read fine over the photo scrim,
   but the hero keeps its own lighter accent tint here for a touch of brand
   color against the photo, which the flat-ink sections can't spare (orange
   fails contrast against --ink itself, see base.css). */
.sec-02-hero .eyebrow { color: hsl(var(--accent-h) 70% 62%); }
.sec-02-hero .eyebrow::before { background: hsl(var(--accent-h) 70% 62%); }

/* --- 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(182.3 40% 5% / 0.94) 0%, hsl(182.3 35% 6% / 0.72) 32%, hsl(182.3 30% 6% / 0.32) 58%, hsl(182.3 30% 6% / 0.18) 100%),
    linear-gradient(0deg, hsl(182.3 40% 4% / 0.9) 0%, hsl(182.3 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);
  /* Warm-toned light gray, not --text-on-ink-dim (a teal-tinted light gray
     tuned for the flat --ink fill elsewhere) — this sits on a warm photo
     scrim instead, where the teal tint would read as mismatched. */
  color: hsl(29.1 15% 80%);
  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);
}

/* .btn--ghost defaults to a solid `currentColor` border, which is plain
   white here via .on-ink — a touch stark against the busy photo, so it's
   softened to translucent white and brought back to full white on hover. */
.sec-02-hero__cta .btn--ghost {
  border-color: hsl(0 0% 100% / 0.55);
}
.sec-02-hero__cta .btn--ghost:hover {
  border-color: var(--white);
}

/* --- 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 {
  /* This was a faux wordmark (display font, 700, larger, small-caps) sitting among
     body-font badge chips, which reads as a font-loading glitch rather than a logo. */
  font-family: var(--font-body);
  font-variant-caps: normal;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  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 --- */
/* No padding-inline: the track's own `gap` already spaces every child
   (chips and diamonds alike) evenly. Padding here on top of that gap made
   the diamond's neighbors sit farther apart than two adjacent chips. */
.sec-03-trust__stars {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--ember);
}

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

@media (max-width: 640px) {
  .sec-03-trust__chip--logo {
    font-size: 0.92rem;
  }
  .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%);
}

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

/* These dots sit on a photograph, so no single outline color can be guaranteed
   3:1 against whatever's directly behind it. A white ring + a dark ring
   together clear 3:1 against any photo content. */
.sec-04-conditions .bm-dot:focus-visible {
  outline: none;
  box-shadow: var(--shadow-soft), 0 0 0 3px #fff, 0 0 0 6px #0e2425;
}

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

/* --- Tap targets (QA 2026-10-12) ---
   Invisible ::after extends the tap area to at least 44px tall without moving
   anything visually. */
.sec-04-conditions .bm-dot::after {
  content: "";
  position: absolute;
  inset: -10px; /* from the padding box: 24px + 2x10 = 44px */
  border-radius: 50%;
}

.sec-04-conditions .bm-card__link {
  position: relative;
}

.sec-04-conditions .bm-card__link::after {
  content: "";
  position: absolute;
  inset: -11px 0;
}

/* ---- 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--needling .sec-05-services__photo {
  /* source photo is a wide shot with empty wall in the middle; recenter
     the crop on the clinician so the tile isn't just blank wall */
  object-position: 18% 28%;
}

.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(182.3 30% 6% / 0.88) 0%, hsl(182.3 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 {
  /* Flat --ink, matching 07-results directly below: a gradient down to a
     separate "deep" stop here read as a seam/band that didn't fit the rest
     of the dark act, so the two sections now share one solid color instead. */
  background: var(--ink);
  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: var(--text-on-ink);
  margin-bottom: 0.75rem;
}

.sec-06-journey__promise {
  color: var(--text-on-ink);
  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(--text-on-ink); }

/* --- Desktop pinned crossfade --- */
/* Parent-qualified selectors so these outrank base.css's
   [data-reveal].is-visible (the phases carry data-reveal for mobile). */
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  .sec-06-journey .sec-06-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);
  }
  .sec-06-journey .sec-06-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 {
  /* Flat --ink, same solid color as 06-journey directly above — one
     continuous dark band instead of a gradient seam between them. */
  background: var(--ink);
  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(--text-on-ink);
  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);
}

/* --- Phone text sizes (QA 2026-10-12) ---
   Reading text is at least 16px on phones (<=820px, the mobile-bar breakpoint).
   Small uppercase labels and chips stay label-sized but no smaller than ~13px. */
@media (max-width: 820px) {
  .sec-07-results__trust {
    font-size: 1rem;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Bios differ in length, so the "Book with ..." link floated at a different height in each
   card. Push it to the bottom and give the role line a consistent box. */
.sec-09-team__card { display: flex; flex-direction: column; }
.sec-09-team__body { display: flex; flex-direction: column; flex: 1; }
.sec-09-team__book { margin-top: auto; }
.sec-09-team__role { min-height: 2.6em; }

/* --- Tap targets (QA 2026-10-12) ---
   Invisible ::after extends the tap area to at least 44px tall without moving
   anything visually. */
.sec-09-team__book {
  position: relative;
}

.sec-09-team__book::after {
  content: "";
  position: absolute;
  inset: -11px 0;
}

/* --- Phone text sizes (QA 2026-10-12) ---
   Reading text is at least 16px on phones (<=820px, the mobile-bar breakpoint).
   Small uppercase labels and chips stay label-sized but no smaller than ~13px. */
@media (max-width: 820px) {
  .sec-09-team__role,
  .sec-09-team__quote,
  .sec-09-team__ask-text,
  .sec-09-team__book {
    font-size: 1rem;
  }
}

/* ---- 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;
  /* accent orange is unreadable against --ink (client's teal); this section
     is flat --ink, not a photo scrim, so it gets the dark text treatment too. */
  color: var(--text-on-ink);
  opacity: 0.5;
}

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

/* Each dot is a 44x44 tap target (QA 2026-10-12: the old 9px dots were too small
   to tap on phones). The visible dot is drawn by ::after at the original size, so
   the row looks the same; the 44px boxes replace the old 0.5rem gap. */
.sec-10-testimonials__dots {
  display: flex;
  gap: 0;
}

.sec-10-testimonials__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}

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

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

/* --- Review wall ---
   Opposite-direction vertical marquee. This was frozen to a static grid at one point
   because clients read the moving cards as "cut off mid-review". It is animated again,
   rebuilt so it does not reproduce that complaint:
     1. the viewport is tall enough that whole reviews are always readable, never slivers
     2. the top and bottom edges are a gradient mask, so partials fade rather than hard-cut
     3. it pauses on hover and on focus-within, so anyone can stop it and read
     4. mobile and reduced-motion fall back to the plain static grid
   DO NOT shorten the wall or thin the review count without redoing the maths below. Both
   are load-bearing, and getting either wrong brings the "truncated" complaint straight back. */
.sec-10-testimonials__wall {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-gap);
  align-items: start;
  /* Sizing is driven by the loop maths, not by eye. With card height C, gap G and pitch
     P = C + G, the number of cards guaranteed FULLY inside the clear zone at EVERY phase
     of the scroll is floor((clear - C) / P). For three full cards, clear >= 3P + C.
     With C=188 and G=20 => P=208, so the clear zone must be >= 812px. The fade bands are a
     fixed 120px each (not a %, so they cannot grow with the section and eat the clear
     zone), hence a minimum height of ~812 + 240.
     The two columns carry DISJOINT sets of 6 reviews (12 unique in total). Both halves of
     that matter:
       - disjoint, because rotating ONE shared list by half only separates the columns at
         t=0; they run at different speeds (54s vs 62s) and drift back into sync, so the
         same reviewer appears in both columns.
       - 6 per column, because a set must be TALLER than the window or a void opens at an
         edge on every loop. 6 cards = 1248px against a ~1060px window. 4 would be 832px.
     Two sets per column and translateY(-50%) = exactly one set, so the loop has no seam. */
  height: clamp(1060px, 108vh, 1180px);
  overflow: hidden;
  position: relative;
  /* 120px is deep relative to a ~188px card, so a partial fades across most of its body
     instead of showing crisp text and then vanishing at a hard edge. */
  -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%);
}

.sec-10-testimonials__col {
  height: 100%;
  overflow: hidden;
}

.sec-10-testimonials__col-track {
  display: flex;
  flex-direction: column;
  gap: 0;
  will-change: transform;
}

.sec-10-testimonials__col-set {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* The set carries its own TRAILING gap and the track has gap:0. If the gap lived on the
     track instead, the seam between set 1 and set 2 would be one gap short and the loop
     would visibly jump every cycle. */
  padding-bottom: 20px;
}

.sec-10-testimonials [data-marquee-dup] { display: flex; }

.sec-10-testimonials__col[data-dir="up"] .sec-10-testimonials__col-track {
  animation: sec-10-marquee-up 54s linear infinite;
}
.sec-10-testimonials__col[data-dir="down"] .sec-10-testimonials__col-track {
  animation: sec-10-marquee-down 62s linear infinite;
}

/* Anyone can stop it to actually read a review */
.sec-10-testimonials__wall:hover .sec-10-testimonials__col-track,
.sec-10-testimonials__wall:focus-within .sec-10-testimonials__col-track {
  animation-play-state: paused;
}

/* --- Mobile: static grid ---
   A narrow screen makes moving text materially harder to read, and the mask would eat a
   larger share of a small viewport. Below 820px this reverts to the plain grid: full
   height, no mask, no animation, duplicate sets hidden. */
@media (max-width: 820px) {
  .sec-10-testimonials__wall {
    grid-template-columns: 1fr;
    height: auto;
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .sec-10-testimonials__col {
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: var(--sp-gap);
  }
  .sec-10-testimonials__col-track { animation: none !important; transform: none !important; }
  .sec-10-testimonials__col-set { padding-bottom: 0; gap: var(--sp-gap); }
  .sec-10-testimonials [data-marquee-dup] { display: none; }
  /* Both columns stay visible and simply stack. The columns hold DISJOINT reviews, so
     hiding either one drops half of them from every phone. */
  /* The mobile column is static, so height is free: stop truncating mid-sentence. */
  .sec-10-testimonials__snippet { -webkit-line-clamp: 6; }
}

/* --- Reduced motion: static grid, and the height/mask must go too, or the wall keeps a
   fixed tall box with most of its cards masked out and unreachable. --- */
@media (prefers-reduced-motion: reduce) {
  .sec-10-testimonials__wall {
    height: auto;
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .sec-10-testimonials__col { height: auto; overflow: visible; }
  .sec-10-testimonials__col-track { animation: none !important; transform: none !important; }
  .sec-10-testimonials__col-set { padding-bottom: 0; }
  .sec-10-testimonials [data-marquee-dup] { display: none; }
}
/* core.js also sets html.reduced-motion; mirror it so the toggle works without a reload. */
html.reduced-motion .sec-10-testimonials__wall {
  height: auto;
  overflow: visible;
  -webkit-mask-image: none;
          mask-image: none;
}
html.reduced-motion .sec-10-testimonials__col { height: auto; overflow: visible; }
html.reduced-motion .sec-10-testimonials__col-track { animation: none !important; transform: none !important; }
html.reduced-motion .sec-10-testimonials__col-set { padding-bottom: 0; }
html.reduced-motion .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(--text-on-ink);
  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 stacking for the wall lives with the wall rules above, not here: it used to also
   carry `.__col--b { display: none }`, which silently dropped half the reviews from every
   phone once the two columns held DISJOINT sets. */

/* --- Reduced motion: no auto-slide feel --- */
@media (prefers-reduced-motion: reduce) {
  .sec-10-testimonials__slide { transition: opacity 200ms linear; transform: none; }
}

html.reduced-motion .sec-10-testimonials__slide { transition: opacity 200ms linear; transform: none; }

/* --- Tap targets (QA 2026-10-12) ---
   Invisible ::after extends the tap area to at least 44px tall without moving
   anything visually. */
.sec-10-testimonials__lockup-link {
  position: relative;
}

.sec-10-testimonials__lockup-link::after {
  content: "";
  position: absolute;
  inset: -9px 0;
}

/* --- Phone text sizes (QA 2026-10-12) ---
   Reading text is at least 16px on phones (<=820px, the mobile-bar breakpoint).
   Small uppercase labels and chips stay label-sized but no smaller than ~13px. */
@media (max-width: 820px) {
  .sec-10-testimonials__snippet,
  .sec-10-testimonials__attr {
    font-size: 1rem;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 480px) {
  .sec-11-insurance__grid {
    grid-template-columns: repeat(2, 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;
  border: 1.5px solid var(--line-bone);
  border-radius: 12px;
  background: var(--bone);
  color: var(--text-on-bone);
  font-size: 0.95rem;
  transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}

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

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

.sec-11-insurance__field-error {
  display: block;
  margin-top: 0.4rem;
  min-height: 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #b03a3a;
}

.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);
}
/* No outline: none override — the tabindex="-1" success panel gets focus
   programmatically after submit; showing the default focus ring there
   confirms to sighted keyboard users where focus landed. */

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

/* --- Phone text sizes (QA 2026-10-12) ---
   Reading text is at least 16px on phones (<=820px, the mobile-bar breakpoint).
   Small uppercase labels and chips stay label-sized but no smaller than ~13px. */
/* Inputs at 16px also stop iPhone Safari from zooming the page when a field is tapped. */
@media (max-width: 820px) {
  .sec-11-insurance__footnote,
  .sec-11-insurance__reassurance,
  .sec-11-insurance__field input,
  .sec-11-insurance__field select,
  .sec-11-insurance__field textarea {
    font-size: 1rem;
  }
  .sec-11-insurance__field span,
  .sec-11-insurance__field small,
  .sec-11-insurance__field-error {
    font-size: 0.875rem;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* --- Response-time trust chip, docked to the panel's top edge --- */
.sec-12-booking__chip {
  position: absolute;
  top: 0;
  right: clamp(1.5rem, 4vw, 2.5rem);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: calc(100% - 3rem);
  background: var(--white);
  color: var(--text-on-bone);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-soft);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  line-height: 1.2;
  white-space: nowrap;
}
.sec-12-booking__chip-icon {
  flex-shrink: 0;
  color: var(--accent);
}
/* Dock the chip half-on/half-off the panel's top border without fighting
   the generic [data-reveal] rules (which set transform to none/28px). */
.sec-12-booking__chip[data-reveal] {
  transform: translateY(calc(-50% + 18px));
}
.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(182.3 45% 42% / 0.95), hsl(182.3 55% 32% / 0.95));
  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 {
  transition: transform 300ms var(--ease-out), opacity 300ms var(--ease-out);
}
.sec-12-booking__step[hidden] { display: none; }

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

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

.sec-12-booking__question {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--text-on-ink);
  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(--text-on-ink);
  font-size: 1.05rem;
  transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out);
}
.sec-12-booking__input::placeholder { color: hsl(182.3 15% 25%); }
.sec-12-booking__input:focus {
  border-color: var(--accent);
  background: hsl(0 0% 100% / 0.08);
}
/* outline: none removed — the global .on-ink :focus-visible ring (css/base.css)
   now renders on top of this border/background treatment instead of nothing. */
.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(--text-on-ink);
  font-weight: 500;
  overflow-wrap: anywhere;
}
.sec-12-booking__edit {
  background: none;
  border: none;
  padding: 0.2rem 0.3rem;
  color: var(--text-on-ink);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sec-12-booking__edit:hover { opacity: 0.7; }

.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(--text-on-ink); }
.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(--text-on-ink);
  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(--text-on-ink);
  margin-bottom: 0.6rem;
}

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

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

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

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

/* Each step is a <fieldset>. Nothing reset the UA widget styling, so browsers drew a 2px
   grooved border around every step of the primary conversion form. min-width:0 also stops
   the legacy fieldset min-content sizing from blowing out flex/grid children. */
.sec-12-booking__step,
.sec-12-booking fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* --- Tap targets (QA 2026-10-12) ---
   Invisible ::after extends the tap area to at least 44px tall without moving
   anything visually. */
.sec-12-booking__row-link {
  position: relative;
}

.sec-12-booking__row-link::after {
  content: "";
  position: absolute;
  inset: -10px 0;
}

/* --- Phone text sizes (QA 2026-10-12) ---
   Reading text is at least 16px on phones (<=820px, the mobile-bar breakpoint).
   Small uppercase labels and chips stay label-sized but no smaller than ~13px. */
@media (max-width: 820px) {
  .sec-12-booking__row-text,
  .sec-12-booking__row-sub,
  .sec-12-booking__trust,
  .sec-12-booking__hint,
  .sec-12-booking__error {
    font-size: 1rem;
  }
  .sec-12-booking__chip {
    font-size: 0.85rem;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* --- Tap targets (QA 2026-10-12) ---
   Invisible ::after extends the tap area to at least 44px tall without moving
   anything visually. */
.sec-13-location__row a {
  position: relative;
}

.sec-13-location__row a::after {
  content: "";
  position: absolute;
  inset: -6px 0;
}

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

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

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

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

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

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

.sec-14-footer .sec-14-footer__cta:hover .sec-14-footer__cta-pulse path,
.sec-14-footer .sec-14-footer__cta.is-visible .sec-14-footer__cta-pulse path {
  transform: scaleY(1);
  stroke: var(--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);
}

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

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

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

.sec-14-footer .sec-14-footer__logo {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--text-on-ink);
  text-decoration: none;
  margin-bottom: 0.9rem;
}

.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__contact-link {
  display: block;
  color: var(--text-on-ink-dim);
  text-decoration: none;
  margin-bottom: 0.4rem;
  transition: color 200ms var(--ease-out);
  word-break: break-word;
}

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

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

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

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

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

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

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

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

/* The sticky mobile Call/Book bar (sections/17-mobilebar.html) is fixed to
   the viewport bottom at this same breakpoint, with no spacer in the
   document flow. Without this, its 56px + safe-area height permanently
   covers the footer's last line. Matches .sec-17-mobilebar's own height
   exactly rather than a guessed value. */
@media (max-width: 820px) {
  .sec-14-footer .sec-14-footer__bottom-inner {
    padding-bottom: calc(1.5rem + 56px + env(safe-area-inset-bottom));
  }
}

/* Image logo (optional). Swap the text wordmark in sections/14-footer.html for:
     <a href="/" class="sec-14-footer__logo" aria-label="[CLINIC_NAME_PLACEHOLDER] home">
       <img class="sec-14-footer__logo-img" src="assets/images/logo.webp" alt="[CLINIC_NAME_PLACEHOLDER]">
     </a> */
.sec-14-footer .sec-14-footer__logo-img {
  height: 42px;
  width: auto;
  display: block;
}

@media (max-width: 640px) {
  /* nowrap + a large floor ran the watermark far wider than a phone, cutting the last word. */
  .sec-14-footer .sec-14-footer__watermark { font-size: clamp(2.1rem, 8.6vw, 8rem); }
}

/* --- Tap targets (QA 2026-10-12) ---
   Footer phone / email links get a 44px-tall row on phones (they were 26px),
   and the footer logo a 44px-tall tap area. */
@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__logo {
  position: relative;
}

.sec-14-footer .sec-14-footer__logo::after {
  content: "";
  position: absolute;
  inset: -2px 0;
}

/* --- Phone text sizes (QA 2026-10-12) ---
   Reading text is at least 16px on phones (<=820px, the mobile-bar breakpoint).
   Small uppercase labels and chips stay label-sized but no smaller than ~13px. */
@media (max-width: 820px) {
  .sec-14-footer .sec-14-footer__bottom-inner {
    font-size: 1rem;
  }
}

/* ---- 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(29.1 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;
}
/* No outline: none override — this headline gets focus programmatically
   (tabindex="-1", never Tab-reachable); showing the default focus ring
   confirms to sighted keyboard users where focus landed. */

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

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

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

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

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

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

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

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

/* Left half: teal glass (client's dark-section color, not the old near-black).
   Lightness dropped from the original 38% to 20% (same hue/saturation as
   --ink) — axe-core measured white text on the 38% fill at ~3.6:1, failing
   the 4.5:1 minimum (this text is 15.2px/700, under the 18.66px bold
   large-text threshold, so the stricter ratio applies). 20% matches --ink's
   already-verified 9.0:1 for white text. */
.sec-17-mobilebar__call {
  background: hsl(182.3 55% 20% / 0.92);
  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;
  }
}

/* --- Tap targets (QA 2026-10-12) ---
   Invisible ::after extends the tap area to at least 44px tall without moving
   anything visually. */
.sec-18-faq__card-link {
  position: relative;
}

.sec-18-faq__card-link::after {
  content: "";
  position: absolute;
  inset: -11px 0;
}

/* ---- 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) ---
   These left/right/top values are only the pre-JS fallback (initial paint
   and no-JS). js/sections/19-firstvisit.js measures the actual rendered
   dot positions and overwrites left/width/top (or top/height/left on the
   mobile vertical layout below) with exact pixel values on every load,
   font-load, resize, breakpoint change and body-height change — a
   percentage/rem guess here can't account for dot positions that shift
   with copy length or reveal timing. No transform: it would double up
   against the JS-computed value. */
.sec-19-firstvisit__track {
  position: absolute;
  top: 0;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  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 ---
   --vs-size drives the VS badge's own width/height AND the extra
   clearance reserved on both halves below, from one value, so the
   badge's footprint and its reserved space can never drift out of
   sync (previously only the lit half reserved this clearance; the
   dim half had none, so the badge overlapped its text). */
.sec-20-waiting__panel {
  --vs-size: clamp(56px, 5vw + 40px, 84px);
  --vs-base-pad: clamp(2rem, 1.5rem + 2vw, 3rem);
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  box-shadow: var(--shadow-lift);
  border-radius: var(--radius-lg);
}

.sec-20-waiting__half {
  position: relative;
  padding: var(--vs-base-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);
  /* The VS circle sits centered on the shared border and overlaps into this
     half by its own radius too, so it needs the same reserved clearance
     the lit half gets below (was previously missing entirely). */
  padding-right: calc(var(--vs-base-pad) + var(--vs-size) / 2);
}
.sec-20-waiting__half--dim .sec-20-waiting__half-title {
  color: hsl(30 6% 42%);
}
.sec-20-waiting__half--dim .sec-20-waiting__item {
  color: hsl(30 6% 46%);
}
.sec-20-waiting__ico--x {
  color: hsl(30 6% 52%);
  background: hsl(30 10% 82%);
}

/* --- Right half: lit / accent --- */
.sec-20-waiting__half--lit {
  background: var(--white);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  box-shadow: inset 0 0 0 1.5px hsl(var(--accent-h) 70% 55% / 0.32), 0 0 46px var(--accent-glow);
  /* The VS circle sits centered on the shared border and overlaps into this
     half by its own radius, so its content needs that much extra left
     padding to clear it by the same margin the outer edge gives it. */
  padding-left: calc(var(--vs-base-pad) + var(--vs-size) / 2);
}
.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. left/top:50% is a valid fallback for
   the desktop side-by-side layout only (the grid's equal 1fr columns
   guarantee the seam sits at exactly 50%). The stacked mobile layout
   below has no such guarantee (dim/lit heights vary with copy), so
   js/sections/20-waiting.js measures the real seam there and overrides
   top with an exact pixel value. --- */
.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);
}

.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);
}
.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;
    /* Stacked layout: the VS circle now sits on the horizontal seam between
       the two halves, not the vertical one, so clearance moves from
       padding-right to padding-bottom. */
    padding-right: var(--vs-base-pad);
    padding-bottom: calc(var(--vs-base-pad) + var(--vs-size) / 2);
  }
  .sec-20-waiting__half--lit {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    /* Stacked layout: the VS circle sits centered over the seam, not to this
       half's left, so it doesn't need the desktop's extra left clearance,
       but does need it above instead. */
    padding-left: var(--vs-base-pad);
    padding-top: calc(var(--vs-base-pad) + var(--vs-size) / 2);
  }
}

@media (max-width: 480px) {
  /* A plain padding shorthand here would reset the badge clearance the
     760px block reserves on dim's bottom / lit's top (padding shorthand
     sets all four sides). Shrink --vs-base-pad instead so the reserved
     sides shrink together with it, and set left/right (not reserved at
     this breakpoint) directly, plus the two sides that AREN'T reserved
     at this breakpoint (dim's top, lit's bottom). */
  .sec-20-waiting__panel {
    --vs-base-pad: 1.4rem;
  }
  .sec-20-waiting__half {
    padding-left: 1.4rem;
    padding-right: 1.4rem;
  }
  .sec-20-waiting__half--dim {
    padding-top: 1.6rem;
  }
  .sec-20-waiting__half--lit {
    padding-bottom: 1.6rem;
  }
}

/* The VS badge carries a wide accent glow at z-index 2 and the half titles were static, so
   on mobile the glow washed out "If you start this week". */
.sec-20-waiting__half-title { position: relative; z-index: 3; }

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

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

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

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

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

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

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

/* Real Google "G" mark badge: a clean white disc instead of the gold
   medallion treatment (that gold styling was tuned for the award medal,
   not a review-source badge, and clashes with Google's own brand colors). */
.sec-22-awards .sec-22-awards__badge--google {
  background: var(--white);
  border-radius: 50%;
  box-shadow: var(--shadow-soft);
  filter: none;
}
.sec-22-awards .sec-22-awards__badge--google .sec-22-awards__badge-inner {
  color: #3c3c3c;
  gap: 0.2rem;
}
.sec-22-awards .sec-22-awards__google-g {
  margin-bottom: 0.1rem;
}
.sec-22-awards .sec-22-awards__badge--google .sec-22-awards__badge-big {
  font-size: 1.05rem;
  max-width: none;
}
.sec-22-awards .sec-22-awards__badge--google .sec-22-awards__badge-stars {
  font-size: 0.7rem;
  color: #f5b400;
  letter-spacing: 0.1em;
}

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

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

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

/* --- Phone text sizes (QA 2026-10-12) ---
   Reading text is at least 16px on phones (<=820px, the mobile-bar breakpoint).
   Small uppercase labels and chips stay label-sized but no smaller than ~13px. */
@media (max-width: 820px) {
  .sec-22-awards .sec-22-awards__blurb {
    font-size: 1rem;
  }
}

/* ---- css/sections/23-prose.css ---- */
/* ============================================================
   23 — Prose
   Long-form text pages. The template's other sections are all composed layouts, and
   base.css resets every margin to 0, so a page of bare <p>/<ul> renders as one
   unreadable block. This section is the minimum needed for the plain content pages a
   client site almost always has and the six master pages do not cover: privacy policy,
   careers, staff bios, city landing pages, thank-you pages.

   Usage:
     <section class="sec-23-prose section on-bone">
       <div class="sec-23-prose__wrap container">
         <h2 class="sec-23-prose__h">...</h2>
         <p>...</p>
         <ul class="sec-23-prose__list"><li>...</li></ul>
       </div>
     </section>
   ============================================================ */

.sec-23-prose__wrap {
  /* This element also carries .container, which produces the site's gutter via
     width:min(--container, 100% - 2.5rem) + margin-inline:auto. Narrowing THIS element to
     a 68ch measure makes the auto-centring indent the whole column inward; overriding
     margin-inline to 0 to compensate then jams it against the viewport edge and lets the
     chapter rail print through the copy. Let .container own the gutter, and cap the
     MEASURE on the children instead. */
  max-width: none;
}

.sec-23-prose__wrap > * {
  max-width: 68ch;
}

/* staff-bio portrait: sits above the copy on mobile, floats beside it on desktop */
.sec-23-prose__portrait {
  margin-bottom: 1.6rem;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  max-width: 260px;
}

.sec-23-prose__portrait img {
  width: 100%;
  height: auto;
}

@media (min-width: 720px) {
  .sec-23-prose__portrait {
    float: right;
    width: 260px;
    margin-left: 2rem;
    margin-bottom: 1.25rem;
  }
}

.sec-23-prose p,
.sec-23-prose li {
  color: var(--text-on-bone);
  font-size: 1.02rem;
  line-height: 1.75;
}

.sec-23-prose p + p {
  margin-top: 1.1rem;
}

.sec-23-prose__h {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
  margin-top: 2.8rem;
  margin-bottom: 0.85rem;
}

.sec-23-prose__h:first-child {
  margin-top: 0;
}

.sec-23-prose__list {
  margin-top: 1.1rem;
  display: grid;
  gap: 0.6rem;
  padding-left: 1.1rem;
}

.sec-23-prose__list li {
  list-style: disc;
  padding-left: 0.35rem;
}

.sec-23-prose__list li::marker {
  color: var(--accent);
}

.sec-23-prose a {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 200ms var(--ease-out);
}

.sec-23-prose a:hover,
.sec-23-prose a:focus-visible {
  color: var(--accent);
}

@media (max-width: 640px) {
  .sec-23-prose p,
  .sec-23-prose li {
    font-size: 1rem; /* 16px minimum reading size on phones (was 0.98rem) */
  }
  .sec-23-prose__h {
    margin-top: 2.1rem;
  }
}

/* ---- 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: var(--text-on-ink);
}

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

/* --- Phone text sizes (QA 2026-10-12) ---
   Reading text is at least 16px on phones (<=820px, the mobile-bar breakpoint).
   Small uppercase labels and chips stay label-sized but no smaller than ~13px. */
@media (max-width: 820px) {
  .sec-40-about-story__caption {
    font-size: 1rem;
  }
}

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

/* flex, not grid: card count varies per page (4-person About teaser vs. the
   full roster on /team/), and a fixed repeat(4, 1fr) grid left-packs an
   incomplete last row instead of centering it. flex-wrap + justify-content:
   center keeps every row centered regardless of how many cards ship. */
.sec-40-about-team__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-gap);
}

.sec-40-about-team__card {
  flex: 0 1 calc(25% - (var(--sp-gap) * 3 / 4));
  min-width: 220px;
}

@media (max-width: 980px) {
  .sec-40-about-team__card { flex-basis: calc(50% - (var(--sp-gap) / 2)); }
}
@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);
}

/* --- Tap targets (QA 2026-10-12) ---
   Invisible ::after extends the tap area to at least 44px tall without moving
   anything visually. */
.sec-40-about-team__book {
  position: relative;
}

.sec-40-about-team__book::after {
  content: "";
  position: absolute;
  inset: -11px 0;
}

/* --- Phone text sizes (QA 2026-10-12) ---
   Reading text is at least 16px on phones (<=820px, the mobile-bar breakpoint).
   Small uppercase labels and chips stay label-sized but no smaller than ~13px. */
@media (max-width: 820px) {
  .sec-40-about-team__bio,
  .sec-40-about-team__book {
    font-size: 1rem;
  }
  .sec-40-about-team__chip {
    font-size: 0.8rem;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* A one-line card title next to two-line siblings started its body copy higher than the row. */
.sec-40-about-values__card h3 { min-height: 2.4em; }

/* --- Phone text sizes (QA 2026-10-12) ---
   Reading text is at least 16px on phones (<=820px, the mobile-bar breakpoint).
   Small uppercase labels and chips stay label-sized but no smaller than ~13px. */
@media (max-width: 820px) {
  .sec-40-about-values__copy {
    font-size: 1rem;
  }
}

/* ---- 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);
  /* __glow is inset:-14% on the model box and overflowed the section, widening the
     mobile layout viewport. */
  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);
}

/* These dots sit on a photograph, so no single outline color can be guaranteed
   3:1 against whatever's directly behind it. A white ring + a dark ring
   together clear 3:1 against any photo content, since a photo can't defeat
   both a near-white and a near-black ring at once. */
.sec-50-wwt-bodymap__dot:focus-visible {
  outline: none;
  box-shadow: var(--shadow-soft), 0 0 0 3px #fff, 0 0 0 6px #0e2425;
}

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

/* --- Tap targets (QA 2026-10-12) ---
   Invisible ::after extends the tap area to at least 44px tall without moving
   anything visually. */
.sec-50-wwt-bodymap__dot::after {
  content: "";
  position: absolute;
  inset: -9px; /* from the padding box: 26px + 2x9 = 44px */
  border-radius: 50%;
}

.sec-50-wwt-bodymap__card-link {
  position: relative;
}

.sec-50-wwt-bodymap__card-link::after {
  content: "";
  position: absolute;
  inset: -9px 0;
}

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

/* flex, not grid: this build ships 20 conditions (the template default was
   12), and at mid-width viewports auto-fit's implicit 3-column track set
   left-packs the incomplete last row instead of centering it.
   flex-wrap + justify-content: center keeps every row centered regardless
   of item count; max-width keeps a lone orphan card from stretching to
   fill the whole row. */
.sec-50-wwt-grid__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.1rem, 1.8vw, 1.5rem);
}

.sec-50-wwt-grid__card {
  flex: 1 1 260px;
  max-width: 360px;
  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;
}

/* --- Tap targets (QA 2026-10-12) ---
   Invisible ::after extends the tap area to at least 44px tall without moving
   anything visually. */
.sec-50-wwt-grid__link {
  position: relative;
}

.sec-50-wwt-grid__link::after {
  content: "";
  position: absolute;
  inset: -11px 0;
}

/* --- Phone text sizes (QA 2026-10-12) ---
   Reading text is at least 16px on phones (<=820px, the mobile-bar breakpoint).
   Small uppercase labels and chips stay label-sized but no smaller than ~13px. */
@media (max-width: 820px) {
  .sec-50-wwt-grid__card p {
    font-size: 1rem;
  }
}

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

/* Descriptions differ in length; keep the Learn More links on one baseline across the row. */
.sec-55-cond-related__card { display: flex; flex-direction: column; }
.sec-55-cond-related__link { margin-top: auto; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.sec-55-cond-treatment__card {
  background: var(--ink-2);
  border: 1px solid hsl(0 0% 100% / 0.08);
  border-radius: var(--radius-card);
  padding: clamp(1.5rem, 2vw, 1.9rem);
}

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

.sec-55-cond-treatment__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-on-ink);
  margin-bottom: 0.6rem;
}

.sec-55-cond-treatment__card h3 {
  color: var(--text-on-ink);
  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;
}

/* --- Phone text sizes (QA 2026-10-12) ---
   Reading text is at least 16px on phones (<=820px, the mobile-bar breakpoint).
   Small uppercase labels and chips stay label-sized but no smaller than ~13px. */
@media (max-width: 820px) {
  .sec-55-cond-treatment__desc {
    font-size: 1rem;
  }
}

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

/* --vs-size drives the VS badge's own width/height AND the extra
   clearance reserved on both halves below, from one value, so the
   badge's footprint and its reserved space can never drift out of
   sync (previously only the lit half reserved this clearance; the
   dim half had none, so the badge overlapped its text). */
.sec-55-cond-waiting__panel {
  --vs-size: clamp(52px, 5vw + 36px, 76px);
  --vs-base-pad: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  box-shadow: var(--shadow-lift);
  border-radius: var(--radius-lg);
}

.sec-55-cond-waiting__half {
  position: relative;
  padding: var(--vs-base-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);
  /* The VS circle sits centered on the shared border and overlaps into this
     half by its own radius too, so it needs the same reserved clearance
     the lit half gets below (was previously missing entirely). */
  padding-right: calc(var(--vs-base-pad) + var(--vs-size) / 2);
}
.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);
  /* The VS circle sits centered on the shared border and overlaps into this
     half by its own radius, so its content needs that much extra left
     padding to clear it by the same margin the outer edge gives it. */
  padding-left: calc(var(--vs-base-pad) + var(--vs-size) / 2);
}
.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);
}

.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);
}
.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;
    /* Stacked layout: the VS circle now sits on the horizontal seam between
       the two halves, not the vertical one, so clearance moves from
       padding-right to padding-bottom. */
    padding-right: var(--vs-base-pad);
    padding-bottom: calc(var(--vs-base-pad) + var(--vs-size) / 2);
  }
  .sec-55-cond-waiting__half--lit {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    /* Stacked layout: the VS circle sits centered over the seam, not to this
       half's left, so it doesn't need the desktop's extra clearance, but
       does need it above instead. */
    padding-left: var(--vs-base-pad);
    padding-top: calc(var(--vs-base-pad) + var(--vs-size) / 2);
  }
}

@media (max-width: 480px) {
  /* A plain padding shorthand here would reset the badge clearance the
     720px block reserves on dim's bottom / lit's top (padding shorthand
     sets all four sides). Shrink --vs-base-pad instead so the reserved
     sides shrink together with it, and set left/right (not reserved at
     this breakpoint) directly, plus the two sides that AREN'T reserved
     at this breakpoint (dim's top, lit's bottom). */
  .sec-55-cond-waiting__panel {
    --vs-base-pad: 1.35rem;
  }
  .sec-55-cond-waiting__half {
    padding-left: 1.35rem;
    padding-right: 1.35rem;
  }
  .sec-55-cond-waiting__half--dim {
    padding-top: 1.5rem;
  }
  .sec-55-cond-waiting__half--lit {
    padding-bottom: 1.5rem;
  }
}

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

/* --- Phone text sizes (QA 2026-10-12) ---
   Reading text is at least 16px on phones (<=820px, the mobile-bar breakpoint).
   Small uppercase labels and chips stay label-sized but no smaller than ~13px. */
@media (max-width: 820px) {
  .sec-60-svc-grid__benefits li {
    font-size: 1rem;
  }
}

/* ---- 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);
  /* box-sizing:border-box is global and the <svg> carries width/height attributes, so this
     padding was taken OUT of the icon: the content box came to under 1px and the tick
     rendered sub-pixel. Every card showed a bare disc. content-box puts the padding
     AROUND the glyph. */
  box-sizing: content-box;
  padding: 0.6rem;
  border-radius: 50%;
  background: var(--accent-soft);
}
.sec-65-serv-benefits__icon path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.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: pre-JS fallback only (centers of a 3-col grid at 1/6, 1/2,
   5/6). js/sections/65-serv-session.js measures the actual rendered dot
   positions and overwrites left/width/top (or top/height/left on the
   mobile vertical layout below) with exact pixel values — a percentage
   guess here can't account for dot positions that shift with copy length.
   No transform: it would double up against the JS-computed value. --- */
.sec-65-serv-session__track {
  position: absolute;
  top: 0;
  left: 16.667%;
  right: 16.667%;
  height: 2px;
  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/96-careers.css ---- */
/* ============================================================
   96-careers — careers application form (#apply). Field, error and
   success styles reuse the benefits-check vocabulary from
   11-insurance.css.
   ============================================================ */
.sec-96-careers__apply-panel {
  max-width: 44rem;
  margin: 0 auto;
  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;
}

/* Sits straight under the careers prose (same bone band), so drop the
   doubled top padding between the two sections. */
.sec-96-careers.section-pad {
  padding-top: 0;
}

/* ---- css/sections/99-chat-widget.css ---- */
/* ============================================================
   99-chat-widget — page-side rules for the GoHighLevel (LeadConnector)
   chat widget injected by sections/99-chat-widget.html.

   The widget renders inside its own shadow root, so the rules that
   reposition its bubble live in js/sections/99-chat-widget.js. The one
   rule here hides the whole widget while the nav's mobile overlay is
   open: its fixed prompt + bubble sit at z-index 99999999 and would
   otherwise cover (and swallow taps on) the overlay's phone link and
   Schedule Appointment button. State is read from body.sec-01-nav-lock,
   the same class 17-mobilebar.js watches.
   ============================================================ */

body.sec-01-nav-lock chat-widget {
  display: none !important;
}