:root{color-scheme:dark;--bg:#050408;--ink:#f4f1f7;--muted:#a7a1b2;--purple:#be8bff;--pad:clamp(24px,6vw,100px)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:0}
/* Soft caption shadows reach past the edge; without clipping a phone zooms the whole page out to fit them. */
html,body{overflow-x:clip}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}button,input,textarea{font:inherit}a{color:inherit;text-decoration:none}button{color:inherit;background:none;border:0;cursor:pointer;padding:0}button,a{-webkit-tap-highlight-color:transparent}button:hover,a:hover{color:var(--purple)}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--purple);outline-offset:7px}::selection{background:#713fa5;color:#fff}
#space,#fallback,#shade{position:fixed;inset:0;pointer-events:none}#space{z-index:0}#space canvas{display:block;width:100%;height:100%;pointer-events:auto;touch-action:pan-y}#shade{z-index:1;background:linear-gradient(90deg,rgba(5,4,8,.62),transparent 60%)}#fallback{z-index:0;display:none;background:radial-gradient(ellipse at 70% 50%,#170d25,transparent 65%)}.fallback #fallback{display:block}.fallback #space{display:none}.eclipse-still{position:absolute;right:8%;top:17%;width:min(65vh,58vw);aspect-ratio:1;border-radius:50%;background:#050408;box-shadow:1px -1px 0 #e2ceff,4px -3px 22px #7738b866}#fallback img{position:absolute;width:65%;height:90%;object-fit:contain;right:0;top:5%;opacity:var(--fallback-hardware,0)}.fallback .eclipse-still{opacity:calc(1 - var(--fallback-hardware,0))}
.header{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;gap:40px;padding:28px var(--pad);background:linear-gradient(#050408c9,transparent)}.brand{margin-right:auto;display:flex;align-items:center}.brand img{width:160px;height:auto}.header nav{display:flex;gap:36px;align-items:center}.header nav a,.header nav button,#language{font-size:12px;letter-spacing:.05em}.header #language{color:var(--muted);border-left:1px solid #ffffff26;padding-left:28px}
main{position:relative;z-index:2;pointer-events:none}.scene{height:110svh;min-height:650px;position:relative;display:flex;align-items:center;padding:120px var(--pad) 80px}.copy{max-width:510px;pointer-events:auto}.hero .copy{padding-top:16vh}.copy h1,.copy h2,.contact h2{font-size:clamp(40px,4.6vw,76px);font-weight:400;letter-spacing:-.055em;line-height:1.05;margin:0 0 28px}.copy p{color:var(--muted);font-size:15px;line-height:1.7;max-width:360px;margin:0 0 28px}.text-link{display:inline-flex;align-items:center;gap:35px;min-height:42px;font-size:12px;letter-spacing:.02em;border-bottom:1px solid #ffffff5e;padding:6px 0 8px;transition:color .2s,border-color .2s}.text-link:hover{border-color:var(--purple)}.text-link>span:last-child{font-size:20px;font-weight:400}.copy .qualification{font-size:11px;line-height:1.65;max-width:335px;margin-top:25px;color:#8d8798}.scroll-cue{position:absolute;bottom:15vh;left:50%;height:38px;width:1px;background:#ffffff18}.scroll-cue i{display:block;height:16px;width:1px;background:#b8a6cb;animation:scroll-line 2.5s ease-in-out infinite}@keyframes scroll-line{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(20px);opacity:1}}
.asset .copy{align-self:center}.object-tools{position:absolute;bottom:15vh;right:var(--pad);display:flex;gap:28px;pointer-events:auto}.small-action{font-size:11px;line-height:2;border-bottom:1px solid #ffffff30;color:var(--muted)}.small-action[aria-pressed=true]{color:var(--purple);border-color:var(--purple)}.context-controls{position:absolute;right:var(--pad);bottom:12vh;width:340px;text-align:right;pointer-events:auto}.switch{display:flex;justify-content:flex-end;gap:25px}.switch button{font-size:12px;padding:9px 0;color:var(--muted);border-bottom:1px solid transparent}.switch button[aria-pressed=true]{color:var(--ink);border-color:var(--purple)}.context-controls p{font-size:11px;color:var(--muted);line-height:1.5;min-height:33px}.contact{min-height:85svh;padding:130px var(--pad) 80px;background:linear-gradient(transparent,#050408 20%);display:grid;grid-template-columns:1fr 1fr;gap:10vw;pointer-events:auto}.contact h2{font-size:clamp(48px,5vw,76px)}.email{display:inline-flex;gap:40px;margin:16px 0;font-size:clamp(22px,2.2vw,32px);letter-spacing:-.04em}.email span{color:var(--purple)}.contact p{font-size:14px;line-height:1.65;color:var(--muted)}.contact .text-link{margin-top:18px}.contact form{padding-top:12px;max-width:480px;width:100%}label{display:flex;flex-direction:column;font-size:11px;gap:10px;margin-bottom:24px;color:var(--muted)}input,textarea{border:0;border-bottom:1px solid #ffffff30;background:transparent;padding:8px 0 12px;color:var(--ink);border-radius:0;min-width:0;resize:vertical;width:100%;font-size:15px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}.contact .form-help{font-size:11px;line-height:1.6;max-width:350px}.contact #form-status{font-size:12px;color:var(--purple)}footer{position:relative;z-index:2;display:flex;align-items:center;gap:32px;justify-content:space-between;padding:30px var(--pad);background:var(--bg);font-size:10px;color:var(--muted);border-top:1px solid #ffffff10}
#hotspot{position:fixed;z-index:4;display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.03em;opacity:0;pointer-events:none;transform:translate(-50%,-50%);transition:opacity .25s;white-space:nowrap;text-shadow:0 2px 8px #000}.plus{display:grid;place-items:center;width:25px;height:25px;border:1px solid #cda8ed88;border-radius:50%;font-size:17px;background:#05040888}#hotspot.visible{opacity:1;pointer-events:auto}
dialog{position:fixed;inset:0 0 0 auto;width:min(640px,100%);height:100dvh;max-width:100%;max-height:100%;margin:0;padding:0;border:0;border-left:1px solid #ffffff18;background:#0c0910;color:var(--ink);overscroll-behavior:contain;box-shadow:-30px 0 100px #0008}dialog::backdrop{background:#030205aa;backdrop-filter:blur(8px)}.dialog-head{position:sticky;top:0;background:#0c0910f5;display:flex;align-items:center;justify-content:space-between;padding:28px 36px;z-index:2;border-bottom:1px solid #ffffff10}.dialog-head img{height:auto}.dialog-head button{display:flex;gap:22px;font-size:11px;align-items:center}.dialog-head button span:last-child{font-size:26px}dialog article{padding:42px 42px 70px}dialog h2{font-size:38px;font-weight:400;letter-spacing:-.045em;line-height:1.1;margin:0 0 30px}dialog h3{font-size:19px;font-weight:400;margin:35px 0 14px}dialog p,dialog li{font-size:14px;line-height:1.8;color:#bcb5c7}dialog ul{padding-left:18px}dialog a{color:#cba1fa}dialog .spec{font-size:28px;color:#e3ccff;letter-spacing:-.04em}dialog .note{font-size:11px;color:#92869f}dialog .founder{border-top:1px solid #ffffff20;margin-top:30px;padding-top:8px}dialog .role{font-size:11px;color:var(--purple)}.skip{position:fixed;left:20px;top:-100px;z-index:50;background:#fff;color:#111;padding:12px}.skip:focus{top:20px}.noscript{position:relative;z-index:30;background:#100b17;padding:20px}
@media(min-width:1600px){.copy{max-width:600px}.copy h1,.copy h2{font-size:82px}.copy p{font-size:16px;max-width:390px}}
@media(max-width:900px){.header{padding:22px 24px;gap:20px}.brand img{width:125px}.header nav{gap:20px}.header nav>a:first-child,.header nav>button{display:none}.header #language{padding-left:18px}.scene{min-height:760px;height:110svh;padding:105px 24px 60px;align-items:flex-end}.copy{max-width:100%;padding:0!important}.copy h1,.copy h2{font-size:43px;max-width:360px;margin-bottom:18px}.copy p{font-size:13px;max-width:310px;margin-bottom:16px}.hero .copy{padding-bottom:6vh!important}.hero{min-height:700px}.scroll-cue{display:none}#shade{background:linear-gradient(0deg,#050408a8,transparent 60%)}.asset,.investment{padding-bottom:155px}.object-tools{bottom:60px;left:24px;right:auto}.context-controls{bottom:25px;left:24px;right:auto;width:calc(100% - 48px);text-align:left}.switch{justify-content:flex-start}.context-controls p{margin-top:8px}.copy .qualification{font-size:10px;margin-top:17px;max-width:310px}.contact{grid-template-columns:1fr;padding:100px 24px 50px;gap:55px}.contact h2{font-size:52px}.contact form{max-width:100%}.form-row{gap:20px}footer{padding:25px 24px;flex-wrap:wrap;gap:18px;font-size:9px}footer span{width:100%}dialog article{padding:30px 25px 60px}.dialog-head{padding:22px 25px}dialog h2{font-size:32px}#hotspot{font-size:9px}.eclipse-still{width:70vw;right:15%;top:16%}#fallback img{width:100%;top:-16%;height:80%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
.asset .object-tools{position:static;margin-top:24px;display:flex;gap:25px}.asset .copy{align-self:auto}
html{scrollbar-gutter:stable}.dialog-head #panel-language{margin-left:auto;margin-right:28px;color:var(--muted)}

@font-face{font-family:'Space Grotesk';src:url('assets/fonts/SpaceGrotesk-variable.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:Manrope;src:url('assets/fonts/Manrope-variable.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
body{font-family:Manrope,Arial,sans-serif;--ink:#f1efe9;--muted:#aaa7b1;--champagne:#d9bf93}
.copy h1,.copy h2,.contact h2,dialog h2,dialog h3,.email{font-family:'Space Grotesk',sans-serif;letter-spacing:-.055em;font-weight:400}
.copy h2{font-size:clamp(46px,4.9vw,82px);line-height:1.04}
.copy p{font-size:14px;line-height:1.9;font-weight:400}
.header{padding-top:30px;background:linear-gradient(#05040888,transparent)}
.header nav a,.header nav button,#language{font-size:11px;letter-spacing:.09em}
.text-link{font-size:11px;letter-spacing:.04em;gap:44px;min-height:48px;border-bottom-color:#d9bf9360}
.text-link:hover{color:var(--champagne);border-color:var(--champagne)}
.hero{height:110svh;min-height:740px;justify-content:center;align-items:center;text-align:center;padding:120px 24px 100px}
.hero .copy{max-width:840px;padding-top:7vh;display:flex;align-items:center;flex-direction:column}
.hero-mark{width:min(55vw,640px);height:auto;filter:drop-shadow(0 3px 25px #0009);margin:0 0 35px}
.hero .copy h1{font-size:clamp(24px,2.4vw,36px);line-height:1.2;letter-spacing:-.04em;margin:0 0 18px;max-width:none;text-wrap:balance}
.hero .copy h1 br{display:none}
.hero .copy p{max-width:500px;font-size:12px;line-height:1.9;color:#aaa5b5;margin-bottom:25px;text-shadow:0 2px 15px #000}
.hero .text-link{font-size:10px}
.scroll-cue{bottom:7vh}
#shade{background:linear-gradient(0deg,#05040866,transparent 22%)}
body[data-scene=server] #space canvas{cursor:grab}body[data-scene=server] #space canvas:active{cursor:grabbing}
body[data-scene=eclipse] .header .brand{opacity:0;pointer-events:none}
.header .brand{transition:opacity .35s}
@media(min-width:901px){body:not([data-scene=eclipse]) #shade{background:linear-gradient(90deg,#05040888,transparent 57%)}}
@media(max-width:900px){
 .hero{min-height:740px;align-items:center;padding-bottom:90px}
 .hero .copy{padding-top:4vh!important;padding-bottom:0!important;max-width:100%}
 .hero-mark{width:min(78vw,590px);margin-bottom:34px}
 .hero .copy h1{font-size:clamp(22px,4vw,32px);max-width:580px;margin-bottom:17px}
 .hero .copy p{font-size:11px;max-width:380px}
 .copy h2{font-size:clamp(40px,6.1vw,56px);max-width:500px}
 .copy p{font-size:12px;line-height:1.8}
 .header .brand img{width:120px}
 .asset,.investment{padding-bottom:140px}
 .object-tools{gap:24px}
}
@media(max-width:480px){.hero{min-height:650px}.hero-mark{width:84vw;margin-bottom:28px}.hero .copy h1{font-size:25px;max-width:320px}.hero .copy h1 br{display:block}.hero .copy p{font-size:10px;max-width:290px}.hero .copy{padding-top:0!important}.copy h2{font-size:40px}}

.hero .copy p{font-size:13px}.hero .copy h1{letter-spacing:-.035em}
@media(max-width:480px){.hero .copy p{font-size:11px}}

body[data-scene=eclipse] .header .brand{visibility:hidden}
/* Hero: an illuminated upper hemisphere dissolves into an open, dark lower field. */
.hero-mark{filter:drop-shadow(var(--light-shadow-x,-8px) var(--light-shadow-y,12px) 9px #000d) drop-shadow(var(--light-long-x,-20px) var(--light-long-y,28px) 22px #0009) drop-shadow(0 -1px 8px #ead9ff12)}
.hero .copy h1,.hero .copy p,.hero .text-link{text-shadow:var(--light-shadow-x,-8px) var(--light-shadow-y,12px) 7px #000,var(--light-long-x,-20px) var(--light-long-y,28px) 18px #000b,0 -1px 10px #ead9ff18}
#fallback .eclipse-still{left:50%;right:auto;top:6%;width:min(90vh,96vw);transform:translateX(-50%);mask-image:linear-gradient(#000 0 26%,#0008 40%,transparent 53%)}
/* Focused hero: original wordmark, one line, one quiet navigation gesture. */
.hero .copy{width:100%;max-width:1180px;padding-top:0!important;padding-bottom:0!important}
.hero-mark{width:min(92vw,1180px);max-width:none;margin-bottom:32px}
.hero .copy h1{font-size:clamp(20px,1.8vw,29px);line-height:1.35;margin:0;color:#c5becd;letter-spacing:-.035em}
.hero .copy h1 br{display:none}
.hero-next{position:absolute;left:50%;top:80svh;transform:translateX(-50%);display:grid;place-items:center;width:64px;height:64px;pointer-events:none;color:#ddd3e8;opacity:0;visibility:hidden;transition:opacity .8s ease}
.hero-next svg{width:64px;height:64px;overflow:visible;filter:drop-shadow(var(--light-shadow-x,-8px) var(--light-shadow-y,12px) 9px #0009)}
.hero-next.is-ready{opacity:.9;visibility:visible;pointer-events:auto}
.next-arrow{stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.hero-next:hover,.hero-next:focus-visible{color:var(--champagne);opacity:1}
@media(max-width:900px){.hero-mark{width:min(92vw,800px);margin-bottom:28px}.hero .copy h1{font-size:clamp(19px,3.2vw,25px);max-width:none}.hero-next{top:79svh}}
@media(max-width:480px){.hero-mark{width:94vw;margin-bottom:23px}.hero .copy h1{font-size:19px;max-width:320px}.hero-next{top:77svh}}
@media(prefers-reduced-motion:reduce){.hero-next .next-arrow{animation:none}}
/* Original SVG preserves layout and accessibility; Blender geometry supplies the surface.
   With JavaScript the SVG waits for the 3D logo, so the lit wordmark never flashes before the scene. */
.hero-mark{transition:opacity .8s ease}
.js .hero:not(.logo-svg) .hero-mark,.hero.has-3d-logo .hero-mark{opacity:0;filter:none}
.fallback .hero .hero-mark{opacity:1!important}
/* Kept for assistive technology and search; the hero shows only the wordmark. */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* One sentence in one voice: on a single line where the width allows, balanced lines on narrow screens. */
.hero .copy h1{font-size:clamp(16px,1.3vw,20px);line-height:1.5;letter-spacing:-.015em;max-width:none;margin:0 auto;color:#d3cddb;font-weight:400;text-wrap:balance}
@media(max-width:600px){.hero .copy h1{max-width:340px;font-size:16px}}
/* The whole sentence dissolves in slowly, coming into focus as it appears. */
.js .hero .copy h1{opacity:0;filter:blur(1px);transition:opacity 2.6s cubic-bezier(.33,0,.2,1),filter 2.6s cubic-bezier(.33,0,.2,1)}
.js .hero.hero-revealed .copy h1,.fallback .hero .copy h1{opacity:1;filter:none}
@media(prefers-reduced-motion:reduce){.js .hero .copy h1{opacity:1;filter:none;transition:none}}
/* Wordmark and sentence move only as one block; eclipse.js eases the settle during the intro. */
.hero .copy{transform:translate3d(0,var(--hero-settle,0px),0)}
/* While the 3D scene runs, space.js pins the block at its laid-out place and scrolls it in step with the canvas. */
.hero-synced .hero .copy{position:fixed;top:var(--copy-top);left:var(--copy-left);width:var(--copy-width);transform:translate3d(0,calc(var(--hero-settle,0px) - var(--hero-scroll,0px)),0)}
.hero-synced .hero-next{position:fixed;transform:translate3d(-50%,calc(-1 * var(--hero-scroll,0px)),0)}
/* Three fine, flat chevrons draw in, then breathe downward: a slow wave of shade, with a hair of travel,
   runs from the first to the last under a faint violet glow. */
.hero-next svg{filter:drop-shadow(var(--light-shadow-x,-8px) var(--light-shadow-y,12px) 8px #0005) drop-shadow(0 0 5px rgba(190,150,255,.4))}
.next-arrow{stroke-width:.9;stroke-dasharray:32;stroke-dashoffset:32;opacity:.16}
.hero-next.is-ready .next-arrow{animation:next-draw 1.4s cubic-bezier(.2,.7,.2,1) forwards,next-wave 3.6s 1.4s cubic-bezier(.45,0,.55,1) infinite}
.hero-next.is-ready .next-arrow:nth-child(2){animation-delay:.2s,1.7s}
.hero-next.is-ready .next-arrow:nth-child(3){animation-delay:.4s,2s}
@keyframes next-draw{from{opacity:.8}to{stroke-dashoffset:0;opacity:.16}}
@keyframes next-wave{0%,100%{opacity:.16;transform:translateY(0)}38%{opacity:1;transform:translateY(1.5px)}72%{opacity:.16;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.next-arrow{stroke-dashoffset:0}.next-arrow:nth-child(1){opacity:.8}.next-arrow:nth-child(2){opacity:.5}}
/* Scroll room for the flight from orbit into Prague; without 3D or with reduced motion it collapses. */
.flight{position:relative;height:100svh;pointer-events:none}
.rack-approach{position:relative;height:85svh;pointer-events:none}
.fallback .rack-approach{height:0}
@media(prefers-reduced-motion:reduce){.rack-approach{height:0}}
.fallback .flight{height:0}
@media(prefers-reduced-motion:reduce){.flight{height:60svh}}
.map-credit{position:fixed;left:var(--pad);bottom:22px;z-index:3;margin:0;font-size:9px;letter-spacing:.04em;color:#8d8798;opacity:0;transition:opacity .6s ease;pointer-events:none}
.map-credit.visible{opacity:.75}
/* Give the product shot clear space beside its caption on wide screens. */
@media(min-width:901px){.asset .copy{max-width:490px}.asset .copy h2{font-size:clamp(40px,4vw,64px)}}
.rotation-tools{margin-top:20px;font-size:10px;color:var(--muted);pointer-events:auto}.rotation-tools>div{display:flex;gap:24px;margin-top:6px}.rotation-tools .small-action{font-size:10px}.fallback .rotation-tools{display:none}
body[data-webgl="ready"]:not(.fallback) .asset .copy{opacity:var(--asset-copy-opacity,0);transform:translateY(var(--asset-copy-offset,0px))}
.datacenter .copy{max-width:490px}
.datacenter .copy h2{font-size:clamp(40px,4vw,64px)}
.datacenter .copy p{max-width:390px}
.datacenter .copy .overview-value{color:#d0cbd6}
.overview-actions{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.datacenter .qualification{max-width:360px;margin-top:23px}
body[data-webgl="ready"]:not(.fallback) .datacenter .copy{opacity:var(--overview-copy-opacity,0);transform:translateY(var(--overview-copy-offset,0px))}
@media(max-width:900px){.datacenter{align-items:center;min-height:850px;padding-bottom:80px}.datacenter .copy h2{font-size:43px}.datacenter .copy{max-width:340px}.datacenter .copy p{max-width:330px}.overview-actions{gap:12px}.datacenter .qualification{margin-top:18px}}

/* Two successive captions above the rack horizon. */
.datacenter{min-height:130svh}
.datacenter .copy{max-width:1000px;width:100%;text-align:center}
.datacenter .copy h2{font-size:clamp(32px,3.7vw,58px);line-height:1.12;margin-bottom:22px}
.datacenter .copy p{max-width:620px;margin-inline:auto;font-size:16px;line-height:1.65}
.overview-beat{margin-bottom:60px}
body[data-webgl="ready"]:not(.fallback) .datacenter .copy{position:fixed;left:50%;top:17svh;width:calc(100% - 2 * var(--pad));transform:translateX(-50%);pointer-events:none}
/* Only the detail links take input; inert keeps them out of reach while their caption is hidden. */
body[data-webgl="ready"]:not(.fallback) .overview-more{pointer-events:auto}
body[data-webgl="ready"]:not(.fallback) .overview-beat{position:absolute;inset:0 0 auto;margin:0;opacity:var(--first-beat,1);transform:translateY(calc((1 - var(--first-beat,1)) * -12px))}
body[data-webgl="ready"]:not(.fallback) .overview-beat:nth-child(2){opacity:var(--second-beat,0);transform:translateY(calc((1 - var(--second-beat,0)) * 12px))}
@media(max-width:900px){.datacenter .copy h2{font-size:clamp(27px,5vw,40px)}.datacenter .copy p{font-size:14px;max-width:500px}body[data-webgl="ready"]:not(.fallback) .datacenter .copy{top:15svh}}
@media(prefers-reduced-motion:reduce){.datacenter{min-height:0}body[data-webgl="ready"]:not(.fallback) .datacenter .copy{position:relative;left:auto;top:auto;transform:none}body[data-webgl="ready"]:not(.fallback) .overview-beat:nth-child(n){position:relative;opacity:1;transform:none;margin-bottom:50px}}

/* Offset captions sit over separate rack banks; soft local falloff follows each caption. */
body[data-scene="datacenter"] #shade{background:none}
.datacenter .copy{max-width:1320px;text-align:left}
.datacenter .copy h2{font-size:clamp(30px,3vw,47px);max-width:none}
.datacenter .copy p{max-width:470px;margin-inline:0;font-size:15px}
.overview-beat{isolation:isolate}
.overview-beat::before{content:"";position:absolute;z-index:-1;inset:-110px -120px -85px;pointer-events:none;background:radial-gradient(ellipse at 46% 43%,rgba(2,3,6,.92) 0%,rgba(2,3,6,.72) 30%,rgba(2,3,6,.3) 53%,transparent 74%)}
body[data-webgl="ready"]:not(.fallback) .datacenter .copy{top:16svh}
body[data-webgl="ready"]:not(.fallback) .overview-beat{inset:0 auto auto 0;width:44%;transform:translate3d(calc((1 - var(--first-beat,1)) * -18px),calc((1 - var(--first-beat,1)) * -8px),0)}
body[data-webgl="ready"]:not(.fallback) .overview-beat:nth-child(2){inset:5svh 0 auto auto;width:46%;transform:translate3d(calc((1 - var(--second-beat,0)) * 20px),calc((1 - var(--second-beat,0)) * 12px),0)}
@media(max-width:900px){
 .datacenter .copy h2{font-size:clamp(24px,4vw,34px);margin-bottom:12px}
 .datacenter .copy p{font-size:13px;max-width:410px;line-height:1.5}
 body[data-webgl="ready"]:not(.fallback) .datacenter .copy{top:19svh;max-width:none}
 body[data-webgl="ready"]:not(.fallback) .overview-beat{width:88%}
 body[data-webgl="ready"]:not(.fallback) .overview-beat:nth-child(2){top:29svh;width:88%;text-align:right}
 .overview-beat:nth-child(2) p{margin-left:auto}
 .overview-beat::before{inset:-55px -35px}
}
@media(prefers-reduced-motion:reduce){body[data-webgl="ready"]:not(.fallback) .overview-beat:nth-child(n){position:relative;inset:auto;width:100%;opacity:1;transform:none;text-align:left}.overview-beat::before{display:none}}

/* Captions follow projected world anchors as the camera advances. */
.datacenter .copy h2{font-size:clamp(34px,3.35vw,54px)}
.datacenter .copy p{font-size:16px}
body[data-webgl="ready"]:not(.fallback) .overview-beat{width:46%;transform-origin:50% 50%;transform:translate3d(var(--beat-0-x,0px),var(--beat-0-y,0px),0) scale(var(--beat-0-scale,1));will-change:auto}
body[data-webgl="ready"]:not(.fallback) .overview-beat:nth-child(2){width:47%;transform:translate3d(var(--beat-1-x,0px),calc(var(--beat-1-y,0px) + (1 - var(--second-beat,0)) * 12px),0) scale(var(--beat-1-scale,1))}
@media(max-width:900px){.datacenter .copy h2{font-size:clamp(25px,4.4vw,36px)}.datacenter .copy p{font-size:13px}body[data-webgl="ready"]:not(.fallback) .overview-beat:nth-child(n){width:88%}}
@media(prefers-reduced-motion:reduce){body[data-webgl="ready"]:not(.fallback) .overview-beat:nth-child(n){transform:none;will-change:auto;width:100%}}

@media(min-width:901px){body[data-webgl="ready"]:not(.fallback) .overview-beat:nth-child(2){width:49%}.datacenter .overview-beat:nth-child(2) h2{font-size:clamp(34px,3.1vw,50px)}}

/* Size headings against their own column so approved line breaks remain readable. */
.overview-beat{container-type:inline-size}
.datacenter .copy .overview-beat h2{font-size:min(50px,8cqw);text-wrap:balance;line-height:1.14}
.datacenter .copy .overview-beat:nth-child(2) h2{font-size:min(46px,7.1cqw)}
@media(min-width:901px){
 .datacenter .copy{max-width:1400px}
 body[data-webgl="ready"]:not(.fallback) .overview-beat:first-child{width:47%}
 .asset .copy h2{font-size:clamp(34px,3.1vw,50px);text-wrap:balance}
}
@media(max-width:900px){
 body[data-webgl="ready"]:not(.fallback) .overview-beat:nth-child(n){width:94%}
 .datacenter .copy .overview-beat:nth-child(n) h2{font-size:clamp(23px,6.9cqw,34px)}
}

/* Near left caption and distant right caption leave the central aisle unobstructed. */
@media(min-width:901px){
 body[data-webgl="ready"]:not(.fallback) .datacenter .copy{top:22svh;max-width:1440px}
 body[data-webgl="ready"]:not(.fallback) .overview-beat:first-child{inset:12svh auto auto 0;width:43%;transform-origin:left center}
 body[data-webgl="ready"]:not(.fallback) .overview-beat:nth-child(2){inset:0 0 auto auto;width:44%;transform-origin:right center}
 .datacenter .copy .overview-beat:first-child h2{font-size:min(50px,8.2cqw)}
 .datacenter .copy .overview-beat:nth-child(2) h2{font-size:min(44px,7.1cqw)}
 .overview-beat::before{inset:-80px -70px -70px}
}
@media(prefers-reduced-motion:reduce){body[data-webgl="ready"]:not(.fallback) .overview-beat:nth-child(n){inset:auto;transform:none;width:100%}}

@media(min-width:901px){body[data-webgl="ready"]:not(.fallback) .overview-beat:first-child{left:3vw}}

/* Pin server copy natively: no frame-delayed compensation for document scrolling. */
body[data-webgl="ready"]:not(.fallback) .asset .copy{position:fixed;left:var(--pad);top:54svh;width:min(490px,38vw);transform:translateY(-50%)}
@media(max-width:900px){body[data-webgl="ready"]:not(.fallback) .asset .copy{left:24px;top:auto;bottom:5svh;width:calc(100% - 48px);transform:none}}
@media(prefers-reduced-motion:reduce){body[data-webgl="ready"]:not(.fallback) .asset .copy{position:relative;left:auto;top:auto;bottom:auto;width:auto;transform:none}}

/* Quiet contact action and a natural document exit from the 3D sequence. */
.header nav .header-contact{padding:10px 18px;border:1px solid #ffffff36;border-radius:5px;background:#ffffff04;transition:background .2s,border-color .2s}
.header nav .header-contact:hover,.header nav .header-contact:focus-visible{background:#ffffff0c;border-color:#ffffff70;color:var(--ink)}
.server-exit{height:150svh;min-height:0;pointer-events:none;padding:0}
.server-exit>*{display:none!important}
.contact{background:#000;position:relative;z-index:3;min-height:0;padding-bottom:clamp(120px,16svh,180px)}
/* The black panel rises over the scene through a soft fade instead of a hard top edge. */
.contact::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:clamp(140px,26svh,280px);pointer-events:none;background:linear-gradient(to bottom,transparent,rgba(0,0,0,.18) 30%,rgba(0,0,0,.55) 62%,rgba(0,0,0,.88) 86%,#000)}
body{background:#000}
body[data-scene="contact"] #shade{background:none}
footer{background:#000}
@media(prefers-reduced-motion:reduce){.server-exit{height:0;min-height:0}}
.fallback .server-exit{height:0;min-height:0}
@media(max-width:900px){.header nav .header-contact{padding:8px 12px}}

/* Readability on small screens: no text below 10px; the caption keeps its contrast over the server. */
@media(max-width:900px){#hotspot{font-size:10px}footer{font-size:10px}}
@media(max-width:900px) and (orientation:portrait){body[data-scene=server] #shade{background:linear-gradient(0deg,#000c,#0009 34%,transparent 58%)}}

/* Short landscape screens (a phone on its side): the hero fits above the fold and the story keeps
   the side-by-side composition, with copy sized to the available height. */
@media(orientation:landscape) and (max-height:560px){
 .hero{min-height:0;padding:64px 24px 40px}
 .hero-mark{width:min(62vw,128svh);margin-bottom:18px}
 .hero-next{top:78svh}
}
@media(max-width:900px) and (orientation:landscape) and (max-height:560px){
 .header{padding:16px 24px}
 body:not([data-scene=eclipse]) #shade{background:linear-gradient(90deg,#05040888,transparent 57%)}
 body[data-webgl="ready"]:not(.fallback) .datacenter .copy{top:64px}
 body[data-webgl="ready"]:not(.fallback) .overview-beat:nth-child(n){width:46%}
 body[data-webgl="ready"]:not(.fallback) .overview-beat:first-child{inset:15svh auto auto 0}
 body[data-webgl="ready"]:not(.fallback) .overview-beat:nth-child(2){inset:0 0 auto auto;text-align:right}
 .datacenter .copy .overview-beat:nth-child(n) h2{font-size:clamp(20px,6.4cqw,30px);margin-bottom:8px}
 .datacenter .copy p{font-size:12px;line-height:1.5;margin-bottom:6px}
 .overview-beat .text-link{min-height:38px}
 body[data-webgl="ready"]:not(.fallback) .asset .copy{left:24px;top:calc(50svh + 22px);bottom:auto;width:min(44vw,400px);transform:translateY(-50%)}
 .asset .copy h2{font-size:clamp(22px,7svh,30px);margin-bottom:10px}
 .asset .copy p{font-size:12px;line-height:1.55;margin-bottom:6px}
 .asset .copy .text-link{min-height:38px}
 .asset .object-tools{margin-top:12px}
 .rotation-tools{margin-top:10px}.rotation-tools>span{display:none}
 .contact{padding-top:84px;gap:40px;grid-template-columns:1fr 1fr}
 .contact h2{font-size:40px}
}
/* Without 3D the copy scrolls in the normal flow beneath the header; give the header a backdrop. */
.fallback .header{background:linear-gradient(#000000f0 55%,#00000000)}
/* Three staggered statements share a reading interval before the server approach. */
.datacenter .copy .overview-fact{display:flex;flex-direction:column;gap:5px;margin:18px 0 12px;color:var(--muted);font-size:11px;line-height:1.4}
.overview-fact strong{font-family:'Space Grotesk',sans-serif;font-size:36px;font-weight:400;line-height:1.1;letter-spacing:-.04em;color:#d3b2fa}
.overview-fact strong.overview-fact-words{font-size:25px}
body[data-webgl="ready"]:not(.fallback) .overview-beat:nth-child(3){opacity:var(--third-beat,0);transform:translate3d(var(--beat-2-x,0px),calc(var(--beat-2-y,0px) + (1 - var(--third-beat,0)) * 12px),0) scale(var(--beat-2-scale,1))}
@media(min-width:901px){
 body[data-webgl="ready"]:not(.fallback) .overview-beat:nth-child(n){width:29%;transform-origin:center top}
 body[data-webgl="ready"]:not(.fallback) .overview-beat:first-child{inset:7svh auto auto 0}
 body[data-webgl="ready"]:not(.fallback) .overview-beat:nth-child(2){inset:0 auto auto 35.5%}
 body[data-webgl="ready"]:not(.fallback) .overview-beat:nth-child(3){inset:13svh 0 auto auto}
 .datacenter .copy .overview-beat:nth-child(n) h2{font-size:clamp(25px,8.2cqw,38px);margin-bottom:18px}
 .datacenter .copy .overview-beat p{font-size:14px;line-height:1.65}
 .datacenter .copy .overview-fact{font-size:11px}
 .overview-beat .text-link{gap:20px;letter-spacing:0}
}
@media(max-width:900px){
 body[data-webgl="ready"]:not(.fallback) .datacenter .copy{top:100px}
 body[data-webgl="ready"]:not(.fallback) .overview-beat:nth-child(n){position:relative;inset:auto;width:100%;text-align:left;margin:0 0 19px;transform:none}
 .datacenter .copy .overview-beat:nth-child(n) h2{font-size:clamp(21px,5.5vw,28px);margin-bottom:7px;max-width:none}
 .datacenter .copy .overview-beat h2 br{display:none}
 .datacenter .copy .overview-beat p{font-size:12px;line-height:1.5;max-width:560px;margin:0 0 6px}
 .datacenter .copy .overview-fact{flex-direction:row;align-items:baseline;gap:12px;font-size:10px;margin:8px 0 3px}
 .overview-fact strong{font-size:25px;white-space:nowrap}.overview-fact strong.overview-fact-words{font-size:19px}
 .overview-beat .text-link{min-height:36px;padding:4px 0;font-size:11px;gap:22px}
}
/* One motion for all three captions: the same entry (fade and 16px rise) and one shared drift and scale with the camera. */
body[data-webgl="ready"]:not(.fallback) .overview-beat:nth-child(1){--beat:var(--first-beat,0)}
body[data-webgl="ready"]:not(.fallback) .overview-beat:nth-child(2){--beat:var(--second-beat,0)}
body[data-webgl="ready"]:not(.fallback) .overview-beat:nth-child(3){--beat:var(--third-beat,0)}
body[data-webgl="ready"]:not(.fallback) .overview-beat:nth-child(n){opacity:var(--beat);transform:translate3d(var(--group-x,0px),calc(var(--group-y,0px) + (1 - var(--beat)) * 16px),0) scale(var(--group-scale,1))}
/* Phones: left at the top, right in the middle, left at the bottom; all three stay on screen.
   Only where the captions animate: short windows and reduced motion keep the plain left-aligned flow. */
@media(max-width:900px) and (min-height:741px) and (prefers-reduced-motion:no-preference){
 body[data-webgl="ready"]:not(.fallback) .datacenter .copy{top:96px;bottom:4svh}
 body[data-webgl="ready"]:not(.fallback) .overview-beat:nth-child(n){position:absolute;width:86%;margin:0}
 body[data-webgl="ready"]:not(.fallback) .overview-beat:nth-child(1){inset:0 auto auto 0;text-align:left;transform-origin:left top}
 body[data-webgl="ready"]:not(.fallback) .overview-beat:nth-child(2){inset:34% 0 auto auto;text-align:right;transform-origin:right center}
 body[data-webgl="ready"]:not(.fallback) .overview-beat:nth-child(2) p{margin-left:auto}
 body[data-webgl="ready"]:not(.fallback) .overview-beat:nth-child(2) .overview-fact{justify-content:flex-end}
 body[data-webgl="ready"]:not(.fallback) .overview-beat:nth-child(3){inset:auto auto 0 0;text-align:left;transform-origin:left bottom}
}
/* Short windows retain readable content in normal flow instead of squeezing three paragraphs. */
@media(max-height:740px) and (max-width:900px), (max-height:600px){
 body[data-scene="datacenter"] .header{background:linear-gradient(#000000f0 55%,#00000000)}
 .datacenter{height:auto;min-height:130svh;align-items:flex-start}
 body[data-webgl="ready"]:not(.fallback) .datacenter .copy{position:relative;left:auto;top:auto;width:100%;transform:none;opacity:1}
 body[data-webgl="ready"]:not(.fallback) .overview-beat:nth-child(n){position:relative;inset:auto;width:100%;opacity:1;transform:none;text-align:left;margin:0 0 40px}
}
@media(prefers-reduced-motion:reduce){
 .datacenter{height:auto;min-height:0;align-items:flex-start}
 body[data-webgl="ready"]:not(.fallback) .datacenter .copy{position:relative;left:auto;top:auto;width:100%;transform:none;opacity:1}
 body[data-webgl="ready"]:not(.fallback) .overview-beat:nth-child(n){position:relative;inset:auto;width:100%;opacity:1;transform:none;text-align:left;margin:0 0 50px}
}
.fallback .datacenter{height:auto;min-height:0}.fallback .overview-beat{position:relative}.fallback .overview-beat::before{display:none}

/* Embedded preview (?preview=1): the hero only, locked in place; the host page composites the canvas, logo and header. */
html.preview,html.preview body{overflow:hidden;height:100%}
.preview footer,.preview .hero-next,.preview #hero-next,.preview .skip{display:none!important}
/* Tagline under the wordmark: it sits in the lower margin of the logo frame, just under the letters (the cap baseline is at 75 % of the frame),
   and arrives with the sentence once the sun is up. Real text, so it also shades the rays in hero-light.js. */
.hero-brand{position:relative;display:inline-block}
.hero-brand .hero-mark{display:block;margin-bottom:0}
.hero .copy .hero-tagline{position:absolute;left:0;right:0;top:84%;margin:0;max-width:none;text-align:center;font-family:'Space Grotesk',Arial,sans-serif;font-weight:500;font-size:clamp(12px,1.55vw,23px);line-height:1.15;letter-spacing:.52em;padding-left:.52em;color:#b9bcc6;background:linear-gradient(180deg,#f4f5f8 0%,#c9ccd4 38%,#7d818c 52%,#a9adb7 70%,#e2e4ea 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.js .hero .copy .hero-tagline{opacity:0;filter:blur(1px);transition:opacity 2.6s cubic-bezier(.33,0,.2,1),filter 2.6s cubic-bezier(.33,0,.2,1)}
.js .hero.hero-revealed .copy .hero-tagline,.fallback .hero .copy .hero-tagline{opacity:1;filter:none}
@media(max-width:600px){.hero .copy .hero-tagline{font-size:11px;letter-spacing:.36em;padding-left:.36em}}
/* Server section: content links first, then a separate, labelled control panel for the 3D model,
   set off by space and a hairline and styled as outlined controls rather than links. */
.asset-links{display:flex;flex-wrap:wrap;gap:12px 36px}
.model-controls{margin-top:44px;padding-top:16px;border-top:1px solid #ffffff1f;pointer-events:auto}
.asset .copy .controls-head{margin:0 0 12px;line-height:1.4;max-width:none;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.asset .copy .controls-hint{margin:10px 0 0;font-size:10px;line-height:1.4;letter-spacing:.02em;color:#8d8798}
.controls-row{display:flex;flex-wrap:wrap;gap:8px}
.control{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;font-size:11px;letter-spacing:.03em;color:var(--ink);border:1px solid #ffffff2e;border-radius:5px;background:#ffffff05;transition:background .2s,border-color .2s,color .2s}
.control>span[aria-hidden]{font-size:13px;line-height:1;color:var(--muted)}
.control:hover,.control:focus-visible{background:#ffffff0d;border-color:#ffffff66;color:var(--ink)}
.control[aria-pressed=true]{border-color:var(--purple);color:var(--purple);background:#be8bff12}
.fallback .model-controls{display:none}
@media(max-width:900px){.model-controls{margin-top:26px;padding-top:12px}.asset .copy .controls-hint{display:none}}
@media(orientation:landscape) and (max-height:560px){.model-controls{margin-top:12px;padding-top:8px}.asset .copy .controls-head{margin-bottom:6px}.asset .copy .controls-hint{display:none}}
@media(max-width:600px){.control[data-rotate]{padding:8px 13px}.control[data-rotate]>span[aria-hidden]{font-size:15px;color:var(--ink)}.control[data-rotate]>[data-t]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
/* The preview opens on the finished hero, without fades. */
.preview .hero .hero-mark,.preview .hero .copy h1,.preview .hero .copy .hero-tagline{transition:none!important}
/* Framed page (?frame=1): the whole site inside a device on the homepage, which scrolls it; no scrollbar or skip link. */
html.frame{scrollbar-width:none;scroll-behavior:auto!important}html.frame::-webkit-scrollbar{display:none}
.frame .skip{display:none!important}
.frame .hero .hero-mark,.frame .hero .copy h1,.frame .hero .copy .hero-tagline{transition:none!important}
/* Under the navigation the scene darkens on a long eased curve, so the sun's light fades out towards the top. */
body[data-scene=eclipse] .header{background:linear-gradient(#050408b0,#05040870 55%,#05040838)}
body[data-scene=eclipse] .header::after{content:'';position:absolute;left:0;right:0;top:100%;height:70px;background:linear-gradient(#05040838,#05040814 50%,#05040800);pointer-events:none}
/* Framed inside a device on the Digicare homepage (?frame=1): the hero alone, nothing below it is laid out. */
html.framed :is(#flight,#datacenter,.rack-approach,#infrastructure,#investment,#contact,body>footer){display:none}
/* Paused by the Digicare homepage (off screen): the hero's arrows stop too. They are SVG, so their animation would
   restyle and lay out this page on every frame. Only they are named: a rule for every element would restyle the whole
   page each time the homepage pauses or resumes it. */
html.preview-paused .next-arrow{animation-play-state:paused!important}