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

:root {
  /* === BRAND — SWAP THESE PER CLIENT === */
  --color-accent:        #EC9671;                 /* primary brand color, sampled from the real logo file (coral) */
  --color-accent-dim:    #C27B5D;                 /* darker accent for hover states */
  --color-accent-deep:   #342119;                 /* deep coral-brown — used for full CTA-band backgrounds */
  --color-accent-glow:   rgba(236,150,113,0.16);  /* ambient accent glow */
  --color-warn:          #E0795F;                 /* "old way" negative marker (warm, not alarming) */

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

  /* === TEXT === */
  --text-primary:        #F0EDE8;
  --text-secondary:      #A8A29E;
  --text-muted:          #8C8680;                 /* was #6B6560 (3.0–3.5:1 on the dark bands); #8C8680 is >= 4.5:1 on all of them */
  --text-on-light:       #1A1A1A;
  --text-body-light:     #4A4540;

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

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

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

  --header-h:            76px;
}

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

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

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

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

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

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

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

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

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

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

/* ---- Logo image support (replaces text logo when client has a graphic mark) ----
   Horizontal logo:  max-height 32px — fits the 56px pill with breathing room
   Stacked logo:     add class "logo-tall" to <header> — pill grows to 68px,
                     logo allowed up to 48px. Deployment guide: if logo is
                     square/portrait/stacked, add class="site-header logo-tall"  */
.nav-logo-img {
  display: block;
  max-height: 42px;
  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(0.6rem, 1.3vw, 1.6rem); flex: 1; justify-content: center; min-width: 0; }
