/* ==========================================================================
   MASTERP AI — v9  ·  draft 3
   Near-black ground, bone blocks, one saturated accent.
   Motion is scrubbed to scroll progress (--p), not fired once.

   PALETTE
   Every colour in the site resolves through the role tokens below. Nothing
   downstream — CSS, the canvas scenes, or the hero shader — names a hue of its
   own, so swapping the theme block swaps the whole site.

     --void/--obsidian/--coal  the ground, darkest to lightest
     --bone/--bone-2           the paper blocks
     --accent                  the one saturated colour; block fields, rules, figures
     --accent-2               its hotter partner; only ever the far end of a
                               gradient or a momentary flash, never a field
     --on-accent               body colour that passes AA on an --accent field
     --wire/--wire-lt          hairlines on dark / on paper
     --dim/--dim-lt            secondary type on dark / on paper

   The *-rgb companions exist because rgba() cannot take a hex token; they must
   be kept in step with their hex by hand.
   ========================================================================== */

/* ---------- THEME · FOREST ----------
   Cool accent on a warm-neutral ground: the same tension the ember draft had,
   inverted. Forest is dark enough to carry bone type at AAA, so the accent
   block reads as a field of colour rather than a highlighter stripe. Brass,
   not yellow, is the partner — a metal, so it belongs beside the green
   instead of competing with it. */
:root,
:root[data-theme="forest"]{
  --void:      #0c0e0c;
  --obsidian:  #121712;
  --coal:      #182018;
  --bone:      #f2f0e8;
  --bone-2:    #e2e0d4;
  --accent:    #1f6b3f;   --accent-rgb:  31,107,63;
  --accent-lit-c: #46b978; --accent-lit-c-rgb: 70,185,120;
  --accent-2:  #c8a24a;   --accent-2-rgb:200,162,74;
  --wire:      #26302a;
  --wire-lt:   #cbd0c4;
  --dim:       #93a096;
  --dim-lt:    #5c6a5f;
  --on-accent: #e8f2e9;          /* bone-ish: AA on the forest field */
  --on-accent-strong: #ffffff;
  --accent-ink: var(--bone);     /* type colour that sits on an --accent field */
}

/* ---------- THEME · ROYAL ----------
   Deep royal blue with gold. More conventional and more immediately "premium";
   the ground is pulled blue-black so the accent looks native to it rather than
   dropped on top. Gold carries the warmth the blue gives up. */
:root[data-theme="royal"]{
  --void:      #0a0c12;
  --obsidian:  #101422;
  --coal:      #161b2b;
  --bone:      #f1f0ec;
  --bone-2:    #dfdfd8;
  --accent:    #1e3a8a;   --accent-rgb:  30,58,138;
  --accent-lit-c: #6d8cf5; --accent-lit-c-rgb: 109,140,245;
  --accent-2:  #d9a825;   --accent-2-rgb:217,168,37;
  --wire:      #242c44;
  --wire-lt:   #c7cad6;
  --dim:       #949bb0;
  --dim-lt:    #5b6274;
  --on-accent: #e6ebfa;          /* AA on the royal field */
  --on-accent-strong: #ffffff;
  --accent-ink: var(--bone);
}

:root{

  --display: "Array", "Arial Black", Impact, sans-serif;
  --ui:      "General Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  --gutter:  clamp(1rem, 3.5vw, 3.25rem);
  --measure: 1600px;
  --sec:     clamp(4.5rem, 9vw, 8.5rem);

  --ease:    cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.76,0,.24,1);
  --spring:  cubic-bezier(.34,1.56,.64,1);

  --p: 0;                        /* per-section scroll progress, written by JS */
}

/* ---------- Accent, resolved against the ground it sits on ----------
   The ember draft got away with one accent value everywhere because a hot
   orange is legible on charcoal AND on paper. A forest/royal accent is dark,
   so the same value cannot be both the block field and the bright mark on a
   dark ground — as type on --void it would sit at ~2:1.

   So: --accent stays the field colour, and --accent-lit is "the accent, made
   legible against whatever is behind it". Declaring it per-ground means every
   downstream rule just says var(--accent-lit) and is correct on all three
   block types, with no per-block overrides to keep in sync.  */
:root{ --accent-lit: var(--accent-lit-c); }   /* on --void / --coal: lifted */
.blk--bone{   --accent-lit: var(--accent); }  /* on paper: the true accent reads best */
.blk--accent{ --accent-lit: var(--accent-2); }/* on the accent field: the metal partner */
.card,.panel,.alt{ --accent-lit: var(--accent-lit-c); }
/* a card that is itself an accent field is a field, not a dark ground */
.card.blk--accent{ --accent-lit: var(--accent-2); }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0; background:var(--void); color:var(--bone);
  font-family:var(--ui); font-size:1.0625rem; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* the fixed mobile bar must never sit on top of content */
@media (max-width:999px){ body{ padding-bottom:72px; } }

img{ max-width:100%; display:block; }
::selection{ background:var(--accent); color:var(--bone); }
:focus-visible{ outline:3px solid var(--accent-lit); outline-offset:3px; }

.wrap{ width:100%; max-width:var(--measure); margin-inline:auto; padding-inline:var(--gutter); }

/* ---------- Blocks ---------- */
.blk{ padding-block:var(--sec); position:relative; scroll-margin-top:64px; overflow:clip; }
.blk--void{ background:var(--void); }
.blk--coal{ background:var(--coal); }
.blk--bone{ background:var(--bone); color:var(--void); }
.blk--accent{ background:var(--accent); color:var(--accent-ink); }
.blk--bone .dim{ color:var(--dim-lt); }
.blk--accent .dim{ color:var(--on-accent); }      /* was 2.6:1 — now AA */
.dim{ color:var(--dim); }

.sfx{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }

/* ---------- Section seams ----------
   A hard colour cut reads as an accident. Each block dissolves out of the one
   above it as a halftone dot field — the same motif as the hero shader and the
   display face — so the boundary belongs to the design language.
   Two stacked layers at different dot pitches, each with its own fade, give a
   graded dissolve rather than a single flat band. Pure CSS: no JS, no canvas. */
.blk[data-seam],.pin[data-seam]{ position:relative; }
.blk[data-seam]::before,.blk[data-seam]::after,
.pin[data-seam]::before,.pin[data-seam]::after{
  content:""; position:absolute; left:0; right:0; top:0;
  pointer-events:none; z-index:3;
  background-color:transparent;
  background-image:radial-gradient(var(--seam-from, var(--void)) 48%, transparent 52%);
}
/* coarse dots, carrying furthest down */
.blk[data-seam]::before,.pin[data-seam]::before{
  height:clamp(72px, 11vw, 168px);
  background-size:14px 14px;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 45%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 45%, transparent 100%);
}
/* fine dots, hugging the edge, so the join itself stays solid */
.blk[data-seam]::after,.pin[data-seam]::after{
  height:clamp(34px, 5vw, 76px);
  background-size:6px 6px;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 0%, transparent 100%);
}
@media (max-width:640px){
  .blk[data-seam]::before,.pin[data-seam]::before{ background-size:10px 10px; }
  .blk[data-seam]::after,.pin[data-seam]::after{ background-size:5px 5px; }
}
.blk > .wrap{ position:relative; z-index:1; }


/* ---------- Type ---------- */
h1,h2,h3,h4{ margin:0; font-weight:400; }
.mega{ font-family:var(--display); font-weight:700; font-size:clamp(3rem,12vw,14rem); line-height:.82; letter-spacing:-.035em; text-transform:uppercase; }
.big{ font-family:var(--display); font-weight:700; font-size:clamp(2.3rem,6.6vw,6rem); line-height:.88; letter-spacing:-.03em; text-transform:uppercase; text-wrap:balance; }
.mid{ font-family:var(--ui); font-weight:600; font-size:clamp(1.15rem,1.85vw,1.6rem); line-height:1.12; letter-spacing:-.02em; }
.lede{ font-size:clamp(1.05rem,1.4vw,1.3rem); line-height:1.45; max-width:40ch; }
.mono{ font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.18em; font-weight:500; }
p{ margin:0 0 1em; } p:last-child{ margin-bottom:0; }

