/* One restrained, scroll-led film chapter per case study. */
.scroll-film{--film-progress:0;position:relative;height:225svh;margin-block:clamp(40px,6vw,100px);background:#080d0f}
.film-stage{position:sticky;top:54px;height:calc(100svh - 54px);overflow:hidden;isolation:isolate;background:var(--case-bg,#111b22);border:0}
.film-stage:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent,#cbd7ed);transform:scaleX(var(--film-progress));transform-origin:left;z-index:5;pointer-events:none}
.film-media{position:absolute;inset:0;overflow:hidden;background:var(--case-bg,#111b22);z-index:-2}
.film-media>img,.film-media>picture>img,.film-media>video{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;transform:scale(calc(1.025 + var(--film-progress)*.035));background:transparent}
.film-media>img,.film-media>picture>img{z-index:0}
.film-media>video{z-index:1}
.film-shade{position:absolute;inset:0;background:linear-gradient(90deg,#030a10a8 0%,#030a1047 60%,#030a1020),linear-gradient(0deg,#030a10bd,transparent 35%,transparent 70%,#030a1040);z-index:-1;pointer-events:none}
.film-copy{position:absolute;inset:18% var(--gutter,5vw) 21%;color:#fff;z-index:2}
.film-copy>.eyebrow{position:absolute;top:0;left:0;font-size:12px;line-height:1.5;color:#e3e9ed;text-shadow:0 2px 18px #0007}
.film-line{position:absolute;left:0;top:50%;width:min(100%,1120px);margin:0;font-family:var(--sf-pro,-apple-system,BlinkMacSystemFont,system-ui,sans-serif);font-size:clamp(50px,6.8vw,116px);font-weight:300;line-height:1.045;letter-spacing:-.045em;text-wrap:balance;white-space:pre-line;color:#fff;opacity:0;visibility:hidden;transform:translateY(calc(-50% + 22px));transition:opacity .5s ease,transform .7s cubic-bezier(.2,.7,.3,1),visibility .5s;text-shadow:0 3px 32px #0004}
.film-line.is-active{opacity:1;visibility:visible;transform:translateY(-50%)}
.film-footer{position:absolute;left:var(--gutter,5vw);right:var(--gutter,5vw);bottom:28px;display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:4;color:#fff}
.film-counter{font-size:12px;letter-spacing:.08em;line-height:1.5;font-variant-numeric:tabular-nums;text-shadow:0 2px 12px #0008}
.film-footer [data-video-toggle],.media-motion[data-video-toggle]{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:44px;min-height:44px;padding:10px 15px;border:1px solid #ffffff66;border-radius:30px;background:#080d0fc7;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-family:var(--sf-pro,-apple-system,BlinkMacSystemFont,system-ui,sans-serif);font-size:12px;font-weight:400;line-height:1.35;text-align:center;cursor:pointer;opacity:1;visibility:visible;transition:background .2s,border-color .2s}
.film-footer [data-video-toggle]:hover,.media-motion[data-video-toggle]:hover{background:#17242be8;border-color:#ffffffbb}
.film-footer [data-video-toggle]:focus-visible,.media-motion[data-video-toggle]:focus-visible{outline:2px solid #c5dcff;outline-offset:5px}
.film-footer [data-video-toggle] svg,.media-motion[data-video-toggle] svg{width:14px;height:14px;flex:none}

/* The editorial variation pairs an uninterrupted image with a quiet type panel. */
.film-side .film-stage{background:var(--case-bg,#111b22)}
.film-side .film-media{left:44%;border:0}
.film-side .film-shade{left:44%;background:linear-gradient(0deg,#030a1099,transparent 38%),linear-gradient(90deg,#080d0f18,transparent 40%)}
.film-side .film-copy{inset:0 auto 0 0;width:44%}
.film-side .film-copy>.eyebrow{top:clamp(38px,7svh,84px);left:var(--gutter,5vw);right:30px}
.film-side .film-line{left:var(--gutter,5vw);width:calc(100% - var(--gutter,5vw) - 32px);max-width:620px;font-size:clamp(42px,4.5vw,79px);line-height:1.07;text-shadow:none}
.film-side .film-footer{bottom:28px}
.film-side .film-counter{color:#c9d2d8;text-shadow:none}

/* Decorative video loops stay part of the layout; playback is always controllable. */
.decorative-video .media-frame,.media-frame.decorative-video{position:relative;overflow:hidden;isolation:isolate;background:#11181c}
.decorative-video .media-frame>video,.media-frame.decorative-video>video{display:block;width:100%;height:auto;object-fit:contain;background:#11181c}
.media-frame>.media-motion[data-video-toggle]{position:absolute;right:16px;bottom:16px;z-index:4;box-shadow:0 4px 18px #0003}
.decorative-video .media-frame:focus-within,.media-frame.decorative-video:focus-within{overflow:visible}
.decorative-video .media-frame:focus-within>video,.media-frame.decorative-video:focus-within>video{border-radius:inherit}

@media(min-width:1800px){.film-copy,.film-footer{left:max(var(--gutter),calc((100vw - 1600px)/2));right:max(var(--gutter),calc((100vw - 1600px)/2))}.film-side .film-copy{left:0;right:auto}.film-side .film-copy>.eyebrow,.film-side .film-line{left:max(var(--gutter),calc((100vw - 1600px)/2))}.film-side .film-line{width:calc(100% - max(var(--gutter),calc((100vw - 1600px)/2)) - 32px)}}
@media(max-width:1100px) and (min-width:761px){.film-side .film-media,.film-side .film-shade{left:45%}.film-side .film-copy{width:45%}.film-side .film-line{font-size:clamp(40px,4.7vw,56px);width:calc(100% - var(--gutter,5vw) - 24px)}}
@media(max-width:760px){
 .scroll-film{height:170svh;margin-block:40px 60px}
 .film-stage{top:54px;height:calc(100svh - 54px)}
 .film-copy{inset:17% var(--gutter,22px) 23%}
 .film-copy>.eyebrow{font-size:11px;max-width:90%;line-height:1.5}
 .film-line{font-size:clamp(39px,9.8vw,67px);line-height:1.06;letter-spacing:-.04em;transform:translateY(calc(-50% + 16px))}
 .film-line.is-active{transform:translateY(-50%)}
 .film-shade{background:linear-gradient(0deg,#02080eb8,transparent 35%,#02080e30),linear-gradient(90deg,#02080e7a,#02080e20)}
 .film-footer{bottom:20px;gap:15px}
 .film-counter{font-size:11px}
 .film-footer [data-video-toggle],.media-motion[data-video-toggle]{font-size:11px;padding:10px 13px;min-height:44px}
 .film-side .film-media{inset:0 0 48%;border:0}
 .film-side .film-shade{inset:0 0 48%;background:linear-gradient(0deg,#080d0f32,transparent 55%)}
 .film-side .film-copy{inset:calc(52% + 24px) var(--gutter,22px) 85px;width:auto}
 .film-side .film-copy>.eyebrow{top:0;left:0;right:0}
 .film-side .film-line{left:0;top:calc(50% + 12px);width:100%;font-size:clamp(30px,7.9vw,48px);line-height:1.07;letter-spacing:-.035em}
 .film-side .film-footer{bottom:20px}
 .media-frame>.media-motion[data-video-toggle]{right:10px;bottom:10px;max-width:calc(100% - 20px)}
}
@media(max-height:580px){
 .film-copy{inset:12% var(--gutter,22px) 25%}
 .film-copy>.eyebrow{font-size:10px}
 .film-line{font-size:clamp(31px,5.3vw,58px);line-height:1.05;top:57%}
 .film-footer{bottom:14px}
 .film-side .film-media,.film-side .film-shade{inset:0 0 0 48%}
 .film-side .film-copy{inset:10% auto 22% var(--gutter,22px);width:calc(48% - var(--gutter,22px) - 22px)}
 .film-side .film-copy>.eyebrow{top:0;left:0}
 .film-side .film-line{left:0;top:56%;width:100%;font-size:clamp(26px,3.8vw,43px)}
 .film-side .film-footer{bottom:14px}
}
@media(prefers-reduced-motion:reduce){
 .scroll-film{height:auto;margin-block:40px}
 .film-stage{position:relative;top:auto;height:clamp(480px,80svh,800px)}
 .film-media>img,.film-media>picture>img,.film-media>video{transform:none}
 .film-stage:after{display:none}
 .film-line{transition:none;transform:translateY(-50%)!important}
 .film-copy>.film-line{display:none!important}
 .film-copy>.film-line:first-of-type{display:block!important;opacity:1!important;visibility:visible!important}
 .film-footer [data-video-toggle],.media-motion[data-video-toggle]{transition:none}
}
/* Leave a short breathing space between successive lines. */
.scroll-film .film-line{transition:opacity .18s ease,transform .35s ease}
.scroll-film .film-line.is-active{transition:opacity .45s ease .10s,transform .55s ease .10s}
.site-quiet .scroll-film .film-media>*,.site-quiet .scroll-film .film-media>picture>img{transform:none!important}