.nav-link { position: relative; font-size: clamp(0.78rem, 0.62vw + 0.42rem, 1rem); font-weight: 500; color: rgba(20,16,12,0.88); transition: color var(--duration-fast); padding: 0.3rem 0; white-space: nowrap; }
.nav-link:hover { color: rgba(20,16,12,1); }
.nav-link[aria-current="page"] { color: rgba(20,16,12,1) !important; }
.nav-link-parent { display: inline-flex; align-items: center; gap: 0.3rem; }
.nav-caret { width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-1px); transition: transform var(--duration-fast); }
.nav-dropdown { position: relative; }
/* Invisible bridge fills the gap between pill and dropdown so hover never breaks */
.nav-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -20px;
  right: -20px;
  height: 18px;
}
.nav-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  min-width: 230px;
  padding: 0.7rem 0;
  background: rgba(12,13,20,0.98);
  border: 1px solid rgba(0,229,200,0.18);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.4);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s var(--ease-smooth), transform 0.2s var(--ease-smooth), visibility 0.2s;
}
.nav-dropdown:hover .nav-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav-dropdown:hover .nav-caret { transform: rotate(-135deg) translateY(-1px); }
/* Last dropdown right-aligns so it doesn't clip the viewport edge */
.nav-dropdown:last-of-type .nav-menu { left: auto; right: 0; transform: translateY(5px); }
.nav-dropdown:last-of-type:hover .nav-menu { transform: translateY(0); }
.nav-menu a { display: block; padding: 0.55rem 1.3rem; font-size: 0.88rem; color: rgba(240,237,232,0.58); transition: color var(--duration-fast), background var(--duration-fast); }
.nav-menu a:hover { color: var(--color-accent); background: rgba(255,255,255,0.03); }
.nav-menu-all { color: var(--text-primary) !important; border-top: 1px solid rgba(240,237,232,0.08); margin-top: 0.35rem; padding-top: 0.8rem !important; }
.nav-actions { display: flex; align-items: center; gap: 0.85rem; flex: none; }
/* 1025-1279px: not enough room for the phone number beside the CTA, the number stays in the footer, contact page and mobile menu */
@media (min-width: 1025px) and (max-width: 1279px) { .nav-phone { display: none; } .nav-inner { gap: 0.8rem; } .nav-actions a.nav-cta.btn-primary { padding: 0 0.95rem !important; } }
@media (min-width: 1025px) and (max-width: 1099px) { .nav-links { gap: 0.5rem; } .nav-link { font-size: 0.74rem; } .nav-logo-img { max-height: 34px; } .nav-actions a.nav-cta.btn-primary { padding: 0 0.8rem !important; font-size: 0.74rem !important; } }
.nav-phone { font-size: 0.82rem; font-weight: 500; color: rgba(20,16,12,0.72); white-space: nowrap; transition: color var(--duration-fast); }
.nav-phone:hover { color: var(--color-accent-dim); }
/* Pill-within-pill CTA — tighter than the full btn */
a.nav-cta.btn-primary, .btn.btn-primary.nav-cta {
  height: 36px !important;
  padding: 0 1.15rem !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  border-radius: 100px !important;
  line-height: 36px !important;
  white-space: nowrap;
}
/* Hamburger: 44x44 tap area, icon centred in it (and vertically centred in the pill), lines 6px apart */
.nav-inner, .nav-inner > * { pointer-events: auto; }
.nav-toggle { display: none; touch-action: manipulation; width: 44px; height: 44px; flex: none; margin-right: -0.5rem; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: rgba(20,16,12,0.85); border-radius: 2px; transition: transform .35s var(--ease-smooth), opacity .2s; }
body.menu-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
/* Mobile overlay nav */
.mobile-nav { position: fixed; inset: 0; z-index: 9998; pointer-events: none; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--bg-primary); display: flex; flex-direction: column; justify-content: flex-start; 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); pointer-events: auto; }
/* menu open: header (with the X) stays above the overlay and tappable; page content behind is dead and scroll-locked */
body.menu-open .site-header { z-index: 9999; }
body.menu-open main, body.menu-open .site-footer, body.menu-open .cursor-dot, body.menu-open .cursor-ring { pointer-events: none; }
html.menu-lock, body.menu-open { overflow: hidden; }
body.menu-open { touch-action: none; }
body.menu-open .mobile-nav { touch-action: pan-y; }
.mobile-nav-links { display: flex; flex-direction: column; gap: 0.4rem; }
/* centre the menu when it fits, but let it scroll from the top when it does not (justify-content:center would clip the first links) */
.mobile-nav > :first-child { margin-top: auto; }
.mobile-nav > :last-child { margin-bottom: auto; }
.mobile-nav-links a { font-family: var(--font-display); font-size: clamp(1.9rem, min(9vw, 6vh), 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; }
}

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

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

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

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

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

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

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

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

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

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

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

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