.hot{
  background:linear-gradient(100deg, var(--accent-lit), var(--accent-2) 45%, var(--accent-lit) 80%);
  background-size:260% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:hotshift 3.4s var(--ease-io) infinite;
}
@keyframes hotshift{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

/* ---------- Buttons: label roll + fill wipe + magnetic ---------- */
.btn{
  --bg:var(--accent); --fg:var(--accent-ink);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  font-family:var(--mono); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.11em;
  padding:1.15rem 1.5rem; border:2px solid var(--bg); border-radius:0;
  background:var(--bg); color:var(--fg); text-decoration:none; cursor:pointer;
  overflow:hidden; isolation:isolate;
  transition:color .3s var(--ease-io), border-color .3s var(--ease-io), box-shadow .45s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--fg);
  transform:translateY(101%); transition:transform .45s var(--ease-io);
}
.btn:hover::before{ transform:translateY(0); }
.btn:hover{ color:var(--bg); border-color:var(--accent-2); box-shadow:0 14px 46px -14px var(--accent-lit); }
.btn:hover,.btn:focus-visible{ will-change:transform; }

/* Halftone skin — the dot motif that defines the brand, carried onto the
   controls so they stop reading as plain rectangles. Tightens on hover. */
.btn::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(currentColor 42%, transparent 46%);
  background-size:7px 7px;
  opacity:0;
  transition:opacity .42s var(--ease-io), background-size .55s var(--ease);
}
.btn:hover::after{ opacity:.14; background-size:5px 5px; }

/* Press: the slab actually depresses instead of merely scaling. */
.btn:active{ transform:translateY(2px) scale(.995); box-shadow:0 2px 10px -6px var(--accent-lit); }

/* Focus gets its own identity rather than borrowing the global ring. */
.btn:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--void), 0 0 0 5px var(--accent-2); }
.blk--bone .btn:focus-visible{ box-shadow:0 0 0 2px var(--bone), 0 0 0 5px var(--void); }
/* the accent block is dark now, so the ring inverts to stay visible on it */
.blk--accent .btn:focus-visible{ box-shadow:0 0 0 2px var(--accent), 0 0 0 5px var(--bone); }

/* the label physically rolls over instead of just changing colour */
.btn{ line-height:1.2; }
.btn .roll{ position:relative; z-index:1; display:block; overflow:hidden; height:1.2em; line-height:1.2; }
.btn .roll span{ display:block; height:1.2em; line-height:1.2; white-space:nowrap; transition:transform .5s var(--ease-io); }
.btn .roll span:last-child{ position:absolute; left:0; top:100%; width:100%; }
.btn:hover .roll span{ transform:translateY(-100%); }
.btn .arw{
  position:relative; z-index:1; display:inline-flex; align-items:center;
  transition:transform .5s var(--spring);
}
.btn .arw::before{
  content:""; width:0; height:2px; background:currentColor;
  margin-right:1px; transition:width .45s var(--ease);
}
.btn:hover .arw{ transform:translateX(5px); }
.btn:hover .arw::before{ width:15px; }

.btn--out{ --bg:transparent; --fg:var(--bone); border-color:var(--bone); color:var(--bone); }
.btn--out::before{ background:var(--bone); }
.btn--out:hover{ color:var(--void); box-shadow:0 14px 46px -14px rgba(245,239,230,.45); }
.blk--bone .btn--out,.card .btn--out{ border-color:var(--void); color:var(--void); }
.blk--bone .btn--out::before,.card .btn--out::before{ background:var(--void); }
.blk--bone .btn--out:hover,.card .btn--out:hover{ color:var(--bone); }
/* on the accent field the outline button keeps the bone treatment it has on
   the dark blocks — a void outline would vanish into the green/blue */
.blk--accent .btn--out{ border-color:var(--accent-ink); color:var(--accent-ink); }
.blk--accent .btn--out::before{ background:var(--accent-ink); }
.blk--accent .btn--out:hover{ color:var(--accent); }

.tlink{ position:relative; color:inherit; text-decoration:none; font-weight:500; display:inline-block; padding-bottom:3px; }
.tlink::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:currentColor; transform-origin:right; transition:transform .45s var(--ease-io); }
.tlink:hover::after{ transform:scaleX(0); }
.tlink::before{ content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--accent-lit); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease-io) .13s; }
.tlink:hover::before{ transform:scaleX(1); }
.tlink:hover{ color:var(--accent-lit); }

/* ---------- Custom cursor ---------- */
.cur,.cur-r{ position:fixed; top:0; left:0; pointer-events:none; z-index:400; mix-blend-mode:difference; will-change:transform; }
.cur{ width:9px; height:9px; background:var(--bone); border-radius:50%; margin:-4.5px 0 0 -4.5px; }
.cur-r{
  width:38px; height:38px; border:1.5px solid var(--bone); border-radius:50%; margin:-19px 0 0 -19px;
  display:grid; place-items:center;
  transition:width .4s var(--ease), height .4s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.cur-r b{ font-family:var(--mono); font-size:.55rem; letter-spacing:.14em; opacity:0; transition:opacity .3s var(--ease); color:var(--void); font-weight:700; }
body[data-cur="btn"] .cur-r{ width:64px; height:64px; }
body[data-cur="card"] .cur-r{ width:88px; height:88px; background:var(--bone); border-color:var(--bone); }
body[data-cur="card"] .cur-r b{ opacity:1; }
body[data-cur="drag"] .cur-r{ width:78px; height:78px; background:var(--bone); border-color:var(--bone); }
body[data-cur="drag"] .cur-r b{ opacity:1; }
@media (hover:none),(max-width:900px){ .cur,.cur-r{ display:none !important; } }

/* ---------- Intro ---------- */
.intro{ position:fixed; inset:0; z-index:500; background:var(--void); display:grid; place-items:center; }
.intro-b{ position:absolute; left:0; width:100%; background:var(--void); transition:transform 1s var(--ease-io); }
.intro-b:nth-child(1){ top:0; height:34%; }
.intro-b:nth-child(2){ top:34%; height:33%; transition-delay:80ms; }
.intro-b:nth-child(3){ top:67%; height:33%; transition-delay:160ms; }
.intro[data-out="true"] .intro-b{ transform:translateY(-101%); }
.intro-c{ position:relative; z-index:2; display:grid; gap:1rem; justify-items:center; transition:opacity .35s var(--ease); }
.intro[data-out="true"] .intro-c{ opacity:0; }
.intro-n{ font-family:var(--display); font-weight:700; font-size:clamp(3rem,10vw,7rem); line-height:1; color:var(--bone); font-variant-numeric:tabular-nums; }
.intro-r{ width:min(46vw,420px); height:2px; background:var(--wire); position:relative; overflow:hidden; }
.intro-r i{ position:absolute; inset:0; background:linear-gradient(90deg,var(--accent-lit),var(--accent-2)); transform:scaleX(0); transform-origin:left; }
body[data-intro="run"]{ overflow:hidden; }

/* ---------- Header ---------- */
.hdr{ position:fixed; top:0; left:0; right:0; z-index:120; transition:transform .45s var(--ease-io), background .4s var(--ease); }
.hdr[data-hide="true"]{ transform:translateY(-101%); }
.hdr[data-solid="true"]{ background:color-mix(in srgb, var(--void) 84%, transparent); backdrop-filter:blur(14px); }
.hdr-in{ display:flex; align-items:center; justify-content:space-between; height:64px; gap:1.5rem; }
.hdr-prog{ position:absolute; left:0; bottom:0; height:2px; width:100%; background:linear-gradient(90deg,var(--accent-lit),var(--accent-2)); transform:scaleX(var(--prog,0)); transform-origin:left; }
.logo{ font-family:var(--display); font-weight:700; font-size:1.15rem; text-transform:uppercase; color:var(--bone); text-decoration:none; position:relative; }
.logo::after{ content:""; position:absolute; left:0; bottom:-4px; height:2px; width:100%; background:var(--accent-lit); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease-io); }
.logo:hover::after{ transform:scaleX(1); }

