@font-face{font-family:Space Grotesk;src:url('assets/fonts/space-grotesk-latin-variable.woff2') format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:Inter;src:url('assets/fonts/inter-latin-variable.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:IBM Plex Mono;src:url('assets/fonts/ibm-plex-mono-latin-400.woff2') format('woff2');font-weight:400;font-display:swap}
:root{color-scheme:dark;--bg:#080909;--text:#f3f3ef;--muted:#929795}
*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:auto}body{margin:0;color:var(--text);font-family:Inter,Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:7px}img{display:block;max-width:100%}
.header{height:94px;position:fixed;z-index:20;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 4.5vw;background:linear-gradient(#080909,transparent)}.header img{width:77px;height:auto}.header-category{font-size:12px;letter-spacing:.06em;color:#a5aaa7}.header-category span{margin:0 14px;color:#505653}.header-link{font-size:13px}.header-link span{margin-left:25px;color:var(--accent)}
.story{height:760vh;height:760svh}.stage{position:sticky;top:0;height:100vh;height:100svh;min-height:620px;overflow:hidden;isolation:isolate}.ambient{position:absolute;inset:0;background:linear-gradient(transparent, transparent);z-index:-1}.ambient:after{content:'';position:absolute;inset:0;background-image:url('assets/branding/clr-logo-cropped.png');background-size:62%;background-position:120% 50%;background-repeat:no-repeat;opacity:.012}
.copy{position:absolute;left:7%;top:29%;width:38%;z-index:8;pointer-events:none}.eyebrow{font:11px 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0 0 32px}.chapters{position:relative}.chapter{position:absolute;inset:0 auto auto 0;width:100%;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .25s,transform .25s,visibility .25s}.chapter.is-active{opacity:1;visibility:visible;transform:none}.chapter h1,.chapter h2{font-family:'Space Grotesk',Arial,sans-serif;font-size:clamp(44px,4.6vw,82px);line-height:1.025;letter-spacing:-.057em;font-weight:500;margin:0 0 30px}.chapter p{font-size:clamp(14px,1.1vw,17px);line-height:1.8;color:#a3aaa6;margin:0}.cta{pointer-events:auto;display:inline-flex;gap:35px;align-items:center;border-bottom:1px solid var(--accent-muted);padding:15px 0 12px;margin-top:20px;font-size:13px;color:var(--accent)}
.visual{position:absolute;left:43%;top:12%;width:55%;height:76%;container-type:size;perspective:1000px}.bag{position:absolute;width:48%;height:78%;left:26%;top:14%;transform-origin:center 70%;will-change:transform,opacity}.bag img{width:100%;height:100%;object-fit:contain}.bag-back{z-index:2}.bag-front{z-index:6;clip-path:inset(45% 0 0 0)}.bag-closed{z-index:7;opacity:0}.ground-shadow{position:absolute;width:65%;height:8%;left:18%;top:90%;border-radius:50%;background:#000;filter:blur(22px);opacity:.6}
.component{position:absolute;top:40%;left:35%;width:30%;z-index:4;will-change:transform,opacity;filter:drop-shadow(0 15px 14px #0008)}.component img{width:100%;height:120px;object-fit:contain}.component span{display:block;text-align:center;font:10px 'IBM Plex Mono',monospace;letter-spacing:.03em;color:#b4bbb6;margin-top:12px;white-space:nowrap}.component-power{width:23%;left:38.5%}.component-cables{width:25%;left:37.5%}.assembly{position:absolute;left:10%;top:20%;width:80%;height:64%;z-index:5;opacity:0;will-change:transform,opacity;transform-style:preserve-3d}.rack-motion{position:absolute;inset:0;will-change:transform,opacity;display:flex;align-items:center;justify-content:center}.rack{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 22px 16px #0006)}.sleeve-motion{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;will-change:transform,opacity}.sleeve{width:58%;height:125%;object-fit:fill;transform:rotate(90deg);filter:drop-shadow(0 12px 10px #0005)}.product-caption{position:absolute;bottom:0;left:10%;right:10%;display:flex;justify-content:space-between;font:10px 'IBM Plex Mono',monospace;color:#87918b;letter-spacing:.06em;opacity:0}.product-caption span:first-child{color:var(--accent)}
.story-footer{position:absolute;bottom:40px;left:4.5%;right:4.5%;display:flex;align-items:center;justify-content:space-between;z-index:10}.scroll-hint{font-size:11px;color:#a6ada8}.scroll-hint span{display:inline-block;color:var(--accent);margin-left:14px}.steps{display:flex;gap:32px}.steps button{padding:13px 0;border:0;border-bottom:1px solid transparent;color:#747d76;background:none;font-size:12px;cursor:pointer;transition:color .2s,border-color .2s}.steps button span{font:10px 'IBM Plex Mono',monospace;margin-right:9px}.steps button[aria-current]{color:#f0f1eb;border-color:var(--accent)}.steps button[aria-current] span{color:var(--accent)}.progress-text{font:10px 'IBM Plex Mono',monospace;color:#747d76}.progress-track{height:2px;background:#202622;position:absolute;bottom:0;left:0;right:0}.progress-track div{height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:var(--accent)}.no-script{position:fixed;bottom:0;padding:20px;background:#111;z-index:30;width:100%}.no-script a{text-decoration:underline}
.sleeve{width:72%;height:160%}
.sleeve-motion{perspective:1000px;transform-style:preserve-3d}
.sleeve-turn,.sleeve-face{position:absolute;inset:0;transform-style:preserve-3d}
.sleeve-face{display:flex;align-items:center;justify-content:center;backface-visibility:hidden}
.sleeve-face-end .sleeve{width:54%}
@media(min-width:1800px){.copy{left:10%;width:34%}.visual{left:42%;width:50%}}
@media(max-width:760px){.header{height:74px;padding:0 6%}.header img{width:60px}.header-category{display:none}.header-link{font-size:11px}.header-link span{margin-left:12px}.stage{min-height:550px}.copy{left:7%;top:13%;width:86%}.eyebrow{font-size:9px;margin-bottom:15px}.chapter h1,.chapter h2{font-size:clamp(35px,9vw,52px);margin-bottom:12px;line-height:1.02}.chapter p{font-size:12px;line-height:1.6}.visual{left:0;top:37%;height:51%;width:100%}.bag{width:42%;left:29%;height:83%;top:9%}.component img{height:75px}.component span{font-size:8px;margin-top:7px}.story-footer{bottom:20px;left:7%;right:7%}.scroll-hint,.progress-text{display:none}.steps{width:100%;justify-content:space-between;gap:10px}.steps button{font-size:11px}.steps button span{font-size:9px;margin-right:5px}.cta{position:absolute;left:53%;top:65px;font-size:11px;gap:10px;margin:0;padding:10px 0}.product-caption{font-size:8px;bottom:2%;left:9%;right:9%}}
@media(max-width:760px){.cta{position:static;margin-top:10px;padding:5px 0;gap:18px}}
@media(prefers-reduced-motion:reduce){.story{height:100svh}.chapter{transition:none}.component,.bag,.sleeve-motion{display:none}.assembly{opacity:1}.scroll-hint,.steps{display:none}}

/* One coordinate system for the bitmap and its occlusion layer: no contain-box offset. */
.bag{transform-origin:50% 48%;will-change:transform;perspective:800px}
.bag img{width:100%;height:100%;object-fit:fill}
.bag-back{z-index:2}.bag-front{z-index:8;clip-path:polygon(0 39%,12% 39%,18% 40%,82% 40%,90% 39%,100% 39%,100% 100%,0 100%)}
.bag-flap{z-index:9;visibility:hidden;clip-path:polygon(10% 11%,90% 11%,90% 48%,10% 48%);backface-visibility:visible}
.bag-closed{z-index:10;opacity:1;visibility:hidden}
.component{z-index:5;left:auto;top:auto;will-change:transform;filter:drop-shadow(0 8px 9px #0005)}
.component img{width:100%;height:auto;object-fit:contain}
.component span{position:absolute;top:100%;left:50%;transform:translateX(-50%);font-size:10px;margin-top:10px;white-space:nowrap}
.assembly{z-index:7;transform-style:flat;will-change:transform}
.assembly-pose,.rack-motion,.sleeve-motion{position:absolute;inset:0;width:100%;height:100%;opacity:1;transform-style:flat;perspective:none}
.rack,.sleeve{width:100%;height:100%;object-fit:contain;transform:none;filter:none}
.sleeve-motion{display:block}.rack-motion{display:block;transform-origin:center}
.assembly-pose{object-fit:contain}
.sleeve-motion .sleeve{position:absolute;inset:0}
.bag-mid{z-index:9}
.sleeve-left{clip-path:inset(0 50% 0 0);transform-origin:50% 86%}
.sleeve-right{clip-path:inset(0 0 0 50%);transform-origin:50% 86%}
.sleeve-fabric{position:absolute;inset:0;transform-origin:center}
.rack-variants a[aria-current]{color:var(--accent)}
@media(max-width:760px){.header-category.rack-variants{display:flex;font-size:9px;letter-spacing:0;gap:6px}.rack-variants span{margin:0}.header-link{font-size:10px}.header-link span{margin-left:4px}.header{gap:12px}}
@media(max-width:760px){.visual{top:35%;height:53%}.component span{font-size:8px}.eyebrow{letter-spacing:.04em}}