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

:root {
  /* === BRAND — SWAP THESE PER CLIENT === */
  --color-accent:        #3AABCD;                 /* primary brand color (logo blue) */
  --color-accent-dim:    #227792;                 /* darker accent for hover states; darkened from #247E9A for AA text contrast (4.15:1 -> 4.5:1+ on light-section labels) */
  --color-accent-deep:   #0C2E39;                 /* deep blue — used for full CTA-band backgrounds */
  --color-accent-glow:   rgba(58,171,205,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:          #7F7872;                 /* lightened from #6B6560 for AA text contrast (3.45:1 -> 4.5:1+ on dark sections) */
  --text-on-light:       #1A1A1A;
  --text-body-light:     #4A4540;

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

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

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

  --header-h:            76px;
}

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

/* ----------------------------------------------------------------- ACCESSIBILITY: SKIP LINK + FOCUS */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: 20px; z-index: 10000;
  background: var(--bg-light); color: var(--text-on-light);
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  padding: 0.9rem 1.4rem; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  transition: top var(--duration-fast) var(--ease-smooth);
}
.skip-link:focus {
  top: 20px;
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.site-header :focus-visible,
.mobile-nav :focus-visible {
  outline-offset: 3px;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }
::selection { background: var(--color-accent); color: #0A0A0A; }

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

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

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

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

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

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

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

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

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

/* ---- Logo image support (replaces text logo when client has a graphic mark) ----
   Horizontal logo:  max-height 32px — fits the 56px pill with breathing room
   Stacked logo:     add class "logo-tall" to <header> — pill grows to 68px,
                     logo allowed up to 48px. Deployment guide: if logo is
                     square/portrait/stacked, add class="site-header logo-tall"  */
.nav-logo-img {
  display: block;
  max-height: 32px;
  width: auto;
  object-fit: contain;
}
/* Stacked/square logo variant — add class "logo-tall" to .site-header */
.site-header.logo-tall { min-height: 68px; padding: 10px 0; }
.site-header.logo-tall .nav-logo-img { max-height: 46px; }
/* Icon-only mark (no wordmark text) — use when logo is very wide or needs isolation */
.nav-logo-icon-only .nav-logo-text { display: none; }
.nav-logo-icon-only .nav-logo-img { max-height: 38px; }
.nav-links { display: flex; align-items: center; gap: clamp(1.2rem, 2vw, 1.8rem); flex: 1; justify-content: center; }
.nav-link { position: relative; font-size: 1rem; font-weight: 500; color: rgba(20,16,12,0.88); transition: color var(--duration-fast); padding: 0.3rem 0; white-space: nowrap; }
.nav-link:hover { color: rgba(20,16,12,1); }
.nav-link[aria-current="page"] { color: rgba(20,16,12,1) !important; }
.nav-link-parent { display: inline-flex; align-items: center; gap: 0.3rem; }
.nav-caret { width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-1px); transition: transform var(--duration-fast); }
.nav-dropdown { position: relative; }
/* Invisible bridge fills the gap between pill and dropdown so hover never breaks */
.nav-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -20px;
  right: -20px;
  height: 18px;
}
.nav-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  min-width: 230px;
  padding: 0.7rem 0;
  background: rgba(12,13,20,0.98);
  border: 1px solid rgba(58,171,205,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 { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav-dropdown:hover .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 { 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.88rem; font-weight: 700; color: rgba(20,16,12,0.85); 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;
}
/* min-width/min-height (44px touch target) override the explicit 28x20 box, so the
   actual rendered button is 44x44. The three bars below are sized/positioned relative
   to that real 44x44 box (left:50%+translateX, top:50%+offset) instead of assuming the
   old 28x20 box, otherwise they bunch in the top-left corner and the rotated "X" open
   state overflows the header pill. */
/* Whole-pixel math only. A fractional height (1.5px) or top offset (e.g. 0.75px)
   forces the rasterizer to anti-alias that bar across two physical pixels at partial
   opacity, so it renders visibly thinner/blurrier than bars that land on whole
   pixels — this is what caused the uneven line weight. 2px-thick bars, 6px gaps,
   all top offsets and open-state translateY values below are whole numbers. */
.nav-toggle { display: none; width: 28px; height: 20px; position: relative; flex: none; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.nav-toggle span { position: absolute; left: 50%; width: 28px; height: 2px; background: rgba(20,16,12,0.8); border-radius: 2px; transform: translateX(-50%); transition: transform .35s var(--ease-smooth), opacity .25s; }
.nav-toggle span:nth-child(1) { top: calc(50% - 9px); }
.nav-toggle span:nth-child(2) { top: calc(50% - 1px); }
.nav-toggle span:nth-child(3) { top: calc(50% + 7px); }
body.menu-open .nav-toggle span:nth-child(1) { transform: translateX(-50%) translateY(8px) rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .nav-toggle span:nth-child(3) { transform: translateX(-50%) translateY(-8px) rotate(-45deg); }
/* Mobile overlay nav */
/* justify-content:flex-start + overflow-y:auto (not the old center/visible-overflow combo):
   the Services/What We Treat accordions can push total content taller than the
   viewport, and centered, non-scrolling overflow pushed the top nav items up behind
   the fixed header pill with no way to scroll back to them. Top-aligned + scrollable
   keeps the list reachable regardless of how tall it gets. */
.mobile-nav { position: fixed; inset: 0; z-index: 999; background: var(--bg-primary); display: flex; flex-direction: column; justify-content: flex-start; overflow-y: auto; gap: 3rem; padding: calc(var(--header-h) + 1.5rem) 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; }
/* Responsive — collapse links at 920px, show hamburger */
@media (max-width: 920px) {
  .site-header { top: 12px; width: calc(100% - 24px); height: 52px; }
  .nav-links { display: none; }
  .nav-phone { display: none; }
  a.nav-cta.btn-primary, .btn.btn-primary.nav-cta { display: none; }
  .nav-toggle { display: flex; }
  /* Tall single-column mobile footer can scroll into the same viewport band the
     fixed header pill occupies; let taps pass through for the whole time the
     footer is on screen, not just at the very bottom of the page. */
  .site-header.is-over-footer { pointer-events: none; }
  /* pointer-events is inherited, so the rule above also disabled the hamburger
     and logo — the two things in the header a visitor actually still needs to
     tap. At a scroll position where the footer genuinely overlaps the header
     (e.g. scrolled to the very bottom), tapping where the hamburger visually
     sits fell through to whatever footer link happened to be underneath
     instead (reported as "opens Dry Needling instead of the nav"). Restore
     real clickability on just these two controls; the rest of the header (the
     decorative pill background) stays pass-through so footer links behind it
     are still reachable. */
  .site-header.is-over-footer .nav-toggle,
  .site-header.is-over-footer .nav-logo {
    pointer-events: auto;
  }
}

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

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

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

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

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

/* ================================================================= HERO — MODE A (canvas scrub) */
.canvas-wrap { position: fixed; inset: 0; z-index: 0; display: none; clip-path: circle(0% at 50% 50%); }
.canvas-wrap canvas { width: 100%; height: 100%; }
/* Hero frame poster — fixed div BEHIND the canvas-wrap (same z-index, earlier in DOM)
   Shows the first Higgsfield frame immediately. Through the circle(0%) clip of canvas-wrap,
   this poster is visible. As the circle expands, the animated canvas takes over. */
#hero-frame-poster { display: none; }
body.hero-mode-canvas #hero-frame-poster {
  display: block;
  position: fixed; inset: 0; z-index: 0;
  background: #0A0A0A url('../frames/frame_0001.jpg') center/cover no-repeat;
}
#dark-overlay { position: fixed; inset: 0; z-index: 1; background: var(--bg-primary); opacity: 0; pointer-events: none; display: none; }
.marquee-wrap { position: fixed; top: 42%; left: 0; z-index: 2; width: 100%; pointer-events: none; opacity: 0; display: none; white-space: nowrap; }
.marquee-wrap .marquee-text { display: inline-block; color: rgba(240,237,232,0.06); }
.hero-canvas { display: none; }
body.hero-mode-canvas .canvas-wrap, body.hero-mode-canvas #dark-overlay, body.hero-mode-canvas .marquee-wrap, body.hero-mode-canvas .hero-canvas { display: block; }
/* Ensure page sections sit ABOVE the fixed canvas/overlay stack in canvas mode */
body.hero-mode-canvas main,
body.hero-mode-canvas .site-footer { position: relative; z-index: 4; }
/* Canvas-mode booking section — hidden until canvas mode activates */
.canvas-booking { display: none; }
body.hero-mode-canvas .canvas-booking { display: block; }
.hero-canvas { position: relative; }
.hero-scrub-spacer { height: 250vh; }
.hero-scrub-content { position: fixed; top: 0; left: 0; z-index: 3; width: 100%; height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--section-pad-h) clamp(80px, 12vh, 140px); max-width: var(--max-width); margin: 0 auto; pointer-events: none; }
/* text scrim: the hero footage is bright (gym windows/daylight), so the copy needs a guaranteed-dark
   base beneath it independent of whatever the current frame looks like — not just a soft text-shadow */
.hero-scrub-content::before {
  content: ''; position: absolute; left: calc(-1 * var(--section-pad-h)); right: calc(-1 * var(--section-pad-h)); bottom: 0; height: 78%;
  background: linear-gradient(to top, rgba(6,8,9,0.88) 0%, rgba(6,8,9,0.62) 45%, rgba(6,8,9,0) 100%);
  pointer-events: none; z-index: -1;
}
.hero-scrub-content > * { pointer-events: auto; }
.hero-scrub-content .hero-heading { max-width: 14ch; margin: 0.6rem 0 1.8rem; }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ================================================================= SOCIAL PROOF BAR */
.section-proof { background: var(--bg-secondary); padding: 0 !important; overflow: hidden; }
.proof-bar { max-width: var(--max-width); margin: 0 auto; padding: clamp(28px, 4vw, 44px) var(--section-pad-h); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(1.2rem, 4vw, 3rem); }
.proof-stat { display: inline-flex; align-items: baseline; gap: 0.6rem; }
.proof-stat strong { font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 600; color: var(--text-primary); letter-spacing: -0.02em; }
.proof-text { font-size: 0.92rem; 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 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(--color-warn); border-color: rgba(224,121,95,0.4); }
.compare-tag-new { color: var(--color-accent); border-color: rgba(58,171,205,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(58,171,205,0.3); background: rgba(58,171,205,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(224,121,95,0.5); }
.icon-x::before, .icon-x::after { content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 1.5px; background: var(--color-warn); }
.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(58,171,205,0.55); }
.icon-check::before { content: ""; position: absolute; top: 46%; left: 50%; width: 5px; height: 9px; border-right: 1.5px solid var(--color-accent); border-bottom: 1.5px solid var(--color-accent); transform: translate(-50%,-55%) rotate(45deg); }
.compare-foot { text-align: center; margin-top: clamp(48px, 6vw, 80px); }
.compare-foot .t-body { color: var(--text-secondary); margin-bottom: 1.6rem; }

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

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

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

/* WCAG 2.2.2: visible, keyboard-reachable control for the auto-scrolling reviews wall. */
.reviews-pause-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.1rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-body-light);
  border: 1px solid rgba(26,26,26,0.16);
  border-radius: 100px;
  padding: 0.5rem 0.9rem;
  transition: border-color var(--duration-fast), color var(--duration-fast);
}
.reviews-pause-toggle::before {
  content: "";
  width: 8px; height: 8px; flex: none; border-radius: 50%;
  background: var(--color-accent);
}
.reviews-pause-toggle:hover,
.reviews-pause-toggle[aria-pressed="true"] {
  border-color: var(--color-accent);
  color: var(--text-on-light);
}
.reviews-pause-toggle[aria-pressed="true"]::before { background: var(--text-muted); }

/* --- 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: #7C7570;
  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: #7C7570;
  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; padding-bottom: min(72svh, 640px); }
/* the spacer above matches .story-media's own height: a sticky element can only stay
   pinned for (track height − its own height) of scroll, so without this buffer it
   unsticks one step early and snaps back to its static position off-screen. */
.story-step {
  min-height: min(72svh, 640px);
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0.28; transition: opacity 0.6s var(--ease-smooth);
}
.story-step.on { opacity: 1; }
.story-step .num {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 144, 'wght' 300, 'SOFT' 30;
  font-size: clamp(3.4rem, 6vw, 5rem); line-height: 1;
  color: var(--color-accent-dim); margin-bottom: 0.6rem;
}
.story-step h3 { margin-bottom: 0.6rem; }
.story-step .t-body { max-width: 42ch; } /* color inherited from .section-light .t-body */
@media (prefers-reduced-motion: reduce) {
  .story-media img { transition: opacity 0.25s linear; transform: none; }
}
@media (max-width: 860px) {
  .story-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .story-media { position: sticky; top: 86px; height: 44svh; z-index: 2; }
  .story-step { min-height: 70svh; justify-content: flex-start; padding-top: clamp(2rem, 6vh, 3.2rem); }
  .story-steps { padding-bottom: 0; }
}

/* ================================================================= 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(3, 1fr); gap: clamp(2rem, 4vw, 3rem); }
/* Grid layout keeps number+suffix on same row — labels always align */
.stat {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.06em;
}
/* display:contents makes this wrapper invisible to the grid — .stat-number and
   .stat-suffix still land directly in .stat's grid exactly as if the wrapper
   didn't exist. It only becomes a real box on mobile (see the media query below),
   where it's the thing that gets centered instead of centering .stat-number and
   .stat-suffix independently of each other. */
.stat-num-wrap { display: contents; }
.stat-number { grid-column: 1; grid-row: 1; font-family: var(--font-display); font-weight: 600; font-size: clamp(3.5rem, 7vw, 6rem); line-height: 1; letter-spacing: -0.03em; color: var(--text-primary); display: block; }
/* line-height:1 to match .stat-number — without it, the suffix inherits a looser
   body line-height, which adds leading space above the "+" glyph inside its grid
   cell and makes it float above the number's baseline instead of sitting near it. */
/* justify-self:start (not the grid default stretch) — .stat-label spans both
   columns (grid-column:1/-1), and CSS Grid's auto-track algorithm distributes the
   width that spanning label needs unevenly across the two auto columns, often
   inflating column 2 far past what the "+" glyph itself needs. display:block would
   otherwise stretch the suffix to fill that oversized track, stranding the glyph
   away from the number. justify-self:start pins it to the actual glyph width. */
.stat-suffix { grid-column: 2; grid-row: 1; align-self: end; justify-self: start; font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; color: var(--color-accent); display: block; padding-bottom: 0.15em; }
.stat-label { grid-column: 1 / -1; grid-row: 2; margin-top: 1rem; font-size: 0.85rem; letter-spacing: 0.04em; color: var(--text-secondary); text-transform: uppercase; }
/* Secondary proof bar below stats grid */
.stats-proof-bar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(0.8rem, 2vw, 1.6rem);
  margin-top: clamp(2rem, 3.5vw, 3rem);
  padding-top: clamp(1.4rem, 2.5vw, 2rem);
  border-top: 1px solid rgba(240,237,232,0.1);
}
.stats-proof-item {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.88rem; color: var(--text-secondary); white-space: nowrap;
}
.stats-proof-item strong { color: var(--text-primary); font-weight: 600; letter-spacing: -0.02em; }
.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); }
/* Elfsight Google Reviews widget ships near-black text (rgb(17,17,17)) with no
   background of its own, unreadable on this section's dark background. Override
   using Elfsight's stable es- prefixed classes (not the hashed styled-components
   classes, which change on every widget rebuild). */
