/* ============================================================
   TERAMERGE — CANOPY (home) · cinematic scrolling narrative
   Section 1 = NAME ONLY. Sections 2–7 = the approved copy, each
   composed to fit inside ONE viewport frame (2-column text+visual
   where content is heavy). Forest video stays as the fixed theme.
   ============================================================ */
:root{
  --bone:#F1ECE2; --bone-soft:rgba(241,236,226,0.82); --bone-faint:rgba(241,236,226,0.5);
  --ink:8,11,9; --signal:201,212,181; --ember:232,201,154; --edge:rgba(236,230,218,0.14);
  --pad:clamp(1.4rem,5vw,6rem);
  --s-name:clamp(2.3rem,5.6vw,4.9rem);   /* matches Bloom's "Teramerge Intelligence" — same size on every first section */
  --s-hero:clamp(1.75rem,3.1vw,2.7rem);
  --s-lg:clamp(1.4rem,2.6vw,2.15rem);
  --fs-lead:clamp(0.95rem,1.15vw,1.12rem);
  --fs-label:clamp(0.74rem,0.95vw,0.88rem);
  --ease:cubic-bezier(0.22,1,0.36,1);
  --sans:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--sans); color:var(--bone); background:#05070a;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; }

/* ---------- fixed forest environment (theme) ---------- */
.env{ position:fixed; inset:0; z-index:0; overflow:hidden; background:#05070a; }
.env__inner{ position:absolute; inset:-4%; transform:scale(1.04); transform-origin:50% 46%; will-change:transform; }
.env__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(0.6) saturate(1.02); }
.env__grade{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(5,7,10,0.55) 0%, rgba(5,7,10,0.16) 22%, rgba(5,7,10,0.26) 68%, rgba(5,7,10,0.74) 100%); }

/* ---------- boot ---------- */
.boot{ position:fixed; inset:0; z-index:60; display:grid; place-items:center; background:#05070a;
  transition:opacity .8s var(--ease), visibility .8s; }
.boot.done{ opacity:0; visibility:hidden; }
.boot__m{ font-size:0.7rem; letter-spacing:0.5em; text-transform:uppercase; color:var(--bone-soft); }

/* ---------- chrome ---------- */
.progress{ position:fixed; top:0; left:0; height:2px; width:100%; z-index:30; transform-origin:left; transform:scaleX(0);
  background:linear-gradient(90deg, rgba(var(--signal),0.9), rgba(var(--ember),0.9)); }
.nav{ position:fixed; inset:0 0 auto 0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  padding:clamp(0.9rem,2vw,1.5rem) var(--pad); pointer-events:none; }
.nav__brand{ pointer-events:auto; display:flex; align-items:center; gap:0.55rem; text-decoration:none;
  font-size:var(--fs-label); letter-spacing:0.34em; text-transform:uppercase; font-weight:600; color:var(--bone);
  text-shadow:0 1px 16px rgba(0,0,0,0.7); }
.nav__brand .dot{ width:5px; height:5px; border-radius:50%; background:rgba(var(--signal),0.98); box-shadow:0 0 12px rgba(var(--signal),0.7); }
.nav__name{ color:var(--bone); letter-spacing:0.24em; }   /* match the nav links */
.nav__ai{ color:#e9c46a; }
.nav__mark{ filter:drop-shadow(0 1px 6px rgba(0,0,0,0.5)); }
.nav__links{ display:flex; align-items:center; gap:clamp(0.7rem,1.6vw,1.4rem); }
.nav__link{ pointer-events:auto; position:relative; text-decoration:none; font-size:var(--fs-label);
  letter-spacing:0.24em; text-transform:uppercase; font-weight:500; color:var(--bone-faint);
  text-shadow:0 1px 14px rgba(0,0,0,0.7); transition:color .3s var(--ease); white-space:nowrap; }
.nav__link:hover, .nav__link.is-active{ color:var(--bone); }
.nav__link.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:-0.5em; height:1px; background:rgba(var(--signal),0.9); }

/* Montfort section index */
.secindex{ position:fixed; right:var(--pad); bottom:clamp(1rem,3.5vh,2rem); z-index:20; text-align:right;
  pointer-events:none; text-shadow:0 1px 14px rgba(0,0,0,0.7); }
.secindex__name{ display:block; font-size:var(--fs-label); letter-spacing:0.26em; text-transform:uppercase; color:var(--bone-soft); }
.secindex__no{ font-size:1.4rem; font-weight:200; letter-spacing:0.06em; color:var(--bone); font-variant-numeric:tabular-nums; }
.secindex__no em{ font-style:normal; font-size:0.66rem; color:var(--bone-faint); letter-spacing:0.2em; }

/* ---------- sections — each composed to fit one viewport ---------- */
main{ position:relative; z-index:2; }
.hsec{ position:relative; min-height:100vh; display:flex; align-items:center;
  padding:clamp(4.25rem,9vh,6rem) var(--pad) clamp(2rem,5vh,3.5rem); }
.hwrap{ position:relative; width:100%; max-width:min(1180px,92vw); margin:0 auto; }
/* CINEMATIC GRADIENT — the forest stays sharp; a soft dark pool feathers in
   behind the reading area only (no blur, no hard panel edge). */
.scrim{ position:absolute; z-index:-1; pointer-events:none; filter:blur(44px); }
.scrim--l{ left:-8%; top:50%; transform:translateY(-50%); width:min(900px,88vw); height:min(720px,86vh);
  background:radial-gradient(58% 60% at 40% 50%, rgba(var(--ink),0.82) 0%, rgba(var(--ink),0.56) 40%, rgba(var(--ink),0.22) 60%, rgba(var(--ink),0) 74%); }
.scrim--c{ left:50%; top:50%; transform:translate(-50%,-50%); width:min(1100px,95vw); height:min(760px,88vh);
  background:radial-gradient(54% 56% at 50% 50%, rgba(var(--ink),0.8) 0%, rgba(var(--ink),0.54) 40%, rgba(var(--ink),0.2) 60%, rgba(var(--ink),0) 74%); }

/* two-column composition (text | visual) */
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.8rem,4vw,4rem); align-items:center; width:100%; }
.split--textwide{ grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr); }

/* SPLIT COMPOSITION — content lives on a solid dark editorial panel on the
   left; the forest stays full and cinematic on the right. Nothing floats
   over the bright forest, so every word is readable. The panel's right edge
   feathers into the forest (no hard card). */
.hsec--split .hwrap{ margin:0; max-width:min(600px,54vw); }
.panel{ position:absolute; top:0; bottom:0; left:0; width:min(60vw,820px); z-index:-1; pointer-events:none;
  background:linear-gradient(100deg, rgba(var(--ink),0.94) 0%, rgba(var(--ink),0.9) 48%, rgba(var(--ink),0.66) 74%, rgba(var(--ink),0) 100%); }
@media (max-width:900px){
  .hsec--split .hwrap{ max-width:100%; }
  .panel{ width:100%; background:linear-gradient(180deg, rgba(var(--ink),0.55) 0%, rgba(var(--ink),0.82) 30%, rgba(var(--ink),0.82) 100%); }
}

/* CENTERED / AIRY COMPOSITION — one headline + one horizontal pictograph,
   generous space, forest breathing top & bottom (no left-side "dump"). */
.hsec--center .hwrap{ margin:0 auto; text-align:center; max-width:min(1120px,93vw); }
.scrim--band{ left:50%; top:50%; transform:translate(-50%,-50%); width:min(1340px,98vw); height:min(660px,78vh);
  background:radial-gradient(56% 56% at 50% 50%, rgba(var(--ink),0.8) 0%, rgba(var(--ink),0.58) 36%, rgba(var(--ink),0.26) 58%, rgba(var(--ink),0) 78%); }
.hsec--center .eyebrow{ display:block; }
.hsec--center .lead, .hsec--center .pull{ margin-left:auto; margin-right:auto; }
.hsec--center .pull{ border-left:0; padding-left:0; text-align:center; }
/* horizontal icon row (replaces the vertical stacked list) */
.flow.flow--row{ display:flex; justify-content:center; align-items:flex-start; gap:clamp(1.4rem,3.6vw,3.6rem);
  flex-wrap:wrap; margin-top:clamp(1.4rem,3.5vh,2.6rem); }
