/* ============================================================
   Buildgin
   Tokens, three canvases, one bezel. No gradients as decoration.
   ============================================================ */

@font-face{font-family:'Archivo';src:url('../fonts/archivo-latin.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;}

:root{
  /* canvases */
  --void:#0A0C10; --void-2:#14181F;
  --bone:#FAFAF8; --bone-2:#F0EEE7;
  --red:#E0131A;  --red-dim:#8C0C10;
  --ink-on-dark:#EDEBE4; --ink-on-light:#15171B;
  --ash-on-dark:#8A8F99; --ash-on-light:#5B5D63;
  --line-on-dark:rgba(237,235,228,.11);
  --line-on-light:rgba(21,23,27,.12);

  /* full bleed. sections touch the viewport edge; only the fixed chrome
     and the text columns carry an inset of their own. */
  --frame:0px;
  --frame-y:0px;
  --edge:clamp(20px,3.4vw,56px);
  --gate:100svh;

  --pad:clamp(20px,4vw,64px);
  --maxw:1440px;

  /* pinned section heights live here, never hardcoded in JS or a component */
  --h-losses:520vh;
  --h-sectors:300vh;
  --h-tiers:340vh;
  --h-assembly:420vh;
  --h-capabilities:300vh;
  --h-teardown:400vh;

  --ease:cubic-bezier(.22,1,.36,1);
  --t-micro:180ms;
  --t-reveal:700ms;

  --r-control:2px;
  --r-card:4px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

body{
  background:var(--void);
  color:var(--ink-on-dark);
  font-family:'Archivo',system-ui,-apple-system,sans-serif;
  font-size:1rem;font-weight:400;line-height:1.65;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
}
img,video,canvas,svg{display:block;max-width:100%}
button,input,select{font:inherit;color:inherit}
a{color:inherit}

/* ---------- canvas zones: each sets its own local tokens ---------- */
.zone{background:var(--bg);color:var(--fg)}
.zone-void{--bg:var(--void);--fg:var(--ink-on-dark);--mute:var(--ash-on-dark);
  --line:var(--line-on-dark);--surface:var(--void-2);--accent:var(--red)}
.zone-bone{--bg:var(--bone);--fg:var(--ink-on-light);--mute:var(--ash-on-light);
  --line:var(--line-on-light);--surface:var(--bone-2);--accent:var(--red)}
.zone-red{--bg:var(--red);--fg:#FFF4F2;--mute:rgba(255,244,242,.78);
  --line:rgba(255,255,255,.24);--surface:var(--red-dim);--accent:#FFF4F2}

/* ---------- the stage: every section sits inside the bezel ---------- */
.stage{padding:0}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.pad-y{padding-block:clamp(88px,13vh,168px)}
.wrap{padding-inline:max(var(--pad),var(--edge))}

/* ---------- type ---------- */
.mono{font-family:'Archivo',sans-serif;font-size:.75rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--mute);
  font-variant-numeric:tabular-nums}
.mono-sm{font-size:.6875rem}
.dsp{font-family:'Archivo',system-ui,sans-serif;font-weight:600;letter-spacing:-.032em;line-height:1}
.d-xl{font-size:clamp(3.2rem,7.6vw,7rem);line-height:.95}
.d-l{font-size:clamp(2.4rem,5vw,4.2rem);line-height:1.02;letter-spacing:-.032em}
.d-m{font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.15;letter-spacing:-.025em}
.d-s{font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1.2;letter-spacing:-.02em}
.lead{font-size:1.125rem;line-height:1.6;letter-spacing:-.014em;color:var(--mute);max-width:62ch}
.body{max-width:68ch;color:var(--mute);letter-spacing:-.011em}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
/* one family throughout, so every number lines up without a second face */
.readout .v,.tool .tout b,.glance b,.spiral+.odo,.odo{font-variant-numeric:tabular-nums}

/* explanatory sentences never go in mono. mono is for short labels only. */
.note{font-size:.875rem;line-height:1.6;letter-spacing:-.008em;color:var(--mute);
  max-width:72ch;text-transform:none}
.note a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.note a:hover{color:var(--fg)}
.note.tight{font-size:.8125rem}

.eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:clamp(24px,3vw,38px)}
.eyebrow::after{content:'';height:1px;flex:1;background:var(--line)}

/* ---------- controls. small chamfers, never pills ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;
  font-family:'Archivo',sans-serif;font-size:.75rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  padding:15px 24px;border-radius:var(--r-control);cursor:pointer;
  border:1px solid var(--red);background:var(--red);color:#FFF4F2;
  text-decoration:none;will-change:transform;
  transition:background var(--t-micro) var(--ease),border-color var(--t-micro) var(--ease),
             color var(--t-micro) var(--ease)}
.btn:hover{background:#F0242B;border-color:#F0242B}
.btn:active{background:var(--red-dim);border-color:var(--red-dim)}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--line)}
.btn.ghost:hover{background:transparent;border-color:var(--fg);color:var(--fg)}
.zone-red .btn{border-color:#fff;background:#FFF4F2;color:var(--red)}
.zone-red .btn:hover{background:#fff}
.btn svg{width:15px;height:15px;flex:none}

.tlink{display:inline-flex;align-items:center;gap:8px;color:var(--mute);
  text-decoration:none;font-size:.9375rem;
  border-bottom:1px solid var(--line);padding-bottom:2px;
  transition:color var(--t-micro) var(--ease),border-color var(--t-micro) var(--ease)}
.tlink:hover{color:var(--fg);border-color:var(--fg)}

:where(a,button,summary,input,[tabindex]):focus-visible{
  outline:2px solid var(--red);outline-offset:3px;border-radius:1px}
.zone-red :focus-visible{outline-color:#fff}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--bone);color:var(--ink-on-light);
  padding:12px 18px;border-radius:var(--r-control)}
.skip:focus{left:var(--edge);top:var(--edge)}

/* ---------- fixed chrome. insets to the same bezel line ---------- */
.topbar{position:fixed;inset:0 0 auto 0;padding-inline:var(--edge);z-index:70;
  display:flex;align-items:center;justify-content:space-between;
  height:74px;pointer-events:none;
  color:var(--ink-on-dark);
  transition:color .55s var(--ease)}
.topbar > *{pointer-events:auto}
html[data-chrome="light"] .topbar{color:var(--ink-on-light)}
html[data-chrome="red"] .topbar{color:#FFF4F2}

.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.brand img{width:27px;height:auto;flex:none}
html[data-chrome="red"] .brand img{filter:brightness(0) invert(1)}
.brand b{font-family:'Archivo',sans-serif;font-weight:700;font-size:.9375rem;letter-spacing:-.01em}

/* --------- the primary bar --------- */
.mainnav{display:flex;align-items:center;gap:clamp(14px,1.9vw,30px);flex:1;
  justify-content:center;min-width:0}
.mainnav a{position:relative;text-decoration:none;color:inherit;opacity:.72;padding-bottom:4px;
  white-space:nowrap;transition:opacity var(--t-micro) var(--ease)}
.mainnav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .24s var(--ease)}
.mainnav a:hover{opacity:1}
.mainnav a:hover::after,.mainnav a[aria-current="page"]::after{transform:scaleX(1)}
.mainnav a[aria-current="page"]{opacity:1}
html[data-chrome="red"] .mainnav a::after{background:#FFF4F2}

.topcta{display:flex;align-items:center;gap:16px;flex:none}
.navcta{text-decoration:none;color:inherit;border:1px solid currentColor;border-radius:var(--r-control);
  padding:9px 15px;opacity:.85;white-space:nowrap;
  transition:opacity var(--t-micro) var(--ease),background var(--t-micro) var(--ease),
             border-color var(--t-micro) var(--ease),color var(--t-micro) var(--ease)}
.navcta:hover{opacity:1;background:var(--red);border-color:var(--red);color:#FFF4F2}

.navtoggle{background:none;border:0;cursor:pointer;color:inherit;display:none;
  align-items:center;gap:10px;padding:6px 2px}
.navtoggle .bars{display:block;width:20px;height:9px;position:relative}
.navtoggle .bars i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;
  transition:transform var(--t-micro) var(--ease),opacity var(--t-micro) var(--ease)}
.navtoggle .bars i:first-child{top:0}
.navtoggle .bars i:last-child{bottom:0}
html.nav-open .navtoggle .bars i:first-child{transform:translateY(3.75px) rotate(45deg)}
html.nav-open .navtoggle .bars i:last-child{transform:translateY(-3.75px) rotate(-45deg)}

/* spiral: logo, progress meter, and a demonstration of the technique, at once */
.spiral{position:fixed;left:var(--edge);bottom:var(--edge);z-index:70;
  width:60px;height:60px;pointer-events:none;
  opacity:.92;mix-blend-mode:normal}
/* pinned stages reserve room at the lower left so nothing sits under the meter */
.spiral svg{width:100%;height:100%;overflow:visible}
.spiral .track{fill:none;stroke:rgba(237,235,228,.10);stroke-width:4;transition:stroke .55s var(--ease)}
.spiral .draw{fill:none;stroke:var(--red);stroke-width:4;stroke-linecap:round}
html[data-chrome="light"] .spiral .track{stroke:rgba(21,23,27,.13)}
html[data-chrome="red"] .spiral .track{stroke:rgba(255,255,255,.26)}
html[data-chrome="red"] .spiral .draw{stroke:#FFF4F2}
.odo{position:fixed;left:calc(var(--edge) + 74px);bottom:calc(var(--edge) + 16px);z-index:70;
  pointer-events:none;color:var(--ash-on-dark);transition:color .55s var(--ease)}
html[data-chrome="light"] .odo{color:var(--ash-on-light)}
html[data-chrome="red"] .odo{color:rgba(255,244,242,.8)}

/* ---------- full screen nav, thumbnail per section ---------- */
.navpanel{position:fixed;inset:0;z-index:65;background:var(--void);
  padding:96px var(--edge) var(--edge);
  opacity:0;visibility:hidden;transition:opacity .42s var(--ease),visibility .42s;
  overflow-y:auto}
html.nav-open .navpanel{opacity:1;visibility:visible}
.navgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;max-width:var(--maxw);margin-inline:auto}
.navgrid a{position:relative;text-decoration:none;color:var(--ink-on-dark);
  display:block;background:var(--void-2);overflow:hidden;border-radius:var(--r-card);
  opacity:0;transform:translateY(16px)}
html.nav-open .navgrid a{opacity:1;transform:none;
  transition:opacity .5s var(--ease) calc(var(--i) * 34ms),transform .5s var(--ease) calc(var(--i) * 34ms)}
.navgrid img{width:100%;aspect-ratio:16/10;object-fit:cover;opacity:.5;
  transition:opacity .3s var(--ease),transform .5s var(--ease)}
.navgrid a:hover img,.navgrid a:focus-visible img{opacity:.85;transform:scale(1.03)}
.navgrid .lbl{padding:14px 16px 18px;display:flex;gap:10px;align-items:baseline}
.navgrid .lbl span{color:var(--ash-on-dark)}
.navgrid .lbl b{font-family:'Archivo';font-weight:600;font-size:1rem;letter-spacing:-.015em}

/* ---------- one-shot reveal. not applied uniformly to everything ---------- */
[data-reveal]{opacity:0;transform:translateY(20px)}
[data-reveal].shown{opacity:1;transform:none;
  transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease)}
[data-reveal="1"].shown{transition-delay:70ms}
[data-reveal="2"].shown{transition-delay:140ms}

/* ---------- media plates ----------
   Every hydrated video starts transparent over its own poster and fades in
   once it is actually playing, so no plate ever flashes black. */
.plate{position:relative;overflow:hidden;border-radius:var(--r-card);background:var(--void)}
.plate video,.plate img{width:100%;height:100%;object-fit:cover}
[data-video] video{opacity:0;transition:opacity .8s var(--ease)}
[data-video] video.ready{opacity:1}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;height:var(--gate);min-height:560px;overflow:hidden;
  display:flex;align-items:flex-end}
.hero .bed{position:absolute;inset:0;z-index:0}
.hero .bed img,.hero .bed video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .bed video{transition:opacity 1.6s var(--ease)}
/* the crossfade partner is driven by the 12s cycle rather than by readiness */
.hero .bed[data-partner] video.ready{opacity:0}
.hero .bed[data-partner] video.on{opacity:1}
.hero .veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(10,12,16,.94) 4%,rgba(10,12,16,.30) 54%,rgba(10,12,16,.60) 100%)}
.hero .inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(48px,9vh,108px)}
.hero h1{margin:20px 0 0;max-width:15ch}
.hero .age{color:var(--red)}
.hero .lead{margin-top:22px}
.hero .act{display:flex;align-items:center;gap:clamp(20px,3vw,40px);flex-wrap:wrap;margin-top:clamp(28px,4vh,44px)}
.hero .scrollcue{position:absolute;right:0;bottom:clamp(40px,7vh,84px);z-index:2;
  writing-mode:vertical-rl;color:var(--ash-on-dark)}