/* --- Card (white on warm-cream section bg for clear separation) --- */
.review-card {
  background: #FFFFFF;
  border-radius: 18px;
  padding: 1.1rem;
  box-shadow: 0 1px 6px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.05);
  flex: none;
  width: 100%;
  font-family: var(--font-body);
}
.review-card-header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.65rem;
}
.review-avatar-wrap { position: relative; flex: none; }
.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: #E0DDD8;
}
.review-avatar-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 600;
  color: #ffffff;
  font-family: var(--font-body);
  user-select: none;
}
.review-g-badge {
  position: absolute;
  bottom: -2px;
  right: -3px;
  width: 16px;
  height: 16px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.review-g-badge svg { width: 10px; height: 10px; }
.review-name {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: #1A1A1A;
  line-height: 1.3;
}
.review-date {
  display: block;
  font-size: 0.72rem;
  color: #6F6964;
  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: #6F6964;
  cursor: default;
}

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

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

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

/* ================================================================= APPROACH (with photo) */
/* ---- SCROLLYTELLING APPROACH — pinned photo pane + scrolling steps ---- */
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; margin-top: clamp(2.4rem, 4vw, 4rem); }
.story-media {
  position: sticky; top: 100px;
  height: min(72svh, 640px);
  border-radius: 26px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,0.18);
}
.story-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.08);
  transition: opacity 0.8s var(--ease-smooth), transform 1.2s var(--ease-smooth);
}
.story-media img.on { opacity: 1; transform: scale(1); }
.story-media .badge {
  position: absolute; left: 1.4rem; bottom: 1.4rem; z-index: 2;
  padding: 0.55rem 1.1rem; border-radius: 100px;
  background: rgba(10,10,10,0.55); backdrop-filter: blur(8px);
  color: #fff; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
}
.story-steps { display: flex; flex-direction: column; }
.story-step {
  min-height: min(72svh, 640px);
  display: flex; flex-direction: column; justify-content: center;
}
/* Only the decorative step number dims for inactive steps; the heading and body copy stay at
   full contrast (dimming the whole step put body text at 1.57: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;
  opacity: 0.28; transition: opacity 0.6s var(--ease-smooth);
}
.story-step.on .num { opacity: 1; }
.story-step h3 { margin-bottom: 0.6rem; }
.story-step .t-body { max-width: 42ch; } /* color inherited from .section-light .t-body */
@media (prefers-reduced-motion: reduce) {
  .story-media img { transition: opacity 0.25s linear; transform: none; }
}
@media (max-width: 860px) {
  .story-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .story-media { position: sticky; top: 86px; height: 44svh; z-index: 2; }
  .story-step { min-height: 70svh; justify-content: flex-start; padding-top: clamp(2rem, 6vh, 3.2rem); }
}

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

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

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

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

/* ================================================================= TESTIMONIALS */
.section-testimonials { background: var(--bg-primary); }
/* Elfsight's Google Reviews widget defaults to near-black text (#111) assuming a light
   host page. Our testimonials section is dark, so override via Elfsight's own stable
   "es-" hook classes (not the styled-components hash classes, which can change on their end). */
.section-testimonials .es-header-heading-text,
.section-testimonials .es-rating-value,
.section-testimonials .es-review-author-name,
.section-testimonials .es-text-shortener {
  color: var(--text-primary) !important;
}
.section-testimonials .es-header-rating-reviews-count,
.section-testimonials .es-review-info-date,
.section-testimonials .es-text-shortener-control {
  color: var(--text-secondary) !important;
}
/* "Load More" ships with #111 text on a 5% black fill (invisible on our dark section), restyle it as a ghost button in the brand accent */
.section-testimonials .es-load-more-button-container { margin-top: 2.2rem; }
.section-testimonials .es-load-more-button,
.section-testimonials .es-load-more-button .es-button-base-overlay,
.section-testimonials .es-load-more-button .es-button-base-ellipsis {
  color: var(--text-primary) !important;
}
.section-testimonials .es-load-more-button {
  background: transparent !important;
  border: 1px solid rgba(236,150,113,0.55) !important;
  border-radius: 100px !important;
  min-height: 44px;
  padding: 0 0.6rem;
  font-weight: 600;
  transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}
.section-testimonials .es-load-more-button:hover,
.section-testimonials .es-load-more-button:focus-visible {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}
.section-testimonials .es-load-more-button:hover .es-button-base-overlay,
.section-testimonials .es-load-more-button:hover .es-button-base-ellipsis,
.section-testimonials .es-load-more-button:focus-visible .es-button-base-overlay,
.section-testimonials .es-load-more-button:focus-visible .es-button-base-ellipsis {
  color: #14100c !important;
}
.testimonial-stage { position: relative; min-height: clamp(280px, 34vh, 360px); margin-top: 1rem; }
.testimonial-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity var(--duration-slow) var(--ease-smooth), transform var(--duration-slow) var(--ease-smooth), visibility var(--duration-slow); max-width: 980px; }
.testimonial-slide.is-active { opacity: 1; visibility: visible; transform: none; position: relative; }
.testimonial-stars { display: inline-flex; gap: 4px; margin-bottom: 1.6rem; }
.testimonial-quote { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.6rem, 3.4vw, 3rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--text-primary); }
.testimonial-cite { display: block; margin-top: 1.8rem; font-style: normal; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-primary); }
.testimonial-cite span { color: var(--text-muted); }
.testimonial-dots { display: flex; gap: 0.7rem; margin-top: 2.8rem; }
.testimonial-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(240,237,232,0.18); transition: background var(--duration-fast), transform var(--duration-fast); }
.testimonial-dot.is-active { background: var(--color-accent); transform: scale(1.25); }

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

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

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

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

