#gap{--gap-ink2:#3e4558}
#gap .gap-pin{position:relative;height:300vh;height:300svh}
#gap .gap-stage{background:radial-gradient(120% 90% at 70% 55%,#fbfaf8 0%,var(--paper) 55%,#ecebe6 100%)}
#gap .gap-gl{z-index:0}
#gap .gap-stage:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--paper) 0%,rgba(244,243,240,.9) 28%,rgba(244,243,240,0) 46%)}

/* ---------- copy column ---------- */
#gap .gap-copy{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;gap:28px;pointer-events:none}
#gap .gap-steps{position:relative;max-width:min(520px,38vw);min-height:360px}
#gap .gap-step{position:absolute;inset:0 0 auto 0;opacity:0;will-change:opacity,transform}
#gap .gap-step .label{margin-bottom:16px;opacity:.7}
#gap .gap-step .label.accent{opacity:1;color:var(--orange)}
#gap .gap-say{font-family:var(--display);font-weight:800;font-size:clamp(30px,3.1vw,50px);letter-spacing:-.035em;line-height:1.02;color:var(--ink)}
#gap .gap-say em{font-style:normal;color:var(--orange)}
#gap .gap-big{font-size:clamp(44px,5.2vw,84px);letter-spacing:-.045em;line-height:.95}
#gap .gap-sub{margin-top:18px;font-size:clamp(18px,1.5vw,22px);line-height:1.4;color:var(--gap-ink2);font-weight:500}
#gap .gap-count{margin-top:30px;font-family:var(--display);font-weight:800;letter-spacing:-.045em;line-height:.9;font-size:clamp(60px,6.4vw,104px);color:var(--ink);display:flex;align-items:baseline;gap:.08em;font-variant-numeric:tabular-nums}
#gap .gap-approx{font-weight:600;opacity:.35;font-size:.6em}
#gap .gap-unit{font-size:.32em;letter-spacing:-.02em;color:var(--gap-ink2);margin-left:.15em}
#gap .gap-cap{margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gap-ink2);display:flex;align-items:center;gap:10px;line-height:1.6}
#gap .gap-key{flex:none;width:12px;height:12px;background:#fff;border:1px solid var(--ink);box-shadow:inset 0 3px 0 #fff,inset 0 4px 0 var(--ink),inset 0 7px 0 #fff,inset 0 8px 0 var(--ink)}
#gap .gap-final-h{font-size:clamp(40px,4.4vw,72px);letter-spacing:-.04em;line-height:.96;margin-bottom:14px}
#gap .gap-final-l{font-size:clamp(18px,1.5vw,22px);line-height:1.4;color:var(--ink);font-weight:500;margin-bottom:22px;max-width:28ch}
#gap .gap-points{list-style:none;display:grid;gap:10px}
#gap .gap-points li{display:grid;grid-template-columns:30px 1fr;gap:8px;padding-top:10px;border-top:1px solid var(--line);font-size:15px;line-height:1.4;color:var(--gap-ink2)}
#gap .gap-points b{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--orange);padding-top:2px}

/* ---------- hud ---------- */
#gap .gap-hud{position:absolute;z-index:2;right:var(--gut);bottom:28px;display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
#gap .gap-bar{width:120px;height:1px;background:var(--line);overflow:hidden}
#gap .gap-bar i{display:block;height:100%;width:100%;background:var(--orange);transform-origin:0 50%;transform:scaleX(0)}

/* ---------- transitions ---------- */
#gap .gap-intro{height:28vh;background:linear-gradient(180deg,var(--void) 0%,#2a2f3c 30%,#cfcdc7 75%,var(--paper) 100%)}
#gap .gap-tail{position:relative;height:46vh;min-height:300px;background:linear-gradient(180deg,var(--paper) 0%,var(--paper) 18%,#b9b9bb 52%,var(--ink) 100%)}
#gap .gap-tail .wrap{padding-top:20px}
#gap .gap-fine{max-width:96ch;color:var(--ink)}

/* ---------- mobile ---------- */
@media (max-width:760px){
  #gap .gap-stage:before{background:linear-gradient(180deg,var(--paper) 0%,rgba(244,243,240,.9) 40%,rgba(244,243,240,0) 54%)}
  #gap .gap-copy{justify-content:flex-start;padding-top:84px;gap:16px}
  #gap .gap-steps{max-width:none;min-height:0}
  #gap .gap-say{font-size:clamp(26px,7.6vw,34px)}
  #gap .gap-big{font-size:clamp(40px,12vw,52px)}
  #gap .gap-sub{font-size:17px;margin-top:12px}
  #gap .gap-count{margin-top:18px;font-size:clamp(52px,15vw,72px)}
  #gap .gap-cap{font-size:10px;letter-spacing:.1em}
  #gap .gap-final-h{font-size:clamp(34px,10vw,44px);margin-bottom:8px}
  #gap .gap-final-l{font-size:16px;margin-bottom:12px}
  #gap .gap-points{gap:6px}
  #gap .gap-points li{padding-top:7px;font-size:14px}
  #gap .gap-hud{display:none}
  #gap .gap-intro{height:18vh}
}

/* ---------- reduced motion: static final composition ---------- */
#gap.gap-static .gap-pin{height:auto}
#gap.gap-static .gap-stage{position:relative;height:auto;min-height:100svh}
#gap.gap-static .gap-copy{padding-top:120px;padding-bottom:80px}
#gap.gap-static .gap-steps{min-height:0;display:grid;gap:40px}
#gap.gap-static .gap-step{position:relative;opacity:1;display:none}
#gap.gap-static .gap-step[data-step="0"],#gap.gap-static .gap-step[data-step="4"]{display:block}
#gap.gap-static .gap-hud{display:none}
@media (max-width:760px){#gap.gap-static .gap-stage{min-height:190svh}}