/* ==========================================================================
   SkyMul — Built on Trust
   Cinematic scroll story. Palette: concrete, charcoal, off-white, amber.
   ========================================================================== */

@font-face{font-family:"Geist";src:url("../assets/fonts/geist.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../assets/fonts/geist-mono.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../assets/fonts/instrument-serif.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../assets/fonts/instrument-serif-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --ink:#0b0b0a;
  --ink-2:#111110;
  --char:#181715;
  --char-2:#22211e;
  --concrete:#8e8a83;
  --concrete-2:#bbb6ad;
  --paper:#edebe5;
  --paper-2:#e3e0d8;
  --paper-ink:#171614;
  --text:#f3f1ec;
  --text-2:#b9b6ae;
  --text-3:#7e7b74;
  --amber:#ffba03;
  --amber-2:#ffd36b;
  --amber-ink:#9a6c00;
  --ok:#c9d9a6;
  --line:rgba(243,241,236,.12);
  --line-2:rgba(243,241,236,.22);
  --glass:rgba(14,14,13,.62);

  --f-sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-serif:"Instrument Serif",ui-serif,Georgia,"Times New Roman",serif;
  --f-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --pad:clamp(20px,4.6vw,72px);
  --nav-h:72px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--ink)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--f-sans);font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;font-feature-settings:"ss01","cv11"}
img,svg,canvas{display:block}
a{color:inherit;text-decoration:none}
p,h1,h2,h3,ol,ul,figure,dl,dd{margin:0}
ol,ul{list-style:none;padding:0}
em{font-style:normal}
::selection{background:var(--amber);color:#000}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}

/* Serif accent: the "voice" of the film */
.hero__title em,.data__yours em,.know__text em,.belongs__title em,.belongs__run em,.useful__l2 em,.layers-copy em,
.mis__l2 em,.beat em,.mis__s2 em,.std__l2 em,.std__lines em,.std__only em,.std__yours em,.pair__yes em,
.trust__because em,.trust__list em,.brand__tag em,.captions em{
  font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--amber)}

.eyebrow{display:inline-flex;align-items:center;gap:12px;font:500 11px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}
.eyebrow__mark{width:22px;height:22px;display:grid;place-items:center;border:1px solid rgba(255,186,3,.45);border-radius:50%}
.eyebrow__mark svg{width:11px;height:11px;color:var(--amber)}

/* ------------------------------------------------------------------ scene scaffolding */
.scene{position:relative;height:calc(var(--len,300) * 1vh)}
.stage{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;isolation:isolate;background:var(--ink)}
.shade{position:absolute;inset:0;pointer-events:none;z-index:2}
.world-slot{position:absolute;inset:0;z-index:0}

.photo{position:absolute;inset:0;z-index:1;overflow:hidden;background:var(--ink)}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:var(--ox,50%) var(--oy,50%);will-change:transform}
.photo canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.photo.is-gl canvas{opacity:1}
.photo.is-gl img{visibility:hidden}

/* ------------------------------------------------------------------ loader */
.loader{position:fixed;inset:0;z-index:200;pointer-events:none}
.loader__bar{position:absolute;left:0;right:0;height:50.5%;background:var(--ink);will-change:transform}
.loader__bar--top{top:0}
.loader__bar--bottom{bottom:0}
.loader__center{position:absolute;left:50%;top:50%;width:min(300px,64vw);transform:translate(-50%,-50%)}
.loader__logo{width:100%;height:auto;color:var(--amber);fill:var(--amber);overflow:visible}
.loader__logo .lt{opacity:0}
.loader__meta{display:flex;justify-content:space-between;margin-top:22px;font:500 10.5px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}
.loader__count{color:var(--text-2);font-variant-numeric:tabular-nums}
.loader__line{margin-top:12px;height:1px;background:rgba(255,255,255,.1);overflow:hidden}
.loader__line i{display:block;height:100%;background:var(--amber);transform:scaleX(0);transform-origin:0 50%}
body:not(.is-loading) .loader{visibility:hidden}

