/* =================================================================
   PT CLINIC TEMPLATE — Rehab CEOs Design System v1.2
   Dark / editorial · Fraunces + Hanken Grotesk · Movement Guild purple
   All brand values live in :root — swap per client.
   ================================================================= */

:root {
  /* === BRAND — SWAP THESE PER CLIENT === */
  --color-accent:        #9875B4;                 /* primary brand color (Movement Guild light purple) */
  --color-accent-dim:    #7A5B96;                 /* darker accent for hover states */
  --color-accent-deep:   #413064;                 /* Movement Guild dark purple, full CTA-band backgrounds */
  --color-accent-glow:   rgba(152,117,180,0.14);   /* ambient accent glow */
  --color-warn:          #E0795F;                 /* "old way" negative marker (warm, not alarming) */

  /* === BASE PALETTE === */
  --bg-primary:          #0A0A0A;
  --bg-secondary:        #111111;
  --bg-tertiary:         #1A1A1A;
  --bg-light:            #F4F2EE;

  /* === TEXT === */
  --text-primary:        #F0EDE8;
  --text-secondary:      #A8A29E;
  --text-muted:          #8A827C;                 /* was #6B6560 (3.45:1 on #0A0A0A, failed AA). First pass (#807973) cleared #0A0A0A but still fell short (4.44:1) against the lightest background this token actually renders on, rgb(26,28,32); this shade clears 4.5:1 against that worst case too. Every usage sits on a dark background. */
  --text-on-light:       #1A1A1A;
  --text-body-light:     #4A4540;

  /* === TYPOGRAPHY === */
  --font-display:        'Fraunces', serif;
  --font-body:           'Hanken Grotesk', sans-serif;

  /* === SPACING === */
  --section-pad-v:       clamp(80px, 10vw, 140px);
  --section-pad-h:       clamp(24px, 6vw, 100px);
  --max-width:           1280px;

  /* === MOTION === */
  --ease-smooth:         cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:       0.25s;
  --duration-base:       0.5s;
  --duration-slow:       0.9s;

  --header-h:            76px;
}

/* ----------------------------------------------------------------- RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg-primary); color: var(--text-primary);
  font-family: var(--font-body); font-weight: 300; line-height: 1.6;
  overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }
::selection { background: var(--color-accent); color: #0A0A0A; }

/* ----------------------------------------------------------------- ACCESSIBILITY: FOCUS + SKIP LINK
   Visible-focus exception is authorized even though the rest of this pass changes no visual
   design: everything below only ever appears when a keyboard user is actually focused there. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 10000;
  background: var(--bg-primary);
  color: var(--text-primary);
  padding: 0.9rem 1.4rem;
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 2px solid var(--color-accent);
  transition: top 0.2s var(--ease-smooth);
}
.skip-link:focus {
  top: 1rem;
  outline: none; /* the border above already carries the visible-focus job here */
}

/* Screen-reader-only text — e.g. the "(opens in new tab)" disclosure on target="_blank" links.
   Never visible, never changes layout; the standard clip-based hiding technique. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------------- TYPOGRAPHY SCALE */
.t-hero    { font-family: var(--font-display); font-size: clamp(4rem, 10vw, 10rem); font-weight: 700; line-height: 0.95; letter-spacing: -0.03em; }
.t-h1      { font-family: var(--font-display); font-size: clamp(3rem, 6vw, 6rem);   font-weight: 600; line-height: 1.0;  letter-spacing: -0.02em; }
.t-h2      { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 4rem);   font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; }
.t-h3      { font-family: var(--font-display); font-size: clamp(1.6rem, 2.5vw, 2.2rem); font-weight: 500; line-height: 1.2; }
.t-label   { font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.t-body    { font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.7; font-weight: 300; }
.t-marquee { font-family: var(--font-display); font-size: clamp(28px, 8vw, 56px); font-weight: 700; line-height: 0.9; }

.section-label { color: var(--color-accent); display: inline-block; margin-bottom: 1.4rem; }
.section-light .section-label { color: var(--color-accent-dim); }

/* ----------------------------------------------------------------- LAYOUT SHELL */
.section-shell { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--section-pad-h); width: 100%; }
.section-head { max-width: 760px; margin-bottom: clamp(48px, 6vw, 90px); }
.section-head .t-h2 { margin-top: 0.2rem; }
.section-head .t-body { margin-top: 1.4rem; color: var(--text-secondary); }
.section-light .section-head .t-body { color: var(--text-body-light); }
.section-head-center { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; }

main > section { padding: var(--section-pad-v) 0; position: relative; }
.section-light { background: var(--bg-light); color: var(--text-on-light); }
.section-light .t-body { color: var(--text-body-light); }

/* ----------------------------------------------------------------- BUTTONS */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.95rem 2.1rem; border-radius: 4px;
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  transition: all var(--duration-fast) var(--ease-smooth); cursor: pointer; text-decoration: none; white-space: nowrap;
  min-height: 44px; /* WCAG touch target minimum */
}
.btn-primary { background: var(--color-accent); color: #0A0A0A; border: 1px solid var(--color-accent); }
.btn-primary:hover { background: var(--color-accent-dim); border-color: var(--color-accent-dim); transform: translateY(-2px); box-shadow: 0 10px 30px var(--color-accent-glow); }
.btn-ghost { background: transparent; color: var(--text-primary); border: 1px solid rgba(240,237,232,0.25); }
.btn-ghost:hover { border-color: var(--color-accent); color: var(--color-accent); transform: translateY(-2px); }
.btn-on-accent { background: #FFFFFF; color: var(--color-accent-deep); border: 1px solid #FFFFFF; }
.btn-on-accent:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(0,0,0,0.25); }
.btn-ghost-accent { background: transparent; color: #FFFFFF; border: 1px solid rgba(255,255,255,0.5); }
.btn-ghost-accent:hover { background: rgba(255,255,255,0.1); border-color: #FFFFFF; transform: translateY(-2px); }

.link-arrow { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: clamp(40px, 5vw, 64px); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.02em; color: var(--color-accent); transition: gap var(--duration-fast) var(--ease-smooth); }
.link-arrow:hover { gap: 0.9rem; }
.link-arrow-dark { color: var(--color-accent-dim); }

/* ----------------------------------------------------------------- CUSTOM CURSOR */
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; border-radius: 50%; transform: translate(-50%, -50%); opacity: 0; }
.cursor-dot  { width: 6px; height: 6px; background: var(--color-accent); transition: opacity .3s, transform .12s ease-out; }
.cursor-ring { width: 34px; height: 34px; border: 1px solid rgba(240,237,232,0.45); transition: opacity .3s, width .25s var(--ease-smooth), height .25s var(--ease-smooth), border-color .25s; }
.cursor-ring.is-hover { width: 56px; height: 56px; border-color: var(--color-accent); }
body.cursor-active .cursor-dot, body.cursor-active .cursor-ring { opacity: 1; }
@media (hover: none) { .cursor-dot, .cursor-ring { display: none; } }

/* ----------------------------------------------------------------- LOADER (Mode A only) */
#loader { position: fixed; inset: 0; z-index: 10000; background: var(--bg-primary); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem; transition: opacity .6s var(--ease-smooth); }
body.hero-mode-canvas #loader { display: flex; }
body.loaded #loader { opacity: 0; pointer-events: none; }
.loader-brand { color: var(--text-secondary); }
#loader-bar { width: min(320px, 60vw); height: 2px; background: rgba(240,237,232,0.12); overflow: hidden; }
#loader-bar-fill { display: block; height: 100%; width: 0%; background: var(--color-accent); transition: width .2s linear; }
#loader-percent { color: var(--color-accent); }

/* ----------------------------------------------------------------- HEADER / NAV — Floating Pill */
.site-header {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: 1260px;
  min-height: 56px;  /* grows to fit stacked logos — see .logo-tall below */
  z-index: 1000;
  display: flex;
  align-items: center;
  border-radius: 100px;
  background: rgba(243,240,235,0.97);
  border: 1px solid rgba(20,16,12,0.1);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 4px 28px rgba(0,0,0,0.22), 0 1px 4px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.7);
  transition: background 0.45s var(--ease-smooth), border-color 0.45s var(--ease-smooth), box-shadow 0.45s var(--ease-smooth);
}
.site-header.is-solid {
  background: rgba(243,240,235,0.99);
  border-color: rgba(20,16,12,0.13);
  box-shadow: 0 8px 44px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.7);
}
.nav-inner {
  padding: 0 clamp(1rem, 2vw, 1.6rem);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}
.nav-logo { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; flex: none; color: rgba(20,16,12,0.9); }
.nav-logo-mark { width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 12px var(--color-accent-glow); flex: none; }

/* ---- Logo image support (replaces text logo when client has a graphic mark) ----
   Horizontal logo:  max-height 32px — fits the 56px pill with breathing room
   Stacked logo:     add class "logo-tall" to <header> — pill grows to 68px,
                     logo allowed up to 48px. Deployment guide: if logo is
                     square/portrait/stacked, add class="site-header logo-tall"  */
