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

/* === SELF-HOSTED FONTS (post-launch perf pass) ===
   Served from /assets/fonts instead of Google Fonts: removes a render-blocking third-party
   stylesheet and two extra connections. Both are variable fonts (Fraunces keeps its full
   opsz/wght/SOFT/WONK axes for the kinetic headings). Only latin + latin-ext subsets.
   Fraunces uses font-display: optional. It is preloaded, so it is normally ready for first
   paint; if not, headings stay in the metric-matched fallback for that view instead of
   swapping (the swap re-wrapped 16ch-wide hero headings and shifted the page). Hanken keeps
   swap: its Arial fallback matches within 1%, so the swap moves nothing. */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: optional;
  src: url('../assets/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: optional;
  src: url('../assets/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../assets/fonts/hanken-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../assets/fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Metric-matched fallbacks: while the web fonts load, text is drawn in Georgia / Arial scaled
   to the same width and line box, so the swap no longer reflows the page (the CLS source the
   audit traced to the Fraunces swap). Values measured with fontTools: Fraunces wght 600 @ opsz 72
   vs Georgia Bold for headings, wght 500 @ opsz 30 vs Georgia for lighter display text. */
@font-face { font-family: 'Fraunces Fallback'; src: local('Georgia Bold'), local('Georgia-Bold'); font-weight: 600 900;
  size-adjust: 85.3%; ascent-override: 114.6%; descent-override: 29.9%; line-gap-override: 0%; }
@font-face { font-family: 'Fraunces Fallback'; src: local('Georgia'); font-weight: 100 599;
  size-adjust: 104.8%; ascent-override: 93.3%; descent-override: 24.3%; line-gap-override: 0%; }
@font-face { font-family: 'Hanken Grotesk Fallback'; src: local('Arial'), local('ArialMT');
  size-adjust: 100.7%; ascent-override: 99.4%; descent-override: 30.1%; line-gap-override: 0%; }

:root {
  /* === BRAND — SWAP THESE PER CLIENT === */
  --color-accent:        #D8AC3F;                 /* primary brand color (Greiner gold) */
  --color-accent-dim:    #A8801F;                 /* darker accent — hover states + non-text (icon strokes, borders); do NOT use for small text on a light background, see --color-accent-dim-text */
  --color-accent-dim-text: #7C5F17;               /* A11Y FIX: --color-accent-dim as text on a light section only reached 2.8-3.3:1 (needs 4.5:1) — see docs/accessibility-report.md §4. Same hue, darkened. Flagged for client approval. */
  --color-accent-deep:   #273F63;                 /* Greiner navy, full CTA-band background */
  --color-accent-glow:   rgba(216,172,63,0.14);   /* ambient accent glow */
  --color-warn:          #E0795F;                 /* "old way" negative marker (warm, not alarming) */

  /* === BASE PALETTE === */
  --bg-primary:          #090C13;
  --bg-secondary:        #101420;
  --bg-tertiary:         #191E29;
  --bg-light:            #F4F2EE;

  /* === TEXT === */
  --text-primary:        #F0EDE8;
  --text-secondary:      #A8A29E;
  --text-muted:          #918D89;                 /* A11Y FIX: was #6B6560, 2.9-3.5:1 on dark backgrounds (needs 4.5:1) — see docs/accessibility-report.md §4 */
  --text-on-light:       #191E29;
  --text-body-light:     #4A4540;

  /* === TYPOGRAPHY === */
  --font-display:        'Fraunces', 'Fraunces Fallback', serif;
  --font-body:           'Hanken Grotesk', 'Hanken Grotesk Fallback', 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;
}

/* Anchor-jump targets (nav CTA -> #booking, #services): without this, a tap on
   "Schedule Appointment" lands the section flush at the viewport top, underneath the
   fixed floating header pill. Covers the floating pill's largest footprint (desktop
   logo-tall: 20px top + 80px height = 100px) with a small buffer; scrollIntoView()
   respects scroll-margin-top natively, so this also fixes the JS fallback path used
   when Lenis hasn't loaded (e.g. a slow mobile connection). */
#booking, #services { scroll-margin-top: 110px; }

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

/* ----------------------------------------------------------------- ACCESSIBILITY: SKIP LINK */
.skip-link {
  position: absolute; top: 0; left: 0; z-index: 10001;
  transform: translateY(-120%);
  background: var(--bg-primary); color: var(--text-primary);
  padding: 1rem 1.4rem; font-family: var(--font-body); font-size: 0.9rem; font-weight: 600;
  border: 1px solid var(--color-accent); border-radius: 0 0 8px 0;
  transition: transform 0.2s var(--ease-smooth);
}
.skip-link:focus { transform: translateY(0); }

/* ----------------------------------------------------------------- ACCESSIBILITY: VISUALLY HIDDEN
   For text that should reach assistive tech (e.g. "opens in a new tab") without any visual
   change — never used for content that also needs to be visible. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ----------------------------------------------------------------- ACCESSIBILITY: FOCUS VISIBLE
   Two-ring "halo" so a single rule reads on every background this system uses (near-black dark
   bands, cream light bands, white cards): the inner ring is near-black (visible on light/white),
   the outer ring is the brand gold (visible on dark). At least one ring always clears 3:1. */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 5px var(--color-accent);
}

/* ----------------------------------------------------------------- ACCESSIBILITY: REDUCED MOTION BACKSTOP
   Belt-and-suspenders: every animation function in app.js/page.js already checks
   prefers-reduced-motion before running, this just guarantees any CSS transition/animation
   not covered by that JS also collapses to instant. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

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

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

/* ----------------------------------------------------------------- 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: #090C13; 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-text); }

/* ----------------------------------------------------------------- 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,22,34,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,22,34,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,22,34,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,22,34,0.88); transition: color var(--duration-fast); padding: 0.3rem 0; white-space: nowrap; }
.nav-link:hover { color: rgba(20,22,34,1); }
.nav-link[aria-current="page"] { color: rgba(20,22,34,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 edge aligned with the parent item (menu link text lines up with the parent's text via
     the links' 1.3rem padding) rather than centred, which read as shifted left. */
  left: -1.3rem;
  transform: translateY(5px);
  min-width: 230px;
  padding: 0.7rem 0;
  background: rgba(12,13,20,0.98);
  border: 1px solid rgba(216,172,63,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; pointer-events: none;
  transition: opacity 0.2s var(--ease-smooth), transform 0.2s var(--ease-smooth);
}
/* Deliberately no visibility:hidden here (unlike most hidden-by-default UI in this system):
   these links must stay in the keyboard Tab order so :focus-within below can reveal the menu
   the instant a keyboard user tabs into it. opacity+pointer-events already keep it inert to
   mouse/AT while closed. */
.nav-dropdown:hover .nav-menu,
.nav-dropdown:focus-within .nav-menu { opacity: 1; pointer-events: auto; transform: translateY(0); }
.nav-dropdown:hover .nav-caret,
.nav-dropdown:focus-within .nav-caret { transform: rotate(-135deg) translateY(-1px); }
/* Last dropdown right-aligns so it doesn't clip the viewport edge */
.nav-dropdown:last-of-type .nav-menu { left: auto; right: 0; transform: translateY(5px); }
.nav-dropdown:last-of-type:hover .nav-menu,
.nav-dropdown:last-of-type:focus-within .nav-menu { transform: translateY(0); }
.nav-menu a { display: block; padding: 0.55rem 1.3rem; font-size: 0.88rem; color: rgba(240,237,232,0.58); transition: color var(--duration-fast), background var(--duration-fast); }
.nav-menu a:hover { color: var(--color-accent); background: rgba(255,255,255,0.03); }
.nav-menu-all { color: var(--text-primary) !important; border-top: 1px solid rgba(240,237,232,0.08); margin-top: 0.35rem; padding-top: 0.8rem !important; }
.nav-actions { display: flex; align-items: center; gap: 0.85rem; flex: none; }
.nav-phone { font-size: 0.82rem; font-weight: 500; color: rgba(20,22,34,0.72); white-space: nowrap; transition: color var(--duration-fast); }
.nav-phone:hover { color: var(--color-accent-dim-text); }
/* 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, WCAG tap target) exceed the 28x20 icon box itself, so the
   bars are centered independently of the button's own box via left/top:50% + translate,
   rather than via the button's width/height (which the 44px minimum silently overrides). */
.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; top: 50%; left: 50%; width: 22px; height: 1.5px; background: rgba(20,22,34,0.8); border-radius: 2px; transition: transform .35s var(--ease-smooth), opacity .25s; }
.nav-toggle span:nth-child(1) { transform: translate(-50%, calc(-50% - 7px)); }
.nav-toggle span:nth-child(2) { transform: translate(-50%, -50%); }
.nav-toggle span:nth-child(3) { transform: translate(-50%, calc(-50% + 7px)); }
body.menu-open .nav-toggle span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .nav-toggle span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }
/* Mobile overlay nav */
.mobile-nav { position: fixed; inset: 0; z-index: 999; background: var(--bg-primary); display: flex; flex-direction: column; justify-content: center; gap: 3rem; padding: var(--header-h) var(--section-pad-h) 8vh; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity var(--duration-base) var(--ease-smooth), transform var(--duration-base) var(--ease-smooth), visibility var(--duration-base); }
body.menu-open .mobile-nav { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-nav-links { display: flex; flex-direction: column; gap: 0.4rem; }
.mobile-nav-links a { font-family: var(--font-display); font-size: clamp(2.4rem, 9vw, 3.4rem); font-weight: 600; letter-spacing: -0.02em; opacity: 0; transform: translateY(20px); transition: opacity .5s var(--ease-smooth), transform .5s var(--ease-smooth), color var(--duration-fast); transition-delay: calc(var(--i) * 0.06s + 0.1s); }
.mobile-nav-links a:hover { color: var(--color-accent); }
body.menu-open .mobile-nav-links a { opacity: 1; transform: translateY(0); }
.mobile-nav-phone { align-self: flex-start; }
/* Responsive — collapse links at 920px, show hamburger */
@media (max-width: 920px) {
  .site-header { top: 12px; width: calc(100% - 24px); height: 52px; }
  .nav-links { display: none; }
  .nav-phone { display: none; }
  a.nav-cta.btn-primary, .btn.btn-primary.nav-cta { display: none; }
  .nav-toggle { display: flex; }
  /* Tall single-column mobile footer can scroll into the same viewport band the
     fixed header pill occupies; let taps pass through for the whole time the
     footer is on screen, not just at the very bottom of the page. */
  .site-header.is-over-footer { pointer-events: none; }
}

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

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

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

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

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

/* ================================================================= HERO — MODE A (canvas scrub) */
.canvas-wrap { position: fixed; inset: 0; z-index: 0; display: none; clip-path: circle(0% at 50% 50%); }
.canvas-wrap canvas { width: 100%; height: 100%; }
/* Hero frame poster — fixed div BEHIND the canvas-wrap (same z-index, earlier in DOM)
   Shows the first Higgsfield frame immediately. Through the circle(0%) clip of canvas-wrap,
   this poster is visible. As the circle expands, the animated canvas takes over. */
#hero-frame-poster { display: none; }
body.hero-mode-canvas #hero-frame-poster {
  display: block;
  position: fixed; inset: 0; z-index: 0;
  background: #090C13 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; right: 0; z-index: 3; width: 100%; height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--section-pad-h) clamp(80px, 12vh, 140px); max-width: var(--max-width); margin: 0 auto; pointer-events: none; }
.hero-scrub-content > * { pointer-events: auto; }
/* Type scrim, canvas mode only. The hero frame's lit cyclorama panel drifts left across the
   scrub and passes behind the subhead, so a left-weighted gradient plus a soft halo on the
   copy keeps the type readable on every frame without flattening the image on the right. */
body.hero-mode-canvas .hero-canvas::before {
  content: ''; position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(9,12,19,0.58) 0%, rgba(9,12,19,0.40) 34%, rgba(9,12,19,0.10) 64%, rgba(9,12,19,0) 80%),
    linear-gradient(to top, rgba(9,12,19,0.55) 0%, rgba(9,12,19,0) 44%);
}
body.hero-mode-canvas .hero-scrub-content .section-label,
body.hero-mode-canvas .hero-scrub-content .hero-heading,
body.hero-mode-canvas .hero-scrub-content .hero-sub {
  text-shadow: 0 2px 22px rgba(9,12,19,0.75), 0 1px 4px rgba(9,12,19,0.55);
}
.hero-scrub-content .hero-heading { max-width: 14ch; margin: 0.6rem 0 1.8rem; }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ================================================================= SOCIAL PROOF BAR */
.section-proof { background: var(--bg-secondary); padding: 0 !important; overflow: hidden; }
.proof-bar { max-width: var(--max-width); margin: 0 auto; padding: clamp(28px, 4vw, 44px) var(--section-pad-h); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(1.2rem, 4vw, 3rem); }
.proof-stat { display: inline-flex; align-items: baseline; gap: 0.6rem; }
.proof-stat strong { font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 600; color: var(--text-primary); }
.proof-text { font-size: 0.92rem; color: var(--text-secondary); }
.proof-divider { width: 1px; height: 28px; background: rgba(240,237,232,0.12); }
.proof-stars { display: inline-flex; gap: 2px; align-self: center; }
.proof-stars .star, .testimonial-stars .star { width: 18px; height: 18px; fill: var(--color-accent); }
.proof-marquee { border-top: 1px solid rgba(240,237,232,0.07); padding: 0.9rem 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.proof-marquee-track { display: inline-flex; gap: 3rem; white-space: nowrap; animation: marqueeScroll 38s linear infinite; }
.proof-marquee-track span { font-size: 0.9rem; color: var(--text-muted); font-style: italic; font-family: var(--font-display); }
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ================================================================= OLD WAY vs NEW WAY */
.section-compare { background: var(--bg-primary); }
.compare-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.compare-divider { width: 1px; align-self: stretch; background: linear-gradient(to bottom, transparent, rgba(240,237,232,0.12), transparent); }
.compare-tag { display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.4rem 0.9rem; border-radius: 100px; border: 1px solid; }
.compare-tag-old { color: var(--text-primary); border-color: rgba(240,237,232,0.4); }
.compare-tag-new { color: var(--color-accent); border-color: rgba(216,172,63,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(216,172,63,0.3); background: rgba(216,172,63,0.03); transform: translateY(-2px); }
.compare-item strong { display: block; font-family: var(--font-body); font-size: 1.02rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.3rem; }
.compare-item p { font-size: 0.92rem; line-height: 1.55; color: var(--text-secondary); }
.compare-icon { flex: none; width: 22px; height: 22px; border-radius: 50%; position: relative; margin-top: 2px; }
.icon-x { border: 1.5px solid rgba(240,237,232,0.5); }
.icon-x::before, .icon-x::after { content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 1.5px; background: var(--text-primary); }
.icon-x::before { transform: translate(-50%,-50%) rotate(45deg); }
.icon-x::after { transform: translate(-50%,-50%) rotate(-45deg); }
.icon-check { border: 1.5px solid rgba(216,172,63,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; }

/* SC 2.2.2 Pause, Stop, Hide: the review wall auto-scrolls indefinitely. This control is
   added by initReviews() in app.js only once it confirms the wall is actually animating
   (JS running, GSAP present, prefers-reduced-motion off) — with no JS, or reduced motion,
   the wall is already static and this button never appears (hidden by default in HTML). */
.reviews-pause-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 1rem; padding: 0.5rem 0.2rem;
  font-family: var(--font-body); font-size: 0.82rem; font-weight: 500;
  color: var(--text-body-light); transition: color var(--duration-fast);
  min-height: 44px;
}
.reviews-pause-btn:hover { color: var(--color-accent-dim-text); }
.reviews-pause-icon { width: 15px; height: 15px; fill: currentColor; flex: none; }


/* --- 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: #191E29;
  line-height: 1.3;
}
.review-date {
  display: block;
  font-size: 0.72rem;
  color: #77716D; /* A11Y FIX: was #8C8580, 3.6:1 on the white card (needs 4.5:1) */
  margin-top: 0.1rem;
}
.review-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 0.55rem;
}
.review-star { width: 11px; height: 11px; fill: #FBBC04; }
.review-star-empty { fill: #D9D5D0; }
.review-text {
  font-size: 0.84rem;
  line-height: 1.55;
  color: #2A2520;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 2 lines keeps cards compact for density */
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.4rem;
}
.review-read-more {
  display: block;
  font-size: 0.73rem;
  color: #77716D; /* A11Y FIX: was #8C8580, 3.6:1 on the white card (needs 4.5:1) */
  cursor: default;
}

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

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

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

/* ================================================================= APPROACH (with photo) */
/* ---- SCROLLYTELLING APPROACH — pinned photo pane + scrolling steps ---- */
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; margin-top: clamp(2.4rem, 4vw, 4rem); }
.story-media {
  position: sticky; top: 100px;
  height: min(72svh, 640px);
  border-radius: 26px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,0.18);
}
.story-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.08);
  transition: opacity 0.8s var(--ease-smooth), transform 1.2s var(--ease-smooth);
}
.story-media img.on { opacity: 1; transform: scale(1); }
.story-media .badge {
  position: absolute; left: 1.4rem; bottom: 1.4rem; z-index: 2;
  padding: 0.55rem 1.1rem; border-radius: 100px;
  background: rgba(10,10,10,0.55); backdrop-filter: blur(8px);
  color: #fff; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
}
.story-steps { display: flex; flex-direction: column; padding-bottom: min(72svh, 640px); }
.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); }
  /* Desktop's trailing padding-bottom (up to 640px) holds the sticky photo in place a beat
     before the section ends. On mobile that reads as a long stretch of empty scrolling with
     nothing new happening after step 3, so it's cut way down here. */
  .story-steps { padding-bottom: 8svh; }
}

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

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

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

