/* ============================================================
   TOKENS
   ============================================================ */
:root{
  /* palette. brand kit, re-tuned to the footage grade */
  --canvas:#F6F2EA;
  --canvas-deep:#0F1D2E;
  --panel:#FFFCF5;
  --panel-deep:#16283F;
  --accent:#C4922F;
  --accent-hover:#A87A22;
  --accent-muted:rgba(196,146,47,.22);
  /* Brass is 2.51:1 on Parchment, which the brand guide flags: rules and marks
     only, never text on a light ground. This is Brass taken down until it
     clears 4.5:1 (4.85 on parchment, 5.28 on a raised panel), for any brass
     TEXT or control that sits on the light half of the site. */
  --accent-ink:#8A631B;
  --line:rgba(20,38,60,.14);
  --line-strong:rgba(20,38,60,.30);
  --line-deep:rgba(246,242,234,.16);
  --text-primary:#14263C;
  --text-secondary:#48596E;   /* 6.42:1 on parchment */
  --text-on-deep:#F6F2EA;     /* 15.22:1 on ink */
  --text-on-deep-2:#A9B6C6;   /* 8.25:1 on ink */

  /* type */
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Courier Prime','Courier New',ui-monospace,monospace;

  /* motion */
  --e1:cubic-bezier(.22,.61,.36,1);
  --e2:cubic-bezier(.65,0,.35,1);
  --t1:.55s;
  --t2:.9s;

  /* the three layer text shadow for type over live footage */
  --tshadow:0 1px 2px rgba(5,8,14,.95),0 3px 12px rgba(5,8,14,.78),0 10px 44px rgba(5,8,14,.8);

  --gut:clamp(20px,5vw,80px);
}

*{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
/* the nav is fixed, so a jump target that lands at the very top lands
   underneath it. Scoped to :target rather than every id, because
   scroll-margin also shifts programmatic scrollIntoView calls. */
:target{scroll-margin-top:96px}
body{
  margin:0;background:var(--canvas);color:var(--text-primary);
  font-family:var(--body);font-size:clamp(16px,1.05vw,18px);line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  opacity:0;transition:opacity .7s var(--e1);
}
body.ready{opacity:1}
img,svg,video{max-width:100%;display:block}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 0;line-height:1.05;letter-spacing:-.015em}
p{margin:0}
a{color:inherit}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:var(--canvas-deep);
  padding:12px 18px;font-family:var(--mono);font-size:13px;text-decoration:none}
.skip:focus{left:8px;top:8px}

:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:2px}
.sec-deep :focus-visible,.send :focus-visible,.stage :focus-visible,
.static-hero :focus-visible,.nav:not(.solid) :focus-visible{outline-color:var(--accent)}

/* ============================================================
   THE FIXED ENVIRONMENT LAYER (one place, not stacked sections)
   ============================================================ */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 12% 8%,rgba(196,146,47,.09),transparent 62%),
    radial-gradient(ellipse 60% 45% at 92% 78%,rgba(196,146,47,.07),transparent 60%);
  animation:envdrift 96s var(--e1) -22s infinite alternate}
.env::after{content:"";position:absolute;inset:-30%;opacity:.22;
  background-image:radial-gradient(rgba(20,38,60,.5) .5px,transparent .5px);
  background-size:3px 3px;
  animation:grain 110s linear -40s infinite}
@keyframes envdrift{from{transform:translate3d(-1.6%,-1%,0) scale(1.03)}to{transform:translate3d(1.8%,1.4%,0) scale(1.07)}}
@keyframes grain{from{transform:translate3d(0,0,0)}to{transform:translate3d(2%,3%,0)}}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;gap:24px;
  padding:16px var(--gut);
  background:linear-gradient(to bottom,rgba(15,29,46,.72),rgba(15,29,46,0));
  transition:background .5s var(--e1),backdrop-filter .5s var(--e1),border-color .5s var(--e1);
  border-bottom:1px solid transparent}
.nav.solid{background:rgba(246,242,234,.9);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;flex:0 0 auto}
.brand svg{width:38px;height:38px;flex:0 0 auto}
.brand .bp{fill:var(--text-on-deep);transition:fill .5s var(--e1)}
.nav.solid .brand .bp{fill:var(--text-primary)}
.brand .bb{fill:var(--accent)}
.brand-name{font-family:var(--display);font-size:22px;letter-spacing:-.012em;color:var(--text-on-deep);
  transition:color .5s var(--e1);white-space:nowrap}
/* a real word space between the two halves, set in em so it holds at any size */
.brand-name b{font-weight:600;margin-left:.26em}
.nav.solid .brand-name{color:var(--text-primary)}
.nav-links{display:flex;gap:22px;margin-left:auto;align-items:baseline}
.nav-links a{font-size:14px;text-decoration:none;color:var(--text-on-deep-2);white-space:nowrap;
  transition:color .3s var(--e1)}
