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

:root {
  /* === BRAND — SWAP THESE PER CLIENT === */
  --color-accent:        #0080D6;                 /* primary brand color (Recalibrate logo blue) */
  --color-accent-dim:    #005E9B;                 /* darker accent for hover states */
  --color-accent-deep:   #0A3D63;                 /* deep blue — used for full CTA-band backgrounds */
  --color-accent-glow:   rgba(0,128,214,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:          #837B75;   /* lightened from #6B6560: original failed WCAG AA (3.3-3.5:1) against bg-primary/bg-secondary; this hits 4.55-4.77:1 */
  --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:            104px;
}

/* ----------------------------------------------------------------- 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: SKIP LINK */
.skip-link {
  position: absolute;
  top: 0; left: 0;
  z-index: 10000;
  padding: 0.9rem 1.6rem;
  background: var(--bg-light);
  color: var(--text-on-light);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 0 0 10px 0;
  transform: translateY(-120%);
  transition: transform 0.2s var(--ease-smooth);
}
.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid var(--color-accent);
  outline-offset: -3px;
}

/* ----------------------------------------------------------------- ACCESSIBILITY: VISUALLY HIDDEN
   Standard clip-based hidden-but-announced utility, for text like "(opens in new tab)" that
   should reach assistive tech without appearing in the visual design. */
.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;
}

/* ----------------------------------------------------------------- ACCESSIBILITY: FOCUS VISIBILITY
   Strengthens the default focus indicator sitewide (WCAG 2.4.7 / 2.4.11) without altering
   layout or default appearance for mouse/touch users, who never trigger :focus-visible. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Light-section context needs a darker ring to hold 3:1 against a light background */
.section-light a:focus-visible,
.section-light button:focus-visible,
.section-light summary:focus-visible,
footer a:focus-visible,
footer button:focus-visible {
  outline-color: var(--color-accent-dim);
}

/* ----------------------------------------------------------------- ACCESSIBILITY: REDUCED MOTION BACKSTOP
   Stops all CSS animation/transition/scroll-behavior instantly. This does not by itself reveal
   JS-hidden content — see the .js-gated reveal rules below and prefers-reduced-motion branches
   in app.js / page.js for that. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ----------------------------------------------------------------- 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: 84px;  /* sized for the 3-line stacked wordmark logo — see .nav-logo-img below */
  padding: 12px 0;
  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) ----
   This client's lockup is a 3-line stacked wordmark (icon + RECALIBRATE /
   PERFORMANCE / & REHAB) that turns to mush below ~56-60px tall, so the
   pill grows (see .site-header above) to give it room instead of the
   default 32px horizontal sizing.  */
.nav-logo-img {
  display: block;
  max-height: 60px;
  width: auto;
  object-fit: contain;
}
/* 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(0,137,229,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; }
/* The 44px min-width/min-height (WCAG touch target) wins over the 28x20 box above,
   so the icon lines (absolutely positioned, which ignores the parent's flex centering)
   must be offset to sit centered within the real 44x44 box, not the nominal 28x20 one. */
.nav-toggle span { position: absolute; left: 8px; width: 28px; height: 1.5px; background: rgba(20,16,12,0.8); border-radius: 2px; transition: transform .35s var(--ease-smooth), opacity .25s; }
.nav-toggle span:nth-child(1) { top: 12px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 30px; }
body.menu-open .nav-toggle span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
/* Mobile overlay nav */
.mobile-nav { position: fixed; inset: 0; z-index: 999; background: var(--bg-primary); display: flex; flex-direction: column; justify-content: center; gap: 3rem; padding: var(--header-h) var(--section-pad-h) 8vh; 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.4rem; }
.mobile-nav-links a { font-family: var(--font-display); font-size: clamp(2.4rem, 9vw, 3.4rem); font-weight: 600; letter-spacing: -0.02em; opacity: 0; transform: translateY(20px); transition: opacity .5s var(--ease-smooth), transform .5s var(--ease-smooth), color var(--duration-fast); transition-delay: calc(var(--i) * 0.06s + 0.1s); }
.mobile-nav-links a:hover { color: var(--color-accent); }
body.menu-open .mobile-nav-links a { opacity: 1; transform: translateY(0); }
.mobile-nav-phone { align-self: flex-start; }
/* Mobile nav sub-menus (Services / What We Treat) + call link. The overlay scrolls once
   an open sub-menu makes it taller than the screen; the auto margins keep the block
   vertically centered while it still fits. */