/* ================================================================= TEAM (with photos) */
.team-grid { display: 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; }
.team-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(39,63,99,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 blocks render dark by default and light when the content spec sets light:true (see
   tools/content/staff.mjs) — only the light variant needs the text-safe darker token. */
.section-light .team-cred { color: var(--color-accent-dim-text); }
.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-text); }
.faq-num { color: var(--color-accent-dim-text); 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: navy gradient stays on top, photo adds depth beneath */
.section-cta-band .section-bg-photo { opacity: 0.18; mix-blend-mode: normal; }

/* Stats section: subtle photo texture */
.section-stats::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: url('../assets/images/pt-stats-bg.webp') center/cover no-repeat;
  opacity: 0.07;
  pointer-events: none;
  mix-blend-mode: luminosity;
}
/* Ensure stats content stays above the texture */
.section-stats .section-shell { position: relative; z-index: 2; }

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

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

/* ================================================================= FOOTER */
.site-footer { background: var(--bg-primary); border-top: 1px solid rgba(240,237,232,0.08); padding-top: clamp(64px, 8vw, 110px); }
.footer-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: clamp(2rem, 4vw, 3.5rem); padding-bottom: clamp(48px, 6vw, 80px); }
.footer-brand .nav-logo { margin-bottom: 1.4rem; }
.footer-tagline { color: var(--text-secondary); max-width: 36ch; font-size: 0.95rem; }
.footer-social { display: flex; gap: 0.8rem; margin-top: 1.8rem; }
/* Specificity bumped to .footer-brand .footer-social a: .footer-col a (below) sets
   display:block and padding on every footer link, which otherwise wins the cascade at
   equal specificity by coming later in the file and collapses these back to a
   left-aligned block, breaking the icon centering. */