/* =========================================================
   LOSSES — pinned, bone
   ========================================================= */
.losses{height:var(--h-losses);position:relative}
.pin{position:sticky;top:0;height:var(--gate);overflow:hidden;display:flex;align-items:center}
.losses .cols{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,80px);
  align-items:center;width:100%}
.lossline{display:flex;gap:20px;padding:clamp(9px,1.1vh,15px) 0;
  font-family:'Archivo',sans-serif;font-weight:500;letter-spacing:-.018em;
  font-size:clamp(1.02rem,1.55vw,1.42rem);line-height:1.28;
  color:var(--ash-on-light);opacity:.34;transform:translateX(-8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .5s var(--ease)}
.lossline .n{font-family:'Archivo',sans-serif;font-size:.6875rem;letter-spacing:.1em;
  padding-top:.62em;flex:none;color:inherit}
.lossline.on{opacity:1;transform:none;color:var(--ink-on-light)}
.lossline.on .n{color:var(--red)}

.evidence{position:relative;aspect-ratio:4/3;border-radius:var(--r-card);
  background:var(--bone-2);border:1px solid var(--line-on-light);overflow:hidden}
.ev{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease);
  padding:clamp(16px,2vw,26px);display:flex;flex-direction:column;gap:12px;
  font-size:.8125rem;line-height:1.5;color:var(--ash-on-light)}
