.hero-stage{position:relative;display:flex;align-items:flex-end;width:100%;max-width:1360px;min-height:610px;margin:auto auto 0;isolation:isolate}
.hero-copy{pointer-events:none}.hero-copy>div{max-width:58%}
character-viewer{display:block;position:absolute;right:0;top:0;bottom:0;width:46%;z-index:4;font-family:Poppins,sans-serif}
.character-glow{position:absolute;inset:10% -8%;background:radial-gradient(ellipse,rgba(255,122,26,.13),transparent 64%);pointer-events:none}
.character-orbit{position:absolute;inset:15% 8%;border:1px solid rgba(255,122,26,.16);border-radius:50%;transform:rotate(-24deg);pointer-events:none}
.character-orbit::after{content:'';position:absolute;left:14%;top:10%;width:6px;height:6px;background:#FF7A1A;border-radius:50%;box-shadow:0 0 18px #FF7A1A}
.character-surface{position:absolute;inset:0;cursor:grab;touch-action:pan-y;outline:none;border-radius:32px}
.character-surface:active{cursor:grabbing}.character-surface:focus-visible{outline:2px solid #FF7A1A;outline-offset:-6px}
.character-surface canvas,.character-poster{display:block;width:100%;height:100%;object-fit:contain;position:absolute;inset:0}
.character-poster{transition:opacity .4s}:host(.character-ready) .character-poster{opacity:0;pointer-events:none}
.character-status{position:absolute;bottom:58px;left:12px;right:12px;text-align:center;color:#a3aec0;font:11px Poppins,sans-serif;pointer-events:none}
.character-toolbar{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:12px}
.character-caption{color:#7E8CA3;font:10px 'JetBrains Mono',monospace;letter-spacing:.13em;text-transform:uppercase}
.character-toolbar button{min-width:44px;height:44px;border:1px solid #283348;border-radius:50%;color:#D6DCE6;background:#0C1322;font:17px sans-serif;cursor:pointer;transition:border-color .2s,color .2s}
.character-toolbar button:hover,.character-toolbar button:focus-visible{color:#FF7A1A;border-color:#FF7A1A}
.character-toolbar button:disabled{opacity:.35;cursor:default}
@media(max-width:900px){
#top{min-height:0!important}.hero-stage{display:flex;flex-direction:column;align-items:stretch;min-height:0;margin-top:28px}.hero-copy{order:0}.hero-copy>div{max-width:100%}.hero-copy h1{font-size:clamp(76px,17vw,145px)!important}.hero-copy>div>div{font-size:clamp(19px,3.8vw,30px)!important}
character-viewer{position:relative;order:1;width:100%;height:470px;margin:8px auto 0;max-width:520px}.hero-copy{padding-top:0!important}
}
@media(max-width:480px){character-viewer{height:410px}.hero-copy{padding-left:20px!important;padding-right:20px!important}.character-caption{font-size:9px}}
:host{font-family:Poppins,sans-serif}
@media(prefers-reduced-motion:reduce){.character-poster{transition:none}}

.character-surface canvas,/* loading image: same framing and fades as the 3D, so the swap is invisible (no hard edge beside the headline) */
.character-poster{-webkit-mask-image:linear-gradient(to right,transparent 2%,#000 40%),linear-gradient(to bottom,#000 85%,transparent 99%);mask-image:linear-gradient(to right,transparent 2%,#000 40%),linear-gradient(to bottom,#000 85%,transparent 99%);-webkit-mask-composite:source-in;mask-composite:intersect}
.character-toolbar{display:none}
.character-status{bottom:12px}

/* Wide screens: the character continues behind the headline and fades out under the text */
@media(min-width:901px){
character-viewer{left:0;width:100%}
.character-glow{inset:calc(var(--pt,0px) + 4%) -4% calc(100% - var(--sb,100%) + 4%) 50%}
.character-orbit{inset:calc(var(--pt,0px) + 8%) 4% calc(100% - var(--sb,100%) + 8%) 58%}
.character-poster{left:0;width:100%;top:var(--pt,0);height:var(--ph,100%);object-fit:cover;object-position:68% 50%}
.character-surface canvas,.character-poster{-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,var(--zm,0)) 2%,#000 40%),linear-gradient(to bottom,#000 calc(var(--sb,100%) - 14%),rgba(0,0,0,var(--zm,0)) calc(var(--sb,100%) - 1%));mask-image:linear-gradient(to right,rgba(0,0,0,var(--zm,0)) 2%,#000 40%),linear-gradient(to bottom,#000 calc(var(--sb,100%) - 14%),rgba(0,0,0,var(--zm,0)) calc(var(--sb,100%) - 1%));-webkit-mask-composite:source-in;mask-composite:intersect}
/* loading image: same framing and fades as the 3D, so the swap is invisible (no hard edge beside the headline) */
.character-poster{-webkit-mask-image:linear-gradient(to right,transparent 2%,#000 40%),linear-gradient(to bottom,#000 85%,transparent 99%);mask-image:linear-gradient(to right,transparent 2%,#000 40%),linear-gradient(to bottom,#000 85%,transparent 99%);-webkit-mask-composite:source-in;mask-composite:intersect}
}

/* ===== Scroll dive into the visor (hero pinned while the camera zooms in) ===== */
.zoom-track{position:relative}
.zoom-hero{min-height:900px}
.zoom-black{position:absolute;inset:0;background:#05080F;opacity:calc((var(--zp,0) - .42) * 4.2);pointer-events:none;z-index:30}
@media (prefers-reduced-motion:no-preference){
.zoom-hero{position:sticky!important;top:0;height:100vh;height:100svh;min-height:560px!important}
.zoom-hero .hero-stage{min-height:0;flex:1 1 auto;margin:0 auto;position:static}
.zoom-hero character-viewer{top:0;bottom:0}
.zoom-hero header,.zoom-hero>.fu,.zoom-hero .spot{filter:opacity(max(0, calc(1 - var(--zp,0) * 3.2)))}
.zoom-hero .hero-copy{filter:opacity(max(0, calc(1 - var(--zp,0) * 2.6)));transform:translateY(calc(var(--zp,0) * -80px)) scale(calc(1 + var(--zp,0) * .15));transform-origin:left center}
}
.character-glow,.character-orbit{opacity:calc(1 - var(--zm,0))}

/* Services live inside the pinned hero: once the visor has gone black, the solar system fades in
   full-screen in place (no empty black screen), then the whole panel scrolls away normally. */
@media (prefers-reduced-motion:no-preference){
.zoom-hero{z-index:1}
.zoom-track{height:300vh}
.after-dive{position:absolute!important;inset:0;max-width:none!important;margin:0!important;padding:0!important;z-index:31;
  opacity:calc((var(--zp,0) - .7) * 9);pointer-events:none}
.zoom-track[data-revealed] .after-dive{pointer-events:auto}
.after-dive>div:first-child{position:absolute;z-index:2;top:max(56px,7vh);left:max(24px,calc((100% - 1360px) / 2 + 24px));right:max(24px,calc((100% - 1360px) / 2 + 24px));margin:0!important;pointer-events:none}
.after-dive .rv{animation:none!important}
.after-dive solar-system{height:100vh;height:100svh}
}
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
.after-dive>div:first-child{top:max(28px,4vh)}
.after-dive>div:first-child h2{font-size:clamp(44px,13vw,72px)!important}
.after-dive>div:first-child p{display:none}
.after-dive solar-system{height:100svh;--sol-top:calc(max(28px,4vh) + 74px);box-sizing:border-box;padding-left:20px;padding-right:20px}
}


/* no orbit ring, dot or glow behind the astronaut */
.character-glow,.character-orbit{display:none!important}
.character-status:not(:empty){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Phones: full-bleed hero. The astronaut fills the screen (helmet + name), the headline sits at the bottom over a dark fade */
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
.zoom-hero character-viewer{position:absolute;inset:0;width:100%;height:auto;max-width:none;margin:0;z-index:0}
.zoom-hero header{padding:18px 20px!important}
.zoom-hero header .btn{min-height:40px!important;padding:0 16px!important;font-size:12px!important}
.zoom-hero .hero-stage{display:flex;flex-direction:column;justify-content:flex-end;flex:1 1 auto;margin:0!important;isolation:auto}
.zoom-hero .hero-copy{position:relative;z-index:5;margin:0!important;padding:0 20px!important}
.zoom-hero .hero-copy>div>div{font-size:clamp(16px,4.4vw,22px)!important}
.zoom-hero .hero-copy h1{font-size:clamp(64px,18.5vw,120px)!important;margin-top:6px!important}
.zoom-hero>.fu{margin-top:0!important;border-top:0!important;padding:14px 20px max(22px,env(safe-area-inset-bottom))!important;gap:14px!important;flex-wrap:nowrap!important;align-items:flex-end!important}
.zoom-hero>.fu p{font-size:14px!important;line-height:1.5!important;max-width:none!important}
.zoom-hero>.fu a span:first-child{display:none}
.zoom-hero>.fu a span:last-child{height:44px!important}
.zoom-hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:58%;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(5,8,15,0),rgba(5,8,15,.82) 45%,#05080F 78%);opacity:calc(1 - var(--zm,0) * 1.4)}
.character-poster{left:0;width:100%;top:var(--pt,0);height:var(--ph,100%);object-fit:cover;object-position:50% 25%}
.character-surface canvas,.character-poster{-webkit-mask-image:none;mask-image:none}
}