.nav-logo-img {
  display: block;
  max-height: 32px;
  width: auto;
  object-fit: contain;
}
/* Stacked/square logo variant — add class "logo-tall" to .site-header */
.site-header.logo-tall { min-height: 68px; padding: 10px 0; }
.site-header.logo-tall .nav-logo-img { max-height: 46px; }
/* Icon-only mark (no wordmark text) — use when logo is very wide or needs isolation */
.nav-logo-icon-only .nav-logo-text { display: none; }
.nav-logo-icon-only .nav-logo-img { max-height: 38px; }
.nav-links { display: flex; align-items: center; gap: clamp(1.2rem, 2vw, 1.8rem); flex: 1; justify-content: center; }
.nav-link { position: relative; font-size: 1rem; font-weight: 500; color: rgba(20,16,12,0.88); transition: color var(--duration-fast); padding: 0.3rem 0; white-space: nowrap; }
.nav-link:hover { color: rgba(20,16,12,1); }
.nav-link[aria-current="page"] { color: rgba(20,16,12,1) !important; }
.nav-link-parent { display: inline-flex; align-items: center; gap: 0.3rem; }
.nav-caret { width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-1px); transition: transform var(--duration-fast); }
.nav-dropdown { position: relative; }
/* Invisible bridge fills the gap between pill and dropdown so hover never breaks */
.nav-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -20px;
  right: -20px;
  height: 18px;
}
.nav-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  min-width: 230px;
  padding: 0.7rem 0;
  background: rgba(12,13,20,0.98);
  border: 1px solid rgba(152,117,180,0.18);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.4);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s var(--ease-smooth), transform 0.2s var(--ease-smooth), visibility 0.2s;
}
.nav-dropdown:hover .nav-menu,
.nav-dropdown:focus-within .nav-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav-dropdown:hover .nav-caret,
.nav-dropdown:focus-within .nav-caret { transform: rotate(-135deg) translateY(-1px); }
/* Last dropdown right-aligns so it doesn't clip the viewport edge */
.nav-dropdown:last-of-type .nav-menu { left: auto; right: 0; transform: translateY(5px); }
.nav-dropdown:last-of-type:hover .nav-menu,
.nav-dropdown:last-of-type:focus-within .nav-menu { transform: translateY(0); }
.nav-menu a { display: block; padding: 0.55rem 1.3rem; font-size: 0.88rem; color: rgba(240,237,232,0.58); transition: color var(--duration-fast), background var(--duration-fast); }
.nav-menu a:hover { color: var(--color-accent); background: rgba(255,255,255,0.03); }
.nav-menu-all { color: var(--text-primary) !important; border-top: 1px solid rgba(240,237,232,0.08); margin-top: 0.35rem; padding-top: 0.8rem !important; }
.nav-actions { display: flex; align-items: center; gap: 0.85rem; flex: none; }
.nav-phone { font-size: 0.82rem; font-weight: 500; color: rgba(20,16,12,0.72); white-space: nowrap; transition: color var(--duration-fast); }
.nav-phone:hover { color: var(--color-accent-dim); }
/* Pill-within-pill CTA — tighter than the full btn */
a.nav-cta.btn-primary, .btn.btn-primary.nav-cta {
  height: 36px !important;
  padding: 0 1.15rem !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  border-radius: 100px !important;
  line-height: 36px !important;
  white-space: nowrap;
}
.nav-toggle { display: none; width: 28px; height: 20px; position: relative; flex: none; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
/* Lines are centred inside the 44px tap box (they used to hang from its top edge, sitting
   high and off-centre against the logo, and stretched the full 44px wide). */
.nav-toggle span { position: absolute; top: 50%; left: 50%; width: 24px; height: 2px; margin: -1px 0 0 -12px; background: rgba(20,16,12,0.85); border-radius: 2px; transition: transform .35s var(--ease-smooth), opacity .25s; }
.nav-toggle span:nth-child(1) { transform: translateY(-7px); }
.nav-toggle span:nth-child(3) { transform: translateY(7px); }
body.menu-open .nav-toggle span:nth-child(1) { transform: rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .nav-toggle span:nth-child(3) { transform: rotate(-45deg); }
/* Mobile overlay nav */
.mobile-nav { position: fixed; inset: 0; z-index: 999; background: var(--bg-primary); display: flex; flex-direction: column; gap: 2.2rem; padding: calc(var(--header-h) + 3rem) var(--section-pad-h) 3rem; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity var(--duration-base) var(--ease-smooth), transform var(--duration-base) var(--ease-smooth), visibility var(--duration-base); }
body.menu-open .mobile-nav { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-nav-links { display: flex; flex-direction: column; gap: 0.2rem; margin-top: auto; }
.mobile-nav-links > a, .mnav-group { opacity: 0; transform: translateY(20px); transition: opacity .5s var(--ease-smooth), transform .5s var(--ease-smooth); transition-delay: calc(var(--i) * 0.06s + 0.1s); }
body.menu-open .mobile-nav-links > a, body.menu-open .mnav-group { opacity: 1; transform: translateY(0); }
.mnav-top { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 0.2rem 0; background: none; border: 0; color: inherit; text-align: left; cursor: pointer; font-family: var(--font-display); font-size: clamp(1.9rem, 7.5vw, 2.6rem); font-weight: 600; letter-spacing: -0.02em; transition: color var(--duration-fast); }
.mnav-top:hover, .mnav-toggle[aria-expanded="true"] { color: var(--color-accent); }
.mnav-caret { flex: none; width: 11px; height: 11px; margin: 0 6px 6px 1rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--duration-fast); }
.mnav-toggle[aria-expanded="true"] .mnav-caret { transform: rotate(-135deg); margin-bottom: 0; }
/* Parents with their own page: label is a link, chevron is a separate 48px toggle */
.mnav-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.mnav-row .mnav-top { width: auto; flex: 1 1 auto; min-width: 0; }
.mnav-chev-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(240,237,232,0.16); color: var(--text-primary); transition: border-color var(--duration-fast), color var(--duration-fast); }
.mnav-chev-btn:hover, .mnav-chev-btn[aria-expanded="true"] { border-color: var(--color-accent); color: var(--color-accent); }
.mnav-chev-btn .mnav-caret { margin: 0 0 4px 0; }
.mnav-chev-btn[aria-expanded="true"] .mnav-caret { margin: 4px 0 0 0; }
/* No-page parent (Patient Resources): whole row toggles; caret sits in a matching circle */
.mnav-toggle-row { position: relative; padding-right: 64px; }
.mnav-toggle-row .mnav-caret { position: absolute; right: 18px; top: 50%; margin: -8px 0 0 0; }
.mnav-toggle-row[aria-expanded="true"] .mnav-caret { margin-top: -3px; }
.mnav-toggle-row::after { content: ""; position: absolute; right: 0; top: 50%; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; border: 1px solid rgba(240,237,232,0.16); box-sizing: border-box; transition: border-color var(--duration-fast); }
.mnav-toggle-row:hover::after, .mnav-toggle-row[aria-expanded="true"]::after { border-color: var(--color-accent); }
/* Submenus animate open/closed (grid-row height trick). Collapsed only once JS is running, so
   without JS every submenu simply shows. Collapsed links are visibility:hidden, so they are
   also out of the tab order. */
.mnav-sub { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .4s var(--ease-smooth); }
.mnav-sub-inner { min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 0 0 0 0.2rem; border-left: 1px solid rgba(152,117,180,0.35); margin-left: 0.1rem; transition: visibility .4s, padding .4s var(--ease-smooth); }
html.js .mnav-sub { grid-template-rows: 0fr; }
html.js .mnav-sub-inner { visibility: hidden; }
html.js .mnav-group.is-open .mnav-sub { grid-template-rows: 1fr; }
html.js .mnav-group.is-open .mnav-sub-inner { visibility: visible; padding: 0.2rem 0 0.9rem 0.2rem; }
@media (prefers-reduced-motion: reduce) { .mnav-sub, .mnav-sub-inner { transition: none; } }
.mnav-sub a { display: flex; align-items: center; min-height: 44px; padding-left: 1rem; font-size: 1.05rem; color: var(--text-secondary); transition: color var(--duration-fast); }
.mnav-sub a:hover, .mnav-sub a.mnav-all { color: var(--color-accent); }
.mobile-nav-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.4rem; margin-bottom: auto; }
.mobile-nav-phone { align-self: flex-start; }
.mobile-nav-tel { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.1rem; font-weight: 500; color: var(--text-primary); }
/* LeadConnector chat sits above the overlay and covered its CTA on small phones */
body.menu-open chat-widget, body.menu-open #lc_text-widget, body.menu-open .lc_text-widget { display: none !important; }
/* "Patient Resources" is a <button> (it only opens its dropdown) */
button.nav-link { background: none; border: 0; font-family: inherit; cursor: pointer; }
/* Responsive — collapse links at 920px, show hamburger */
@media (max-width: 920px) {
  .site-header { top: 12px; width: calc(100% - 24px); height: 52px; }
  .nav-links { display: none; }
  .nav-phone { display: none; }
  a.nav-cta.btn-primary, .btn.btn-primary.nav-cta { display: none; }
  .nav-toggle { display: flex; }
  /* Tall single-column mobile footer can scroll into the same viewport band the
     fixed header pill occupies; let taps pass through for the whole time the
     footer is on screen, not just at the very bottom of the page. */
  .site-header.is-over-footer { pointer-events: none; }
}

/* ================================================================= HERO — MODE B (split + form) */
.hero-split { position: relative; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--header-h) + clamp(40px, 7vh, 80px)) var(--section-pad-h) clamp(70px, 10vh, 120px); overflow: hidden; }
body.hero-mode-canvas .hero-split { display: none; }
.hero-bg { position: absolute; inset: 0; z-index: -1; }
.hero-bg video, .hero-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-bg video { z-index: 1; }       /* video covers the placeholder image once hero.mp4 exists */
.hero-bg-img { z-index: 0; }
.hero-bg-overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(105deg, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.82) 38%, rgba(10,10,10,0.55) 70%, rgba(10,10,10,0.45) 100%); }