.ev.on{opacity:1}
.ev .cap{font-family:'Archivo',sans-serif;font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ash-on-light)}
.ev .card{background:#fff;border:1px solid var(--line-on-light);border-radius:3px;padding:14px 16px;flex:1;
  display:flex;flex-direction:column;justify-content:center;gap:9px;min-height:0}

/* evidence built as real markup so it stays sharp and legible at any size */
.serp .u{color:#1a5f2a;font-size:.6875rem}
.serp .t{color:#1a3fa0;font-size:.95rem;font-family:'Archivo';font-weight:500;letter-spacing:-.01em}
.serp .d{font-size:.75rem;color:#4b4d52;line-height:1.45}
.serp .row+.row{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-on-light)}
.serp .row.you{opacity:.55}
.serp .tag{font-family:'Archivo',sans-serif;font-size:.5625rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--red)}

.bars{display:flex;flex-direction:column;gap:7px;width:100%}
.bar{display:grid;grid-template-columns:74px 1fr 58px;gap:10px;align-items:center;
  font-family:'Archivo',sans-serif;font-size:.625rem;letter-spacing:.06em;color:var(--ash-on-light)}
.bar .track{height:7px;background:var(--bone-2);border-radius:1px;overflow:hidden}
.bar .fill{height:100%;background:var(--red-dim);border-radius:1px}
.bar.hot .fill{background:var(--red)}
.bar .v{text-align:right;color:var(--ink-on-light)}

.mailfail{display:flex;flex-direction:column;gap:8px;font-family:'Archivo',sans-serif;
  font-size:.6875rem;line-height:1.6;color:var(--ash-on-light)}
.mailfail .err{color:var(--red)}

.telshot{display:flex;align-items:center;justify-content:center;gap:16px;height:100%}
.telshot .imgnum{font-family:'Archivo';font-weight:700;font-size:clamp(1.1rem,2.4vw,1.9rem);
  color:#2b2f36;letter-spacing:.01em;filter:blur(.25px);opacity:.75}
.telshot .stamp{font-family:'Archivo',sans-serif;font-size:.5625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--red);border:1px solid var(--red);
  border-radius:2px;padding:4px 7px;white-space:nowrap}

.pdfrow{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  font-family:'Archivo',sans-serif;font-size:.6875rem;color:var(--ash-on-light);
  padding:9px 0;border-bottom:1px solid var(--line-on-light)}
.pdfrow:last-child{border-bottom:0}
.pdfrow b{font-weight:500;color:var(--ink-on-light)}

.deadline{font-family:'Archivo';font-weight:600;font-size:clamp(1.4rem,3vw,2.2rem);
  letter-spacing:-.02em;color:var(--ink-on-light);text-align:center}
.deadline small{display:block;font-family:'Archivo',sans-serif;font-size:.625rem;
  font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-top:12px}

.turn{position:absolute;inset:0;z-index:4;background:var(--bone);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding-inline:var(--pad);opacity:0;pointer-events:none;transition:opacity .55s var(--ease)}
.turn.on{opacity:1}
.turn h2{max-width:18ch}

/* =========================================================
   ASSEMBLY
   The clip runs as an ordinary looping video. Scroll only moves the lines.
   ========================================================= */
.assembly{height:var(--h-assembly);position:relative}
.assembly .pin{background:var(--void)}
.asmbed{position:absolute;inset:0;z-index:0}
.asmbed img,.asmbed video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.assembly .lines{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(48px,9vh,110px);z-index:3;
  max-width:var(--maxw);margin-inline:auto;height:4.2em;padding-left:clamp(0px,7vw,104px)}
.assembly .lines h3{position:absolute;left:clamp(0px,7vw,104px);bottom:0;max-width:20ch;color:var(--ink-on-dark);
  opacity:0;transform:translateY(16px);
  text-shadow:0 2px 30px rgba(10,12,16,.75);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.assembly .lines h3.on{opacity:1;transform:none}

/* =========================================================
   CAPABILITIES — sticky media, desktop only
   ========================================================= */
.caps{position:relative}
.caps .cols{display:grid;grid-template-columns:55% 1fr;gap:clamp(32px,5vw,80px);align-items:start}
.caps .mediacol{position:sticky;top:0;height:var(--gate);display:flex;align-items:center}
.caps .stack{position:relative;width:100%;aspect-ratio:4/5;max-height:calc(var(--gate) - 40px);
  border-radius:var(--r-card);overflow:hidden;background:var(--void)}
.caps .stack .plate{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease)}
.caps .stack .plate.on{opacity:1}
.caps .block{min-height:var(--gate);display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(40px,7vh,90px)}
.caps .block h3{margin:16px 0 14px}
.caps .block .num{color:var(--red)}

/* mobile capability sequence: stacked, not a sticky column with sticky switched off */
.capseq{display:flex;flex-direction:column;gap:0}
.capseq article{padding-block:clamp(44px,7vh,72px);border-top:1px solid var(--line)}
.capseq article:first-child{border-top:0}
.capseq .plate{aspect-ratio:16/10;margin-bottom:22px}
.capseq h3{margin:14px 0 12px}

/* =========================================================
   TEARDOWN
   ========================================================= */
.teardown{height:var(--h-teardown);position:relative}
.teardown .pin{background:var(--void);flex-direction:column;justify-content:center;gap:20px;
  padding:clamp(20px,3vh,34px) var(--pad)}
.tdstage{position:relative;width:100%;max-width:var(--maxw);margin-inline:auto;flex:1;min-height:0;
  border:1px solid var(--line-on-dark);border-radius:var(--r-card);overflow:hidden;background:#fff}
.tdlayer{position:absolute;inset:0;overflow:hidden}
.tdlayer.after{z-index:2;clip-path:inset(0 calc(100% - var(--p,0) * 100%) 0 0);will-change:clip-path}
.tdseam{position:absolute;top:0;bottom:0;width:1px;background:var(--red);z-index:3;
  left:calc(var(--p,0) * 100%);opacity:0;transition:opacity .3s var(--ease)}
.tdstage.wiping .tdseam{opacity:1}
.tdcap{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  width:100%;max-width:var(--maxw);margin-inline:auto;flex-wrap:wrap}

/* the before layer is a real capture, anonymised at build time */
.tdshot{width:100%;height:100%;object-fit:cover;object-position:top center}

/* the rebuilt layer, drawn in the DOM so it stays sharp under the wipe
   and stays interactive once the seam has passed it */
.rebuilt{position:absolute;inset:0;background:#0B0E13;color:#E8E6E1;
  font-family:'Archivo',sans-serif;display:flex;flex-direction:column;overflow:hidden}
.rebuilt a,.rebuilt .rcta,.rebuilt .rlink,.rebuilt .rcard{cursor:pointer}

.rebuilt .rhead{display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:16px clamp(18px,2.2vw,34px);border-bottom:1px solid #1B222C;flex:none;
  background:rgba(11,14,19,.9);backdrop-filter:none}
.rebuilt .rlogo{display:flex;align-items:center;gap:10px;flex:none;
  font-family:'Archivo';font-weight:600;letter-spacing:-.022em;font-size:1rem}
.rebuilt .rlogo i{width:9px;height:9px;border-radius:50%;background:#E0131A;flex:none}
.rebuilt .rnav{display:flex;gap:clamp(12px,1.8vw,26px);color:#9299A3}
.rebuilt .rnav a{position:relative;padding-bottom:3px;text-decoration:none;
  transition:color var(--t-micro) var(--ease)}
.rebuilt .rnav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:#E0131A;transform:scaleX(0);transform-origin:left;
  transition:transform .22s var(--ease)}
.rebuilt .rnav a:hover{color:#EDEBE4}
.rebuilt .rnav a:hover::after{transform:scaleX(1)}
.rebuilt .rcta{flex:none;background:#E0131A;color:#FFF4F2;border-radius:2px;padding:8px 14px;
  transition:background var(--t-micro) var(--ease)}
.rebuilt .rcta:hover{background:#F0242B}

.rebuilt .rsplit{flex:1;min-height:0;display:grid;grid-template-columns:1.18fr .82fr}
.rebuilt .rshot{position:relative;overflow:hidden;border-right:1px solid #1B222C}
.rebuilt .rshot img{width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease)}
.rebuilt .rshot:hover img{transform:scale(1.04)}
.rebuilt .rtag{position:absolute;left:16px;bottom:16px;color:#EDEBE4;
  background:rgba(11,14,19,.78);border:1px solid rgba(237,235,228,.18);border-radius:2px;
  padding:8px 12px;font-size:.625rem;letter-spacing:.1em}
.rebuilt .rhero{padding:clamp(20px,3vw,42px);display:flex;flex-direction:column;
  justify-content:center;gap:14px;min-width:0}
.rebuilt .rhero .rk{color:#E0131A}
.rebuilt .rhero .rh{font-family:'Archivo';font-weight:600;letter-spacing:-.03em;
  font-size:clamp(1.15rem,2.2vw,2.05rem);line-height:1.06;max-width:19ch}
.rebuilt .rhero .rsub{font-size:.9375rem;line-height:1.6;letter-spacing:-.009em;
  color:#9299A3;max-width:36ch}
.rebuilt .rlink{display:inline-flex;align-items:center;gap:8px;color:#EDEBE4;margin-top:6px;
  border-bottom:1px solid #2A323E;padding-bottom:5px;align-self:flex-start;
  transition:border-color var(--t-micro) var(--ease),gap var(--t-micro) var(--ease)}
.rebuilt .rlink svg{width:14px;height:14px}
.rebuilt .rlink:hover{border-color:#E0131A;gap:13px}

.rebuilt .rcards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;flex:none;
  background:#1B222C;border-top:1px solid #1B222C}
.rebuilt .rcard{position:relative;background:#0B0E13;padding:16px clamp(16px,1.8vw,24px) 20px;
  transition:background var(--t-micro) var(--ease)}
.rebuilt .rcard:hover{background:#121822}
.rebuilt .rcard b{display:block;font-family:'Archivo',sans-serif;font-size:.625rem;
  letter-spacing:.1em;text-transform:uppercase;color:#E0131A;margin-bottom:9px;font-weight:500}
.rebuilt .rcard span{display:block;font-size:.875rem;letter-spacing:-.008em;
  color:#9299A3;line-height:1.6;max-width:32ch}
.rebuilt .rcard .arw{position:absolute;right:14px;bottom:14px;color:#E0131A;font-style:normal;
  opacity:0;transform:translateX(-6px);transition:opacity .2s var(--ease),transform .2s var(--ease)}
.rebuilt .rcard:hover .arw{opacity:1;transform:none}

.hot{position:absolute;z-index:5;width:26px;height:26px;padding:0;
  border-radius:50%;border:1px solid var(--red);background:var(--red);color:#fff;
  font-family:'Archivo',sans-serif;font-size:10px;font-weight:500;
  display:grid;place-items:center;cursor:pointer;
  opacity:0;transform:scale(.4);
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.hot.on{opacity:1;transform:none}
.hot .tip{position:absolute;left:34px;top:-8px;width:236px;text-align:left;
  background:var(--void);border:1px solid var(--line-on-dark);border-radius:3px;padding:12px 14px;
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity var(--t-micro) var(--ease),transform var(--t-micro) var(--ease)}
.hot.flip .tip{left:auto;right:34px}
.hot[aria-expanded="true"] .tip,.hot:hover .tip,.hot:focus-visible .tip{opacity:1;transform:none}
.hot .tip b{display:block;font-family:'Archivo';font-size:.8125rem;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--ink-on-dark);margin-bottom:5px;line-height:1.35}
.hot .tip span{display:block;font-family:'Archivo';font-size:.75rem;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--ash-on-dark);line-height:1.5}

/* mobile teardown: a stepped list of real defects, not a shrunk wipe */
.tdlist{display:flex;flex-direction:column}
.tdlist .item{display:grid;grid-template-columns:auto 1fr;gap:16px;
  padding-block:22px;border-top:1px solid var(--line)}
.tdlist .item:first-child{border-top:0}
/* ash rather than red: red at 11px on void lands at 3.99:1, under the AA floor */
.tdlist .k{font-family:'Archivo',sans-serif;font-size:.6875rem;letter-spacing:.1em;
  color:var(--mute);padding-top:.35em}
.tdlist b{display:block;font-family:'Archivo';font-weight:600;font-size:1rem;
  letter-spacing:-.015em;color:var(--fg);margin-bottom:5px}
.tdlist span{color:var(--mute);font-size:.9375rem;line-height:1.55}
.tdmobileframe{margin-bottom:28px;border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--line);aspect-ratio:4/3;position:relative;background:#fff}
.tdmobileframe .tdshot{position:absolute;inset:0}

/* =========================================================
   BREAK BAND
   ========================================================= */
.band{position:relative;overflow:hidden;background:var(--void)}
.band .bed{position:absolute;inset:0;z-index:0}
.band .bed img,.band .bed video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.band .veil{position:absolute;inset:0;z-index:1;background:rgba(10,12,16,.62)}
.band .inner{position:relative;z-index:2;padding-block:clamp(64px,11vh,124px)}
.band p{font-family:'Archivo';font-weight:600;letter-spacing:-.025em;
  font-size:clamp(1.3rem,2.6vw,2.15rem);line-height:1.2;max-width:24ch;color:var(--ink-on-dark)}
.band .src{margin-top:18px;color:var(--ash-on-dark)}
.band .src a{color:var(--ash-on-dark)}

/* =========================================================
   WHERE WE WORK
   A horizontal strip panned by vertical scroll. Pointing at one card
   dims its neighbours, so the cursor picks a sector out of the row.
   ========================================================= */
.sectorwrap{height:var(--h-sectors);position:relative}
.pinh{position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;gap:clamp(22px,4vh,48px)}
.sechead{flex:none;padding-top:clamp(60px,9vh,110px)}
.sechead h2{margin-top:14px;max-width:20ch}
.track{display:flex;gap:14px;padding-inline:var(--edge);will-change:transform}
.sector{flex:0 0 clamp(268px,25vw,392px);position:relative;
  background:var(--surface);border-radius:var(--r-card);overflow:hidden;
  display:flex;flex-direction:column;
  opacity:0;transform:translateY(26px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),
             filter .32s var(--ease),background var(--t-micro) var(--ease)}
.sectorwrap.in .sector{opacity:1;transform:none;transition-delay:calc(var(--i) * 70ms)}
.sector .art{aspect-ratio:16/10;background:var(--void);overflow:hidden}
.sector .art img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);transition:transform .55s var(--ease)}
.sector .meta{padding:clamp(16px,1.6vw,24px) clamp(16px,1.6vw,24px) clamp(20px,2vw,30px);
  display:flex;flex-direction:column;gap:10px;flex:1}
.sector h3{font-family:'Archivo';font-weight:600;letter-spacing:-.025em;
  font-size:clamp(1.02rem,1.35vw,1.28rem);line-height:1.16;color:var(--fg);margin-top:auto}
.sector .sn{color:var(--mute);opacity:.65}
.sector .chip{align-self:flex-start;margin-top:12px;
  border:1px solid var(--red);color:var(--red);border-radius:2px;padding:6px 11px;
  opacity:0;transform:translateY(6px);
  transition:opacity .26s var(--ease),transform .26s var(--ease)}
/* the pointer picks one out of the row */
.track:hover .sector{opacity:.34;filter:saturate(.15)}
.track .sector:hover{opacity:1;filter:none;background:var(--bone)}
.track .sector:hover .art img{transform:scale(1.07)}
.track .sector:hover .chip{opacity:1;transform:none}
.track .sector:focus-within{opacity:1;filter:none}
.track .sector:focus-within .chip{opacity:1;transform:none}

/* =========================================================
   SIX THINGS THAT CHANGE
   Two columns with a hard rule between them. The old behaviour is struck
   through on the left as the replacement pops in word by word on the right.
   ========================================================= */
.swap{list-style:none;margin-top:clamp(28px,4vw,52px)}
.swap li{display:grid;
  grid-template-columns:clamp(44px,4.4vw,64px) 1fr 1px 1.05fr;
  gap:clamp(14px,2.2vw,34px);align-items:center;
  padding-block:clamp(22px,2.8vw,34px);border-top:1px solid var(--line);
  transition:background .22s var(--ease)}
.swap li:last-child{border-bottom:1px solid var(--line)}
.swap li:hover{background:var(--surface)}
.swap li.head{padding-block:12px;border-top:0;align-items:end}
.swap li.head:hover{background:none}
.swap li.head .red{color:var(--red)}
.swap .rule{background:var(--line);align-self:stretch;min-height:100%}
.swap li.head .rule{background:none}

.swap .mk{display:grid;place-items:center;opacity:0;transform:scale(.8)}
.swap.in .mk{opacity:1;transform:none;
  transition:opacity .5s var(--ease) calc(var(--i) * 110ms),transform .5s var(--ease) calc(var(--i) * 110ms)}
.swap .mk img{width:clamp(34px,3.2vw,46px);height:auto}

.swap .was{font-size:.9375rem;line-height:1.45;color:var(--mute)}
.swap .was span{position:relative;display:inline}
.swap .was span::after{content:'';position:absolute;left:-2px;right:-2px;top:.62em;height:1.5px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease)}
.swap.in .was span::after{transform:scaleX(1);transition-delay:calc(var(--i) * 110ms + 120ms)}
.swap.in .was{opacity:.66;transition:opacity .5s var(--ease) calc(var(--i) * 110ms)}

.swap .now{font-family:'Archivo';font-weight:600;letter-spacing:-.025em;
  font-size:clamp(1.05rem,1.85vw,1.52rem);line-height:1.2;color:var(--fg);max-width:26ch}
/* each word pops into place rather than fading as a block */
.swap .now .w{display:inline-block;opacity:0;transform:translateY(9px) scale(.96)}
.swap.in .now .w{opacity:1;transform:none;
  transition:opacity .28s var(--ease),transform .34s cubic-bezier(.2,1.5,.4,1);
  transition-delay:calc(var(--i) * 110ms + 300ms + var(--w) * 40ms)}

/* =========================================================
   FAQ
   ========================================================= */
.faqwrap{max-width:940px;margin-inline:auto;text-align:center}
.faqwrap .eyebrow{justify-content:center}
.faqwrap .eyebrow::after,.faqwrap .eyebrow::before{content:'';height:1px;flex:1;background:var(--line)}
.faq{margin-top:clamp(30px,4.5vw,52px);text-align:left}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:clamp(24px,2.6vw,34px) 0;
  display:flex;justify-content:space-between;align-items:center;gap:28px;
  font-family:'Archivo';font-weight:600;font-size:clamp(1.1rem,1.65vw,1.45rem);
  letter-spacing:-.022em;line-height:1.25;transition:color var(--t-micro) var(--ease)}
.faq summary:hover{color:var(--red)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';flex:none;width:11px;height:11px;
  background:currentColor;opacity:.5;
  clip-path:polygon(45% 0,55% 0,55% 45%,100% 45%,100% 55%,55% 55%,55% 100%,45% 100%,45% 55%,0 55%,0 45%,45% 45%);
  transition:transform var(--t-micro) var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding-bottom:clamp(24px,2.6vw,32px);color:var(--mute);max-width:66ch;
  font-size:1rem;line-height:1.65}

/* =========================================================
   THREE WAYS IN
   The heading resolves, then leaves, and three plates fly in and fan out.
   Each card keeps its spec as a real definition list, so the data stays
   selectable and editable rather than becoming a picture of a table.
   ========================================================= */
.tierwrap{height:var(--h-tiers);position:relative}
.tierpin{flex-direction:column;justify-content:center;position:sticky;top:0;height:100svh;overflow:hidden}
.tierbed{position:absolute;inset:0;z-index:0}
.tierbed img,.tierbed video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tierveil{position:absolute;inset:0;z-index:1;background:rgba(10,12,16,.74)}
.tierhead,.fan{z-index:2}
.tierhead{position:absolute;left:0;right:0;text-align:center;padding-inline:var(--edge);
  will-change:transform,opacity}
.tierhead h2{margin-top:16px}
.fan{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.tier{position:absolute;width:clamp(250px,23vw,340px);min-height:clamp(330px,44vh,430px);
  background:var(--bone);color:var(--ink-on-light);border-radius:10px;
  padding:clamp(22px,2vw,30px);display:flex;flex-direction:column;gap:14px;
  pointer-events:auto;will-change:transform;
  box-shadow:0 18px 50px rgba(0,0,0,.45)}
.tier .tn{color:var(--red)}
.tier h3{color:var(--ink-on-light);margin-bottom:4px}
.tier dl{margin-top:auto;display:flex;flex-direction:column}
.tier dl div{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:11px 0;border-top:1px solid rgba(21,23,27,.12)}
.tier dt{font-family:'Archivo',sans-serif;font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ash-on-light);flex:none}
.tier dd{font-size:.8125rem;line-height:1.4;text-align:right;color:var(--ink-on-light)}

/* mobile: the same three cards, stacked and readable, no fan */
.tierlist{display:flex;flex-direction:column;gap:14px;margin-top:clamp(26px,4vw,40px)}
.tier.flat{position:static;width:auto;min-height:0;transform:none!important}

/* =========================================================
   MEASURE
   ========================================================= */
.readout{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:baseline;
  padding:clamp(20px,2.6vw,30px) 0;border-bottom:1px solid var(--line)}
/* the progress meter is fixed at the lower left, so the last rows keep clear of it */
#measure .wrap{padding-left:max(var(--pad),var(--edge),132px)}
.readout .k{color:var(--mute);max-width:38ch;line-height:1.45;align-self:center}
.readout .v{font-family:'Archivo',sans-serif;font-weight:600;
  font-size:clamp(1.7rem,3.6vw,2.8rem);letter-spacing:-.02em;color:var(--fg);
  font-variant-numeric:tabular-nums;flex:none;text-align:right;min-width:5ch;
  opacity:0;transform:translateY(14px)}
.measure-in .readout .v{opacity:1;transform:none;
  transition:opacity .6s var(--ease) calc(var(--r) * 110ms + 120ms),
             transform .6s var(--ease) calc(var(--r) * 110ms + 120ms)}
/* a hairline sweeps under each row as its figure lands */
.readout{position:relative}
.readout::after{content:'';position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--red)}
.measure-in .readout::after{width:100%;
  transition:width .8s var(--ease) calc(var(--r) * 110ms + 260ms)}
.readout .v.warn{color:var(--red)}
.readout{opacity:0;transform:translateY(12px)}
.measure-in .readout{opacity:1;transform:none;
  transition:opacity .55s var(--ease) calc(var(--r) * 110ms),transform .55s var(--ease) calc(var(--r) * 110ms)}
.lh{display:flex;align-items:center;gap:18px;margin-top:clamp(32px,5vh,56px);flex-wrap:wrap}
.lh .score{width:64px;height:64px;flex:none;position:relative;display:grid;place-items:center}
.lh .score svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.lh .score circle{fill:none;stroke-width:3}
.lh .score .bg{stroke:var(--line)}
.lh .score .fg{stroke:var(--red)}
.lh .score b{font-family:'Archivo',sans-serif;font-size:1.05rem;color:var(--fg)}

/* =========================================================
   CONTACT
   ========================================================= */
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:680px;
  margin-top:clamp(28px,4vw,44px)}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label{font-family:'Archivo',sans-serif;font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute)}
.field input{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-control);
  padding:14px 15px;font-size:.9375rem;color:var(--fg);
  transition:border-color var(--t-micro) var(--ease)}
.field input::placeholder{color:var(--mute);opacity:.75}
.field input:focus{outline:none;border-color:var(--red)}
.form .act{grid-column:1/-1;display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:8px}
.formnote{color:var(--mute);font-size:.8125rem}

/* =========================================================
   CLOSING BAND — the one time red is a surface
   ========================================================= */
.closing{padding:clamp(96px,17vh,190px) var(--pad);
  display:flex;flex-direction:column;align-items:center;gap:clamp(30px,4vh,44px);text-align:center}
.closing h2{max-width:17ch}

/* =========================================================
   FOOTER
   ========================================================= */
.footplate{position:relative;overflow:hidden;margin-bottom:clamp(40px,6vh,72px)}
.footplate .bed{position:absolute;inset:0;z-index:0}
.footplate .bed img,.footplate .bed video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.footplate .veil{position:absolute;inset:0;z-index:1;background:rgba(10,12,16,.7)}
.footplate .inner{position:relative;z-index:2;padding:clamp(48px,8vh,90px) 0;text-align:center}
.footplate p{font-family:'Archivo';font-weight:600;letter-spacing:-.025em;
  font-size:clamp(1.2rem,2.2vw,1.9rem);line-height:1.25;color:var(--ink-on-dark)}
footer .base{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-bottom:clamp(56px,9vh,110px);color:var(--ash-on-dark)}
footer .base nav{display:flex;gap:22px;flex-wrap:wrap}
footer .base a{text-decoration:none}
footer .base a:hover{color:var(--ink-on-dark)}

/* =========================================================
   VIEW SWITCH — separate desktop and mobile trees, one hidden by breakpoint
   ========================================================= */
[data-view="mobile"]{display:none}
@media (max-width:1080px){
  .mainnav{display:none}
  .navtoggle{display:flex}
}
@media (max-width:560px){
  .navcta{display:none}
}
@media (max-width:900px){
  [data-view="desktop"]{display:none!important}
  [data-view="mobile"]{display:block}
  :root{--h-losses:420vh}
  .spiral{width:56px;height:56px}
  .odo{left:calc(var(--edge) + 68px);bottom:calc(var(--edge) + 14px);font-size:.6875rem}
  .navgrid{grid-template-columns:repeat(2,1fr)}
  .hero .scrollcue{display:none}
  .sectorwrap{height:auto}
  .pinh{position:relative;height:auto;padding-block:clamp(72px,11vh,120px)}
  .sechead{padding-top:0}
  .track{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;
    transform:none!important;-webkit-overflow-scrolling:touch}
  .track .sector{scroll-snap-align:start;flex-basis:74vw}
  .track:hover .sector{opacity:1;filter:none}
  .form{grid-template-columns:1fr}
  .swap li{grid-template-columns:38px 1fr;gap:14px 16px}
  .swap li.head{display:none}
  .swap .rule{display:none}
  .swap .mk{grid-row:span 2;align-self:start;padding-top:4px}
  .swap .was{grid-column:2}
  .swap .now{grid-column:2;margin-top:8px}
  .rebuilt .rcards{grid-template-columns:1fr}
}
@media (max-width:560px){
  .track .sector{flex-basis:82vw}
  .readout{flex-direction:column;align-items:flex-start;gap:6px}
}

/* =========================================================
   REDUCED MOTION — every scrub falls back to a still
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
  .lossline{opacity:1;transform:none;color:var(--ink-on-light)}
  .lossline .n{color:var(--red)}
  .assembly{height:auto}
  .assembly .pin{position:relative;height:auto;min-height:70svh}
  .assembly .lines{position:static;height:auto;display:flex;flex-direction:column;gap:18px;
    padding-block:36px}
  .assembly .lines h3{position:static;left:auto;opacity:1;transform:none}
  .losses,.teardown{height:auto}
  .losses .pin,.teardown .pin{position:relative;height:auto;padding-block:64px}
  .turn{position:relative;opacity:1;padding-block:72px}
  .hot{opacity:1;transform:none}
  .tdlayer.after{clip-path:none;position:relative}
  .swap .now,.swap .now .w,.swap .mk{opacity:1;transform:none}
  .swap .was span::after{transform:scaleX(1)}
  .swap .was{opacity:.72}
  .readout{opacity:1;transform:none}
  /* the sector strip becomes a plain swipe row */
  .sectorwrap{height:auto}
  .pinh{position:relative;height:auto;padding-block:72px}
  .sector{opacity:1;transform:none}
  .track{overflow-x:auto;transform:none!important}
  .track:hover .sector{opacity:1;filter:none}
  /* the tier fan becomes three stacked cards */
  .tierwrap{height:auto}
  .tierpin{position:relative;height:auto;padding-block:72px;display:block}
  .tierhead{position:relative;transform:none!important;opacity:1!important;text-align:left}
  .fan{position:relative;inset:auto;display:flex;flex-direction:column;gap:14px;
    margin-top:34px;pointer-events:auto}
  .tier{position:relative;width:auto;min-height:0;transform:none!important;opacity:1!important}
}

/* =========================================================
   WRITING AND LEARNING
   ========================================================= */
.secrow{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.cardrow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px);
  margin-top:clamp(32px,4.5vw,56px)}