/* Stats section: subtle photo texture */
.section-stats::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: url('../assets/images/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. Swap the photo at assets/images/pt-knockout.webp. */
.knock-sec {
  background: linear-gradient(180deg, #0B0A10, #060509);
  overflow: hidden;
  position: relative;
  padding: 0 var(--section-pad-h);
}
.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;
  /* the word is ~4.25em wide, so size it from the space inside the side padding (fits at every width) */
  font-size: min(19rem, calc((100vw - 2 * var(--section-pad-h)) / 4.5));
  white-space: nowrap;
  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; }
}

.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.75); 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; }
/* Social icons: 44px circular tap targets, glyph centred (padding/underline from .footer-col a reset) */
.footer-social { display: flex; gap: 0.8rem; margin-top: 1.8rem; }
.footer-col .footer-social a { width: 44px; height: 44px; padding: 0; border: 1px solid rgba(240,237,232,0.16); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); text-decoration: none; transition: border-color var(--duration-fast), background var(--duration-fast), color var(--duration-fast); }
.footer-social svg { width: 20px; height: 20px; display: block; flex: none; fill: currentColor; stroke: none; }
.footer-social svg.is-outline { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.footer-col .footer-social a:hover, .footer-col .footer-social a:focus-visible { border-color: var(--color-accent); color: var(--color-accent); }
.footer-col-title { color: var(--text-muted); display: block; margin-bottom: 1.4rem; }
/* footer links: no underline; colour shift (+ focus ring) marks hover/focus */
.footer-col a, .footer-contact a { display: block; color: var(--text-secondary); font-size: 0.95rem; padding: 0.35rem 0; transition: color var(--duration-fast); text-decoration: none; }
.footer-hours { display: block; color: var(--text-secondary); font-size: 0.95rem; padding: 0.35rem 0; }
.footer-col a:hover, .footer-contact a:hover, .footer-col a:focus-visible, .footer-contact a:focus-visible { color: var(--color-accent); text-decoration: none; }
.footer-legal a, .footer-bottom a, .footer-powered a { text-decoration: none; }
.footer-legal a:hover, .footer-bottom a:hover, .footer-powered a:hover, .footer-legal a:focus-visible, .footer-bottom a:focus-visible, .footer-powered a:focus-visible { color: var(--color-accent); text-decoration: none; }
.footer-col a:focus-visible, .footer-contact a:focus-visible, .footer-bottom a:focus-visible, .footer-social a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; }
.footer-contact { font-style: normal; }
.footer-hours { color: var(--text-muted); padding-top: 0.6rem; }
.footer-hours-label { display: block; color: var(--text-secondary); font-weight: 600; margin-bottom: 0.15rem; }
.footer-hours-line { display: block; }
.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); }

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

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

