/* Scroll story — shared kit. Each site maps these variables to its own tokens:
   --st-bg (page background, also used to feather the frames), --st-fg, --st-muted, --st-accent,
   --st-display (heading font), --st-display-weight, --st-maxw, --st-gutter, --st-nav (header height). */
.st-stage{--st-bg:#050A18;--st-fg:#eef1fb;--st-muted:#a9b2d4;--st-accent:#d4a249;--st-line:rgba(255,255,255,.14);
  --st-maxw:1240px;--st-gutter:clamp(16px,4vw,56px);--st-nav:76px;--st-display:inherit;--st-display-weight:600;--st-bottom:0px;
  position:relative;background:var(--st-bg);color:var(--st-fg)}
.st-pin{position:relative;height:100vh;height:100svh;overflow:hidden}
html.st-on .st-pin{position:-webkit-sticky;position:sticky;top:0}
.st-media{position:absolute;inset:0;background:var(--st-bg)}
.st-media canvas,.st-poster{position:absolute;inset:0;width:100%;height:100%;display:block}
.st-poster{background:var(--st-bg) center/cover no-repeat;transition:opacity .35s}
.st-stage.ready .st-poster{opacity:0}
html.st-on .st-poster-end,html:not(.st-on) .st-poster-start{display:none}
.st-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--st-bg) 0%,color-mix(in srgb,var(--st-bg) 62%,transparent) 36%,transparent 60%),
             linear-gradient(0deg,var(--st-bg) 0%,transparent 26%)}
html[dir="rtl"] .st-media::after{background:linear-gradient(270deg,var(--st-bg) 0%,color-mix(in srgb,var(--st-bg) 62%,transparent) 36%,transparent 60%),
             linear-gradient(0deg,var(--st-bg) 0%,transparent 26%)}
.st-stage.st-mirror-rtl canvas{transform:none}
html[dir="rtl"] .st-stage.st-mirror-rtl canvas,html[dir="rtl"] .st-stage.st-mirror-rtl .st-poster{transform:scaleX(-1)}
.st-copy{position:absolute;inset:0;z-index:2;display:flex;align-items:center;padding:calc(var(--st-nav) + 16px) 0 calc(90px + var(--st-bottom))}
.st-wrap{width:100%;max-width:var(--st-maxw);margin-inline:auto;padding-inline:var(--st-gutter)}
.st-story{display:grid;max-width:min(580px,46vw)}
.st-scene{grid-area:1/1;align-self:center;display:none}
.st-scene.st-final{display:grid;gap:18px}
html.st-on .st-scene{display:grid;gap:18px}
html.st-on .st-scene[data-in]{visibility:hidden;opacity:0}
/* the real h1, moved into the first scene by story.js while the story runs (SEO: visible from the first paint) */
.st-h1{position:relative;margin:0 0 clamp(2px,1vh,10px);padding-inline-start:34px;max-width:46ch;
  font:600 clamp(.9rem,1.05vw,1.05rem)/1.4 var(--st-body,inherit);letter-spacing:.01em;color:var(--st-fg);text-wrap:balance;
  text-shadow:0 1px 12px var(--st-bg),0 0 2px var(--st-bg)}
.st-h1::before{content:"";position:absolute;inset-inline-start:0;top:.7em;width:22px;height:2px;border-radius:2px;background:var(--st-accent)}
.st-h1 *{font:inherit !important;color:inherit !important;background:none !important;-webkit-text-fill-color:currentColor !important;letter-spacing:inherit !important}
.st-kicker{display:block;font-size:.88rem;letter-spacing:.02em;color:var(--st-accent);font-weight:600}
.st-title{font-family:var(--st-display);font-weight:var(--st-display-weight);font-size:clamp(2.1rem,4.4vw,4.2rem);line-height:1.05;margin:0;color:var(--st-fg);text-wrap:balance}
.st-lede{font-size:clamp(1rem,1.3vw,1.18rem);line-height:1.6;color:var(--st-muted);margin:0;max-width:52ch}
.st-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.st-cue{position:absolute;inset-inline:0;bottom:calc(clamp(18px,4vh,40px) + var(--st-bottom));z-index:3;pointer-events:none}
.st-cue .st-wrap{display:flex;align-items:center;gap:14px;font-size:.84rem;color:var(--st-muted)}
.st-rail{flex:0 0 150px;height:2px;background:var(--st-line);border-radius:2px;overflow:hidden}
.st-rail i{display:block;height:100%;width:100%;background:var(--st-accent);transform-origin:0 50%;transform:scaleX(0)}
html[dir="rtl"] .st-rail i{transform-origin:100% 50%}
.st-steps{display:flex;gap:16px}
.st-steps span.on{color:var(--st-fg)}
.st-reduced .st-pin{height:auto;min-height:100vh}
.st-reduced .st-cue{display:none}
@media (max-width:760px){
  .st-media{bottom:auto;height:54%}
  .st-media::after,html[dir="rtl"] .st-media::after{background:linear-gradient(0deg,var(--st-bg) 0%,color-mix(in srgb,var(--st-bg) 30%,transparent) 30%,transparent 55%),
    linear-gradient(180deg,color-mix(in srgb,var(--st-bg) 70%,transparent) 0%,transparent 24%)}
  .st-copy{align-items:flex-end;padding:0 0 calc(56px + var(--st-bottom))}
  .st-story{max-width:none}
  .st-title{font-size:clamp(1.8rem,8.2vw,2.5rem)}
  .st-scene,.st-scene.st-final,html.st-on .st-scene{gap:12px}
  .st-lede{font-size:.97rem}
  .st-cue .st-wrap{gap:10px;font-size:.76rem}
  .st-rail{flex-basis:80px}
  .st-steps{gap:10px}
  .st-h1{font-size:.84rem;margin-bottom:0;padding-inline-start:28px}
  .st-h1::before{width:18px}
}
@media (max-width:760px) and (max-height:640px){.st-scene:not(.st-final) .st-lede{display:none}}
/* phones: the finished scene keeps headline + actions; its lede is the first thing to go when height runs out */
@media (max-width:760px) and (max-height:800px){.st-final .st-lede.st-opt{display:none}}
@media (max-height:600px) and (min-width:761px){.st-lede{display:none}.st-final .st-lede{display:block}}