/* Five independent slots, 320px apart: no stacked cards, no duplicated media. */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;min-height:0;height:calc(100svh - 90px);max-height:850px;padding:0 6vw;overflow:hidden}
.hero-copy{align-self:center;padding:25px 35px 25px 0;z-index:2}.hero h1{font-size:clamp(42px,5.2vw,78px)}.hero-aside{max-width:400px}.gallery-heading{font-size:11px;gap:10px}.hero .stage{display:block;position:relative;height:100%;min-height:560px;padding:0;margin:0;overflow:hidden;perspective:1200px;mask-image:linear-gradient(transparent,#000 8%,#000 90%,transparent)}
.hero .stage .project,.hero .stage .reference-window{position:absolute!important;left:12%!important;top:0!important;right:auto!important;bottom:auto!important;width:min(76%,350px)!important;height:262px;animation:downstream 40s linear infinite!important;animation-delay:calc(var(--slot) * -8s)!important;animation-play-state:running!important;transform-origin:center;opacity:1!important;will-change:transform;border-radius:12px;box-shadow:0 15px 28px #17468b25}
.hero .stage .project .screen{height:222px;aspect-ratio:auto}.hero .stage .project-foot{height:34px;align-items:center}.hero .stage .reference-screen{height:202px;aspect-ratio:auto}.hero .stage .reference-label{height:30px;padding:8px}.hero .stage .window-bar{height:24px}.hero .stage .stage-caption{display:none}.hero .stage .frame-fallback{display:none}.hero .stage .screen-label h2{font-size:27px}.hero .stage .reference-screen iframe{height:900px}
@keyframes downstream{0%{transform:translate3d(0,-320px,0) rotateZ(-3deg) rotateY(-5deg)}50%{transform:translate3d(35px,480px,0) rotateZ(3deg) rotateY(5deg)}100%{transform:translate3d(0,1280px,0) rotateZ(-3deg) rotateY(-5deg)}}
/* Hover does not stop the whole carousel. Explicit pause and keyboard focus do. */
body.paused .hero .stage .project,body.paused .hero .stage .reference-window,.hero .stage:focus-within .project,.hero .stage:focus-within .reference-window{animation-play-state:paused!important}
@media(max-width:760px){.hero{height:auto;max-height:none;display:block;padding:20px 6vw 0}.hero-copy{padding:15px 0}.hero h1{font-size:clamp(44px,8vw,64px)}.hero .stage{height:570px;min-height:570px;margin-top:15px}.hero .stage .project,.hero .stage .reference-window{left:10%!important;width:78%!important}.gallery-heading{display:flex;align-items:center}.pause{margin:0}.hero-cta{margin-top:12px}}
@media(prefers-reduced-motion:reduce){.hero{height:auto;max-height:none}.hero .stage{height:560px;overflow:auto;mask-image:none;padding:25px 10px}.hero .stage .project,.hero .stage .reference-window{position:relative!important;left:0!important;margin:0 auto 25px!important;animation:none!important;transform:none!important}.hero-copy{align-self:start}}