.nav.solid .nav-links a{color:var(--text-secondary)}
.nav-links a:hover{color:var(--accent)}
.nav.solid .nav-links a:hover{color:var(--accent-ink)}
/* measured: brand 217 + links 375 + button 189 + padding and gaps needs ~920px.
   below that the links step aside rather than wrapping onto a second line */
@media(max-width:940px){.nav-links{display:none}}

.btn{display:inline-block;font-family:var(--body);font-weight:500;font-size:15px;letter-spacing:.005em;
  padding:13px 24px;border-radius:2px;text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background .35s var(--e1),color .35s var(--e1),transform .35s var(--e1),box-shadow .35s var(--e1)}
.btn-primary{background:var(--accent);color:#14263C;box-shadow:0 0 0 rgba(196,146,47,0)}  /* 5.46:1 */
.btn-primary:hover{background:var(--accent-hover);color:#0F1D2E;transform:translateY(-2px);box-shadow:0 10px 30px rgba(196,146,47,.28)}
.btn-ghost{border-color:var(--line-deep);color:var(--text-on-deep)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
/* the quiet sibling: sits beside a primary on parchment without competing */
.btn-quiet{border-color:var(--line);color:var(--accent-ink)}
.btn-quiet:hover{border-color:var(--accent-ink);background:rgba(196,146,47,.08)}
.rates-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.nav .btn{padding:10px 18px;font-size:14px;margin-left:8px;white-space:nowrap}
/* the mark is drawn to hold alone below 120px of lockup, so on a narrow phone
   the wordmark steps aside and the button stops wrapping to two lines */
@media(max-width:460px){
  .brand-name{display:none}
  .nav{padding:12px var(--gut)}
  .nav .btn{font-size:13.5px;padding:10px 15px}
}
@media(pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}
/* the mark keeps its drawn size; only the area you can hit around it grows */
@media(pointer:coarse){.brand{min-height:44px}}

/* ============================================================
   HERO: the pinned scrub stage
   ============================================================ */
/* the hero plays itself on load, so it is one screen tall rather than a long
   pinned scroll region. the beats are timed against the video, not the scrollbar */
.hero{position:relative;z-index:1}
.stage{position:relative;height:100vh;height:100svh;overflow:hidden;background:var(--canvas-deep)}
.poster{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:opacity .8s var(--e1)}
.stage.video-ready .poster{opacity:0}
#hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .8s var(--e1);will-change:transform;transform:translateZ(0)}
.stage.video-ready #hero-video{opacity:1}
.stage.video-failed #hero-video{display:none}

/* legibility layer 1: the global base scrim, always on */
.scrim{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 120% 90% at 56% 45%,rgba(8,12,20,0) 34%,rgba(8,12,20,.62) 100%),
    linear-gradient(to right,rgba(8,12,20,.42) 0%,rgba(8,12,20,.10) 42%,rgba(8,12,20,0) 62%)}

.bands{position:absolute;inset:0;pointer-events:none}
.band{position:absolute;left:var(--gut);top:0;height:100%;width:min(46vw,520px);
  display:flex;flex-direction:column;justify-content:center;opacity:0;text-shadow:var(--tshadow)}
/* legibility layer 2: the per band scrim, anchored on the text column, riding --k */
.band::before{content:"";position:absolute;inset:-8% -30% -8% -40%;pointer-events:none;z-index:-1;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 60% 56% at 40% 50%,rgba(5,8,14,.70) 0%,rgba(5,8,14,.46) 46%,rgba(5,8,14,0) 76%)}
.band-line{font-family:var(--display);font-weight:400;color:var(--text-on-deep);
  font-size:clamp(30px,4.4vw,62px);line-height:1.06;letter-spacing:-.02em;max-width:15ch}

/* split spans */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.vis{display:block}
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

/* entrance a: drift down. echoes the descent beginning */
.band[data-entrance="drift"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*-26px))}
/* entrance b: scatter. echoes the surface bursting apart */
.band[data-entrance="scatter"] .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px)))
            rotate(calc((1 - var(--kc))*var(--jr,0deg)))}
/* entrance c: THE CORRECTION. invented for this brand.
   a misheard copy slides out of register and resolves into the right word */
.band[data-entrance="correction"] .w{position:relative;--kc:clamp(0,(var(--k,0) - var(--th,0))*2.4,1)}
.band[data-entrance="correction"] .ghost{position:absolute;left:0;top:0;color:var(--accent);
  filter:blur(3.5px);opacity:calc((1 - var(--kc))*.9);
  transform:translate(calc((1 - var(--kc))*var(--jx,7px)),calc((1 - var(--kc))*var(--jy,-5px)))}
.band[data-entrance="correction"] .real{opacity:var(--kc);display:inline-block}
/* entrance d: word by word rise into a staged settle */
.band[data-entrance="rise"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*22px))}

/* 12ch, measured: it breaks after "there." instead of orphaning "time." */
.settle .band-line{font-size:clamp(34px,5.2vw,74px);max-width:12ch}
.settle-sub{margin-top:20px;color:var(--text-on-deep);font-size:clamp(15px,1.15vw,18px);max-width:38ch;
  opacity:var(--ks,0);transform:translateY(calc((1 - var(--ks,0))*14px));text-shadow:var(--tshadow)}
