/* ===========================================================
   FLOW LIMITLESS — Flow Academy BJJ
   Editorial design system (irinamoi-inspired)
   Black-on-white restraint · huge typography · whitespace as structure
   Coral used only for thin rules, numbered labels, hover, primary CTA.
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@400;500;600;700;800&family=Mulish:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&display=swap');

:root{
  /* Ink + neutrals */
  --ink:#0C1E2E;          /* navy ink */
  --navy-900:#0C1E2E;
  --body:#3C4A54;
  --muted:#7A8893;

  --white:#FFFFFF;
  --cream:#FBF6EE;        /* warm off-white */
  --cream-2:#F4EFE6;

  /* Accent — coral, used sparingly */
  --coral:#F8543C;
  --coral-600:#E84628;
  --orange:#F8543C;       /* legacy alias, keep for any residual refs */

  /* Rules */
  --rule:rgba(12,30,46,.12);
  --rule-strong:rgba(12,30,46,.22);

  /* Type */
  --display:'Saira Condensed', 'Arial Narrow', sans-serif;
  --sans:'Mulish', system-ui, -apple-system, sans-serif;

  --pill:999px;
  --container:1240px;

  /* subtle header shadow only */
  --sh-header:0 1px 0 rgba(12,30,46,.06);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--body);
  background:var(--white);
  font-size:18px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--coral); color:#fff; }

/* ---------- Defensive SVG sizing ----------
   Inline SVGs with only a viewBox expand to their container width if
   unstyled. Cap every icon-context svg so nothing can ever render
   unconstrained; specific component rules below override these. */
svg{ max-width:100%; }
a svg, button svg, li svg, p svg, span svg,
h1 svg, h2 svg, h3 svg, h4 svg, label svg{
  width:18px; height:18px; flex:none;
}

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 40px; }
.section{ padding:104px 0; }
.section--tight{ padding:84px 0; }
.center{ text-align:center; }

/* thin editorial rule between sections */
.rule{ height:1px; background:var(--rule); border:0; margin:0; width:100%; }
.container > .rule{ margin:0; }

/* ---------- Type ---------- */
h1,h2,h3,h4{ margin:0; color:var(--ink); font-family:var(--display); font-weight:800; line-height:.95; letter-spacing:0; }
h1{ font-size:clamp(48px,8vw,120px); text-transform:uppercase; line-height:.92; }
h2{ font-size:clamp(40px,6vw,88px); text-transform:uppercase; line-height:.95; }
h3{ font-size:clamp(26px,3vw,40px); text-transform:uppercase; line-height:1; }
h4{ font-size:clamp(19px,1.6vw,23px); text-transform:none; letter-spacing:0; font-weight:800; }

p{ margin:0 0 1.1em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }
.lead{ font-size:clamp(19px,1.5vw,22px); line-height:1.6; color:var(--ink); max-width:60ch; }
.measure{ max-width:60ch; }

/* Numbered editorial label (replaces old .eyebrow) */
.eyebrow{
  font-family:var(--sans); font-weight:700; font-size:12.5px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--coral);
  display:inline-flex; align-items:center; gap:12px; margin:0 0 26px;
}
.eyebrow.center-eb{ justify-content:center; }
.eyebrow a{ color:inherit; }
.eyebrow a:hover{ color:var(--ink); }

.section-head{ max-width:20ch; margin:0 0 70px; }
.section-head.center{ margin-left:auto; margin-right:auto; max-width:24ch; }
.section-head h2{ margin-bottom:.35em; }
.section-head p{ font-size:clamp(18px,1.4vw,21px); color:var(--body); max-width:56ch; text-transform:none; }
.section-head.center p{ margin-left:auto; margin-right:auto; }