.flow.flow--row .step{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:0.7rem; max-width:190px; }
.flow.flow--row .step__t{ display:flex; flex-direction:column; gap:0.25rem; }
.flow.flow--row .step__name{ line-height:1.14; }
.pflow{ justify-content:center; margin-left:auto; margin-right:auto; }
.poutcomes{ justify-content:center; }
.beats{ justify-content:center; }

/* ---------- shared: chips, labeled two-column groups, "two doors" ---------- */
.chiprow{ display:flex; flex-wrap:wrap; justify-content:center; gap:0.5rem 0.6rem; margin-top:clamp(1rem,2.4vh,1.6rem); }
.chip{ font-size:clamp(0.78rem,1.1vw,0.95rem); font-weight:400; color:var(--bone); padding:0.35rem 0.9rem; border-radius:24px;
  border:1px solid rgba(var(--signal),0.32); background:rgba(var(--ink),0.3); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.chip--accent{ border-color:rgba(var(--ember),0.5); color:rgba(var(--ember),0.98); }
.chiprow__sub{ width:100%; text-align:center; font-size:0.6rem; letter-spacing:0.24em; text-transform:uppercase; color:var(--bone-faint); margin-bottom:0.2rem; }
.twocol{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.6rem,4vw,3.4rem); margin-top:clamp(1.4rem,3.5vh,2.4rem); text-align:left; }
.grp__h{ font-size:0.62rem; letter-spacing:0.22em; text-transform:uppercase; color:rgba(var(--signal),0.95); margin-bottom:0.7rem; }
.grp__list{ list-style:none; display:grid; gap:0.5rem; }
.grp__list li{ position:relative; padding-left:1.2rem; font-size:clamp(0.85rem,1vw,0.98rem); color:var(--bone-soft); line-height:1.42; }
.grp__list li::before{ content:""; position:absolute; left:0; top:0.55rem; width:6px; height:6px; border-radius:50%; background:rgba(var(--signal),0.85); }
.grp__list li b{ color:var(--bone); font-weight:600; }
.doors{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.2rem,2.5vw,2rem); margin-top:clamp(1.4rem,3.5vh,2.4rem); text-align:left; }
.door{ padding:clamp(1.2rem,2.2vw,1.8rem); border-radius:14px; border:1px solid rgba(var(--signal),0.2);
  background:linear-gradient(160deg, rgba(var(--ink),0.46), rgba(var(--ink),0.24)); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.door__k{ font-size:clamp(1rem,1.6vw,1.35rem); font-weight:600; color:var(--bone); }
.door__k span{ display:block; font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase; color:rgba(var(--signal),0.9); margin-top:0.25rem; font-weight:500; }
.door__list{ list-style:none; display:grid; gap:0.4rem; margin:0.8rem 0 1.1rem; }
.door__list li{ position:relative; padding-left:1.1rem; font-size:0.88rem; color:var(--bone-soft); line-height:1.42; }
.door__list li::before{ content:""; position:absolute; left:0; top:0.5rem; width:5px; height:5px; border-radius:50%; background:rgba(var(--signal),0.8); }
/* checklist (already-answered diligence, etc.) */
.checks{ list-style:none; display:grid; gap:0.6rem; max-width:min(560px,90%); margin:clamp(1.4rem,3.5vh,2.4rem) auto 0; text-align:left; }
.checks li{ position:relative; padding-left:1.9rem; font-size:clamp(0.9rem,1.1vw,1.05rem); color:var(--bone); line-height:1.4; }
.checks li::before{ content:"\2713"; position:absolute; left:0; top:0.05rem; color:rgba(var(--signal),0.98); font-weight:700; }
@media (max-width:820px){ .twocol, .doors{ grid-template-columns:1fr; } }

/* ---------- type ---------- */
.eyebrow{ display:inline-block; font-size:var(--fs-label); letter-spacing:0.4em; text-transform:uppercase; font-weight:600;
  color:rgba(var(--signal),0.95); text-shadow:0 1px 12px rgba(0,0,0,0.7); }
.statement{ font-weight:300; letter-spacing:0.01em; line-height:1.12; color:var(--bone); text-shadow:0 1px 40px rgba(0,0,0,0.6),0 1px 8px rgba(0,0,0,0.5); text-wrap:balance; }
.s-hero{ font-size:var(--s-hero); font-weight:300; line-height:1.08; }
.s-lg{ font-size:var(--s-lg); }
.statement .sig{ color:rgba(var(--signal),0.98); }
.lead{ font-size:var(--fs-lead); line-height:1.6; font-weight:400; color:var(--bone-soft); max-width:54ch;
  text-shadow:0 1px 14px rgba(0,0,0,0.6); }
.lead.narrow{ max-width:42ch; }
/* creed — the two pivotal positioning lines, set apart in a refined frosted plaque so no one misses them */
.creed{ position:relative; margin:clamp(0.4rem,1vh,0.9rem) auto 0; max-width:min(680px,92%);
  padding:clamp(1.25rem,2.6vh,1.9rem) clamp(1.4rem,3vw,2.4rem);
  text-align:center; border-radius:16px;
  background:linear-gradient(155deg, rgba(241,236,226,0.10), rgba(241,236,226,0.02) 62%), rgba(9,12,9,0.40);
  -webkit-backdrop-filter:blur(13px) saturate(1.12); backdrop-filter:blur(13px) saturate(1.12);
  border:1px solid rgba(241,236,226,0.16);
  box-shadow:0 26px 60px -30px rgba(0,0,0,0.82), inset 0 1px 0 rgba(255,255,255,0.08); }
.creed__mark{ position:absolute; top:-1px; left:50%; transform:translateX(-50%);
  width:clamp(40px,7vw,58px); height:2px; border-radius:2px;
  background:linear-gradient(90deg, rgba(var(--signal),0.9), rgba(var(--ember),0.95));
  box-shadow:0 0 16px rgba(var(--ember),0.5); }
.creed__neg{ font-size:clamp(1.02rem,1.5vw,1.32rem); line-height:1.42; font-weight:400;
  color:var(--bone); text-shadow:0 1px 14px rgba(0,0,0,0.7); }
.creed__neg em{ font-style:normal; font-weight:600; color:#fff; }
.creed__pos{ margin-top:clamp(0.7rem,1.5vh,1rem); font-size:clamp(1.08rem,1.65vw,1.46rem);
  line-height:1.4; font-weight:500; letter-spacing:0.005em;
  color:rgb(var(--ember)); text-shadow:0 0 26px rgba(var(--ember),0.32), 0 1px 14px rgba(0,0,0,0.72); }
@media (max-width:820px){ .creed{ padding:1.2rem 1.3rem; max-width:100%; } }
.pull{ font-size:clamp(1.05rem,1.7vw,1.4rem); font-weight:300; line-height:1.38; color:var(--bone);
  border-left:2px solid rgba(var(--signal),0.7); padding-left:clamp(0.9rem,1.6vw,1.3rem); max-width:44ch;
  text-shadow:0 1px 20px rgba(0,0,0,0.6); }
.stack > * + *{ margin-top:clamp(1.1rem,1.4vw + 0.5vh,2rem); }

/* reveal */
.r{ opacity:0; transform:perspective(1200px) translateY(30px) translateZ(-60px) rotateX(8deg);
  transform-origin:50% 100%; transition:opacity .9s var(--ease), transform 1.05s var(--ease);
  transition-delay:var(--d,0s); will-change:opacity,transform; }
.r.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .r{ transform:none; opacity:1; } }

/* ---------- CTA ---------- */
/* Frosted GLASS pill — gold-accented but not a dominating solid-gold block (visible, understated) */
.cta{ display:inline-flex; align-items:center; gap:0.6rem; text-decoration:none; font-size:var(--fs-label);
  letter-spacing:0.16em; text-transform:uppercase; font-weight:500; color:rgba(var(--ember),0.98); position:relative;
  padding:0.72rem 1.4rem; cursor:pointer; border-radius:999px; isolation:isolate;
  background:linear-gradient(155deg, rgba(241,236,226,0.10), rgba(241,236,226,0.02) 62%), rgba(10,12,9,0.32);
  -webkit-backdrop-filter:blur(11px) saturate(1.1); backdrop-filter:blur(11px) saturate(1.1);
  border:1px solid rgba(var(--ember),0.42);
  box-shadow:0 12px 30px -18px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.10);
  transform:translateZ(0); transition:transform .35s var(--ease), box-shadow .4s var(--ease), border-color .35s var(--ease), background .35s var(--ease); }