.nav{ display:none; gap:.15rem; position:relative; }
.nav .pill{ position:absolute; top:0; bottom:0; left:0; width:0; background:var(--accent); z-index:0; transition:opacity .3s var(--ease); opacity:0; }
.nav[data-active="true"] .pill{ opacity:1; }
.nav a{ position:relative; z-index:1; font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); text-decoration:none; padding:.5rem .8rem; transition:color .3s var(--ease-io); }
.nav a:hover,.nav a[aria-current="true"]{ color:var(--bone); }
@media (min-width:1000px){ .nav{ display:flex; } }

.skip{ position:absolute; left:-9999px; background:var(--accent); color:var(--accent-ink); padding:.75rem 1rem; z-index:600; }
.skip:focus{ left:0; }

/* ---------- HERO ---------- */
.hero{
  position:relative; min-height:100svh; display:grid;
  grid-template-rows:auto 1fr auto; gap:clamp(1rem,3vh,2rem);
  padding-block:calc(64px + clamp(1rem,3.5vh,2rem)) clamp(1.5rem,4vh,3rem);
  overflow:hidden; background:var(--void);
}
#gl{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero-top,.hero-mid,.hero-in{ position:relative; z-index:2; width:100%; }
/* Capped against viewport height as well as width. On a 900px-tall laptop the
   width-only clamp gave a 121px headline that pushed the form's terms line off
   the bottom of the first screen. */
.hero h1{ font-size:min(clamp(2.35rem,8.4vw,8.6rem), 12vh); margin-bottom:clamp(1rem,2.5vh,1.75rem); }

.stamp{ display:flex; flex-wrap:wrap; gap:.4rem; }
.stamp span{
  padding:.45rem .85rem; border:1px solid var(--wire); color:var(--bone);
  background:color-mix(in srgb, var(--void) 80%, transparent); backdrop-filter:blur(6px);
  transition:border-color .35s var(--ease-io), transform .4s var(--spring), background .35s var(--ease);
}
.stamp span:hover{ border-color:var(--accent-lit); transform:translateY(-4px); background:var(--void); }
.stamp .live{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:700; }
.stamp .live::before{ content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--void); margin-right:.5rem; vertical-align:middle; animation:pulse 1.8s var(--ease-io) infinite; }
@keyframes pulse{ 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.3; transform:scale(.65)} }

/* the middle band earns its space: a kinetic scrambling ticker */
.hero-mid{ display:flex; align-items:center; }
.kin{ display:flex; flex-wrap:wrap; gap:.4rem 1rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.kin span{ padding:.35rem .7rem; background:color-mix(in srgb, var(--void) 82%, transparent); backdrop-filter:blur(6px); border:1px solid var(--wire); }
.kin b{ color:var(--accent-2); font-weight:700; }

.hero-foot{ display:grid; gap:1.5rem; align-items:end; }
@media (min-width:900px){ .hero-foot{ grid-template-columns:minmax(0,1fr) minmax(26rem,32rem); gap:3rem; } }
.hero-cta{ display:grid; gap:.6rem; }

/* ---------- THE ONE ASK, ABOVE THE FOLD ----------------------------------
   Below 900px the form is ordered ahead of the prose so the three fields and
   the submit button land inside the first screen. Everything that used to sit
   between the headline and the form -- the lede, the price block, the ticker,
   the scroll cue -- now sits underneath it. Verified by measure.mjs, which
   fails if #herolead's submit button is not visible at 390x844.
   -------------------------------------------------------------------------- */
@media (max-width:899px){
  .hero-cta{ order:1; }
  .hero-say{ order:2; }
  /* the kinetic ticker is 60px of decoration in the one place where 60px is
     the difference between seeing the form and not */
  .hero-mid{ display:none; }
  .hero{ min-height:0; padding-bottom:clamp(2rem,6vh,3rem); }
  .hero h1{ font-size:clamp(2.05rem,7.6vw,3rem); }
  .hero-foot{ gap:1.1rem; }
  .scrollcue{ display:none; }
}

.lf--hero{
  gap:.8rem;
  padding:clamp(1rem,3vw,1.4rem);
  border:1px solid var(--wire); border-top:2px solid var(--accent-lit);
  /* solid backing: the hero canvas animates straight through a tint */
  background:linear-gradient(rgba(var(--accent-rgb),.055),rgba(var(--accent-rgb),.055)), var(--obsidian);
}
.lf-head{ margin:0 0 .15rem; font-size:.95rem; line-height:1.45; color:var(--dim); }
.lf-head b{ color:var(--bone); font-weight:600; }
.lf--hero .lf-f{ gap:.3rem; }
.lf--hero .lf-f > .mono{ font-size:.6rem; letter-spacing:.14em; }
.lf--hero .lf-f input{ padding:.72rem .85rem; }
.lf--hero .lf-go{ justify-self:stretch; margin-top:.1rem; justify-content:center; }
/* .fine only had a rule inside .panel, so in the lead forms it was inheriting
   body size and reading as a paragraph rather than as terms. */
.lf .fine{ font-size:.78rem; line-height:1.5; color:var(--dim); margin:.35rem 0 0; }
.lf--hero .fine{ margin:0; }
.lf--hero .lf-msg{ min-height:0; }
.hero-alt{ margin:.9rem 0 0; font-size:.9rem; color:var(--dim); }
.hero-alt .tlink{ color:var(--bone); }
.scrollcue{ display:flex; align-items:center; gap:.75rem; margin-top:1.25rem; color:var(--dim); }
.scrollcue i{ display:block; width:52px; height:1px; background:var(--wire); position:relative; overflow:hidden; }
.scrollcue i::after{ content:""; position:absolute; inset:0; background:var(--accent-lit); transform:translateX(-100%); animation:cue 2.6s var(--ease-io) infinite; }
@keyframes cue{ 0%{transform:translateX(-100%)} 55%,100%{transform:translateX(100%)} }

/* ---------- Line-mask reveal (replaces the universal fade-up) ---------- */
.ln{ display:block; overflow:clip; padding-bottom:.06em; }
.ch{ display:inline-block; will-change:transform; }
[data-anim] .ch{ transform:translateY(112%); }
[data-anim].on .ch{ transform:translateY(0); transition:transform .95s var(--ease); transition-delay:calc(var(--i) * 16ms); }

[data-rev="mask"] .ln > *{ transform:translateY(106%) rotate(2.5deg); transform-origin:left top; transition:transform 1.05s var(--ease); }
[data-rev="mask"].on .ln > *{ transform:none; }
[data-rev="mask"] .ln:nth-child(2) > *{ transition-delay:90ms; }
[data-rev="mask"] .ln:nth-child(3) > *{ transition-delay:180ms; }

/* Wipe via an overlaying curtain, NOT clip-path on the element itself:
   clip-path zeroes the painted box, so IntersectionObserver never reports an
   intersection and the reveal can never fire. Self-locking. */
[data-rev="wipe"]{ position:relative; }
[data-rev="wipe"]::after{
  content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
  background:var(--coal); transform-origin:right;
  transition:transform .85s var(--ease);
}
[data-rev="wipe"].on::after{ transform:scaleX(0); }

[data-rev="scale"]{ opacity:0; transform:scale(.94); filter:blur(3px); transition:opacity .8s var(--ease), transform .9s var(--ease), filter .8s var(--ease); }
[data-rev="scale"].on{ opacity:1; transform:none; filter:none; }

[data-rev="slide"] > *{ opacity:0; transform:translateX(-26px); transition:opacity .7s var(--ease), transform .8s var(--ease); }
[data-rev="slide"].on > *{ opacity:1; transform:none; }
[data-rev="slide"].on > *:nth-child(2){ transition-delay:70ms }
[data-rev="slide"].on > *:nth-child(3){ transition-delay:140ms }
[data-rev="slide"].on > *:nth-child(4){ transition-delay:210ms }

/* --p (published per section by JS) drives real parallax, so the write earns itself */
.shead{ transform:translateY(calc((0.5 - var(--p)) * 26px)); }
.pain-i .num{ opacity:calc(.45 + var(--p) * .75); }
.grid6 .cellx:nth-child(3n+2){ margin-top:calc((0.5 - var(--p)) * -18px); }

/* ---------- Section head ---------- */
.shead{ display:grid; gap:1.25rem; margin-bottom:clamp(2.5rem,5.5vw,4.5rem); }
@media (min-width:960px){ .shead{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:3rem; align-items:start; } }
.shead > .dim{ max-width:44ch; padding-top:.5em; }
.shead .mono{ grid-column:1/-1; display:flex; align-items:center; gap:1.25rem; }
.shead .mono::after{ content:""; flex:1; height:2px; background:currentColor; opacity:.22; transform:scaleX(0); transform-origin:left; transition:transform 1.2s var(--ease) .1s; }
.shead.on .mono::after{ transform:scaleX(1); }

/* ---------- PAIN ---------- */
.pain-i{
  display:grid; gap:.75rem 2.5rem; padding-block:clamp(1.75rem,3.5vw,2.75rem);
  align-items:center; position:relative;
}
.pain-i::after{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .8s var(--ease-io); }
.pain-i.on::after{ transform:scaleX(1); }
@media (min-width:900px){ .pain-i{ grid-template-columns:7rem minmax(0,20ch) minmax(0,1fr) 9rem; } }
.pain-i::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent-lit); transform:scaleY(0); transform-origin:top; transition:transform .5s var(--ease); }
.pain-i:hover::before{ transform:scaleY(1); }
/* transform, never padding — padding animation thrashes layout every frame */
.pain-i > *{ transition:transform .55s var(--ease); }
.pain-i:hover > *{ transform:translateX(1.1rem); }
.pain-i .num{ font-family:var(--display); font-weight:700; font-size:clamp(2.4rem,4.5vw,4rem); line-height:.8; position:relative; transition:color .4s var(--ease-io), transform .55s var(--ease); }
.pain-i:hover .num{ color:var(--accent-lit); }
.pain-i .t{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(1.1rem,1.8vw,1.5rem); line-height:.95; letter-spacing:-.02em; }
.pain-i .d{ color:var(--dim-lt); }
.pain-i canvas{ width:100%; height:72px; display:block; transition:transform .5s var(--spring); transform-origin:center right; }
.pain-i:hover canvas{ transform:translateX(1.1rem) scaleY(1.25); }

