/* v31 sections — about → reel (one continuous move) · statement
   (the About block uses .about / .about__* so nothing here can
   reach the video modal, which owns .intro / .intro__*)

   How the about → reel hand-off works: #reel is pulled up under
   #about (negative margin = about's height), so both start at the
   same scroll position. The reel pin (film card + ribbons) sticks
   first; the about copy rides above it, holds, then scrolls away
   while the card opens into the full-bleed film. */

/* ══ RIBBONS (shared by about/reel and the statement) ══ */
/* flat electric-blue pen strokes drawn on canvases (v31-ribbon3d.js) — no shadow, no shading */
.ribbon{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none}
.ribbon--front{z-index:3}

/* ══ ABOUT ══ */
.about{--ah:170vh;position:relative;z-index:3;height:var(--ah);color:var(--ink);background:transparent;pointer-events:none}
/* clip (not hidden) so the headline lines sliding in/out sideways never widen the page, and the sticky pin still works */
.about__pin{position:sticky;top:0;height:100vh;height:100svh;padding:0 var(--pad);pointer-events:none;overflow:clip}
.about__pin a,.about__pin .about__p{pointer-events:auto}
.about.is-gone .about__pin a,.about.is-gone .about__pin .about__p{pointer-events:none}
/* the label row + copy leave / return on their own clock once the film starts to open (never scrubbed half-way) */
.about__top,.about__copy{transition:opacity .7s var(--ease),transform 1.1s var(--ease),visibility 0s}
.about.is-gone .about__top{opacity:0;transform:translate3d(0,-1.2rem,0);transition:opacity .45s var(--ease),transform .8s var(--ease),visibility 0s .8s;visibility:hidden}
.about.is-gone .about__copy{opacity:0;transform:translate3d(0,-5vh,0);transition:opacity .45s var(--ease),transform .9s var(--ease),visibility 0s .9s;visibility:hidden}
.about__top{position:absolute;left:var(--pad);right:var(--pad);top:clamp(6.2rem,14vh,8.4rem);display:flex;justify-content:space-between;align-items:center;color:var(--ink2)}
.about__who{display:inline-flex;align-items:center}
.about__who img{margin-right:.7rem;width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:50% 30%;filter:grayscale(1) contrast(1.05)}
.about__h{position:absolute;left:var(--pad);right:var(--pad);top:calc(clamp(6.2rem,14vh,8.4rem) + 2.2rem);margin:0;font-weight:400;font-size:clamp(3rem,min(10.6vw,19vh),13rem);line-height:.9;letter-spacing:-.065em;pointer-events:none}
.about__l{display:block;white-space:nowrap;will-change:transform}
.about__l--b{padding-left:17vw}
.about__copy{position:absolute;left:58vw;right:var(--pad);top:56vh;max-width:35rem}
.about__p{max-width:30rem;font-size:clamp(1.05rem,1.32vw,1.34rem);line-height:1.38;letter-spacing:-.018em;color:var(--ink);margin:0}
.about__p .w{display:inline-block}
.about__act{display:flex;align-items:center;flex-wrap:wrap;gap:1rem 1.6rem;margin-top:clamp(1.4rem,3.4vh,2.2rem)}
.about__cta{padding:1.05rem 1.35rem 1.05rem 1.2rem;gap:.8rem;box-shadow:0 18px 40px -20px rgba(15,16,22,.55)}
.about__dot{width:8px;height:8px;border-radius:50%;background:var(--acid2);box-shadow:0 0 0 0 rgba(125,139,255,.6);animation:abPulse 2.2s infinite}
.about__cta:hover .about__dot{background:#fff}
@keyframes abPulse{0%{box-shadow:0 0 0 0 rgba(125,139,255,.6)}70%{box-shadow:0 0 0 9px rgba(125,139,255,0)}100%{box-shadow:0 0 0 0 rgba(125,139,255,0)}}
/* receipts: four credentials, mono label over a Geist value, hairline separators */
.about__proof{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;margin:clamp(1.3rem,3vh,1.9rem) 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.about__proof li{display:flex;flex-direction:column;justify-content:space-between;gap:.4rem;padding:.85rem .75rem 0;border-left:1px solid var(--line)}
.about__proof li:first-child{padding-left:0;border-left:0}
.about__pa{display:flex;flex-direction:column;justify-content:space-between;flex:1;gap:.4rem;min-width:0}
.about__pl{display:block;max-width:10.5em;font-size:.74rem;line-height:1.25;color:var(--ink2)}
.about__pl b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.about__pv{font-family:var(--f);font-size:clamp(.95rem,.72vw,1.05rem);line-height:1.2;letter-spacing:-.015em;color:var(--ink);white-space:nowrap}
/* narrower desktops: the four receipts sit 2 × 2 so no value ever wraps */
@media(max-width:1399px){
  .about__proof{grid-template-columns:repeat(2,auto)}
  .about__proof li{padding:.6rem 1.1rem .55rem}
  .about__proof li:nth-child(odd){padding-left:0;border-left:0}
  .about__proof li:nth-child(n+3){border-top:1px solid var(--line)}
}
.about__pa{color:inherit;text-decoration:none}
.about__pa .about__pv i{font-style:normal;display:inline-block;color:var(--acid);transition:transform .45s var(--ease)}
.about__pa:hover .about__pv i,.about__pa:focus-visible .about__pv i{transform:translate(2px,-2px)}
.about__pa:hover .about__pv{color:var(--acid)}
.about__live{display:inline-flex;align-items:center;gap:.35rem;margin-left:.55rem;color:var(--acid);white-space:nowrap}
.about__live i{width:6px;height:6px;border-radius:50%;background:var(--acid);box-shadow:0 0 0 3px rgba(199,205,255,.7);animation:abLive 2.2s var(--ease) infinite}
@keyframes abLive{50%{box-shadow:0 0 0 5px rgba(199,205,255,.15)}}

/* ══ REEL ══ */
.reel{position:relative;z-index:2;height:430vh;margin-top:calc(-1 * 170vh);background:var(--bg)}
.reel__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
/* where the film card sits in the about composition — JS reads this box */
/* never higher than the bottom of the two-line headline (short laptop viewports) */
.reel__slot{position:absolute;left:calc(var(--pad) + 4vw);top:max(50vh, calc(clamp(6.2rem,14vh,8.4rem) + 2.2rem + 1.62 * clamp(3rem,min(10.6vw,19vh),13rem) + 2rem));width:36vw;aspect-ratio:16/9;visibility:hidden;pointer-events:none}
.ribbon--back{z-index:1}
.reel__card{position:absolute;inset:0;z-index:2;display:block;padding:0;border:0;background:transparent;overflow:hidden;clip-path:inset(0 round 0);will-change:clip-path}
@media(hover:hover){.reel__card{cursor:none}}
body:has(.reel__card:hover) .cur{opacity:0!important}
.reel__in{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;background:#05060c;will-change:transform}
.reel__in video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.18) brightness(1.04)}
/* live duotone: grey film + an electric-blue layer in screen mode → black becomes blue, white stays white */
.reel__duo{position:absolute;inset:0;background:linear-gradient(135deg,#3f55ff,#2f45ff 60%,#2a3cf0);mix-blend-mode:screen;pointer-events:none}
.reel__grade{position:absolute;inset:0;background:radial-gradient(90% 80% at 50% 40%,#18248e,#0c1257 62%,#080b3a);mix-blend-mode:screen;pointer-events:none;opacity:0}
/* cursor light on the duotone card — a pale-blue hotspot in screen mode (pin-space px, clipped by the card) */
.reel__spot{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;mix-blend-mode:screen;background:radial-gradient(circle 16vw at var(--mx,50%) var(--my,50%),rgba(199,205,255,.55),rgba(79,102,255,.22) 42%,rgba(47,69,255,0) 72%)}
/* the bendy film sheet (v31-reel-sheet.js) — drawn over the card while it bends, clicks pass through to the card */
.reel__sheet{position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;display:block;pointer-events:none;opacity:0}
.reel__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.3),transparent 24%,transparent 66%,rgba(0,0,0,.45));pointer-events:none;opacity:0}
/* the play disc — follows the pointer once the film is open */
.reel__disc{position:absolute;left:50%;top:50%;width:8.6rem;height:8.6rem;margin:-4.3rem 0 0 -4.3rem;border-radius:50%;background:var(--acid);color:#fff;display:grid;place-items:center;pointer-events:none;will-change:transform;z-index:3;opacity:0;scale:.55;box-shadow:0 20px 50px -18px rgba(47,69,255,.8);transition:opacity .45s var(--ease),scale .9s var(--ease)}
.reel__disc.is-on{opacity:1;scale:1;transition:opacity .6s var(--ease) .1s,scale 1.1s var(--ease) .1s}
.reel__disc::after{content:'';position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(255,255,255,.7);animation:reelRing 2.4s var(--ease) infinite}
@keyframes reelRing{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.45);opacity:0}}
.reel__ring{position:absolute;inset:0;width:100%;height:100%;animation:reelSpin 16s linear infinite;overflow:visible}
.reel__ring text{font-family:var(--fm);font-size:6.6px;letter-spacing:.06em;text-transform:uppercase;fill:rgba(255,255,255,.85)}
@keyframes reelSpin{to{transform:rotate(360deg)}}
.reel__disc-c{display:flex;flex-direction:column;align-items:center;gap:.3rem}
.reel__disc-c i{font-style:normal;font-size:1.25rem;line-height:1;transform:translateX(2px)}
.reel__disc-c em{font-style:normal;font-family:var(--fm);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase}
/* HUD over the open film (screen-sized, never scaled) */
.reel__hud{position:absolute;inset:0;z-index:2;color:#fff;pointer-events:none;opacity:0;transition:opacity .5s var(--ease)}
.reel__hud.is-on{opacity:1;transition:opacity .8s var(--ease)}
/* the HUD lines settle in from a few px, staggered (on their own clock, never scrubbed half-way) */
.reel__head,.reel__tc,.reel__snd{transition:transform 1.1s var(--ease),opacity .8s var(--ease);transform:translate3d(0,10px,0);opacity:0}
.reel__hud.is-on .reel__head{transform:none;opacity:1;transition-delay:.05s}
.reel__hud.is-on .reel__tc{transform:none;opacity:1;transition-delay:.16s}
.reel__hud.is-on .reel__snd{transform:none;opacity:1;transition-delay:.24s}
.reel__head{position:absolute;top:6.4rem;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;color:rgba(255,255,255,.85)}
.reel__live{display:inline-flex;align-items:center;gap:.55rem;font-variant-numeric:tabular-nums}
/* one "live" dot everywhere: electric blue with a pale halo, blinking */
.reel__live i,.reel__rec i,.reel__cap i{flex:none;width:7px;height:7px;border-radius:50%;background:#6b80ff;box-shadow:0 0 0 3px rgba(199,205,255,.28);animation:reelBlink 1.2s steps(2,start) infinite}
@keyframes reelBlink{to{visibility:hidden}}
.reel__tc{position:absolute;left:var(--pad);bottom:1.5rem;display:flex;align-items:center;gap:.9rem;font-variant-numeric:tabular-nums;letter-spacing:.08em}
.reel__rec{display:inline-flex;align-items:center;gap:.45rem;padding:.3rem .55rem;border-radius:99px;background:rgba(0,0,0,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.reel__snd{position:absolute;right:var(--pad);bottom:1.6rem;color:rgba(255,255,255,.8)}
.reel__bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.18)}
.reel__bar i{display:block;height:100%;width:100%;background:var(--acid2);transform-origin:0 50%;transform:scaleX(0)}
/* caption under the intro card */
.reel__cap{position:absolute;left:0;top:0;z-index:4;display:inline-flex;align-items:center;gap:.6rem;color:#fff;font-size:.66rem;padding:.42rem .7rem;border-radius:99px;background:rgba(8,10,40,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);white-space:nowrap;overflow:hidden;will-change:transform,opacity;opacity:0;transition:opacity .45s var(--ease)}
.reel__cap.is-on{opacity:1;transition:opacity .9s var(--ease) .05s}
.reel__cap i{flex:none}
.reel__cap-t{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reel__cap-s,.reel__cap.is-short .reel__cap-x{display:none}
.reel__cap.is-short .reel__cap-s{display:inline}

/* ══ STATEMENT — pill, ribbon, three giant lines ══ */
.statement{position:relative;z-index:3;height:245vh;background:var(--bg);color:var(--ink)}
.statement__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.ribbon--stm{z-index:0}
/* the front pass weaves across the headline (above it, below the pill + kicker chips) */
.ribbon--stm-f{z-index:1}
.statement__pill{position:absolute;left:50%;top:21vh;z-index:2;transform:translate(-50%,calc(-50% + 28px)) scale(.92);opacity:0;visibility:hidden;display:inline-flex;align-items:center;gap:.8rem;padding:1.15rem 1.7rem 1.15rem 1.35rem;border-radius:99px;background:#fff;color:var(--ink);font-size:clamp(1rem,1.2vw,1.18rem);letter-spacing:-.01em;white-space:nowrap;box-shadow:0 24px 50px -24px rgba(15,16,22,.4),0 0 0 1px rgba(15,16,22,.05);transition:background-color .45s var(--ease),color .45s var(--ease),box-shadow .45s var(--ease),opacity .45s var(--ease),transform .8s var(--ease),visibility 0s .8s}
.statement__pill.is-on{opacity:1;visibility:visible;transform:translate(-50%,-50%);transition:background-color .45s var(--ease),color .45s var(--ease),box-shadow .45s var(--ease),opacity .7s var(--ease),transform 1.1s var(--ease),visibility 0s}
.statement__pill b{font-weight:500}
.statement__pill:hover{background:var(--ink);color:#fff}
.statement__pill:focus-visible{outline:2px solid var(--acid);outline-offset:4px}
.statement__dot{width:9px;height:9px;border-radius:50%;background:var(--acid);transition:transform .45s var(--ease),background-color .45s,box-shadow .45s}
.statement__dot{box-shadow:0 0 0 0 rgba(47,69,255,0)}
.statement__pill:hover .statement__dot{transform:scale(1.5);background:#fff;box-shadow:0 0 0 4px rgba(47,69,255,.35)}
/* hover: an arrow slides out of the label (the pill widens symmetrically around its centre) */
.statement__pill::after{content:'\2192';display:inline-block;overflow:hidden;max-width:0;margin-left:-.8rem;opacity:0;transform:translate3d(-.45rem,0,0);transition:max-width .6s var(--ease),margin .6s var(--ease),opacity .35s var(--ease),transform .6s var(--ease)}
.statement__pill:hover::after,.statement__pill:focus-visible::after{max-width:1.1em;margin-left:0;opacity:1;transform:none}
.statement__h{position:absolute;left:var(--pad);right:var(--pad);top:42vh;z-index:1;margin:0;font-weight:400;font-size:clamp(2.6rem,min(8.6vw,15.5vh),10rem);line-height:.94;letter-spacing:-.06em;pointer-events:none}
/* each line is a mask (padded so ascenders/descenders are never cut); its inner span rises into it and later lifts out */
.statement__l{display:block;white-space:nowrap;overflow:clip;padding:.1em 0 .22em;margin:-.1em 0 -.22em}
.statement__li{display:block;will-change:transform}
.statement__l--2{padding-left:15vw}
.statement__l--3{padding-left:6vw}
.stm-br{display:none}
/* the kicker: a legible chip (it can sit over the ribbon) */
.statement__k{position:absolute;right:var(--pad);bottom:2rem;z-index:2;opacity:0;transform:translate3d(0,10px,0);transition:opacity .45s var(--ease),transform .8s var(--ease);display:inline-flex;align-items:center;gap:.6rem;padding:.55rem .85rem;border-radius:99px;background:rgba(255,255,255,.86);color:var(--ink);font-size:.68rem;box-shadow:0 10px 26px -14px rgba(15,16,22,.35),0 0 0 1px rgba(15,16,22,.06);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.statement__k.is-on{opacity:1;transform:none;transition:opacity .7s var(--ease),transform 1.1s var(--ease)}
.statement__k-d{width:6px;height:6px;border-radius:50%;background:var(--acid)}
.statement__k i{font-style:normal;display:inline-block;animation:stmBob 2s var(--ease) infinite}
/* the breath between the statement and the space: a quiet mark and a plumb line down into the portal */
.statement__beat{position:absolute;left:50%;top:44vh;bottom:0;z-index:1;display:flex;flex-direction:column;align-items:center;transform:translateX(-50%);opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.statement__beat.is-on{opacity:1;transition:opacity .6s var(--ease)}
.statement__beat-t{order:-1;transform:translate3d(0,14px,0);transition:transform 1s var(--ease);padding:.5rem .9rem;border-radius:99px;background:var(--ink);color:#fff;font-size:.68rem;letter-spacing:.08em;white-space:nowrap;box-shadow:0 14px 30px -14px rgba(15,16,22,.5)}
.statement__beat-l{display:block;flex:1;width:1px;margin-top:.9rem;background:linear-gradient(180deg,var(--ink),rgba(47,69,255,.9) 60%,rgba(47,69,255,0));transform-origin:50% 0;transform:scaleY(0);transition:transform .5s var(--ease)}
.statement__beat.is-on .statement__beat-t{transform:none}
.statement__beat.is-on .statement__beat-l{transform:scaleY(1);transition:transform 1.6s var(--ease) .15s}
.statement__beat-l{position:relative}
.statement__beat-l::after{content:'';position:absolute;left:-2.5px;top:0;width:6px;height:6px;border-radius:50%;background:var(--acid);box-shadow:0 0 0 4px rgba(47,69,255,.16);animation:stmDrop 2.4s cubic-bezier(.55,0,.35,1) infinite}
@keyframes stmDrop{0%{top:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:100%;opacity:0}}
@keyframes stmBob{50%{transform:translateY(4px)}}

@media(max-width:800px){
  .about__top{top:5.6rem}
  .about__who img{width:24px;height:24px}
  .about__h{top:7.6rem;font-size:15.4vw;line-height:.9}
  .about__l--b{padding-left:0}
  .about__copy{left:var(--pad);right:var(--pad);top:calc(8.6rem + 28vw);max-width:none}
  .about__p{font-size:1rem;line-height:1.4}
  .about__act{margin-top:1.1rem;gap:.8rem 1.2rem}
  .about__cta{padding:.9rem 1.15rem .9rem 1rem}
  .about__proof{margin-top:1rem}
  .reel__slot{left:calc(var(--pad) + 5vw);top:auto;bottom:6vh;width:calc(100vw - 2 * var(--pad) - 14vw);aspect-ratio:16/11}
  .reel__disc{width:5.6rem;height:5.6rem;margin:-2.8rem 0 0 -2.8rem}
  .reel__ring,.reel__snd{display:none}
  .reel__head{top:5rem}
  .reel__tc{font-size:.58rem;bottom:1rem}
  .reel__cap{font-size:.6rem}
  .statement{height:225vh}
  .statement__pill{top:18vh}
  /* five shorter lines at a bigger size on a clear 0 / 0 / 10vw / 0 / 10vw ladder */
  .statement__h{top:33vh;font-size:min(15.6vw,8.6vh);line-height:.96}
  .stm-br{display:block}
  .statement__l--2{padding-left:10vw}
  .statement__l--3{padding-left:0}
  .stm-in{padding-left:10vw}
  .statement__k{bottom:1.4rem;font-size:.62rem;padding:.5rem .75rem}
  .statement__beat{top:40vh}
}
@media(max-width:760px){
  .about__proof{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about__proof li{min-width:0}
  .about__pl{max-width:none}
  .about__pv{white-space:normal}
  .about__proof li{padding:.55rem .7rem .5rem}
  .about__proof li:nth-child(odd){padding-left:0;border-left:0}
  .about__proof li:nth-child(n+3){border-top:1px solid var(--line)}
  .about__pl{font-size:.62rem}
  .about__pv{font-size:.9rem}
}
@media(prefers-reduced-motion:reduce){.about__top,.about__copy,.statement__pill,.statement__pill::after,.statement__k,.statement__beat,.statement__beat-t,.statement__beat-l,.reel__cap,.reel__disc,.reel__disc.is-on,.reel__hud,.reel__hud.is-on,.reel__head,.reel__tc,.reel__snd{transition-duration:.01s!important;transition-delay:0s!important}}
@media(prefers-reduced-motion:reduce){.about__live i,.about__dot,.reel__disc::after,.reel__ring,.statement__k i,.statement__beat-l::after{animation:none}}
@media(hover:none){.reel__spot{display:none}}