.footer-brand .footer-social a { width: 38px; height: 38px; 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), stroke var(--duration-fast); }
/* Instagram/LinkedIn/YouTube marks are drawn from open shape primitives (rect/circle/path),
   not a solid glyph like the Facebook and Google marks: they need stroke, not fill, or they
   render as blank filled blobs. */
.footer-social svg.icon-outline { fill: none; stroke: var(--text-secondary); stroke-width: 1.6px; stroke-linecap: round; stroke-linejoin: round; }
.footer-social svg.icon-outline .icon-dot { fill: var(--text-secondary); stroke: none; }
.footer-social a:hover { border-color: var(--color-accent); }
.footer-social a:hover svg { fill: var(--color-accent); }
.footer-social a:hover svg.icon-outline { fill: none; stroke: var(--color-accent); }
.footer-social a:hover svg.icon-outline .icon-dot { 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); }
/* 5 footer-col children but only 4 explicit grid tracks: this last column (Two Locations)
   drops to its own row, so span it full-width rather than leaving it pinned under the
   first column with the rest of the row empty. */
.footer-col:last-child { grid-column: 1 / -1; }
/* Speonk/Quogue side by side instead of stacked, now that this column has the full row's
   width to use. Grid-area (not source order) pairs each address with its own hours below it,
   with phone/email spanning underneath since they apply to both locations. */