.settle-cta{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;pointer-events:auto;
  opacity:var(--kb,0);transform:translateY(calc((1 - var(--kb,0))*14px))}
.settle-cta .btn{text-shadow:none}
/* small text over live footage gets a chip, not the big radial scrim */
.settle-note{font-family:var(--mono);font-size:12.5px;color:var(--text-on-deep);letter-spacing:.04em;
  background:rgba(8,8,15,.55);border:1px solid rgba(96,96,126,.3);border-radius:10px;
  backdrop-filter:blur(10px);padding:9px 14px;text-shadow:0 1px 3px rgba(5,8,14,.85)}

.chev{position:absolute;right:calc(var(--gut) + 10px);bottom:calc(var(--gut) + 6px);width:26px;height:34px;
  color:var(--accent);opacity:.8;animation:chev 2.6s var(--e1) -.6s infinite}
@keyframes chev{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(7px);opacity:.9}}

/* the scroll cue, hidden on short screens where it has no room */
.cue{position:absolute;left:var(--gut);bottom:calc(var(--gut) - 2px);display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-on-deep-2);opacity:var(--cue,0);transition:opacity .5s var(--e1)}
.cue i{display:block;width:46px;height:1px;background:linear-gradient(to right,var(--accent),transparent);
  animation:cueline 3.4s var(--e1) -1s infinite}
@keyframes cueline{0%,100%{transform:scaleX(.4);opacity:.5}50%{transform:scaleX(1);opacity:1}}
.cue i{transform-origin:left center}
/* once they have scrolled, the cue has said its piece. without this it ghosts
   through behind the header on the way past the hero. */
.cue.gone{opacity:0!important}
@media(max-height:560px){.cue{display:none}}

/* the static hero: a designed layout, not an apology */
.static-hero{display:none;position:relative;min-height:100vh;min-height:100svh;
  background:var(--canvas-deep);background-size:cover;background-position:center;
  align-items:end;padding:0 var(--gut) clamp(48px,10vh,96px)}
.static-hero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,12,20,.93) 6%,rgba(8,12,20,.62) 46%,rgba(8,12,20,.34) 100%)}
.static-inner{position:relative;max-width:640px}
/* two classes deep on purpose: `.static-hero p` below is (0,1,1) and would
   otherwise win, rendering the headline at body size */
.static-hero .static-h{font-family:var(--display);font-weight:400;line-height:1.05;
  letter-spacing:-.015em;font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 0;
  color:var(--text-on-deep);font-size:clamp(34px,9vw,62px);max-width:11ch;margin:0;
  text-shadow:var(--tshadow)}
.static-hero p{margin-top:18px;color:var(--text-on-deep);font-size:clamp(15px,4vw,18px);max-width:34ch;
  text-shadow:var(--tshadow)}
.static-hero .btn{margin-top:26px;text-shadow:none}
.static-kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:18px;display:block}

/* ============================================================
   THE FIVE STATIC HERO GATES.
   These five strings are duplicated character for character in the JS.
   ============================================================ */
@media (max-width: 720px),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce){
  .hero{height:auto}
  .stage{display:none}
  .static-hero{display:flex}
}

/* ============================================================
   SHARED SECTION FURNITURE
   ============================================================ */
.sec{position:relative;z-index:1;padding:clamp(84px,12vh,150px) var(--gut)}
.sec-deep{background:var(--canvas-deep);color:var(--text-on-deep)}
.kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-ink);display:flex;align-items:center;gap:12px}
/* on the ink sections the full-strength brass is correct and reads at 6.07:1 */
.sec-deep .kicker,.send .kicker,.static-kicker{color:var(--accent)}
.kicker::after{content:"";height:1px;width:44px;background:var(--accent-muted)}
.h2{font-size:clamp(28px,3.5vw,50px);letter-spacing:-.02em;line-height:1.08}
.lede{color:var(--text-secondary);max-width:56ch;font-size:clamp(15.5px,1.1vw,17.5px)}
.sec-deep .lede{color:var(--text-on-deep-2)}
.wrap{max-width:1240px;margin:0 auto}

/* entrances. start and end states both prefixed so nothing cancels them */
[data-reveal] .rv{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--e1),transform .8s var(--e1)}
[data-reveal].in .rv{opacity:1;transform:none}
[data-reveal].in .rv:nth-child(1){transition-delay:0ms}
[data-reveal].in .rv:nth-child(2){transition-delay:90ms}
[data-reveal].in .rv:nth-child(3){transition-delay:180ms}
[data-reveal].in .rv:nth-child(4){transition-delay:270ms}
[data-reveal].in .rv:nth-child(5){transition-delay:360ms}
[data-reveal].in .rv:nth-child(6){transition-delay:450ms}
/* retire the stagger so later hovers never lag. !important beats the nth-child rules above */
[data-reveal].done .rv{transition-delay:0s!important}