.cta .arrow{ color:rgba(var(--ember),0.98); transition:transform .4s var(--ease); }
.cta::after{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background:linear-gradient(150deg, rgba(255,255,255,0.10), transparent 55%); opacity:.7; transition:opacity .35s var(--ease); }
.cta:hover{ transform:translateY(-2px); border-color:rgba(var(--ember),0.7);
  background:linear-gradient(155deg, rgba(241,236,226,0.14), rgba(241,236,226,0.04) 62%), rgba(12,14,10,0.4);
  box-shadow:0 18px 40px -20px rgba(0,0,0,0.72), 0 0 22px rgba(232,201,154,0.22), inset 0 1px 0 rgba(255,255,255,0.12); }
.cta:hover .arrow{ transform:translateX(6px); }
.cta:active{ transform:translateY(0); }
.cta:focus-visible{ outline:2px solid rgba(var(--ember),0.8); outline-offset:4px; }

/* ============================================================
   SECTION 01 · NAME ONLY
   ============================================================ */
.name{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.name__tag{ display:inline-flex; align-items:center; gap:0.6rem; font-size:var(--fs-label); letter-spacing:0.4em;
  text-transform:uppercase; color:rgba(var(--signal),0.95); text-shadow:0 1px 12px rgba(0,0,0,0.7); }
.name__tag .mk{ width:6px; height:6px; border-radius:50%; background:rgba(var(--signal),0.98); box-shadow:0 0 12px rgba(var(--signal),0.7); }
.name__word{ margin-top:clamp(1rem,3vh,2rem); font-weight:200; text-transform:uppercase; letter-spacing:0.06em; line-height:1.02;
  font-size:var(--s-name); color:var(--bone); text-shadow:0 2px 60px rgba(0,0,0,0.55); }
/* elegant two-tier hero name — dominant word + refined gold sub-line + a slim vertical accent.
   Everything (eyebrow, name, scroll cue) shares ONE left edge; the accent sits just left of it. */
.name--split{ --nsplit-pad:clamp(1rem,2.1vw,1.7rem); }
.name--split .name__tag,
.name--split .scrollcue{ padding-left:var(--nsplit-pad); }
.name--split .name__word{ position:relative; margin-top:clamp(0.8rem,2.4vh,1.6rem); padding-left:var(--nsplit-pad); letter-spacing:0.03em; }
.name--split .name__word::before{ content:""; position:absolute; left:0; top:8%; bottom:16%; width:2px; border-radius:2px;
  background:linear-gradient(180deg, rgba(var(--signal),0.95) 0%, rgba(232,201,154,0.75) 55%, rgba(232,201,154,0) 100%); }
.name--split .nw-lead{ display:block; line-height:0.94; font-weight:200; }
.name--split .nw-for{ display:block; margin-top:clamp(0.4rem,1.1vh,0.85rem); font-size:0.42em; font-weight:300;
  letter-spacing:0.22em; color:rgba(232,201,154,0.96); text-shadow:0 2px 22px rgba(0,0,0,0.6); }
.scrollcue{ margin-top:clamp(1.6rem,4vh,3rem); display:inline-flex; align-items:center; gap:0.9rem; font-size:var(--fs-label);
  letter-spacing:0.3em; text-transform:uppercase; color:var(--bone-soft); text-shadow:0 1px 12px rgba(0,0,0,0.7); }
.scrollcue .rail{ width:44px; height:1px; background:rgba(241,236,226,0.3); position:relative; overflow:hidden; }
.scrollcue .rail::after{ content:""; position:absolute; inset:0; width:40%; background:linear-gradient(90deg,transparent,var(--bone)); animation:cue 2.6s var(--ease) infinite; }
@keyframes cue{ 0%{transform:translateX(-100%)} 65%{transform:translateX(280%)} 100%{transform:translateX(280%)} }

/* ============================================================
   SECTION 02 · HERO — text | operating-system orbit
   ============================================================ */
.orbit{ position:relative; aspect-ratio:1; width:100%; max-width:440px; margin:0 auto; }
.orbit__canvas{ position:absolute; inset:-14%; width:128%; height:128%; display:block; }
.orbit__ring{ position:absolute; inset:0; border:1px solid rgba(var(--signal),0.22); border-radius:50%; }
.orbit__ring.r2{ inset:14%; border-color:rgba(var(--signal),0.16); }
.orbit__ring.r3{ inset:28%; border-color:rgba(var(--signal),0.12); }
.orbit__spin{ position:absolute; inset:0; animation:spin 46s linear infinite; }
.orbit__spin.b{ inset:14%; animation-duration:34s; animation-direction:reverse; }
.orbit__node{ position:absolute; top:-6px; left:50%; width:12px; height:12px; margin-left:-6px; border-radius:2px;
  background:rgba(241,236,226,0.9); box-shadow:0 0 14px rgba(var(--signal),0.6); }
.orbit__node.n2{ top:auto; bottom:-6px; }
.orbit__node.n3{ top:50%; left:-6px; margin-top:-6px; }
.orbit__core{ position:absolute; inset:40%; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, rgba(var(--signal),0.85), rgba(var(--signal),0.12) 60%, transparent 75%);
  box-shadow:0 0 50px rgba(var(--signal),0.35); animation:corePulse 5.5s var(--ease) infinite; }