/* ---------- TRADE ---------- */
.trade{ display:grid; border:2px solid currentColor; }
@media (min-width:860px){ .trade{ grid-template-columns:1fr 1fr; } }
.trade > div{ padding:clamp(1.75rem,3.2vw,3rem); position:relative; overflow:hidden; isolation:isolate; transition:color .5s var(--ease-io); }
.trade > div + div{ border-top:2px solid currentColor; }
@media (min-width:860px){ .trade > div + div{ border-top:0; border-left:2px solid currentColor; } }
.trade > div::before{ content:""; position:absolute; inset:0; background:var(--void); z-index:-1; transform:translateY(101%); transition:transform .55s var(--ease-io); }
.trade > div:hover::before{ transform:translateY(0); }
.trade > div:hover{ color:var(--bone); }
.trade > div:hover .dim{ color:var(--dim); }
.trade h3{ margin:1rem 0 .75rem; }
.trade svg{ width:100%; height:auto; margin-top:1.5rem; overflow:visible; }

/* the graphics that were dead outlines — now they build */
.tg{ transform-origin:center; transition:transform .7s var(--spring), opacity .5s var(--ease), fill .5s var(--ease); fill:transparent; }
.trade > div:hover .tg,.trade.on .tg{ fill:currentColor; fill-opacity:.16; }
.trade > div:hover .tg:nth-of-type(1),.trade.on .tg:nth-of-type(1){ transition-delay:0ms;   transform:translateY(-6px); }
.trade > div:hover .tg:nth-of-type(2),.trade.on .tg:nth-of-type(2){ transition-delay:110ms; transform:translateY(-6px); }
.trade > div:hover .tg:nth-of-type(3),.trade.on .tg:nth-of-type(3){ transition-delay:220ms; transform:translateY(-6px); }
.tstar{ stroke-dasharray:var(--len,160); stroke-dashoffset:var(--len,160); transition:stroke-dashoffset 1s var(--ease), fill .45s var(--ease); fill:transparent; }
.trade.on .tstar{ stroke-dashoffset:0; }
.trade.on .tstar:nth-of-type(2){ transition-delay:90ms }
.trade.on .tstar:nth-of-type(3){ transition-delay:180ms }
.trade.on .tstar:nth-of-type(4){ transition-delay:270ms }
.trade.on .tstar:nth-of-type(5){ transition-delay:360ms }
.trade > div:hover .tstar{ fill:currentColor; fill-opacity:.9; }

/* ---------- WORK ---------- */
.pin{ position:relative; }
.pin-stick{ position:sticky; top:0; height:100svh; display:flex; align-items:center; overflow:hidden; z-index:1; }
.pin-track{ display:flex; gap:clamp(1rem,2.2vw,1.75rem); padding-inline:var(--gutter); will-change:transform; }
.pin-intro{ flex:none; width:min(68vw,560px); display:grid; align-content:center; gap:1.25rem; padding-right:2rem; }
.card{
  flex:none; width:min(76vw,780px); border:2px solid var(--wire); background:var(--obsidian);
  display:flex; flex-direction:column; overflow:hidden;
  transition:border-color .5s var(--ease-io), transform .7s var(--ease), box-shadow .6s var(--ease);
}
.card:hover{ border-color:var(--accent-lit); transform:translateY(-16px); box-shadow:0 40px 80px -40px rgba(var(--accent-lit-c-rgb), .45); }
.card-img{ aspect-ratio:16/9; position:relative; overflow:hidden; border-bottom:2px solid var(--wire); }
.card-img canvas{ position:absolute; inset:0; width:100%; height:100%; }
.card-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(105deg,transparent 34%,rgba(var(--accent-2-rgb), .40) 50%,transparent 66%); transform:translateX(-120%); transition:transform 1s var(--ease); }
.card:hover .card-img::after{ transform:translateX(120%); }
.card-b{ padding:clamp(1.25rem,2.2vw,1.9rem); display:grid; gap:.6rem; }
.card-b .mono{ color:var(--accent-lit); }
.card-live{ display:inline-flex; align-items:center; gap:.5rem; font-family:"JetBrains Mono",monospace; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-lit); }
.card-live::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent-lit); animation:pulse 1.8s var(--ease-io) infinite; }