/* self drawing proofreader marks: THE SIGNATURE */
.mark{position:absolute;color:var(--accent);pointer-events:none;overflow:visible}
.mark path,.mark line,.mark polyline{fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len,90);stroke-dashoffset:var(--len,90);
  transition:stroke-dashoffset 1.5s var(--e1)}
.mark circle{fill:currentColor;opacity:0;transition:opacity .5s var(--e1)}
.mark.drawn path,.mark.drawn line,.mark.drawn polyline{stroke-dashoffset:0}
.mark.drawn circle{opacity:1}
.mark.drawn circle:nth-of-type(2){transition-delay:.14s}
.mark.drawn circle:nth-of-type(3){transition-delay:.28s}
@media(max-width:1180px){.mark{display:none}}

/* ============================================================
   A. THE GAP. skeleton: oversized numeral left, text right
   ============================================================ */
.gap-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,5vw,80px);
  align-items:baseline}
.bignum{font-family:var(--display);font-weight:600;font-size:clamp(96px,17vw,240px);line-height:.8;
  letter-spacing:-.045em;color:var(--text-primary);position:relative;display:block}
.bignum sup{font-size:.26em;font-weight:400;vertical-align:super;color:var(--accent-ink);letter-spacing:0}
.bignum-cap{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-secondary);margin-top:22px;display:block;max-width:22ch;line-height:1.7}
.gap-copy h2{margin-top:16px}
.gap-copy p{margin-top:22px}
.gap-rule{height:1px;background:var(--line);margin:clamp(40px,6vh,64px) 0 0;position:relative;overflow:hidden}
/* this section closes on the drawn rule, so it does not also need a full
   section's padding under it before the next one begins */
#gap{padding-bottom:clamp(36px,5vh,64px)}
.gap-rule::after{content:"";position:absolute;inset:0 auto 0 0;width:34%;
  background:linear-gradient(to right,transparent,var(--accent),transparent);
  animation:sweep 9s var(--e1) -2s infinite}
@keyframes sweep{0%{transform:translateX(-110%)}55%,100%{transform:translateX(330%)}}
@media(max-width:880px){.gap-grid{grid-template-columns:1fr;gap:26px}}

/* ============================================================
   B. THE REFINERY. skeleton: three equal stages in a row
   ============================================================ */
.stages{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px);
  margin-top:clamp(40px,6vh,64px);position:relative}
.stages::before{content:"";position:absolute;left:6%;right:6%;top:-26px;height:1px;
  background:linear-gradient(to right,var(--accent-muted),var(--accent),var(--accent-muted))}
.stage-card{background:var(--panel);border:1px solid var(--line);border-radius:3px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .5s var(--e1),box-shadow .5s var(--e1),border-color .5s var(--e1)}
.stage-card:hover{transform:translateY(-5px);box-shadow:0 22px 54px rgba(20,38,60,.12);border-color:var(--accent-muted)}
.stage-img{aspect-ratio:4/3;background:#152740;position:relative;overflow:hidden}
/* real <img> rather than a CSS background so these can load lazily:
   they sit far below the fold and were costing ~400KB on first paint */
.stage-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(15,29,46,.5),transparent 58%)}
.stage-num{position:absolute;left:14px;bottom:12px;z-index:2;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.16em;color:var(--canvas);text-shadow:0 1px 6px rgba(5,8,14,.9)}
.stage-body{padding:24px 24px 28px}
.stage-body h3{font-size:clamp(19px,1.5vw,23px);font-weight:600}
.stage-body p{margin-top:12px;color:var(--text-secondary);font-size:15.5px;max-width:34ch}
@media(max-width:880px){.stages{grid-template-columns:1fr}.stages::before{display:none}}