.wcard{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--surface);border-radius:var(--r-card);overflow:hidden;
  opacity:0;transform:translateY(24px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),background var(--t-micro) var(--ease)}
.cardrow.in .wcard{opacity:1;transform:none;transition-delay:calc(var(--i) * 90ms)}
.wcard .wart{display:block;aspect-ratio:16/10;background:var(--void);overflow:hidden}
.wcard .wart img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.wcard:hover .wart img{transform:scale(1.05)}
.wcard .wmeta{display:flex;flex-direction:column;gap:10px;
  padding:clamp(18px,1.8vw,26px) clamp(18px,1.8vw,26px) clamp(24px,2.2vw,32px)}
.wcard b{font-family:'Archivo';font-weight:600;letter-spacing:-.022em;
  font-size:clamp(1.02rem,1.4vw,1.28rem);line-height:1.2;color:var(--fg)}
.wcard .wex{font-size:.875rem;line-height:1.55;color:var(--mute);max-width:38ch}
.wcard:hover{background:var(--bone)}
.zone-void .wcard:hover{background:#161B24}

/* =========================================================
   TOOLS
   ========================================================= */
.toolgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,26px);
  margin-top:clamp(32px,4.5vw,52px)}
.tool{background:var(--surface);border-radius:var(--r-card);
  padding:clamp(22px,2.4vw,34px);display:flex;flex-direction:column;gap:18px}