/* ---------- SHEET ---------- */
.sheet{ border:2px solid var(--wire); background:var(--obsidian); }
.sheet-h{ display:flex; flex-wrap:wrap; gap:.75rem 2rem; justify-content:space-between; align-items:center; padding:clamp(1rem,1.8vw,1.5rem) clamp(1.25rem,2.2vw,2rem); border-bottom:2px solid var(--wire); }
.row{
  display:grid; grid-template-columns:minmax(0,1fr) 9rem auto; gap:.25rem 1.5rem;
  padding:clamp(.85rem,1.6vw,1.25rem) clamp(1.25rem,2.2vw,2rem);
  border-bottom:1px solid var(--wire); align-items:center; position:relative;
  clip-path:inset(0 100% 0 0); transition:clip-path .8s var(--ease), background .35s var(--ease-io);
}
.sheet.on .row{ clip-path:inset(0 0 0 0); transition-delay:calc(var(--n) * 70ms); }
.row:hover{ background:var(--coal); }
.row .rt{ font-weight:600; }
.row .rd{ grid-column:1/2; grid-row:2; font-size:.88rem; color:var(--dim); }
.row .rp{ grid-column:3; grid-row:1/3; font-family:var(--mono); font-weight:700; text-align:right; }
.row .bar{ grid-column:2; grid-row:1/3; height:6px; background:var(--wire); position:relative; overflow:hidden; }
.row .bar i{ position:absolute; inset:0; background:linear-gradient(90deg,var(--accent-lit),var(--accent-2)); transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease); }
.sheet.on .row .bar i{ transform:scaleX(var(--w,0)); transition-delay:calc(var(--n) * 70ms + 300ms); }
.row:hover .bar i{ filter:brightness(1.25); }
@media (max-width:760px){
  .row{ grid-template-columns:minmax(0,1fr) auto; }
  .row .bar{ grid-column:1/-1; grid-row:3; margin-top:.5rem; }
  .row .rp{ grid-column:2; grid-row:1; }
}
.sheet-f{ display:grid; gap:.5rem 2rem; grid-template-columns:minmax(0,1fr) auto; padding:clamp(1.25rem,2.2vw,2rem); align-items:end; background:var(--accent); color:var(--accent-ink); }
.sheet-f .k{ font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; }
.sheet-f .now{ font-family:var(--display); font-weight:700; font-size:clamp(3rem,7.5vw,6.5rem); line-height:.8; letter-spacing:-.04em; grid-column:2; font-variant-numeric:tabular-nums; }

/* the strike gets DRAWN, not baked into text-decoration */
.was{ position:relative; font-family:var(--mono); display:inline-block; width:fit-content; justify-self:end; }
.was::after{ content:""; position:absolute; left:-2px; right:-2px; top:50%; height:3px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease-io); }
.on .was::after,.sheet.on .was::after{ transform:scaleX(1); transition-delay:.55s; }


.alt{ margin-top:2rem; border:2px solid var(--wire); padding:clamp(1.5rem,2.8vw,2.5rem); display:grid; gap:2rem; position:relative; overflow:hidden; transition:border-color .5s var(--ease-io); }
.alt::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 120% at 100% 0%, rgba(var(--accent-rgb), .22), transparent 70%); opacity:0; transition:opacity .6s var(--ease); }
.alt:hover{ border-color:var(--accent-lit); }
.alt:hover::before{ opacity:1; }
.alt > *{ position:relative; z-index:1; }
@media (min-width:860px){ .alt{ grid-template-columns:minmax(0,1fr) 16rem; align-items:start; } }
.alt ul{ list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.45rem; color:var(--dim); }
.alt li{ padding-left:1.6rem; position:relative; transition:color .3s var(--ease-io), transform .45s var(--spring); }
.alt li::before{ content:""; position:absolute; left:0; top:.68em; width:.8rem; height:2px; background:var(--accent-lit); transition:width .45s var(--ease); }
.alt li:hover{ color:var(--bone); transform:translateX(7px); }
.alt li:hover::before{ width:1.2rem; }
.alt-p .was{ color:var(--dim); display:block; }
.alt-p .now{ font-family:var(--display); font-weight:700; font-size:clamp(2.5rem,4.6vw,3.75rem); line-height:.85; letter-spacing:-.03em; color:var(--accent-lit); }
.alt-p .btn{ width:100%; margin-top:1.25rem; }

/* ---------- ESTIMATOR ---------- */
.est{ display:grid; gap:clamp(2rem,3.5vw,3.5rem); }
@media (min-width:1000px){ .est{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:start; } }
.q{ padding-block:clamp(1.5rem,2.6vw,2.25rem); border-top:2px solid var(--wire); }
.q:first-child{ border-top:0; padding-top:0; }
.q .qt{ display:block; font-family:var(--ui); font-weight:600; font-size:clamp(1.15rem,1.85vw,1.55rem); line-height:1.15; letter-spacing:-.02em; margin:.75rem 0 1.25rem; }
.q .hint{ font-size:.88rem; color:var(--dim); margin-top:1rem; }

.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{
  position:relative; isolation:isolate; overflow:hidden;
  font-family:var(--mono); font-size:.68rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  padding:.72rem 1.05rem; border:2px solid var(--wire); background:transparent; color:var(--bone);
  border-radius:0; cursor:pointer;
  transition:border-color .3s var(--ease-io), color .3s var(--ease-io), transform .4s var(--spring);
}
.chip::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--accent); transform:translateY(101%); transition:transform .4s var(--ease-io); }
.chip:hover{ border-color:var(--accent); transform:translateY(-3px); color:var(--accent-ink); }
.chip:hover::before{ transform:translateY(0); }
.chip[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:700; }
.chip::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(currentColor 42%, transparent 46%);
  background-size:6px 6px; opacity:0;
  transition:opacity .4s var(--ease-io);
}
.chip:hover::after,.chip[aria-pressed="true"]::after{ opacity:.18; }
.chip:active{ transform:translateY(1px); }
.chip:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--coal), 0 0 0 5px var(--accent-2); }
.chip[aria-pressed="true"]::before{ transform:translateY(0); }
/* click ripple from the pointer */
.chip .rip{ position:absolute; width:8px; height:8px; border-radius:50%; background:var(--accent-2); transform:translate(-50%,-50%) scale(0); opacity:.85; pointer-events:none; z-index:-1; animation:rip .6s var(--ease) forwards; }
@keyframes rip{ to{ transform:translate(-50%,-50%) scale(26); opacity:0; } }
.chip .pl{ opacity:.65; margin-left:.4rem; }

.rangewrap{ display:flex; align-items:baseline; gap:1rem; }
.rangeval{ font-family:var(--display); font-weight:700; font-size:clamp(2.4rem,4.5vw,3.75rem); line-height:.85; letter-spacing:-.03em; color:var(--accent-lit); font-variant-numeric:tabular-nums; }
.rangetrack{ position:relative; margin-top:1.5rem; }
.rangetrack .fill{ position:absolute; left:0; top:50%; height:2px; margin-top:-1px; background:linear-gradient(90deg,var(--accent-lit),var(--accent-2)); pointer-events:none; transition:width .35s var(--ease); }
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:2px; background:var(--wire); outline:none; margin:0; position:relative; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:24px; height:24px; background:var(--accent-lit); border:0; border-radius:0; cursor:grab; transition:transform .25s var(--spring), box-shadow .35s var(--ease); position:relative; z-index:2; }
input[type=range]::-webkit-slider-thumb:hover{ transform:scale(1.3) rotate(45deg); box-shadow:0 0 34px -2px var(--accent-lit); }
input[type=range]:active::-webkit-slider-thumb{ cursor:grabbing; transform:scale(1.15) rotate(45deg); }
input[type=range]::-moz-range-thumb{ width:22px; height:22px; background:var(--accent-lit); border:0; border-radius:0; cursor:grab; }

