/* Photographic chapters are also usable without JavaScript or motion. */
.cinema{position:relative;background:#081018;color:#f6f8fa;border-bottom:1px solid #ffffff30}
.cinema-stage{position:relative;isolation:isolate}
.cinema-top{position:relative;z-index:4;padding:30px 4.2%;display:flex;align-items:center;justify-content:space-between;gap:24px;background:#081018}
.cinema-top .eyebrow{font-size:9px;color:#b1d5e7;letter-spacing:2px}
.cinema-top h1{font:500 20px/1.4 Manrope,Arial,sans-serif;letter-spacing:-.5px;margin:5px 0 0}
.cinema-skip{display:inline-flex;align-items:center;gap:30px;font-size:12px;min-height:44px;border-bottom:1px solid #ffffff55;white-space:nowrap}
.cinema-skip span{color:#68d5ff;font-size:19px}
.cinema-scene{position:relative;min-height:600px;overflow:hidden;isolation:isolate;background:#0b151e}
.cinema-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.cinema-media>img{width:100%;height:100%;object-fit:cover;object-position:var(--photo-position,50% 50%);display:block}
.cinema-media:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#02080ce8 0%,#02080c9c 33%,#02080c12 78%),linear-gradient(0deg,#030a10d9,transparent 65%);pointer-events:none}
.cinema-copy{position:relative;padding:150px 4.2% 70px;max-width:820px}
.cinema-copy .eyebrow{font-size:9px;letter-spacing:2px;color:#8edfff}
.cinema-copy h2{font:500 clamp(56px,6.7vw,106px)/1.03 Manrope,Arial,sans-serif;letter-spacing:-.065em;margin:24px 0}
.cinema-copy h2 em{font-style:normal;color:#a2dcf2}
.cinema-copy>p:not(.eyebrow){font-size:14px;line-height:1.8;color:#cfdae2;max-width:330px;margin:0 0 20px}
.cinema-project{display:inline-flex;align-items:center;gap:45px;font-size:12px;min-height:44px;border-bottom:1px solid #ffffff66}
.cinema-project:hover{color:#8de0ff}
.cinema-project span{font-size:20px;color:#73d5f9}
.cinema-scene-video{background:radial-gradient(ellipse at 75% 35%,#1b4b63,#0a1823 60%,#081018)}
.cinema-screen{position:absolute;right:4.2%;top:22%;width:58%;aspect-ratio:1520/832;overflow:hidden;border:1px solid #b7e8ff3d;border-radius:10px;background:#e9eef0;box-shadow:0 30px 100px #0009;transform:perspective(1400px) rotateY(-9deg) rotateX(3deg);transform-origin:center}
.cinema-screen img,.cinema-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.cinema-screen video{z-index:1}
.cinema-screen:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 30px #fff1}
.cinema-scene-video .cinema-copy{max-width:47%;z-index:3;padding-top:130px;padding-bottom:120px}
.cinema-scene-video .cinema-copy h2{font-size:clamp(52px,5.3vw,82px)}
.cinema-foot{display:none}
.cinema-live{height:290svh;min-height:1700px}
.cinema-live .cinema-stage{position:sticky;top:0;height:100svh;min-height:550px;overflow:hidden}
.cinema-live .cinema-top{position:absolute;top:0;left:0;right:0;background:linear-gradient(#030910b3,transparent);padding-top:27px;padding-bottom:50px}
.cinema-live .cinema-scenes{position:absolute;inset:0}
.cinema-live .cinema-scene{position:absolute;inset:0;min-height:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .8s ease,visibility .8s}
.cinema-live .cinema-scene.is-active{opacity:1;visibility:visible;pointer-events:auto;z-index:1}
.cinema-live .cinema-media>img{transform:scale(var(--scene-scale,1.075)) translateY(var(--scene-drift,8px));will-change:transform}
.cinema-live .cinema-copy{position:absolute;bottom:125px;padding:0 0 0 4.2%;width:100%;max-width:820px;transform:perspective(1200px) translateY(35px) rotateX(8deg);opacity:0;transition:transform .85s cubic-bezier(.16,.7,.2,1),opacity .65s}
.cinema-live .is-active .cinema-copy{transform:perspective(1200px) translateY(0) rotateX(0);opacity:1}
.cinema-live .cinema-scene-video .cinema-copy{max-width:43%;bottom:155px}
.cinema-live .cinema-screen{top:26%;transition:transform 1.2s cubic-bezier(.16,.7,.2,1);transform:perspective(1400px) rotateY(-15deg) rotateX(5deg) translateZ(-100px)}
.cinema-live .is-active .cinema-screen{transform:perspective(1400px) rotateY(-7deg) rotateX(2deg) translateZ(0)}
.cinema-live .cinema-foot{display:flex;position:absolute;z-index:5;bottom:0;left:0;right:0;padding:25px 4.2% 24px;gap:35px;align-items:end;background:linear-gradient(transparent,#030910c9)}
.cinema-controls{display:flex;gap:24px;width:500px;max-width:65%;align-items:end}
.cinema-controls button{position:relative;flex:1;min-width:0;min-height:55px;text-align:left;padding:0 0 18px;background:none;border:0;font-size:11px;color:#9cabb6;transition:color .3s}
.cinema-controls button[aria-current]{color:white}
.chapter-num{color:#6bcff2;font-size:9px;margin-right:10px}
.chapter-track{position:absolute;height:2px;left:0;right:0;bottom:0;background:#ffffff30;overflow:hidden}
.chapter-track i{display:block;width:100%;height:100%;background:#80dcff;transform:scaleX(var(--chapter-fill,0));transform-origin:left}
.cinema-count{margin:0 0 1px auto;font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:2px;color:#c3d7e1;white-space:nowrap}
.cinema-play{position:absolute;right:4.2%;bottom:115px;z-index:6;min-height:44px;padding:10px 18px;background:#07131ad9;border:1px solid #ffffff50;border-radius:24px;font-size:11px;backdrop-filter:blur(10px)}
.cinema-live .cinema-play:hover{border-color:#75d4f8}
.cinema-static .cinema-scenes{display:grid;grid-template-columns:1fr 1fr 1fr}
.cinema-static .cinema-scene{min-height:530px}
.cinema-static .cinema-copy{padding:235px 25px 35px;max-width:none}
.cinema-static .cinema-copy h2{font-size:42px}
.cinema-static .cinema-scene-video .cinema-copy{max-width:none;padding-top:255px}
.cinema-static .cinema-screen{width:90%;right:5%;top:55px;transform:none}
.case-video{padding:0 5% 35px}
.case-video video{display:block;width:100%;height:auto;max-height:72svh;background:#020508;border-radius:6px}
.case-video p{color:#a7bac8;font-size:12px;line-height:1.8;margin:16px 0 0}
.video-label{position:absolute;top:17px;left:17px;padding:8px 12px;border:1px solid #ffffff66;border-radius:20px;background:#071018d9;letter-spacing:1px;font-size:9px;color:#c2efff}
@media(max-width:1000px){.cinema-copy h2{font-size:78px}.cinema-live .cinema-copy{max-width:700px}.cinema-live .cinema-scene-video .cinema-copy{max-width:45%}.cinema-scene-video .cinema-copy h2{font-size:56px}.cinema-screen{width:55%}.cinema-static .cinema-scenes{grid-template-columns:1fr}.cinema-static .cinema-scene{min-height:470px}.cinema-static .cinema-copy{padding-top:145px}.cinema-static .cinema-copy h2{font-size:58px}.cinema-static .cinema-scene-video .cinema-copy{max-width:45%;padding-top:160px}.cinema-static .cinema-screen{width:52%;top:95px;right:4%}}
@media(max-width:680px){.cinema-live{height:270svh;min-height:1500px}.cinema-top{padding:23px 6%;gap:15px}.cinema-top .eyebrow{font-size:8px;letter-spacing:1.3px}.cinema-top h1{font-size:16px;max-width:180px}.cinema-skip{font-size:11px;gap:15px;white-space:normal;line-height:1.5}.cinema-live .cinema-top{padding:23px 6% 45px}.cinema-media:after{background:linear-gradient(0deg,#030a10f5 1%,#030a109e 45%,#030a1030 78%,#030a1090)}.cinema-live .cinema-copy{left:0;bottom:125px;padding-left:6%;padding-right:6%;max-width:100%}.cinema-copy h2{font-size:clamp(46px,11.4vw,73px);letter-spacing:-.06em;margin:20px 0}.cinema-copy .eyebrow{font-size:8px;letter-spacing:1.3px}.cinema-copy>p:not(.eyebrow){font-size:13px;max-width:300px;margin-bottom:15px;line-height:1.7}.cinema-project{font-size:12px;gap:35px}.cinema-live .cinema-foot{padding:18px 6% 20px;gap:15px}.cinema-controls{max-width:none;width:auto;flex:1;gap:14px}.cinema-controls button{font-size:10px;padding-bottom:14px;min-height:51px}.chapter-num{display:block;font-size:8px;margin:0 0 5px}.cinema-count{font-size:9px;letter-spacing:1px;margin-bottom:0}.cinema-screen,.cinema-live .cinema-screen{top:24%;right:7%;width:86%;transform:none}.cinema-live .is-active .cinema-screen{transform:none}.cinema-live .cinema-scene-video .cinema-copy{max-width:100%;bottom:115px;padding-right:6%}.cinema-scene-video .cinema-copy h2{font-size:clamp(41px,10.2vw,63px);margin-bottom:15px}.cinema-scene-video .cinema-copy h2 br{display:none}.cinema-scene-video .cinema-copy h2 em{display:block}.cinema-scene-video .cinema-copy>p:not(.eyebrow){max-width:360px}.cinema-play{right:7%;bottom:auto;top:calc(24% + 86vw * .5474 + 13px);font-size:10px;min-height:40px;padding:9px 15px}.cinema-static .cinema-copy h2{font-size:50px}.cinema-static .cinema-screen{top:45px;width:88%;right:6%}.cinema-static .cinema-scene-video .cinema-copy{max-width:100%;padding-top:calc(88vw * .5474 + 90px)}.case-video{padding:0 5% 25px}.case-video p{font-size:12px}}
@media(max-width:420px){.cinema-top h1{max-width:155px;font-size:15px}.cinema-skip{font-size:10px;gap:12px}.cinema-live .cinema-copy{bottom:112px}.cinema-copy h2{margin-top:18px}.cinema-controls{gap:12px}.cinema-controls button{font-size:9px}.cinema-scene-video .cinema-copy>p:not(.eyebrow){display:none}.cinema-live .cinema-scene-video .cinema-copy{bottom:110px}.cinema-live .cinema-screen{top:23%}.cinema-play{top:calc(23% + 86vw * .5474 + 14px)}}
@media(max-width:680px) and (max-height:740px){.cinema-live .cinema-screen{top:19%;width:76%;right:12%}.cinema-play{top:calc(19% + 76vw * .5474 + 12px);right:12%}.cinema-scene-video .cinema-copy>p:not(.eyebrow){display:none}.cinema-scene-video .cinema-copy h2{font-size:44px}.cinema-live .cinema-scene-video .cinema-copy{bottom:110px}}
@media(prefers-reduced-motion:reduce){.cinema *{animation:none!important;transition:none!important;scroll-behavior:auto!important}.cinema-media>img{transform:none!important}.cinema-screen{transform:none!important}}
