/* --- scope all rules to #scrollstory to avoid global conflicts --- */
    #scrollstory{ --panel:#0d1218; --line:#18202d; --ink:#e9edf2; --muted:#9aa6b2; --radius:18px; --g:32px; --title:clamp(38px,6.8vw,92px); }
    #scrollstory *{ box-sizing:border-box }
    #scrollstory .stage{ display:grid; grid-template-columns:minmax(280px,1fr) minmax(540px,0.95fr); gap:var(--g); }
    /* left sticky media (desktop) */
    #scrollstory .media{ position:sticky; top:0; height:100svh; border-radius:var(--radius); overflow:hidden; background:#000 }
    #scrollstory .img-stack{ position:relative; width:100%; height:100% }
    #scrollstory .media figure{ position:absolute; inset:0; margin:0; opacity:0; transform:scale(1.04) translateY(10px);
      transition:opacity .5s ease, transform .9s cubic-bezier(.2,.6,0,.99) }
    #scrollstory .media figure.is-active{ opacity:1; transform:scale(1) translateY(0) }
    #scrollstory .media img{ width:100%; height:100%; object-fit:cover }
    #scrollstory .scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.22) 55%,rgba(0,0,0,.34) 100%) }

    /* right content */
    #scrollstory .content{ padding-block:10svh; background:var(--panel); border-left:1px solid #0a0f14; border-radius:var(--radius) }
    #scrollstory .step{ min-height:92svh; padding:9svh 4vw; border-bottom:1px solid var(--line); position:relative; overflow:hidden }
    /* curtain motion */
    #scrollstory .step::before{
      content:""; position:absolute; inset:-1px 0 auto 0; height:0;
      background:linear-gradient(180deg,#0f141b,#0e131a);
      z-index:3; transition:height .55s cubic-bezier(.2,.7,0,1)
    }
    #scrollstory .step.is-leaving::before{ height:100% }
    #scrollstory .step.is-entering:not(.is-active)::before{ height:100%; transition:none }
    #scrollstory .step.is-active::before{ height:0 }

    #scrollstory .inner{ position:relative; z-index:1 }
    #scrollstory .eyebrow{ display:flex; align-items:center; gap:10px; color:var(--muted); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:12px }
    #scrollstory .dot{ width:7px; height:7px; background:#8a93a0; border-radius:999px; box-shadow:0 0 0 4px #8a93a022 }
    #scrollstory .title{ font-size:var(--title); letter-spacing:-.02em; line-height:1.02; margin:.45em 0 .4em; font-weight:900; color:var(--ink) }
    #scrollstory .rail{ height:1px; width:100%; background:#1a2230; margin:18px 0 22px; position:relative }
    #scrollstory .rail:after{ content:""; position:absolute; left:0; top:-1px; height:2px; width:160px; border-radius:3px; background:#cfd6df; opacity:.9 }
    #scrollstory .desc{ max-width:62ch; color:#b7c3cf; font-size:18px }
    #scrollstory .bullets{ margin:16px 0 0 0; padding:0; list-style:none; color:#c4cfdb }
    #scrollstory .bullets li{ margin:10px 0; display:flex; gap:10px }
    #scrollstory .bullets li:before{ content:"▹"; color:#9aa3ad }
    #scrollstory .cta{ display:inline-flex; align-items:center; gap:10px; margin-top:26px; padding:14px 18px; border-radius:999px; border:1px solid #2b3447; background:#0f1622; color:#e9edf2; text-decoration:none; font-weight:700 }

    /* focus-in on active step */
    #scrollstory .step .title, #scrollstory .step .desc, #scrollstory .step .cta{
      opacity:.18; transform:translateY(18px); transition:opacity .45s ease, transform .45s ease
    }
    #scrollstory .step.is-active .title, #scrollstory .step.is-active .desc, #scrollstory .step.is-active .cta{
      opacity:1; transform:translateY(0)
    }

    /* mobile */
    #scrollstory .m-media{ display:none }
    @media (max-width:1023.98px){
      #scrollstory .stage{ grid-template-columns:1fr; gap:16px }
      #scrollstory .media{ display:none }
      #scrollstory .content{ padding-block:0 }
      #scrollstory .step{ min-height:auto; padding:0; border-bottom:none }
      #scrollstory .m-media{ display:block; height:56svh; position:relative; overflow:hidden }
      #scrollstory .m-media img{ width:100%; height:100%; object-fit:cover }
      #scrollstory .m-media .scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.15) 60%,rgba(0,0,0,.35) 100%) }
      #scrollstory .inner{ padding:8svh 6vw; background:var(--panel); border-top:1px solid var(--line) }
      #scrollstory .title{ font-size:clamp(30px,8.5vw,54px) }
      #scrollstory .desc{ font-size:16px }
    }