.panel{ border:2px solid var(--accent-lit); position:sticky; top:84px; background:var(--obsidian); overflow:hidden; }
.panel-h{ padding:clamp(1.25rem,2.2vw,1.9rem); border-bottom:2px solid var(--accent-lit); }
.panel-b{ padding:clamp(1.25rem,2.2vw,1.9rem); }
.prow{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline; padding-block:.5rem; }
.prow .k{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.prow .v{ font-family:var(--mono); font-weight:500; font-variant-numeric:tabular-nums; transition:color .3s var(--ease); }
.prow .v.flash{ color:var(--accent-2); }
.pfinal{ margin-top:1.25rem; padding-top:1.25rem; border-top:2px solid var(--accent-lit); display:flex; justify-content:space-between; align-items:end; gap:1rem; }
.pfinal .k{ font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; }
.pfinal .v{ font-family:var(--display); font-weight:700; font-size:clamp(2.8rem,6.5vw,5rem); line-height:.8; letter-spacing:-.04em; color:var(--accent-lit); font-variant-numeric:tabular-nums; }
.panel .btn{ width:100%; margin-top:1.5rem; }
.panel .fine{ font-size:.78rem; color:var(--dim); margin-top:1rem; }

/* live wireframe preview — fills what was 60% dead viewport */
.est-col{ display:flex; flex-direction:column; min-width:0; }
.wf{ border:2px solid var(--wire); margin-top:clamp(1.5rem,3vw,2.5rem); background:var(--obsidian); flex:1; display:flex; flex-direction:column; }
.wf-h{ padding:.9rem 1.1rem; border-bottom:2px solid var(--wire); display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.wf canvas{ width:100%; flex:1; min-height:300px; display:block; }

/* ---------- PILLARS ---------- */
.grid6{ display:grid; border-top:2px solid var(--wire); }
@media (min-width:700px){ .grid6{ grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .grid6{ grid-template-columns:repeat(3,1fr); } }
.cellx{
  padding:clamp(1.75rem,2.8vw,2.5rem) clamp(1.25rem,2vw,2rem);
  border-bottom:2px solid var(--wire); border-right:2px solid var(--wire);
  position:relative; overflow:hidden; isolation:isolate;
  opacity:0; transform:scale(.94); filter:blur(3px);
  transition:opacity .8s var(--ease), transform .9s var(--ease), filter .8s var(--ease), color .5s var(--ease-io);
  transition-delay:calc(var(--d,0) * 70ms);
}
.cellx.on{ opacity:1; transform:none; filter:none; }
.cellx::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--coal); transform:translateY(101%); transition:transform .55s var(--ease-io); }
.cellx:hover::before{ transform:translateY(0); }
.cellx .mono{ color:var(--accent-lit); }
.cellx h3{ margin:1.25rem 0 .6rem; }
.cellx .gfx{ height:74px; margin-bottom:.5rem; }
.cellx .gfx svg{ width:auto; height:100%; overflow:visible; }
.cellx::after{ content:""; position:absolute; left:0; bottom:0; height:3px; width:100%; background:linear-gradient(90deg,var(--accent-lit),var(--accent-2)); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease-io); }
.cellx:hover::after{ transform:scaleX(1); }

/* ---------- SVG motion — scoped to BOTH pillars and process steps ---------- */
.gfx .g1,.gfx .g2,.gfx .g3,
.step svg .g1,.step svg .g2,.step svg .g3{
  transition:transform .65s var(--spring), opacity .5s var(--ease);
}
.cellx:hover .gfx .g1,.cellx.on .gfx .g1,.step:hover svg .g1,.step.on svg .g1{ transform:translateY(-10px); }
.cellx:hover .gfx .g2,.cellx.on .gfx .g2,.step:hover svg .g2,.step.on svg .g2{ transform:translateY(8px); }
.cellx:hover .gfx .g3,.cellx.on .gfx .g3,.step:hover svg .g3,.step.on svg .g3{ transform:translateX(7px); }
.cellx.on .gfx .g1,.cellx.on .gfx .g2,.cellx.on .gfx .g3{ transition-delay:.35s; }

.gfx .spin,.step svg .spin{ transform-origin:center; transition:transform .9s var(--ease); }
.cellx:hover .gfx .spin,.cellx.on .gfx .spin,.step:hover svg .spin,.step.on svg .spin{ transform:rotate(180deg); }

/* draw-on: --len is measured by JS with getTotalLength(), never guessed */
.draw{ stroke-dasharray:var(--len,200); stroke-dashoffset:var(--len,200); transition:stroke-dashoffset 1.15s var(--ease); }
.cellx.on .draw,.cellx:hover .draw,.step.on .draw{ stroke-dashoffset:0; }
.step.on .draw{ transition-delay:.3s; }
.step.on svg .g1,.step.on svg .g2,.step.on svg .g3{ transition-delay:.35s; }
.gfx .wave{ animation:wave 3.2s var(--ease-io) infinite; }
@keyframes wave{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* ---------- PROCESS ---------- */
.steps{ display:grid; border-top:2px solid currentColor; }
.step{ padding-block:clamp(2rem,3.5vw,3rem); border-bottom:2px solid currentColor; display:grid; gap:1rem 3rem; align-items:center; position:relative; overflow:hidden; }
@media (min-width:900px){ .step{ grid-template-columns:9rem minmax(0,24ch) minmax(0,1fr) 11rem; } }
.step::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:0; background:currentColor; opacity:.05; transition:width .6s var(--ease-io); }
.step:hover::before{ width:100%; }
.step > *{ position:relative; transition:transform .55s var(--ease); }
.step:hover > *{ transform:translateX(.85rem); }
.step .sn{ font-family:var(--display); font-weight:700; font-size:clamp(2.8rem,6vw,5.5rem); line-height:.78; transition:color .45s var(--ease-io), transform .55s var(--ease); }
.step:hover .sn{ color:var(--accent-lit); }
.step .d{ color:var(--dim-lt); }
.step svg{ width:100%; height:auto; overflow:visible; }

/* ---------- FAQ ---------- */
.faq details{ border-top:2px solid var(--wire); position:relative; }
.faq details:last-of-type{ border-bottom:2px solid var(--wire); }
.faq details::after{ content:""; position:absolute; left:0; bottom:-2px; height:2px; width:100%; background:var(--accent-lit); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease-io); }
.faq details[open]::after{ transform:scaleX(1); }
.faq summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:2rem; align-items:center;
  padding-block:clamp(1.1rem,1.8vw,1.6rem);
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1rem,1.7vw,1.4rem); letter-spacing:-.015em; line-height:1;
  transition:color .35s var(--ease-io);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary > span:first-child{ transition:transform .5s var(--ease); display:block; }
.faq summary:hover > span:first-child{ transform:translateX(.7rem); }
.faq summary:hover{ color:var(--accent-lit); }
.faq .ico{ position:relative; width:16px; height:16px; flex:none; transition:transform .5s var(--spring); }
.faq .ico::before,.faq .ico::after{ content:""; position:absolute; background:currentColor; transition:transform .45s var(--ease-io); }
.faq .ico::before{ left:0; right:0; top:7px; height:2px; }
.faq .ico::after{ top:0; bottom:0; left:7px; width:2px; }
.faq details[open] .ico{ transform:rotate(90deg); }
.faq details[open] .ico::after{ transform:scaleY(0); }
.faq details[open] summary{ color:var(--accent-lit); }
.faq .awrap{ overflow:hidden; height:0; }
.no-js .faq .awrap,html:not(.js) .faq .awrap{ height:auto; }
.faq .a{ color:var(--dim); max-width:70ch; padding-bottom:1.5rem; }
.faq .a .w{ display:inline-block; opacity:0; transform:translateY(9px); }
.faq details[open] .a .w{ opacity:1; transform:none; transition:opacity .5s var(--ease), transform .5s var(--ease); transition-delay:calc(var(--i) * 14ms + 120ms); }

/* ---------- FINAL ---------- */
.final{ position:relative; }
.final .mega{ margin-block:1.5rem 2rem; }
.final-cta{ display:grid; gap:.6rem; max-width:38rem; }
@media (min-width:520px){ .final-cta{ grid-auto-flow:column; grid-auto-columns:1fr; } }

/* ---------- FOOTER ---------- */
.ftr{ background:var(--void); color:var(--dim); padding-block:clamp(3rem,5vw,4.5rem) 2rem; border-top:2px solid var(--wire); position:relative; overflow:hidden; }
.ftr canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.ftr .wrap{ position:relative; z-index:1; }
.ftr-g{ display:grid; gap:2rem; padding-bottom:2.5rem; }
@media (min-width:860px){ .ftr-g{ grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr)); gap:3rem; } }
.ftr h4{ font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:1rem; }
.ftr a{ color:var(--bone); text-decoration:none; display:inline-block; margin-bottom:.5rem; font-size:.95rem; transition:color .3s var(--ease-io), transform .4s var(--spring); }
.ftr a:hover{ color:var(--accent-lit); transform:translateX(7px); }
.ftr-b{ border-top:1px solid var(--wire); padding-top:1.5rem; display:flex; flex-wrap:wrap; gap:.75rem 2rem; justify-content:space-between; font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; }