@media (max-width: 640px) {
  .services-grid { grid-template-columns: 1fr; }
  .services-grid .service-row:nth-child(odd) { border-right: none; }
  .service-row { grid-template-columns: 1fr auto; }
  .service-desc { grid-column: 1 / -1; grid-row: 2; }
  .framework-grid { grid-template-columns: 1fr; }
  .phase-col { border-right: none; border-bottom: 1px solid rgba(240,237,232,0.1); }
  .phase-col:last-child { border-bottom: none; }
  .treat-grid { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  /* Larger tap targets for stacked single-column footer links */
  .footer-col a, .footer-contact a { padding: 0.7rem 0; }
  .hero-scrub-spacer { height: 180vh; }
  /* Stats grid: 1-column on small phones */
  .stats-grid { grid-template-columns: 1fr; }
  .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    teal   — primary  (CTAs, highlights)
     --color-accent-2  blue   — secondary (ambient light, depth)   ← swap to client's blue/red
     --color-warn      coral  — "old way" markers / warm accents
   ================================================================= */

:root {
  /* === SECONDARY BRAND — SWAP PER CLIENT === */
  --color-accent-2:      #E7AB89;
  --color-accent-2-dim:  #B8886D;
  --color-accent-2-glow: rgba(231,171,137,0.18);
}

/* ---- 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-y must stay visible
   on this section or the sticky containing block breaks and the image scrolls away normally.
   Horizontal clip is kept for the ::before glow. */
main > section.section-approach { overflow-x: clip; overflow-y: visible; }

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

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

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

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

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

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

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

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

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

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

/* ================= CTA BAND — teal→blue gradient mesh =============== */
.section-cta-band {
  background:
    radial-gradient(72% 100% at 14% 0%, rgba(28,96,84,0.95), transparent 60%),
    radial-gradient(82% 120% at 92% 100%, rgba(22,52,96,0.85), transparent 55%),
    var(--color-accent-deep);
}

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

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

/* ---- Stronger ambient light ---- */
:root {
  --color-accent-glow:   rgba(187,76,67,0.24);
  --color-accent-2-glow: rgba(231,171,137,0.28);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

/* ================================================================= CANVAS-MODE LOCATION (Map + Info) */
.canvas-location {
  display: none;
  background: linear-gradient(180deg, #F6F4F0, #ECE8E0);
  position: relative; overflow: hidden;
  padding: var(--section-pad-v) 0;
}
.canvas-location::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(50% 62% at 5% 5%, rgba(22,50,104,0.18), transparent 66%),
    radial-gradient(44% 54% at 97% 97%, rgba(13,68,59,0.14), transparent 66%);
}
.canvas-location > .section-shell { position: relative; z-index: 1; }
body.hero-mode-canvas .canvas-location { display: block; }

.canvas-location-head { margin-bottom: clamp(2.4rem, 4vw, 4rem); }
.canvas-location-head .t-h2 { color: #14100C; }
.canvas-location-head .section-label { color: var(--color-accent-dim); }
.canvas-location-body {
  display: grid; grid-template-columns: 1.6fr 1fr;
  gap: clamp(1.4rem, 2.5vw, 2.2rem); align-items: start;
}
.location-map-embed {
  border-radius: 14px; overflow: hidden;
  height: clamp(320px, 42vh, 500px);
  border: 1px solid rgba(20,30,28,0.12);
  box-shadow: 0 8px 32px rgba(20,30,28,0.1);
}
.location-map-embed iframe { width: 100%; height: 100%; border: none; display: block; }
.location-info-card {
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(20,30,28,0.1);
  border-radius: 14px; padding: clamp(1.6rem, 2.5vw, 2.2rem);
  box-shadow: 0 4px 20px rgba(20,30,28,0.07);
}
.location-clinic-name {
  font-family: var(--font-body); font-weight: 700;
  font-size: 1.06rem; color: var(--text-on-light);
  margin-bottom: 1.4rem; padding-bottom: 1rem;
  border-bottom: 1px solid rgba(20,30,28,0.1);
}
.location-info-row {
  display: flex; align-items: flex-start; gap: 0.85rem;
  margin-bottom: 1rem;
}
.location-info-row:last-child { margin-bottom: 0; }
.location-info-icon {
  width: 32px; height: 32px; flex: none;
  background: rgba(0,196,173,0.1); border-radius: 7px;
  display: flex; align-items: center; justify-content: center; margin-top: 0.05rem;
}
.location-info-icon svg {
  width: 16px; height: 16px; fill: none;
  stroke: var(--color-accent-dim); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.location-info-text { font-size: 0.92rem; line-height: 1.55; }
.location-info-text address { font-style: normal; color: var(--text-on-light); font-weight: 500; }
.location-info-text a { color: var(--text-on-light); font-weight: 500; transition: color var(--duration-fast); text-decoration: none; }
.location-info-text a:hover { color: var(--color-accent-dim); }
.location-info-text span { color: var(--text-body-light); }

/* Multi-location tab switcher (Ervin PT: Padgett St / Morgan St / Henderson) */
.location-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.1rem; }
.location-tab {
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.01em; padding: 0.5rem 0.95rem; border-radius: 100px;
  border: 1px solid rgba(20,30,28,0.14); background: rgba(255,255,255,0.55);
  color: var(--text-on-light); cursor: pointer; white-space: nowrap;
  transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}
.location-tab:hover { border-color: var(--color-accent-dim); color: var(--color-accent-dim); }
.location-tab.is-active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-deep); }
.location-clinic-name-sm {
  font-family: var(--font-body); font-weight: 700; font-size: 0.88rem;
  color: var(--text-on-light); margin-bottom: 0.5rem;
}

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

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

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

.form-label {
  display: block;
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(240,237,232,0.55);
  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.4);
  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.55); }