.section-testimonials .es-review-author-name,
.section-testimonials .es-text-shortener { color: var(--text-primary) !important; }
.section-testimonials .es-load-more-button { color: var(--bg-primary) !important; background: var(--text-primary) !important; border: none !important; }
.section-testimonials .es-review-info-date,
.section-testimonials .es-verified-badge { color: var(--text-secondary) !important; }
.section-testimonials .es-review-container,
.section-testimonials .es-review-background-container { background: rgba(255,255,255,0.04) !important; }
/* The widget's header bar (rating summary above the review cards) renders on its own
   near-white background (rgb(248,248,248)) regardless of the dark section around it,
   so it needs dark text, not the light text used for the review cards below — the
   light-text override above was making "Reviews" / "153 reviews" unreadable here
   (axe-core color-contrast: 1.10:1 and 2.37:1). */
.section-testimonials .es-header-heading-text { color: var(--text-on-light) !important; }
.section-testimonials .es-header-rating-reviews-count { color: var(--text-body-light) !important; }
.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(3, 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; object-position: center top; }
.team-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(20,86,76,0.25)); pointer-events: none; }
.team-name { font-size: clamp(1.2rem, 1.8vw, 1.5rem); margin-bottom: 0.5rem; }
.team-cred { color: var(--color-accent-dim); display: block; margin-bottom: 0.9rem; }
.team-card .t-body { color: var(--text-body-light); font-size: 0.98rem; }

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

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

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