.tool .tlabel{color:var(--red)}
.tool .tin{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tool label{font-family:'Archivo',sans-serif;font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);flex:none}
.tool input{flex:1;min-width:120px;background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:9px 2px;font-family:'Archivo',sans-serif;font-size:1.15rem;color:var(--fg);
  transition:border-color var(--t-micro) var(--ease)}
.tool input:focus{outline:none;border-color:var(--red)}
.tool .unit{color:var(--mute);flex:none}
.tool .tout{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-top:16px;border-top:1px solid var(--line);margin-top:auto}
.tool .tk{color:var(--mute);font-size:.6875rem;letter-spacing:.1em}
.tool .tout b{font-family:'Archivo',sans-serif;font-weight:400;
  font-size:clamp(1.7rem,3.4vw,2.6rem);color:var(--fg);letter-spacing:.01em}
.tool.warn .tout b{color:var(--red)}
.tool .tnote{font-size:.8125rem;line-height:1.6;letter-spacing:-.008em;
  color:var(--mute);opacity:.8;text-transform:none;font-family:'Archivo',sans-serif}

/* =========================================================
   WHO BUILDS IT
   ========================================================= */
.about{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(28px,4.5vw,72px);align-items:start}
.aportrait{position:relative;border-radius:var(--r-card);overflow:hidden;background:var(--surface);
  aspect-ratio:3/4}