/* ---------- Mobile bar ---------- */
.mbar{
  position:fixed; left:0; right:0; bottom:0; z-index:110; display:flex; align-items:stretch;
  background:color-mix(in srgb, var(--void) 94%, transparent); backdrop-filter:blur(16px);
  border-top:2px solid var(--wire);
  transform:translateY(110%); transition:transform .5s var(--ease-io);
}
.mbar::before{ content:""; position:absolute; left:0; top:-2px; height:2px; width:100%;
  background:linear-gradient(90deg,var(--accent-lit),var(--accent-2)); transform:scaleX(var(--prog,0)); transform-origin:left; }
.mbar[data-on="true"]{ transform:none; }
.mbar .btn{ flex:1 1 0; padding:1.05rem .5rem; font-size:.64rem; border-width:0; align-items:center; }
.mbar .btn + .btn{ border-left:2px solid var(--wire); }
@media (min-width:1000px){ .mbar{ display:none; } }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-rev],[data-rev] > *,[data-rev] .ln > *,[data-anim] .ch,.cellx{ opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important; }
  .row{ clip-path:none !important; }
  .pin-stick{ position:static; height:auto; }
  .pin-track{ flex-wrap:wrap; }
  #gl,.sfx,.cur,.cur-r,.intro{ display:none !important; }
  .faq .awrap{ height:auto !important; }
  .faq .a .w{ opacity:1 !important; transform:none !important; }
}


/* ---------- Booking ----------
   The landing path. A visitor who wants to talk should never have to hunt for
   a way to do it, so booking appears in the hero, in the first section they
   scroll into, in the closing CTA and in the mobile bar. */
.hero-book{ margin-top:1.1rem; font-size:.95rem; color:var(--dim); }
.hero-book .tlink{ color:var(--bone); }

.book-grid{ display:grid; gap:clamp(2rem,4vw,3.5rem); }
@media (min-width:960px){ .book-grid{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:start; } }

.book-list{ list-style:none; margin:0; padding:0; border-top:2px solid var(--wire); }
.book-list li{
  display:grid; gap:.5rem 2rem; align-items:start; position:relative;
  padding-block:clamp(1.4rem,2.6vw,2rem); border-bottom:2px solid var(--wire);
}
@media (min-width:620px){ .book-list li{ grid-template-columns:5rem minmax(0,1fr); } }
.book-list li::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent-lit);
  transform:scaleY(0); transform-origin:top; transition:transform .5s var(--ease);
}
.book-list li:hover::before{ transform:scaleY(1); }
.book-list li > *{ transition:transform .55s var(--ease); }
.book-list li:hover > *{ transform:translateX(1rem); }
.book-list .bn{ font-family:var(--display); font-weight:700; font-size:clamp(1.9rem,3.2vw,2.9rem); line-height:.8; color:var(--accent-lit); }
.book-list .bt{ font-family:var(--ui); font-weight:600; font-size:clamp(1.05rem,1.6vw,1.3rem); letter-spacing:-.01em; }
.book-list .bd{ grid-column:1/-1; color:var(--dim); font-size:.97rem; }
@media (min-width:620px){ .book-list .bd{ grid-column:2/3; } }

.book-card{
  border:2px solid var(--accent-lit); background:var(--obsidian);
  padding:clamp(1.5rem,2.8vw,2.25rem); position:relative; overflow:hidden;
}
.book-card::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(70% 110% at 100% 0%, rgba(var(--accent-rgb), .24), transparent 70%);
  pointer-events:none;
}
.book-card > *{ position:relative; z-index:1; }
.book-dur{
  font-family:var(--display); font-weight:700; line-height:.8; letter-spacing:-.04em;
  font-size:clamp(3.4rem,7vw,5.5rem); margin:.75rem 0 1rem; color:var(--bone);
}
.book-dur span{ font-family:var(--mono); font-size:.9rem; letter-spacing:.16em; margin-left:.5rem; color:var(--dim); }
.book-note{ font-size:.95rem; }
.book-cta{ width:100%; margin-top:1.5rem; }
.book-alt{ margin-top:1rem; font-size:.88rem; color:var(--dim); }

@media (min-width:520px){ .final-cta--3{ grid-auto-columns:1fr; max-width:56rem; } }

/* ==========================================================================
   PALETTE COMPARE SWITCH — review tool, delete with the markup in index.html
   once the palette is chosen. Deliberately styled outside the design language
   so it never gets mistaken for a real control on the page.
   ========================================================================== */
.themeswitch{
  position:fixed; z-index:900; left:50%; bottom:18px; transform:translateX(-50%);
  display:flex; align-items:center; gap:6px;
  padding:6px 6px 6px 12px;
  background:rgba(10,10,10,.82); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16); border-radius:999px;
  font-family:var(--mono); box-shadow:0 18px 50px -18px rgba(0,0,0,.9);
}
.themeswitch > .mono{ color:rgba(255,255,255,.45); font-size:.6rem; letter-spacing:.16em; }
.themeswitch .ts-key{
  border:1px solid rgba(255,255,255,.22); border-radius:5px;
  padding:2px 6px; font-size:.55rem; color:rgba(255,255,255,.5);
}
.themeswitch button{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:.62rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.12em;
  padding:8px 14px; border-radius:999px; cursor:pointer;
  color:rgba(255,255,255,.62); background:transparent;
  border:1px solid transparent;
  transition:color .2s, background .2s, border-color .2s;
}
.themeswitch button i{ width:11px; height:11px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); }
.themeswitch button:hover{ color:#fff; background:rgba(255,255,255,.07); }
.themeswitch button[aria-pressed="true"]{
  color:#fff; background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.3);
}
/* on phones it would cover the fixed CTA bar */
@media (max-width:999px){ .themeswitch{ bottom:80px; } }
@media print{ .themeswitch{ display:none; } }


/* ==========================================================================
   TERMS BLOCK, DEPOSIT BUTTON, LEAD FORM
   The terms block is a deliberate visual rhyme with the paid creative: two
   equal figures divided by a hairline. Someone arriving from an ad should
   recognise the shape before they read a word, so if the creative changes
   shape, this has to change with it.
   ========================================================================== */

/* ---------- the 50/50 terms statement ----------
   A two-row ledger: two equal figures with a gold hairline between them.
   Built as a grid with display:contents on the pairs so the figures and the
   labels land in shared columns and stay aligned no matter how long the
   labels get. It stacks the same way at every width, in all four places it
   appears, which is why the rule is horizontal rather than vertical -- a
   vertical divider orphans itself the moment the block has to wrap. */
.terms{
  display:grid; grid-template-columns:auto 1fr;
  align-items:baseline; gap:.5rem .85rem;
  margin:1.6rem 0 0;
  padding:1.05rem 1.25rem;
  border:1px solid var(--wire);
  border-left:2px solid var(--accent-2);
  /* solid backing, not a tint: this block sits over the animated hero
     canvas and the dot field bleeds straight through a transparent fill. */
  background:
    linear-gradient(rgba(var(--accent-2-rgb),.055), rgba(var(--accent-2-rgb),.055)),
    var(--obsidian);
  max-width:40ch;
}
.tpair{ display:contents; }
.tfig{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.35rem,2.1vw,1.7rem); line-height:1;
  color:var(--accent-2); letter-spacing:-.01em;
}
.tlbl{
  font-family:var(--mono); font-size:.63rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.14em; color:var(--dim);
  line-height:1.3;
}
.trule{
  grid-column:1 / -1; width:100%; height:1px;
  background:var(--accent-2); opacity:.3; margin:.1rem 0;
}
/* The total is the number the ad promised, so it is the number that leads.
   The two $250s read as a breakdown of it, not as a second price. */