.hero-split-inner { max-width: var(--max-width); margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.hero-copy { max-width: 36rem; }
.hero-heading { font-family: var(--font-display); font-size: clamp(2.9rem, 6vw, 5.4rem); font-weight: 700; line-height: 0.98; letter-spacing: -0.03em; margin: 0.6rem 0 1.6rem; }
.hero-heading .word { display: inline-block; overflow: hidden; margin-right: 0.22em; }
/* Kinetic Identity — resolve-animated character/word spans, added by initKineticType() in
   app.js. inline-block so transform/filter/font-variation-settings all animate reliably. */
.k-char, .k-word { display: inline-block; }
.hero-sub { max-width: 44ch; color: var(--text-secondary); margin-bottom: 2rem; text-shadow: 0 1px 10px rgba(0,0,0,0.4); }
.hero-trust { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.hero-trust-stars { display: inline-flex; gap: 2px; }
.hero-trust-stars .star { width: 17px; height: 17px; fill: var(--color-accent); }
.hero-trust-text { font-size: 0.9rem; color: var(--text-secondary); }
.hero-trust-text strong { color: var(--text-primary); font-weight: 600; }

/* hero booking form panel — the one justified contained surface (it's a form) */
.hero-form { background: rgba(17,17,17,0.78); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(240,237,232,0.1); border-radius: 14px; padding: clamp(1.6rem, 2.6vw, 2.4rem); box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
.hero-form .section-label { margin-bottom: 0.8rem; }
.hero-form-title { font-family: var(--font-display); font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.hero-form-sub { margin: 0.7rem 0 1.4rem; font-size: 0.92rem; color: var(--text-secondary); }
.hero-form .ghl-form-wrap { background: var(--bg-tertiary); border: 1px solid rgba(240,237,232,0.08); border-radius: 10px; padding: 0.4rem; min-height: 460px; }
.hero-form .ghl-form-wrap iframe { border-radius: 7px; }
.hero-form-call { display: flex; align-items: baseline; gap: 0.7rem; margin-top: 1.2rem; flex-wrap: wrap; }
.hero-form-call .t-label { color: var(--text-muted); }
.phone-link-sm { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--text-primary); transition: color var(--duration-fast); }
.phone-link-sm:hover { color: var(--color-accent); }

.hero-scroll-indicator { position: absolute; bottom: clamp(20px, 3vh, 34px); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.7rem; color: var(--text-muted); z-index: 3; }
.hero-scroll-indicator .scroll-line { width: 1px; height: 42px; background: linear-gradient(to bottom, var(--color-accent), transparent); animation: scrollPulse 2.2s var(--ease-smooth) infinite; transform-origin: top; }
@keyframes scrollPulse { 0% { transform: scaleY(0); opacity: 0; } 40% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* hero entrance */
.hero-heading .word { transform: translateY(110%); transition: transform 0.9s var(--ease-smooth); }
.hero-el { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-smooth), transform .8s var(--ease-smooth); }
.hero-ready .hero-heading .word { transform: translateY(0); }
.hero-ready .hero-heading .word:nth-child(1) { transition-delay: .26s; }
.hero-ready .hero-heading .word:nth-child(2) { transition-delay: .38s; }
.hero-ready .hero-heading .word:nth-child(3) { transition-delay: .50s; }
.hero-ready .section-label.hero-el { opacity: 1; transform: none; transition-delay: .12s; }
.hero-ready .hero-sub.hero-el { opacity: 1; transform: none; transition-delay: .64s; }
.hero-ready .hero-trust.hero-el { opacity: 1; transform: none; transition-delay: .76s; }
.hero-ready .hero-cta-row.hero-el { opacity: 1; transform: none; transition-delay: .76s; }
.hero-ready .hero-form.hero-el { opacity: 1; transform: none; transition-delay: .5s; }
.hero-ready .hero-scroll-indicator.hero-el { opacity: 1; transform: none; transition-delay: 1.0s; }

/* ================================================================= HERO — MODE A (canvas scrub) */
.canvas-wrap { position: fixed; inset: 0; z-index: 0; display: none; clip-path: circle(0% at 50% 50%); }
.canvas-wrap canvas { width: 100%; height: 100%; }
/* Hero frame poster — fixed div BEHIND the canvas-wrap (same z-index, earlier in DOM)
   Shows the first Higgsfield frame immediately. Through the circle(0%) clip of canvas-wrap,
   this poster is visible. As the circle expands, the animated canvas takes over. */
#hero-frame-poster { display: none; }
body.hero-mode-canvas #hero-frame-poster {
  display: block;
  position: fixed; inset: 0; z-index: 0;
  background: #0A0A0A url('../frames/frame_0001.jpg') center/cover no-repeat;
}
#dark-overlay { position: fixed; inset: 0; z-index: 1; background: var(--bg-primary); opacity: 0; pointer-events: none; display: none; }
.marquee-wrap { position: fixed; top: 42%; left: 0; z-index: 2; width: 100%; pointer-events: none; opacity: 0; display: none; white-space: nowrap; }
.marquee-wrap .marquee-text { display: inline-block; color: rgba(240,237,232,0.06); }
.hero-canvas { display: none; }
body.hero-mode-canvas .canvas-wrap, body.hero-mode-canvas #dark-overlay, body.hero-mode-canvas .marquee-wrap, body.hero-mode-canvas .hero-canvas { display: block; }
/* Ensure page sections sit ABOVE the fixed canvas/overlay stack in canvas mode */
body.hero-mode-canvas main,
body.hero-mode-canvas .site-footer { position: relative; z-index: 4; }
/* Canvas-mode booking section — hidden until canvas mode activates */
.canvas-booking { display: none; }
body.hero-mode-canvas .canvas-booking { display: block; }
.hero-canvas { position: relative; }
.hero-scrub-spacer { height: 250vh; }
.hero-scrub-content { position: fixed; top: 0; left: 0; z-index: 3; width: 100%; height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--section-pad-h) clamp(80px, 12vh, 140px); max-width: var(--max-width); margin: 0 auto; pointer-events: none; }
.hero-scrub-content > * { pointer-events: auto; }
.hero-scrub-content .hero-heading { max-width: 14ch; margin: 0.6rem 0 1.8rem; }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ================================================================= SOCIAL PROOF BAR */
.section-proof { background: var(--bg-secondary); padding: 0 !important; overflow: hidden; }
.proof-bar { max-width: var(--max-width); margin: 0 auto; padding: clamp(28px, 4vw, 44px) var(--section-pad-h); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(1.2rem, 4vw, 3rem); }
.proof-stat { display: inline-flex; align-items: baseline; gap: 0.6rem; }
.proof-stat strong { font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 600; color: var(--text-primary); }
.proof-text { font-size: 1.05rem; color: var(--text-secondary); }
.proof-divider { width: 1px; height: 28px; background: rgba(240,237,232,0.12); }
.proof-stars { display: inline-flex; gap: 2px; align-self: center; }
.proof-stars .star, .testimonial-stars .star { width: 18px; height: 18px; fill: var(--color-accent); }
.proof-marquee { border-top: 1px solid rgba(240,237,232,0.07); padding: 0.9rem 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.proof-marquee-track { display: inline-flex; gap: 3rem; white-space: nowrap; animation: marqueeScroll 38s linear infinite; }
.proof-marquee-track span { font-size: 0.9rem; color: var(--text-muted); font-style: italic; font-family: var(--font-display); }
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* WCAG 2.2.2 — this marquee and the reviews-wall drift below both auto-start and run past 5s,
   so a persistent pause control is required; #motion-toggle (added once, in index.html) covers
   both. GSAP tweens are paused/resumed in app.js; the CSS-driven marquee is paused right here. */
html.motion-paused .proof-marquee-track { animation-play-state: paused; }

.motion-toggle {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px; padding: 0.55rem 1.1rem;
  border-radius: 100px;
  border: 1px solid rgba(240,237,232,0.16);
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary);
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: color var(--duration-fast), border-color var(--duration-fast), background var(--duration-fast);
}
.motion-toggle:hover { color: var(--text-primary); border-color: rgba(240,237,232,0.32); }

/* ================================================================= OLD WAY vs NEW WAY */
.section-compare { background: var(--bg-primary); }
.compare-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.compare-divider { width: 1px; align-self: stretch; background: linear-gradient(to bottom, transparent, rgba(240,237,232,0.12), transparent); }
.compare-tag { display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.4rem 0.9rem; border-radius: 100px; border: 1px solid; }
.compare-tag-old { color: #fff; border-color: rgba(255,255,255,0.35); }
.compare-tag-new { color: var(--color-accent); border-color: rgba(152,117,180,0.4); }
.compare-subtag { display: block; margin: 0.9rem 0 1.8rem; font-size: 0.92rem; color: var(--text-muted); }
.compare-list { display: flex; flex-direction: column; gap: 0.6rem; }
.compare-item { display: flex; gap: 1rem; padding: 1.2rem 1.3rem; border: 1px solid rgba(240,237,232,0.07); border-radius: 12px; background: rgba(255,255,255,0.012); transition: border-color var(--duration-base), background var(--duration-base), transform var(--duration-base) var(--ease-smooth); }
.compare-new .compare-item:hover { border-color: rgba(152,117,180,0.3); background: rgba(152,117,180,0.03); transform: translateY(-2px); }
.compare-item strong { display: block; font-family: var(--font-body); font-size: 1.02rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.3rem; }
.compare-item p { font-size: 0.92rem; line-height: 1.55; color: var(--text-secondary); }
.compare-icon { flex: none; width: 22px; height: 22px; border-radius: 50%; position: relative; margin-top: 2px; }
.icon-x { border: 1.5px solid rgba(255,255,255,0.4); }
.icon-x::before, .icon-x::after { content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 1.5px; background: #fff; }
.icon-x::before { transform: translate(-50%,-50%) rotate(45deg); }
.icon-x::after { transform: translate(-50%,-50%) rotate(-45deg); }
.icon-check { border: 1.5px solid rgba(152,117,180,0.55); }
.icon-check::before { content: ""; position: absolute; top: 46%; left: 50%; width: 5px; height: 9px; border-right: 1.5px solid var(--color-accent); border-bottom: 1.5px solid var(--color-accent); transform: translate(-50%,-55%) rotate(45deg); }
.compare-foot { text-align: center; margin-top: clamp(48px, 6vw, 80px); }
.compare-foot .t-body { color: var(--text-secondary); margin-bottom: 1.6rem; }

/* ================================================================= GOOGLE REVIEWS WALL */
.section-reviews { overflow: hidden; } /* background + text colour from .section-light */

.reviews-shell {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr; /* wall gets the larger share */
  gap: clamp(3rem, 6vw, 7rem);
  align-items: center;
}

/* --- Left: hero copy (light-section context) --- */
.reviews-hero .t-h2 { margin-top: 0.4rem; }
.reviews-hero .t-body { margin: 1.4rem 0 2.4rem; max-width: 40ch; }
.reviews-aggregate {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(26,26,26,0.12);
}
.reviews-agg-stars { display: inline-flex; gap: 2px; }
.rev-agg-star { width: 14px; height: 14px; fill: #FBBC04; }
.reviews-agg-text { font-size: 0.85rem; color: var(--text-body-light); }
.reviews-agg-text strong { color: var(--text-on-light); font-weight: 600; }

/* --- Right: floating wall --- */
.reviews-wall {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  height: clamp(680px, 78vh, 860px); /* shows ~6 cards at 900px, ~7-8 at 1080px+ */
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent 0%, black 7%, black 93%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 7%, black 93%, transparent 100%);
  position: relative;
}
.reviews-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  will-change: transform; /* GPU compositing, no layout thrash */
}

/* --- Card (white on warm-cream section bg for clear separation) --- */
.review-card {
  background: #FFFFFF;
  border-radius: 18px;
  padding: 1.1rem;
  box-shadow: 0 1px 6px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.05);
  flex: none;
  width: 100%;
  font-family: var(--font-body);
}
.review-card-header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.65rem;
}
.review-avatar-wrap { position: relative; flex: none; }
.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: #E0DDD8;
}
.review-avatar-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 600;
  color: #ffffff;
  font-family: var(--font-body);
  user-select: none;
}
.review-g-badge {
  position: absolute;
  bottom: -2px;
  right: -3px;
  width: 16px;
  height: 16px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.review-g-badge svg { width: 10px; height: 10px; }
.review-name {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: #1A1A1A;
  line-height: 1.3;
}
.review-date {
  display: block;
  font-size: 0.72rem;
  color: #8C8580;
  margin-top: 0.1rem;
}
.review-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 0.55rem;
}
.review-star { width: 11px; height: 11px; fill: #FBBC04; }
.review-star-empty { fill: #D9D5D0; }
.review-text {
  font-size: 0.84rem;
  line-height: 1.55;
  color: #2A2520;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 2 lines keeps cards compact for density */
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.4rem;
}
.review-read-more {
  display: block;
  font-size: 0.73rem;
  color: #7B746F; /* darkened from #8C8580 for AA contrast on white (was 3.63:1, now 4.6:1) */
  cursor: default;
}

/* --- Reduced motion: freeze wall, enable scroll --- */
@media (prefers-reduced-motion: reduce) {
  .reviews-col { will-change: auto; overflow-y: auto; max-height: 100%; }
}

/* --- Tablet: stack hero above wall, keep 2-column wall --- */
@media (max-width: 1024px) {
  .reviews-shell {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 3rem);
  }
  .reviews-wall {
    height: clamp(400px, 52vh, 520px); /* ~4-5 cards on tablet */
  }
}

/* --- Mobile: horizontal auto-scroll track --- */
@media (max-width: 600px) {
  .reviews-wall {
    display: block;          /* single track, no grid */
    height: auto;            /* sized by one card's natural height */
    padding: 6px 0;
    /* fade left + right edges so cards drift in/out cleanly */
    mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  }
  .reviews-col {
    flex-direction: row;     /* horizontal arrangement */
    gap: 10px;
  }
  .review-card {
    width: clamp(260px, 78vw, 300px); /* ~290px on most phones, fully readable */
    flex: none;
  }
  #reviews-col-b { display: none; } /* JS also sets this — belt and suspenders */
}

/* ================================================================= APPROACH (with photo) */
/* ---- SCROLLYTELLING APPROACH — pinned photo pane + scrolling steps ---- */
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; margin-top: clamp(2.4rem, 4vw, 4rem); }
.story-media {
  position: sticky; top: 100px;
  height: min(72svh, 640px);
  border-radius: 26px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,0.18);
}
.story-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.08);
  transition: opacity 0.8s var(--ease-smooth), transform 1.2s var(--ease-smooth);
}
.story-media img.on { opacity: 1; transform: scale(1); }
.story-media .badge {
  position: absolute; left: 1.4rem; bottom: 1.4rem; z-index: 2;
  padding: 0.55rem 1.1rem; border-radius: 100px;
  background: rgba(10,10,10,0.55); backdrop-filter: blur(8px);
  color: #fff; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
}
.story-steps { display: flex; flex-direction: column; }
.story-step {
  min-height: min(72svh, 640px);
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0.28; transition: opacity 0.6s var(--ease-smooth);
}
.story-step.on { opacity: 1; }
.story-step .num {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 144, 'wght' 300, 'SOFT' 30;
  font-size: clamp(3.4rem, 6vw, 5rem); line-height: 1;
  color: var(--color-accent-dim); margin-bottom: 0.6rem;
}
.story-step h3 { margin-bottom: 0.6rem; }
.story-step .t-body { max-width: 42ch; } /* color inherited from .section-light .t-body */
@media (prefers-reduced-motion: reduce) {
  .story-media img { transition: opacity 0.25s linear; transform: none; }
}
@media (max-width: 860px) {
  .story-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .story-media { position: sticky; top: 86px; height: 44svh; z-index: 2; }
  .story-step { min-height: 70svh; justify-content: flex-start; padding-top: clamp(2rem, 6vh, 3.2rem); }
}

