/* Scoped to the K11 design-process section. */
.k11-process{padding:0;background:#303133;color:#f4f4f2}
.k11-process .k11-intro{padding-top:clamp(60px,9vh,120px);padding-bottom:50px}
.k11-process .eyebrow{color:#bfc3c8}
.k11-process h2{font-family:var(--font-disp);font-size:clamp(32px,4.6vw,70px);font-weight:600;line-height:1.04;letter-spacing:-.03em}
.k11-caption{max-width:48ch;margin-top:24px;color:#c5c7ca;font-size:15px;line-height:1.7}
.k11-process k11-scroll{--k11-top:64px}
.k11-outro{padding-top:30px;padding-bottom:48px;font-size:14px}
.k11-outro a{text-decoration:underline;text-underline-offset:5px}
.k11-poster{width:100%;height:auto;display:block}
.blocks .k11-intro{padding-left:clamp(20px,4vw,60px);padding-right:clamp(20px,4vw,60px)}
k11-scroll:not(:defined){display:none}

/* The existing headline stays above the scroll-driven film. */
.hero-scroll{height:360svh;position:relative;background:#17191a}
.hero-scroll .hero{position:sticky;top:0;height:100svh;min-height:760px;padding-top:100px;padding-bottom:7vh;overflow:hidden}
.hero-scroll .hero-inner{width:100%;margin:0 auto}
.hero-scroll .hero-scrim{background:linear-gradient(90deg,rgba(8,10,12,.72),rgba(8,10,12,.38) 65%,rgba(8,10,12,.2)),linear-gradient(0deg,rgba(8,10,12,.5),transparent 55%)}
.hero-scroll .hero-media{background:#303133 url('assets/k11-spacegrey.jpg') center/cover no-repeat}
.hero-scroll .hero-media k11-scroll{position:absolute;inset:0;width:100%;height:100%;--k11-top:0px}
@media(max-width:760px){.hero-scroll .hero{min-height:680px;padding-top:100px;padding-bottom:40px}.hero-scroll .hero-tag{display:none}.hero-scroll .hero-scrim{background:rgba(8,10,12,.57)}}
@media(prefers-reduced-motion:reduce){.hero-scroll{height:auto}.hero-scroll .hero{position:relative}}
.hero-scroll:has(k11-scroll[data-static]){height:auto}