/* ---------- Links (underline sweep) ---------- */
.link-sweep{
  display:inline-flex; align-items:center; gap:10px; color:var(--ink); font-weight:700;
  background-image:linear-gradient(var(--coral),var(--coral));
  background-repeat:no-repeat; background-position:0 100%; background-size:0% 1.5px;
  transition:background-size .35s ease, color .2s ease; padding-bottom:2px;
}
.link-sweep svg{ width:18px; height:18px; transition:transform .3s ease; }
.link-sweep:hover{ background-size:100% 1.5px; color:var(--coral); }
.link-sweep:hover svg{ transform:translateX(5px); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  font-family:var(--sans); font-weight:800; font-size:15px; letter-spacing:.04em;
  text-transform:uppercase;
  padding:17px 34px; border-radius:4px; cursor:pointer; border:1.5px solid transparent;
  transition:background .22s ease, color .22s ease, border-color .22s ease;
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; transition:transform .3s ease; }
.btn:hover svg{ transform:translateX(4px); }
.btn-primary{ background:var(--coral); color:#fff; }
.btn-primary:hover{ background:var(--coral-600); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--rule-strong); }
.btn-outline:hover{ border-color:var(--ink); }
.btn-outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.btn-outline-light:hover{ border-color:#fff; background:rgba(255,255,255,.06); }
.btn-lg{ padding:20px 40px; font-size:16px; }

/* secondary text link with arrow */
.btn-text{
  display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:15px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink);
  background-image:linear-gradient(var(--coral),var(--coral));
  background-repeat:no-repeat; background-position:0 100%; background-size:0% 1.5px;
  transition:background-size .35s ease, color .2s ease; padding-bottom:4px;
}
.btn-text svg{ width:18px; height:18px; transition:transform .3s ease; }
.btn-text:hover{ background-size:100% 1.5px; color:var(--coral); }
.btn-text:hover svg{ transform:translateX(5px); }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.86); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);
}
/* On index, header sits over navy hero — invert to light text */
body.hero-page .site-header{
  background:rgba(12,30,46,.72); border-bottom-color:rgba(255,255,255,.12);
}
.nav{ display:flex; align-items:center; gap:28px; height:78px; }
.brand{ display:flex; align-items:center; gap:12px; margin-right:8px; }
.brand img{ width:34px; height:auto; }
.brand-word{ font-family:var(--display); font-weight:800; text-transform:uppercase; line-height:.86; letter-spacing:.02em; font-size:19px; }
.brand-word .a{ color:var(--ink); }
.brand-word .b{ color:var(--coral); }
body.hero-page .brand-word .a{ color:#fff; }

.nav-links{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav-links a{
  font-family:var(--sans); font-weight:600; font-size:13.5px; letter-spacing:.02em;
  color:var(--body); white-space:nowrap; padding:8px 14px; position:relative;
  transition:color .18s;
}
.nav-links a::before{ content:'['; opacity:0; margin-right:2px; transition:opacity .18s; color:var(--coral); }
.nav-links a::after{ content:']'; opacity:0; margin-left:2px; transition:opacity .18s; color:var(--coral); }
.nav-links a:hover::before,.nav-links a:hover::after,
.nav-links a.active::before,.nav-links a.active::after{ opacity:1; }
.nav-links a:hover,.nav-links a.active{ color:var(--ink); }
body.hero-page .nav-links a{ color:rgba(255,255,255,.78); }
body.hero-page .nav-links a:hover,body.hero-page .nav-links a.active{ color:#fff; }

.nav-cta{ display:flex; align-items:center; gap:16px; margin-left:6px; }
.nav-phone{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); font-weight:700; font-size:13.5px; white-space:nowrap; }
.nav-phone svg{ width:15px; height:15px; color:var(--coral); }
body.hero-page .nav-phone{ color:#fff; }
.nav-toggle{ display:none; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.7); padding:120px 0 40px; }
.footer-top{ display:grid; grid-template-columns:1.5fr 1fr; gap:60px; align-items:end; margin-bottom:80px; }
.footer-word{ font-family:var(--display); font-weight:800; text-transform:lowercase; font-size:clamp(60px,10vw,150px); line-height:.86; color:#fff; letter-spacing:-.01em; }
.footer-word .amp{ color:var(--coral); }
.footer-contact{ display:flex; flex-direction:column; gap:8px; }
.footer-contact .fc-label{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:6px; }
.footer-contact a,.footer-contact span{ font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:clamp(22px,2vw,30px); color:#fff; line-height:1.05; }
.footer-contact a{ transition:color .2s; }
.footer-contact a:hover{ color:var(--coral); }

.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:44px; padding-top:52px; border-top:1px solid rgba(255,255,255,.12); }
.footer-brand p{ color:rgba(255,255,255,.55); font-size:15px; max-width:34ch; }
.footer-brand p a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.footer-col h4{ color:#fff; font-size:12px; letter-spacing:.2em; text-transform:uppercase; margin-bottom:20px; font-family:var(--sans); font-weight:700; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.footer-col a,.footer-col li{ color:rgba(255,255,255,.62); font-size:15px; }
.footer-col a{ transition:color .18s; }
.footer-col a:hover{ color:var(--coral); }
.foot-contact{ display:flex; gap:11px; align-items:flex-start; font-size:15px; color:rgba(255,255,255,.62); }
.foot-contact svg{ width:17px; height:17px; color:var(--coral); flex:none; margin-top:3px; }
.socials{ display:flex; gap:14px; margin-top:22px; }
.socials a{ color:rgba(255,255,255,.6); transition:color .18s; }
.socials a:hover{ color:var(--coral); }
.socials svg{ width:20px; height:20px; }
.footer-bottom{
  margin-top:64px; padding-top:26px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:13px; letter-spacing:.02em; color:rgba(255,255,255,.42);
}
.footer-bottom a{ color:rgba(255,255,255,.6); }

/* ---------- Grids ---------- */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }

/* reveal on scroll — quiet */
.reveal{ opacity:0; transform:translateY(12px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Images (editorial, rectangular) ---------- */
.ed-photo{ overflow:hidden; }
.ed-photo img{ width:100%; height:auto; object-fit:cover; transition:transform 6s ease; }
.ed-photo:hover img{ transform:scale(1.02); }
body.calm .ed-photo:hover img{ transform:none; }
.ed-photo--tall img{ aspect-ratio:auto; }
.ed-photo--wide img{ aspect-ratio:auto; }
.ed-caption{ margin:12px 0 0; font-family:var(--sans); font-size:14px; font-style:italic; color:var(--muted); letter-spacing:.005em; }
.coach-photo{ margin:32px 0 0; }
/* Zaide + Ethan — warm editorial blend: desaturated/warmed, a low navy-coral
   duotone wash + inset seat, and a soft radial edge-fade so the frame melts into
   the cream instead of reading as a raw snapshot. All static CSS (calm-safe). */
.coach-frame{ position:relative; display:block; border-radius:16px; overflow:hidden;
  -webkit-mask-image:radial-gradient(132% 118% at 50% 42%, #000 68%, rgba(0,0,0,0) 100%);
          mask-image:radial-gradient(132% 118% at 50% 42%, #000 68%, rgba(0,0,0,0) 100%); }
.coach-frame img{ display:block; border-radius:16px;
  filter:saturate(.82) contrast(.95) brightness(1.03) sepia(.08); }
.coach-frame::after{ content:''; position:absolute; inset:0; pointer-events:none; border-radius:16px;
  background:linear-gradient(150deg, rgba(12,30,46,.16) 0%, rgba(248,84,60,.12) 100%);
  box-shadow:inset 0 0 34px rgba(12,30,46,.16); }

/* ---------- HOME hero (navy scatter-shield — KEEP) ---------- */
.hero{ background:var(--navy-900); color:#fff; position:relative; overflow:hidden; }
.hero-inner{ position:relative; z-index:2; max-width:1000px; padding:150px 0 64px; }
.hero-field{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero-field .lg{ position:absolute; top:0; left:0; will-change:transform; }
.hero-field .lg svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 6px 16px rgba(0,0,0,.35)); }
.hero .coming-badge{ margin-bottom:34px; }
.hero .eyebrow{ color:rgba(255,255,255,.62); margin-bottom:30px; }
.hero .eyebrow a:hover{ color:#fff; }
.hero h1{ color:#fff; max-width:14ch; margin-bottom:0; text-shadow:0 4px 30px rgba(12,30,46,.5); }
.hero-rotline{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(48px,8vw,120px); line-height:.92; color:var(--coral);
  min-height:.95em; margin:0 0 34px; text-shadow:0 4px 30px rgba(12,30,46,.5);
}
.hero-rotline span{ display:inline-block; will-change:transform; }
@keyframes flRotPop{ from{ transform:translateY(14px); } to{ transform:translateY(0); } }
.hero p.lead{ color:rgba(255,255,255,.82); max-width:52ch; margin-top:0; text-shadow:0 2px 16px rgba(12,30,46,.55); }
.hero-cta{ display:flex; gap:16px; margin:40px 0 0; flex-wrap:wrap; align-items:center; }
.hero-hint{ position:absolute; right:40px; bottom:26px; z-index:2; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.36); font-weight:700; }
@media (max-width:640px){ .hero-hint{ display:none; } }

/* Parent excitement reel — "Watch them — <rotating coral phrase>" */
.hero-reel{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.42em;
  margin:26px 0 0; max-width:40ch; font-family:var(--display); font-weight:800;
  text-transform:uppercase; letter-spacing:.01em; line-height:1.06;
  font-size:clamp(19px,2.5vw,32px);
}
.hero-reel .reel-lead{ color:rgba(255,255,255,.9); }
.hero-reel .reel-rot{ display:inline-block; color:var(--coral); will-change:transform;
  text-shadow:0 2px 18px rgba(12,30,46,.5); }
@keyframes flReelRise{ from{ transform:translateY(.5em); opacity:.25; } to{ transform:translateY(0); opacity:1; } }

/* Celebratory burst layer — load spark flash + tap sparks (power mode only) */
.fl-spark{ position:absolute; top:0; left:0; width:13px; height:13px; margin:-6.5px 0 0 -6.5px;
  border-radius:3px; background:var(--coral); pointer-events:none; opacity:0; z-index:2;
  will-change:transform,opacity; box-shadow:0 2px 12px rgba(248,84,60,.5); }
.fl-spark-flash{ position:absolute; left:50%; top:50%; width:44vmax; height:44vmax; margin:-22vmax 0 0 -22vmax;
  border-radius:50%; pointer-events:none; z-index:2; opacity:0; will-change:transform,opacity;
  background:radial-gradient(circle, rgba(248,84,60,.4) 0%, rgba(248,84,60,.15) 34%, rgba(248,84,60,0) 66%); }
@keyframes flSparkFlash{ 0%{ transform:scale(.15); opacity:.9; } 100%{ transform:scale(1.25); opacity:0; } }

/* coming badge — quiet text label */
.coming-badge{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-weight:700;
  font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.72);
}
.coming-badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--coral); flex:none; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero{ background:var(--white); color:var(--ink); padding:130px 0 90px; border-bottom:1px solid var(--rule); }
.page-hero .breadcrumb{ font-size:12px; color:var(--muted); font-weight:700; letter-spacing:.16em; margin-bottom:34px; text-transform:uppercase; }
.page-hero .breadcrumb a:hover{ color:var(--coral); }
.page-hero .eyebrow{ color:var(--coral); }
.page-hero h1{ max-width:16ch; }
.page-hero p{ color:var(--body); max-width:56ch; margin-top:34px; font-size:clamp(19px,1.5vw,22px); }

/* ---------- Big typographic statement ---------- */
.statement{ font-family:var(--display); font-weight:800; text-transform:uppercase; line-height:.92; letter-spacing:0; color:var(--ink); font-size:clamp(40px,7vw,104px); max-width:16ch; }
.statement .coral{ color:var(--coral); }
.statement--sub{ margin-top:40px; font-family:var(--sans); font-weight:400; font-size:clamp(18px,1.5vw,22px); text-transform:none; line-height:1.6; color:var(--body); max-width:60ch; }

/* ---------- Numbered editorial list (pillars) ---------- */
.ed-list{ border-top:1px solid var(--rule); }
.ed-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:40px; align-items:baseline;
  padding:48px 0; border-bottom:1px solid var(--rule); transition:padding-left .35s ease;
}
.ed-row:hover{ padding-left:14px; }
body.calm .ed-row:hover{ padding-left:0; }
.ed-row .num{ font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:.16em; color:var(--coral); white-space:nowrap; padding-top:.7em; }
.ed-row h3{ font-size:clamp(28px,4vw,58px); }
.ed-row .desc{ max-width:38ch; font-size:clamp(16px,1.3vw,18px); color:var(--body); justify-self:end; text-align:left; }
@media (max-width:820px){
  .ed-row{ grid-template-columns:auto 1fr; gap:14px 24px; }
  .ed-row .desc{ grid-column:1/-1; justify-self:start; padding-left:0; }
}

/* pillar detail (program page) */
.prow{ display:grid; grid-template-columns:auto 1fr; gap:56px; align-items:start; padding:70px 0; border-bottom:1px solid var(--rule); }
.ed-list-detail{ border-top:1px solid var(--rule); }
.prow .pnum{ font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:.16em; color:var(--coral); padding-top:.6em; white-space:nowrap; }
.prow h3{ font-size:clamp(30px,4.5vw,60px); margin-bottom:22px; }
.prow .lead{ max-width:60ch; }
.prow .ptags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.ptag{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.ptag:not(:last-child)::after{ content:'·'; margin-left:10px; color:var(--rule-strong); }
@media (max-width:720px){ .prow{ grid-template-columns:1fr; gap:20px; } }

/* ---------- Feature list (why us) ---------- */
.feat-list{ display:flex; flex-direction:column; }
.feat{ padding:28px 0; border-top:1px solid var(--rule); }
.feat:first-child{ border-top:0; padding-top:0; }
.feat h4{ margin-bottom:8px; }
.feat p{ font-size:16px; color:var(--body); margin:0; max-width:48ch; }

/* ---------- Editorial touch carousel (scroll-snap) ---------- */
.ed-carousel{ position:relative; }
.ed-carousel__track{
  display:flex; gap:16px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none;
  padding:2px 0 6px;
  cursor:grab;
}
.ed-carousel__track::-webkit-scrollbar{ display:none; width:0; height:0; }
.ed-carousel__track.is-dragging{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; }
.ed-carousel__track:focus-visible{ outline:2px solid var(--coral); outline-offset:4px; }

.ed-slide{
  flex:0 0 78vw; max-width:440px;
  scroll-snap-align:start;
  border:1px solid var(--rule);
  padding:34px 30px 38px;
  display:flex; flex-direction:column;
  background:var(--white);
  transition:border-color .3s ease;
}
.ed-slide:hover{ border-color:var(--rule-strong); }
.ed-slide .num{ font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:.16em; color:var(--coral); white-space:nowrap; margin-bottom:24px; }
.ed-slide h3{ font-size:clamp(24px,2.6vw,36px); margin-bottom:16px; }
.ed-slide .desc{ font-size:16px; color:var(--body); margin:0; }

.ed-carousel__foot{ display:flex; align-items:center; gap:24px; margin-top:30px; }
.ed-carousel__counter{ font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:.16em; color:var(--coral); white-space:nowrap; }
.ed-carousel__progress{ flex:1; height:1px; background:var(--rule); position:relative; }
.ed-carousel__bar{ position:absolute; left:0; top:0; height:1px; background:var(--coral); width:0; transition:width .25s ease; }
.ed-carousel__nav{ display:flex; gap:10px; }
.ed-arrow{
  width:46px; height:46px; border:1px solid var(--rule-strong); background:transparent;
  color:var(--ink); border-radius:50%; cursor:pointer; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.ed-arrow svg{ width:18px; height:18px; }
.ed-arrow:hover:not(:disabled){ border-color:var(--ink); }
.ed-arrow:disabled{ opacity:.28; cursor:default; }
.ed-arrow:focus-visible{ outline:2px solid var(--coral); outline-offset:3px; }

@media (min-width:721px){
  .ed-carousel__track{ gap:24px; }
  .ed-slide{ flex-basis:400px; }
}
@media (max-width:720px){
  .ed-carousel__nav{ display:none; }
}
body.calm .ed-slide,
body.calm .ed-carousel__bar,
body.calm .ed-arrow{ transition:none !important; }
@media (prefers-reduced-motion: reduce){
  .ed-carousel__track{ scroll-behavior:auto; }
  .ed-slide,.ed-carousel__bar,.ed-arrow{ transition:none !important; }
}

/* ---------- Checklist ---------- */
.checklist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.checklist li{ display:flex; gap:16px; align-items:flex-start; font-size:18px; color:var(--ink); font-weight:600; padding:18px 0; border-top:1px solid var(--rule); }
.checklist li:first-child{ border-top:0; }
.checklist li svg{ width:20px; height:20px; color:var(--coral); flex:none; margin-top:5px; }

/* ---------- Pull quote (coach) ---------- */
.pullquote{ font-family:var(--display); font-weight:600; text-transform:none; font-size:clamp(28px,3.6vw,52px); line-height:1.05; color:var(--ink); letter-spacing:0; }
.pullquote .coral{ color:var(--coral); }
.quote-attr{ margin-top:28px; font-family:var(--sans); font-weight:700; font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
/* Static crawler/no-JS completion word inside the hero h1; hidden once JS + the live rotline take over. */
html.js .h1-fallback{ display:none; }

/* ---------- Dark block (schedule / cta second dark moment) ---------- */
.dark-block{ background:var(--navy-900); color:#fff; }
.dark-block h2,.dark-block h3,.dark-block h4{ color:#fff; }
.dark-block .eyebrow{ color:var(--coral); }
.dark-block p{ color:rgba(255,255,255,.78); }
.sched-when{ display:flex; align-items:baseline; gap:22px; flex-wrap:wrap; margin:30px 0; }
.sched-when .day{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(52px,8vw,110px); color:#fff; line-height:.9; }
.sched-when .time{ font-family:var(--display); font-weight:600; font-size:clamp(28px,3vw,44px); color:var(--coral); }
.sched-meta{ display:flex; flex-direction:column; gap:16px; margin-top:14px; }
.sched-meta .row{ display:flex; gap:14px; align-items:center; color:rgba(255,255,255,.8); font-weight:500; font-size:16px; }
.sched-meta .row svg{ width:20px; height:20px; color:var(--coral); flex:none; }

/* ---------- Final CTA (big type) ---------- */
.cta-final{ text-align:center; }
.cta-final .display-tag{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(52px,10vw,150px); line-height:.9; color:var(--ink); margin:0 0 40px; }
.cta-final .display-tag .coral{ color:var(--coral); }
.cta-final p{ max-width:52ch; margin:0 auto 40px; font-size:clamp(18px,1.5vw,21px); color:var(--body); }
.cta-actions{ display:flex; gap:20px; justify-content:center; flex-wrap:wrap; align-items:center; }

/* ---------- Steps (what to expect) ---------- */
.steps{ border-top:1px solid var(--rule); }
.step{ display:grid; grid-template-columns:auto 1fr; gap:40px; align-items:baseline; padding:44px 0; border-bottom:1px solid var(--rule); }
.step .sn{ font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:.16em; color:var(--coral); white-space:nowrap; padding-top:.4em; }
.step h3{ font-size:clamp(24px,3vw,38px); margin-bottom:10px; }
.step p{ font-size:16px; color:var(--body); max-width:60ch; }
@media (max-width:640px){ .step{ grid-template-columns:1fr; gap:12px; } }

/* ---------- Info blocks (what to bring / adapt) ---------- */
.info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--rule); }
.info{ padding:44px 40px 44px 0; border-right:1px solid var(--rule); }
.info:last-child{ border-right:0; padding-right:0; }
.info .inum{ font-family:var(--sans); font-weight:700; font-size:12px; letter-spacing:.16em; color:var(--coral); margin-bottom:22px; }
.info h4{ margin-bottom:10px; }
.info p{ font-size:16px; color:var(--body); }
@media (max-width:820px){
  .info-grid{ grid-template-columns:1fr; }
  .info{ border-right:0; border-bottom:1px solid var(--rule); padding:34px 0; }
  .info:last-child{ border-bottom:0; }
}

/* ---------- What happens next (numbered) ---------- */
.next-list{ border-top:1px solid var(--rule); }
.next-item{ display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:baseline; padding:30px 0; border-bottom:1px solid var(--rule); }
.next-item .nn{ font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:.16em; color:var(--coral); white-space:nowrap; padding-top:.3em; }
.next-item h4{ margin-bottom:6px; }
.next-item p{ font-size:16px; color:var(--body); margin:0; }

/* ---------- Forms (minimal, underline inputs) ---------- */
.form-card{ background:transparent; }
.form-card h3{ margin-bottom:14px; }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:28px; }
.field label{ font-weight:700; font-size:12.5px; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; }
.field label .req{ color:var(--coral); }
.field input,.field select,.field textarea{
  font-family:var(--sans); font-size:17px; color:var(--ink); background:transparent;
  border:0; border-bottom:1.5px solid var(--rule-strong); border-radius:0; padding:10px 2px; width:100%;
  transition:border-color .2s;
}
.field select{ appearance:none; background:transparent; }
.field input::placeholder,.field textarea::placeholder{ color:var(--muted); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-bottom-color:var(--coral); }
.field textarea{ resize:vertical; min-height:90px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; gap:0; } }

/* Contact #book — balance the two columns: let the form fill its column height
   so its closing reassurance note bottom-aligns with the info+map column,
   killing the dead whitespace under the form at desktop */
@media (min-width:721px){
  #book .grid-2 > .reveal{ display:flex; flex-direction:column; }
  #book .form-card{ flex:1 1 auto; display:flex; flex-direction:column; }
  #book .form-card form{ flex:1 1 auto; display:flex; flex-direction:column; }
  #book .form-reassure{ margin-top:auto; }
}
.form-reassure{ font-size:13.5px; color:var(--muted); margin-top:20px;
  padding-top:22px; border-top:1px solid var(--rule); }

/* ---------- FAQ (minimal, plus→minus, thin rules) ---------- */
.faq{ max-width:900px; margin:0 auto; border-top:1px solid var(--rule); }
.faq-item{ border-bottom:1px solid var(--rule); }
.faq-q{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:30px 0; cursor:pointer; font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(20px,2.2vw,28px); color:var(--ink); line-height:1.05; }
.faq-q .qm{ position:relative; width:22px; height:22px; flex:none; }
.faq-q .qm::before,.faq-q .qm::after{ content:''; position:absolute; background:var(--coral); border-radius:2px; }
.faq-q .qm::before{ left:0; right:0; top:10px; height:2px; }
.faq-q .qm::after{ top:0; bottom:0; left:10px; width:2px; transition:transform .25s ease; }
.faq-item.open .qm::after{ transform:scaleY(0); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .32s ease; }
.faq-a-inner{ padding:0 0 30px; color:var(--body); font-size:17px; max-width:70ch; }
.faq-a-inner a{ color:var(--coral); font-weight:700; }
.faq-item.open .faq-a{ max-height:360px; }

/* ---------- Contact info (open layout) ---------- */
.contact-block{ }
.contact-block .cb-name{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(28px,3vw,42px); color:var(--ink); margin-bottom:6px; }
.contact-block .cb-sub{ color:var(--muted); margin-bottom:30px; }
.contact-row{ display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:baseline; padding:24px 0; border-top:1px solid var(--rule); }
.contact-row:first-of-type{ border-top:1px solid var(--rule); }
.contact-row .ck{ font-size:11.5px; text-transform:uppercase; letter-spacing:.16em; font-weight:700; color:var(--coral); white-space:nowrap; }
.contact-row .cv{ font-size:19px; font-weight:700; color:var(--ink); }
.contact-row .cv a:hover{ color:var(--coral); }
.map-frame{ overflow:hidden; border:1px solid var(--rule); margin-top:40px; }
.map-frame iframe{ display:block; width:100%; height:100%; border:0; min-height:360px; filter:grayscale(.2) saturate(.9); }

/* ---------- Calm mode ---------- */
.calm-toggle{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-weight:600; font-size:12.5px;
  letter-spacing:.04em; color:var(--ink); background:transparent; border:1px solid var(--rule-strong);
  border-radius:var(--pill); padding:8px 15px; cursor:pointer; white-space:nowrap;
  transition:border-color .2s, color .2s, background .2s;
}
.calm-toggle:hover{ border-color:var(--ink); }
.calm-toggle svg{ width:15px; height:15px; flex:none; }
.calm-toggle[aria-pressed="true"]{ background:var(--coral); border-color:var(--coral); color:#fff; }
body.hero-page .calm-toggle{ color:#fff; border-color:rgba(255,255,255,.35); }
body.hero-page .calm-toggle:hover{ border-color:#fff; }
body.hero-page .calm-toggle[aria-pressed="true"]{ background:var(--coral); border-color:var(--coral); }
.mobile-drawer .calm-toggle{ color:#fff; border-color:rgba(255,255,255,.3); align-self:flex-start; }
/* calm mode freezes everything */
body.calm .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
body.calm .hero-field{ opacity:.4; }
body.calm .hero-hint{ display:none; }
body.calm .ed-photo img,body.calm .ed-row,body.calm .btn,body.calm .link-sweep,body.calm .btn-text{ transition:none !important; }
body.calm .ed-photo:hover img,body.calm .ed-row:hover{ transform:none; padding-left:0; }
@media (max-width:980px){ .calm-toggle .calm-label{ display:none; } .calm-toggle{ padding:8px 11px; } }

/* ---------- Mobile drawer ---------- */
.nav-toggle{
  width:44px; height:44px; border:1px solid var(--rule-strong);
  background:transparent; cursor:pointer; flex-direction:column; gap:5px;
  align-items:center; justify-content:center; margin-left:auto; border-radius:4px;
}
.nav-toggle span{ display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; transition:.2s; }
body.hero-page .nav-toggle{ border-color:rgba(255,255,255,.3); }
body.hero-page .nav-toggle span{ background:#fff; }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobile-drawer{
  position:fixed; inset:78px 0 0; background:var(--navy-900); z-index:49;
  padding:40px; transform:translateY(-12px); opacity:0; pointer-events:none; transition:.24s;
  display:flex; flex-direction:column; gap:8px;
}
.mobile-drawer.open{ opacity:1; transform:none; pointer-events:auto; }
.mobile-drawer a{ color:#fff; font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:36px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.1); line-height:1; }
.mobile-drawer .btn{ margin-top:24px; }

/* ---------- Sticky mobile CTA (slim navy bar) ---------- */
.sticky-cta{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--navy-900); color:#fff; font-family:var(--sans); font-weight:800; font-size:14px;
  letter-spacing:.04em; text-transform:uppercase;
  padding:18px 20px; text-align:center; justify-content:center; align-items:center;
  border-top:2px solid var(--coral);
  padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px));
}
.sticky-cta:active{ background:#000; }
@media (max-width:720px){
  .sticky-cta{ display:flex; }
  body{ padding-bottom:66px; }
}

/* anchor targets clear sticky header */
#waitlist,#book,#faq{ scroll-margin-top:100px; }

/* ---------- Utility bg ---------- */
.bg-cream{ background:var(--cream); }
.bg-cream-2{ background:var(--cream-2); }
.bg-white{ background:var(--white); }

/* ---------- Responsive ---------- */
/* Nav collapses to the hamburger drawer at <=1240px. The desktop nav + CTA row
   (brand + home/program/schedule/blog/get started + calm/phone/Join button) has
   an intrinsic min width of ~1218px, so it is only shown once the viewport can
   fit it without horizontal overflow. Fixes the pre-existing 981px overflow bug
   and accounts for the added "blog" link. 1240px == the container max-width. */
@media (max-width:1240px){
  .nav-links,.nav-cta .btn,.nav-cta .nav-phone{ display:none; }
  .nav-toggle{ display:flex; }
}
@media (max-width:980px){
  .grid-2{ grid-template-columns:1fr; gap:48px; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:36px; }
  .footer-top{ grid-template-columns:1fr; gap:44px; align-items:start; }
  .section{ padding:100px 0; }
  .section--tight{ padding:72px 0; }
  .hero-inner{ padding:110px 0 96px; }
}
@media (max-width:560px){
  body{ font-size:17px; }
  .container{ padding:0 24px; }
  .footer-grid{ grid-template-columns:1fr; }
  .section{ padding:80px 0; }
  .hero-cta .btn{ width:100%; }
  .cta-actions .btn{ width:100%; }
  .page-hero{ padding:90px 0 64px; }
}

/* prefers-reduced-motion — freeze all motion */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .ed-photo img,.ed-row,.btn svg,.link-sweep,.btn-text,.faq-a{ transition:none !important; }
  .ed-photo:hover img{ transform:none !important; }
  .ed-row:hover{ padding-left:0 !important; }
  html{ scroll-behavior:auto; }
}

/* ==============================================================
   KINETIC EMPOWERMENT MOTION LAYER  (v4)
   Powerful staggered word/letter builds — "chaos and clarity".
   All hidden states are scoped to html.js so no-JS keeps content
   fully visible. Every unit is force-revealed under body.calm,
   prefers-reduced-motion, and the JS failsafe (html.motion-fallback).
   Transform + opacity only. Nothing loops. Nothing flashes.
   ============================================================== */

/* ---- Word / letter reveal units (wrapped at runtime by JS) ---- */
.kin-u{ display:inline-block; white-space:normal; }
html.js .kin-u{ opacity:0; transform:translateY(0.85em) scale(.97); will-change:transform,opacity; }
html.js .kin-u.kin-in{
  opacity:1; transform:none;
  transition:opacity .42s ease, transform .56s cubic-bezier(.22,1.4,.36,1);
}

/* ---- Home hero entrance sequence ---- */
/* Initial hidden states apply the moment JS is detected (no flash). */
html.js .hero .coming-badge,
html.js .hero .eyebrow,
html.js .hero .lead,
html.js .hero .hero-cta,
html.js .hero h1,
html.js .hero .hero-rotline{ opacity:0; }
html.js .hero .coming-badge,
html.js .hero .eyebrow{ transform:translateY(-6px); }
html.js .hero .lead,
html.js .hero .hero-cta{ transform:translateY(22px); }
html.js .hero h1{ transform:translateY(30px); }               /* pre-wrap fallback */
html.js .hero .hero-rotline{ transform:translateY(60px) scale(1.16); }

/* Once JS wraps the headline, the h1 box itself is shown and each
   visual line becomes the moving unit. */
html.js .hero h1.hl-armed{ opacity:1; transform:none; }
html.js .hero h1.hl-armed .hl-line{ display:block; opacity:0; transform:translateY(72px) scale(.965); will-change:transform,opacity; }

/* Play — velocity + overshoot, per-element stagger via --d */
html.js .hero.hero-go .coming-badge,
html.js .hero.hero-go .eyebrow,
html.js .hero.hero-go .lead,
html.js .hero.hero-go .hero-cta,
html.js .hero.hero-go h1.hl-armed .hl-line{
  opacity:1; transform:none;
  transition:opacity .46s ease, transform .58s cubic-bezier(.22,1.4,.36,1);
  transition-delay:var(--d,0ms);
}
/* Rotating word lands LAST with the biggest punch */
html.js .hero.hero-go .hero-rotline{
  opacity:1; transform:none;
  transition:opacity .34s ease, transform .62s cubic-bezier(.2,1.6,.3,1);
  transition-delay:var(--d,0ms);
}
/* Coral underline snap under the rotating word */
.hero-rotline span{ position:relative; }
html.js .hero .hero-rotline span::after{
  content:''; position:absolute; left:0; right:0; bottom:-10px; height:5px;
  background:var(--coral); border-radius:2px; transform:scaleX(0); transform-origin:0 50%;
}
html.js .hero.hero-underline .hero-rotline span::after{
  transform:scaleX(1); transition:transform .5s cubic-bezier(.22,1.4,.36,1);
}

/* Instant-show path (calm / reduced / failsafe) */
html.js .hero.hero-ready .coming-badge,
html.js .hero.hero-ready .eyebrow,
html.js .hero.hero-ready .lead,
html.js .hero.hero-ready .hero-cta,
html.js .hero.hero-ready h1,
html.js .hero.hero-ready h1 .hl-line,
html.js .hero.hero-ready .hero-rotline{
  opacity:1 !important; transform:none !important; transition:none !important;
}

/* Reel joins the entrance stagger (between lead and CTA), instant-shown in the ready/calm/reduced path */
html.js .hero .hero-reel{ opacity:0; transform:translateY(20px); }
html.js .hero.hero-go .hero-reel{
  opacity:1; transform:none;
  transition:opacity .46s ease, transform .58s cubic-bezier(.22,1.4,.36,1);
  transition-delay:var(--d,0ms);
}
html.js .hero.hero-ready .hero-reel,
body.calm .hero .hero-reel,
body.calm .hero .hero-reel .reel-rot{
  opacity:1 !important; transform:none !important; transition:none !important; animation:none !important;
}
@media (prefers-reduced-motion: reduce){
  .hero .hero-reel,
  .hero .hero-reel .reel-rot{
    opacity:1 !important; transform:none !important; transition:none !important; animation:none !important;
  }
}
/* Bursts never render in calm / reduced-motion */
body.calm .fl-spark, body.calm .fl-spark-flash{ display:none !important; }
@media (prefers-reduced-motion: reduce){ .fl-spark, .fl-spark-flash{ display:none !important; } }

/* ---- EMPOWERED signature moment ---- */
.empowered-section .container{ text-align:center; }
.empowered-section .eyebrow{ justify-content:center; }
.empowered-word{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(64px,17vw,160px); line-height:.9; letter-spacing:-.01em;
  color:var(--ink); margin:16px 0 30px;
}
.empowered-word .coral{ color:var(--coral); }
.empowered-sub{
  font-family:var(--sans); font-weight:400; color:var(--muted);
  font-size:clamp(17px,1.6vw,21px); line-height:1.55; max-width:42ch; margin:0 auto;
}

/* ---- Carousel slides: one quick staggered rise on scroll-in ---- */
html.js .ed-carousel.kin-arm .ed-slide{ opacity:0; transform:translateY(38px); will-change:transform,opacity; }
html.js .ed-carousel.kin-arm.kin-go .ed-slide{
  opacity:1; transform:none;
  transition:opacity .5s ease, transform .55s cubic-bezier(.22,1.4,.36,1);
  transition-delay:var(--sd,0ms);
}

/* ---- Counter tick (fast rise swap) ---- */
html.js .ed-carousel__counter .cur{ display:inline-block; }
@keyframes flTick{ from{ transform:translateY(-.5em); opacity:.15; } to{ transform:translateY(0); opacity:1; } }

/* ---- Primary CTA hover — decisive scale snap ---- */
.btn-primary{ transition:background .22s ease, color .22s ease, border-color .22s ease, transform .15s ease; }
.btn-primary:hover{ transform:scale(1.03); }

/* ---- JS failsafe: a stalled unit is force-shown by its own class ----
   (.kin-fail is applied per element by JS only if wrapping/observing
   throws — it never freezes healthy below-the-fold reveals) */
.kin-u.kin-fail{ opacity:1 !important; transform:none !important; transition:none !important; }

/* ==============  CALM MODE — hard disable  ============== */
body.calm .kin-u,
body.calm .hero .coming-badge,
body.calm .hero .eyebrow,
body.calm .hero .lead,
body.calm .hero .hero-cta,
body.calm .hero h1,
body.calm .hero h1 .hl-line,
body.calm .hero .hero-rotline,
body.calm .ed-carousel.kin-arm .ed-slide{
  opacity:1 !important; transform:none !important; transition:none !important; animation:none !important;
}
body.calm .hero .hero-rotline span::after{ display:none !important; }
body.calm .ed-carousel__counter .cur{ animation:none !important; }
body.calm .btn-primary{ transition:background .22s ease, color .22s ease, border-color .22s ease; }
body.calm .btn-primary:hover{ transform:none; }

/* ==============  REDUCED MOTION — hard disable  ============== */
@media (prefers-reduced-motion: reduce){
  .kin-u,
  .hero .coming-badge,
  .hero .eyebrow,
  .hero .lead,
  .hero .hero-cta,
  .hero h1,
  .hero h1 .hl-line,
  .hero .hero-rotline,
  .ed-carousel.kin-arm .ed-slide{
    opacity:1 !important; transform:none !important; transition:none !important; animation:none !important;
  }
  .hero .hero-rotline span::after{ display:none !important; }
  .ed-carousel__counter .cur{ animation:none !important; }
  .btn-primary{ transition:background .22s ease, color .22s ease, border-color .22s ease; }
  .btn-primary:hover{ transform:none !important; }
}

/* ==============================================================
   SCROLL-DRIVEN KINETIC EXPERIENCE  (v5)
   Custom cursor · scrub statement · living marquee · monumental
   pillars · photo parallax · EMPOWERED convergence · magnetic CTA.
   Every motion writer gates on html.js and is neutralised under
   body.calm + prefers-reduced-motion. No-JS renders static.
   Transform / opacity / background-color only. Nothing loops in
   place faster than the eye; scroll motion is user-driven.
   ============================================================== */

/* ---- Custom cursor (desktop, pointer:fine, added by JS) — coral spark + soft trail ---- */
.fl-cursor{ position:fixed; top:0; left:0; z-index:9998; pointer-events:none;
  opacity:0; will-change:transform; transition:opacity .25s ease; }
.fl-cursor-spark{ z-index:9999; }
.fl-cursor-spark__i{ display:block; width:18px; height:18px; margin:-9px 0 0 -9px;
  background:var(--coral); filter:drop-shadow(0 0 4px rgba(248,84,60,.5));
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1); will-change:transform; }
.fl-cursor-trail{ width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%; background:var(--coral); }
html.fl-cursor-on .fl-cursor-spark{ opacity:1; }
html.fl-cursor-on .fl-cursor-trail--1{ opacity:.32; }
html.fl-cursor-on .fl-cursor-trail--2{ opacity:.18; }
html.fl-cursor-on .fl-cursor-trail--3{ opacity:.08; }
/* hover over clickables: small playful pop + quarter spin (NOT a big ring) */
html.fl-cursor-on.fl-cursor-hot .fl-cursor-spark__i{ transform:scale(1.4) rotate(45deg); }
/* mousedown: quick shrink */
html.fl-cursor-on.fl-cursor-down .fl-cursor-spark__i{ transform:scale(.72) rotate(45deg); }
html.fl-cursor-on, html.fl-cursor-on *{ cursor:none !important; }
body.calm .fl-cursor{ display:none !important; }
@media (hover:none),(pointer:coarse){ .fl-cursor{ display:none !important; } }

/* ---- Hero: tilt affordance + headline repel ---- */
.tilt-enable{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:3;
  font-family:var(--sans); font-weight:700; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.6); background:transparent; border:1px solid rgba(255,255,255,.28);
  border-radius:var(--pill); padding:9px 16px; cursor:pointer; }
.tilt-enable:hover{ color:#fff; border-color:rgba(255,255,255,.6); }
html.js .hero-field{ will-change:transform; }
body.calm .hero-field{ transform:none !important; }
html.js .hero h1.hl-live .hl-line{ transition:none; will-change:transform; }
body.calm .hero h1 .hl-line{ transform:none !important; }

/* ============ SCENE 2 — SCROLL-SCRUBBED STATEMENT ============ */
/* Default (no-JS / calm / reduced): three stacked static statements */
.scene-scrub{ background:var(--white); }
.scrub-word{ display:block; padding:88px 0; text-align:center; border-bottom:1px solid var(--rule); }
.scene-scrub .scrub-sticky > .scrub-word:last-child{ border-bottom:0; }
.scrub-word .w{ display:block; font-family:var(--display); font-weight:800; text-transform:uppercase;
  line-height:.85; letter-spacing:-.015em; font-size:clamp(60px,15vw,190px); color:var(--ink); }
.scrub-word--2 .w{ color:var(--coral); }
.scrub-word .dot{ color:var(--coral); }
.scrub-sub{ display:block; margin-top:20px; font-family:var(--sans); font-weight:500;
  font-size:clamp(16px,1.6vw,22px); color:var(--muted); text-transform:none; letter-spacing:0; line-height:1.5; }
.scrub-bg{ display:none; }
.scrub-photos, .scrub-tint{ display:none; }

/* Power mode (JS present, motion allowed): sticky scrubbed stage */
html.js .scene-scrub{ position:relative; height:300vh; }
html.js .scrub-sticky{ position:sticky; top:0; height:100vh; overflow:hidden; display:block; }
html.js .scrub-bg{ display:block; position:absolute; inset:0; z-index:0; background-color:#0C1E2E; }
/* Sequenced faded photo backgrounds — cross-faded in lockstep with the words (JS drives opacity + Ken Burns) */
html.js .scrub-photos{ display:block; position:absolute; inset:0; z-index:1; overflow:hidden; }
html.js .scrub-photo{ position:absolute; inset:0; opacity:0; overflow:hidden; will-change:opacity; }
html.js .scrub-photo img{ width:100%; height:100%; object-fit:cover; will-change:transform;
  transform:scale(1.12); transform-origin:50% 45%; }
html.js .scrub-photo--1 img{ object-position:50% 40%; }  /* empower — subject centered */
html.js .scrub-photo--2 img{ object-position:50% 34%; }  /* believe — the two faces sit upper-center */
html.js .scrub-photo--3 img{ object-position:50% 45%; }  /* real community group photo, centered crop */
/* Navy tint so the huge word stays legible over any photo — deeper overall, with a darker
   scrim band through the vertical center where the word sits, so text pops on any photo */
html.js .scrub-tint{ display:block; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(12,30,46,.62) 0%, rgba(12,30,46,.84) 42%, rgba(12,30,46,.84) 58%, rgba(12,30,46,.62) 100%); }
html.js .scrub-word{ position:absolute; inset:0; margin:0; padding:0; border:0; z-index:3; opacity:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  will-change:transform,opacity; transform:translateZ(0) scale(.6); }
/* Crisp white words with a soft dark glow so they separate from any photo; trailing period stays coral */
html.js .scrub-word .w{ line-height:.82; color:#fff;
  text-shadow:0 2px 40px rgba(0,0,0,.55), 0 1px 4px rgba(12,30,46,.5); }
html.js .scrub-word--1 .w{ color:#fff; }
html.js .scrub-word--2 .w{ color:#fff; }
html.js .scrub-word--3 .w{ color:#fff; }
html.js .scrub-word .dot{ color:var(--coral); }
html.js .scrub-word--1 .scrub-sub,
html.js .scrub-word--2 .scrub-sub,
html.js .scrub-word--3 .scrub-sub{ color:var(--cream);
  text-shadow:0 1px 20px rgba(0,0,0,.5); }

/* ============ SCENE 3 — GIANT LIVING MARQUEE ============ */
.scene-marquee{ background:var(--cream); padding:30px 0; overflow:hidden;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.marquee-viewport{ overflow:hidden; }
.marquee-track{ display:flex; align-items:baseline; white-space:nowrap; will-change:transform; }
.marquee-seg{ flex:none; font-family:var(--display); font-weight:800; text-transform:uppercase; line-height:1;
  font-size:clamp(28px,6vh,68px); color:var(--ink); letter-spacing:-.01em; padding-right:.28em; }
.marquee-seg b{ color:var(--coral); font-weight:800; padding:0 .18em; }
.marquee-seg--dup{ display:none; }
html.js .marquee-viewport{ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); }
html.js .marquee-seg--dup{ display:block; }
body.calm .marquee-track{ transform:none !important; }
body.calm .marquee-viewport{ -webkit-mask-image:none; mask-image:none; }
body.calm .marquee-seg--dup{ display:none; }

/* ============ SCENE 4 — MONUMENTAL PILLAR SLIDES ============ */
.ed-slide{ position:relative; overflow:hidden; }
.ed-slide__bignum{ position:absolute; right:-.05em; bottom:-.22em; z-index:0; pointer-events:none;
  font-family:var(--display); font-weight:800; line-height:.7; letter-spacing:-.04em;
  font-size:clamp(150px,30vh,300px); color:var(--coral); opacity:.11; }
.ed-slide > *:not(.ed-slide__bignum){ position:relative; z-index:1; }
@media (min-width:721px){
  .ed-slide{ transition:border-color .3s ease, transform .4s cubic-bezier(.22,1,.36,1); }
  html.js .ed-carousel .ed-slide:hover{ transform:translateY(-9px); border-color:var(--rule-strong); }
}
body.calm .ed-slide:hover{ transform:none !important; }

/* ============ SCENE 5 — WHY-US PHOTO PARALLAX ============ */
html.js .parallax-media{ overflow:hidden; }
html.js .parallax-media img{ transition:none !important; will-change:transform; transform:scale(1.14); }
html.js .parallax-media:hover img{ transform:scale(1.14); }
body.calm .parallax-media img{ transform:none !important; }

/* ============ SCENE 6 — EMPOWERED CONVERGENCE ============ */
.empowered-word .el{ display:inline-block; will-change:transform; }
body.calm .empowered-word .el{ transform:none !important; }

/* ============ SCENE 7 — MAGNETIC CTA ============ */
body.calm .btn-primary{ transform:none !important; }

/* ==============  CALM MODE — hard revert scrub scene to static  ============== */
body.calm .scene-scrub{ height:auto !important; }
body.calm .scrub-sticky{ position:static !important; height:auto !important; overflow:visible !important; display:block !important; }
body.calm .scrub-bg{ display:none !important; }
body.calm .scrub-photos, body.calm .scrub-tint{ display:none !important; }
body.calm .scrub-word{ position:static !important; inset:auto !important; opacity:1 !important; transform:none !important;
  display:block !important; padding:70px 0 !important; border-bottom:1px solid var(--rule); }
body.calm .scene-scrub .scrub-sticky > .scrub-word:last-child{ border-bottom:0; }
body.calm .scrub-word--1 .w{ color:var(--ink); }
body.calm .scrub-word--2 .w{ color:var(--coral); }
body.calm .scrub-word--3 .w{ color:var(--ink); }
body.calm .scrub-word .scrub-sub{ color:var(--muted) !important; }

/* ==============  REDUCED MOTION — hard revert everything to static  ============== */
@media (prefers-reduced-motion: reduce){
  .fl-cursor{ display:none !important; }
  .hero-field{ transform:none !important; }
  .hero h1 .hl-line{ transform:none !important; }
  .scene-scrub{ height:auto !important; }
  .scrub-sticky{ position:static !important; height:auto !important; overflow:visible !important; display:block !important; }
  .scrub-bg{ display:none !important; }
  .scrub-photos, .scrub-tint{ display:none !important; }
  .scrub-word{ position:static !important; inset:auto !important; opacity:1 !important; transform:none !important;
    display:block !important; padding:70px 0 !important; border-bottom:1px solid var(--rule); }
  .scene-scrub .scrub-sticky > .scrub-word:last-child{ border-bottom:0; }
  .scrub-word--1 .w{ color:var(--ink); }
  .scrub-word--2 .w{ color:var(--coral); }
  .scrub-word--3 .w{ color:var(--ink); }
  .scrub-word .scrub-sub{ color:var(--muted) !important; }
  .marquee-track{ transform:none !important; }
  .marquee-viewport{ -webkit-mask-image:none; mask-image:none; }
  .marquee-seg--dup{ display:none !important; }
  .ed-slide:hover{ transform:none !important; }
  .parallax-media img{ transform:none !important; }
  .empowered-word .el{ transform:none !important; }
  .btn-primary{ transform:none !important; }
}

/* ============================================================
   SCENE 4 — THE MIND LIGHTS UP  (brain key-visual + colour-tied pillars)
   The one deliberate VIBRANT burst of the site. Coral stays anchor;
   amber / teal / violet / green / blue join only inside this scene.
   ============================================================ */
:root{
  --b-coral:#F8543C; --b-amber:#F6A821; --b-teal:#12B5A5;
  --b-violet:#7C5CFF; --b-green:#38C172; --b-blue:#2E9BFF;
}
.pillars-scene{ position:relative; overflow:hidden; background:var(--white); }
.pillars-aura{
  position:absolute; left:50%; top:34%; width:min(1100px,120%); height:760px;
  transform:translate(-50%,-50%); pointer-events:none; z-index:0; opacity:.7;
  background:
    radial-gradient(38% 42% at 42% 40%, rgba(248,84,60,.14), transparent 70%),
    radial-gradient(34% 40% at 60% 52%, rgba(124,92,255,.13), transparent 72%),
    radial-gradient(40% 44% at 50% 66%, rgba(18,181,165,.11), transparent 72%);
}
.pillars-scene .container{ position:relative; z-index:1; }
.eyebrow-spectrum{
  background:linear-gradient(90deg,var(--b-coral),var(--b-amber) 26%,var(--b-teal) 52%,var(--b-violet) 74%,var(--b-blue));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--b-coral);
}

/* ---- Brain stage ---- */
.brain-figure{ margin:0 auto 64px; max-width:820px; }
.brain-stage{
  position:relative; width:100%; aspect-ratio:7/5; border-radius:26px; overflow:hidden;
  background:radial-gradient(120% 120% at 46% 40%, #14304a 0%, #0C1E2E 60%, #081521 100%);
  box-shadow:0 30px 80px -34px rgba(8,21,33,.65), inset 0 0 0 1px rgba(255,255,255,.05);
}
@media (max-width:640px){ .brain-stage{ aspect-ratio:5/5; border-radius:20px; } }
.brain-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:manipulation; }
.brain-fallback{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.brain-fallback .bf-fill{ stroke:none; }
.brain-fallback .bf-skull{ fill:none; stroke:rgba(252,248,241,.58); stroke-width:2.6; }
.brain-fallback .bf-skull--head{ stroke:rgba(252,248,241,.66); stroke-width:3; }
.brain-fallback .bf-lines{ stroke:rgba(255,255,255,.3); }
.brain-fallback .bf-nodes circle{ filter:drop-shadow(0 0 6px currentColor); }
/* JS present -> canvas paints, hide the static SVG. No-JS -> SVG shows, hide canvas. */
html.js .brain-fallback{ display:none; }
html:not(.js) .brain-canvas{ display:none; }
body.calm .brain-stage{ box-shadow:0 20px 60px -34px rgba(8,21,33,.5), inset 0 0 0 1px rgba(255,255,255,.05); }

/* ============================================================
   COLOUR-TIED PILLAR GALLERY — full-bleed, draggable, depth-of-field.
   One system that DEGRADES: live (html.js + .pg-live) gets drag-inertia,
   depth focus, tilt + parallax; calm / reduced-motion / no-JS collapse to
   a clean static grid. Each card owns its spectrum colour via --pc and
   keeps data-pillar so it lights its cluster inside the brain above.
   ============================================================ */
.pillar-gallery{
  position:relative; width:100%; margin-top:clamp(30px,4.5vw,64px);
  --pcw:min(82vw,360px); --pch:clamp(400px,64vh,560px); --pg-blur:3px;
}
@media (min-width:721px){
  .pillar-gallery{ --pcw:clamp(360px,42vw,540px); --pch:clamp(420px,64vh,640px); --pg-blur:5px; }
}
.pg-track{
  list-style:none; margin:0;
  display:flex; align-items:stretch;
  gap:clamp(18px,2.4vw,44px);
  overflow-x:auto; overflow-y:hidden;
  padding:16px calc(50% - var(--pcw)/2) 10px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none;
  cursor:grab;
}
.pg-track::-webkit-scrollbar{ display:none; width:0; height:0; }
.pg-track.is-dragging{ cursor:grabbing; }
.pg-track.pg-anim{ scroll-snap-type:none; }

.pcard{
  flex:0 0 var(--pcw); width:var(--pcw); height:var(--pch);
  scroll-snap-align:center; perspective:1100px; outline:none;
}
.pcard:focus-visible{ outline:2px solid var(--coral); outline-offset:6px; border-radius:26px; }
.pcard__depth{ position:relative; height:100%; transform-origin:center center; }
.pcard__inner{
  --pcard-pad:clamp(28px,3vw,46px);
  position:relative; height:100%;
  display:flex; flex-direction:column; justify-content:flex-start;
  padding:var(--pcard-pad);
  border:1px solid var(--rule); border-radius:22px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--pc,var(--coral)) 6%, var(--white)) 0%, var(--white) 60%);
  overflow:hidden; transform-style:preserve-3d;
  box-shadow:0 30px 70px -50px rgba(12,30,46,.5);
}
/* purpose-shot scene photo banding the top of each card */
.pcard__media{
  margin:calc(-1*var(--pcard-pad)) calc(-1*var(--pcard-pad)) clamp(16px,2vw,24px);
  flex:0 0 auto; height:clamp(150px,24vh,224px);
  overflow:hidden; position:relative; z-index:1;
  border-radius:21px 21px 0 0;
  background:color-mix(in srgb, var(--pc,var(--coral)) 12%, #0C1E2E);
}
.pcard__media img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; display:block; }
.pcard__inner::before{ content:""; position:absolute; left:0; top:0; height:5px; width:100%; background:var(--pc,var(--coral)); opacity:.92; z-index:2; }
.pcard__bignum{
  position:absolute; right:-.04em; bottom:-.20em; z-index:0; pointer-events:none;
  font-family:var(--display); font-weight:800; line-height:.7; letter-spacing:-.04em;
  font-size:clamp(190px,34vh,330px);
  color:color-mix(in srgb, var(--pc,var(--coral)) 16%, transparent);
}
.pcard__accent{
  position:absolute; z-index:0; pointer-events:none; top:13%; right:11%;
  width:clamp(96px,12vw,150px); height:clamp(96px,12vw,150px); border-radius:50%;
  background:radial-gradient(circle at 40% 38%, var(--pc,var(--coral)), transparent 68%);
  opacity:.22; filter:blur(2px);
}
.pcard__num, .pcard h3, .pcard__desc{ position:relative; z-index:1; }
.pcard__num{
  font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:.16em;
  color:var(--pc,var(--coral)); white-space:nowrap; margin-bottom:18px;
  display:flex; align-items:center; gap:9px;
}
.pcard__num::before{
  content:""; width:9px; height:9px; border-radius:50%; background:var(--pc,var(--coral));
  box-shadow:0 0 12px 2px color-mix(in srgb, var(--pc,var(--coral)) 55%, transparent);
}
.pcard h3{ font-size:clamp(28px,3vw,44px); line-height:1.02; margin:0 0 14px; }
.pcard__desc{ font-size:clamp(15px,1.3vw,18px); color:var(--body); margin:0; max-width:34ch; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }

/* ---- LIVE motion (only when JS is up and the gallery is engaged) ---- */
html.js .pillar-gallery.pg-live .pcard__depth{
  transform:scale(var(--f-scale,1)) rotateY(var(--f-tilt,0deg));
  opacity:var(--f-op,1); filter:blur(var(--f-blur,0px));
  will-change:transform,opacity,filter;
}
html.js .pillar-gallery.pg-live .pcard__inner{
  transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translate3d(var(--mx,0px),var(--my,0px),0) scale(var(--press,1));
  transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease;
}
html.js .pillar-gallery.pg-live .pcard.is-focus .pcard__inner{
  border-color:color-mix(in srgb, var(--pc,var(--coral)) 55%, transparent);
  box-shadow:0 40px 90px -46px color-mix(in srgb, var(--pc,var(--coral)) 75%, transparent);
}
/* parallax layers (3): bignum deep, accent counter, content subtle */
html.js .pillar-gallery.pg-live .pcard__bignum{ transform:translate3d(calc(var(--px,0)*24px), calc(var(--py,0)*18px),0); }
html.js .pillar-gallery.pg-live .pcard__accent{ transform:translate3d(calc(var(--px,0)*-16px), calc(var(--py,0)*-12px),0); }
html.js .pillar-gallery.pg-live .pcard__num,
html.js .pillar-gallery.pg-live .pcard h3{ transform:translate3d(calc(var(--px,0)*7px), calc(var(--py,0)*5px),0); }
html.js .pillar-gallery.pg-live .pcard:active .pcard__inner{ --press:.985; }
/* Touch devices: keep depth-focus + snap, drop tilt/parallax/magnetism */
@media (hover:none){
  html.js .pillar-gallery.pg-live .pcard__inner,
  html.js .pillar-gallery.pg-live .pcard__bignum,
  html.js .pillar-gallery.pg-live .pcard__accent,
  html.js .pillar-gallery.pg-live .pcard__num,
  html.js .pillar-gallery.pg-live .pcard h3{ transform:none; }
}

/* ---- Controls (contained) ---- */
.pg-controls{ display:flex; align-items:center; gap:clamp(16px,2.4vw,28px); margin-top:clamp(22px,2.6vw,34px); }
.pg-cue{ display:inline-flex; align-items:center; gap:9px; margin:0; white-space:nowrap;
  font-family:var(--sans); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.pg-cue__ic{ display:inline-flex; color:var(--coral); }
.pg-cue__ic svg{ width:18px; height:18px; }
.pg-counter{ font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:.16em; color:var(--coral); white-space:nowrap; }
html.js .pg-counter .cur{ display:inline-block; }
.pg-progress{ flex:1; min-width:60px; height:2px; border-radius:2px; background:var(--rule); position:relative; }
.pg-bar{ position:absolute; left:0; top:0; height:2px; border-radius:2px; background:var(--coral); width:0; transition:width .2s ease; }
.pg-nav{ display:flex; gap:10px; }
.pg-arrow{ width:48px; height:48px; border:1px solid var(--rule-strong); background:transparent; color:var(--ink);
  border-radius:50%; cursor:pointer; flex:none; display:inline-flex; align-items:center; justify-content:center;
  transition:border-color .2s ease, color .2s ease, background .2s ease, transform .15s ease; }
.pg-arrow svg{ width:18px; height:18px; }
.pg-arrow:hover:not(:disabled){ border-color:var(--ink); }
.pg-arrow:active:not(:disabled){ transform:scale(.94); }
.pg-arrow:disabled{ opacity:.28; cursor:default; }
.pg-arrow:focus-visible{ outline:2px solid var(--coral); outline-offset:3px; }
@media (max-width:520px){ .pg-cue{ display:none; } }

/* ---- STATIC FALLBACK: calm mode / reduced-motion / no-JS ---- */
body.calm .pg-track,
html:not(.js) .pg-track{
  display:grid; grid-template-columns:1fr; gap:20px;
  overflow:visible; padding:0; scroll-snap-type:none; cursor:auto;
}
body.calm .pcard,
html:not(.js) .pcard{ width:auto; height:auto; perspective:none; }
body.calm .pcard__inner,
html:not(.js) .pcard__inner{ justify-content:flex-start; min-height:210px; }
body.calm .pcard__depth,
html:not(.js) .pcard__depth{ transform:none !important; opacity:1 !important; filter:none !important; }
body.calm .pg-controls,
html:not(.js) .pg-controls{ display:none; }
@media (min-width:760px){
  body.calm .pg-track,
  html:not(.js) .pg-track{ grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .pg-track{ display:grid; grid-template-columns:1fr; gap:20px; overflow:visible; padding:0; scroll-snap-type:none; cursor:auto; }
  .pcard{ width:auto; height:auto; perspective:none; }
  .pcard__inner{ justify-content:flex-start; min-height:210px; transition:none !important; }
  .pcard__depth{ transform:none !important; opacity:1 !important; filter:none !important; }
  .pcard__bignum, .pcard__accent, .pcard__num, .pcard h3{ transform:none !important; }
  .pg-controls{ display:none; }
}
@media (prefers-reduced-motion: reduce) and (min-width:760px){
  .pg-track{ grid-template-columns:1fr 1fr; }
}
body.calm .pillars-aura{ opacity:.4; }

/* ============================================================
   SCENE 4 — RECREATED: asymmetric / editorial key-visual.
   The head is anchored large off-axis (left, bleeding off-edge,
   cropped by the section) and the colourful mind-energy escapes the
   silhouette and flows across the scene INTO the five pillars on the
   right. Headline + carousel are arranged around the oversized brain.
   ============================================================ */
.pillars-scene{
  background:
    radial-gradient(120% 90% at 8% 14%, rgba(248,84,60,.05), transparent 60%),
    linear-gradient(180deg,#FFFDFB 0%, var(--cream) 100%);
}
.pillars-layout{ position:relative; z-index:1; }
.pillars-head{ max-width:34ch; margin:0 auto 40px; text-align:center; }
.pillars-head h2{ margin-bottom:.32em; }
.pillars-more{ margin-top:clamp(40px,5vw,64px); }

/* Soft multicolour "spill" band — the mind's energy pooling out of the
   head and pooling under the pillars. Static, decorative, cheap. */
.pillars-spill{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(46% 40% at 30% 34%, rgba(124,92,255,.10), transparent 70%),
    radial-gradient(50% 46% at 66% 60%, rgba(18,181,165,.09), transparent 72%),
    radial-gradient(40% 40% at 82% 30%, rgba(246,168,33,.08), transparent 72%);
  opacity:.9;
}
body.calm .pillars-spill{ opacity:.45; filter:saturate(.7); }

/* ---- Brain + headline HERO band (contained; must not steal card space) ---- */
.pillars-hero{ position:relative; }
.brain-figure{ margin:0 auto; max-width:560px; }
.brain-stage{ aspect-ratio:1/1; }
@media (max-width:980px){
  .brain-figure{ width:auto; max-width:520px; margin:0 auto; }
  .pillars-head{ max-width:34rem; }
}
@media (min-width:981px){
  .pillars-hero{
    display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    gap:clamp(36px,4vw,72px); align-items:center;
  }
  .pillars-head{ grid-column:1; text-align:left; margin:0; max-width:none; }
  .pillars-head h2{ font-size:clamp(42px,4.4vw,72px); line-height:.94; text-wrap:balance; max-width:16ch; }
  .brain-figure{ grid-column:2; max-width:none; width:100%; margin:0; }
  .brain-stage{ aspect-ratio:7/6; }
}

/* ============================================================
   PART B — SITEWIDE FADED AMBIENT SYSTEM
   Kills the white: warm section tints + soft radial "aura" blobs drawn
   from the neurodiversity spectrum. Decorative, static, low-opacity,
   behind all content, never touching text contrast. Pure CSS gradients.
   ============================================================ */
.has-aura{ position:relative; }
.has-aura > .container{ position:relative; z-index:1; }
.sec-aura{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.sec-aura .aura{
  position:absolute; left:var(--x,50%); top:var(--y,50%);
  width:var(--s,520px); height:var(--s,520px);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, var(--ac,rgba(248,84,60,.12)), transparent 68%);
}
.aura--coral { --ac:rgba(248,84,60,.13); }
.aura--amber { --ac:rgba(246,168,33,.12); }
.aura--teal  { --ac:rgba(18,181,165,.12); }
.aura--violet{ --ac:rgba(124,92,255,.11); }
.aura--green { --ac:rgba(56,193,114,.11); }
.aura--blue  { --ac:rgba(46,155,255,.11); }
/* On the dark conversion blocks: screen-blend so the same colours read as
   a gentle glow rather than mud. Falls back to normal where unsupported. */
.dark-block .sec-aura{ mix-blend-mode:screen; }
.dark-block .aura--coral { --ac:rgba(248,84,60,.20); }
.dark-block .aura--amber { --ac:rgba(246,168,33,.16); }
.dark-block .aura--teal  { --ac:rgba(18,181,165,.18); }
.dark-block .aura--violet{ --ac:rgba(124,92,255,.18); }
.dark-block .aura--blue  { --ac:rgba(46,155,255,.16); }

/* Warm / tinted section backgrounds — replace stark white with faint
   washes so the page rhythm alternates warmth instead of white->white. */
.bg-warm      { background:linear-gradient(180deg,#FFFDFB 0%, #FBF6EE 100%); }
.bg-tint-coral{ background:linear-gradient(180deg,#FFF9F7 0%, #FBF2EE 100%); }
.bg-tint-teal { background:linear-gradient(180deg,#F5FBFA 0%, #FBF7F1 100%); }
.bg-tint-amber{ background:linear-gradient(165deg,#FFFCF4 0%, #FBF5EA 100%); }
.bg-tint-violet{ background:linear-gradient(180deg,#FAF9FF 0%, #F6F2FB 100%); }
/* Warm the inner-page heroes too */
.page-hero.has-aura{ background:linear-gradient(180deg,#FFFDFB 0%, #FCF7F0 100%); }

/* Faded elements are purely decorative and already motionless; nothing to
   freeze under calm/reduced-motion. Kept explicit for intent. */
body.calm .sec-aura, body.calm .pillars-spill{ animation:none !important; }
@media (prefers-reduced-motion: reduce){
  .sec-aura, .pillars-spill{ animation:none !important; }
}


/* ============================================================
   PART C — VISIBLE FADED BRAND WATERMARKS (v13)
   Giant ghosted FL shields + oversized outlined typographic marks, faded into
   every section BEHIND the content. Reuses the shield geometry as an inline
   data-URI. Hosted inside the already-clipped decorative layers (.sec-aura /
   .pillars-spill are inset:0; overflow:hidden) so the marks bleed off the
   section edges WITHOUT ever causing horizontal page scroll. Purely
   decorative, pointer-events:none, static (nothing to gate for calm/reduced).
   Sits over the warm tint + aura blobs, under the content (container is z-index:1).
   ============================================================ */
.sec-aura::before, .pillars-spill::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  --wm:clamp(560px,60vw,1040px);
  width:var(--wm); height:calc(var(--wm) * 1.09);
  right:-14%; top:-22%;
  background:no-repeat center/contain;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20200%20218'%3E%3Cpath%20d%3D'M100%2012%20L171%2053%20L160%20150%20L100%20206%20L40%20150%20L29%2053%20Z'%20fill%3D'none'%20stroke%3D'%230C1E2E'%20stroke-width%3D'7'%20stroke-linejoin%3D'round'%2F%3E%3Cg%20transform%3D'translate(2%202)%20skewX(-11)'%3E%3Cpath%20fill%3D'%230C1E2E'%20d%3D'M62%2072%20L120%2072%20L118%2087%20L79%2087%20L79%20103%20L109%20103%20L107%20117%20L79%20117%20L79%20156%20L60%20156%20Z'%2F%3E%3Cpath%20fill%3D'%230C1E2E'%20d%3D'M97%2080%20L116%2080%20L116%20141%20L151%20141%20L151%20157%20L97%20157%20Z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  opacity:.07; transform:rotate(12deg);
}
.sec-aura::after{
  content:"FLOW"; position:absolute; z-index:0; pointer-events:none;
  left:-2.5vw; bottom:-9%; white-space:nowrap;
  font-family:var(--display); font-weight:800; font-size:min(30vw,340px);
  line-height:.78; letter-spacing:-.01em; text-transform:uppercase;
  color:transparent; -webkit-text-stroke:2px rgba(12,30,46,.05);
}
/* Browsers without text-stroke: a faint solid fill instead of an outline */
@supports not ((-webkit-text-stroke:1px red) or (text-stroke:1px red)){
  .sec-aura::after{ color:rgba(12,30,46,.035); }
  .dark-block .sec-aura::after{ color:rgba(255,255,255,.04); }
  .pillars-spill::after{ color:rgba(12,30,46,.035); }
}
/* Alternate the placement so the marks do not sit in the same corner every section */
.has-aura:nth-of-type(even) .sec-aura::before{
  right:auto; left:-15%; top:auto; bottom:-24%; transform:rotate(-15deg);
}
.has-aura:nth-of-type(even) .sec-aura::after{
  left:auto; right:-2.5vw; bottom:auto; top:-7%;
}
/* Dark conversion blocks: ghost the shield in cream so it reads on navy; drop the
   big word so the schedule/CTA copy stays clean (lightest touch on dark). */
.dark-block .sec-aura::before{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20200%20218'%3E%3Cpath%20d%3D'M100%2012%20L171%2053%20L160%20150%20L100%20206%20L40%20150%20L29%2053%20Z'%20fill%3D'none'%20stroke%3D'%23FBF6EE'%20stroke-width%3D'7'%20stroke-linejoin%3D'round'%2F%3E%3Cg%20transform%3D'translate(2%202)%20skewX(-11)'%3E%3Cpath%20fill%3D'%23FBF6EE'%20d%3D'M62%2072%20L120%2072%20L118%2087%20L79%2087%20L79%20103%20L109%20103%20L107%20117%20L79%20117%20L79%20156%20L60%20156%20Z'%2F%3E%3Cpath%20fill%3D'%23FBF6EE'%20d%3D'M97%2080%20L116%2080%20L116%20141%20L151%20141%20L151%20157%20L97%20157%20Z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); opacity:.09;
}
.dark-block .sec-aura::after{ display:none; }
/* Conversion island (interest-list form / contact booking): lightest touch. */
#waitlist .sec-aura::after, #book .sec-aura::after{ display:none; }
#waitlist .sec-aura::before, #book .sec-aura::before{ opacity:.05; }
/* Pillars scene: shield (::before) + a giant outlined section numeral (::after) */
.pillars-spill::after{
  content:"05"; position:absolute; z-index:0; pointer-events:none;
  right:-1vw; bottom:-16%;
  font-family:var(--display); font-weight:800; font-size:min(34vw,420px);
  line-height:.72; letter-spacing:-.02em;
  color:transparent; -webkit-text-stroke:2px rgba(12,30,46,.045);
}
.pillars-spill::before{ opacity:.06; }
/* Static marks — nothing animates, but kept explicit for intent. */
body.calm .sec-aura::before, body.calm .sec-aura::after,
body.calm .pillars-spill::before, body.calm .pillars-spill::after{ animation:none !important; }