.specs{display:flex;flex-wrap:wrap;gap:0;margin-top:clamp(38px,5vh,58px);
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.specs li{list-style:none;flex:1 1 260px;padding:16px 20px;border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12.5px;letter-spacing:.055em;
  color:var(--text-secondary);display:flex;align-items:baseline;gap:11px;
  transition:background .4s var(--e1),color .4s var(--e1)}
.specs li:hover{background:var(--panel);color:var(--text-primary)}
.specs li b{color:var(--accent-ink);font-weight:400;flex:0 0 auto}
.specs{padding:0;margin-left:0}

/* ============================================================
   C. THE INTERACTIVE MOMENT. skeleton: full bleed ink, centred
   ============================================================ */
.hold-sec{text-align:center;overflow:hidden}
.hold-sec .kicker{justify-content:center}
.hold-sec .kicker::before{content:"";height:1px;width:44px;background:var(--accent-muted)}
.hold-sec .h2{margin:16px auto 0;max-width:16ch}
.hold-sec .lede{margin:20px auto 0;text-align:center}
.transcript{margin:clamp(40px,6vh,64px) auto 0;max-width:760px;background:var(--panel-deep);
  border:1px solid var(--line-deep);border-radius:3px;padding:clamp(24px,3.4vw,40px);text-align:left;
  position:relative;transition:border-color .6s var(--e1),box-shadow .6s var(--e1)}
.transcript.solved{border-color:var(--accent-muted);box-shadow:0 0 60px rgba(196,146,47,.10)}
.tr-meta{display:flex;justify-content:space-between;gap:16px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.12em;color:var(--text-on-deep-2);border-bottom:1px solid var(--line-deep);
  padding-bottom:12px;margin-bottom:20px}
.tr-line{font-family:var(--mono);font-size:clamp(14px,1.35vw,17px);line-height:2;color:var(--text-on-deep);
  word-spacing:.04em}
.swap{position:relative;display:inline-block;padding:0 2px}
.swap .wrong,.swap .right{display:inline-block;transition:opacity .35s var(--e1),transform .35s var(--e1),filter .35s var(--e1)}
/* the correct word sits in flow so the box never resizes mid swap;
   the misheard one rides above it */
.swap .right{color:var(--accent);font-weight:700;
  opacity:var(--hp,0);transform:translateY(calc((1 - var(--hp,0))*8px))}
/* the misheard text is longer than the correction, and it is absolutely
   positioned inside a box sized by the correction, so it must not wrap.
   the swap sits at the end of the line, so the overhang falls into empty space. */
.swap .wrong{position:absolute;left:2px;top:0;color:#E0876B;white-space:nowrap;
  opacity:calc(1 - var(--hp,0));transform:translateY(calc(var(--hp,0)*-7px))}
.swap::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;background:var(--accent);
  transform:scaleX(var(--hp,0));transform-origin:left center;opacity:.75}
.hold-row{display:flex;align-items:center;gap:18px;margin-top:26px;flex-wrap:wrap}
.hold-btn{position:relative;width:64px;height:64px;flex:0 0 auto;border-radius:50%;cursor:pointer;
  background:transparent;border:1px solid var(--line-deep);color:var(--accent);
  display:grid;place-items:center;touch-action:none;-webkit-tap-highlight-color:transparent;
  transition:border-color .4s var(--e1),background .4s var(--e1)}
.hold-btn:hover{border-color:var(--accent-muted);background:rgba(196,146,47,.06)}
.hold-btn svg{position:absolute;inset:0;width:64px;height:64px;transform:rotate(-90deg)}
.hold-btn svg circle{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:188.5;
  stroke-dashoffset:calc(188.5 * (1 - var(--hp,0)))}
.hold-btn i{width:11px;height:11px;border-radius:50%;background:var(--accent);display:block;
  transform:scale(calc(1 + var(--hp,0)*.5))}
.hold-copy{font-family:var(--mono);font-size:12.5px;letter-spacing:.09em;color:var(--text-on-deep-2);
  max-width:38ch;line-height:1.85}
.hold-after{margin-top:14px;font-family:var(--display);font-size:clamp(20px,2.2vw,30px);color:var(--accent);
  opacity:0;transform:translateY(12px);transition:opacity .7s var(--e1) .2s,transform .7s var(--e1) .2s}
.transcript.solved .hold-after{opacity:1;transform:none}
/* whisper particles, ink bands only */
.motes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.motes b{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--accent);opacity:.0}
.lively .motes b{animation:mote 13s var(--e1) infinite}
@keyframes mote{0%{opacity:0;transform:translateY(18px)}18%{opacity:.5}72%{opacity:.32}100%{opacity:0;transform:translateY(-52px)}}

/* ============================================================
   D. TRANSCRIPT MODES. skeleton: a definition list, term left, detail right
   ============================================================ */
/* transcript modes: a definition list, term left, detail right */
.modes{margin:clamp(40px,6vh,64px) 0 0;border-top:1px solid var(--line)}
.mode{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);
  padding:clamp(22px,3vh,32px) 0;border-bottom:1px solid var(--line);
  transition:background .4s var(--e1)}
.mode:hover{background:rgba(255,252,245,.6)}
.modes dt{font-family:var(--display);font-size:clamp(19px,1.8vw,26px);letter-spacing:-.012em;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.modes dt em{font-family:var(--mono);font-style:normal;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-ink);border:1px solid var(--accent-muted);
  border-radius:2px;padding:3px 7px}
.modes dd{margin:0;color:var(--text-secondary);font-size:15.5px;max-width:56ch}
.modes-note{margin-top:clamp(28px,4vh,40px);font-family:var(--mono);font-size:12.5px;
  letter-spacing:.05em;line-height:1.9;color:var(--text-secondary);max-width:70ch}
@media(max-width:760px){.mode{grid-template-columns:1fr;gap:10px}}

/* ============================================================
   D2. THE SAMPLE. skeleton: a document sheet lying on the ink
   ============================================================ */
.sample-sec{overflow:hidden}
.sheet{background:var(--panel);color:var(--text-primary);border-radius:3px;
  margin:clamp(36px,5vh,56px) 0 0;max-width:840px;
  padding:clamp(26px,3.4vw,44px);
  box-shadow:0 26px 60px rgba(5,8,14,.5),0 2px 0 rgba(255,255,255,.06) inset;
  font-family:var(--mono);font-size:clamp(12.5px,1.05vw,14px);line-height:1.95}