.tpair--tot .tfig{ font-size:clamp(1.9rem,3.2vw,2.5rem); }
.tpair--tot .tlbl{ color:var(--bone); font-weight:700; }
/* on the bone field the hairline and dim text have to flip */
.blk--bone .terms{ background:linear-gradient(rgba(0,0,0,.04),rgba(0,0,0,.04)), var(--bone-2); border-color:rgba(0,0,0,.14); }
.blk--bone .tpair--tot .tlbl{ color:var(--void); }

/* ---------- the deposit button: gold, so it never reads as the primary ---------- */
.btn--gold{ --bg:var(--accent-2); --fg:var(--void); border-color:var(--accent-2); }
.btn--gold::before{ background:var(--bone); }
.btn--gold:hover{ color:var(--void); box-shadow:0 14px 46px -14px rgba(var(--accent-2-rgb),.55); }

/* ---------- the start block: form + the already-decided rail ---------- */
.startgrid{
  display:grid; gap:clamp(1.5rem,3vw,3rem);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:start; margin-top:2.25rem; text-align:left;
}
@media (max-width:900px){ .startgrid{ grid-template-columns:1fr; } }

.lf{ display:grid; gap:1rem; }
.lf-row{ display:grid; gap:1rem; grid-template-columns:1fr 1fr; }
@media (max-width:520px){ .lf-row{ grid-template-columns:1fr; } }

.lf-f{ display:grid; gap:.45rem; }
.lf-f > .mono{ color:var(--dim); }
.lf-f input{
  width:100%; font-family:var(--ui); font-size:1rem; color:var(--bone);
  background:var(--coal); border:1px solid var(--wire); border-radius:0;
  padding:.95rem 1rem; transition:border-color .25s var(--ease-io), background .25s var(--ease-io);
}
.lf-f input::placeholder{ color:var(--dim-lt); }
.lf-f input:focus{ outline:none; border-color:var(--accent-lit); background:var(--obsidian); }
.lf-f.bad input{ border-color:#c2564a; }
.lf-f.bad > .mono{ color:#c2564a; }

/* honeypot: present for bots, gone for people and for screen readers */
.lf-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.lf-go{ justify-self:start; margin-top:.35rem; }
.lf-go[disabled]{ opacity:.55; cursor:progress; }

.lf-msg{ margin:0; font-size:.92rem; line-height:1.5; min-height:1.2em; color:var(--dim); }
.lf-msg--ok{ color:var(--accent-lit); }
.lf-msg--bad{ color:#e0857a; }

/* once it has sent, the fields have nothing left to say */
.lf--done .lf-row, .lf--done .lf-f, .lf--done .lf-go, .lf--done .fine{ display:none; }
.lf--done .lf-msg{ font-size:1.05rem; }

.startside{ display:grid; gap:1.1rem; align-content:start; }
.startside .terms{ margin-top:0; max-width:none; }
.startask{ margin:0; font-size:.95rem; line-height:1.5; max-width:34ch; }
.startside .btn{ justify-self:start; }
.startalt{ margin:0; font-size:.9rem; color:var(--dim); line-height:1.7; }

/* ==========================================================================
   SECURE / THANKS — standalone pages that borrow the shell
   ========================================================================== */
.page{ min-height:100vh; display:grid; align-content:center; padding-block:clamp(4rem,10vh,7rem); }
.page .wrap{ max-width:960px; }
.pback{ display:inline-block; margin-bottom:2rem; font-family:var(--mono); font-size:.68rem;
  text-transform:uppercase; letter-spacing:.18em; color:var(--dim); text-decoration:none; }
.pback:hover{ color:var(--accent-lit); }

.seats{
  display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1.4rem;
  padding:.5rem .85rem; border:1px solid rgba(var(--accent-2-rgb),.45);
  background:rgba(var(--accent-2-rgb),.07);
  font-family:var(--mono); font-size:.66rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.15em; color:var(--accent-2);
}
.seats i{ width:7px; height:7px; border-radius:50%; background:var(--accent-2);
  animation:seatpulse 2.4s var(--ease-io) infinite; }
@keyframes seatpulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.72); } }

.secgrid{ display:grid; gap:clamp(1.75rem,3.5vw,3.25rem); grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  align-items:start; margin-top:2.5rem; }
@media (max-width:880px){ .secgrid{ grid-template-columns:1fr; } }

.ledger{ border:1px solid var(--wire); background:var(--coal); }
.ledger-h{ padding:1.1rem 1.35rem; border-bottom:1px solid var(--wire);
  font-family:var(--mono); font-size:.66rem; text-transform:uppercase;
  letter-spacing:.16em; color:var(--accent-lit); }
.ledger-b{ padding:.4rem 1.35rem 1.35rem; }
.lrow{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:1rem 0; border-bottom:1px solid var(--wire); }
.lrow:last-of-type{ border-bottom:0; }
.lrow .k{ font-size:.95rem; color:var(--dim); }
.lrow .k b{ display:block; color:var(--bone); font-weight:500; margin-bottom:.15rem; }
.lrow .v{ font-family:var(--display); font-weight:700; font-size:1.35rem; color:var(--bone); white-space:nowrap; }
.lrow--now{ border-bottom:0; padding-top:1.25rem; margin-top:.4rem; border-top:2px solid var(--accent-2); }
.lrow--now .v{ color:var(--accent-2); font-size:2rem; }
.lrow--later .v{ color:var(--dim); }

.steps3{ display:grid; gap:1.05rem; margin:0; padding:0; list-style:none; counter-reset:s3; }
.steps3 li{ display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:start;
  font-size:.97rem; line-height:1.5; color:var(--dim); }
.steps3 li b{ color:var(--bone); font-weight:500; }
.steps3 li::before{ counter-increment:s3; content:counter(s3,decimal-leading-zero);
  font-family:var(--mono); font-size:.68rem; font-weight:700; letter-spacing:.1em;
  color:var(--accent-lit); padding-top:.28rem; }

.paybox{ display:grid; gap:1rem; padding:clamp(1.35rem,2.5vw,1.9rem);
  border:1px solid var(--wire); border-top:2px solid var(--accent-2); background:var(--obsidian); }
.paybox .btn{ width:100%; }
.paynote{ margin:0; font-size:.83rem; line-height:1.55; color:var(--dim); }
.payguard{ margin:0; padding:.9rem 1rem; border:1px dashed #c2564a; background:rgba(194,86,74,.08);
  font-family:var(--mono); font-size:.7rem; line-height:1.6; letter-spacing:.05em; color:#e0857a; }

/* ---------- legal pages ---------- */
.legal{ padding-block:clamp(5rem,9vw,8rem); }
.legal .wrap{ max-width:74ch; }
.legal h1{ font-family:var(--display); font-weight:700; font-size:clamp(2rem,4.5vw,3.2rem);
  line-height:1.05; letter-spacing:-.02em; margin:0 0 .6rem; }
.legal h2{ font-family:var(--display); font-weight:700; font-size:clamp(1.1rem,1.9vw,1.4rem);
  margin:2.6rem 0 .7rem; letter-spacing:-.01em; }
.legal p, .legal li{ font-size:1rem; line-height:1.65; color:var(--bone-2); }
.legal ul{ padding-left:1.15rem; display:grid; gap:.5rem; }
.legal a{ color:var(--accent-lit); }
.legal .upd{ font-family:var(--mono); font-size:.66rem; text-transform:uppercase;
  letter-spacing:.16em; color:var(--dim); margin-bottom:2.5rem; }


/* ---------- sub-page headings ----------
   .mega is sized for a hero that owns the whole viewport. On secure/thanks it
   has to share the screen with the thing the visitor came to do. */
.page h1.mega, .page .mega{ font-size:clamp(2.3rem,5.2vw,4rem); line-height:.94; }
.page .lede{ max-width:46ch; }
.pback{ display:block; }