.aportrait img{width:100%;height:100%;object-fit:cover;object-position:center 20%;
  filter:grayscale(1) contrast(1.04) brightness(.97)}
.aportrait.noimg picture,.aportrait.noimg img{display:none}
.aportrait.noimg::after{content:'Drop founder.jpg into assets/media';position:absolute;inset:0;
  display:grid;place-items:center;text-align:center;padding:24px;
  font-family:'Archivo',sans-serif;font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute)}
.acap{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;color:#EDEBE4;
  background:linear-gradient(to top,rgba(10,12,16,.86),rgba(10,12,16,0))}
.abody h2{margin-bottom:22px;max-width:20ch}
.abody .body{margin-bottom:16px}
.afacts{list-style:none;margin-top:clamp(24px,3vw,36px);border-top:1px solid var(--line)}
.afacts li{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--line)}
.afacts li .mono{color:var(--red)}
.afacts li span:last-child{font-size:.9375rem;line-height:1.5;color:var(--mute)}

/* =========================================================
   MADE IN INDIA
   ========================================================= */
.madein{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;
  padding-block:clamp(40px,6vh,72px);border-bottom:1px solid var(--line-on-dark);
  margin-bottom:clamp(32px,5vh,56px)}
.madein .mono{color:var(--ink-on-dark);font-size:.8125rem;letter-spacing:.22em}
.madein .mi-sub{color:var(--ash-on-dark);font-size:.9375rem;max-width:44ch}