.form-input:focus {
  outline: none;
  border-color: rgba(0,229,200,0.55);
  background: rgba(255,255,255,0.09);
  box-shadow: 0 0 0 3px rgba(0,229,200,0.08);
}
.form-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(240,237,232,0.4)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.form-select option { background: var(--bg-secondary); color: var(--text-primary); }

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

/* Success state */
.netlify-form.is-submitted { display: none; }
.netlify-form-success {
  display: none; text-align: center;
  padding: clamp(2rem, 5vw, 3.5rem) 1.5rem;
}
.netlify-form-success.is-visible { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.netlify-form-success-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(0,229,200,0.12); border: 1px solid rgba(0,229,200,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; }
}

/* ================================================================= ACCESSIBILITY (WCAG 2.1 AA)
   Skip link, screen-reader-only text. Loaded on every page via styles.css. */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Skip link: first focusable element on every page, off-screen until focused,
   then shown as a cream pill in the header's position (above the loader and nav). */
.skip-link {
  position: fixed; top: 20px; left: 20px; z-index: 10001;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.3rem;
  background: #F0EDE8; color: #14100C; border-radius: 100px;
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  transform: translateY(-200%); transition: transform var(--duration-fast) var(--ease-smooth);
}
.skip-link:focus { transform: none; box-shadow: 0 10px 30px rgba(0,0,0,0.35); outline: 2px solid var(--color-accent); outline-offset: 3px; }
/* Skip-link / in-page-anchor targets receive programmatic focus only; no ring around whole sections */
main[tabindex="-1"]:focus, section[tabindex="-1"]:focus, [data-focus-target]:focus, .netlify-form-success h3:focus { outline: none; }
/* FAQ list on a dark band (faq.html). The base .faq-* colors assume a light band; on the
   dark page they rendered #1A1A1A on #0A0A0A (1.13:1). */
.faq-dark .faq-list, .faq-dark .faq-item { border-color: rgba(240,237,232,0.14); }
.faq-dark .faq-question { color: var(--text-primary); }
.faq-dark .faq-question:hover { color: var(--color-accent); }
.faq-dark .faq-chev { border-color: var(--text-primary); }
.faq-dark .faq-answer { color: var(--text-secondary); }
/* Contact page location card sits on the dark contact band: clinic name was #1A1A1A on #0B0D14 (1.12:1) */
.contact-info-item .location-clinic-name-sm { color: var(--text-primary); }

/* ---- Focus indicators (2.4.7 / 1.4.11) --------------------------------------------
   One visible ring for every interactive element, keyboard focus only (:focus-visible).
   Coral on the dark bands (>= 6.3:1 on every dark background); near-black on the light
   bands, the cream nav pill and white cards (>= 14:1). The dropdown and mobile menu are
   dark surfaces inside/over the pill, so they switch back to coral. */