.sheet-head{border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:26px;position:relative}
.sheet-tag{position:absolute;top:0;right:0;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-ink);border:1px solid var(--accent-muted);border-radius:2px;padding:3px 8px}
.sheet-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 32px;margin:0;max-width:92%}
.sheet-meta div{display:flex;gap:10px;min-width:0}
.sheet-meta dt{flex:0 0 84px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-secondary);padding-top:2px}
.sheet-meta dd{margin:0;color:var(--text-primary);min-width:0;overflow:hidden;text-overflow:ellipsis}
.sheet-time{margin:26px 0 14px;font-size:11px;letter-spacing:.18em;color:var(--accent-ink);
  display:flex;align-items:center;gap:12px}
.sheet-time::after{content:"";flex:1;height:1px;background:var(--line)}
.sheet-time:first-child{margin-top:0}
.turn{display:grid;grid-template-columns:158px minmax(0,1fr);gap:18px;margin-bottom:17px}
.turn .who{color:var(--text-secondary);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  padding-top:3px;display:flex;flex-direction:column;gap:2px}
.turn .who i{font-style:normal;font-size:10.5px;letter-spacing:.02em;color:var(--accent-ink);
  text-transform:none;white-space:nowrap}
.turn .said{color:var(--text-primary)}

/* the two modes share one block of markup: clean verbatim is simply
   full verbatim with the kept material hidden */
.sheet[data-mode="clean"] .v-full{display:none}
.sheet[data-mode="full"] .v-clean{display:none}
/* what full verbatim keeps, picked out so the difference is visible at a glance */
.xtra{font-weight:400;background:rgba(196,146,47,.20);box-shadow:0 0 0 2px rgba(196,146,47,.20);
  border-radius:2px}

.mode-switch{display:inline-flex;gap:4px;margin-top:clamp(28px,4vh,40px);padding:4px;
  border:1px solid var(--line-deep);border-radius:4px;background:rgba(246,242,234,.04)}
.ms-btn{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  padding:11px 18px;border:0;border-radius:2px;cursor:pointer;background:transparent;
  color:var(--text-on-deep-2);transition:background .3s var(--e1),color .3s var(--e1)}
.ms-btn:hover{color:var(--text-on-deep)}
.ms-btn.is-on{background:var(--accent);color:#14263C}
@media(pointer:coarse){.ms-btn{min-height:44px}}
@media(max-width:520px){.mode-switch{display:flex;width:100%}.ms-btn{flex:1;padding:11px 8px;font-size:11px}}

.sheet-foot{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);
  font-size:11px;line-height:1.8;color:var(--text-secondary)}
/* the markers are the whole point of the sample, so they are allowed to catch the eye */
.mk{color:var(--text-secondary)}
.mk.hi{color:var(--accent-ink);background:rgba(196,146,47,.11);
  border-bottom:1px solid var(--accent-muted);padding:1px 4px;border-radius:2px;white-space:nowrap}
.sheet-caption{margin-top:clamp(24px,3.4vh,34px);max-width:62ch;color:var(--text-on-deep-2);
  font-size:15.5px;line-height:1.72}
@media(max-width:720px){
  .sheet-meta{grid-template-columns:1fr}
  .turn{grid-template-columns:1fr;gap:4px;margin-bottom:18px}
  .turn .who{padding-top:0}
  .mk.hi{white-space:normal}
}

/* ============================================================
   E. PRICING + CONFIDENTIALITY. skeleton: two unequal panels
   ============================================================ */
.two{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(20px,2.6vw,34px);
  align-items:stretch}
.panel{padding:clamp(28px,3.6vw,48px);border-radius:3px;position:relative;overflow:hidden}
.panel-raised{background:var(--panel);border:1px solid var(--line);
  box-shadow:0 18px 50px rgba(20,38,60,.08)}
.panel-raised::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.panel-flat{background:transparent;border:1px solid var(--line)}
.rates{width:100%;border-collapse:collapse;margin-top:26px}
.rates th,.rates td{text-align:left;padding:13px 10px 13px 0;border-bottom:1px solid var(--line)}
.rates thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-secondary);font-weight:400;padding-bottom:9px}
.rates tbody th{font-family:var(--display);font-size:clamp(20px,2.1vw,27px);font-weight:400;
  letter-spacing:-.015em;width:40%}
.rates tbody td{font-family:var(--display);font-size:clamp(19px,2vw,25px);font-weight:600;
  letter-spacing:-.02em;white-space:nowrap}
.rates tbody td:last-child{font-weight:400;font-family:var(--mono);font-size:13px;letter-spacing:.04em;
  color:var(--text-secondary)}