/* Ensure stats content stays above the glow layers */
.section-stats .section-shell { position: relative; z-index: 2; }

/* ---- KNOCKOUT PHOTO BREAK — background-clip:text word with photo panning inside it ----
   Replaces the old background-attachment:fixed parallax break (deprecated: broke whenever
   any ancestor gained transform/filter/perspective, poor iOS support). This has none of
   those failure modes. Swap the photo at assets/images/pt-knockout.webp. */
.knock-sec {
  background: linear-gradient(180deg, #0B0A10, #060509);
  overflow: hidden;
  position: relative;
}
.knock-sec::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 80% at 50% 0%, var(--color-accent-glow), transparent 70%);
}
.knock {
  position: relative; z-index: 1;
  display: block; text-align: center;
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 144, 'wght' 720, 'SOFT' 0;
  font-size: clamp(5rem, 21vw, 19rem);
  line-height: 0.92; letter-spacing: -0.02em;
  text-transform: uppercase;
  background-image: url('../assets/images/pt-knockout.webp');
  background-size: cover;
  background-position: 50% 0%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  will-change: background-position;
  user-select: none;
}
@media (prefers-reduced-motion: reduce) {
  .knock { background-position: 50% 40% !important; }
}
@media (max-width: 640px) {
  /* 26vw/7rem was still wide enough to overflow a 7-letter word like "REBUILD" past
     both edges of a 320-430px viewport (the container clips it via overflow:hidden
     on .knock-sec, and centered text overflowing gets chopped symmetrically on both
     sides). Capped lower so the full word stays inside the viewport down to 320px. */
  .knock { font-size: clamp(2.4rem, 15vw, 4.6rem); 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-col .footer-social a { width: 44px; height: 44px; padding: 0; border: 1px solid rgba(240,237,232,0.16); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: border-color var(--duration-fast), background var(--duration-fast); }
.footer-social svg { width: 18px; height: 18px; fill: var(--text-secondary); transition: fill var(--duration-fast); }
.footer-social a:hover { border-color: var(--color-accent); }
.footer-social a:hover svg { fill: var(--color-accent); }
.footer-col-title { color: var(--text-muted); display: block; margin-bottom: 1.4rem; }
.footer-col a, .footer-contact a, .footer-hours { display: block; color: var(--text-secondary); font-size: 0.95rem; padding: 0.35rem 0; transition: color var(--duration-fast); }
.footer-col a:hover, .footer-contact a:hover { color: var(--color-accent); }
.footer-contact { font-style: normal; }
.footer-hours { color: var(--text-muted); padding-top: 0.6rem; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.8rem; padding-bottom: 2.4rem; border-top: 1px solid rgba(240,237,232,0.07); font-size: 0.82rem; color: var(--text-muted); flex-wrap: wrap; }
.footer-powered { color: var(--text-muted); }
.footer-bottom-links a, .footer-powered a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; transition: color var(--duration-fast); }
.footer-bottom-links a:hover, .footer-powered a:hover { color: var(--color-accent); }

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

/* ================================================================= RESPONSIVE */
@media (max-width: 1024px) {
  .nav-links, .nav-phone, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .hero-split-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-copy { max-width: none; }
  /* Single-column hero: the "Scroll" cue sits directly under the booking form card
     with barely any room, reading as cramped/clipped. Not needed once the form is
     the last thing in the fold anyway, so just hide it below this breakpoint. */
  .hero-scroll-indicator { display: 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; }
  /* No tablet override needed: 3 stats now fit the base repeat(3,1fr) cleanly at
     every width down to the 640px breakpoint below, which stacks to 1 column.
     The old repeat(2,1fr) here was sized for 4 stats and would orphan the 3rd
     item alone on its own row now. */
  .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 */
  .stats-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .faq-answer { padding-left: 0; }
  /* Proof bars (hero + "By the Numbers"): flex-wrap puts each stat on its own row at
     this width, which strands a divider at the end of one row / start of the next
     with nothing beside it. Stack into a plain vertical list instead, where a
     divider glyph doesn't make sense, so hide the dividers rather than chase the
     wrap boundary. */
  .proof-bar, .stats-proof-bar { flex-direction: column; align-items: center; }
  .proof-divider, .stats-proof-divider { display: none; }
  .stats-proof-item { white-space: normal; text-align: center; justify-content: center; }
  /* "By the Numbers": center the heading, the stat grid, and the trust row under it.
     justify-items:center on the grid centers each .stat block as a rigid unit — do
     NOT touch .stat's own grid-template-columns (auto auto 1fr) to do this instead:
     collapsing it to two columns changes how the auto-track sizing algorithm
     distributes the spanning .stat-label's width need across the remaining tracks,
     which was inflating the "+" suffix's own column and stranding it away from the
     number. Left as three columns and just centered as a whole, the suffix sits
     exactly where it does on desktop. */
  .section-stats .section-head { text-align: center; }
  /* Centering .stat as a whole rigid grid block (justify-items:center on the
     parent) centered NUMBER+SUFFIX+SPACER-COLUMN combined — and because the
     spacer column's width came from CSS Grid's auto-track sizing reacting to
     each row's differently-long spanning label ("YEARS EXPERIENCE" vs
     "5-STAR REVIEWS" etc.), that combined width wasn't even consistent from
     row to row: numbers landed on a "wave", not a straight line.
     Fix: stop centering .stat as a grid block at all. Instead .stat-num-wrap
     (display:contents on desktop, so it's invisible to the grid above) becomes
     a real inline-block box here containing ONLY the number+suffix — nothing
     to do with the label — and centering THAT (text-align:center on .stat)
     depends only on the number's width plus the suffix's own width, and the
     suffix ("+") is the same glyph at the same font-size on every row, so the
     number's center lands on the same axis regardless of digit count. */
  .section-stats .stat { display: block; text-align: center; }
  .section-stats .stat-num-wrap { display: inline-block; }
  .section-stats .stat-number { display: inline-block; vertical-align: baseline; }
  .section-stats .stat-suffix { display: inline-block; vertical-align: baseline; position: static; padding-bottom: 0; }
  .section-stats .stat-label { display: block; text-align: center; margin-top: 1rem; }
  .section-stats .stats-proof-bar { justify-content: center; }
  /* t-label readable minimum on small phones */
  .t-label { font-size: 0.8rem; }
  /* Mobile iframe heights — !important overrides inline styles set per-page */
  .hero-form .ghl-form-wrap iframe { min-height: 340px !important; }
}

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

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

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

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

:root {
  /* === SECONDARY BRAND — 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 ---- */
main > section { overflow: hidden; }
main > section > * { position: relative; z-index: 1; }

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

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

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

/* ================= APPROACH — lifted charcoal + teal glow =========== */
/* overflow:visible override: the sticky Approach media needs its containing block to be the
   viewport, not this section — `main > section { overflow: hidden }` otherwise caps how long
   the image can stay pinned and it unsticks one step early. ::before below is inset:0, so it
   never bleeds past the section edge and doesn't need the clip. */
.section-approach { background: linear-gradient(180deg, #0D0E0E, #0A0A0A); overflow: visible; }
.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(58,171,205,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 — teal→blue gradient mesh =============== */
.section-cta-band {
  background:
    radial-gradient(72% 100% at 14% 0%, rgba(28,96,84,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(58,171,205,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, #0B1815, #07110F); }                                                     /* teal-tinted feature */
.section-testimonials { background: linear-gradient(180deg, #14161C, #0E1014); }                                                     /* lifted cool */

/* Light bands: bolder, and clearly different from each other */
.section-treat.section-light { background: linear-gradient(180deg, #F7F5F1, #EDE9E1); }
.section-team.section-light  { background: linear-gradient(180deg, #EFEBE3, #E6E1D7); }   /* a touch deeper warm */
.section-faq.section-light   { background: linear-gradient(180deg, #F7F5F1, #EFEBE3); }

.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(58,171,205,0.18); }

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

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

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

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

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

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

/* ---------- SERVICES — bento icon cards (dark) ---------- */
.bento-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  /* minmax(...,auto), not a bare fixed height — a bare clamp() locks every row to that
     exact height, and combined with .bento-card's overflow:hidden, any card whose
     description runs long gets its text clipped at the bottom edge. minmax keeps the
     same visual height for short cards but lets a row grow for longer copy. */
  grid-auto-rows: minmax(clamp(158px, 13.5vw, 208px), auto); gap: 16px;
}
/* Flagship card: content flows from the top (no stranded arrow gap) */
.bento-feature {
  grid-column: span 2; grid-row: span 2;
  justify-content: flex-start;
  gap: clamp(1rem, 2vw, 1.7rem);
}
/* Flagship card differentiator list — fills the 2×2 card so it reads intentional */
.bento-feature-list { list-style: none; margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.bento-feature-list li { display: flex; align-items: center; gap: 0.7rem; font-size: clamp(0.9rem, 1vw, 1rem); color: var(--text-secondary); line-height: 1.3; }
.bento-feature-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); flex: none; box-shadow: 0 0 8px var(--color-accent-glow); }
.bento-card {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(1.5rem, 2.2vw, 2.2rem); border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
  border: 1px solid rgba(240,237,232,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 16px 40px rgba(0,0,0,0.35);
  transition: transform .4s var(--ease-smooth), border-color .4s, box-shadow .4s;
}
.bento-card::before {           /* teal bloom on hover (behind content) */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(70% 90% at 82% 0%, var(--color-accent-glow), transparent 70%);
  transition: opacity .4s var(--ease-smooth);
}
.bento-card > * { position: relative; z-index: 1; }
.bento-card:hover {
  transform: translateY(-5px); border-color: rgba(58,171,205,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(58,171,205,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,184,160,0.55); background: rgba(255,255,255,0.82);
  box-shadow: 0 20px 44px rgba(20,86,76,0.16);
}
.treat-card-icon { flex: none; }
.treat-card-icon svg { width: 30px; height: 30px; fill: none; stroke: var(--color-accent-dim); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.treat-card-name { font-family: var(--font-display); font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 500; color: var(--text-on-light); flex: 1; }
.treat-card-arrow { color: var(--color-accent-dim); font-size: 1.15rem; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s var(--ease-smooth); }
.treat-card:hover .treat-card-arrow { opacity: 1; transform: translateX(0); }

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

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

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

/* Condition labels list */
.body-map-labels {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.body-map-label {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0;
  padding: clamp(0.45rem, 0.9vw, 0.7rem) 0;
  border-bottom: 1px solid rgba(20,16,12,0.08);
  cursor: pointer;
}
.body-map-label:first-child { border-top: 1px solid rgba(20,16,12,0.08); }
.body-map-label-line {
  flex: 1;
  height: 1px;
  background: rgba(20,16,12,0.1);
  transition: background 0.22s;
}
.body-map-label a {
  font-family: var(--font-body);
  font-size: clamp(0.8rem, 1vw, 0.92rem);
  font-weight: 500;
  color: rgba(20,16,12,0.55);
  text-decoration: none;
  padding: 0 0.6rem;
  text-align: center;
  white-space: nowrap;
  transition: color 0.22s, font-weight 0.1s;
  display: block;
}
.body-map-label.is-active a,
.body-map-label:hover a {
  color: var(--color-accent-dim);
  font-weight: 600;
}
.body-map-label.is-active .body-map-label-line,
.body-map-label:hover .body-map-label-line {
  background: rgba(0,196,173,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,196,173,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(58,171,205,0.12); border: 1px solid rgba(58,171,205,0.25);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-accent); font-size: 0.72rem; font-weight: 700;
}
.booking-phone-link {
  display: flex; align-items: center; gap: 0.8rem;
  font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 600; color: var(--text-primary); line-height: 1;
  text-decoration: none; margin-bottom: 2.2rem;
  transition: color var(--duration-fast);
}
.booking-phone-link:hover { color: var(--color-accent); }
.booking-phone-link svg { width: 20px; height: 20px; fill: none; stroke: var(--color-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.booking-proof-row {
  display: flex; gap: clamp(1.8rem, 3vw, 2.8rem);
  padding-top: 1.8rem;
  border-top: 1px solid rgba(240,237,232,0.08);
}
.booking-proof-stat { display: flex; flex-direction: column; }
.booking-proof-num {
  font-family: var(--font-display); font-size: clamp(1.8rem, 2.8vw, 2.6rem);
  font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: var(--color-accent);
}
.booking-proof-suffix { font-family: var(--font-display); font-size: 1.3rem; color: var(--color-accent); font-weight: 600; }
.booking-proof-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.3rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* ================================================================= CANVAS-MODE LOCATION (Map + Info) */
.canvas-location {
  display: none;
  background: linear-gradient(180deg, #F6F4F0, #ECE8E0);
  position: relative; overflow: hidden;
  padding: var(--section-pad-v) 0;
}
.canvas-location::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(50% 62% at 5% 5%, rgba(22,50,104,0.18), transparent 66%),
    radial-gradient(44% 54% at 97% 97%, rgba(13,68,59,0.14), transparent 66%);
}
.canvas-location > .section-shell { position: relative; z-index: 1; }
body.hero-mode-canvas .canvas-location { 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,196,173,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 {
  border-color: rgba(58,171,205,0.55);
  background: rgba(255,255,255,0.09);
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.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(58,171,205,0.12); border: 1px solid rgba(58,171,205,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 STICKY CALL/BOOK BAR
   Injected into every page by initStickyBar() (app.js + page.js) so no per-page HTML
   edit is needed. Fixed to the bottom, mobile only. .footer-bottom gets matching extra
   padding below so the bar never sits over the last real line of footer content. */
.mobile-sticky-bar { display: none; }
@media (max-width: 920px) {
  .mobile-sticky-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    height: 60px; background: var(--bg-primary);
    border-top: 1px solid rgba(240,237,232,0.12);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.35);
  }
  .mobile-sticky-bar .msb-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.02em;
    text-decoration: none;
  }
  .mobile-sticky-bar .msb-call { color: var(--text-primary); background: rgba(255,255,255,0.04); }
  .mobile-sticky-bar .msb-book { color: #0A0A0A; background: var(--color-accent); }
  .mobile-sticky-bar .msb-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .footer-bottom { padding-bottom: calc(2.4rem + 60px); }
}

/* ================================================================= MOBILE NAV — SERVICES / WHAT WE TREAT ACCORDION
   Built by initMobileNavAccordion() (app.js + page.js): the two flat links are
   replaced with a toggle button + a cloned copy of the matching desktop dropdown's
   sub-page list, so the sub-links never need hand-duplicating per page. Everything
   else in the mobile nav stays a plain link. */
.mobile-nav-item {
  opacity: 0; transform: translateY(20px);
  transition: opacity .5s var(--ease-smooth), transform .5s var(--ease-smooth);
  transition-delay: calc(var(--i) * 0.06s + 0.1s);
}
body.menu-open .mobile-nav-item { opacity: 1; transform: translateY(0); }
.mobile-nav-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: none; padding: 0; cursor: pointer; color: inherit; text-align: left;
  font-family: var(--font-display); font-size: clamp(2.4rem, 9vw, 3.4rem); font-weight: 600; letter-spacing: -0.02em;
  transition: color var(--duration-fast);
}
.mobile-nav-toggle:hover { color: var(--color-accent); }
.mobile-nav-chevron { width: 24px; height: 24px; flex: none; position: relative; }
.mobile-nav-chevron::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 11px; height: 11px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translate(-50%, -65%) rotate(45deg); transition: transform .3s var(--ease-smooth);
}
.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-chevron::before { transform: translate(-50%, -35%) rotate(225deg); }
.mobile-nav-panel { padding: 0.6rem 0 0.2rem; }
.mobile-nav-panel a {
  display: block; font-family: var(--font-body); font-size: 1.05rem; font-weight: 500;
  padding: 0.6rem 0; color: var(--text-secondary); opacity: 1; transform: none;
  transition: color var(--duration-fast);
}
.mobile-nav-panel a:hover { color: var(--color-accent); }
.mobile-nav-panel .nav-menu-all {
  color: var(--color-accent); font-weight: 600;
  border-top: 1px solid rgba(240,237,232,0.12); margin-top: 0.3rem; padding-top: 0.9rem;
}
.mobile-nav-tel { align-self: flex-start; margin-top: -1.6rem; color: var(--text-secondary); font-size: 0.95rem; }
.mobile-nav-tel:hover { color: var(--color-accent); }