.scroll-process { background: #efeee9; color: #111; position: relative; }
.scroll-process__stage { background: #efeee9; position: relative; }
.scroll-process__header { padding: 100px 5% 20px; display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.scroll-process__header h2 { font-size:clamp(25px,3vw,48px); font-weight:500; letter-spacing:-.045em; }
.scroll-process__header a { font-size:12px; color:inherit; text-decoration:none; border-bottom:1px solid #aaa; }
.process-viewport { position:relative; outline-offset:-4px; }
.process-nodes { list-style:none; padding:0; margin:0; }
.process-node { position:relative; padding:40px 5%; border-bottom:1px solid #bbb; }
.process-node__index,.process-node__meta { font:18px/1.5 'Courier New',monospace; letter-spacing:.14em; }
.process-node__index { display:block; margin-bottom:22px; }
.process-node__intro { font-size:clamp(13px,1.7vw,24px); text-transform:uppercase; line-height:1.2; margin:0 0 12px; }
.process-node h3 { font-size:clamp(36px,8vw,138px); font-weight:900; letter-spacing:.025em; line-height:1; margin:0 0 18px; }
.process-node__meta { margin:0; }
.process-route,.process-caption,.scroll-process__progress { display:none; }
.scroll-process.is-native .scroll-process__stage { height:100vh !important; height:100dvh !important; display:flex; flex-direction:column; overflow:hidden; }
.is-native .scroll-process__header { flex:none; position:relative; z-index:2; }
.is-native .process-viewport { flex:1; min-height:0; overflow:hidden; touch-action:pan-y; }
.is-native .process-world { position:absolute; inset:0 auto auto 0; width:1px; height:1px; will-change:transform; }
.is-native .process-node { position:absolute; padding:0; border:0; transform:translate(-50%,-50%); }
.is-native .process-route { display:block; position:absolute; overflow:visible; pointer-events:none; }
.process-route path { fill:none; stroke:#777970; stroke-width:1; vector-effect:non-scaling-stroke; }
.process-confetti { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.is-native .process-caption { display:flex; flex:none; justify-content:space-between; padding:22px 5%; font:18px/1.4 'Courier New',monospace; letter-spacing:.12em; }
.is-native .scroll-process__progress { display:block; height:2px; flex:none; background:#d5d4ce; }
.scroll-process__progress span { display:block; height:100%; background:#111; transform:scaleX(0); transform-origin:left; }
@media(max-width:767px) {
 .scroll-process__header { padding:90px 6% 14px; }
 .scroll-process__header a { font-size:10px; }
 .process-node h3 { font-size:clamp(32px,10.4vw,78px); }
 .process-node__intro { font-size:14px; max-width:250px; }
 .process-node__index { margin-bottom:20px; }
 .process-node__meta { letter-spacing:.07em; overflow-wrap:anywhere; }
 .is-native .process-caption { padding:18px 6% max(18px,env(safe-area-inset-bottom)); flex-wrap:wrap; gap:12px 24px; }
}

/* Launch artwork is a native button, with keyboard and touch support. */
.process-launch { position:absolute; right:0; top:50%; transform:translateY(-50%); width:clamp(82.5px,10.5vw,165px); padding:0; border:0; border-radius:50%; background:transparent; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:scale 180ms ease; }
.process-launch img { display:block; width:100%; height:auto; }
.process-launch:hover { scale:1.05; }
.process-launch:active { scale:.95; }
.process-launch:focus-visible { outline:2px solid #111; outline-offset:8px; }
@media(max-width:1100px) {
 .process-launch { position:static; transform:none; width:75px; margin-top:22px; }
}
@media(prefers-reduced-motion:reduce) {
 .process-launch { transition:none; }
}