.orbit__label{ position:absolute; left:50%; bottom:-1.8rem; transform:translateX(-50%); font-size:0.56rem;
  letter-spacing:0.24em; text-transform:uppercase; color:var(--bone-faint); white-space:nowrap; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes corePulse{ 0%,100%{ box-shadow:0 0 40px rgba(var(--signal),0.28); } 50%{ box-shadow:0 0 62px rgba(var(--signal),0.5); } }

/* ---------- shared pictographic icon badge ---------- */
.icb{ flex:0 0 auto; width:clamp(40px,3.6vw,48px); height:clamp(40px,3.6vw,48px); border-radius:13px; display:grid; place-items:center;
  border:1px solid rgba(var(--signal),0.45); background:linear-gradient(150deg, rgba(var(--ink),0.5), rgba(var(--ink),0.3));
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transition:border-color .3s var(--ease), box-shadow .3s var(--ease); }
.icb svg{ width:52%; height:52%; stroke:rgba(var(--signal),0.98); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.step:hover .icb, .pnode:hover .icb{ border-color:rgba(var(--signal),0.85); box-shadow:0 0 20px rgba(var(--signal),0.28); }
.icb--sm{ width:clamp(32px,3vw,38px); height:clamp(32px,3vw,38px); border-radius:10px; }

/* compact icon list — every point kept, shown as icon + keyword + micro-tail
   (replaces text-dense bullet lists; scannable, mostly visual) */
.iclist{ list-style:none; display:grid; gap:clamp(0.5rem,1.3vh,0.85rem); text-align:left; }
.iclist li{ display:flex; align-items:center; gap:0.7rem; }
.iclist li:hover .icb{ border-color:rgba(var(--signal),0.85); box-shadow:0 0 18px rgba(var(--signal),0.26); }
.iclist__t{ display:flex; flex-direction:column; gap:0.06rem; }
.iclist__k{ font-size:clamp(0.9rem,1.15vw,1.02rem); font-weight:600; color:var(--bone); line-height:1.12; }
.iclist__d{ font-size:clamp(0.72rem,0.9vw,0.82rem); color:var(--bone-soft); line-height:1.2; }
.iclist--2col{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(0.55rem,1.3vh,0.9rem) clamp(1.4rem,3vw,2.6rem); }
@media (max-width:640px){ .iclist--2col{ grid-template-columns:1fr; } }

/* ============================================================
   SECTION 03 · STRATEGY — 4 stages as icon + keyword (minimal text)
   ============================================================ */
.flow{ display:grid; gap:clamp(0.8rem,1.9vh,1.5rem); margin-top:clamp(0.4rem,1vh,0.9rem); }
.step{ display:grid; grid-template-columns:auto 1fr; gap:clamp(0.8rem,1.5vw,1.1rem); align-items:center; }
.step__name{ font-size:clamp(1.05rem,1.8vw,1.4rem); font-weight:700; color:rgba(var(--signal),0.98); letter-spacing:0.01em; line-height:1.05; }
.step__desc{ margin-top:0.15rem; font-size:clamp(0.82rem,1vw,0.94rem); line-height:1.4; color:var(--bone-soft); }

/* SECTION 02 · pictographic flow (Assets -> Operating System -> Portfolios) */
.pflow{ display:flex; align-items:flex-start; margin-top:clamp(0.9rem,2.2vh,1.5rem); max-width:460px; }
.pnode{ display:flex; flex-direction:column; align-items:center; gap:0.6rem; flex:0 0 auto; }
.icb--lg{ width:clamp(50px,4.8vw,64px); height:clamp(50px,4.8vw,64px); border-radius:15px; }
.pnode__l{ font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--bone-soft); text-align:center; line-height:1.3; }
.pflow__arr{ flex:1 1 auto; height:clamp(50px,4.8vw,64px); display:flex; align-items:center; justify-content:center;
  color:rgba(var(--signal),0.6); font-size:1.15rem; }
.poutcomes{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:clamp(0.9rem,2.2vh,1.5rem); }
.beats{ display:flex; flex-wrap:wrap; gap:0.6rem 0.7rem; margin-top:clamp(1.2rem,2.5vh,1.8rem); }
.beat{ font-size:clamp(0.85rem,1.3vw,1.05rem); font-weight:300; color:var(--bone); padding:0.4rem 0.95rem;
  border:1px solid rgba(var(--signal),0.4); border-radius:30px; background:rgba(var(--ink),0.28);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.beat b{ color:rgba(var(--signal),0.98); font-weight:600; }

/* ============================================================
   SECTION 04 · LIFECYCLE — the $100M flywheel
   ============================================================ */
.wheel{ position:relative; width:100%; max-width:440px; aspect-ratio:1; margin:0 auto; }
/* glass disc — keeps the $100M centre + labels crisp over the forest (no hard card) */
.wheel::before{ content:""; position:absolute; inset:4%; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(var(--ink),0.6) 0%, rgba(var(--ink),0.4) 52%, rgba(var(--ink),0) 78%);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); }
.wheel svg{ width:100%; height:100%; overflow:visible; position:relative; }
.wheel__ring{ fill:none; stroke:rgba(201,212,181,0.28); stroke-width:1.4; }
.wheel__dash{ fill:none; stroke:rgba(201,212,181,0.5); stroke-width:1.4; stroke-dasharray:5 12; transform-origin:center; animation:spin 60s linear infinite; }
.wheel__node circle{ fill:rgba(8,11,9,0.85); stroke:rgba(201,212,181,0.75); stroke-width:1.4; }
.wheel__node text{ fill:var(--bone); font-size:12.5px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; }
.wheel__spin{ transform-origin:center; animation:spin 24s linear infinite; }
.wheel__pip{ fill:rgba(201,212,181,0.98); filter:drop-shadow(0 0 6px rgba(201,212,181,0.9)); }
.wheel__ctr .big{ fill:var(--bone); font-size:46px; font-weight:200; letter-spacing:-0.01em; }
.wheel__ctr .sm{ fill:rgba(201,212,181,0.95); font-size:11px; font-weight:600; letter-spacing:0.3em; text-transform:uppercase; }
.wheel__div{ stroke:rgba(201,212,181,0.32); stroke-width:1; }
.wheel__ctr .goal{ fill:rgba(232,201,154,0.98); font-size:16.5px; font-weight:700; letter-spacing:0.03em; }
.wheel__rep{ fill:rgba(232,201,154,0.92); font-size:9.5px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; }
.wheel__repeat{ fill:none; stroke:rgba(232,201,154,0.9); stroke-width:1.8; }
@media (prefers-reduced-motion:reduce){ .wheel__dash,.wheel__spin,.orbit__spin,.flow::after,.orbit__core,.osl__scan,.scrollcue .rail::after{ animation:none !important; } }

/* ============================================================
   SECTION 05 · TECHNOLOGY — operating-system layers (right col)
   ============================================================ */
.oslayers{ display:flex; flex-direction:column; gap:0.7rem; perspective:1200px; }
.osl{ position:relative; display:grid; grid-template-columns:minmax(88px,auto) 1fr; gap:clamp(0.8rem,2vw,1.5rem); align-items:center;
  padding:clamp(0.75rem,1.6vw,1.1rem) clamp(1rem,2vw,1.5rem); border:1px solid rgba(var(--signal),0.22); border-radius:9px;
  background:linear-gradient(100deg, rgba(var(--ink),0.5), rgba(var(--ink),0.28)); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  overflow:hidden; transition:border-color .4s var(--ease), transform .4s var(--ease); }
.osl:hover{ border-color:rgba(var(--signal),0.55); transform:translateX(5px); }
.osl__scan{ position:absolute; inset:0 auto 0 0; width:40%; background:linear-gradient(90deg, transparent, rgba(var(--signal),0.08), transparent); animation:scanX 7s var(--ease) infinite; }
@keyframes scanX{ 0%{ left:-40%; } 100%{ left:100%; } }
.osl__k{ font-size:clamp(0.95rem,1.4vw,1.2rem); font-weight:600; letter-spacing:0.03em; text-transform:uppercase; color:rgba(var(--signal),0.98); white-space:nowrap; }
.osl__v{ font-size:clamp(0.85rem,1vw,0.98rem); line-height:1.45; color:var(--bone-soft); }

/* ============================================================
   SECTION 06 · THE DIFFERENCE
   ============================================================ */
.diffs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1rem,2.4vw,2rem); }
.diff{ position:relative; padding-top:1rem; border-top:1px solid rgba(var(--signal),0.35); }
.diff__k{ font-size:clamp(1rem,1.6vw,1.32rem); font-weight:500; color:var(--bone); letter-spacing:0.01em; }
.diff__k .sig{ color:rgba(var(--signal),0.98); }
.diff__v{ margin-top:0.45rem; font-size:clamp(0.85rem,1vw,0.98rem); line-height:1.5; color:var(--bone-soft); max-width:46ch; }
.diff__no{ position:absolute; top:1rem; right:0; font-size:0.62rem; letter-spacing:0.2em; color:rgba(var(--signal),0.7); font-variant-numeric:tabular-nums; }

/* ============================================================
   SECTION 07 · CHOOSE YOUR PATH — ecosystem
   ============================================================ */
.eco__head{ text-align:center; margin-bottom:clamp(1.4rem,3.5vh,2.4rem); }
.eco__core{ display:inline-flex; flex-direction:column; align-items:center; gap:0.35rem; margin-top:1rem; }
.eco__core .dot{ width:11px; height:11px; border-radius:50%; background:rgba(var(--signal),0.98); box-shadow:0 0 22px rgba(var(--signal),0.7); }
.eco__core .nm{ font-size:0.66rem; letter-spacing:0.34em; text-transform:uppercase; color:var(--bone); }
.paths{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(0.8rem,1.4vw,1.3rem); }
.path{ position:relative; display:flex; flex-direction:column; gap:0.55rem; text-decoration:none;
  padding:clamp(1rem,1.8vw,1.5rem); border:1px solid rgba(var(--signal),0.2); border-radius:12px;
  background:linear-gradient(160deg, rgba(var(--ink),0.46), rgba(var(--ink),0.24)); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  transition:transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease); }
