.spatial-story{height:360svh;position:relative;background:#0c2328}
.spatial-sticky{height:calc(100svh - 96px);min-height:620px;position:sticky;top:0;overflow:hidden;isolation:isolate}
.spatial-stage{position:absolute;inset:0;z-index:0}.spatial-stage canvas{display:block;width:100%;height:100%}
.spatial-fallback{position:absolute;width:65%;height:90%;object-fit:contain;right:0;top:0;opacity:.8}.spatial-ready .spatial-fallback{display:none}
.spatial-vignette{position:absolute;inset:0;background:linear-gradient(90deg,#0c2328 0%,#0c2328e0 18%,#0c232880 34%,transparent 55%),linear-gradient(0deg,#0c2328,transparent 18%);pointer-events:none}
.spatial-copy{position:absolute;top:19%;left:6%;width:40%;max-width:590px;z-index:2;transition:opacity .25s,transform .4s}
.spatial-copy .eyebrow{font-size:12px;letter-spacing:2.5px;margin-bottom:28px}.spatial-copy h1{font-size:clamp(52px,5.4vw,88px);line-height:1.05;letter-spacing:-3.5px;margin:0 0 28px}.spatial-copy h1 em{white-space:normal}
.spatial-copy p.description{font-size:18px;line-height:1.7;color:#b7ceca;max-width:365px;min-height:92px}.spatial-copy .actions{margin-top:32px}.spatial-copy .button{padding:15px 20px}.spatial-copy .spatial-note{color:#89aaa5;font-size:12px;line-height:1.7;max-width:355px;margin-top:28px}
.spatial-bottom{position:absolute;bottom:28px;left:6%;right:6%;display:flex;align-items:center;gap:22px;z-index:3;border-top:1px solid #c9dace2b;padding-top:18px}.spatial-bottom>span{font-size:11px;letter-spacing:1.6px;color:#a9c0b8}.spatial-bottom>a{font-size:13px;color:#b7c8ba}
.spatial-progress{height:2px;flex:1;background:#a2c3b322;overflow:hidden}.spatial-progress i{height:100%;width:100%;display:block;transform-origin:left;transform:scaleX(var(--spatial-progress,0));background:#e2c17e}
.spatial-bottom button{background:transparent;border:1px solid #9ebca94d;border-radius:50%;color:#e2c17e;width:42px;height:42px;font-size:17px;flex-shrink:0}
.spatial-chapters{position:absolute;right:4%;top:44%;display:flex;flex-direction:column;gap:18px;z-index:3}.spatial-chapters button{position:relative;width:28px;height:28px;padding:8px;border:0;background:none}.spatial-chapters button:before{content:'';display:block;border-radius:50%;width:8px;height:8px;border:1px solid #b2cbbb;background:#17413d;transition:background .3s,box-shadow .3s}.spatial-chapters button[aria-current=true]:before{background:#e2c17e;border-color:#e2c17e;box-shadow:0 0 0 5px #e2c17e16}
.spatial-chapters button span{position:absolute;right:35px;top:2px;white-space:nowrap;font-size:11px;letter-spacing:.5px;color:#e2d7b5;background:#0c2328d9;padding:3px 8px;border-radius:3px;opacity:0;pointer-events:none;transition:opacity .2s}.spatial-chapters button:hover span,.spatial-chapters button:focus-visible span,.spatial-chapters button[aria-current=true] span{opacity:1}
.spatial-stage-label{position:absolute;right:12%;bottom:15%;font-size:11px;letter-spacing:2px;color:#a2bbb1}.spatial-copy[data-changing=true]{opacity:.15;transform:translateY(10px)}
.demo-details{background:#0c2328;border-top:1px solid #b9cebf33;padding:25px 5%}.demo-details>summary{font-size:18px;cursor:pointer;color:#dfcfaa;padding:10px 0;list-style:none;display:flex;justify-content:space-between}.demo-details>summary:after{content:'+';font-size:25px}.demo-details[open]>summary:after{content:'−'}.demo-details .hero-copy{display:none}.demo-details .cinema-hero{display:block;min-height:0;padding:20px 0 100px;background:none}.demo-details .cinematic{max-width:730px;margin:0 auto}.demo-details .cinema-controls{padding:0 0 30px}
.spatial-unavailable{height:100svh}.spatial-unavailable .spatial-chapters,.spatial-unavailable .spatial-progress{display:none}.spatial-story.reduced{height:100svh}.spatial-story.reduced .spatial-chapters{display:flex}.spatial-story.reduced #spatial-motion{display:none}
.core-benefits{display:flex;justify-content:space-between;gap:20px;padding:30px 6%;background:#12312f;color:#cfdbcb;font-size:14px;border-top:1px solid #b7c9b32b}.core-benefits span:before{content:'✓';color:#e2c17e;margin-right:9px}
@media(min-width:1800px){.spatial-copy{left:10%}}
@media(max-width:1000px){.spatial-copy{width:46%;left:5%;top:18%}.spatial-copy h1{font-size:56px}.spatial-copy p.description{font-size:16px}.spatial-copy .actions{flex-wrap:wrap;gap:14px}.spatial-stage-label{right:10%;font-size:10px}}
@media(max-width:650px){.spatial-sticky{height:calc(100svh - 80px);min-height:730px}.spatial-story{height:310svh}.spatial-copy{top:4%;left:6%;width:88%;max-width:none}.spatial-copy h1{font-size:44px;letter-spacing:-2px;max-width:340px;margin-bottom:15px}.spatial-copy .eyebrow{font-size:10px;margin-bottom:16px}.spatial-copy p.description{font-size:15px;line-height:1.5;min-height:46px;max-width:315px;margin-bottom:16px}.spatial-copy .actions{margin-top:10px;gap:15px}.spatial-copy .button{font-size:12px;padding:11px 13px}.spatial-copy .text-button{font-size:12px}.spatial-copy .spatial-note{font-size:10px;margin-top:12px;max-width:310px}.spatial-vignette{background:linear-gradient(180deg,#0c2328 0%,#0c2328d0 18%,transparent 47%,transparent 80%,#0c2328 99%)}.spatial-bottom{bottom:18px;left:6%;right:6%;gap:12px}.spatial-bottom>span{font-size:9px;letter-spacing:.7px;max-width:145px}.spatial-bottom button{width:36px;height:36px}.spatial-chapters{right:2%;top:60%;gap:10px}.spatial-stage-label{bottom:11%;right:9%;font-size:9px}.spatial-fallback{width:100%;height:55%;top:37%}.demo-details>summary{font-size:15px}.spatial-story.reduced,.spatial-unavailable{height:760px}.demo-details .cinematic{min-height:350px}.demo-details .cinema-hero{padding-bottom:25px}.spatial-chapters button span{font-size:10px;right:29px}.core-benefits{display:grid;grid-template-columns:1fr 1fr;gap:18px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.spatial-copy{transition:none}html{scroll-behavior:auto}}