.mobile-nav { justify-content: flex-start; overflow-y: auto; overscroll-behavior: contain; }
.mobile-nav-links { margin-top: auto; }
.mnav-actions { margin-bottom: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
.mnav-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.mnav-sub-toggle { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(240,237,232,0.2); background: transparent; color: var(--text-primary); cursor: pointer; opacity: 0; transform: translateY(20px); transition: opacity .5s var(--ease-smooth), transform .5s var(--ease-smooth), border-color var(--duration-fast); transition-delay: calc(var(--i) * 0.06s + 0.1s); }
body.menu-open .mnav-sub-toggle { opacity: 1; transform: translateY(0); }
.mnav-sub-toggle:hover, .mnav-sub-toggle[aria-expanded="true"] { border-color: var(--color-accent); }
.mnav-sub-toggle span::before, .mnav-sub-toggle span::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform .3s var(--ease-smooth); }
.mnav-sub-toggle span::after { transform: translate(-50%, -50%) rotate(90deg); }
.mnav-sub-toggle[aria-expanded="true"] span::after { transform: translate(-50%, -50%) rotate(0deg); }
.mnav-sub { display: flex; flex-direction: column; margin: 0.2rem 0 0.8rem 0.2rem; padding-left: 1.1rem; border-left: 1px solid rgba(240,237,232,0.14); }
.mnav-sub[hidden] { display: none; }
.mobile-nav-links .mnav-sub a { display: flex; align-items: center; min-height: 44px; font-family: var(--font-body); font-size: 1.05rem; font-weight: 500; letter-spacing: 0; color: var(--text-secondary); opacity: 1; transform: none; transition: color var(--duration-fast); }
.mobile-nav-links .mnav-sub a:hover { color: var(--color-accent); }
.mnav-call { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--text-primary); }
.mnav-call:hover { color: var(--color-accent); }
/* LeadConnector chat sits above everything (z 99999999); hide it while the menu is open
   so its greeting bubble can't cover the menu's CTA on short phones. */
body.menu-open chat-widget { display: none !important; }
/* Responsive — collapse links at 920px, show hamburger */
@media (max-width: 920px) {
  .site-header { top: 12px; width: calc(100% - 24px); height: 68px; padding: 8px 0; }
  .nav-logo-img { max-height: 44px; }
  .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; }
}

/* ---- No-script fallback nav: the hamburger menu below 920px is entirely JS-driven
   (initNav() toggles body.menu-open), so with JavaScript disabled it can never open and
   About/Contact/etc become unreachable. <noscript> only renders when scripting is off, so
   this has zero effect on the JS-enabled experience for any visitor. ---- */
.noscript-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.4rem;
  padding: calc(var(--header-h) + 20px) var(--section-pad-h) 20px;
  background: var(--bg-primary);
}
.noscript-nav a {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.4rem 0.2rem;
}
@media (min-width: 921px) {
  /* .nav-links already works without JS above the hamburger breakpoint */
  .noscript-nav { display: 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: rgba(240,237,232,0.94); margin-bottom: 2rem; text-shadow: 0 2px 14px rgba(0,0,0,0.75), 0 1px 4px rgba(0,0,0,0.9); }
.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 */
.js .hero-heading .word { transform: translateY(110%); transition: transform 0.9s var(--ease-smooth); }
.js .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 { position: relative; 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-stat .proof-text strong { font-size: inherit; }
.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.is-paused { animation-play-state: paused; }

/* ---- Pause/play control for continuously-animating content (WCAG 2.2.2) ---- */
.motion-toggle {
  position: absolute;
  top: 50%; right: 0;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(10,10,10,0.7);
  border: 1px solid rgba(240,237,232,0.45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--text-primary);
  z-index: 3;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}
.motion-toggle:hover { background: rgba(10,10,10,0.9); border-color: rgba(240,237,232,0.6); }
.motion-toggle svg { width: 13px; height: 13px; fill: currentColor; }
/* The sitewide `svg { display: block }` reset is an author rule, so it silently beats the
   browser's default `[hidden] { display: none }` UA rule (author origin always wins over
   user-agent origin, regardless of specificity) — without this, both icons render at once. */
.motion-toggle svg[hidden] { display: none !important; }
/* Sits over the marquee strip specifically (the bottom of .section-proof), never inside
   .proof-marquee itself — that element's mask-image fades its own edges to transparent,
   which would fade the button to invisible too if it were a child of it. */
.motion-toggle-marquee { top: auto; bottom: 8px; right: 12px; transform: none; }
/* Anchored to .reviews-shell (not .reviews-wall) — that element's own mask-image fades
   its bottom edge to transparent, which would fade the button to invisible too. Sits over
   white review cards / a light section, so the dark fill itself already clears 3:1 against
   the background without needing a light-on-light border. */
.motion-toggle-reviews { top: auto; bottom: 4px; right: 4px; transform: none; border-color: rgba(240,237,232,0.18); }
@media (prefers-reduced-motion: reduce) {
  .motion-toggle { display: none; }
}
.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%); } }