.path:hover{ transform:translateY(-5px); border-color:rgba(var(--signal),0.6); background:linear-gradient(160deg, rgba(var(--ink),0.56), rgba(var(--ink),0.3)); }
.path__k{ font-size:1rem; font-weight:600; color:var(--bone); letter-spacing:0.02em; }
.path__opt{ font-size:0.54rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--bone-faint); display:block; margin-top:0.2rem; font-weight:400; }
.path__v{ font-size:0.85rem; line-height:1.5; color:var(--bone-soft); flex:1; }
.path__cta{ display:inline-flex; align-items:center; gap:0.45rem; font-size:0.62rem; letter-spacing:0.13em; text-transform:uppercase;
  font-weight:700; color:#12100b; margin-top:0.5rem; align-self:flex-start; padding:0.5rem 0.95rem; border-radius:999px;
  background:linear-gradient(150deg, rgba(var(--ember),1), rgba(198,166,110,0.98));
  border:1px solid rgba(var(--ember),0.8);
  box-shadow:0 6px 16px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.32) inset, 0 -5px 10px rgba(120,86,30,0.3) inset;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.path__cta .arrow{ color:#12100b; }
.path:hover .path__cta{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,0.48), 0 0 18px rgba(232,201,154,0.45), 0 1px 0 rgba(255,255,255,0.35) inset; }
.path__cta .arrow{ transition:transform .4s var(--ease); }
.path:hover .path__cta .arrow{ transform:translateX(5px); }

/* ---------- responsive ---------- */
@media (max-width:940px){
  .split{ grid-template-columns:1fr; gap:clamp(1.6rem,4vh,2.6rem); }
  .orbit{ max-width:280px; order:-1; }
  .wheel{ max-width:340px; }
  .diffs{ grid-template-columns:1fr; }
  .paths{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* .nav__links now become the mobile slide-down panel (see fx.css hamburger) */
  .secindex{ display:none; }
}
@media (max-width:560px){
  .hsec{ padding:clamp(4.5rem,11vh,6rem) var(--pad) clamp(2rem,6vh,3.5rem); align-items:flex-start; }
  /* the NAME hero (#s01 on every page) stays vertically centred — name sits mid-screen, still left-aligned */
  #s01{ align-items:center; padding-top:clamp(3.5rem,9vh,5rem); padding-bottom:clamp(3.5rem,9vh,5rem); }
  /* a clear breather between sections so the page reads as distinct screens, not one long scroll */
  .hsec + .hsec{ margin-top:clamp(2rem,6vh,3.6rem); }
  .paths{ grid-template-columns:1fr; }
  .flow{ padding-left:1.9rem; }
  /* the icon rows → an even grid: 4 items = 2×2, 2 items = side-by-side, 3 items = 2 + 1 centred */
  .flow.flow--row{ display:grid !important; grid-template-columns:repeat(2,1fr);
    gap:clamp(1.5rem,5vw,2.2rem) clamp(0.9rem,3vw,1.4rem); justify-items:center; align-items:start;
    padding-left:0 !important; justify-content:center; max-width:min(440px,96%); margin-inline:auto; }
  .flow.flow--row .step{ max-width:220px; width:100%; }
  /* a lone 3rd item (exactly 3 total) spans both columns and centres */
  .flow.flow--row .step:nth-child(3):last-child{ grid-column:1 / -1; }
  /* 5-card decks (Risk & discipline · Diligence) → 2 + 2 + 1, the 5th centred */
  .deck--5{ grid-template-columns:repeat(2,1fr); gap:clamp(0.7rem,2.4vw,1rem); }
  .deck--5 .d3:nth-child(5):last-child{ grid-column:1 / -1; max-width:calc(50% - 0.5rem); margin-inline:auto; }
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } .r{ opacity:1 !important; transform:none !important; transition:none; } }

/* ============================================================
   3D PRESENTATION LAYER — pictographs gain real depth.
   Containers listed in each page's body[data-fx-tilt] get a
   pointer-driven perspective tilt (fx.js). Here we give their
   inner icons/labels translateZ so they float ABOVE the card
   during the tilt — true parallax, not a flat rotate. Safe at
   rest (no perspective ancestor ⇒ translateZ is invisible).
   ============================================================ */
.pflow, .doors .door, .dcard, .flow.flow--row, .flow.flow--row .step,
.gband, .detail, .statstrip, .statstrip__i, .iclist, .arch__master{
  transform-style:preserve-3d;
}
/* depth stack (higher Z = pops further toward the viewer) */
.pflow .pnode .icb{ transform:translateZ(38px); }
.pflow .pnode__l{ transform:translateZ(18px); }
.pflow .pflow__arr{ transform:translateZ(26px); }
.flow.flow--row .step .icb{ transform:translateZ(32px); }
.flow.flow--row .step .step__t{ transform:translateZ(14px); }
.iclist .icb{ transform:translateZ(24px); }
.iclist .iclist__t{ transform:translateZ(9px); }
.dcard .dcard__name{ transform:translateZ(26px); }
.dcard .dcard__line{ transform:translateZ(14px); }
.dcard .dcard__meta{ transform:translateZ(20px); }
.dcard .dcard__no{ transform:translateZ(8px); }
.doors .door .door__k{ transform:translateZ(24px); }
.doors .door .door__list{ transform:translateZ(12px); }
.doors .door .cta{ transform:translateZ(30px); }
.statstrip .statstrip__n{ transform:translateZ(30px); }
.statstrip .statstrip__l{ transform:translateZ(12px); }
.detail .detail__name{ transform:translateZ(26px); }
.detail .detail__fn{ transform:translateZ(14px); }
.detail .procs{ transform:translateZ(8px); }
.arch__master{ transition:transform .5s var(--ease), box-shadow .5s var(--ease); }

/* icon badges: 3D hover pop + brighter signal glow */
.icb{ transition:transform .38s var(--ease), border-color .38s var(--ease), box-shadow .38s var(--ease); }
.step:hover .icb, .pnode:hover .icb, .iclist li:hover .icb{
  border-color:rgba(var(--signal),0.95);
  box-shadow:0 10px 26px rgba(0,0,0,0.4), 0 0 24px rgba(var(--signal),0.4); }
[data-fx-tilt] .dcard, .doors .door, .detail{
  transition:transform .5s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease); }
.dcard:hover, .doors .door:hover, .detail:hover{
  border-color:rgba(var(--signal),0.5); box-shadow:0 22px 60px rgba(0,0,0,0.5); }

/* soft moving highlight on the tiltable cards (reads as a lit 3D surface) */
.dcard, .doors .door, .detail{ position:relative; overflow:hidden; }
.dcard::after, .doors .door::after, .detail::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .5s var(--ease);
  background:radial-gradient(360px 360px at var(--gx,50%) var(--gy,0%), rgba(var(--signal),0.14), transparent 60%); }
.dcard:hover::after, .doors .door:hover::after, .detail:hover::after{ opacity:1; }

/* ---- headline wrapping: keep each clause whole (no 2-word/3-word ragged
   splits). Wrap sentences in <span class="ph"> — they stay atomic. ---- */
.statement{ text-wrap:pretty; }
.statement .ph{ display:inline-block; }

/* tiltable elements: fast transform transition so the pointer tilt tracks
   crisply (overrides the slow .r reveal transform without losing the fade). */
[data-fx-tilt] .pflow, [data-fx-tilt] .iclist, [data-fx-tilt] .gband,
[data-fx-tilt] .flow.flow--row, [data-fx-tilt] .statstrip__i{
  transition:transform .16s ease, box-shadow .45s var(--ease), border-color .45s var(--ease);
}

/* ============================================================
   CROSS-SITE RULES (applied 2026-09-22)
   R2 one-line headlines · R5 layout variety · R4 richer motion
   ============================================================ */

/* R2 — headline clauses never break mid-phrase (one line each on desktop) */
.statement .ph{ white-space:nowrap; }
/* only force one-line where there's room; below this the phrase may wrap so it never overflows */
@media (max-width:1100px){ .statement .ph{ white-space:normal; } }
/* never let a headline exceed the viewport, whatever the alignment */
.statement{ max-width:100%; overflow-wrap:break-word; }