/* ------------------------------------------------------------------ nav */
.nav{position:fixed;z-index:120;top:0;left:0;right:0;height:var(--nav-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 var(--pad);color:var(--text);transition:color .5s var(--ease)}
.nav::before{content:"";position:absolute;inset:0 0 -30px;background:linear-gradient(180deg,rgba(8,8,7,.55),rgba(8,8,7,0));pointer-events:none;transition:opacity .5s}
.nav__logo{position:relative;width:104px;color:var(--amber)}
.nav__logo svg{width:100%;height:26px}
.nav__chapter{position:relative;display:flex;align-items:center;gap:14px;font:500 11px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--text-2)}
.nav__num{color:var(--amber);font-variant-numeric:tabular-nums}
.nav__chapter::before{content:"";order:1;width:28px;height:1px;background:currentColor;opacity:.4}
.nav__name-wrap{order:2;display:block;overflow:hidden;height:14px}
.nav__name{display:block;line-height:14px}
.nav__cta{position:relative;justify-self:end;display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 16px 0 18px;border:1px solid var(--line-2);border-radius:999px;
  font-size:13px;font-weight:500;letter-spacing:-.005em;background:rgba(10,10,9,.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.nav__cta svg{width:16px;height:16px;transition:transform .35s var(--ease)}
.nav__cta:hover{background:var(--amber);border-color:var(--amber);color:#111}
.nav__cta:hover svg{transform:translateX(3px)}
.nav__progress{position:absolute;left:0;right:0;top:0;height:2px;pointer-events:none}
.nav__progress i{display:block;height:100%;width:100%;background:var(--amber);transform:scaleX(0);transform-origin:0 50%}
.nav.is-light{color:var(--paper-ink)}
.nav.is-light::before{opacity:0}
.nav.is-light .nav__chapter{color:#57544d}
.nav.is-light .nav__num{color:var(--amber-ink)}
.nav.is-light .nav__logo{color:#1b1a17}
.nav.is-light .nav__cta{border-color:rgba(23,22,20,.25);background:rgba(237,235,229,.4)}
.nav.is-light .nav__cta:hover{background:var(--paper-ink);color:var(--paper);border-color:var(--paper-ink)}

/* ------------------------------------------------------------------ film grain + cursor */
.grain{position:fixed;inset:-50%;z-index:150;pointer-events:none;opacity:.075;mix-blend-mode:overlay;background-size:180px 180px;animation:grain .9s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}17%{transform:translate(-3%,2%)}33%{transform:translate(2%,-4%)}50%{transform:translate(-4%,-1%)}67%{transform:translate(3%,3%)}83%{transform:translate(-1%,4%)}100%{transform:translate(0,0)}}

.cursor{position:fixed;left:0;top:0;z-index:190;pointer-events:none;display:none;opacity:0}
.has-cursor .cursor{display:block}
.cursor__dot,.cursor__ring{position:absolute;left:0;top:0;border-radius:50%;transform:translate(-50%,-50%)}
.cursor__dot{width:6px;height:6px;background:var(--amber)}
.cursor__ring{width:34px;height:34px;border:1px solid rgba(255,186,3,.5);transition:width .35s var(--ease),height .35s var(--ease),border-color .35s,background .35s}
.cursor.is-link .cursor__ring{width:58px;height:58px;border-color:rgba(255,186,3,.9);background:rgba(255,186,3,.08)}
.cursor.is-light .cursor__ring{border-color:rgba(154,108,0,.6)}
.cursor.is-light .cursor__dot{background:var(--amber-ink)}

/* ------------------------------------------------------------------ 01 hero */
.shade--hero{background:
  linear-gradient(90deg,rgba(8,8,7,.78) 0%,rgba(8,8,7,.45) 36%,rgba(8,8,7,0) 66%),
  linear-gradient(0deg,rgba(8,8,7,.85) 0%,rgba(8,8,7,0) 42%),
  linear-gradient(180deg,rgba(8,8,7,.4) 0%,rgba(8,8,7,0) 22%)}
.letterbox{position:absolute;left:0;right:0;z-index:5;height:10.5vh;background:#000;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);
  font:500 10.5px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:#6f6c66;will-change:transform}
.letterbox--top{top:0;align-items:flex-end;padding-bottom:14px}
.letterbox--bottom{bottom:0;align-items:flex-start;padding-top:16px}
.letterbox__rec{display:inline-flex;align-items:center;gap:10px}
.letterbox__rec i{width:6px;height:6px;border-radius:50%;background:var(--amber);animation:blink 1.6s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}
.scrollcue{display:inline-flex;align-items:center;gap:14px;color:var(--text-2)}
.scrollcue i{position:relative;width:1px;height:34px;background:rgba(255,255,255,.18);overflow:hidden}
.scrollcue i::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;background:var(--amber);animation:cue 1.8s var(--ease-io) infinite}
@keyframes cue{to{top:100%}}
.hero__copy{position:absolute;z-index:4;left:var(--pad);bottom:calc(10.5vh + clamp(34px,6vh,70px));max-width:min(1100px,86vw)}
.hero__title{margin-top:26px;font-size:clamp(46px,7.3vw,132px);line-height:.93;letter-spacing:-.052em;font-weight:500;max-width:12.5ch;text-wrap:balance}
.hero__title em{letter-spacing:-.02em}
.hero__sub{position:absolute;z-index:4;right:var(--pad);bottom:calc(10.5vh + clamp(34px,6vh,70px));max-width:14ch;text-align:right;
  font-family:var(--f-serif);font-style:italic;font-size:clamp(28px,3.4vw,58px);line-height:1;letter-spacing:-.01em;color:var(--text)}

/* split-text helpers */
.split-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.split-line>span{display:inline-block;will-change:transform}
.w{display:inline-block;will-change:opacity}

/* ------------------------------------------------------------------ 02 data */
.shade--data{background:linear-gradient(90deg,rgba(8,8,7,.82) 0%,rgba(8,8,7,.5) 55%,rgba(8,8,7,.35) 100%)}
.data__kicker{position:absolute;z-index:4;left:var(--pad);bottom:6vh}
.reel{position:absolute;z-index:4;left:var(--pad);top:50%;height:min(78vh,760px);transform:translateY(-50%);width:52vw;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 70%,transparent 100%)}
.reel__track{position:absolute;left:0;top:50%;will-change:transform}
.reel__word{display:block;font-size:clamp(46px,7.6vw,138px);line-height:1.02;letter-spacing:-.055em;font-weight:500;color:var(--text);opacity:.14;white-space:nowrap;
  transform-origin:0 50%;will-change:opacity,transform}
.pile{position:absolute;z-index:3;right:calc(var(--pad) + 2vw);top:50%;width:min(420px,34vw);aspect-ratio:1.36;transform:translateY(-50%);perspective:1400px}
.card{position:absolute;inset:0;margin:auto;border-radius:10px;overflow:hidden;box-shadow:0 30px 70px -20px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.06);
  opacity:0;will-change:transform,opacity;backface-visibility:hidden}
.card__head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px 10px;font:500 10px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.card--paper{background:#f1efe8;color:#2a2925}
.card--paper .card__head{color:#6d6a62;border-bottom:1px solid rgba(0,0,0,.08)}
.plan{width:100%;height:calc(100% - 36px);padding:6px 10px 10px}
.plan path,.plan circle{fill:none;stroke:#2d2c28;vector-effect:non-scaling-stroke}
.plan__grid path{stroke:#9d998f;stroke-width:.8;stroke-dasharray:4 3}
.plan__bubbles circle{stroke:#55524b;stroke-width:.9;fill:#f1efe8}
.plan__bubbles text,.plan__dim text{font:600 7.5px var(--f-mono);fill:#3a3934;text-anchor:middle}
.plan__wall{stroke-width:2.4!important}
.plan__joints{stroke-width:1!important}
.plan__doors{stroke-width:1!important;stroke:#6d6a62!important}
.plan__office{stroke-width:1.2!important}
.plan__dim path{stroke-width:.8!important}
.plan__hl{stroke:var(--amber)!important;stroke-width:1.6!important;fill:rgba(255,186,3,.18)!important}
.card--photo{background:#f4f2ec;padding:10px 10px 0}
.card__img{position:relative;height:calc(100% - 38px);overflow:hidden;border-radius:3px}
.card__img img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.card--photo figcaption{display:flex;justify-content:space-between;align-items:center;height:38px;font:500 10px/1 var(--f-mono);letter-spacing:.12em;color:#6d6a62;text-transform:uppercase}
.card--ui{background:linear-gradient(180deg,#1c1b19,#141412);color:var(--text)}
.card--ui .card__head{color:var(--text-3);border-bottom:1px solid var(--line)}
.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:999px;border:1px solid var(--line-2);font:500 9px/1 var(--f-mono);letter-spacing:.12em;color:var(--text-2)}
.chip svg{width:11px;height:11px}
.chip--ok{border-color:rgba(255,186,3,.4);color:var(--amber)}
.elev{width:100%;height:calc(100% - 36px);padding:8px 12px}
.elev__panel{fill:rgba(187,182,173,.14);stroke:var(--concrete-2);stroke-width:1.2}
.elev__door{fill:#0f0f0e;stroke:var(--concrete-2);stroke-width:1}
.elev__dim,.elev__tol{fill:none;stroke:var(--amber);stroke-width:1}
.elev__tol{stroke:var(--text-3);stroke-dasharray:3 3}
.elev__lbl{font:600 15px var(--f-mono);fill:var(--amber);text-anchor:middle}
.elev__lbl2{font:500 9px var(--f-mono);fill:var(--text-2);text-anchor:middle}
.elev__tolt{font:500 10px var(--f-mono);fill:var(--text-2)}
.prog{padding:18px 16px}
.prog__num{display:flex;align-items:baseline;gap:8px}
.prog__num strong{font-size:clamp(40px,4vw,62px);font-weight:500;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.prog__num span{color:var(--text-3);font:500 14px var(--f-mono)}
.prog__bar{margin-top:14px;height:4px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.prog__bar i{display:block;height:100%;width:100%;background:var(--amber);transform:scaleX(var(--p));transform-origin:0 50%}
.prog__weeks{display:flex;align-items:flex-end;gap:6px;height:64px;margin-top:20px}
.prog__weeks i{flex:1;height:calc(var(--h)*100%);background:rgba(255,255,255,.14);border-radius:2px}
.prog__weeks i:last-child{background:var(--amber)}
.gantt{padding:12px 14px 0;display:grid;gap:9px}
.gantt li{position:relative;display:grid;grid-template-columns:36% 1fr;align-items:center;font-size:11px;color:var(--text-2)}
.gantt li i{position:relative;height:8px;border-radius:4px;background:rgba(255,255,255,.14);margin-left:calc(var(--s)*100%);width:calc(var(--w)*100%)}
.gantt li i.done{background:rgba(201,217,166,.55)}
.gantt li i.live{background:var(--amber)}
.gantt__today{position:absolute;top:44px;bottom:12px;left:calc(14px + (100% - 28px) * .36 + (100% - 28px) * .64 * var(--t));width:1px;background:rgba(255,186,3,.7)}
.gantt__today::before{content:"Today";position:absolute;top:-12px;left:-14px;font:500 8px/1 var(--f-mono);letter-spacing:.12em;color:var(--amber);text-transform:uppercase}
.doc__title{padding:14px 16px 0;font-size:15px;line-height:1.3;font-weight:500;letter-spacing:-.01em}
.doc__lines{padding:14px 16px 0;display:grid;gap:8px}
.doc__lines i{display:block;height:6px;width:calc(var(--w)*100%);border-radius:3px;background:rgba(255,255,255,.1)}
.doc__meta{position:absolute;left:16px;right:16px;bottom:14px;display:flex;justify-content:space-between;font:500 9.5px/1 var(--f-mono);letter-spacing:.1em;color:var(--text-3);text-transform:uppercase}
.decision{display:flex;gap:14px;align-items:center;padding:16px}
.decision__check{flex:none;width:44px;height:44px;border-radius:50%;background:var(--amber);color:#111;display:grid;place-items:center}
.decision__check svg{width:22px;height:22px}
.decision strong{display:block;font-size:20px;font-weight:500;letter-spacing:-.02em}
.decision span{display:block;font-size:12px;color:var(--text-3);line-height:1.5}
.sig{position:absolute;left:18px;right:30%;bottom:10px;height:30%}
.sig path{fill:none;stroke:var(--text-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.data__outro{position:absolute;inset:0;z-index:5;display:grid;place-content:center;text-align:center;pointer-events:none}
.data__behind{font-size:clamp(28px,3.2vw,52px);letter-spacing:-.035em;color:var(--text-2);font-weight:400}
.data__yours{margin-top:.1em;font-size:clamp(84px,15vw,280px);line-height:.9;letter-spacing:-.02em}
.data__yours em{display:inline-block}

/* ------------------------------------------------------------------ 03 know */
.shade--know{background:linear-gradient(90deg,rgba(8,8,7,.86) 0%,rgba(8,8,7,.55) 45%,rgba(8,8,7,.15) 100%),linear-gradient(0deg,rgba(8,8,7,.6),rgba(8,8,7,0) 50%)}
.know__text{position:absolute;z-index:4;left:var(--pad);top:50%;transform:translateY(-50%);max-width:min(15.5ch,86vw);
  font-size:clamp(38px,5.5vw,96px);line-height:1.02;letter-spacing:-.045em;font-weight:500;text-wrap:balance}
.know__text .w{opacity:.16}

/* ------------------------------------------------------------------ 04 belongs (paper) */
.scene--belongs .stage{background:var(--paper);color:var(--paper-ink)}
.scene--belongs em{color:var(--amber-ink)!important}
.flow{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.belongs__head{position:absolute;z-index:4;left:var(--pad);right:var(--pad);top:50%;transform:translateY(-50%);text-align:center;will-change:transform}
.belongs__pre{font:500 12px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:#6d6a62}
.belongs__title{margin-top:28px;font-size:clamp(58px,10.4vw,196px);line-height:.9;letter-spacing:-.06em;font-weight:500;will-change:transform}
.vault{position:absolute;z-index:3;right:var(--pad);top:calc(var(--nav-h) + 6vh);bottom:9vh;width:min(58vw,900px);padding:clamp(18px,2.2vw,30px);opacity:0}
.vault__frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.vault__frame rect{width:calc(100% - 2px);height:calc(100% - 2px);fill:rgba(255,255,255,.55);stroke:#1b1a17;stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
.vault__head{position:relative;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid rgba(23,22,20,.12)}
.vault__dot{width:9px;height:9px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px rgba(255,186,3,.22)}
.vault__name{font-size:clamp(15px,1.3vw,19px);font-weight:600;letter-spacing:-.02em}
.vault__meta{margin-left:auto;font:500 10.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#77736b}
.vault__grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1vw,14px);margin-top:clamp(14px,1.8vw,22px)}
.tile{position:relative;min-width:0;background:#fff;border-radius:8px;padding:8px 8px 10px;box-shadow:0 1px 0 rgba(0,0,0,.04),0 14px 30px -18px rgba(40,35,20,.35);will-change:transform,opacity}
.tile p{margin-top:8px;font-size:12px;line-height:1.3;font-weight:500;letter-spacing:-.01em;color:#1f1e1b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile p span{display:block;margin-top:2px;font:500 9.5px/1.3 var(--f-mono);letter-spacing:.06em;color:#8a867d;text-transform:uppercase}
.tile__thumb{position:relative;aspect-ratio:1.6;border-radius:5px;overflow:hidden;background:#e8e5dd}
.tile__thumb img{width:100%;height:100%;object-fit:cover}
.tile__thumb svg{position:absolute;inset:12%;width:76%;height:76%}
.tile__thumb--plan{background:#f4f2ec}
.tile__thumb--plan path{fill:none;stroke:#4a4842;stroke-width:1.2}
.tile__thumb--cad{background:#1a1917}
.tile__thumb--cad path{fill:none;stroke:#bdb8ae;stroke-width:1.1}
.tile__thumb--cad path.hl{stroke:var(--amber);fill:rgba(255,186,3,.2)}
.tile__thumb--sheet{display:grid;grid-template-columns:1fr 1fr 1fr;gap:3px;padding:12%;background:#f4f2ec}
.tile__thumb--sheet i{background:#dcd8ce;border-radius:1px}
.tile__thumb--sheet i:nth-child(3n+1){background:#c7c2b6}
.tile__thumb--doc{display:grid;align-content:center;gap:5px;padding:0 16%;background:#f4f2ec}
.tile__thumb--doc i{height:4px;border-radius:2px;background:#cfcabf}
.tile__thumb--doc i:first-child{width:60%;background:#9e998e}
.tile__thumb--dims{background:#1a1917}
.tile__thumb--dims path{fill:none;stroke:var(--amber);stroke-width:1.1}
.tile__thumb--dims b{position:absolute;right:10%;top:22%;font:600 11px var(--f-mono);color:var(--amber)}
.tile__thumb--bars{display:flex;align-items:flex-end;gap:5px;padding:14% 14% 12%;background:#f4f2ec}
.tile__thumb--bars i{flex:1;height:calc(var(--h)*100%);background:#c7c2b6;border-radius:1px}
.tile__thumb--bars i:last-child{background:var(--amber)}
.vault__foot{position:absolute;left:clamp(18px,2.2vw,30px);right:clamp(18px,2.2vw,30px);bottom:clamp(16px,2vw,24px);display:flex;justify-content:space-between;gap:16px;
  font:500 10.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#77736b}
.vault__foot span{display:inline-flex;align-items:center;gap:8px}
.vault__foot svg{width:15px;height:15px}
.donts{position:absolute;z-index:4;left:var(--pad);top:calc(var(--nav-h) + 16vh);width:min(34vw,520px);display:grid;gap:clamp(18px,3vh,34px)}
.donts li{display:grid;grid-template-columns:36px 1fr;gap:8px;opacity:0;will-change:transform,opacity}
.donts__n{font:500 11px/2.3 var(--f-mono);letter-spacing:.14em;color:var(--amber-ink)}
.donts p{font-size:clamp(22px,2.15vw,36px);line-height:1.12;letter-spacing:-.035em;font-weight:500;color:#26241f}
.donts strong{font-weight:500;color:var(--paper-ink);background:linear-gradient(transparent 62%,rgba(255,186,3,.45) 62%,rgba(255,186,3,.45) 92%,transparent 92%) no-repeat 0 0/var(--hl,0%) 100%}
.belongs__end{position:absolute;z-index:4;left:var(--pad);bottom:9vh;width:min(34vw,540px)}
.belongs__run{font-size:clamp(20px,1.8vw,28px);line-height:1.2;letter-spacing:-.03em;color:#3a3833;opacity:0;text-wrap:balance}
.belongs__thats{margin-top:8px;font-size:clamp(64px,8vw,150px);line-height:.9;letter-spacing:-.06em;font-weight:500;opacity:0}

/* ------------------------------------------------------------------ glass UI shared */
.glass{background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1)}

/* ------------------------------------------------------------------ 05 useful (3D) */
.shade--useful{background:linear-gradient(90deg,rgba(8,8,7,.72) 0%,rgba(8,8,7,.3) 42%,rgba(8,8,7,0) 65%);opacity:0}
.photo--intro{z-index:1}
.useful__intro{position:absolute;z-index:6;left:var(--pad);top:50%;transform:translateY(-50%);width:min(40vw,700px);pointer-events:none}
.useful__intro p{font-size:clamp(34px,4.1vw,74px);line-height:1.02;letter-spacing:-.05em;font-weight:500;text-wrap:balance;text-shadow:0 2px 40px rgba(0,0,0,.45)}
.useful__l2{position:absolute;left:0;top:0;opacity:0}
.hud{position:absolute;inset:0;z-index:5;pointer-events:none;font-family:var(--f-mono)}
.hud__tl,.hud__tr{position:absolute;top:calc(var(--nav-h) + 12px)}
.hud__tl{left:var(--pad)}
.hud__tr{right:var(--pad)}
.hud__proj,.hud__cap{display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 14px;border-radius:999px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);
  background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hud__proj svg,.hud__cap svg{width:14px;height:14px;color:var(--amber)}
.hud__proj b{color:var(--text-3);font-weight:400}
.hud__date{color:var(--text);font-weight:500}
.hud__layers{position:absolute;left:var(--pad);bottom:clamp(90px,14vh,140px);width:210px;padding:14px 16px;border-radius:12px;
  background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hud__layers>p{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);margin-bottom:10px}
.tog{display:flex;justify-content:space-between;align-items:center;padding:7px 0;font-size:12px;letter-spacing:.02em;color:var(--text-2);font-family:var(--f-sans)}
.tog i{position:relative;width:30px;height:17px;border-radius:999px;background:rgba(255,255,255,.14);transition:background .45s var(--ease)}
.tog i::after{content:"";position:absolute;left:2px;top:2px;width:13px;height:13px;border-radius:50%;background:#d8d5ce;transition:transform .45s var(--ease),background .45s}
.tog.is-on{color:var(--text)}
.tog.is-on i{background:var(--amber)}
.tog.is-on i::after{transform:translateX(13px);background:#1a1305}
.hud__stat{position:absolute;right:var(--pad);bottom:clamp(90px,14vh,140px);width:230px;padding:16px 18px;border-radius:12px;
  background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hud__stat>p:first-child{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
.hud__count{display:flex;align-items:baseline;gap:8px;margin-top:8px;font-family:var(--f-sans)}
.hud__count strong{font-size:46px;line-height:1;font-weight:500;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.hud__count span{font:500 13px var(--f-mono);color:var(--text-3)}
.hud__bar{margin-top:12px;height:3px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.hud__bar i{display:block;height:100%;background:var(--amber);transform:scaleX(.35);transform-origin:0 50%}
.hud__sub{margin-top:10px;font-size:10.5px;letter-spacing:.06em;color:var(--text-3)}
.hud__verified{color:var(--amber);font-variant-numeric:tabular-nums}
.timeline{position:absolute;left:50%;bottom:clamp(26px,5vh,48px);width:min(640px,60vw);transform:translateX(-50%)}
.timeline__track{position:relative;height:2px;background:rgba(255,255,255,.14);border-radius:2px}
.timeline__fill{position:absolute;left:0;top:0;height:100%;width:100%;background:var(--amber);transform:scaleX(0);transform-origin:0 50%}
.timeline__knob{position:absolute;top:50%;left:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 5px rgba(255,186,3,.2)}
.timeline__dates{display:flex;justify-content:space-between;margin-top:12px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.timeline__dates li.is-on{color:var(--text)}
.captions{position:absolute;z-index:6;left:var(--pad);top:calc(var(--nav-h) + 14vh);width:min(40vw,640px);pointer-events:none}
.captions li{position:absolute;left:0;top:0;font-size:clamp(34px,4vw,72px);line-height:1;letter-spacing:-.05em;font-weight:500;opacity:0;text-wrap:balance;
  text-shadow:0 2px 30px rgba(0,0,0,.35)}
.layers-copy{position:absolute;z-index:6;left:50%;top:calc(var(--nav-h) + 5vh);width:min(1100px,90vw);transform:translateX(-50%);text-align:center;pointer-events:none}
.layers-copy__a{font-size:clamp(28px,3.4vw,60px);line-height:1.04;letter-spacing:-.045em;font-weight:500;opacity:0;text-shadow:0 2px 40px rgba(0,0,0,.5)}
.layers-copy__b{margin-top:.25em;font-size:clamp(56px,8vw,150px);line-height:.95;opacity:0;text-shadow:0 2px 40px rgba(0,0,0,.4)}

/* world DOM (canvas + overlay + labels, moved between slots) */
.world{position:absolute;inset:0;overflow:hidden;background:var(--ink)}
.world canvas{position:absolute;inset:0;width:100%;height:100%}
.world__overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.world__labels{position:absolute;inset:0;pointer-events:none}
.ov-halo{fill:none;stroke:rgba(12,12,11,.5);stroke-width:3.2;stroke-linejoin:round;stroke-linecap:round}
.ov-grid{fill:none;stroke:rgba(243,241,236,.7);stroke-width:1;stroke-dasharray:6 5}
.ov-wall{fill:none;stroke:rgba(243,241,236,.92);stroke-width:1.4}
.ov-panel{fill:none;stroke:rgba(243,241,236,.75);stroke-width:1}
.ov-open{fill:none;stroke:rgba(243,241,236,.9);stroke-width:1.2;stroke-dasharray:4 3}
.ov-foot{fill:none;stroke:rgba(243,241,236,.35);stroke-width:1;stroke-dasharray:2 4}
.ov-dim{fill:none;stroke:var(--amber);stroke-width:1.1}
.ov-scan{fill:none;stroke:var(--amber);stroke-width:1.2}
.ov-asbuilt{fill:rgba(255,186,3,.14);stroke:var(--amber);stroke-width:1.6}
.ov-fixed{fill:rgba(201,217,166,.12);stroke:#d9e6b8;stroke-width:1.4}
.ov-bound{fill:none;stroke:var(--amber);stroke-width:1.3}
.ov-layer{fill:rgba(243,241,236,.1);stroke:rgba(243,241,236,.8);stroke-width:1}
.ov-layer-deco{fill:none;stroke:rgba(243,241,236,.35);stroke-width:.8}
.ov-layer--amber{fill:rgba(255,186,3,.06);stroke:rgba(255,186,3,.75)}
.ov-bubble{position:absolute;left:0;top:0;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:1px solid rgba(243,241,236,.55);display:grid;place-items:center;
  font:600 9.5px/1 var(--f-mono);color:var(--text);background:rgba(10,10,9,.6);will-change:transform}
.ov-tag{position:absolute;left:0;top:0;white-space:nowrap;padding:5px 8px;border-radius:6px;font:500 10.5px/1 var(--f-mono);letter-spacing:.06em;color:var(--text);
  background:rgba(10,10,9,.72);border:1px solid var(--line-2);transform-origin:0 0;will-change:transform}
.ov-tag--amber{color:#1a1305;background:var(--amber);border-color:var(--amber)}
.ov-tag--dim{color:var(--amber);border-color:rgba(255,186,3,.6)}
.ov-check{position:absolute;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--amber);color:#1a1305;display:grid;place-items:center;will-change:transform}
.ov-check svg{width:11px;height:11px}
.ov-pin{position:absolute;left:0;top:0;display:flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;border-radius:999px;background:rgba(14,14,13,.8);border:1px solid var(--line-2);
  font:500 11px/1.2 var(--f-sans);color:var(--text);white-space:nowrap;transform-origin:0 100%;will-change:transform}
.ov-pin .av{width:22px;height:22px;font-size:9px}
.ov-pin i{font-style:normal;color:var(--text-3);font-family:var(--f-mono);font-size:10px}
.ov-label{position:absolute;left:0;top:0;white-space:nowrap;font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);will-change:transform}
.ov-label b{display:block;margin-bottom:6px;font:500 clamp(15px,1.3vw,20px)/1 var(--f-sans);letter-spacing:-.02em;text-transform:none;color:var(--text)}

.av{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--c,#3a3834);color:#fff;font:600 10px/1 var(--f-mono);letter-spacing:.04em}
.av svg{width:14px;height:14px}
.av--ok{background:var(--amber);color:#1a1305}

/* ------------------------------------------------------------------ 06 mistakes */
.shade--mistakes{background:linear-gradient(90deg,rgba(8,8,7,.82) 0%,rgba(8,8,7,.45) 45%,rgba(8,8,7,.1) 100%)}
.mis__open{position:absolute;z-index:6;left:var(--pad);top:50%;transform:translateY(-50%);width:min(52vw,900px);pointer-events:none}
.mis__l1{font-size:clamp(30px,3.6vw,64px);line-height:1.03;letter-spacing:-.045em;font-weight:500;text-wrap:balance}
.mis__l2{margin-top:.2em;font-size:clamp(90px,14vw,250px);line-height:.9;opacity:0}
.mis__l3{margin-top:.5em;font-size:clamp(20px,1.9vw,30px);line-height:1.25;letter-spacing:-.03em;color:var(--text-2);opacity:0;max-width:24ch}
.mis__beats{position:absolute;z-index:6;left:var(--pad);top:calc(var(--nav-h) + 12vh);width:min(40vw,620px);pointer-events:none}
.beat{position:absolute;left:0;top:0;font-size:clamp(30px,3.5vw,62px);line-height:1.02;letter-spacing:-.045em;font-weight:500;opacity:0;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.4)}
.issue{position:absolute;z-index:6;right:var(--pad);top:calc(var(--nav-h) + 8vh);width:min(380px,32vw);padding:18px;border-radius:14px;opacity:0;
  background:rgba(14,14,13,.78);border:1px solid var(--line);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.issue__head{display:flex;justify-content:space-between;align-items:center;font:500 10px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.issue__status{display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border-radius:999px;border:1px solid rgba(255,186,3,.45);color:var(--amber)}
.issue__status i{width:6px;height:6px;border-radius:50%;background:currentColor}
.issue__status.is-ok{border-color:rgba(217,230,184,.5);color:#d9e6b8}
.issue__title{margin-top:14px;font-size:17px;line-height:1.3;letter-spacing:-.02em;font-weight:500}
.issue__title b{color:var(--amber);font-weight:500}
.issue__data{margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.issue__data div{background:#141412;padding:9px 10px}
.issue__data dt{font:500 9px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.issue__data dd{margin-top:6px;font:500 11px/1.25 var(--f-mono);color:var(--text)}
.issue__asbuilt{color:var(--amber)!important}
.thread{margin-top:14px;display:grid;gap:12px}
.thread li{display:flex;gap:10px;align-items:flex-start;opacity:0}
.thread b{display:block;font-size:12px;font-weight:600;letter-spacing:-.01em}
.thread p{font-size:12.5px;line-height:1.4;color:var(--text-2)}
.thread__fix b{color:var(--amber)}
.loop{position:absolute;z-index:6;left:50%;bottom:clamp(28px,6vh,60px);width:min(1000px,88vw);transform:translateX(-50%);padding:18px 22px 16px;border-radius:14px;opacity:0;
  background:rgba(14,14,13,.78);border:1px solid var(--line);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.loop__title{display:flex;align-items:center;gap:10px;font:500 10.5px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.loop__ver{padding:4px 7px;border-radius:5px;background:rgba(255,255,255,.08);color:var(--text)}
.loop__steps{position:relative;display:flex;align-items:center;margin-top:16px}
.loop__steps li{position:relative;flex:1 1 0;display:flex;align-items:center;min-width:0}
.loop__steps li::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;border:1.5px solid var(--text-2);background:#141412;margin-right:10px}
.loop__steps li::after{content:"";flex:1;height:1px;background:var(--line-2);margin:0 12px}
.loop__steps li:last-child::after{display:none}
.loop__steps span{font-size:13px;font-weight:500;white-space:nowrap;letter-spacing:-.01em}
.loop__new{flex-basis:0;flex-grow:0;overflow:hidden;opacity:0}
.loop__new::before{border-color:var(--amber)!important;background:var(--amber)!important}
.loop__new span{color:var(--amber)}
.loop__note{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:12px;color:var(--text-3);opacity:0}
.loop__note svg{width:14px;height:14px;color:var(--amber)}
.mis__statement{position:absolute;z-index:7;left:50%;top:50%;width:min(1200px,90vw);transform:translate(-50%,-50%);text-align:center;pointer-events:none}
.mis__s1{font-size:clamp(30px,3.6vw,64px);line-height:1.05;letter-spacing:-.045em;font-weight:500;color:var(--text-2);opacity:0}
.mis__s2{margin-top:.2em;font-size:clamp(58px,8.4vw,158px);line-height:.95;letter-spacing:-.055em;font-weight:500;opacity:0}

/* ------------------------------------------------------------------ 07 standards */
.shade--standards{background:linear-gradient(90deg,rgba(8,8,7,.85) 0%,rgba(8,8,7,.4) 50%,rgba(8,8,7,.15) 100%)}
.std__open{position:absolute;z-index:6;left:var(--pad);top:50%;transform:translateY(-50%);width:min(44vw,760px);pointer-events:none}
.std__l1{font-size:clamp(30px,3.4vw,60px);line-height:1.04;letter-spacing:-.045em;font-weight:500;text-wrap:balance}
.std__l2{margin-top:.3em;font-size:clamp(30px,3.4vw,60px);line-height:1.04;letter-spacing:-.045em;font-weight:500;opacity:0}
.app{position:absolute;z-index:4;right:var(--pad);top:calc(var(--nav-h) + 3vh);bottom:6vh;width:min(66vw,1180px);display:grid;grid-template-columns:clamp(130px,11vw,180px) 1fr clamp(210px,17vw,270px);
  border-radius:16px;overflow:hidden;background:transparent;border:1px solid var(--line);box-shadow:0 60px 120px -40px rgba(0,0,0,.8);opacity:0;will-change:transform,opacity;
  font-size:12px;color:var(--text-2)}
.app__side{position:relative;z-index:2;display:flex;flex-direction:column;padding:18px 10px;border-right:1px solid var(--line);background:#121211}
.app__mark{width:26px;height:26px;margin:0 8px 22px;color:var(--amber)}
.app__side nav{display:grid;gap:2px}
.app__side nav span,.app__settings{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;white-space:nowrap}
.app__side svg{width:15px;height:15px;flex:none}
.app__side .is-on{background:rgba(255,186,3,.1);color:var(--amber)}
.app__settings{margin-top:auto}
.app__main{position:relative;display:flex;flex-direction:column;min-width:0}
.app__top{position:relative;z-index:2;padding:14px 18px 0;border-bottom:1px solid var(--line);background:#0f0f0e}
.app__crumbs{display:flex;align-items:center;gap:6px;color:var(--text-3)}
.app__crumbs svg{width:13px;height:13px}
.app__crumbs b{color:var(--text);font-weight:600;font-size:15px;letter-spacing:-.02em}
.app__tabs{display:flex;gap:18px;margin-top:12px;white-space:nowrap;overflow:hidden}
.app__tabs span{padding:8px 0 10px;border-bottom:1.5px solid transparent}
.app__tabs .is-on{color:var(--amber);border-color:var(--amber)}
.app__view{position:relative;z-index:1;flex:1;margin:12px;border-radius:10px;background:transparent;box-shadow:0 0 0 200vmax #0f0f0e,inset 0 0 0 1px var(--line)}
.app__chip{position:absolute;z-index:3;top:10px;right:10px;display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:7px;background:rgba(14,14,13,.8);border:1px solid var(--line);color:var(--text);font-size:11px}
.app__chip svg{width:13px;height:13px;color:var(--amber)}
.app__toggles{position:absolute;z-index:3;left:10px;top:10px;display:flex;gap:6px}
.app__toggles span{padding:5px 9px;border-radius:6px;background:rgba(14,14,13,.8);border:1px solid var(--line);font-size:10.5px}
.app__toggles .is-on{color:var(--text);border-color:rgba(255,186,3,.4)}
.app__strip{position:absolute;z-index:3;left:10px;right:10px;bottom:10px;display:flex;gap:6px}
.app__strip i{flex:1;display:grid;place-items:center;height:30px;border-radius:6px;background:rgba(14,14,13,.82);border:1px solid var(--line);font:500 10px/1 var(--f-mono);font-style:normal;letter-spacing:.08em;color:var(--text-3);text-transform:uppercase}
.app__strip i.is-on{border-color:var(--amber);color:var(--amber);background:rgba(20,16,6,.88)}
.app__panel{position:relative;z-index:2;padding:16px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:18px;background:#121211;min-width:0}
.app__label{display:flex;justify-content:space-between;align-items:center;font:500 9.5px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.app__label svg{width:13px;height:13px;color:var(--amber)}
.app__name{margin-top:8px;font-size:16px;font-weight:600;letter-spacing:-.02em;color:var(--text);line-height:1.2}
.app__type,.app__co{margin-top:4px;font-size:11.5px;color:var(--text-3)}
.app__stats{display:grid;grid-template-columns:1fr 1fr;gap:12px 10px}
.app__big{margin-top:6px;display:flex;align-items:baseline;gap:5px;color:var(--text)}
.app__big b{font-size:26px;font-weight:500;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.app__big span{font:500 11px var(--f-mono);color:var(--text-3)}
.app__prog{grid-column:1/-1;height:3px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.app__prog i{display:block;height:100%;background:var(--amber);transform:scaleX(var(--p,.73));transform-origin:0 50%;transition:transform .8s var(--ease)}
.app__team{margin-top:10px;display:grid;gap:8px}
.app__team li{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:9px}
.app__team .av{width:26px;height:26px;font-size:9px;background:#2a2926}
.app__team b{font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app__team i{font-style:normal;font-size:10.5px;color:var(--text-3)}
.app__files{margin-top:10px;display:grid;gap:4px}
.app__files li{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--line)}
.app__files svg{width:15px;height:15px;color:var(--amber)}
.app__files b{font-weight:500;color:var(--text)}
.app__files i{font-style:normal;font-size:10.5px;color:var(--text-3)}
[data-bind].is-swap{animation:swap .9s var(--ease)}
@keyframes swap{0%{color:var(--amber);opacity:0;transform:translateY(6px)}40%{opacity:1;transform:none;color:var(--amber)}100%{}}
.app__panel [data-bind],.app__crumbs [data-bind],.app__chip [data-bind]{display:inline-block}
.app__team.is-swap{animation:swapList .9s var(--ease)}
@keyframes swapList{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}
.std__lines{position:absolute;z-index:6;left:var(--pad);top:50%;width:min(22vw,360px);pointer-events:none}
.std__lines li{position:absolute;left:0;top:0;transform:translateY(-50%);font-size:clamp(28px,2.7vw,48px);line-height:1.02;letter-spacing:-.045em;font-weight:500;opacity:0;text-wrap:balance}
.std__only{position:absolute;z-index:6;left:0;right:0;top:calc(var(--nav-h) + 6vh);text-align:center;pointer-events:none}
.std__only-t{font-size:clamp(52px,7.4vw,138px);line-height:.95;opacity:0}
.std__yours{position:absolute;z-index:6;left:0;right:0;bottom:6vh;display:flex;justify-content:center;gap:clamp(18px,3vw,54px);pointer-events:none}
.std__yours li{font-size:clamp(17px,1.6vw,26px);letter-spacing:-.03em;font-weight:500;opacity:0}

/* ------------------------------------------------------------------ 08 partner */
.shade--partner{background:linear-gradient(90deg,rgba(8,8,7,.8) 0%,rgba(8,8,7,.35) 45%,rgba(8,8,7,0) 75%),linear-gradient(0deg,rgba(8,8,7,.5),rgba(8,8,7,0) 40%)}
.pairs{position:absolute;z-index:6;left:var(--pad);top:50%;width:min(58vw,1000px);height:min(60vh,560px);transform:translateY(-50%);pointer-events:none}
.pair{position:absolute;left:0;top:0;right:0}
.pair__not{position:relative;display:inline-block;font-size:clamp(20px,2vw,32px);letter-spacing:-.03em;color:var(--text-2);opacity:0}
.pair__not::after{content:"";position:absolute;left:0;right:0;top:55%;height:1.5px;background:var(--amber);transform:scaleX(var(--strike,0));transform-origin:0 50%}
.pair__yes{margin-top:.5em;font-size:clamp(40px,5.4vw,100px);line-height:.98;letter-spacing:-.05em;font-weight:500;opacity:0;text-wrap:balance}
.pair__index{position:absolute;z-index:6;right:var(--pad);top:50%;transform:translateY(-50%);display:grid;gap:14px;padding:16px 16px 16px 14px;border-radius:12px;font:500 11px/1 var(--f-mono);letter-spacing:.16em;color:var(--text-3);background:rgba(12,12,11,.55);border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pair__index span{display:flex;align-items:center;gap:10px;transition:color .5s}
.pair__index span::before{content:"";width:18px;height:1px;background:currentColor;transition:width .5s var(--ease)}
.pair__index span.is-on{color:var(--amber)}
.pair__index span.is-on::before{width:40px}

/* ------------------------------------------------------------------ 09 final */
.shade--final{background:linear-gradient(90deg,rgba(8,8,7,.7) 0%,rgba(8,8,7,.2) 50%,rgba(8,8,7,0) 80%);opacity:1}
.shade--final.is-brand{background:radial-gradient(60% 46% at 50% 42%,rgba(8,8,7,.62) 0%,rgba(8,8,7,.28) 55%,rgba(8,8,7,0) 100%)}
.trust{position:absolute;z-index:6;left:var(--pad);top:50%;transform:translateY(-50%);width:min(56vw,960px);pointer-events:none}
.trust__because{font-size:clamp(40px,5.6vw,104px);line-height:.98;letter-spacing:-.05em;font-weight:500;text-wrap:balance}
.trust__list{margin-top:clamp(24px,5vh,56px);display:grid;gap:clamp(8px,1.6vh,16px)}
.trust__list li{display:flex;align-items:baseline;gap:18px;font-size:clamp(24px,2.5vw,44px);line-height:1.08;letter-spacing:-.04em;font-weight:500;opacity:0}
.trust__n{font:500 11px/1 var(--f-mono);letter-spacing:.16em;color:var(--text-3);transform:translateY(-.4em)}
.brand{position:absolute;z-index:7;left:50%;top:44%;width:min(1100px,92vw);transform:translate(-50%,-50%);text-align:center}
.brand__logo{width:min(560px,70vw);height:auto;margin:0 auto;fill:var(--amber);overflow:visible}
.brand__logo .lt{opacity:0}
.brand__tag{margin-top:clamp(26px,5vh,54px);font-size:clamp(34px,4.4vw,80px);line-height:1;letter-spacing:-.05em;font-weight:500}
.brand__tag span{display:inline-block;opacity:0}
.brand__sub{margin-top:18px;font-size:clamp(16px,1.3vw,20px);color:var(--text-2);opacity:0}
.brand__ctas{margin-top:34px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap;opacity:0}
.btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 22px;border-radius:999px;font-size:14.5px;font-weight:500;letter-spacing:-.01em;
  transition:transform .4s var(--ease),background .35s,color .35s,border-color .35s}
.btn svg{width:18px;height:18px;transition:transform .4s var(--ease)}
.btn--amber{background:var(--amber);color:#16110a}
.btn--amber:hover svg{transform:translateX(4px)}
.btn--ghost{border:1px solid var(--line-2);color:var(--text);background:rgba(10,10,9,.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn--ghost:hover{border-color:var(--text)}
.btn--ghost:hover svg{transform:rotate(-120deg)}

/* ------------------------------------------------------------------ footer */
.footer{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:30px var(--pad);border-top:1px solid var(--line);
  font:500 10.5px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);background:var(--ink)}
.footer__brand{display:flex;align-items:center;gap:16px}
.footer__brand svg{width:86px;height:22px;color:var(--amber)}
.footer__copy{justify-self:end}
.footer a{color:var(--text-2)}
.footer a:hover{color:var(--amber)}

/* ------------------------------------------------------------------ responsive */
@media (max-width:1100px){
  .app{width:auto;left:var(--pad);grid-template-columns:1fr clamp(200px,26vw,250px)}
  .app__side{display:none}
  .std__lines{top:calc(var(--nav-h) + 1vh);width:80vw}
  .std__lines li{transform:none;font-size:clamp(26px,3.4vw,40px)}
  .app{top:calc(var(--nav-h) + 11vh)}
}
@media (max-width:820px){
  :root{--nav-h:60px}
  .nav{grid-template-columns:1fr auto}
  .nav__chapter{display:none}
  .nav__cta span{display:none}
  .nav__cta{width:40px;padding:0;justify-content:center}
  .letterbox{height:8vh;font-size:9px;letter-spacing:.14em}
  .letterbox--top span{display:none}
  .letterbox__rec{display:none}
  .hero__copy{bottom:calc(8vh + 110px)}
  .hero__sub{left:var(--pad);right:auto;text-align:left;bottom:calc(8vh + 34px)}
  .reel{width:auto;right:var(--pad);top:calc(var(--nav-h) + 8vh);height:34vh;transform:none}
  .reel__word{font-size:clamp(40px,12vw,72px)}
  .pile{left:0;right:0;margin:auto;top:auto;bottom:9vh;width:min(360px,78vw);transform:none}
  .know__text{font-size:clamp(34px,9vw,54px)}
  .belongs__title{font-size:clamp(52px,15vw,96px)}
  .vault{left:var(--pad);right:var(--pad);width:auto;top:auto;bottom:4vh;height:48vh}
  .vault__grid{grid-template-columns:repeat(3,1fr)}
  .vault__grid .tile:nth-child(n+7){display:none}
  .vault__foot{display:none}
  .vault__meta{display:none}
  .donts{top:calc(var(--nav-h) + 3vh);width:auto;right:var(--pad)}
  .donts li{position:absolute;left:0;right:0;top:0}
  .belongs__mini{display:none}
  .donts p{font-size:clamp(22px,6.4vw,32px)}
  .belongs__end{top:calc(var(--nav-h) + 3vh);bottom:auto;width:auto;right:var(--pad)}
  .belongs__thats{font-size:clamp(56px,16vw,90px)}
  .hud__layers,.hud__tl{display:none}
  .ov-detail,.ov-pin,.ov-label--proj{display:none}
  .std__only{top:calc(var(--nav-h) + 3vh)}
  .std__only-t{font-size:clamp(40px,11vw,60px)}
  .hud__stat{right:auto;left:var(--pad);bottom:96px;width:200px;padding:12px 14px}
  .hud__count strong{font-size:34px}
  .hud__tr{display:none}
  .timeline{width:calc(100vw - 2*var(--pad))}
  .timeline__dates li:nth-child(even){visibility:hidden}
  .captions{width:auto;right:var(--pad);top:calc(var(--nav-h) + 8vh)}
  .captions li{font-size:clamp(30px,8.6vw,46px)}
  .useful__intro,.mis__open,.std__open{width:auto;right:var(--pad);max-width:none}
  .issue{left:var(--pad);right:var(--pad);width:auto;top:auto;bottom:4vh;padding:14px}
  .issue__data{display:none}
  .mis__beats{width:auto;right:var(--pad);top:calc(var(--nav-h) + 4vh)}
  .loop{padding:14px}
  .loop__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 8px}
  .loop__steps li::after{display:none}
  .loop__steps span{font-size:12px}
  .loop__steps li::before{width:8px;height:8px;margin-right:7px}
  .app{left:12px;right:12px;top:calc(var(--nav-h) + 20vh);bottom:3vh;grid-template-columns:1fr}
  .app__crumbs b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .app__crumbs span,.app__crumbs svg{display:none}
  .app__toggles span:nth-child(n+3){display:none}
  .app__chip{display:none}
  .app__strip i{font-size:8.5px;letter-spacing:0}
  .app__strip i:nth-child(-n+3){display:none}
  .app__panel{display:none}
  .app__tabs span:nth-child(n+4){display:none}
  .std__lines{top:calc(var(--nav-h) + 2vh)}
  .std__yours{flex-direction:column;align-items:center;gap:6px;bottom:5vh}
  .pairs{width:auto;right:var(--pad)}
  .pair__index{display:none}
  .trust{width:auto;right:var(--pad);top:calc(var(--nav-h) + 6vh);transform:none}
  .brand{top:40%}
  .footer{grid-template-columns:1fr;text-align:left}
  .footer__copy{justify-self:start}
}

@media (prefers-reduced-motion:reduce){
  .grain,.scrollcue i::after,.letterbox__rec i{animation:none}
}

.belongs__mini{position:absolute;z-index:4;left:var(--pad);top:calc(var(--nav-h) + 4vh);font-size:clamp(30px,3.1vw,54px);line-height:1;letter-spacing:-.05em;font-weight:500;color:var(--paper-ink)}
.belongs__mini em{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--amber-ink)}
.belongs__title{display:inline-block}

.vault__team{position:absolute;left:clamp(18px,2.2vw,30px);right:clamp(18px,2.2vw,30px);bottom:clamp(52px,6vh,70px);padding-top:16px;border-top:1px solid rgba(23,22,20,.12)}
.vault__label{display:flex;align-items:center;gap:8px;font:500 10.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#57534b}
.vault__label svg{width:15px;height:15px}
.vault__label span{margin-left:auto;color:#8a867d}
.vault__team ul{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.vault__team li{display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:10px;border-radius:10px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.04),0 10px 24px -18px rgba(40,35,20,.4)}
.vault__team .av{grid-row:1/3;width:30px;height:30px}
.vault__team b{font-size:12.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vault__team i{font-style:normal;font:500 9.5px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#8a867d}
@media (max-width:820px){.vault__team{display:none}}

.world-freeze{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:none}
.world-freeze.is-on{display:block}
.scene--standards .world{will-change:clip-path}

.ov-detail{position:absolute;left:0;top:0;width:0;height:0;will-change:transform}
.ov-detail__svg{position:absolute;left:0;top:-250px;overflow:visible}
.ov-detail__cap{position:absolute;left:84px;top:-262px;white-space:nowrap;font:500 10px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text);
  padding:5px 8px;border-radius:5px;background:rgba(10,10,9,.85);border:1px solid var(--line-2)}
.d-leader{fill:none;stroke:var(--amber);stroke-width:1.2}
.d-dot{fill:var(--amber)}
.d-ring{fill:#141412;stroke:var(--amber);stroke-width:1.5}
.d-slab{fill:#8a8276}
.d-block{transform:translateX(calc(var(--k,1) * 30px))}
.d-block rect{fill:#b79466}
.d-grain{fill:none;stroke:rgba(90,62,30,.35);stroke-width:1}
.d-design{stroke:#f3f1ec;stroke-width:1.8;stroke-dasharray:6 5}
.d-asbuilt{stroke:var(--amber);stroke-width:2.6;transform:translateX(calc(var(--k,1) * 30px))}
.d-dimg{opacity:var(--k,1)}
.d-dim{fill:none;stroke:#f3f1ec;stroke-width:1.2}
.d-val{font:600 14px var(--f-mono);fill:var(--amber);opacity:var(--k,1)}
.d-lbl{font:500 9px var(--f-mono);letter-spacing:.14em;fill:#f3f1ec;text-transform:uppercase;opacity:.8}
.d-ok{font:600 11px var(--f-mono);fill:var(--amber);text-anchor:middle;opacity:calc(1 - var(--k,1))}

/* no WebGL: keep the story on real photography */
.no-world .world-slot{background:#0b0b0a url("../assets/img/site-sunrise.webp") 60% 50%/cover no-repeat}
.no-world .world-slot::after{content:"";position:absolute;inset:0;background:rgba(8,8,7,.55)}
.no-world .hud,.no-world .issue,.no-world .loop,.no-world .app{display:none}

.curtain{position:fixed;inset:0;z-index:180;background:#050505;opacity:0;pointer-events:none}

/* ==========================================================================
   Story player — "Play the story", control dock, keyboard feedback
   ========================================================================== */
kbd{display:inline-block;font:500 10.5px/1 var(--f-mono);letter-spacing:.06em;padding:5px 7px;border-radius:6px;border:1px solid var(--line-2);
  background:rgba(255,255,255,.07);color:var(--text);text-transform:none;box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)}

/* opening shot call to action */
.play-cta{position:absolute;z-index:6;right:var(--pad);bottom:calc(10.5vh + clamp(34px,6vh,70px));opacity:0;transform:translateY(18px);pointer-events:none;
  transition:opacity 1s var(--ease),transform 1s var(--ease)}
.play-cta.is-ready{opacity:1;transform:none;pointer-events:auto}
.play-cta.is-hidden{opacity:0;transform:translateY(10px);pointer-events:none;transition-duration:.45s}
.play-cta__btn{display:flex;align-items:center;gap:22px;padding:0;border:0;background:none;color:var(--text);font:inherit;text-align:right;cursor:pointer}
.play-cta__text b{display:block;font-size:clamp(20px,1.7vw,27px);line-height:1;font-weight:500;letter-spacing:-.035em}
.play-cta__meta{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:10px;font:500 11px/1 var(--f-mono);letter-spacing:.14em;color:var(--text-2)}
.play-cta__runtime::before{content:"";display:inline-block;width:5px;height:5px;margin:0 9px 1px 0;border-radius:50%;background:var(--amber);vertical-align:middle}
.play-cta__disc{position:relative;flex:none;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:var(--amber);color:#16110a;
  box-shadow:0 18px 40px -12px rgba(255,186,3,.45);transition:transform .5s var(--ease),background .3s}
.play-cta__disc::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,186,3,.7);animation:ctaPulse 2.6s var(--ease) infinite}
.play-cta__icon{position:relative;width:30px;height:30px;margin-left:5px}
.play-cta__ring{position:absolute;inset:-9px;width:calc(100% + 18px);height:calc(100% + 18px);overflow:visible;animation:ctaSpin 14s linear infinite}
.play-cta__ring circle{fill:none;stroke:rgba(243,241,236,.5);stroke-width:.7;stroke-dasharray:.012 .02}
.play-cta__btn:hover .play-cta__disc{transform:scale(1.07);background:#ffc93d}
.play-cta__btn:focus-visible{outline:none}
.play-cta__btn:focus-visible .play-cta__disc{outline:2px solid var(--text);outline-offset:14px}
@keyframes ctaPulse{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(1.55);opacity:0}}
@keyframes ctaSpin{to{transform:rotate(360deg)}}

/* control dock */
.dock{position:fixed;z-index:125;right:var(--pad);bottom:max(18px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:8px;padding:6px 16px 6px 6px;border-radius:999px;
  background:rgba(14,14,13,.7);border:1px solid var(--line);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 22px 44px -22px rgba(0,0,0,.7);opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.dock.is-visible{opacity:1;transform:none;pointer-events:auto}
.dock.is-visible.is-dim{opacity:.32}
.dock.is-visible.is-dim:hover,.dock.is-visible:focus-within{opacity:1}
.dock__btn{position:relative;flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.07);color:var(--text);cursor:pointer;
  transition:background .3s,transform .35s var(--ease)}
.dock__btn:hover{background:rgba(255,255,255,.15)}
.dock__btn:active{transform:scale(.94)}
.dock__btn>svg{width:18px;height:18px}
.dock__play{width:52px;height:52px;background:var(--amber);color:#16110a}
.dock__play:hover{background:#ffc93d}
.dock__ring{position:absolute;inset:-5px;width:calc(100% + 10px)!important;height:calc(100% + 10px)!important;transform:rotate(-90deg);overflow:visible;pointer-events:none}
.dock__ring circle{fill:none;stroke-width:2}
.dock__ring-bg{stroke:rgba(255,186,3,.16)}
.dock__ring-fg{stroke:var(--amber);stroke-dasharray:1;stroke-dashoffset:1;stroke-linecap:round}
.dock__icon{position:absolute;width:21px!important;height:21px!important;opacity:0;transform:scale(.5);transition:opacity .25s,transform .4s var(--ease)}
.dock__icon--play{margin-left:3px}
.dock[data-state=idle] .dock__icon--play,.dock[data-state=paused] .dock__icon--play,.dock[data-state=playing] .dock__icon--pause,.dock[data-state=ended] .dock__icon--replay{opacity:1;transform:none}
.dock__time{margin:0 0 0 6px;font:500 11px/1 var(--f-mono);letter-spacing:.08em;color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.dock__cur{color:var(--text)}
.dock__sep{margin:0 6px;opacity:.6}
.dock__tip{position:absolute;bottom:calc(100% + 14px);left:50%;display:flex;align-items:center;gap:8px;white-space:nowrap;padding:7px 9px;border-radius:8px;
  background:rgba(10,10,9,.92);border:1px solid var(--line);font:500 10.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text);
  opacity:0;transform:translate(-50%,5px);pointer-events:none;transition:opacity .25s,transform .35s var(--ease)}
.dock__tip kbd{padding:3px 5px;font-size:9.5px}
.dock__btn:hover .dock__tip,.dock__btn:focus-visible .dock__tip{opacity:1;transform:translate(-50%,0)}
.dock__toast{position:absolute;right:0;bottom:calc(100% + 14px);margin:0;white-space:nowrap;padding:10px 13px;border-radius:10px;background:rgba(10,10,9,.92);border:1px solid var(--line);
  font-size:12.5px;letter-spacing:-.005em;color:var(--text);opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .35s,transform .45s var(--ease)}
.dock__toast.is-on{opacity:1;transform:none}
.dock:has(.dock__toast.is-on) .dock__tip{opacity:0!important}

/* keyboard play / pause feedback */
.flash{position:fixed;left:50%;top:50%;z-index:170;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;display:grid;place-items:center;
  background:rgba(10,10,9,.5);border:1px solid var(--line-2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--text);opacity:0;pointer-events:none}
.flash svg{position:absolute;width:32px;height:32px;opacity:0}
.flash[data-icon=play] .flash__play,.flash[data-icon=pause] .flash__pause{opacity:1}
.flash__play{margin-left:5px}

/* while the film plays and the mouse rests, the cursor gets out of the way */
html.is-idle,html.is-idle *{cursor:none!important}
html.is-idle .cursor{opacity:0!important;transition:opacity .4s}

@media (hover:none){
  .play-cta kbd,.dock__tip{display:none}
}
@media (max-width:820px){
  .play-cta{right:auto;left:var(--pad);bottom:calc(8vh + 24px)}
  .play-cta__btn{flex-direction:row-reverse;gap:16px;text-align:left}
  .play-cta__meta{justify-content:flex-start}
  .play-cta__disc{width:62px;height:62px}
  .play-cta__icon{width:24px;height:24px;margin-left:4px}
  .play-cta__ring{inset:-7px;width:calc(100% + 14px);height:calc(100% + 14px)}
  .dock{right:14px;bottom:max(14px,env(safe-area-inset-bottom));padding:5px}
  .dock__btn{width:40px;height:40px}
  .dock__play{width:46px;height:46px}
  .dock__time{display:none}
}
@media (prefers-reduced-motion:reduce){
  .play-cta__disc::before,.play-cta__ring{animation:none}
}
@media (hover:none){
  .dock.is-visible.is-dim{opacity:.62}
}
@media (max-width:820px){
  .letterbox--bottom>span:first-child{display:none}
  .letterbox--bottom{justify-content:flex-end}
}