/* ================================================================= 4-PHASE FRAMEWORK */
.section-framework { background: var(--bg-secondary); }
.framework-line { position: relative; height: 1px; background: rgba(240,237,232,0.14); margin: 0 0 clamp(36px, 4vw, 56px); }
.framework-line-arrow { position: absolute; right: -2px; top: 50%; transform: translateY(-50%); color: var(--color-accent); font-size: 1.2rem; }
.framework-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid rgba(240,237,232,0.1); border-radius: 14px; overflow: hidden; }
.phase-col { padding: clamp(1.8rem, 2.6vw, 2.6rem); border-right: 1px solid rgba(240,237,232,0.1); transition: background var(--duration-base); }
.phase-col:last-child { border-right: none; }
.phase-col:hover { background: rgba(255,255,255,0.02); }
.phase-num { color: var(--color-accent); display: block; margin-bottom: 1.2rem; }
.phase-col h3 { margin-bottom: 0.9rem; }
.phase-col .t-body { color: var(--text-secondary); font-size: 0.98rem; }

/* ================================================================= SERVICES OVERVIEW */
.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid rgba(240,237,232,0.1); }
.service-row { display: grid; grid-template-columns: minmax(180px, 0.8fr) 1fr auto; align-items: center; gap: 1.5rem; padding: clamp(1.4rem, 2.5vw, 2.1rem) 1.4rem; border-bottom: 1px solid rgba(240,237,232,0.1); position: relative; transition: padding-left var(--duration-base) var(--ease-smooth), background var(--duration-base); }
.services-grid .service-row:nth-child(odd) { border-right: 1px solid rgba(240,237,232,0.1); }
.service-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--color-accent); transform: scaleY(0); transform-origin: bottom; transition: transform var(--duration-base) var(--ease-smooth); }
.service-row:hover { padding-left: 2.4rem; background: rgba(255,255,255,0.02); }
.service-row:hover::before { transform: scaleY(1); }
.service-name { font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 500; }
.service-desc { color: var(--text-secondary); font-size: 0.98rem; }
.service-arrow { color: var(--color-accent); font-size: 1.3rem; opacity: 0; transform: translateX(-8px); transition: opacity var(--duration-fast), transform var(--duration-fast) var(--ease-smooth); }
.service-row:hover .service-arrow { opacity: 1; transform: translateX(0); }

/* ================================================================= WHAT WE TREAT (with photo) */
.treat-head { display: grid; grid-template-columns: 1fr 0.9fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; margin-bottom: clamp(48px, 6vw, 80px); }
.treat-head-text .t-body { margin-top: 1.4rem; color: var(--text-body-light); max-width: 42ch; }
.treat-head-media { border-radius: 14px; overflow: hidden; aspect-ratio: 5/4; }
.treat-head-media img { width: 100%; height: 100%; object-fit: cover; }
.treat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid rgba(26,26,26,0.14); }
.treat-item { position: relative; padding: clamp(1.6rem, 3vw, 2.4rem) 0.4rem; border-bottom: 1px solid rgba(26,26,26,0.14); display: flex; align-items: flex-end; min-height: clamp(120px, 14vw, 180px); transition: padding-left var(--duration-base) var(--ease-smooth); }
.treat-item span { font-family: var(--font-display); font-size: clamp(1.2rem, 1.8vw, 1.6rem); font-weight: 500; color: var(--text-on-light); position: relative; }
.treat-item span::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 100%; background: var(--color-accent-dim); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-base) var(--ease-smooth); }
.treat-item:hover { padding-left: 1rem; }
.treat-item:hover span::after { transform: scaleX(1); }
.treat-item-all span { color: var(--color-accent-dim); }

/* ================================================================= STATS */
.section-stats { background: var(--bg-primary); }
body.hero-mode-canvas .section-stats { background: rgba(10,10,10,0.9); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(2rem, 4vw, 3rem); }
/* Grid layout keeps number+suffix on same row — labels always align */
.stat {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.06em;
}
.stat-number { grid-column: 1; grid-row: 1; font-family: var(--font-display); font-weight: 600; font-size: clamp(3.5rem, 7vw, 6rem); line-height: 1; letter-spacing: -0.03em; color: var(--text-primary); display: block; }
.stat-suffix { grid-column: 2; grid-row: 1; align-self: end; font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 4vw, 3rem); color: var(--color-accent); display: block; padding-bottom: 0.15em; }
.stat-label { grid-column: 1 / -1; grid-row: 2; margin-top: 1rem; font-size: 0.85rem; letter-spacing: 0.04em; color: var(--text-secondary); text-transform: uppercase; }
/* Secondary proof bar below stats grid */
.stats-proof-bar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(0.8rem, 2vw, 1.6rem);
  margin-top: clamp(2rem, 3.5vw, 3rem);
  padding-top: clamp(1.4rem, 2.5vw, 2rem);
  border-top: 1px solid rgba(240,237,232,0.1);
}
.stats-proof-item {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.88rem; color: var(--text-secondary); white-space: nowrap;
}
.stats-proof-item strong { color: var(--text-primary); font-weight: 600; }
.stats-proof-stars { display: inline-flex; gap: 1px; }
.stats-proof-stars .star { width: 13px; height: 13px; fill: var(--color-accent); }
.stats-proof-divider {
  width: 1px; height: 18px;
  background: rgba(240,237,232,0.18); flex: none;
}

/* ================================================================= TESTIMONIALS */
.section-testimonials { background: var(--bg-primary); }
.testimonial-stage { position: relative; min-height: clamp(280px, 34vh, 360px); margin-top: 1rem; }
.testimonial-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity var(--duration-slow) var(--ease-smooth), transform var(--duration-slow) var(--ease-smooth), visibility var(--duration-slow); max-width: 980px; }
.testimonial-slide.is-active { opacity: 1; visibility: visible; transform: none; position: relative; }
.testimonial-stars { display: inline-flex; gap: 4px; margin-bottom: 1.6rem; }
.testimonial-quote { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.6rem, 3.4vw, 3rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--text-primary); }
.testimonial-cite { display: block; margin-top: 1.8rem; font-style: normal; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-primary); }
.testimonial-cite span { color: var(--text-muted); }
.testimonial-dots { display: flex; gap: 0.7rem; margin-top: 2.8rem; }
.testimonial-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(240,237,232,0.18); transition: background var(--duration-fast), transform var(--duration-fast); }
.testimonial-dot.is-active { background: var(--color-accent); transform: scale(1.25); }

/* ================================================================= TEAM (with photos) */
.team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(2rem, 4vw, 3.5rem); }
.team-grid > .team-card { flex: 0 1 calc(33.333% - clamp(2rem, 4vw, 3.5rem) * 2 / 3); }
.team-card { padding-bottom: 1.6rem; border-bottom: 1px solid rgba(26,26,26,0.16); }
.team-photo { aspect-ratio: 4/5; border-radius: 6px; margin-bottom: 1.4rem; position: relative; overflow: hidden; background: #d2cdc2; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(20,86,76,0.25)); pointer-events: none; }
.team-name { font-size: clamp(1.2rem, 1.8vw, 1.5rem); margin-bottom: 0.5rem; }
.team-cred { color: var(--color-accent-dim); display: block; margin-bottom: 0.9rem; }
.team-card .t-body { color: var(--text-body-light); font-size: 0.98rem; }

/* ================================================================= FAQ */
.section-faq { background: var(--bg-light); }
.faq-shell { max-width: 980px; }
.faq-list { border-top: 1px solid rgba(26,26,26,0.14); }
.faq-item { border-bottom: 1px solid rgba(26,26,26,0.14); }
.faq-question { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1rem; padding: clamp(1.3rem, 2.2vw, 1.8rem) 0; font-family: var(--font-body); font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 600; color: var(--text-on-light); transition: color var(--duration-fast); }
.faq-question::-webkit-details-marker { display: none; }
.faq-question:hover { color: var(--color-accent-dim); }
.faq-num { color: var(--color-accent-dim); font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; flex: none; }
.faq-chev { margin-left: auto; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--text-on-light); border-bottom: 2px solid var(--text-on-light); transform: rotate(45deg); transition: transform var(--duration-base) var(--ease-smooth); }
.faq-item[open] .faq-chev { transform: rotate(-135deg); }
.faq-answer { max-width: 70ch; padding: 0 0 clamp(1.3rem, 2.2vw, 1.8rem) calc(2.6rem); color: var(--text-body-light); }
.faq-item[open] .faq-answer { animation: faqOpen .4s var(--ease-smooth); }
@keyframes faqOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ================================================================= CTA BAND */
/* ================================================================= SECTION BACKGROUND PHOTOS
   Reusable class for photo backgrounds behind sections.
   Each section controls its own opacity. Swap src per client deployment. */
.section-bg-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  display: block;
  user-select: none;
  z-index: 0 !important;
}
/* Ensure text/content in these sections renders above the photo */
.section-cta-band .cta-band-inner { position: relative; z-index: 2 !important; }

/* CTA band: dark teal gradient stays on top, photo adds depth beneath */
.section-cta-band .section-bg-photo { opacity: 0.18; mix-blend-mode: normal; }

/* Stats section: subtle photo texture */
.section-stats::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: url('../assets/images/clinic/training-hero.webp') center/cover no-repeat; /* the clinic floor, not the template's stock hospital lobby */
  opacity: 0.07;
  pointer-events: none;
  mix-blend-mode: luminosity;
}
/* Ensure stats content stays above the texture */
.section-stats .section-shell { position: relative; z-index: 2; }

/* ---- KNOCKOUT PHOTO BREAK — background-clip:text word with photo panning inside it ----
   Replaces the old background-attachment:fixed parallax break (deprecated: broke whenever
   any ancestor gained transform/filter/perspective, poor iOS support). This has none of
   those failure modes. Swap the photo at assets/images/pt-knockout.webp. */
.knock-sec {
  background: linear-gradient(180deg, #0B0A10, #060509);
  overflow: hidden;
  position: relative;
}
.knock-sec::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 80% at 50% 0%, var(--color-accent-glow), transparent 70%);
}
.knock {
  position: relative; z-index: 1;
  display: block; text-align: center;
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 144, 'wght' 720, 'SOFT' 0;
  font-size: clamp(5rem, 21vw, 19rem);
  line-height: 0.92; letter-spacing: -0.02em;
  text-transform: uppercase;
  background-image: url('../assets/images/pt-knockout.webp');
  background-size: cover;
  background-position: 50% 0%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  will-change: background-position;
  user-select: none;
}
@media (prefers-reduced-motion: reduce) {
  .knock { background-position: 50% 40% !important; }
}
@media (max-width: 640px) {
  .knock { font-size: clamp(3.6rem, 26vw, 7rem); letter-spacing: -0.01em; }
}