/* R5 — layout variants so sections aren't all centered (breaks monotony) */
.hsec--left .hwrap{ margin:0; max-width:min(1060px,92vw); text-align:left; }
.hsec--left .eyebrow{ display:block; }
.hsec--left .statement{ margin-inline:0 !important; }
.hsec--left .lead, .hsec--left .pull{ margin-left:0; margin-right:auto; text-align:left; }
.hsec--left .flow.flow--row{ justify-content:flex-start; }
.hsec--left .pflow{ margin-left:0; margin-right:auto; }
.hsec--left .chiprow, .hsec--left .poutcomes, .hsec--left .beats{ justify-content:flex-start; }

.hsec--right .hwrap{ margin:0 0 0 auto; max-width:min(1060px,92vw); text-align:right; }
.hsec--right .eyebrow{ display:block; }
.hsec--right .statement{ margin-inline:0 0 0 auto !important; }
.hsec--right .flow.flow--row, .hsec--right .chiprow, .hsec--right .poutcomes, .hsec--right .beats{ justify-content:flex-end; }
.hsec--right .lead, .hsec--right .pull{ margin-left:auto; margin-right:0; text-align:right; }
.hsec--right .pull{ border-left:0; border-right:2px solid rgba(var(--signal),0.7); padding-left:0; padding-right:clamp(0.9rem,1.6vw,1.3rem); }
@media (max-width:760px){
  .hsec--right .hwrap{ text-align:left; margin:0; }
  .hsec--right .statement{ margin-inline:0 !important; }
  .hsec--right .flow.flow--row,.hsec--right .chiprow,.hsec--right .poutcomes,.hsec--right .beats{ justify-content:flex-start; }
  .hsec--right .lead,.hsec--right .pull{ text-align:left; margin-left:0; }
}

/* R4 — a light pulse travels along every flow connector (alive, not static) */
.pflow__arr{ position:relative; }
.pflow__arr::after{ content:""; position:absolute; top:50%; left:8%; width:5px; height:5px; margin-top:-2.5px; border-radius:50%;
  background:rgba(var(--signal),0.98); box-shadow:0 0 9px rgba(var(--signal),0.85); opacity:0;
  animation:arrpulse 2.6s var(--ease) infinite; }
.pflow__arr:nth-of-type(3n)::after{ animation-delay:.6s; }
@keyframes arrpulse{ 0%{ left:8%; opacity:0; } 18%{ opacity:1; } 82%{ opacity:1; } 100%{ left:84%; opacity:0; } }

/* R4 — icon badges gain a slow breathing ring; lift + glow on hover already exist */
.icb::before{ content:""; position:absolute; inset:-3px; border-radius:inherit; border:1px solid rgba(var(--signal),0.0);
  transition:border-color .4s var(--ease); }
.icb{ position:relative; }
.step:hover .icb::before, .pnode:hover .icb::before, .iclist li:hover .icb::before{ border-color:rgba(var(--signal),0.35); }

/* R4 — chips / beats spring on hover */
.chip, .beat{ transition:transform .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease); }
.chip:hover, .beat:hover{ transform:translateY(-2px); border-color:rgba(var(--signal),0.55); }

/* R4 — animated eyebrow marker */
.eyebrow{ position:relative; }
@media (prefers-reduced-motion:reduce){ .pflow__arr::after{ animation:none; opacity:0; } }

/* R3/R4 — "return streams": each group rides a glowing vertical rule with an
   upward-flowing pulse (income & equity compounding). Montfort-clean, animated. */
.twocol--streams{ gap:clamp(2rem,5vw,4.2rem); }
.twocol--streams > div{ position:relative; padding-left:clamp(1.1rem,1.7vw,1.5rem); }
.twocol--streams > div::before{ content:""; position:absolute; left:0; top:0.3rem; bottom:0.3rem; width:2px; border-radius:2px;
  background:linear-gradient(to top, rgba(var(--signal),0.08), rgba(var(--signal),0.55)); }
.twocol--streams > div > .grp__h{ position:relative; }
.twocol--streams > div .streampip{ position:absolute; left:calc(-1 * clamp(1.1rem,1.7vw,1.5rem)); margin-left:-1px;
  width:4px; height:16px; border-radius:4px; background:rgba(var(--signal),0.98); box-shadow:0 0 12px rgba(var(--signal),0.9);
  animation:streamUp 3.6s ease-in-out infinite; }
.twocol--streams > div:nth-child(2) .streampip{ background:rgba(var(--ember),0.98); box-shadow:0 0 12px rgba(var(--ember),0.9); animation-delay:1.3s; }
@keyframes streamUp{ 0%{ top:100%; opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ top:-6%; opacity:0; } }
@media (prefers-reduced-motion:reduce){ .twocol--streams > div .streampip{ animation:none; opacity:0.8; top:0; } }

/* ---- strategy pathway — numbered steps on a rail + travelling pulse (bigger,
   clearer than the old chip chain) ---- */
.sflow{ position:relative; display:flex; align-items:flex-start; gap:0; width:100%;
  margin-top:clamp(1.6rem,3.4vh,2.6rem); }
.sflow::before{ content:""; position:absolute; left:0; right:0; top:clamp(20px,2.4vw,26px); height:2px;
  background:linear-gradient(90deg, rgba(var(--signal),0.5), rgba(var(--ember),0.5)); border-radius:2px; }
.sflow::after{ content:""; position:absolute; top:calc(clamp(20px,2.4vw,26px) - 2px); left:0; width:8px; height:8px; margin-top:-1px;
  border-radius:50%; background:rgba(var(--bone)); box-shadow:0 0 12px rgba(var(--signal),0.9);
  background:rgba(241,236,226,0.98); animation:sflowRun 4.5s var(--ease) infinite; }
@keyframes sflowRun{ 0%{ left:0; opacity:0 } 8%{opacity:1} 92%{opacity:1} 100%{ left:100%; opacity:0 } }
.sstep{ position:relative; flex:1 1 0; min-width:0; padding-right:clamp(0.6rem,1.4vw,1.2rem); text-align:left; }
.sstep__no{ display:block; font-size:clamp(0.66rem,0.9vw,0.76rem); letter-spacing:0.22em;
  color:rgba(var(--ember),0.95); font-variant-numeric:tabular-nums; }
.sstep__dot{ display:block; width:clamp(11px,1.4vw,14px); height:clamp(11px,1.4vw,14px); border-radius:50%;
  margin:clamp(0.55rem,1.1vw,0.8rem) 0 clamp(0.55rem,1.1vw,0.8rem); background:rgba(8,11,9,0.85);
  border:2px solid rgba(var(--signal),0.7); position:relative; z-index:1; box-shadow:0 0 0 4px rgba(8,11,9,0.6); }
.sstep:hover .sstep__dot{ border-color:rgba(var(--ember),0.95); box-shadow:0 0 0 4px rgba(8,11,9,0.6), 0 0 16px rgba(var(--ember),0.5); }
.sstep__l{ display:block; font-size:clamp(0.98rem,1.35vw,1.22rem); font-weight:500; color:var(--bone); line-height:1.24; }
.sflow__repeat{ display:inline-flex; align-items:center; gap:0.6rem; margin-top:clamp(1rem,2.4vh,1.6rem);
  font-size:clamp(0.9rem,1.2vw,1.08rem); color:var(--bone-soft); }
.sflow__repeat .loopglyph{ font-size:1.3em; color:rgba(var(--ember),0.98);
  display:inline-block; animation:loopSpin 6s linear infinite; }
