.scroll-hero{height:290svh;background:#101010;color:#f7f6f1;--progress:0}
.scroll-hero-stage{height:100svh;min-height:620px;position:sticky;top:0;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:75px max(5vw,24px) 45px;gap:3vw;background:radial-gradient(ellipse at 75% 50%,#29272255,transparent 60%)}
.scroll-hero-copy{position:relative;z-index:2;max-width:640px}
.scroll-hero .eyebrow{color:#b0b3a7;font-size:11px;letter-spacing:.2em;margin-bottom:30px}
.scroll-hero h1{font-size:clamp(48px,5.8vw,86px);line-height:.98;letter-spacing:-.035em;margin-bottom:26px}
.scroll-hero h1 em{font-style:normal;color:#b8bdb0}
.scroll-hero-copy>p:not(.eyebrow){font-size:16px;line-height:1.65;color:#b3b5af;max-width:390px}
.scroll-hero .hero-actions{margin-top:28px}.scroll-hero .button-primary{background:#e8ebe3;color:#161916;border-color:#e8ebe3}.scroll-hero .hero-cases-link{color:#b7bcb0;font-size:13px}
.scroll-hero-media{position:absolute;right:2vw;top:65px;bottom:30px;width:51%;display:grid;place-items:center;pointer-events:none}
.scroll-hero-media canvas,.scroll-hero-media picture{position:absolute;width:100%;height:100%;object-fit:contain}
.scroll-hero-media img{width:100%;height:100%;object-fit:contain}
.scroll-hero-media canvas{opacity:0}.frames-ready .scroll-hero-media canvas{opacity:1}.frames-ready .scroll-hero-media picture{visibility:hidden}
.scroll-hero-footer{position:absolute;left:5vw;right:5vw;bottom:22px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#a5a89f}
.scroll-hero-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:#b8bdb0;transform:scaleX(var(--progress));transform-origin:left}
.scroll-hero.static-hero{height:auto}.static-hero .scroll-hero-stage{position:relative}.static-hero .scroll-hero-footer{display:none}
@media(max-width:700px){.scroll-hero{height:250svh}.scroll-hero-stage{min-height:720px;padding:90px 24px 48px;display:block}.scroll-hero-copy{max-width:100%}.scroll-hero .eyebrow{font-size:9px;margin-bottom:16px}.scroll-hero h1{font-size:42px;max-width:340px;margin-bottom:15px}.scroll-hero-copy>p:not(.eyebrow){font-size:13px;line-height:1.5;max-width:330px;margin-bottom:12px}.scroll-hero .hero-actions{margin-top:15px}.scroll-hero .button{min-height:42px;padding:10px 15px;font-size:12px}.scroll-hero .hero-cases-link{margin-top:10px;font-size:12px}.scroll-hero-media{top:385px;bottom:35px;right:0;width:100%}.scroll-hero-footer{font-size:8px}.scroll-hero-footer span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){.scroll-hero{height:auto}.scroll-hero-stage{position:relative}.scroll-hero-footer{display:none}}

/* Keep the complete scene below the existing sticky navigation. */
.scroll-hero-stage{top:var(--hero-header,72px);height:calc(100svh - var(--hero-header,72px));padding-top:35px;min-height:580px}
.scroll-hero-media{top:15px}
@media(max-width:700px){.scroll-hero-stage{min-height:660px;padding-top:38px}.scroll-hero-media{top:310px;bottom:35px}.scroll-hero .hero-cases-link{display:inline-block}}

/* Feather the actual landscape frame, not the wider canvas letterbox. */
.scroll-hero-media canvas,
.scroll-hero-media picture {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 95%, transparent);
  -webkit-mask-size: var(--frame-width,100%) var(--frame-height,100%);
  mask-size: var(--frame-width,100%) var(--frame-height,100%);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Landscape station: preserve the full arrangement from the supplied film. */
.scroll-hero-stage{grid-template-columns:.85fr 1.15fr;gap:0}
.scroll-hero-copy{max-width:490px}
.scroll-hero-media{right:0;width:60%}
.scroll-hero h1{font-size:clamp(46px,5.2vw,78px)}
.scroll-hero-copy>p:not(.eyebrow){max-width:340px}
@media(max-width:700px){
  .scroll-hero h1{font-size:42px}
  .scroll-hero-copy{max-width:100%}
  .scroll-hero-media{top:340px;bottom:50px;width:100%;right:0}
}