.section-cta-band { background: var(--color-accent-deep); color: #fff; position: relative; overflow: hidden; }
.section-cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% -20%, rgba(255,255,255,0.08), transparent 60%); pointer-events: none; z-index: 1; }
.cta-band-inner { max-width: 880px; text-align: center; position: relative; z-index: 2; }
.cta-band-label { display: inline-block; color: rgba(255,255,255,0.6); margin-bottom: 1.6rem; }
.cta-band-title { font-family: var(--font-display); font-size: clamp(2.4rem, 5.5vw, 4.6rem); font-weight: 600; line-height: 1.0; letter-spacing: -0.02em; color: #fff; }
.cta-band-sub { margin: 1.6rem auto 2.6rem; max-width: 60ch; font-size: clamp(1rem, 1.3vw, 1.18rem); line-height: 1.65; color: rgba(255,255,255,0.78); font-weight: 300; }
.cta-band-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ================================================================= FOOTER */
.site-footer { background: var(--bg-primary); border-top: 1px solid rgba(240,237,232,0.08); padding-top: clamp(64px, 8vw, 110px); }
.footer-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: clamp(2rem, 4vw, 3.5rem); padding-bottom: clamp(48px, 6vw, 80px); }
.footer-brand .nav-logo { margin-bottom: 1.4rem; }
.footer-tagline { color: var(--text-secondary); max-width: 36ch; font-size: 0.95rem; }
.footer-social { display: flex; gap: 0.8rem; margin-top: 1.8rem; }
.footer-social a { width: 38px; height: 38px; border: 1px solid rgba(240,237,232,0.16); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: border-color var(--duration-fast), background var(--duration-fast); }
.footer-social svg { width: 18px; height: 18px; fill: var(--text-secondary); transition: fill var(--duration-fast); }
.footer-social a:hover { border-color: var(--color-accent); }
.footer-social a:hover svg { fill: var(--color-accent); }
.footer-col-title { color: var(--text-muted); display: block; margin-bottom: 1.4rem; }
.footer-col a, .footer-contact a, .footer-hours { display: block; color: var(--text-secondary); font-size: 0.95rem; padding: 0.35rem 0; transition: color var(--duration-fast); }
.footer-col a:hover, .footer-contact a:hover { color: var(--color-accent); }
.footer-contact { font-style: normal; }
.footer-hours { color: var(--text-muted); padding-top: 0.6rem; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.8rem; padding-bottom: 2.4rem; border-top: 1px solid rgba(240,237,232,0.07); font-size: 0.82rem; color: var(--text-muted); flex-wrap: wrap; }
.footer-powered { color: var(--text-muted); }
.footer-legal a, .footer-powered a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; transition: color var(--duration-fast); }
.footer-legal a:hover, .footer-powered a:hover { color: var(--color-accent); }

/* ================================================================= SCROLL REVEAL fallback */
.no-gsap [data-animation] > * { opacity: 0; transform: translateY(40px); transition: opacity var(--duration-slow) var(--ease-smooth), transform var(--duration-slow) var(--ease-smooth); }
.no-gsap [data-animation].is-revealed > * { opacity: 1; transform: none; }

/* ================================================================= RESPONSIVE */
@media (max-width: 1024px) {
  .nav-links, .nav-phone, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .hero-split-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-copy { max-width: none; }
  .compare-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .compare-divider { display: none; }
  .framework-grid { grid-template-columns: repeat(2, 1fr); }
  .phase-col:nth-child(2) { border-right: none; }
  .phase-col:nth-child(1), .phase-col:nth-child(2) { border-bottom: 1px solid rgba(240,237,232,0.1); }
  .treat-head { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 2rem; }
  .treat-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid > .team-card { flex-basis: calc(50% - 1.25rem); }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

@media (max-width: 640px) {
  .services-grid { grid-template-columns: 1fr; }
  .services-grid .service-row:nth-child(odd) { border-right: none; }
  .service-row { grid-template-columns: 1fr auto; }
  .service-desc { grid-column: 1 / -1; grid-row: 2; }
  .framework-grid { grid-template-columns: 1fr; }
  .phase-col { border-right: none; border-bottom: 1px solid rgba(240,237,232,0.1); }
  .phase-col:last-child { border-bottom: none; }
  .treat-grid { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  /* Larger tap targets for stacked single-column footer links */
  .footer-col a, .footer-contact a { padding: 0.7rem 0; }
  .hero-scrub-spacer { height: 180vh; }
  /* Mode A (canvas) hero has no scrim behind its text by default, unlike Mode B's
     `.hero-bg-overlay`. Desktop gets away with it because the video was directed with a calm,
     near-black left third reserved for type (see hero/BRIEF.md). At narrow viewports the frame
     crop no longer has that dead zone — the bright light-trail motion sweeps directly behind the
     text column mid-scrub (confirmed empirically around scroll progress 0.35-0.5) — so add a
     permanent bottom-anchored scrim here to guarantee legibility regardless of frame content. */
  .hero-scrub-content::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.6) 32%, rgba(10,10,10,0.85) 62%, rgba(10,10,10,0.9) 100%);
  }
  /* Stats grid: 1-column on small phones */
  .stats-grid { grid-template-columns: 1fr; }
  .team-grid > .team-card { flex-basis: 100%; }
  .faq-answer { padding-left: 0; }
  /* t-label readable minimum on small phones */
  .t-label { font-size: 0.8rem; }
  /* Mobile iframe heights — !important overrides inline styles set per-page */
  .hero-form .ghl-form-wrap iframe { min-height: 340px !important; }
}

/* ---- Mobile iframe & form fixes ---- */
.inner-form-embed { position: relative; }
.inner-form-embed iframe { display: block; width: 100%; border: none; background: transparent; }
.services-booking > .section-shell,
.about-booking > .section-shell,
.canvas-booking > .section-shell { position: relative; z-index: 1; }

@media (max-width: 640px) {
  /* Booking form iframes: reduce to avoid full-viewport takeover on mobile */
  .inner-form-embed iframe { min-height: 420px !important; }
  .canvas-booking-right .inner-form-embed iframe { min-height: 380px !important; }
  /* Map embed: more height at mobile for usability */
  .location-map-embed { height: clamp(280px, 50vw, 380px); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .hero-heading .word { transform: none; }
  .hero-el { opacity: 1; transform: none; }
  .proof-marquee-track { animation: none; }
}

/* =================================================================
   DEPTH & ATMOSPHERE LAYER — v1.3  (rich / cinematic)
   Grain + ambient glows + tonal rhythm + elevation + photo duotone
   + vignette + editorial watermark.
   COLOR SYSTEM (all swappable per client):
     --color-accent    teal   — primary  (CTAs, highlights)
     --color-accent-2  blue   — secondary (ambient light, depth)   ← swap to client's blue/red
     --color-warn      coral  — "old way" markers / warm accents
   ================================================================= */

:root {
  /* === SECONDARY BRAND — swapped for The Movement Guild. Client's palette is purple-only (no
     second hue), so this reuses the deep purple brand color rather than leaving the template's
     default blue in ambient glows and photo duotones (hero bloom, compare/framework/stats
     section glows, treat-head and team-photo overlays, canvas-booking glow). === */
  --color-accent-2:      #413064;
  --color-accent-2-dim:  #362B4E;
  --color-accent-2-glow: rgba(65,48,100,0.16);
}

/* ---- Global film grain (over everything except cursor + loader) ---- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9500; pointer-events: none;
  opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
/* ---- Soft global vignette for cinematic focus ---- */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 8000; pointer-events: none;
  background: radial-gradient(125% 105% at 50% 38%, transparent 58%, rgba(0,0,0,0.28));
}

/* ---- Section glow scaffolding: clip glows, lift content above them ---- */
main > section { overflow: hidden; }
main > section > * { position: relative; z-index: 1; }