:root { --focus-ring: var(--color-accent); }
.section-light, .canvas-location, .site-header, .review-card { --focus-ring: #14100C; }
.site-header .nav-menu, .mobile-nav { --focus-ring: var(--color-accent); }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 3px;
}
/* text inputs show focus for mouse users too (browsers match :focus-visible there anyway) */
.form-input:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* rings inside the dropdown hug the item instead of spilling past the menu edge */
.nav-menu a:focus-visible { outline-offset: -3px; border-radius: 8px; }
.faq-question:focus-visible { outline-offset: 4px; border-radius: 4px; }

/* ---- Desktop dropdowns: keyboard + dismissible (2.1.1 / 1.4.13) --------------------
   Hover-only menus hid Blog, FAQ, Spotlight Series and Thorne from keyboard users.
   Link parents (About, Services…) open while focus is inside; button parents
   (Resources, Shop) open on click via .is-open + aria-expanded (nav JS). Escape adds
   .is-dismissed, which wins until the pointer/focus leaves. */
.nav-dropdown:focus-within .nav-menu,
.nav-dropdown.is-open .nav-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav-dropdown:last-of-type:focus-within .nav-menu,
.nav-dropdown:last-of-type.is-open .nav-menu { transform: translateY(0); }
.nav-dropdown:focus-within .nav-caret, .nav-dropdown.is-open .nav-caret { transform: rotate(-135deg) translateY(-1px); }
/* button parents only open on click/hover, not merely because the button has focus */
html:not(.no-js) .nav-dropdown:has(> button.nav-link-parent):not(.is-open):not(:hover) .nav-menu { opacity: 0; visibility: hidden; pointer-events: none; }
html:not(.no-js) .nav-dropdown:has(> button.nav-link-parent):not(.is-open):not(:hover) .nav-caret { transform: rotate(45deg) translateY(-1px); }
.nav-dropdown.is-dismissed .nav-menu { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.nav-dropdown.is-dismissed .nav-caret { transform: rotate(45deg) translateY(-1px) !important; }

/* ---- Focused elements never hide under the fixed nav pill (native focus scrolling and
   in-page anchors respect scroll-padding; no visual change) ---- */
html { scroll-padding-top: 110px; scroll-padding-bottom: 40px; }

/* ---- Elfsight reviews widget sets outline:none on its links/controls; restore a visible ring ---- */
.section-testimonials [class*="elfsight-app"] a:focus-visible,
.section-testimonials [class*="elfsight-app"] button:focus-visible,
.section-testimonials [class*="elfsight-app"] [tabindex]:focus-visible { outline: 2px solid var(--focus-ring) !important; outline-offset: 2px !important; }

/* ---- Target size: stand-alone small links get a >= 24px hit area without moving anything.
   Inline elements: vertical padding grows the hit box but not the line box. Flex items:
   padding offset by an equal negative margin. ---- */
.footer-bottom a, .contact-info-item-text a { padding-block: 4px; }
.nav-phone { padding-block: 6px; margin-block: -6px; }

/* ---- Content survives without JavaScript ------------------------------------------
   <html class="no-js"> is removed by an inline script at the top of <head>, so these rules
   only apply when scripts never run. Everything that normally waits for JS to reveal it
   renders in its final state instead. */
.no-js [data-reveal], .no-js [data-reveal="stagger"] > *,
.no-js .hero-el, .no-js .hero-heading .word { opacity: 1 !important; transform: none !important; }
/* reviews wall is built from JSON by app.js; with no JS there is nothing to show */
.no-js .reviews-wall { display: none; }
/* no hamburger without JS: show the mobile link list in place under the header */
@media (max-width: 920px) {
  .no-js .nav-toggle { display: none; }
  .no-js .mobile-nav { position: static; opacity: 1; visibility: visible; transform: none; pointer-events: auto; padding-top: calc(var(--header-h) + 1.5rem); padding-bottom: 2rem; }
  .no-js .mobile-nav-links a { opacity: 1; transform: none; font-size: 1.6rem; }
}

/* ---- Reduced motion backstop (all pages) -------------------------------------------
   Stops CSS motion. JS-driven reveals are handled in app.js (gsap.matchMedia reduce
   branch) and page.js, which put content in its final visible state. */
@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;
  }
}