.footer-contact {
  font-style: normal;
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  column-gap: clamp(2rem, 4vw, 3.5rem);
}
.footer-contact a:nth-child(1) { grid-area: 1 / 1; }
.footer-contact a:nth-child(2) { grid-area: 1 / 2; }
.footer-contact a:nth-child(3) { grid-area: 3 / 1 / 3 / 3; }
.footer-contact a:nth-child(4) { grid-area: 4 / 1 / 4 / 3; }
.footer-hours:nth-of-type(1) { grid-area: 2 / 1; }
.footer-hours:nth-of-type(2) { grid-area: 2 / 2; }
.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); transition: color var(--duration-fast); }
.footer-powered:hover { color: var(--color-accent); }

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

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

@media (max-width: 640px) {
  /* Hero proof bar: three stats no longer fit one row, so they wrap. The 1px vertical
     dividers were built for a single row too, so once wrapped they land orphaned on
     whichever row they happened to flow onto instead of between the stats they separate.
     Stack the stats and turn the dividers into the horizontal rules between them. */
  .proof-bar { flex-direction: column; gap: 1.1rem; }
  .proof-divider { width: 100%; max-width: 160px; height: 1px; }
  .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; }
  /* Two-across locations don't fit a phone-width column: back to stacked. */
  .footer-contact { display: block; }
  .hero-scrub-spacer { height: 180vh; }
  /* On a phone the hero copy runs the full width, so the left-weighted scrim above becomes a
     near-even veil. Kept light: the footage is already a dark navy ground, and the gold trails
     are the whole point, so this only needs to hold the copy off them, not dim the frame. */
  body.hero-mode-canvas .hero-canvas::before {
    background:
      linear-gradient(100deg, rgba(9,12,19,0.44) 0%, rgba(9,12,19,0.38) 58%, rgba(9,12,19,0.26) 88%, rgba(9,12,19,0.18) 100%),
      linear-gradient(to top, rgba(9,12,19,0.5) 0%, rgba(9,12,19,0) 44%);
  }
  /* Stats grid: 1-column on small phones */
  .stats-grid { grid-template-columns: 1fr; }
  /* Proof bar items ("Serving the Hamptons...", "No referral needed...") are long enough
     that white-space:nowrap runs them past the edge of a phone screen. Stack them and let
     each one wrap instead of clipping; the vertical dividers become horizontal rules. */
  .stats-proof-bar { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
  .stats-proof-item { white-space: normal; }
  .stats-proof-divider { width: 100%; height: 1px; }
  .team-grid { grid-template-columns: 1fr; }
  .faq-answer { padding-left: 0; }
  /* t-label readable minimum on small phones */
  .t-label { font-size: 0.8rem; }
  /* Mobile iframe heights — !important overrides inline styles set per-page */
  .hero-form .ghl-form-wrap iframe { min-height: 340px !important; }
}

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

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

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .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    gold   — primary  (CTAs, highlights)
     --color-accent-2  blue   — secondary (ambient light, depth)   ← Greiner supporting blue
     --color-warn      coral  — "old way" markers / warm accents
   ================================================================= */