@keyframes loopSpin{ to{ transform:rotate(360deg); } }
@media (max-width:680px){
  /* The strategy flow: stack the 5 steps with a VERTICAL connecting rail + a travelling pulse
     (the connection the desktop row has, adapted down) */
  .sflow{ flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:clamp(1.4rem,5vw,2rem);
    padding-left:clamp(0.3rem,1.6vw,0.6rem); }
  .sflow::before{ display:block; left:clamp(6px,2vw,7px); right:auto; top:0.4rem; bottom:0.4rem; width:2px; height:auto;
    background:linear-gradient(180deg, rgba(var(--ember),0.65), rgba(var(--ember),0.18)); }
  .sflow::after{ display:block; left:clamp(2px,2vw,3px); top:0; width:10px; height:10px;
    animation:sflowDown 3.4s var(--ease) infinite; }
  .sstep{ flex:none; width:100%; position:relative; padding:0 0 0 clamp(1.9rem,7vw,2.5rem); }
  .sstep__no{ display:inline; margin-right:0.55rem; }
  .sstep__dot{ position:absolute; left:clamp(2px,2vw,3px); top:0.4rem; margin:0; }
}
@keyframes sflowDown{ 0%{ top:0; opacity:0; } 12%{ opacity:1; } 86%{ opacity:1; } 100%{ top:100%; opacity:0; } }
@media (prefers-reduced-motion:reduce){ .sflow::after,.sflow__repeat .loopglyph{ animation:none; } }

/* ---- clarity: bump the smallest descriptor/label fonts (readability) ---- */
.step__desc{ font-size:clamp(0.86rem,1.05vw,0.98rem) !important; }
.iclist__d{ font-size:clamp(0.78rem,0.98vw,0.9rem); }
.chip{ font-size:clamp(0.82rem,1.1vw,0.98rem); }
.door__list li, .grp__list li{ font-size:clamp(0.88rem,1.05vw,1.0rem); }

/* ============================================================
   READABILITY PASS (2026-09-22) — text stays clearly legible over
   the video without blacking out the scene: strong dark text-halo
   + a slightly deeper centred reading pool.
   ============================================================ */
.scrim--band{ background:radial-gradient(56% 56% at 50% 50%,
  rgba(var(--ink),0.88) 0%, rgba(var(--ink),0.66) 36%, rgba(var(--ink),0.3) 58%, rgba(var(--ink),0) 80%); }
.statement{ text-shadow:0 2px 30px rgba(0,0,0,0.85), 0 2px 8px rgba(0,0,0,0.65), 0 0 2px rgba(0,0,0,0.55); }
.lead, .pull{ text-shadow:0 1px 16px rgba(0,0,0,0.82), 0 1px 5px rgba(0,0,0,0.6); }
.eyebrow, .name__tag, .chiprow__sub, .grp__h{ text-shadow:0 1px 12px rgba(0,0,0,0.85); }
.step__name, .iclist__k, .pnode__l, .door__k, .dcard__name, .statstrip__n{ text-shadow:0 1px 8px rgba(0,0,0,0.8); }
.step__desc, .iclist__d, .chip, .beat, .grp__list li, .door__list li, .checks li, .pfield__v, .lead b, .sstep__l, .exhint, .nag__name{
  text-shadow:0 1px 6px rgba(0,0,0,0.78); }
.name__word{ text-shadow:0 2px 40px rgba(0,0,0,0.7), 0 2px 10px rgba(0,0,0,0.55); }

/* ============================================================
   3D INTERACTIVE CARD DECK (.deck / .d3) — premium, animated,
   tilts in 3D, icon floats, accent sweeps, sequential reveal.
   ============================================================ */
.deck{ display:grid; gap:clamp(0.7rem,1.5vw,1.1rem); margin-top:clamp(1.3rem,3vh,2.1rem); width:100%; }
.deck--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.deck--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.deck--5{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.deck__grp{ }
.deck__grph{ font-size:0.62rem; letter-spacing:0.22em; text-transform:uppercase; color:rgba(var(--signal),0.95);
  margin-bottom:0.6rem; text-shadow:0 1px 10px rgba(0,0,0,0.8); }
.deck__col{ display:grid; gap:clamp(0.55rem,1.2vw,0.85rem); }

.d3{ position:relative; text-align:left; padding:clamp(0.9rem,1.5vw,1.3rem); border-radius:15px; overflow:hidden;
  border:1px solid rgba(var(--signal),0.2); background:linear-gradient(158deg, rgba(8,11,9,0.6), rgba(8,11,9,0.34));
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); transform-style:preserve-3d;
  transition:border-color .4s var(--ease), box-shadow .45s var(--ease), transform .5s var(--ease); }
.d3:hover{ border-color:rgba(var(--signal),0.55); box-shadow:0 22px 56px rgba(0,0,0,0.5); }
.d3__no{ position:absolute; top:0.55rem; right:0.8rem; font-family:'Sora',var(--sans); font-weight:200;
  font-size:clamp(1.6rem,3vw,2.4rem); line-height:1; color:rgba(var(--signal),0.14); transform:translateZ(6px);
  font-variant-numeric:tabular-nums; }
.d3__row{ display:flex; align-items:center; gap:0.7rem; }
.d3__icb{ flex:0 0 auto; width:clamp(38px,3.4vw,46px); height:clamp(38px,3.4vw,46px); border-radius:12px; display:grid; place-items:center;
  border:1px solid rgba(var(--signal),0.4); background:linear-gradient(150deg, rgba(var(--ink),0.55), rgba(var(--ink),0.3));
  transform:translateZ(30px); transition:border-color .4s var(--ease), box-shadow .4s var(--ease); }
.d3__icb svg{ width:52%; height:52%; stroke:rgba(var(--signal),0.98); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.d3:hover .d3__icb{ border-color:rgba(var(--signal),0.9); box-shadow:0 0 22px rgba(var(--signal),0.4); }
.d3__t{ font-size:clamp(0.95rem,1.25vw,1.12rem); font-weight:600; color:var(--bone); line-height:1.18; transform:translateZ(16px);
  text-shadow:0 1px 8px rgba(0,0,0,0.8); }
.d3__d{ font-size:clamp(0.78rem,0.98vw,0.9rem); color:var(--bone-soft); line-height:1.4; margin-top:0.4rem; transform:translateZ(9px);
  text-shadow:0 1px 6px rgba(0,0,0,0.75); }
.d3__d--pad{ padding-left:calc(clamp(38px,3.4vw,46px) + 0.7rem); }
.d3__bar{ position:absolute; left:0; bottom:0; height:2px; width:100%; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg, rgba(var(--signal),0.9), rgba(var(--ember),0.8)); transition:transform .55s var(--ease); }
.d3:hover .d3__bar{ transform:scaleX(1); }
/* animated sheen that sweeps across on hover */
.d3::after{ content:""; position:absolute; top:0; bottom:0; width:45%; left:-60%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(var(--signal),0.1), transparent); transition:left .7s var(--ease); }
.d3:hover::after{ left:120%; }
@media (max-width:860px){ .deck--5{ grid-template-columns:repeat(2,1fr); } .deck--3{ grid-template-columns:1fr; } }
/* vertical d3 card (icon stacked above title) */
.d3--v{ text-align:center; }
.d3--v .d3__icb{ margin:0 auto 0.7rem; }
.d3--v .d3__no{ left:0.8rem; right:auto; }

/* compact deck (fits denser lists in one frame, still elegant) */
.deck--tight{ gap:clamp(0.5rem,1vw,0.75rem); }
.deck--tight .deck__col{ gap:clamp(0.42rem,0.9vw,0.62rem); }
.deck--tight .d3{ padding:clamp(0.6rem,1vw,0.9rem); border-radius:13px; }
.deck--tight .d3__row{ gap:0.6rem; }
.deck--tight .d3__icb{ width:clamp(32px,2.7vw,38px); height:clamp(32px,2.7vw,38px); border-radius:10px; }
.deck--tight .d3__t{ font-size:clamp(0.88rem,1.1vw,1rem); }
.deck--tight .d3__d{ font-size:clamp(0.72rem,0.9vw,0.82rem); margin-top:0.18rem; }
.deck--tight .deck__grph{ margin-bottom:0.45rem; }

/* ============================================================
   02 · THE PLATFORM — two-column: positioning (left) + pictograph (right)
   ============================================================ */