/* ================================================================= 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: var(--text-primary); border-color: rgba(240,237,232,0.4); }
.compare-tag-new { color: var(--color-accent); border-color: rgba(0,128,214,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(0,128,214,0.3); background: rgba(0,128,214,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(240,237,232,0.5); }
.icon-x::before, .icon-x::after { content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 1.5px; background: var(--text-primary); }
.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(0,128,214,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 {
  position: relative;
  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: #78726E; /* darkened from #8C8580: original failed WCAG AA (3.6:1) on the white review card; this hits 4.7:1 */
  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: #78726E; /* darkened from #8C8580: original failed WCAG AA (3.6:1) on the white review card; this hits 4.7: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;
}
.js .story-step { 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); }
/* Flexbox, not grid: a grid column spanned by .stat-label (to sit under both the number and
   suffix) forces the "auto" number/suffix columns to widen to fit that label's own content,
   and different labels ("Specialized Services" vs "Google Reviews") forced different widths
   onto the *same* suffix column across different .stat instances — an identical "+" glyph
   measured 59px, 28px and 55px wide depending only on which label sat below it. Flex items
   don't share track sizing with each other, so this decouples the label from the number row. */
.stat { display: flex; flex-direction: column; align-items: flex-start; }
.stat-number-row { display: flex; align-items: flex-end; column-gap: 0.06em; }
.stat-number { 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 { 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 { 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); }
/* The Elfsight widget's own internal "What Our Customers Say" title renders near-black
   (its light-theme default) against this section's dark background, making it effectively
   invisible, and it duplicates the section-head above it ("Patient Stories / What our
   patients say."). Hidden rather than recolored to avoid the redundant heading. */
.section-testimonials .es-widget-title-header { display: none; }
.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: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
.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,59,86,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; }
.team-bio-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.9rem; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-dim); transition: gap var(--duration-fast); }
.team-bio-link:hover { gap: 0.7rem; }

/* ================================================================= 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 blue 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/pt-stats-bg.webp') center/cover no-repeat;
  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. */