:root {
  /* === SECONDARY BRAND — Greiner supporting blue #1B75BB (their alt button style) === */
  --color-accent-2:      #1B75BB;
  --color-accent-2-dim:  #145C91;
  --color-accent-2-glow: rgba(27,117,187,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; }
/* .section-approach pins .story-media with position:sticky; overflow:hidden above breaks
   sticky's containing block, so it unsticks a full step early. Clip only the horizontal
   axis here and let vertical overflow stay visible so the sticky pane can track scroll
   through the full height of .story-steps. */
main > section.section-approach { overflow-x: clip; overflow-y: visible; }

/* ================= HERO — ambient gold/navy 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, #12161F, #0E1219); 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, #0A0D14, #080A10); }
.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(216,172,63,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 + gold glow =========== */
.section-approach { background: linear-gradient(180deg, #0C0F17, #090C13); }
.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, #101420, #0C0F17); }
.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, #090C13, #0B0E16); }

/* ================= 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,28,44,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: #080A10; }
.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, #090C13, #0C0F17); }
.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(216,172,63,0.05);
}
/* Elfsight Google Reviews widget defaults to near-black text, unreadable on this section's
   dark background. Target the widget's stable "es-" prefixed classes (not its hashed
   styled-components classes, which change on every Elfsight release). */
.section-testimonials .es-review-background-container { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(240,237,232,0.08); border-radius: 12px; }
.section-testimonials .es-header-heading-text,
.section-testimonials .es-rating-value,
.section-testimonials .es-verified-badge,
.section-testimonials .es-review-author-name-container,
.section-testimonials .es-review-author-name,
.section-testimonials .es-review-content,
.section-testimonials .es-review-content-text-container,
.section-testimonials .es-text-shortener-container,
.section-testimonials .es-review-content-line-shortener,
.section-testimonials .es-text-shortener,
.section-testimonials .es-load-more-button { color: var(--text-primary) !important; }
.section-testimonials .es-header-rating-reviews-count,
.section-testimonials .es-review-info-container,
.section-testimonials .es-review-info-info-block,
.section-testimonials .es-review-info-date-container,
.section-testimonials .es-review-info-date,
.section-testimonials .es-text-shortener-control,
.section-testimonials .es-text-shortener-control-open { color: var(--text-secondary) !important; }
.section-testimonials .es-load-more-button { background: rgba(255,255,255,0.06) !important; border-color: rgba(240,237,232,0.16) !important; }
.section-testimonials .es-header-write-review-button { color: var(--color-accent) !important; }

/* ================= TEAM (light) — photo duotone + lift ============== */
.team-photo { box-shadow: 0 24px 50px rgba(20,28,44,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 — navy gradient mesh ==================== */
.section-cta-band {
  background:
    radial-gradient(72% 100% at 14% 0%, rgba(46,74,116,0.95), transparent 60%),
    radial-gradient(82% 120% at 92% 100%, rgba(33,54,88,0.85), transparent 55%),
    var(--color-accent-deep);
}

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

/* =================================================================
   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(216,172,63,0.24);
  --color-accent-2-glow: rgba(27,117,187,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,28,44,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, #191E2A, #141824); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }   /* lifted bar */
.section-compare      { background: linear-gradient(180deg, #090C13, #06080E); }                                                     /* deep */
.section-approach     { background: linear-gradient(180deg, #141824, #0F131C); }                                                     /* lifted charcoal */
.section-framework    { background: linear-gradient(180deg, #0B0F18, #080B12); }                                                     /* cool blue-dark */
.section-services     { background: linear-gradient(180deg, #07090F, #05070C); }                                                     /* darkest */
.section-stats        { background: linear-gradient(180deg, #0B1018, #070C14); }                                                     /* navy-tinted feature */
.section-testimonials { background: linear-gradient(180deg, #14161C, #0D1119); }                                                     /* 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, #06080E, #04060A); }

/* ---- 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(216,172,63,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: #141B2B; }

/* =================================================================
   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 {           /* gold bloom bottom-right + cool shade top-left */
  background:
    radial-gradient(62% 78% at 90% 100%, rgba(122,92,20,0.40), transparent 72%),
    radial-gradient(46% 56% at 4% 2%, rgba(26,22,12,0.18), transparent 72%);
}
.section-team::before {            /* navy bloom top-left + gold shade bottom-right */
  background:
    radial-gradient(60% 76% at 8% 0%, rgba(39,63,99,0.38), transparent 72%),
    radial-gradient(50% 60% at 97% 97%, rgba(110,82,18,0.20), transparent 72%);
}
.section-faq::before {             /* gold bloom top-right + navy shade bottom-left */
  background:
    radial-gradient(56% 72% at 94% 4%, rgba(122,92,20,0.37), transparent 72%),
    radial-gradient(52% 64% at 2% 100%, rgba(39,63,99,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(122,92,20,0.30), transparent 73%); }
.section-approach.section-light .section-head .t-body { color: var(--text-body-light); }

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

/* ---------- SERVICES — bento icon cards (dark) ---------- */
.bento-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(195px, 15vw, 235px); 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: 0.9rem; display: flex; flex-direction: column; gap: 0.6rem; }
.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.3rem, 1.9vw, 1.9rem); 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 {           /* gold 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(216,172,63,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.1rem; }
.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.35rem; }
.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(216,172,63,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-text); flex: none; }
.treat-group-title::after { content: ""; flex: 1; height: 1px; background: rgba(20,28,44,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,28,44,0.12);
  box-shadow: 0 10px 26px rgba(20,28,44,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(168,128,31,0.55); background: rgba(255,255,255,0.82);
  box-shadow: 0 20px 44px rgba(39,63,99,0.16);
}
.treat-card-icon { flex: none; }
.treat-card-icon svg { width: 30px; height: 30px; fill: none; stroke: var(--color-accent-dim-text); 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-text); 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 3; }
}
@media (max-width: 640px) {
  /* Single column: the fixed clamp(195px, 15vw, 235px) row height (sized for a dense
     multi-column bento layout) is shorter than a stacked card actually needs, so
     .bento-card's overflow:hidden was clipping the bottom of each card, arrow included.
     Auto-size rows to content instead, and drop the feature card's row-span (a leftover
     from the multi-column layout) now that every card is its own full-width row. */
  .bento-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .bento-feature { grid-column: span 1; grid-row: 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,22,34,0.08);
  cursor: pointer;
}
.body-map-label:first-child { border-top: 1px solid rgba(20,22,34,0.08); }
.body-map-label-line {
  flex: 1;
  height: 1px;
  background: rgba(20,22,34,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,22,34,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(168,128,31,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,22,34,0.14);
    border-radius: 20px;
    padding: 0.3rem 0.7rem;
    border-top: 1px solid rgba(20,22,34,0.14) !important;
    border-bottom: 1px solid rgba(20,22,34,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(168,128,31,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(216,172,63,0.12); border: 1px solid rgba(216,172,63,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(39,63,99,0.18), transparent 66%),
    radial-gradient(44% 54% at 97% 97%, rgba(122,92,20,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: #141B2B; }
.canvas-location-head .section-label { color: var(--color-accent-dim-text); }
/* Two clinics side by side rather than stacked full-width, one above the other. */
.canvas-location-grid {
  display: grid; grid-template-columns: 1fr; gap: clamp(2.4rem, 4vw, 3.2rem);
}
@media (min-width: 900px) {
  .canvas-location-grid { grid-template-columns: 1fr 1fr; }
}
.canvas-location-body {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(1.2rem, 2vw, 1.6rem); align-items: start;
}
.location-map-embed {
  border-radius: 14px; overflow: hidden;
  height: clamp(320px, 42vh, 500px);
  border: 1px solid rgba(20,28,44,0.12);
  box-shadow: 0 8px 32px rgba(20,28,44,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,28,44,0.1);
  border-radius: 14px; padding: clamp(1.6rem, 2.5vw, 2.2rem);
  box-shadow: 0 4px 20px rgba(20,28,44,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,28,44,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(168,128,31,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-text); 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-text); }
.location-info-text span { color: var(--text-body-light); }

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

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

.form-row { margin-bottom: 1rem; }
.form-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-required-note { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 0.9rem; }

.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.52); /* A11Y FIX: was 0.45 alpha, ~4.0:1 on this form's dark backgrounds (needs 4.5:1) */
  margin-bottom: 0.45rem;
}
.form-input {
  width: 100%; display: block;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(240,237,232,0.13);
  border-radius: 8px;
  padding: 0.78rem 1rem;
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 300;
  color: var(--text-primary);
  transition: border-color var(--duration-fast), background var(--duration-fast);
  appearance: none; -webkit-appearance: none;
}
.form-input::placeholder { color: rgba(240,237,232,0.22); }
.form-input:focus {
  outline: none;
  border-color: rgba(216,172,63,0.55);
  background: rgba(255,255,255,0.09);
}
.form-input:focus-visible {
  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 5px var(--color-accent);
}
.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(216,172,63,0.12); border: 1px solid rgba(216,172,63,0.3);
  display: flex; align-items: center; justify-content: center;
}
.netlify-form-success-icon svg { width: 24px; height: 24px; stroke: var(--color-accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.netlify-form-success h3 { font-family: var(--font-display); font-size: 1.4rem; color: var(--text-primary); }
.netlify-form-success p { font-size: 0.92rem; color: var(--text-secondary); max-width: 32ch; line-height: 1.6; }

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

/* =================================================================
   CLIENT BLOCK — Greiner Physical Therapy
   The only CSS added for this client. Two additions, both required by
   decisions logged in BUILD-STATE.md. Nothing above this line was
   restructured; only colour literals were remapped.
   ================================================================= */

/* 1. HERO MODE B KEN-BURNS.
   The template's Mode B hero expects assets/video/hero.mp4. The Higgsfield video is
   generated by prompt 3, not this build, and shipping the template's own demo footage of a
   different clinic would be dishonest. Until then the real clinic still pans slowly, which
   reads as intentional rather than as a static placeholder. Honours reduced motion. */
.hero-kenburns {
  animation: heroKenBurns 32s ease-in-out infinite alternate;
  transform-origin: 58% 42%;
  will-change: transform;
}
@keyframes heroKenBurns {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.2%, -1.6%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-kenburns { animation: none; transform: scale(1.02); }
}

/* 2. HERO H1 WORD DELAYS 4 AND 5.
   The template stops at :nth-child(3) because its stock H1 is three words. This client's H1
   is five ("Move Like You Used To."), with the last three ("You Used To.") grouped into a
   single .hero-word-lock unit so the line never breaks down to a lone trailing "To." (see
   .hero-word-lock in the hero section above). Continues the template's own .12s cadence. */
.hero-ready .hero-heading .hero-word-lock .word:nth-child(1) { transition-delay: .50s; }
.hero-ready .hero-heading .hero-word-lock .word:nth-child(2) { transition-delay: .62s; }
.hero-ready .hero-heading .hero-word-lock .word:nth-child(3) { transition-delay: .74s; }

/* 3. NAV LOGO SIZING.
   The client's mark is an oval badge, not a horizontal wordmark, so the template's stock
   .logo-tall cap of 46px left it reading small inside the pill. The asset is now trimmed to
   its bounding box (5:3) and the pill grows to carry it. Checked at 1440px, at the 920px
   pre-hamburger width, and at 390px. */
.site-header.logo-tall { min-height: 80px; padding: 11px 0; }
.site-header.logo-tall .nav-logo-img { max-height: 56px; }
.site-header.logo-tall.is-solid .nav-logo-img { max-height: 50px; }
@media (max-width: 920px) {
  .site-header.logo-tall { min-height: 68px; padding: 9px 0; }
  .site-header.logo-tall .nav-logo-img { max-height: 46px; }
}
@media (max-width: 420px) {
  .site-header.logo-tall .nav-logo-img { max-height: 42px; }
}

/* 4. MOBILE OVERLAY NAV FOR A SEVEN ITEM MENU.
   The template's overlay centres four links. This client's nav carries seven plus a CTA, which
   at 360x640 pushed the first link up underneath the header pill. Top-aligned, scrollable, and
   a size step down. Measured at 393x852 and 360x640. */
@media (max-width: 920px) {
  .mobile-nav {
    justify-content: flex-start;
    padding-top: calc(var(--header-h) + 22px);
    gap: 2rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-nav-links a { font-size: clamp(1.9rem, 7.4vw, 2.7rem); line-height: 1.18; }
}
@media (max-width: 920px) and (max-height: 720px) {
  .mobile-nav { padding-top: calc(var(--header-h) + 10px); gap: 1.4rem; }
  .mobile-nav-links a { font-size: clamp(1.55rem, 6vw, 2rem); }
}
/* Secondary row under the overlay CTA: both clinics + the returning-patient portal, which the
   single-level mobile menu otherwise has no way to reach. 44px tap targets. */
.mobile-nav-sub { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin-top: -0.5rem; }
.mobile-nav-sub a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.95rem; letter-spacing: 0.02em; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(216, 172, 63, 0.5); opacity: 0; transition: opacity .5s var(--ease-smooth) .5s, color var(--duration-fast); }
.mobile-nav-sub a:hover { color: var(--color-accent); }
body.menu-open .mobile-nav-sub a { opacity: 1; }

/* 4b. MOBILE LEGIBILITY + TAP TARGETS (post-launch audit).
   Form labels and the comparison tags rendered at ~11px on phones; footer phone/email/credit
   links were 19-21px tall. Lift labels to >=12px and give footer links a 44px touch height. */
@media (max-width: 920px) {
  .form-label { font-size: 0.78rem; }
  .compare-tag { font-size: 0.76rem; }
  .footer-col a, .footer-contact a { padding: 0.7rem 0; }
  .footer-powered { display: inline-block; padding: 0.8rem 0; }
}

/* 5. FOOTER SOCIAL TAP TARGETS.
   Five icons at the template's 38px fall under the 44px WCAG minimum on touch. */
.footer-brand .footer-social a { width: 44px; height: 44px; }