.rates tbody tr:last-child th,.rates tbody tr:last-child td{border-bottom:0}
/* body face, not mono: eight lines of Courier read as a wall */
.rates-note{font-size:14.5px;line-height:1.72;color:var(--text-secondary);margin-top:22px;max-width:46ch}
.panel p{margin-top:20px;color:var(--text-secondary);font-size:15.5px;max-width:40ch}
.panel h3{font-size:clamp(21px,2.1vw,30px);margin-top:16px}
.seal{position:absolute;right:-18px;bottom:-18px;width:130px;height:130px;color:var(--accent);opacity:.10}
@media(max-width:880px){.two{grid-template-columns:1fr}}

/* ============================================================
   F. FAQ. skeleton: one narrow column of rows
   ============================================================ */
.faq{max-width:820px;margin:clamp(38px,5vh,58px) auto 0}
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-family:var(--display);font-size:clamp(17.5px,1.5vw,22px);letter-spacing:-.01em;
  transition:color .35s var(--e1)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent-ink)}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:13px;height:1.5px;
  background:var(--accent-ink);transform:translateY(-50%);transition:transform .4s var(--e1)}
.faq summary::before{content:"";position:absolute;right:6px;top:50%;width:13px;height:1.5px;
  background:var(--accent-ink);transform:translateY(-50%) rotate(90deg);transition:transform .4s var(--e1);opacity:1}
.faq details[open] summary::before{transform:translateY(-50%) rotate(0deg)}
.faq-a{padding:0 8% 28px 0;color:var(--text-secondary);font-size:16px;max-width:62ch;
  animation:faqin .5s var(--e1)}
/* the transcript markers, shown in the trade's own typeface */
.mono-in{font-family:var(--mono);font-size:.92em;color:var(--text-primary);
  background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:1px 5px;white-space:nowrap}
@keyframes faqin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ============================================================
   G. CTA + FORM. skeleton: ink band with the ending frame behind
   ============================================================ */
/* the image is attached by JS when the section approaches, so it costs nothing
   on first paint. the ink ground below stands in until then */
.send{position:relative;overflow:hidden;
  background:var(--canvas-deep) none center 62%/cover no-repeat;
  transition:background-color .6s var(--e1)}
/* the hero's own resting frame, reused as the ground the page closes on.
   dark enough for parchment text, light enough that the room is actually there */
.send::before{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(8,12,20,.95) 0%,rgba(8,12,20,.91) 45%,rgba(8,12,20,.85) 100%)}
.send-inner{position:relative;max-width:720px;margin:0 auto;text-align:center}
.send h2{color:var(--text-on-deep);margin-top:16px}
.send .lede{margin:20px auto 0;color:var(--text-on-deep-2)}
.send .kicker{justify-content:center}
.send .kicker::before{content:"";height:1px;width:44px;background:var(--accent-muted)}
form{margin-top:clamp(34px,5vh,52px);display:grid;gap:14px;text-align:left}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--text-on-deep-2);margin-bottom:8px}
.field input{width:100%;background:rgba(246,242,234,.05);border:1px solid var(--line-deep);border-radius:2px;
  padding:14px 16px;color:var(--text-on-deep);font-family:var(--body);font-size:15.5px;
  transition:border-color .35s var(--e1),background .35s var(--e1)}
.field input::placeholder{color:rgba(169,182,198,.6)}
.field input:hover{border-color:rgba(246,242,234,.28)}
.field input:focus{outline:none;border-color:var(--accent);background:rgba(196,146,47,.06)}
.field input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
form .btn{margin-top:8px;justify-self:start;padding:15px 30px;font-size:16px}
.formnote{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--text-on-deep-2);
  line-height:1.8;margin-top:2px}
.thanks{display:none;margin-top:clamp(34px,5vh,52px);padding:34px;border:1px solid var(--accent-muted);
  border-radius:3px;background:rgba(196,146,47,.06)}
.thanks.show{display:block;animation:faqin .6s var(--e1)}
.thanks p{color:var(--text-on-deep);font-family:var(--display);font-size:clamp(19px,2vw,26px)}
.thanks .thanks-sub{font-family:var(--body);font-size:15.5px;color:var(--text-on-deep-2);margin-top:14px;
  max-width:52ch;margin-left:auto;margin-right:auto}

/* direct contact: three routes for people who will not fill in a form.
   WhatsApp leads because in South Africa it usually is the front door. */
.reach{margin-top:clamp(40px,6vh,64px);padding-top:clamp(28px,4vh,40px);
  border-top:1px solid var(--line-deep)}
.reach-label{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-on-deep-2);display:block;margin-bottom:20px}
.reach-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.reach-item{display:flex;align-items:center;gap:13px;text-decoration:none;text-align:left;
  padding:16px 18px;border:1px solid var(--line-deep);border-radius:3px;
  background:rgba(246,242,234,.03);
  transition:border-color .35s var(--e1),background .35s var(--e1),transform .35s var(--e1)}