@media (max-width:900px){
  .cardrow,.toolgrid{grid-template-columns:1fr}
  .about{grid-template-columns:1fr;gap:28px}
  .aportrait{aspect-ratio:4/3;max-height:60svh}
  .secrow{align-items:flex-start;flex-direction:column;gap:18px}
}

/* =========================================================
   DIRECT CONTACT
   Hidden entirely until a real number is configured, so nothing
   fabricated ever ships.
   ========================================================= */
.direct{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(24px,3vw,34px)}
.direct:empty{display:none}
.direct a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  border:1px solid var(--line);border-radius:var(--r-control);padding:13px 18px;
  font-family:'Archivo',sans-serif;font-size:.75rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg);
  transition:border-color var(--t-micro) var(--ease),background var(--t-micro) var(--ease)}
.direct a:hover{border-color:var(--red);background:var(--surface)}
.direct svg{width:16px;height:16px;flex:none}

/* home page copy additions */
.sectorline{font-size:.875rem;line-height:1.55;color:var(--mute);margin-top:10px;max-width:34ch}
.asmlabel{position:absolute;left:var(--pad);top:clamp(96px,14vh,150px);z-index:3;
  padding-left:clamp(0px,7vw,104px);color:var(--ash-on-dark)}
.turn > div{max-width:60ch}
.caps .block .body + .body{margin-top:14px}

/* the full lockup, once, above the footer rule */
.footbrand{display:flex;justify-content:center;padding-block:clamp(44px,7vh,80px) 0}
.footbrand img{width:clamp(120px,13vw,168px);height:auto;opacity:.9}