/* Northpage scrub-hero core. Variants: layer-split | build-up | macro-reveal */
:root{--sh-accent:#C6F135;--sh-moss:#4A6B00}
.sh{--sh-accent:#C6F135;--sh-ink:#111;--sh-moss:#4A6B00;position:relative;height:var(--sh-height,280vh);background:var(--sh-bg,#0e0f0c);color:#fff}
.sh-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center}
.sh-canvas{width:min(92vw,86vh);aspect-ratio:1;display:block;opacity:0;transition:opacity .4s}
.sh.ready .sh-canvas{opacity:1}
.sh-overlay{position:absolute;inset:0;pointer-events:none}
.sh-box{position:absolute;left:50%;top:50%;width:min(92vw,86vh);aspect-ratio:1;transform:translate(-50%,-50%)}
.sh-head{position:absolute;left:clamp(16px,4vw,56px);top:clamp(72px,12vh,120px);max-width:min(520px,80vw);z-index:2}
.sh-head h1{font:700 clamp(28px,4.4vw,60px)/1.05 system-ui,sans-serif;margin:0 0 .3em;letter-spacing:-.02em}
.sh-head p{margin:0;font:400 clamp(15px,1.4vw,19px)/1.45 system-ui,sans-serif;opacity:.85}
.sh-caption{position:absolute;left:clamp(16px,4vw,56px);bottom:clamp(96px,14vh,140px);max-width:min(460px,84vw);font:500 clamp(16px,1.6vw,22px)/1.4 system-ui,sans-serif;opacity:0;transform:translateY(12px);transition:opacity .45s,transform .45s;background:rgba(0,0,0,.45);padding:.7em 1em;border-radius:12px;backdrop-filter:blur(6px)}
.sh-caption.on{opacity:1;transform:none}
.sh-caption b{display:block;font-size:.7em;letter-spacing:.14em;text-transform:uppercase;color:var(--sh-accent);margin-bottom:.25em}
/* leader-line labels: x,y = anchor on object (%), lx,ly = label position (%) */
.sh-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sh-lines line{stroke:var(--sh-accent);stroke-width:1.5;vector-effect:non-scaling-stroke;transition:opacity .4s;opacity:0}
.sh-lines circle{fill:var(--sh-accent);opacity:0;transition:opacity .3s}
.sh-lines .on{opacity:1}
.sh-lbl{position:absolute;transform:translate(-50%,-50%) scale(.96);opacity:0;transition:opacity .35s .15s,transform .35s .15s;background:rgba(10,10,10,.82);border:1px solid rgba(198,241,53,.6);color:#fff;font:600 13px/1.25 system-ui,sans-serif;padding:.45em .7em;border-radius:8px;white-space:nowrap}
.sh-lbl small{display:block;font-weight:400;opacity:.75}
.sh-lbl.on{opacity:1;transform:translate(-50%,-50%)}
.sh-step{position:absolute;right:clamp(16px,4vw,56px);top:clamp(72px,12vh,120px);font:700 clamp(40px,6vw,88px)/1 ui-monospace,monospace;letter-spacing:-.04em}
.sh-step span{opacity:.35;font-size:.4em;vertical-align:top}
.sh-progress{position:absolute;left:0;bottom:0;height:3px;background:var(--sh-accent);width:calc(var(--p,0)*100%)}
.sh-cta{position:fixed;right:16px;bottom:16px;z-index:50;background:var(--sh-accent);color:#111;font:700 15px/1 system-ui,sans-serif;padding:16px 22px;border-radius:999px;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.sh-cta:focus-visible{outline:3px solid #fff;outline-offset:3px}
.sh-sample{position:absolute;right:12px;top:12px;font:700 11px/1 system-ui;letter-spacing:.12em;background:#000;color:var(--sh-accent);padding:6px 8px;border-radius:6px}
/* light theme: lime never as text on light bg -> moss */
.sh.light{background:#f4f1ea;color:var(--sh-ink)}
.sh.light .sh-caption{background:rgba(255,255,255,.8)}
.sh.light .sh-caption b{color:var(--sh-moss)}
.sh.static .sh-progress{display:none}
@media (max-width:768px){.sh-lbl{font-size:11px}.sh-lbl small{display:none}.sh-head{top:64px}.sh-cta{left:16px;right:16px;text-align:center}}
@media (prefers-reduced-motion:reduce){.sh *{transition:none!important}}