.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) {
  /* 26vw let the word (currently 7 letters, "REBUILD") overflow its own box by ~11.5% at
     every mobile width, since a single-word background-clip:text block can't wrap to fit —
     21vw keeps it comfortably inside the viewport with room to spare. */
  .knock { font-size: clamp(3.6rem, 21vw, 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: 44px; height: 44px; 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-col a above also matches the icon links inside .footer-social (same specificity, later wins) —
   restore the circular, centered layout here so it isn't clobbered by the generic footer-link block/padding rule. */
.footer-social a { display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.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-powered a { color: inherit; transition: color var(--duration-fast); }
.footer-powered a:hover { color: var(--color-accent); }
.footer-legal-links { color: var(--text-muted); }
.footer-legal-links a { color: var(--text-muted); transition: color var(--duration-fast); }
.footer-legal-links 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 { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
  .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; }
  /* Stats grid: 1-column on small phones, centered rather than left-aligned */
  .stats-grid { grid-template-columns: 1fr; }
  .section-stats .section-head { text-align: center; }
  .stat { align-items: center; }
  .stats-proof-bar { justify-content: center; text-align: center; }
  .team-grid { grid-template-columns: 1fr; }
  .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; }
  .js .hero-heading .word { transform: none; }
  .js .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    blue   — 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 — SWAP PER CLIENT (blue default; for a red brand try #E0492F / #B5371F) === */
  --color-accent-2:      #2E6BE6;
  --color-accent-2-dim:  #1E4FB8;
  --color-accent-2-glow: rgba(46,107,230,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 ----
   Excludes .section-approach: its pinned .story-media relies on
   position: sticky, which an overflow: hidden ancestor breaks. Its own
   ::before glow is already inset: 0 within a position: relative parent,
   so it never overflows the section box and needs no separate clipping. */
main > section:not(.section-approach) { overflow: hidden; }
main > section > * { position: relative; z-index: 1; }

/* ================= HERO — ambient 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(0,128,214,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 + blue 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(0,128,214,0.05);
}

/* ================= 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 — blue gradient mesh =============== */
.section-cta-band {
  background:
    radial-gradient(72% 100% at 14% 0%, rgba(28,69,96,0.95), transparent 60%),
    radial-gradient(82% 120% at 92% 100%, rgba(22,52,96,0.85), 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(0,128,214,0.24);
  --color-accent-2-glow: rgba(46,107,230,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, #0B1318, #070D11); }                                                     /* blue-tinted feature */
.section-testimonials { background: linear-gradient(180deg, #0E0F14, #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); }

.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(0,128,214,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 {           /* blue bloom bottom-right + cool shade top-left */
  background:
    radial-gradient(62% 78% at 90% 100%, rgba(13,46,68,0.40), transparent 72%),
    radial-gradient(46% 56% at 4% 2%, rgba(16,24,30,0.18), transparent 72%);
}
.section-team::before {            /* blue bloom top-left + blue 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,36,52,0.20), transparent 72%);
}
.section-faq::before {             /* blue bloom top-right + blue shade bottom-left */
  background:
    radial-gradient(56% 72% at 94% 4%, rgba(13,46,68,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,46,68,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);
}
/* Trailing card spans the full row so the grid tiles cleanly regardless
   of how many secondary service cards there are (was tuned for 5, now 3) */
.bento-wide { grid-column: 1 / -1; }
/* 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 {           /* blue 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(0,128,214,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(0,128,214,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(16,117,184,0.55); background: rgba(255,255,255,0.82);
  box-shadow: 0 20px 44px rgba(20,59,86,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(0,117,196,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(0,117,196,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(0,137,229,0.12); border: 1px solid rgba(0,137,229,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,46,68,0.14), transparent 66%);
}
.canvas-location > .section-shell { position: relative; z-index: 1; }
body.hero-mode-canvas .canvas-location { 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); }
.canvas-location-body {
  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(0,117,196,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; }
  .canvas-location-body { grid-template-columns: 1fr; }
  .location-map-emit { 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: none;
  border-color: rgba(0,137,229,0.55);
  background: rgba(255,255,255,0.09);
}
.form-input:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(0,137,229,0.08);
}
.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(0,137,229,0.12); border: 1px solid rgba(0,137,229,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; }
}

/* ================================================================= MOBILE READABILITY + TAP TARGETS
   Pre-launch QA (2026-10-15): body copy rendered at 13.4-15.7px on phones and several
   standalone links were 17-34px tall. Lift body copy to 16px and standalone links to a
   44px touch height. "html body" prefix outranks the page-level rules in inner-pages.css. */
@media (max-width: 600px) {
  html body :is(.bento-desc, .bento-feature-list li, .service-card-featured-body, .about-pillar .t-body,
    .team-card .t-body, .compare-subtag, .compare-item p, .condition-card-desc, .contact-friction-note,
    .footer-contact a, .footer-hours, .footer-tagline, .phase-col .t-body, .location-info-text span,
    .location-info-text a, .outcome-item p, .process-step .t-body, .related-card p, .review-text,
    .service-key-fact span, .who-item-text, .service-card-desc, .stats-proof-item span, .symptom-item p,
    .treatment-note, .treatment-tool-name, .trust-body, .thank-you-call, .contact-info-item-text a,
    .service-feature-pill-text) { font-size: 16px; }
  html body :is(.inner-form-phone a, .booking-phone-link, .contact-info-item-text a, .location-info-text a,
    .footer-legal-links a, .footer-powered a, .thank-you-call, .link-arrow, .team-bio-link) {
    display: inline-flex; align-items: center; min-height: 44px; }
  html body .footer-legal-links { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: 0.4rem; }
  /* 30px pause buttons keep their look; an invisible ring widens the hit area to 44px. */
  .motion-toggle::before { content: ''; position: absolute; inset: -7px; }
}
/* Short phones (~664px visible on an iPhone 14 with browser bars): the bottom-anchored hero
   copy grew up under the floating header pill and hid the eyebrow label. */
@media (max-width: 600px) and (max-height: 760px) {
  .hero-scrub-content { padding-bottom: 36px; }
  .hero-scrub-content .hero-heading { margin: 0.4rem 0 1.2rem; }
}