/* ---- Pause control for auto-moving content (2.2.2) ----------------------------------
   The proof-bar quote marquee and the reviews wall move indefinitely. They pause while
   hovered or while focus is inside, and a toggle button (visible when focused, same
   pattern as the skip link) pauses/resumes them for keyboard, switch and screen reader
   users. Tapping the moving area toggles pause on touch screens. */
.proof-marquee:hover .proof-marquee-track, .proof-marquee:focus-within .proof-marquee-track,
.proof-marquee.is-paused .proof-marquee-track { animation-play-state: paused; }
.proof-marquee, .reviews-wall { position: relative; }
.motion-toggle {
  position: absolute; top: 8px; left: 8px; z-index: 5;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem;
  background: #F0EDE8; color: #14100C; border-radius: 100px;
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  opacity: 0; pointer-events: none;
}
.motion-toggle:focus-visible { opacity: 1; pointer-events: auto; outline: 2px solid var(--color-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .motion-toggle { display: none; } }

/* ---- Reflow (1.4.10): on short viewports (400% zoom of a 1280x1024 screen is 320x256)
   the position:fixed canvas-hero text is taller than the viewport and its top (eyebrow +
   H1) sat above the screen where it could never be scrolled to. Below 600px tall it is
   laid out in the normal flow at the top of the hero instead. Taller screens unchanged. */
@media (max-height: 600px) {
  .hero-scrub-content { position: absolute; height: auto; min-height: 100svh; padding-top: calc(var(--header-h) + 1.5rem); justify-content: flex-start; }
}
/* Text spacing (1.4.12): the long "Owensboro (Opening Soon…)" tab was nowrap and ran out of
   its card when users widen letter/word spacing; it may wrap now (only when it no longer fits) */
.location-tab { white-space: normal; }

/* =================================================================
   PROPOSAL (needs client approval): coral TEXT on light backgrounds
   --color-accent-dim #C27B5D measures 2.56-3.18:1 on the cream/light bands
   (AA needs 4.5:1 for this small text). #94502F is the nearest same-hue shade
   that passes on every light band (4.67:1 on #E6E1D7, 5.45:1 on #F4F2EE).
   Logo coral #EC9671 and accent-dim on dark bands are unchanged.
   ================================================================= */
:root { --color-accent-ink: #94502F; }
.section-light .section-label,
.service-who .section-head .section-label,
.service-outcomes .section-head .section-label,
.service-related.section-light .section-head .section-label,
.conditions-section .section-label,
.condition-symptoms .section-head .section-label,
.canvas-location-head .section-label,
.link-arrow-dark, .section-light .team-cred, .faq-num, .faq-question:hover,
.treat-group-title .t-label, .treat-card-arrow, .treat-item-all span,
.story-step .num, .about-story-pull,
.service-related.section-light .related-card-arrow,
.condition-group-label, .condition-card-link, .condition-card:hover .condition-card-link,
.body-map-label.is-active a, .body-map-label:hover a,
.nav-phone:hover, .location-info-text a:hover, .location-tab:hover { color: var(--color-accent-ink); }
.about-story-pull { border-left-color: var(--color-accent-ink); }
.location-tab:hover { border-color: var(--color-accent-ink); }
/* the FAQ page list sits on a dark band: keep the bright coral there */
.faq-dark .faq-num { color: var(--color-accent); }
.faq-dark .faq-question:hover { color: var(--color-accent); }