/* Three independently assembled scenes; all headings and controls remain HTML. */
.hero{background:#bed2f3;--scene-x:0;--scene-y:0;border-bottom:1px solid #a9c3e6}
.hero-slides{height:clamp(570px,44vw,680px);min-height:570px}
.hero-slide{background:linear-gradient(108deg,#f4f7ff 0%,#eaf1ff 37%,#b9d2fb 70%,#a8b7ef 100%);transition:opacity .7s ease,visibility .7s ease}
.hero-slide:after{display:none}
.hero-slide.scene-2{background:linear-gradient(110deg,#f2f7ff 0%,#e6f0ff 37%,#b6d8fa 67%,#98b4e7 100%)}
.hero-slide.scene-3{background:linear-gradient(110deg,#f3f6ff 0%,#e8edff 35%,#c4c6f3 63%,#99bbf4 100%)}
.hero-environment{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;isolation:isolate}
.environment-wash{position:absolute;inset:-10%;background:radial-gradient(ellipse at 81% 24%,#c8baf49e,transparent 35%),radial-gradient(ellipse at 63% 74%,#5e9cfa55,transparent 44%),radial-gradient(ellipse at 90% 80%,#a3caffaa,transparent 40%);animation:environment-wash 16s ease-in-out infinite alternate}
.scene-2 .environment-wash{background:radial-gradient(ellipse at 85% 10%,#91c7ffaa,transparent 40%),radial-gradient(ellipse at 55% 70%,#789cf666,transparent 43%),radial-gradient(ellipse at 100% 90%,#b7baf2bb,transparent 48%)}
.scene-3 .environment-wash{background:radial-gradient(ellipse at 95% 15%,#789ae399,transparent 38%),radial-gradient(ellipse at 60% 75%,#beb1ef88,transparent 48%)}
.environment-plane{position:absolute;inset:0;background:linear-gradient(125deg,#fff0 10%,#fff4 51%,#4569b81c 52%,#749ae61f 85%);clip-path:polygon(66% 0,100% 0,100% 100%,43% 100%)}
.scene-2 .environment-plane{clip-path:polygon(58% 0,100% 0,100% 100%,35% 100%);background:linear-gradient(130deg,#fff0,#ffffff46 52%,#426eaf19 52.2%,#78a3e62e)}
.scene-3 .environment-plane{clip-path:polygon(64% 0,100% 0,100% 100%,47% 100%)}
.environment-grid{position:absolute;inset:-48px;background-image:linear-gradient(#356bb11a 1px,transparent 1px),linear-gradient(90deg,#356bb11a 1px,transparent 1px),linear-gradient(#ffffff30 1px,transparent 1px),linear-gradient(90deg,#ffffff30 1px,transparent 1px);background-size:48px 48px,48px 48px,240px 240px,240px 240px;mask-image:linear-gradient(90deg,transparent 38%,#0007 62%,#000 100%);animation:environment-grid 48s linear infinite}
.environment-drawing{position:absolute;right:-3%;top:0;width:70%;height:100%;color:#4378bd;stroke-width:1.1;mask-image:linear-gradient(90deg,transparent,#000b 20%,#000);opacity:.55}
.drawing-main{stroke:currentColor;stroke-dasharray:2000;stroke-dashoffset:2000}.is-active .drawing-main{animation:environment-trace 2.6s ease .15s both}.drawing-datum{stroke:#4578bd;stroke-width:.8;stroke-dasharray:5 10;opacity:.7}
.environment-floor{position:absolute;left:38%;right:-10%;bottom:-19%;height:52%;background-image:linear-gradient(#5481bd25 1px,transparent 1px),linear-gradient(90deg,#5481bd25 1px,transparent 1px);background-size:64px 64px;transform:perspective(450px) rotateX(56deg) rotateZ(-9deg);mask-image:radial-gradient(ellipse,#0009,transparent 70%)}
.slide-inner{z-index:3;padding-top:0;padding-bottom:28px;align-items:center}
.slide-copy{width:47%;max-width:700px;pointer-events:none}
.slide-copy>.eyebrow{font-size:14px;letter-spacing:1.25px;line-height:1.5;margin-bottom:20px;color:#466990}
.slide-copy h1,.slide-copy h2{font-size:clamp(52px,5.2vw,80px);font-weight:550;line-height:1.06;letter-spacing:-2.5px;color:#183353;overflow-wrap:normal}
.slide-copy h1 br{display:block}
.slide-copy h1 span,.slide-copy h2 span{color:#1658c6}
.slide-copy p{font-size:18px;line-height:1.65;margin-top:24px;color:#4e6989;max-width:440px}
.slide-copy p strong{color:#244d88;font-weight:600}
.hero .button.primary{font-size:16px;line-height:1.4;min-height:54px;padding:15px 22px;margin-top:29px;gap:32px;border-radius:4px;pointer-events:auto}
.hero .button .icon{width:23px;height:23px}
.scene-container{position:absolute;inset:0;pointer-events:none;z-index:1;height:100%;isolation:isolate}
.assembly-scene{position:absolute;right:-1%;top:0;bottom:0;width:59%;transform:translate3d(calc(var(--sx)*5px),calc(var(--sy)*3px),0);transition:transform 1s ease-out}
.scene-halo{position:absolute;inset:4% -10% 0 -10%;border-radius:50%;background:radial-gradient(ellipse,#f2f7ff70,transparent 68%);filter:blur(25px);animation:studio-light 14s ease-in-out infinite alternate;z-index:0}
.scene-floor{position:absolute;bottom:2%;left:-12%;right:-15%;height:24%;background:radial-gradient(ellipse at 52% 50%,#b0c5e03b 0,transparent 65%);border-radius:50%;z-index:0;transform:scaleY(.52)}
.scene-shadow{position:absolute;left:10%;right:0;bottom:12%;height:9%;background:radial-gradient(ellipse,#829ecb3b,transparent 68%);filter:blur(14px);z-index:1;opacity:0}
.is-active .scene-shadow{animation:shadow-in 1.7s ease .35s both}
.scene-layer{position:absolute;opacity:0;z-index:2;--enter-x:0px;--enter-y:60px;--enter-rotate:0deg;--enter-scale:.97;--delay:.1s;will-change:transform,opacity}
.scene-layer img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;max-width:none}
.is-active .scene-layer{animation:assemble 1.45s cubic-bezier(.16,.8,.2,1) var(--delay) both}
.layer-ribbon{left:-38%;top:17%;width:148%;height:43%;z-index:1;--enter-x:-95px;--enter-y:20px;--enter-scale:.92;--delay:0s;opacity:.85}
.layer-white{left:0;bottom:9%;width:62%;height:84%;z-index:3;--enter-x:-52px;--enter-y:55px;--delay:.12s}
.layer-color{right:-2%;bottom:7%;width:55%;height:92%;z-index:4;--enter-x:72px;--enter-y:70px;--delay:.35s}
.scene-2 .scene-shadow{bottom:10%;left:0}
.layer-stack{left:-1%;bottom:14%;width:75%;height:77%;z-index:2;--enter-x:-75px;--enter-y:55px;--delay:.05s}
.layer-rods{right:0;bottom:27%;width:63%;height:48%;z-index:3;--enter-x:95px;--enter-y:20px;--delay:.28s}
.layer-pipes{left:22%;bottom:3%;width:78%;height:54%;z-index:4;--enter-x:70px;--enter-y:90px;--delay:.52s}
.layer-back-color{right:-2%;bottom:10%;width:62%;height:92%;z-index:2;--enter-x:95px;--enter-y:20px;--delay:.1s}
.layer-front-white{left:-3%;bottom:8%;width:70%;height:90%;z-index:4;--enter-x:-60px;--enter-y:70px;--delay:.34s}
.scene-3 .scene-halo{background:radial-gradient(ellipse at 50% 50%,#eef3ff70,transparent 60%)}
.is-active .copy-reveal{animation:copy-arrive .9s cubic-bezier(.2,.7,.2,1) both}
.is-active .copy-reveal:nth-child(1){animation-delay:.1s}
.is-active .copy-reveal:nth-child(2){animation-delay:.2s}
.is-active .copy-reveal:nth-child(3){animation-delay:.35s}
.is-active .copy-reveal:nth-child(4){animation-delay:.45s}
.hero-light{opacity:.2;z-index:2}
.hero-controls{bottom:103px;gap:14px}
.slide-navigation{gap:14px}
.slide-navigation button{width:40px;height:40px;font-size:25px}
.slide-counter{font-size:14px;letter-spacing:1px;white-space:nowrap}
.slider-pause{width:36px;height:36px;font-size:16px}
.slider-tabs button{font-size:16px;min-height:82px;line-height:1.4;padding:23px 27px;gap:18px}
.slider-tabs small{font-size:14px}
.slider-tabs{background:#f4f8fff2;border-color:#a9c3e6;box-shadow:0 -8px 35px #456ca30d}
.slider-tabs button{border-color:#bdd0eb;color:#47688f}.slider-tabs button:hover{background:#e5efff;color:#174c9e}.slider-tabs button[aria-selected=true]{background:#fff}
.tab-label-short{display:none}
@keyframes environment-wash{to{transform:translate(-3%,4%) scale(1.06);opacity:.8}}
@keyframes environment-grid{to{background-position:48px 48px,48px 48px,48px 48px,48px 48px}}
@keyframes environment-trace{to{stroke-dashoffset:0}}
@keyframes assemble{from{opacity:0;transform:translate3d(var(--enter-x),var(--enter-y),0) rotate(var(--enter-rotate)) scale(var(--enter-scale));filter:blur(4px)}to{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1);filter:blur(0)}}
@keyframes copy-arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes shadow-in{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
@keyframes studio-light{to{opacity:.7;transform:translate(4%,-3%) scale(1.08)}}
@media(min-width:1700px){.hero-slides{height:680px}.slide-copy h1,.slide-copy h2{font-size:80px}.assembly-scene{right:-2%;width:59%}}
@media(max-width:1100px){.slide-copy{width:49%}.slide-copy h1,.slide-copy h2{font-size:clamp(46px,5.1vw,60px);letter-spacing:-1.9px}.slide-copy>.eyebrow{font-size:14px;letter-spacing:.6px}.slide-copy p{font-size:18px}.hero-slides{height:590px}.assembly-scene{right:-8%;width:63%}.slider-tabs button{font-size:15px;gap:12px;padding:21px 18px}}
@media(max-width:900px) and (min-width:761px){.slide-copy h1,.slide-copy h2{font-size:44px;letter-spacing:-1.8px}.slide-copy>.eyebrow{font-size:14px;max-width:300px}.slide-copy{width:50%}.slide-copy p{font-size:16px}.hero .button.primary{font-size:16px;padding:14px 18px;gap:20px}.assembly-scene{right:-10%;width:60%}.hero-slides{height:570px}.slider-tabs button{font-size:14px;padding:18px 14px;gap:10px}}
@media(max-width:760px){
 .hero-slides{height:760px;min-height:760px}
 .hero-slide{background:linear-gradient(160deg,#f0f5ff 0%,#e8f0ff 42%,#b6cff8 72%,#b6b8e9)}
 .hero-slide.scene-2{background:linear-gradient(160deg,#f0f6ff 0%,#e4efff 42%,#acd2f8 70%,#9eb7e9)}
 .hero-slide.scene-3{background:linear-gradient(160deg,#f1f4ff 0%,#e6edff 42%,#c3c4ef 70%,#a3c3ef)}
 .environment-wash{top:35%;opacity:.7;mask-image:linear-gradient(transparent,#000 25%)}.environment-plane{inset:40% 0 0;clip-path:polygon(45% 0,100% 0,100% 100%,0 100%);mask-image:linear-gradient(transparent,#000 18%)}
 .environment-grid{mask-image:linear-gradient(transparent 35%,#0008 65%,#000)}
 .environment-drawing{top:42%;height:58%;width:115%;right:-12%;opacity:.5;mask-image:linear-gradient(transparent,#000 15%,#000)}
 .environment-floor{left:-25%;bottom:-10%;right:-25%;height:38%}
 .slide-inner{display:block;padding-top:28px;padding-bottom:0}
 .slide-copy{width:100%;max-width:none}
 .slide-copy>.eyebrow{font-size:14px;letter-spacing:.4px;line-height:1.5;margin-bottom:13px}
 .slide-copy h1,.slide-copy h2{font-size:44px;line-height:1.06;letter-spacing:-1.6px}
 .slide-copy h1 br:nth-of-type(2){display:block}
 .slide-copy p{font-size:16px;line-height:1.6;margin-top:18px;max-width:none}
 .hero .button.primary{font-size:16px;min-height:50px;margin-top:20px;padding:13px 18px;gap:28px}
 .scene-container{width:100%;inset:0}
 .assembly-scene{left:0;right:0;top:365px;bottom:70px;width:100%;transform:none;transition:none}
 .layer-white{left:3%;bottom:4%;width:59%;height:94%}
 .layer-color{right:1%;bottom:4%;width:52%;height:98%}
 .layer-ribbon{left:-20%;top:2%;width:140%;height:58%;--enter-x:-50px}
 .layer-stack{left:-3%;bottom:17%;width:81%;height:81%}
 .layer-rods{right:-13%;bottom:30%;width:67%;height:50%}
 .layer-pipes{left:18%;bottom:0;width:90%;height:59%}
 .layer-front-white{left:1%;bottom:4%;width:67%;height:96%}
 .layer-back-color{right:-1%;bottom:4%;width:58%;height:98%}
 .scene-floor{bottom:-2%}
 .scene-shadow{bottom:6%}
 .scene-2 .scene-shadow{bottom:0}
 .hero-controls{bottom:100px;gap:10px}
 .slide-navigation{padding:0 2px;gap:10px;border-radius:4px}
 .slide-navigation button{width:36px;height:36px;font-size:23px}
 .slide-counter{font-size:14px}
 .slider-pause{width:36px;height:36px;font-size:14px}
 .slider-tabs button{display:flex;flex-direction:column;gap:5px;align-items:flex-start;font-size:14px;line-height:1.3;min-height:76px;padding:15px 12px}
 .slider-tabs small{font-size:14px}
 .tab-label-full{display:none}.tab-label-short{display:inline}
}
@media(max-width:370px){.slide-copy h1,.slide-copy h2{font-size:39px;letter-spacing:-1.5px}.slide-copy>.eyebrow{font-size:14px;letter-spacing:0}.slide-copy p{font-size:16px}.hero .button.primary{font-size:16px;gap:22px}.hero-slides{height:730px;min-height:730px}.assembly-scene{top:360px;bottom:70px}.slider-tabs button{padding:14px 9px;font-size:14px}.slider-tabs small{font-size:14px}.hero-controls{bottom:95px}}
@media(prefers-reduced-motion:reduce){.hero-slide{transition:none}.hero .scene-layer,.hero .copy-reveal,.hero .scene-shadow{animation:none!important;opacity:1;transform:none;filter:none}.assembly-scene{transform:none}.scene-halo,.environment-wash,.environment-grid,.is-active .drawing-main{animation:none}.drawing-main{stroke-dashoffset:0}.hero-light{display:none}}