#s02 .hwrap{ max-width:min(1240px,94vw); margin:0 auto; }
.psplit{ display:grid; grid-template-columns:0.88fr 1.12fr; gap:clamp(1.6rem,4vw,3.8rem);
  align-items:center; text-align:left; }
.psplit__l{ text-align:left; }
/* airier left column so the creed box never touches the heading / pull quote */
.psplit__l > * + *{ margin-top:clamp(1.4rem,1.7vw + 0.8vh,2.4rem); }
.psplit__l .statement{ margin-inline:0; text-align:left;
  font-size:clamp(1.3rem,2.05vw,1.95rem); line-height:1.16; }  /* smaller → frees room for the bigger box */
.psplit__l .creed{ margin:clamp(2.6rem,5vh,4rem) 0 0; max-width:none; text-align:left;
  padding:clamp(1.2rem,1.9vw,1.75rem) clamp(1.3rem,2vw,1.85rem); }  /* ~2 lines of air above the box */
.psplit__l .creed__mark{ left:clamp(1.25rem,2vw,1.8rem); transform:none; }
.psplit__l .creed__neg, .psplit__l .creed__pos{ text-align:left; }
.psplit__l .creed__neg{ font-size:clamp(0.98rem,1.4vw,1.2rem); }
.psplit__l .creed__pos{ font-size:clamp(1.02rem,1.5vw,1.3rem); }
.psplit__l .pull{ margin:clamp(2rem,3.6vh,3rem) 0 0; text-align:left; border-left:2px solid rgba(var(--signal),0.7);
  padding-left:clamp(0.9rem,1.6vw,1.3rem); font-size:clamp(1rem,1.5vw,1.28rem); }  /* ~1-2 lines below the box */

/* RIGHT · three-step pictograph — each node carries its own caption box */
.psplit__r{ display:flex; justify-content:flex-end; }
.pdiagram{ width:100%; max-width:670px; display:flex; flex-direction:column; align-items:center;
  gap:clamp(2rem,4vh,2.9rem);
  padding:clamp(2.4rem,4.4vw,3.6rem) clamp(2.2rem,3.8vw,3.2rem);
  border-radius:22px; border:1px solid rgba(var(--signal),0.14);
  background:linear-gradient(180deg, rgba(14,18,22,0.42), rgba(8,10,13,0.32));
  box-shadow:0 30px 72px rgba(0,0,0,0.34);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.pdiagram__cap{ font-size:0.62rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--bone-soft); }
.pflow3{ display:flex; align-items:flex-start; justify-content:space-between; width:100%; gap:0; }
.pcol{ flex:0 1 clamp(150px,18vw,205px); min-width:0; display:flex; flex-direction:column; align-items:center;
  gap:clamp(0.8rem,1.9vh,1.2rem); text-align:center; }
.pflow3 .icb--lg{ width:clamp(64px,6vw,82px); height:clamp(64px,6vw,82px); }
.pflow3 .icb--lg svg{ width:48%; height:48%; }
.pcol__l{ font-size:clamp(0.76rem,0.98vw,0.86rem); letter-spacing:0.1em; text-transform:uppercase; color:var(--bone);
  font-weight:600; line-height:1.4; min-height:2.8em; display:block; }
/* short dotted connector: the stage → its OUTPUT below (so the box reads as a result, not a step) */
.pcol__drop{ width:0; height:clamp(12px,1.8vh,18px); margin:0.1rem 0;
  border-left:1.5px dotted rgba(var(--signal),0.5); align-self:center; }
/* OUTPUT boxes — distinct from the process nodes: filled accent chip, not a plain pill */
.pflow3 .beat--out{ justify-content:center; text-align:center; line-height:1.32;
  font-size:clamp(0.82rem,1.05vw,0.98rem); padding:0.6rem 1rem; width:100%;
  border:1px solid rgba(var(--signal),0.42);
  background:linear-gradient(180deg, rgba(var(--signal),0.16), rgba(var(--signal),0.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05), 0 8px 20px rgba(0,0,0,0.25); color:var(--bone); }
.pflow3 .beat--out b{ color:rgba(var(--signal),0.98); font-weight:700; }
/* long connector line + arrowhead between the steps (grows with the wider box) */
.pflow3 .pflow__arr{ flex:1 1 auto; min-width:clamp(34px,6vw,90px); align-self:flex-start;
  height:0; color:transparent; position:relative; margin-top:clamp(24px,2.9vw,33px); width:auto; }
.pflow3 .pflow__arr::before{ content:""; position:absolute; left:4px; right:13px; top:0; height:1.6px;
  background:linear-gradient(90deg, rgba(var(--signal),0.14), rgba(var(--signal),0.6));
  animation:none; opacity:1; border-radius:2px; }
.pflow3 .pflow__arr::after{ content:""; position:absolute; right:7px; top:0; margin-top:-3px;
  width:7px; height:7px; left:auto; border-top:1.6px solid rgba(var(--signal),0.6);
  border-right:1.6px solid rgba(var(--signal),0.6); transform:rotate(45deg);
  background:none; box-shadow:none; border-radius:0; animation:none; }
/* glowing dot that travels along the connector (the "3D flow" the user wanted) */
.pflow__dot{ position:absolute; top:0; left:4px; margin-top:-3px; width:6px; height:6px; border-radius:50%;
  background:rgba(var(--signal),0.98); box-shadow:0 0 9px 1px rgba(var(--signal),0.85);
  animation:pDotTravel 2.4s cubic-bezier(.5,0,.5,1) infinite; }
.pflow3 .pflow__arr:last-of-type .pflow__dot{ animation-delay:1.2s; }
@keyframes pDotTravel{ 0%{ left:4px; opacity:0; transform:scale(0.6); }
  14%{ opacity:1; transform:scale(1); } 86%{ opacity:1; transform:scale(1); }
  100%{ left:calc(100% - 12px); opacity:0; transform:scale(0.6); } }
@media (prefers-reduced-motion:reduce){ .pflow__dot{ animation:none; opacity:0; } }

@media (max-width:900px){
  .psplit{ grid-template-columns:1fr; gap:clamp(1.8rem,4.4vh,2.6rem); }
  #s02 .hwrap{ max-width:min(640px,92vw); }
  .psplit__r{ justify-content:flex-start; }
  .pdiagram{ max-width:100%; }
}
@media (max-width:760px){
  html{ scroll-padding-top:5.8rem; }
  .nav{ padding:calc(env(safe-area-inset-top, 0px) + 0.9rem) var(--pad) 1rem; }
  .nav__brand{ position:relative; z-index:21; }
  .hsec, .s{ padding-top:calc(var(--pad) + 6.1rem) !important; padding-bottom:calc(var(--pad) + 1.2rem); }
}
@media (max-width:480px){
  .pflow3{ flex-direction:column; align-items:center; gap:0.5rem; }
  .pflow3 .pflow__arr{ align-self:center; margin:0; transform:rotate(90deg); }
  .pcol{ max-width:240px; }
}

/* ---- heading → content line space in split sections (Wild §3/§6, Investors §7, Buyers §5) ---- */
.wildsplit__text .eyebrow, .formsplit__text .eyebrow, .brokersplit__text .eyebrow{
  display:block; margin-bottom:clamp(0.9rem,1.9vh,1.35rem); }
.wildsplit__text .lead, .formsplit__text .lead, .brokersplit__text .lead{
  margin-top:clamp(1.15rem,2.4vh,1.7rem); }
.formsplit__text .chiprow, .formsplit__text .doors, .formsplit__text .poutcomes,
.brokersplit__text .checks, .brokersplit__text .poutcomes{ margin-top:clamp(1.1rem,2.3vh,1.6rem); }

/* Investors · strategy flow (phones): centre the vertical timeline as one block under the
   centred heading, and keep the loop note on the same centre line */
@media (max-width:680px){
  .sflow{ width:fit-content; max-width:100%; margin-inline:auto; padding-right:0.6rem; }
  .sstep{ width:auto; }
  .sflow__repeat{ display:flex; justify-content:center; text-align:left; margin-inline:auto; max-width:30ch; }
}