/* Continuous opening: one video, three spatial planes, native scrolling. */
.opening{position:relative;height:340vh;height:340svh;background:#17171C;isolation:isolate}
.field-anchor{position:absolute;top:210vh;top:210svh;left:0;width:1px;height:1px;pointer-events:none}
.opening-sticky{position:sticky;top:0;height:100vh;height:100svh;min-height:520px;overflow:clip;background:#17171C}
.rig-anchor{position:absolute;left:50%;top:calc(50% + 22px);width:calc(100% - 48px);height:calc(100% - 158px);max-height:780px;transform:translate(-50%,-50%);perspective:1800px;perspective-origin:50% 50%}
.capture-rig{position:relative;width:100%;height:100%;transform-style:preserve-3d;will-change:transform}
.capture-plane{position:absolute;inset:0;border-radius:20px;backface-visibility:visible}
.capture-media{overflow:hidden;background:#101014;box-shadow:0 28px 90px #0008;transform:translateZ(0)}
.capture-media video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 54%;filter:brightness(.85) saturate(.88)}
.capture-shade{position:absolute;inset:0;background:linear-gradient(0deg,#0008,transparent 35%),linear-gradient(90deg,#0005,transparent 80%);opacity:var(--shade,1)}
.capture-origin{position:absolute;bottom:24px;left:26px;color:#F6F4EF99;font-size:10px;letter-spacing:1px}
.capture-play{position:absolute;right:22px;bottom:20px;display:grid;place-items:center;width:42px;height:42px;border:1px solid #F6F4EF77;border-radius:50%;color:#F6F4EF;background:#0003;font-size:14px;transform:scale(calc(1 / var(--rig-scale,1)));transform-origin:bottom right}
.capture-play:hover{background:#F6F4EF22;border-color:#F6F4EF}
.context-plane{opacity:0;border:1px solid #DAD6CB5C;background:#C9C4B606;overflow:hidden;box-shadow:inset 0 0 80px #9A9A9F09;pointer-events:none}
.context-grid{position:absolute;inset:0;background-image:linear-gradient(#C9C4B612 1px,transparent 1px),linear-gradient(90deg,#C9C4B612 1px,transparent 1px);background-size:7% 12%}
.plane-top{position:absolute;left:28px;top:24px;color:#DAD6CBBA;font-size:13px;letter-spacing:2px}
.plane-bottom{position:absolute;left:28px;bottom:24px;color:#DAD6CB8C;font-size:12px}
.context-steps{position:absolute;left:9%;right:9%;top:50%;display:flex;align-items:center;gap:24px;color:#CFC9BA;font-size:24px;letter-spacing:2px}
.context-steps span{padding:22px;border:1px solid #C9C4B666;border-radius:8px;white-space:nowrap}
.context-steps i{height:1px;flex:1;background:#C9C4B655}
.annotation-plane{opacity:0;border:1px solid #E8E4D9A3;background:#E8E4D903;pointer-events:none}
.action-map{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.action-map .map-cross{stroke:#F6F4EF99;stroke-width:1.5}
.action-map .map-box{stroke:#E8E4D9;stroke-width:1.4}
.action-map .secondary{stroke:#E8E4D999}
.action-map .map-track{stroke:#DAD6CBBA;stroke-width:1.4;stroke-dasharray:5 7}
.action-map .map-guide{stroke:#E8E4D977;stroke-width:1}
.action-map text{font-family:Consolas,monospace;font-size:13px;letter-spacing:2px;fill:#E8E4D9BB}
.annotation-bottom{position:absolute;bottom:24px;left:28px;right:28px;display:flex;align-items:center;gap:12px;color:#E8E4D9B3;font-size:12px}
.annotation-bottom span:last-child{margin-left:auto}
.plane-pulse{width:5px;height:5px;background:#DAD6CB;border-radius:50%}
.opening-title{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 5vw;pointer-events:none;text-align:center;will-change:opacity,transform}
.opening-eyebrow{color:#F6F4EFB3;margin-bottom:28px;font-size:10px;letter-spacing:2px}
.opening-title h1{font-size:clamp(36px,4.8vw,74px);font-weight:750;letter-spacing:-2px;line-height:1.3;text-shadow:0 3px 30px #0004}
.opening-title .accent{color:#D6401F}
.opening-cue{position:absolute;bottom:42px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;color:#F6F4EF88;pointer-events:none}
.opening-cue>span:last-child{font-size:20px}
.opening-caption{position:absolute;left:50%;top:72%;width:90%;transform:translateX(-50%);text-align:center;opacity:0;pointer-events:none}
.opening-caption>.mono{color:#9A9A9F;font-size:10px;letter-spacing:2px}
.opening-caption p{margin-top:18px;font-size:clamp(27px,2.8vw,42px);font-weight:500;line-height:1.45;letter-spacing:-1px}
.opening-caption p span{color:#D6401F}
.opening-field-copy{position:absolute;left:62%;top:50%;transform:translateY(-40%);width:32%;max-width:490px;opacity:0;visibility:hidden;will-change:transform,opacity}
.opening-field-copy .kicker{display:block;color:#9A9A9F;margin-bottom:25px;font-size:10px}
.opening-field-copy h2{font-size:clamp(36px,4.2vw,64px);font-weight:650;line-height:1.2;letter-spacing:-2px}
.opening-field-copy h2 .accent{color:#D6401F}
.opening-field-copy p{font-size:15px;color:#B4B0A6;line-height:2;margin-top:28px}
.opening-field-copy .text-link{margin-top:28px}
.opening-progress{position:absolute;left:42px;right:42px;bottom:30px;display:flex;align-items:center;gap:18px;opacity:0;color:#8E8E93;pointer-events:none}
.opening-progress i{height:1px;flex:1;background:#F6F4EF17;position:relative;overflow:hidden}
.opening-progress b{position:absolute;inset:0;background:#D6401F;transform:scaleX(var(--progress,0));transform-origin:left}
.opening-progress .mono{font-size:8px}
/* The following card moves over the ending of the opening. */
.approach{position:relative;z-index:2;margin-top:-70px;padding:0 24px 100px;background:transparent}
.approach-card{min-height:480px;border-radius:26px;box-shadow:0 -30px 100px #0003}
.scenes{position:relative;padding:55px 24px 65px;overflow:hidden;isolation:isolate}
.scenes-head{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);width:min(54%,640px);gap:28px;z-index:2}
.scenes-head.reveal{opacity:1}.scenes-head.reveal.in{transform:translate(-50%,-50%)}
.scenes-head h2{font-size:clamp(38px,4.6vw,68px);line-height:1.15;letter-spacing:-2px}
.scenes-head .pill{padding:13px 25px;font-size:13px}
.scenes-cloud{height:680px;max-width:1460px;margin:0 auto}
.float-card{width:clamp(145px,17vw,238px);aspect-ratio:16/10;border-radius:12px;box-shadow:0 16px 35px #0002}
.float-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fc1{top:2%;left:7%}.fc2{top:1%;left:auto;right:17%}.fc3{top:37%;right:0}
.fc4{top:auto;bottom:8%;left:5%}.fc5{top:auto;bottom:0;left:44%}.fc6{top:34%;left:0;right:auto;bottom:auto}
form input,form select,form textarea{font-size:16px}
#brief-dialog{margin:auto}
@media(min-width:1600px){.scenes-cloud{height:760px}.scenes-head{top:44%}}
@media(max-width:1020px){
  .opening{height:310vh;height:310svh}
  .field-anchor{top:195vh;top:195svh}
  .rig-anchor{width:calc(100% - 32px);height:58vh;height:58svh;max-height:600px;top:calc(50% + 10px)}
  .opening-title h1{font-size:clamp(34px,5.5vw,55px);letter-spacing:-1.5px}
  .opening-title{padding:0 7vw}
  .opening-eyebrow{font-size:8px;margin-bottom:22px}
  .opening-field-copy{left:8%;top:57%;width:84%;max-width:650px;transform:translateY(20px)}
  .opening-field-copy h2{font-size:38px;line-height:1.25}
  .opening-field-copy h2 br{display:none}
  .opening-field-copy .kicker{margin-bottom:15px;font-size:9px}
  .opening-field-copy p{font-size:14px;line-height:1.9;margin-top:17px;max-width:420px}
  .opening-field-copy p br{display:none}
  .opening-field-copy .text-link{margin-top:20px;font-size:13px}
  .opening-caption{top:71%}
  .opening-caption p{font-size:30px}
  .opening-progress{left:24px;right:24px;bottom:22px}
  .capture-origin{font-size:8px;bottom:18px;left:18px}
  .capture-play{right:16px;bottom:14px}
  .approach{margin-top:-40px;padding:0 16px 70px}
  .approach-card{min-height:0;grid-template-columns:minmax(200px,.85fr) 1.15fr;gap:30px;padding:38px}
  .approach-copy h2{font-size:30px}
  .approach-copy p{font-size:14px;margin:20px 0 26px}
  .scenes-cloud{height:620px}
  .float-card{width:19vw}
}
@media(max-width:900px){
  .scenes{padding:70px 24px}
  .scenes-head,.scenes-head.reveal.in{position:relative;left:auto;top:auto;transform:none;width:100%;gap:26px}
  .scenes-cloud{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
  .float-card{position:relative;width:100%;aspect-ratio:16/10;inset:auto}
}
@media(max-width:680px){
  .opening{height:290vh;height:290svh}
  .field-anchor{top:190vh;top:190svh}
  .opening-sticky{min-height:600px}
  .rig-anchor{height:58vh;height:58svh;top:calc(50% - 5px)}
  .capture-plane{border-radius:15px}
  .opening-title h1{font-size:clamp(30px,7.8vw,48px);line-height:1.4;letter-spacing:-1.2px}
  .opening-title .accent{white-space:nowrap}
  .opening-eyebrow{font-size:7px;letter-spacing:1.3px;margin-bottom:20px}
  .opening-cue{bottom:65px}
  .opening-caption{top:69%}
  .opening-caption p{font-size:27px}
  .opening-field-copy{top:55%;left:7%;width:86%}
  .opening-field-copy h2{font-size:32px;letter-spacing:-1px}
  .opening-field-copy p{max-width:330px}
  .plane-top{font-size:12px;left:20px;top:20px}
  .annotation-bottom,.plane-bottom{font-size:10px;left:20px;bottom:20px}
  .annotation-bottom{right:20px}
  .context-steps{gap:16px;font-size:17px}.context-steps span{padding:16px 9px}
  .approach-card{grid-template-columns:1fr;padding:30px 25px;gap:28px}
  .approach-pip{max-width:none;aspect-ratio:16/10}
  .approach-copy h2{font-size:29px}
  .scenes{padding:64px 16px}
  .scenes-head,.scenes-head.reveal.in{position:relative;left:auto;top:auto;transform:none;width:100%;gap:24px}
  .scenes-head h2{font-size:42px;letter-spacing:-1.5px}
  .scenes-cloud{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:42px}
  .float-card{position:relative;width:100%;aspect-ratio:4/3;inset:auto}
  .float-card:nth-child(2n){margin-top:20px}
}
/* A readable normal-flow opening for short windows and reduced motion. */
@media(max-height:600px),(prefers-reduced-motion:reduce){
  .opening{height:auto}
  .field-anchor{top:65%}
  .opening-sticky{position:relative;height:auto;min-height:0;overflow:hidden;padding:96px 24px 100px}
  .rig-anchor{position:relative;top:auto;left:auto;transform:none;width:100%;height:66vh;min-height:300px;max-height:650px;perspective:none}
  .capture-rig{transform:none!important}
  .annotation-plane,.context-plane,.opening-caption,.opening-progress,.opening-cue{display:none}
  .opening-title{top:96px;bottom:auto;height:66vh;min-height:300px;opacity:1!important;transform:none!important}
  .opening-eyebrow{display:none}
  .opening-title h1{font-size:clamp(30px,4.8vw,66px)}
  .opening-field-copy{position:relative;left:auto;top:auto;width:100%;max-width:800px;margin:64px auto 0;opacity:1!important;visibility:visible!important;transform:none!important}
  .opening-field-copy h2{font-size:clamp(32px,4vw,54px)}
  .opening-field-copy h2 br{display:none}
  .opening-field-copy p br{display:none}
  .opening-field-copy p{max-width:520px}
  .capture-shade{opacity:1!important}
  .approach{margin-top:-28px}
  .scenes-head.reveal.in{transform:translate(-50%,-50%)!important}
}
@media(max-width:900px) and (max-height:600px){.scenes-head.reveal.in{transform:none!important}}
@media(max-width:900px) and (prefers-reduced-motion:reduce){.scenes-head.reveal.in{transform:none!important}}
@media(max-width:680px) and (prefers-reduced-motion:reduce){
  .opening-sticky{padding:86px 16px 80px}
  .rig-anchor{height:58vh;height:58svh;min-height:380px}
  .opening-title{top:86px;height:58vh;height:58svh;min-height:380px}
  .opening-title h1{font-size:32px}
  .opening-field-copy{margin-top:46px}
  .scenes-head.reveal.in{transform:none!important}
}