.reach-item:hover{border-color:var(--accent-muted);background:rgba(196,146,47,.07);transform:translateY(-2px)}
.reach-item svg{width:22px;height:22px;flex:0 0 auto;fill:none;stroke:var(--accent);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.reach-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.reach-txt b{font-weight:500;font-size:15px;color:var(--text-on-deep)}
.reach-txt i{font-style:normal;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
  color:var(--text-on-deep-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* a contact detail still waiting on the client: visibly inert, not broken */
.pending{opacity:.42;cursor:default;pointer-events:none}
@media(max-width:720px){.reach-row{grid-template-columns:1fr}}
@media(pointer:coarse){.reach-item{min-height:60px}}
/* the consent line: a real checkbox, big enough to hit on a phone */
.consent{display:flex;align-items:flex-start;gap:12px;margin-top:6px;cursor:pointer;
  font-size:14.5px;line-height:1.65;color:var(--text-on-deep-2);max-width:62ch}
.consent input{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:20px;height:20px;margin:1px 0 0;
  border:1px solid var(--line-deep);border-radius:2px;background:rgba(246,242,234,.05);cursor:pointer;
  display:grid;place-content:center;transition:border-color .3s var(--e1),background .3s var(--e1)}
.consent input:hover{border-color:rgba(246,242,234,.36)}
.consent input::before{content:"";width:10px;height:10px;transform:scale(0);
  background:var(--accent);clip-path:polygon(14% 44%,0 60%,39% 100%,100% 18%,84% 4%,39% 68%);
  transition:transform .18s var(--e1)}
.consent input:checked{border-color:var(--accent)}
.consent input:checked::before{transform:scale(1)}
.consent input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(pointer:coarse){.consent input{width:24px;height:24px}}
form.hide{display:none}
@media(max-width:660px){.frow{grid-template-columns:1fr}}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{position:relative;z-index:1;background:var(--canvas);border-top:1px solid var(--line);
  padding:clamp(50px,7vh,80px) var(--gut) 40px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(26px,4vw,60px);max-width:1240px;margin:0 auto}
.foot-brand svg{width:34px;height:34px;margin-bottom:14px}
.foot-brand .bp{fill:var(--text-primary)}
.foot-brand .bb{fill:var(--accent)}
.foot h4{font-family:var(--mono);font-size:11px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--text-secondary);margin:0 0 16px;font-weight:400}
.foot a{display:block;text-decoration:none;color:var(--text-primary);font-size:15px;padding:5px 0;
  transition:color .3s var(--e1)}
.foot a:hover{color:var(--accent-ink)}
.foot-note{max-width:1240px;margin:clamp(36px,5vh,56px) auto 0;padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 30px;font-family:var(--mono);font-size:11px;letter-spacing:.07em;
  color:var(--text-secondary);line-height:1.9}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr;gap:30px}}
/* on a phone the footer is a list of things to tap, so the rows grow to a
   comfortable target rather than staying at reading density */
@media(pointer:coarse){.foot a{padding:11px 0}}

/* ============================================================
   REDUCED MOTION. complete, and re-applied per breakpoint
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  body{opacity:1}
  [data-reveal] .rv{opacity:1;transform:none}
  .mark path,.mark line,.mark polyline{stroke-dashoffset:0}
  .mark circle{opacity:1}

  .env{animation:none}
  .env::after{animation:none}
  /* positional transforms re-declared, never blanket-killed */
  .brand svg,.foot-brand svg{transform:none}
  .hold-btn i{transform:scale(1.5)}
}
/* ============================================================
   THE FLOATING WHATSAPP BUTTON
   Hidden while the hero is on screen so it never covers the hero's own
   button, and hidden again over the contact section, where the same
   route is already offered as a card.
   ============================================================ */
.wa-fab{position:fixed;right:var(--gut);bottom:clamp(20px,3.4vh,32px);z-index:70;
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:#14263C;text-decoration:none;
  box-shadow:0 8px 26px rgba(8,12,20,.34);
  opacity:0;transform:translateY(14px) scale(.86);pointer-events:none;
  transition:opacity .45s var(--e1),transform .45s var(--e1),background .3s var(--e1)}
.wa-fab.show{opacity:1;transform:none;pointer-events:auto}
.wa-fab:hover{background:var(--accent-hover)}
.wa-fab svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.wa-fab-label{position:absolute;right:calc(100% + 12px);white-space:nowrap;
  font-size:14px;font-weight:500;color:var(--text-on-deep);
  background:rgba(8,12,20,.9);border:1px solid var(--line-deep);
  backdrop-filter:blur(10px);border-radius:3px;padding:9px 14px;
  opacity:0;transform:translateX(6px);pointer-events:none;
  transition:opacity .3s var(--e1),transform .3s var(--e1)}
.wa-fab:hover .wa-fab-label,.wa-fab:focus-visible .wa-fab-label{opacity:1;transform:none}
/* a touch device has no hover, so the label would never resolve: icon only */
@media(pointer:coarse){.wa-fab-label{display:none}
  .wa-fab{width:56px;height:56px;bottom:calc(20px + env(safe-area-inset-bottom,0px))}}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}