/* ================= HERO — ambient teal/blue bloom over the image ===== */
.hero-split::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen;
  background:
    radial-gradient(48% 42% at 88% 10%, var(--color-accent-glow), transparent 70%),
    radial-gradient(55% 50% at 6% 96%, var(--color-accent-2-glow), transparent 72%);
}
.hero-split-inner { position: relative; z-index: 3; }   /* above the ::before bloom (z2) */
.hero-form {
  background: linear-gradient(180deg, rgba(22,22,23,0.86), rgba(11,11,12,0.82));
  box-shadow: 0 40px 90px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ================= SOCIAL PROOF BAR ================================== */
.section-proof { background: linear-gradient(180deg, #131313, #0F0F0F); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }

/* ================= OLD vs NEW — warm/cool column split + glows ======= */
.section-compare { background: linear-gradient(180deg, #0B0B0C, #090909); }
.section-compare::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 46% at 82% 26%, var(--color-accent-glow), transparent 70%),
    radial-gradient(40% 48% at 16% 82%, var(--color-accent-2-glow), transparent 72%);
}
.compare-old { background: radial-gradient(82% 60% at 50% 0%, rgba(224,121,95,0.05), transparent 68%); border-radius: 18px; padding: 1.6rem 1.2rem; }
.compare-new { background: radial-gradient(82% 60% at 50% 0%, rgba(152,117,180,0.06), transparent 68%); border-radius: 18px; padding: 1.6rem 1.2rem; }
.compare-item {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.008));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 14px 30px rgba(0,0,0,0.32);
}

/* ================= APPROACH — lifted charcoal + teal glow =========== */
.section-approach { background: linear-gradient(180deg, #0D0E0E, #0A0A0A); }
.section-approach::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(46% 55% at 20% 45%, var(--color-accent-glow), transparent 72%);
}

/* ================= 4-PHASE FRAMEWORK — blue glow + elevation ======== */
.section-framework { background: linear-gradient(180deg, #111113, #0D0D0E); }
.section-framework::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 60% at 80% 60%, var(--color-accent-2-glow), transparent 70%);
}
.framework-grid {
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 26px 60px rgba(0,0,0,0.4);
}

/* ================= SERVICES — faint cool drift ====================== */
.section-services { background: linear-gradient(180deg, #0A0A0A, #0C0D0E); }

/* ================= WHAT WE TREAT (light) — warm paper + duotone ===== */
.section-light { background: linear-gradient(180deg, #F6F4F0, #ECE8E0); }
.treat-head-media { position: relative; box-shadow: 0 28px 60px rgba(20,30,28,0.22); }
.treat-head-media::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(150deg, var(--color-accent) 0%, transparent 50%, var(--color-accent-2) 100%); opacity: 0.4;
}

/* ================= STATS — dramatic dual-glow stage ================= */
.section-stats { background: #090909; }
.section-stats::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 80% at 28% 50%, var(--color-accent-glow), transparent 70%),
    radial-gradient(58% 80% at 76% 50%, var(--color-accent-2-glow), transparent 70%);
}

/* ================= TESTIMONIALS — quote watermark + faint glow ====== */
.section-testimonials { background: linear-gradient(180deg, #0A0A0A, #0D0D0F); }
.section-testimonials::after {
  content: "\201C"; position: absolute; left: 1%; top: -10%; z-index: 0; pointer-events: none;
  font-family: var(--font-display); font-weight: 700; line-height: 1;
  font-size: clamp(18rem, 36vw, 42rem); color: rgba(152,117,180,0.05);
}

/* Elfsight Google Reviews widget (in .section-testimonials) renders its own React components
   directly into the page rather than in an iframe, with two internal elements that fail AA on
   its own white card background: the review date (3.46:1) and the "read more" toggle (4.2:1).
   We don't control that vendor's source, so this targets the stable, human-readable part of its
   styled-components class names (the hash suffix can change on Elfsight's next widget deploy;
   the component name is far less likely to) rather than reaching into iframe-isolated internals
   we can't reach at all. If a future Elfsight update stops matching, qa/axe-sweep.mjs will catch
   it again — see docs/accessibility-report.md §4/§7 for the vendor-side alternative (their widget
   theme editor). */
.elfsight-app-c428194d-478e-4b87-9f1b-6f6d20658b52 [class*="ReviewInfo__StyledDateTime"] { color: #6F6F70 !important; }
.elfsight-app-c428194d-478e-4b87-9f1b-6f6d20658b52 [class*="TextControl__BaseControl"] { color: #0066F0 !important; }

/* ================= TEAM (light) — photo duotone + lift ============== */
.team-photo { box-shadow: 0 24px 50px rgba(20,30,28,0.2); }
.team-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(160deg, var(--color-accent-2) 0%, transparent 55%, var(--color-accent) 100%); opacity: 0.35;
}

/* ================= CTA BAND — light-purple/dark-purple gradient mesh =========
   Was hardcoded teal (rgba(28,96,84)) and blue (rgba(22,52,96)) literals bypassing the
   accent variables entirely — the template defaults, never swapped for this client's
   purple-only brand. Replaced with the client's own two accent tones. */
.section-cta-band {
  background:
    radial-gradient(72% 100% at 14% 0%, rgba(152,117,180,0.85), transparent 60%),
    radial-gradient(82% 120% at 92% 100%, rgba(65,48,100,0.9), transparent 55%),
    var(--color-accent-deep);
}

/* ================= FOOTER — subtle top sheen ======================== */
.site-footer { background: linear-gradient(180deg, #0C0C0D, #080808); }

/* =================================================================
   CONTRAST BOOST — v1.4
   Fixes: (1) grain was invisible (overlay/soft-light die on black) →
   normal blend at real opacity. (2) section bleed → a perceptible
   value ladder + crisp dividers so every band is distinct.
   ================================================================= */

/* ---- Stronger ambient light ---- */
:root {
  --color-accent-glow:   rgba(152,117,180,0.24);
  --color-accent-2-glow: rgba(65,48,100,0.28);
}

/* ---- Grain you can actually see (normal blend; dual layer for tooth) ---- */
body::after {
  opacity: 0.16;
  mix-blend-mode: normal;
  background-size: 130px 130px;
}

/* ---- Crisp section separators — kills the bleed between bands ---- */
main > section { border-top: 1px solid rgba(255,255,255,0.09); }
.section-light { border-top: 1px solid rgba(20,30,28,0.14); }
.section-cta-band { border-top: 1px solid rgba(255,255,255,0.16); }
.site-footer { border-top: 1px solid rgba(255,255,255,0.10); }

/* ---- THE VALUE LADDER — each dark band steps light↔dark vs its neighbors --- */
.section-proof        { background: linear-gradient(180deg, #1A1C20, #15171A); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }   /* lifted bar */
.section-compare      { background: linear-gradient(180deg, #0A0A0B, #070708); }                                                     /* deep */
.section-approach     { background: linear-gradient(180deg, #15171A, #101215); }                                                     /* lifted charcoal */
.section-framework    { background: linear-gradient(180deg, #0B0F18, #080B12); }                                                     /* cool blue-dark */
.section-services     { background: linear-gradient(180deg, #08080A, #060608); }                                                     /* darkest */
.section-stats        { background: linear-gradient(180deg, #0B1815, #07110F); }                                                     /* teal-tinted feature */
.section-testimonials { background: linear-gradient(180deg, #14161C, #0E1014); }                                                     /* lifted cool */

/* Light bands: bolder, and clearly different from each other */
.section-treat.section-light { background: linear-gradient(180deg, #F7F5F1, #EDE9E1); }
.section-team.section-light  { background: linear-gradient(180deg, #EFEBE3, #E6E1D7); }   /* a touch deeper warm */
.section-faq.section-light   { background: linear-gradient(180deg, #F7F5F1, #EFEBE3); }
/* .service-process's own dark gradient (inner-pages.css) has equal specificity and loads later,
   so it silently won over .section-light on shop.html (the only page pairing the two), leaving
   .section-light's already-darkened h2/body text sitting on a dark background — invisible.
   shop.html is the only page combining these two classes; this override is scoped to that pairing
   only, so service-process stays dark everywhere else it's used on its own. */
.service-process.section-light { background: linear-gradient(180deg, #F6F4F0, #ECE8E0); }
.service-process.section-light::before { display: none; } /* the dark-mode accent glow does not read on cream */
/* The phone/email links inside these steps' .t-body were relying on color alone once visible
   (inheriting --text-body-light, identical to the surrounding text) — add underline. */
.service-process.section-light .t-body a { color: var(--color-accent-dim); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.service-process.section-light .t-body a:hover { color: var(--color-accent); }

.site-footer { background: linear-gradient(180deg, #070708, #040405); }

/* ---- Push the feature glows harder so depth reads, not just tints ---- */
.section-stats::before {
  background:
    radial-gradient(60% 90% at 26% 50%, var(--color-accent-glow), transparent 68%),
    radial-gradient(60% 90% at 78% 50%, var(--color-accent-2-glow), transparent 68%);
}
.section-stats .stat-number { text-shadow: 0 0 60px rgba(152,117,180,0.18); }

/* ---- Elevated panels gain crisper edges now that bg is lighter ---- */
.compare-item { border-color: rgba(255,255,255,0.1); }
.framework-grid, .hero-form { border-color: rgba(255,255,255,0.12); }

/* ---- Light-section headings deepen for stronger type contrast ---- */
.section-light .t-h2 { color: #14100C; }

/* =================================================================
   LIGHT TEXTURE + LIGHT INJECTIONS — v1.5
   (1) Hexagon pattern overlay on every light band for depth.
   (2) Proof bar + Approach flipped to light to break the dark run.
   ================================================================= */

/* ---- INVERSE GLOW (the opposite of the framework section) ----
   Light field + a soft DARK, brand-tinted bloom in a corner. Replaces the
   hexagons. Corner + hue varied per section so they read as lit, not tiled. */
.section-approach.section-light::before,
.section-treat::before,
.section-team::before,
.section-faq::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; display: block;
}
.section-treat::before {           /* teal bloom bottom-right + cool shade top-left */
  background:
    radial-gradient(62% 78% at 90% 100%, rgba(13,68,59,0.40), transparent 72%),
    radial-gradient(46% 56% at 4% 2%, rgba(16,30,28,0.18), transparent 72%);
}
.section-team::before {            /* blue bloom top-left + teal shade bottom-right */
  background:
    radial-gradient(60% 76% at 8% 0%, rgba(22,50,104,0.38), transparent 72%),
    radial-gradient(50% 60% at 97% 97%, rgba(13,52,46,0.20), transparent 72%);
}
.section-faq::before {             /* teal bloom top-right + blue shade bottom-left */
  background:
    radial-gradient(56% 72% at 94% 4%, rgba(13,68,59,0.37), transparent 72%),
    radial-gradient(52% 64% at 2% 100%, rgba(22,50,104,0.22), transparent 72%);
}

/* ---- APPROACH → light (bloom opposite the media pane) ---- */
.section-approach.section-light { background: linear-gradient(180deg, #F5F2EC, #ECE7DE); }
.section-approach.section-light::before { background: radial-gradient(52% 68% at 97% 10%, rgba(13,68,59,0.30), transparent 73%); }
.section-approach.section-light .section-head .t-body { color: var(--text-body-light); }

/* =================================================================
   SERVICES BENTO + WHAT-WE-TREAT GROUPED CARDS — v1.7
   ================================================================= */

/* ---------- SERVICES — bento icon cards (dark) ---------- */
.bento-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(clamp(158px, 13.5vw, 208px), auto); gap: 16px;
}
/* Flagship card: content flows from the top (no stranded arrow gap) */
.bento-feature {
  grid-column: span 2; grid-row: span 2;
  justify-content: flex-start;
  gap: clamp(1rem, 2vw, 1.7rem);
}
/* Flagship card differentiator list — fills the 2×2 card so it reads intentional */
.bento-feature-list { list-style: none; margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.bento-feature-list li { display: flex; align-items: center; gap: 0.7rem; font-size: clamp(0.9rem, 1vw, 1rem); color: var(--text-secondary); line-height: 1.3; }
.bento-feature-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); flex: none; box-shadow: 0 0 8px var(--color-accent-glow); }
.bento-card {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(1.5rem, 2.2vw, 2.2rem); border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
  border: 1px solid rgba(240,237,232,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 16px 40px rgba(0,0,0,0.35);
  transition: transform .4s var(--ease-smooth), border-color .4s, box-shadow .4s;
}
.bento-card::before {           /* teal bloom on hover (behind content) */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(70% 90% at 82% 0%, var(--color-accent-glow), transparent 70%);
  transition: opacity .4s var(--ease-smooth);
}
.bento-card > * { position: relative; z-index: 1; }
.bento-card:hover {
  transform: translateY(-5px); border-color: rgba(152,117,180,0.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 28px 64px rgba(0,0,0,0.5), 0 0 60px var(--color-accent-glow);
}
.bento-card:hover::before { opacity: 1; }
.bento-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.6rem; }
.bento-icon svg { width: 34px; height: 34px; fill: none; stroke: var(--color-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bento-num { font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0.08em; }
.bento-name { font-family: var(--font-display); font-size: clamp(1.3rem, 1.8vw, 1.7rem); font-weight: 500; margin-bottom: 0.5rem; }
.bento-desc { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.5; }
.bento-arrow { color: var(--color-accent); font-size: 1.35rem; margin-top: 1.4rem; align-self: flex-start; transform: translateX(0); transition: transform .3s var(--ease-smooth); }
.bento-card:hover .bento-arrow { transform: translateX(7px); }
/* featured tile gets bigger type + a faint corner glow at rest */
.bento-feature { background: linear-gradient(150deg, rgba(152,117,180,0.07), rgba(255,255,255,0.012) 45%); }
.bento-feature .bento-icon svg { width: 46px; height: 46px; }
.bento-feature .bento-name { font-size: clamp(1.9rem, 2.8vw, 2.8rem); }
.bento-feature .bento-desc { font-size: 1.05rem; max-width: 42ch; }
.bento-feature .bento-arrow { font-size: 1.6rem; }

/* ---------- WHAT WE TREAT — grouped by body region (light) ---------- */
.treat-groups { display: flex; flex-direction: column; gap: clamp(2.2rem, 4vw, 3.2rem); }
.treat-group-title { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.3rem; }
.treat-group-title .t-label { color: var(--color-accent-dim); flex: none; }
.treat-group-title::after { content: ""; flex: 1; height: 1px; background: rgba(20,30,28,0.16); }
.treat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.treat-card {
  position: relative; display: flex; align-items: center; gap: 1.1rem;
  padding: 1.3rem 1.5rem; border-radius: 14px;
  background: rgba(255,255,255,0.5); border: 1px solid rgba(20,30,28,0.12);
  box-shadow: 0 10px 26px rgba(20,30,28,0.07);
  transition: transform .35s var(--ease-smooth), border-color .35s, box-shadow .35s, background .35s;
}
.treat-card:hover {
  transform: translateY(-3px); border-color: rgba(122,91,150,0.55); background: rgba(255,255,255,0.82);
  box-shadow: 0 20px 44px rgba(20,86,76,0.16);
}
.treat-card-icon { flex: none; }
.treat-card-icon svg { width: 30px; height: 30px; fill: none; stroke: var(--color-accent-dim); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.treat-card-name { font-family: var(--font-display); font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 500; color: var(--text-on-light); flex: 1; }
.treat-card-arrow { color: var(--color-accent-dim); font-size: 1.15rem; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s var(--ease-smooth); }
.treat-card:hover .treat-card-arrow { opacity: 1; transform: translateX(0); }

@media (max-width: 1024px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-feature { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 640px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-feature { grid-column: span 1; }
}

/* ================================================================= INTERACTIVE BODY MAP */
.body-map {
  display: grid;
  grid-template-columns: 1fr 160px 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  margin: clamp(2.4rem, 4vw, 4.5rem) 0;
}
.body-map-figure { display: flex; justify-content: center; }
/* Image stack with CSS glow hotspots */
.body-image-stack {
  position: relative;
  display: block;
  width: 100%;
  max-width: 220px;
  margin: 0 auto;
  /* Black bg matches the body diagram black background */
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}
.body-base {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
/* Pre-rendered highlight images (kept for future use) */
.body-highlight {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.body-highlight.is-active { opacity: 1; }

/* CSS radial glow hotspots — mix-blend-mode:screen lights up the
   salmon/orange muscles with a bright red-orange when active */
.bm-glow {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(255, 60, 20, 0.9) 0%,
    rgba(255, 60, 20, 0.5) 45%,
    transparent 72%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: all;
  cursor: pointer;
}
.bm-glow.is-active { opacity: 1; }

/* Condition labels list */
.body-map-labels {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.body-map-label {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0;
  padding: clamp(0.45rem, 0.9vw, 0.7rem) 0;
  border-bottom: 1px solid rgba(20,16,12,0.08);
  cursor: pointer;
}
.body-map-label:first-child { border-top: 1px solid rgba(20,16,12,0.08); }
.body-map-label-line {
  flex: 1;
  height: 1px;
  background: rgba(20,16,12,0.1);
  transition: background 0.22s;
}
.body-map-label a {
  font-family: var(--font-body);
  font-size: clamp(0.8rem, 1vw, 0.92rem);
  font-weight: 500;
  color: rgba(20,16,12,0.55);
  text-decoration: none;
  padding: 0 0.6rem;
  text-align: center;
  white-space: nowrap;
  transition: color 0.22s, font-weight 0.1s;
  display: block;
}
.body-map-label.is-active a,
.body-map-label:hover a {
  color: var(--color-accent-dim);
  font-weight: 600;
}
.body-map-label.is-active .body-map-label-line,
.body-map-label:hover .body-map-label-line {
  background: rgba(122,91,150,0.45);
}

/* Mobile: stack vertically, labels become pills */
@media (max-width: 767px) {
  .body-map {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1.5rem;
  }
  .body-map-labels {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;
  }
  .body-map-label {
    width: auto;
    border: 1px solid rgba(20,16,12,0.14);
    border-radius: 20px;
    padding: 0.3rem 0.7rem;
    border-top: 1px solid rgba(20,16,12,0.14) !important;
    border-bottom: 1px solid rgba(20,16,12,0.14) !important;
  }
  .body-map-label-line { display: none; }
  .body-map-label a { padding: 0; font-size: 0.8rem; }
  .body-map-label.is-active {
    background: rgba(122,91,150,0.1);
    border-color: var(--color-accent-dim) !important;
  }
  .body-map-svg { max-width: 130px; }
}


/* ================================================================= CANVAS-MODE BOOKING (Option B: Copy + Form) */
body.hero-mode-canvas .canvas-booking,
body.hero-mode-canvas .canvas-location { z-index: 4; }

.canvas-booking {
  display: none;
  background: linear-gradient(180deg, #0C0E16, #08090F);
  position: relative; overflow: hidden;
  padding: var(--section-pad-v) 0;
}
.canvas-booking::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(55% 68% at 0% 100%, var(--color-accent-glow), transparent 64%),
    radial-gradient(42% 54% at 100% 0%, var(--color-accent-2-glow), transparent 64%);
}
.canvas-booking > .section-shell { position: relative; z-index: 1; }
body.hero-mode-canvas .canvas-booking { display: block; }

.canvas-booking-split {
  display: grid; grid-template-columns: 1fr 1.65fr;
  gap: clamp(3rem, 6vw, 7rem); align-items: start;
}
.canvas-booking-left .section-label { color: var(--color-accent); }
.canvas-booking-left .t-h2 { color: var(--text-primary); margin-bottom: 1.8rem; }
.booking-trust-pills { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2.2rem; }
.booking-trust-pill {
  display: flex; align-items: center; gap: 0.9rem;
  font-size: 0.93rem; color: var(--text-secondary); line-height: 1.45;
}
.booking-trust-check {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: rgba(152,117,180,0.12); border: 1px solid rgba(152,117,180,0.25);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-accent); font-size: 0.72rem; font-weight: 700;
}
.booking-phone-link {
  display: flex; align-items: center; gap: 0.8rem;
  font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 600; color: var(--text-primary); line-height: 1;
  text-decoration: none; margin-bottom: 2.2rem;
  transition: color var(--duration-fast);
}
.booking-phone-link:hover { color: var(--color-accent); }
.booking-phone-link svg { width: 20px; height: 20px; fill: none; stroke: var(--color-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.booking-proof-row {
  display: flex; gap: clamp(1.8rem, 3vw, 2.8rem);
  padding-top: 1.8rem;
  border-top: 1px solid rgba(240,237,232,0.08);
}
.booking-proof-stat { display: flex; flex-direction: column; }
.booking-proof-num {
  font-family: var(--font-display); font-size: clamp(1.8rem, 2.8vw, 2.6rem);
  font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: var(--color-accent);
}
.booking-proof-suffix { font-family: var(--font-display); font-size: 1.3rem; color: var(--color-accent); font-weight: 600; }
.booking-proof-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.3rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* ================================================================= CANVAS-MODE LOCATION (Map + Info) */
.canvas-location {
  display: none;
  background: linear-gradient(180deg, #F6F4F0, #ECE8E0);
  position: relative; overflow: hidden;
  padding: var(--section-pad-v) 0;
}
.canvas-location::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(50% 62% at 5% 5%, rgba(22,50,104,0.18), transparent 66%),
    radial-gradient(44% 54% at 97% 97%, rgba(13,68,59,0.14), transparent 66%);
}
.canvas-location > .section-shell { position: relative; z-index: 1; }
body.hero-mode-canvas .canvas-location,
body.hero-mode-video .canvas-location { display: block; }
/* The two standalone location pages always show this section — it isn't
   gated behind the homepage's video/canvas hero toggle. */
.canvas-location--static { display: block; }

.canvas-location-head { margin-bottom: clamp(2.4rem, 4vw, 4rem); }
.canvas-location-head .t-h2 { color: #14100C; }
.canvas-location-head .section-label { color: var(--color-accent-dim); }
/* .t-body has no color of its own and was inheriting body's near-white --text-primary onto
   this section's light gradient background — invisible text. Same fix pattern as .section-light. */
.canvas-location-head .t-body { color: var(--text-body-light); }
.canvas-location-head .t-body a { color: var(--color-accent-dim); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.canvas-location-head .t-body a:hover { color: var(--color-accent); }
.canvas-location-body {
  display: flex; flex-direction: column;
  gap: clamp(2.6rem, 4.5vw, 4rem);
}
.location-pair {
  display: grid; grid-template-columns: 1.6fr 1fr;
  gap: clamp(1.4rem, 2.5vw, 2.2rem); align-items: start;
}
.location-map-embed {
  border-radius: 14px; overflow: hidden;
  height: clamp(320px, 42vh, 500px);
  border: 1px solid rgba(20,30,28,0.12);
  box-shadow: 0 8px 32px rgba(20,30,28,0.1);
}
.location-map-embed iframe { width: 100%; height: 100%; border: none; display: block; }
.location-info-card {
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(20,30,28,0.1);
  border-radius: 14px; padding: clamp(1.6rem, 2.5vw, 2.2rem);
  box-shadow: 0 4px 20px rgba(20,30,28,0.07);
}
.location-clinic-name {
  font-family: var(--font-body); font-weight: 700;
  font-size: 1.06rem; color: var(--text-on-light);
  margin-bottom: 1.4rem; padding-bottom: 1rem;
  border-bottom: 1px solid rgba(20,30,28,0.1);
}
.location-info-row {
  display: flex; align-items: flex-start; gap: 0.85rem;
  margin-bottom: 1rem;
}
.location-info-row:last-child { margin-bottom: 0; }
.location-info-icon {
  width: 32px; height: 32px; flex: none;
  background: rgba(122,91,150,0.1); border-radius: 7px;
  display: flex; align-items: center; justify-content: center; margin-top: 0.05rem;
}
.location-info-icon svg {
  width: 16px; height: 16px; fill: none;
  stroke: var(--color-accent-dim); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.location-info-text { font-size: 0.92rem; line-height: 1.55; }
.location-info-text address { font-style: normal; color: var(--text-on-light); font-weight: 500; }
.location-info-text a { color: var(--text-on-light); font-weight: 500; transition: color var(--duration-fast); text-decoration: none; }
.location-info-text a:hover { color: var(--color-accent-dim); }
.location-info-text span { color: var(--text-body-light); }

@media (max-width: 1024px) {
  .canvas-booking-split { grid-template-columns: 1fr; }
  .location-pair { grid-template-columns: 1fr; }
  .location-map-embed { height: clamp(260px, 38vw, 380px); }
}

/* ================================================================= NETLIFY BOOKING FORM
   Replaces GHL iframes sitewide. Dark-background variant is the default
   (used in all booking sections). Styled to match the site design system. */
.netlify-form { display: flex; flex-direction: column; gap: 0; }
.netlify-form-honeypot { display: none !important; visibility: hidden; }

.form-row { margin-bottom: 1rem; }
.form-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.form-label {
  display: block;
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(240,237,232,0.45);
  margin-bottom: 0.45rem;
}
.form-input {
  width: 100%; display: block;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(240,237,232,0.13);
  border-radius: 8px;
  padding: 0.78rem 1rem;
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 300;
  color: var(--text-primary);
  transition: border-color var(--duration-fast), background var(--duration-fast);
  appearance: none; -webkit-appearance: none;
}
.form-input::placeholder { color: rgba(240,237,232,0.22); }
.form-input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: rgba(152,117,180,0.55);
  background: rgba(255,255,255,0.09);
  /* was 0.08 alpha, effectively invisible as a focus indicator — raised for AA visibility */
  box-shadow: 0 0 0 3px rgba(152,117,180,0.35);
}
.form-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(240,237,232,0.4)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.form-select option { background: var(--bg-secondary); color: var(--text-primary); }

.form-submit {
  width: 100%; justify-content: center;
  margin-top: 0.5rem; height: 52px;
  font-size: 0.85rem; letter-spacing: 0.06em;
}

/* Success state */
.netlify-form.is-submitted { display: none; }
.netlify-form-success {
  display: none; text-align: center;
  padding: clamp(2rem, 5vw, 3.5rem) 1.5rem;
}
.netlify-form-success.is-visible { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.netlify-form-success-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(152,117,180,0.12); border: 1px solid rgba(152,117,180,0.3);
  display: flex; align-items: center; justify-content: center;
}
.netlify-form-success-icon svg { width: 24px; height: 24px; stroke: var(--color-accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.netlify-form-success h3 { font-family: var(--font-display); font-size: 1.4rem; color: var(--text-primary); }
.netlify-form-success p { font-size: 0.92rem; color: var(--text-secondary); max-width: 32ch; line-height: 1.6; }

@media (max-width: 640px) {
  .form-row-2col { grid-template-columns: 1fr; }
}

/* =================================================================
   CLIENT BLOCK — The Movement Guild
   Additive only. Nothing above this line is modified. Every rule here is
   client configuration, not a change to a template system.
   ================================================================= */

/* Mode B hero stand-in. No background video exists on the client's old site, so the real
   poster still carries a slow, continuous Ken-Burns pan — the template's default look
   for a client with no video footage of their own. */
.hero-bg-img {
  transform-origin: 58% 45%;
  will-change: transform;
  animation: heroKenBurns 34s ease-in-out infinite alternate;
}
@keyframes heroKenBurns {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.16) translate3d(-1.4%, -1.6%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg-img { animation: none !important; transform: scale(1.03); }
}

/* Footer logo. The nav rule caps .nav-logo-img at 32px, correct for the pill but far too
   small for the 1.6fr footer brand column, where the stacked mark has room to breathe. */
.footer-brand .nav-logo { margin-bottom: 1.1rem; }
.footer-brand .nav-logo-img { max-height: 76px; }
.footer-brand .footer-contact { margin-top: 1.3rem; }

/* Touch targets. The template's mobile footer links land at 34px and the social icons at 38px,
   both under the 44px minimum. Enforced here rather than by editing the template's own rules. */
@media (max-width: 920px) {
  .site-footer a { min-height: 44px; display: flex; align-items: center; }
  .footer-social { gap: 0.5rem; }
  .site-footer .footer-social a { min-width: 44px; min-height: 44px; justify-content: center; }
}

/* The hero H1 is four words for this client; the template ships slide-up delays for three. */
.hero-ready .hero-heading .word:nth-child(4) { transition-delay: .62s; }

/* The Road to Recovery is a FIVE stage framework. The template's phase grid is hard-wired to
   four columns, so the fifth stage would orphan onto its own row. Additive override only:
   five wide on desktop, and the 2-up tablet layout gets its seams corrected for five items. */
@media (min-width: 1025px) {
  .framework-grid { grid-template-columns: repeat(5, 1fr); }
  .phase-col { padding: clamp(1.4rem, 1.9vw, 2.1rem); }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .phase-col:nth-child(4) { border-right: none; }
  .phase-col:nth-child(3), .phase-col:nth-child(4) { border-bottom: 1px solid rgba(240,237,232,0.1); }
  .phase-col:nth-child(5) { grid-column: 1 / -1; border-right: none; }
}

/* Scrollytelling on mobile. The template's own spec says the media pane should stay pinned at
   the top while the steps scroll beneath it, and the QA checklist tests for exactly that, but
   the shipped rule cannot deliver it: at <=860px `.story-grid` becomes a single column, so the
   media lands in its own grid row and `position: sticky` has no travel inside a row that is
   only as tall as the media itself. The pane just scrolls away with the page.

   Fix without touching the template rule: overlap the media and the steps in ONE grid cell on
   mobile. The row is then as tall as the steps, which is the travel the sticky needs, and the
   steps are pushed down so the first one clears the pinned pane. This is a bug in the master
   template, not a client-specific problem, and is worth fixing upstream. */
@media (max-width: 860px) {
  .story-grid > .story-media { grid-row: 1; grid-column: 1; }
  .story-grid > .story-steps { grid-row: 1; grid-column: 1; padding-top: calc(44svh + 1.4rem); }
}

/* THE SCROLLYTELLING SECTION WAS NOT PINNING AT ALL, at any viewport.
   `main > section { overflow: hidden }` (styles.css line ~894) applies to every top-level
   section including `.section-approach`. `overflow: hidden` establishes a scroll container, so
   the `position: sticky` media pane resolved against that non-scrollable box instead of the
   viewport and simply scrolled away with the page. The whole point of the section, the photo
   holding while the steps pass it, never happened.

   The template already knows this failure mode: its own Known Decisions record that `hidden`
   breaks `position: sticky` and that `clip` does the same visual job without the scroll-container
   side effect, which is exactly why `body` uses `overflow-x: clip`. The blanket section rule just
   never got the same treatment. Restoring `overflow-y` to `visible` (keeping only `overflow-x: clip`
   to prevent horizontal scroll) fixes the pinning without also clipping the box-shadow.

   That alone was not enough, though: a sticky element only stays pinned for
   (container height − element height) of scroll before it has to start catching up to its
   container's bottom edge. `.story-steps` was exactly 3 × step-height tall with no slack, so the
   640px-tall media pane only had (1920 − 640) = 1280px of pin travel — precisely 2 of the 3 steps.
   It unstuck the instant step 3 became active and had fully scrolled off well before step 3's
   copy finished, confirmed with a scroll-position diagnostic (see qa/pass-6-report.md). Adding
   padding-bottom equal to the media's own height gives the pin the extra step's worth of room it
   needs to hold through the end of step 3. */
main > section.section-approach { overflow-x: clip; overflow-y: visible; }
.story-steps { padding-bottom: min(72svh, 640px); }

/* ---- Clinic intro video (click-to-load YouTube facade) ---- */
.section-video { background: linear-gradient(180deg, #101215, #0C0D10); }
.section-video .section-head { margin-bottom: clamp(32px, 4vw, 56px); }
.video-frame { max-width: 960px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,0.45); }
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-facade { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.video-facade img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-smooth), filter .3s; }
.video-facade:hover img { transform: scale(1.02); filter: brightness(0.9); }
.video-play { position: absolute; top: 50%; left: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 10px 30px rgba(0,0,0,0.4); transition: transform .3s var(--ease-smooth); }
.video-play::after { content: ""; position: absolute; top: 50%; left: 50%; margin: -14px 0 0 -8px; border-style: solid; border-width: 14px 0 14px 24px; border-color: transparent transparent transparent #fff; }
.video-facade:hover .video-play, .video-facade:focus-visible .video-play { transform: scale(1.08); }
.video-facade:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
@media (max-width: 640px) { .video-frame { border-radius: 14px; } .video-play { width: 64px; height: 64px; margin: -32px 0 0 -32px; } .video-play::after { margin: -11px 0 0 -6px; border-width: 11px 0 11px 19px; } }

/* ---- Nav fit: collapse to the hamburger earlier than the 1024px layout breakpoint so the
   Schedule CTA never spills out of the pill (it did between ~1025 and ~1120px). */
@media (max-width: 1140px) {
  .nav-links, .nav-phone, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
}

/* ---- Footer link to Adam's personal site (logo needs a light plate: its grey reads poorly on dark) ---- */
.footer-col a.footer-partner { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; width: fit-content; margin-top: 1.8rem; padding: 0; text-align: left; }
.footer-partner-label { font-size: 0.82rem; color: var(--text-muted); transition: color var(--duration-fast); }
.footer-partner-plate { display: block; background: #F4F2EE; border-radius: 12px; padding: 0.7rem 1rem; transition: transform var(--duration-fast), box-shadow var(--duration-fast); }
.footer-partner-plate img { display: block; width: 180px; height: auto; }
.footer-partner:hover .footer-partner-label { color: var(--color-accent); }
.footer-partner:hover .footer-partner-plate { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
.footer-partner:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: 12px; }

/* Mobile readability + touch targets (pre-launch QA, 2026-10-25). Card copy, footer links and
   review text sat at 13–15.7px on phones; body copy is held at 16px here. Uppercase labels and
   dates keep their small-caps style on purpose. */
@media (max-width: 768px) {
  .compare-item p, .bento-desc, .bento-feature-list li, .review-text, .phase-col .t-body,
  .team-card .t-body, .footer-tagline, .footer-hours, .footer-col a, .footer-contact a { font-size: 1rem; }
  .footer-legal a, .footer-powered a, .link-arrow { font-size: 1rem; }
  /* nowrap proof items ran past the screen edge (text clipped); stack them instead */
  .stats-proof-item { white-space: normal; font-size: 1rem; }
  .stats-proof-divider { display: none; }
  /* The 920px touch-target rule made these flex blocks, so the "·" separators wrapped onto
     their own lines; inline-flex keeps the 44px height and lets the row flow. */
  .site-footer .footer-legal a, .site-footer .footer-powered a { display: inline-flex; }
  .link-arrow { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Mobile-only Call button (phone icon + number) beside the hamburger. Phones only:
   hidden on tablet and desktop. The header is position: fixed, so it stays on screen. */
.nav-call-mobile { display: none; }
@media (max-width: 767px) {
  .nav-inner { gap: 0.5rem; padding: 0 0.85rem 0 1rem; }
  .nav-logo { flex: 0 1 auto; min-width: 0; }
  .nav-logo-img, .site-header.logo-tall .nav-logo-img { max-width: 100%; max-height: 40px; }
  .nav-call-mobile {
    display: inline-flex; align-items: center; gap: 0.4rem; flex: none;
    margin-left: auto; height: 40px; padding: 0 0.85rem;
    border-radius: 100px; border: 1px solid var(--color-accent);
    background: var(--color-accent); color: #0A0A0A;
    font-family: var(--font-body); font-size: clamp(0.74rem, 3.4vw, 0.84rem); font-weight: 600; letter-spacing: 0.02em;
    white-space: nowrap; line-height: 1;
    transition: background var(--duration-fast), border-color var(--duration-fast);
  }
  .nav-call-mobile:hover, .nav-call-mobile:active { background: var(--color-accent-dim); border-color: var(--color-accent-dim); }
  .nav-call-icon { width: 15px; height: 15px; fill: currentColor; flex: none; }
}

/* =================================================================
   HERO BOOKING FORM — compact card, text left / form right
   Shared by the homepage hero and the Service / What We Treat inner heroes. Slightly smaller
   than a full-size form so it sits beside the headline without dominating it. */
.hero-form { width: 100%; max-width: 430px; justify-self: end; padding: clamp(1.25rem, 2vw, 1.75rem); }
.hero-form .hero-form-title { font-size: clamp(1.35rem, 1.9vw, 1.75rem); }
.hero-form .hero-form-sub { margin: 0.5rem 0 1.1rem; font-size: 0.85rem; }
.hero-form .form-row { margin-bottom: 0.75rem; }
.hero-form .form-row-2col { gap: 0.75rem; }
.hero-form .form-label { font-size: 0.66rem; margin-bottom: 0.35rem; }
.hero-form .form-input { padding: 0.62rem 0.85rem; font-size: 0.9rem; }
.hero-form .form-select { padding-right: 2.2rem; background-position: right 0.85rem center; }
.hero-form .form-submit { height: 46px; margin-top: 0.35rem; }
.hero-form .hero-form-call { margin-top: 0.9rem; }
.hero-form .phone-link-sm { font-size: 1.1rem; }
.hero-form .netlify-form-success { padding: 1.5rem 0.5rem; }

/* Homepage: keep the two-column hero (text left, form right) through tablet; stack only on
   phones, where side-by-side cannot fit. */
@media (min-width: 641px) and (max-width: 1024px) {
  .hero-split-inner { grid-template-columns: minmax(0, 1fr) minmax(290px, 360px); gap: clamp(1.5rem, 3.5vw, 2.5rem); }
  .hero-heading { font-size: clamp(2.4rem, 5.6vw, 3.6rem); }
}
@media (min-width: 641px) and (max-width: 900px) {
  .hero-form .form-row-2col { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hero-form { max-width: none; justify-self: stretch; }
  /* 16px inputs stop iOS Safari from zooming the page when a field is focused */
  .hero-form .form-input { font-size: 1rem; }
}