/* ============================================================
   COLD START - white room (Rev C)
   Near-white canvas after Apple, sapphire after Atlas. The accent
   fills pills and nothing else. Elevation is a hairline plus one
   surface step - never a shadow. Two radii. Sentence case display.
   ============================================================ */
:root{
  /* ---- type ---- */
  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono','Courier New',monospace;

  /* ---- ground: sunk -> canvas -> surface -> raised ---- */
  --s-0:#E8E8EC;   /* recessed band, footer            */
  --s-1:#F5F5F7;   /* page canvas                      */
  --s-2:#FCFCFD;   /* card and panel surface           */
  --s-3:#FFFFFF;   /* raised: popover, console         */
  --s-1-fade:rgba(245,245,247,0);   /* canvas at zero alpha, so gradients never tint grey */
  --line:#DEDEE3;
  --line-2:#C2C2CA;

  /* ---- text ---- */
  --t-0:#0A0A0B;   /* display peak                     */
  --t-1:#1D1D1F;   /* primary text                     */
  --t-2:#56565B;   /* secondary body                   */
  --t-3:#78787E;   /* annotation, placeholder          */

  /* ---- the one accent: pill fill and active state only ---- */
  --accent:#1B3BE0;
  --accent-hi:#152FB4;
  --on-accent:#FFFFFF;

  /* ---- reserved signal ---- */
  --safe:#157F43; --watch:#A66A00; --fault:#C42A0C;
  --flame:#E2620B;

  /* ---- geometry: two radii ---- */
  --r1:8px;
  --r2:8px;
  --r3:999px;

  /* ---- measure and rhythm ---- */
  --measure:680px;
  --max:1200px;
  --gutter:clamp(20px,5vw,48px);
  --gap:clamp(64px,9vw,120px);
  --sp1:4px;  --sp2:8px;  --sp3:12px; --sp4:16px; --sp5:24px;
  --sp6:32px; --sp7:48px; --sp8:64px; --sp9:96px; --sp10:128px;

  /* ---- motion ---- */
  --e-enter:cubic-bezier(.16,1,.3,1);
  --e-move:cubic-bezier(.65,0,.35,1);
  --e-micro:cubic-bezier(.4,0,.2,1);
  --e-pop:cubic-bezier(.2,1.4,.3,1);
  --d1:120ms; --d2:240ms; --d3:420ms; --d4:720ms; --d5:1100ms;
  --stagger:60ms;

  /* ---- aliases so existing component rules keep resolving ---- */
  --bg:var(--s-1); --card:var(--s-2); --tint:var(--s-3);
  --text:var(--t-1); --dim:var(--t-2); --alert:var(--fault);
  --hiviz:var(--accent); --on-lime:var(--on-accent); --on-lime-dim:rgba(255,255,255,.72);
  --rim:rgba(255,255,255,.9); --rim-soft:rgba(255,255,255,.45);
  --glass:color-mix(in srgb, var(--s-1) 66%, transparent);
  --glass-thin:color-mix(in srgb, var(--s-1) 40%, transparent);
  --vig:color-mix(in srgb, var(--s-1) 92%, transparent);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

/* The platform scrollbar is chrome the design does not ask for, and on Windows
   it arrives with stepper arrows that belong to no part of this system.
   Scrolling itself is untouched — wheel, trackpad, keys, touch and the
   scroll-linked panel maths all behave exactly as before; only the indicator
   goes. Applied to the project views too, which scroll independently. */
html,body,.pview,.drive-track{scrollbar-width:none;-ms-overflow-style:none;}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.pview::-webkit-scrollbar,
.drive-track::-webkit-scrollbar{width:0;height:0;display:none;}
body{background:var(--bg);color:var(--text);font-family:var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased;transition:background var(--d3),color var(--d3);}
body.locked{overflow:hidden;height:100vh;}
::selection{background:var(--hiviz);color:var(--on-lime);}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);}
/* keyword highlights are colour, and the accent's only appearance in this
   section. they warm from ink to sapphire as the line reveals. */
.hl{font-style:normal;color:var(--t-0);transition:color 700ms var(--e-micro) 240ms;}
.rv.in .hl,.in .hl{color:var(--accent);}

/* ---------------- LOADER ---------------- */
#loader{position:fixed;inset:0;z-index:9999;background:var(--s-1);color:var(--t-1);display:flex;flex-direction:column;justify-content:flex-end;padding:32px;transition:transform var(--d5) var(--e-move);}
#loader.done{transform:translateY(-101%);}
.load-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;}
.load-word{font-family:var(--display);font-size:clamp(48px,13vw,190px);line-height:.82;letter-spacing:-.02em;}
.load-word em{font-style:normal;color:var(--hiviz);}
.load-num{font-family:var(--mono);font-size:clamp(28px,6vw,74px);color:var(--hiviz);line-height:1;}
.load-bar{height:2px;background:var(--line);margin-top:26px;overflow:hidden;}
.load-bar i{display:block;height:100%;width:100%;background:var(--hiviz);
  transform:scaleX(0);transform-origin:left center;will-change:transform;}
.load-meta{display:flex;justify-content:space-between;margin-top:14px;}
#loader .eyebrow{color:var(--t-3);}
/* once READY locks on it has the screen to itself: the lockup, counter, bar
   and status line fade out so nothing sits under the word */
#loader.lock .load-row,#loader.lock .load-bar,#loader.lock .load-meta{opacity:0;pointer-events:none;
  transition:opacity var(--d2) ease;}

/* ---- mecha boot: checks tick off, then READY locks on ---- */
.boot{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(26px,5vh,48px);
  pointer-events:none;opacity:0;transition:opacity var(--d2) ease;}
.boot.on{opacity:1;}

.boot-ticks{list-style:none;display:flex;flex-direction:column;gap:11px;
  font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--t-3);}
.boot-ticks li{display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(7px);
  transition:opacity var(--d2) ease,transform var(--d2) ease;}
.boot-ticks li.in{opacity:1;transform:none;}
.boot-ticks b{color:var(--accent);opacity:0;transform:scale(.4);transition:opacity var(--d2) ease,transform var(--d2) var(--e-pop);}
.boot-ticks li.in b{opacity:1;transform:none;}
/* fade the boot log back once READY takes over */
.boot.lock .boot-ticks{opacity:.4;transition:opacity var(--d3) ease;}

.boot-ready{display:flex;flex-direction:column;align-items:center;gap:16px;}
.boot-line{display:flex;align-items:stretch;gap:clamp(16px,3vw,46px);}
.boot-br{width:20px;opacity:0;
  transition:opacity var(--d3) var(--e-enter),transform var(--d3) var(--e-enter);}
.boot-br.l{border-left:2px solid var(--accent);border-top:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:translateX(-26px);}
.boot-br.r{border-right:2px solid var(--accent);border-top:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:translateX(26px);}
.boot.lock .boot-br{opacity:1;transform:none;}

.boot-word{font-family:var(--display);font-size:clamp(64px,16vw,190px);line-height:.9;letter-spacing:.14em;
  color:var(--accent);padding-left:.14em;opacity:0;transform:scale(.94);
  transition:opacity var(--d3) ease,transform var(--d3) var(--e-enter);}
.boot.lock .boot-word{opacity:1;transform:none;animation:bootpulse 1.15s ease-in-out var(--d3) infinite;}

.boot-sub{font-family:var(--mono);font-size:clamp(10px,1vw,13px);letter-spacing:.5em;text-transform:uppercase;color:var(--t-3);
  padding-left:.5em;opacity:0;transition:opacity var(--d3) ease var(--d1);}
.boot.lock .boot-sub{opacity:1;animation:bootsub 1.15s ease-in-out var(--d3) infinite;}

@keyframes bootpulse{
  0%,100%{opacity:1;}
  50%{opacity:.55;}
}
@keyframes bootsub{0%,100%{opacity:.85;}50%{opacity:.3;}}

/* ---------------- NAV (glass) ---------------- */
.nav{position:fixed;top:13px;left:14px;right:14px;z-index:400;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none;}
/* each bar is its own pane of glass */
.pane{position:relative;isolation:isolate;border-radius:var(--r3);pointer-events:auto;
  background:var(--glass-thin);
  backdrop-filter:blur(18px) saturate(210%) contrast(1.02);
  -webkit-backdrop-filter:blur(18px) saturate(210%) contrast(1.02);
  border:1px solid var(--rim-soft);
  /* elevation is the inset rim only — no outer drop anywhere in the system */
  box-shadow:
    inset 0 1px 0 var(--rim),
    inset 0 -1px 1px var(--rim-soft),
    inset 0 0 26px -12px var(--rim-soft);
  transition:background var(--d3),box-shadow var(--d3);}
/* specular sheen — light catches the top edge and glances off the base */
.pane::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:linear-gradient(178deg,var(--rim) 0%,transparent 26%,transparent 76%,var(--rim-soft) 100%);
  opacity:.34;}
.pane>*{position:relative;}
body.menu-open .pane{box-shadow:none;}
.brand{display:flex;align-items:center;gap:11px;padding:8px 22px 8px 16px;}
.brand img{display:block;width:auto;}
.brand .mark{height:var(--gutter);}
.brand .wordmark{height:15px;}
.nav-right{display:flex;align-items:center;gap:16px;padding:7px 18px 7px 7px;}
.nav-cta{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:9px 16px;border-radius:var(--r3);background:var(--hiviz);color:var(--on-lime);transition:var(--d2);}
.nav-cta:hover{background:var(--text);color:var(--bg);}
.burger{width:34px;height:16px;position:relative;background:none;border:0;cursor:pointer;}
.burger span{position:absolute;left:0;right:0;height:2px;background:var(--text);transition:var(--d2) var(--e-move);}
.burger span:first-child{top:0;}
.burger span:last-child{bottom:0;}
body.menu-open .burger span:first-child{top:7px;transform:rotate(45deg);}
body.menu-open .burger span:last-child{bottom:7px;transform:rotate(-45deg);}

/* ---------------- MENU (hi-viz overlay, constant) ---------------- */
.menu{position:fixed;inset:0;z-index:350;background:var(--s-2);clip-path:inset(0 0 100% 0);transition:clip-path var(--d4) var(--e-move);display:grid;grid-template-columns:1.1fr .9fr;}
body.menu-open .menu{clip-path:inset(0 0 0 0);}
.menu-left{padding:110px 40px 40px;display:flex;flex-direction:column;justify-content:space-between;}
.menu-links a{display:block;font-family:var(--display);font-size:clamp(38px,7vw,86px);line-height:1.02;letter-spacing:-.01em;color:var(--t-1);transition:var(--d2);}
.menu-links a:hover{color:transparent;-webkit-text-stroke:2px var(--t-1);transform:translateX(14px);}
.menu-links a small{font-family:var(--mono);font-size:11px;letter-spacing:.2em;vertical-align:super;color:var(--t-3);margin-left:10px;-webkit-text-stroke:0;}
.menu .eyebrow{color:var(--t-3);}
.menu-foot{display:flex;gap:26px;flex-wrap:wrap;align-items:center;}
.menu-foot a{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--t-2);}
.menu-foot a:hover{color:var(--t-1);}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;background:var(--line);}
.menu-tile{position:relative;overflow:hidden;background:var(--card);}
.menu-tile svg{position:absolute;inset:0;width:100%;height:100%;}
.menu-tile span{position:absolute;left:16px;bottom:14px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);}

/* ---------------- HERO (Cold Start) ---------------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;overflow:hidden;
  padding:clamp(96px,14vh,150px) var(--gutter) clamp(88px,12vh,124px);}
/* the hero stacks: video, then the live model, then the vignette, then type */
.hero-media{position:absolute;inset:0;overflow:hidden;background:var(--s-1);}
.hero-media video{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(calc(1 + .08 * var(--exit,0)));will-change:transform;}
/* the wash: the clip becomes texture on the white ground, not a literal scene.
   without it the dark wireframe disappears over anything mid-tone. */
/* the disc lives here, inside the backdrop layer, so the boiler draws on top of
   it. put this on .hero-vig instead and it paints straight over the object. */
.hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    /* an ellipse, not a circle: the headline block is far wider than it is tall */
    radial-gradient(ellipse 58% 30% at 50% 38%,
      var(--s-1) 0%,
      var(--s-1) 40%,
      color-mix(in srgb, var(--s-1) 56%, transparent) 70%,
      var(--s-1-fade) 100%),
    linear-gradient(to bottom,
      var(--s-1) 0%, var(--s-1-fade) 15%,
      var(--s-1-fade) 70%, var(--s-1) 98%);}

#scene{position:absolute;inset:0;z-index:1;
  transform:scale(calc(1 - .1 * var(--exit,0)));opacity:calc(1 - .8 * var(--exit,0));will-change:transform,opacity;}
/* the object dissolves into the void instead of stopping at an edge */
.hero-vig{position:absolute;inset:0;pointer-events:none;
  /* edges only: the centre must stay clear or it covers the render */
  background:linear-gradient(to bottom,
    var(--s-1) 0%, var(--s-1-fade) 13%,
    var(--s-1-fade) 76%, var(--s-1) 99%);}

.hero-inner{transform:translate3d(0,calc(-38px * var(--exit,0)),0);opacity:calc(1 - 1.5 * var(--exit,0));}
.hero-inner{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:clamp(28px,6vh,60px);
  flex:1;width:100%;text-align:center;pointer-events:none;}
.hero-inner>*{pointer-events:auto;}

/* ============ BRAND SEQUENCE ============
   zoom -> the mark arrives
   flip -> one turn
   fly  -> it travels to the nav lockup, shrinks to its size and hands over
   break-> the line and the three applications arrive
   The fly distance is measured at runtime and written to --fly-x/y/s. */
.brand-stage{position:absolute;inset:0;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;}

/* the wordmark is set, not shown as an image, so it can be black and animate on its own */
/* the lockup, set to the wordmark: MATRIX in the deep navy at full weight,
   APEX lighter in the mid blue. Both values sampled from the brand PNG. */
.brand-name{margin-top:clamp(14px,2.4vh,26px);
  display:flex;align-items:baseline;gap:.26em;
  font-family:var(--body);font-size:clamp(21px,2.7vw,34px);
  letter-spacing:.012em;text-transform:uppercase;
  opacity:0;transform:translate3d(0,12px,0);
  transition:opacity 480ms ease,transform 620ms var(--e-enter);}
.brand-name b{color:#081979;font-weight:700;}
.brand-name span{color:#476CCB;font-weight:500;}
.hero.seq-flip .brand-name{opacity:1;transform:none;}
/* it leaves before the mark does, so the two do not travel together */
.hero.seq-fly .brand-name{opacity:0;transform:translate3d(0,-10px,0);
  transition:opacity 300ms ease,transform 420ms ease;}
.brand-scale{width:clamp(104px,13vw,182px);
  transform:scale(.22);opacity:0;
  transition:transform 900ms var(--e-enter),opacity 600ms ease;}
.brand-spin{transform-style:preserve-3d;
  transition:transform 820ms cubic-bezier(.55,0,.2,1);}
.brand-spin img{display:block;width:100%;height:auto;}
.nav .brand .mark{image-rendering:auto;}

.hero.seq-zoom .brand-scale{transform:scale(1);opacity:1;}
.hero.seq-flip .brand-spin {transform:rotateY(360deg);}

/* travel to the nav mark, then vanish just as it lands on it */
.hero.seq-fly .brand-scale{
  transform:translate3d(var(--fly-x,0px),var(--fly-y,0px),0) scale(var(--fly-s,.1));
  opacity:0;
  transition:transform 880ms cubic-bezier(.6,.02,.24,1),
             opacity 260ms ease 640ms;}

/* the real nav lockup holds back until the flying mark reaches it.
   default is visible, so a script failure leaves the logo on screen. */
body.seq-running .nav .brand{opacity:0;}
.nav .brand{transition:opacity 420ms ease;}

/* the flash fires with the turn */
.brand-flash{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 50%,
    var(--s-3) 0%, color-mix(in srgb,var(--accent) 26%,transparent) 34%, transparent 62%);}
.hero.seq-flip .brand-flash{animation:brandflash 820ms ease-out both;}
@keyframes brandflash{0%{opacity:0}46%{opacity:.9}100%{opacity:0}}

/* ---- masked reveal: each line rises out of its own edge ---- */
.rv-line{display:block;overflow:hidden;
  /* descenders would be clipped by the mask, so the box is grown and pulled back */
  padding-bottom:.14em;margin-bottom:-.14em;}
.rv-line>span{display:block;transform:translate3d(0,115%,0);
  transition:transform 880ms var(--e-enter);}
.hero.seq-title .rv-line>span{transform:none;}
.hero.seq-title .hero-title .rv-line:nth-child(2)>span{transition-delay:110ms;}
.hero.seq-title .hero-note>span{transition-delay:260ms;}

.hero-top{display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2vh,20px);
  width:100%;max-width:var(--max);}
.hero-title{display:flex;flex-direction:column;align-items:center;
  font-family:var(--display);font-weight:300;color:var(--t-0);
  font-size:clamp(40px,min(9.2vw,13.5vh),116px);line-height:1.02;letter-spacing:-.042em;}

.hero-note{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-3);}
.hero-note b{color:var(--t-2);font-weight:400;font-variant-numeric:tabular-nums;}

/* ============ THE THREE APPLICATIONS ============ */
/* every gap equal, edges included: the grid spans the hero content box and
   its column gap is the same token as the hero's horizontal padding */
.apps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);width:100%;
  max-width:none;text-align:left;}
.app{position:relative;display:flex;flex-direction:column;gap:12px;
  padding:clamp(24px,3vh,36px) clamp(22px,2vw,28px) clamp(22px,2.6vh,30px);
  min-height:clamp(190px,25vh,250px);
  border:1px solid var(--line);border-radius:var(--r2);
  /* opaque on purpose: any translucency over the playing backdrop makes the
     card appear to fade in and out as the footage brightens */
  background:var(--s-3);
  transition:border-color var(--d2) var(--e-micro),transform var(--d2) var(--e-enter);}
.app:hover{border-color:var(--line-2);transform:translateY(-3px);}
.app-no{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--t-3);}
.app-name{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.6vw,32px);
  line-height:1.06;letter-spacing:-.026em;color:var(--t-0);}
.app-desc{color:var(--t-2);font-size:15px;line-height:1.55;margin-bottom:auto;}
/* platform glyphs, used by the availability cards */
.app-plat{display:flex;gap:10px;align-items:center;margin-top:6px;}
.app-plat i{display:grid;place-items:center;width:20px;height:20px;color:var(--t-3);
  transition:color var(--d1) var(--e-micro);}
.app-plat i svg{width:100%;height:100%;display:block;}
.avail-card:hover .app-plat i{color:var(--t-2);}
.app-go{margin-top:6px;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);}
.app-go i{width:20px;height:1px;background:var(--accent);transition:width var(--d2) var(--e-micro);}
.app:hover .app-go i{width:34px;}

/* the applications wait their turn, then rise one after another */
.apps{opacity:0;pointer-events:none;}
.hero.seq-apps .apps{opacity:1;pointer-events:auto;}
.hero.seq-apps .app{animation:appin 820ms var(--e-enter) both;}
.hero.seq-apps .app:nth-child(2){animation-delay:120ms;}
.hero.seq-apps .app:nth-child(3){animation-delay:240ms;}
@keyframes appin{from{opacity:0;transform:translate3d(0,46px,0);}
                 to{opacity:1;transform:none;}}

@media (max-width:820px){
  .apps{grid-template-columns:1fr;max-width:420px;gap:10px;}
  .app{padding:17px 18px;}
}
@media (prefers-reduced-motion:reduce){
  .brand-scale,.brand-spin,.hero-top,.apps{transition:none!important;}
  .hero.seq-apps .app{animation:none!important;}
  .rv-line>span{transform:none!important;}
  .brand-flash{display:none;}
}

/* ---------------- PILL - the only button in the system ---------------- */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:var(--r3);font-family:var(--body);font-size:15px;font-weight:500;line-height:1;
  padding:14px 26px;border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:background var(--d1) var(--e-micro),border-color var(--d1) var(--e-micro),color var(--d1) var(--e-micro);}
.pill.fill{background:var(--accent);color:var(--on-accent);
  box-shadow:0 6px 24px -8px rgba(27,59,224,.55);}
.pill.fill:hover{background:var(--accent-hi);}
.pill.ghost{background:transparent;color:var(--t-1);border-color:var(--line-2);}
.pill.ghost:hover{border-color:var(--t-2);}


/* ---------------- SCROLL CUE ---------------- */
.cue{position:absolute;left:50%;bottom:clamp(24px,4vh,38px);transform:translateX(-50%);
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);background:transparent;
  color:var(--t-2);cursor:pointer;display:grid;place-items:center;opacity:0;pointer-events:none;
  transition:opacity var(--d3) var(--e-micro),border-color var(--d1) var(--e-micro),color var(--d1) var(--e-micro);z-index:5;}
.cue svg{width:15px;height:15px;}
.cue.show{opacity:1;pointer-events:auto;}
.cue:hover{border-color:var(--t-1);color:var(--t-1);}

/* ---------------- HORIZONTAL SCROLL (about / what we do) ---------------- */
/* The outer block is tall; the pin sticks for its whole length and the track
   slides left across it. Travel is (panels - 1) x 100vw, so the maths holds
   whatever gets added to the track later. */
.hscroll{position:relative;height:240vh;}
.hscroll-pin{position:sticky;top:0;height:100svh;overflow:hidden;}
.hscroll-track{display:flex;height:100%;width:200vw;will-change:transform;}
.hpanel{flex:0 0 100vw;width:100vw;height:100%;display:flex;align-items:center;overflow:hidden;}
.hpanel>.vm,.hpanel>.manifesto{min-height:0;height:auto;width:100%;}

/* progress, since the page scrollbar is hidden */
.hscroll-rail{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(18px,3vh,30px);
  height:2px;border-radius:var(--r3);background:var(--line);overflow:hidden;}
.hscroll-rail i{display:block;height:100%;width:100%;background:var(--accent);border-radius:var(--r3);
  transform:scaleX(0);transform-origin:left center;will-change:transform;}

/* touch and reduced motion get the plain stack: a pinned sideways scroll is
   hostile on a phone and a vestibular risk regardless of device */
@media (max-width:900px), (prefers-reduced-motion:reduce){
  .hscroll{height:auto;}
  .hscroll-pin{position:static;height:auto;overflow:visible;}
  .hscroll-track{display:block;width:auto;transform:none !important;}
  .hpanel{width:auto;flex:none;height:auto;display:block;}
  .hscroll-rail{display:none;}
}

/* ---------------- VISION / MISSION ---------------- */
.vm{position:relative;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(76px,10vh,112px) var(--gutter) clamp(52px,7vh,80px);max-width:var(--max);margin:0 auto;}

/* the mark, held right back and drifting against the scroll */
.vm-mark{position:absolute;right:-8%;top:50%;width:min(52vw,640px);z-index:0;pointer-events:none;
  transform:translate3d(0,calc(-50% + 70px * var(--vm,0)),0);will-change:transform;}
.vm-mark img{display:block;width:100%;height:auto;opacity:.10;}
.vm>*:not(.vm-mark){position:relative;z-index:1;}

/* the section opens with people and the intro side by side, so it does not
   start as an unbroken wall of display type */
.vm-open{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(24px,4vw,56px);align-items:center;margin-bottom:clamp(20px,3vh,34px);}
.vm-lead{font-size:clamp(15px,1.5vw,18px);line-height:1.6;color:var(--t-2);}
.vm-photo{margin:0;display:flex;flex-direction:column;gap:10px;}
/* 3:2 from a 4:3 original, sat low: the source has a lot of empty ceiling */
.vm-photo img{display:block;width:100%;height:auto;aspect-ratio:16/9;
  object-fit:cover;object-position:center 56%;
  border:1px solid var(--line);border-radius:var(--r2);}
.vm-photo figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--t-3);}
.vm .eyebrow{margin-bottom:clamp(14px,2vh,22px);}
/* side by side and smaller, so Purpose fits a single screen */
.vm-rows{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.vm-row{display:flex;flex-direction:column;gap:clamp(8px,1.2vh,14px);background:var(--s-1);
  padding:clamp(20px,3vh,34px) clamp(18px,2.2vw,32px);}

.vm-label{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--t-3);}
.vm-label b{display:block;font-family:var(--display);font-size:clamp(18px,2vw,24px);letter-spacing:-.01em;color:var(--t-1);font-weight:300;margin-top:3px;}
.vm-row p{color:var(--t-0);font-family:var(--display);font-size:clamp(19px,2.3vw,31px);line-height:1.18;letter-spacing:-.02em;font-weight:300;}
/* at a glance: mono facts, a different texture from the display type above */
.glance{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-top:0;}
.glance>div{background:var(--s-1);padding:clamp(13px,1.8vh,18px) 16px;display:flex;flex-direction:column;gap:6px;}
.glance dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--t-3);}
.glance dd{margin:0;font-size:14px;line-height:1.3;color:var(--t-1);}

.pillars.four{grid-template-columns:repeat(4,1fr);}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(16px,2.4vh,26px);border-top:0;}
.pillar{background:var(--card);padding:clamp(14px,2vh,20px) 18px;}
.pillar b{display:block;font-family:var(--display);font-size:19px;font-weight:300;}
.pillar b i{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--accent);margin-right:8px;vertical-align:middle;}
.pillar p{margin-top:6px;color:var(--dim);font-size:13px;line-height:1.45;}

/* ---------------- STRIP (caution tape, constant) ---------------- */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:var(--s-2);}
.strip-track{display:flex;gap:44px;padding:13px 0;white-space:nowrap;animation:slide 34s linear infinite;font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--t-2);}
.strip-track b{color:var(--t-2);font-weight:400;}
@keyframes slide{to{transform:translateX(-50%);}}

/* ---------------- MANIFESTO ---------------- */
.manifesto{padding:clamp(40px,7vh,90px) var(--gutter);max-width:var(--max);margin:0 auto;}
.manifesto p{color:var(--t-0);font-family:var(--display);font-size:clamp(30px,5.4vw,82px);line-height:1.06;letter-spacing:-.015em;font-weight:300;}
.manifesto p i{font-style:normal;color:var(--dim);}
.manifesto .eyebrow{margin-bottom:26px;}

/* ---------------- DEPLOYMENT REEL (stacking panels) ---------------- */
.reel{position:relative;}
.reel-head{max-width:var(--max);margin:0 auto;padding:var(--gap) var(--gutter) clamp(28px,4vw,52px);
  display:flex;flex-direction:column;gap:14px;}
.reel-head h2{font-family:var(--display);font-weight:300;color:var(--t-0);
  font-size:clamp(32px,5.6vw,74px);line-height:1;letter-spacing:-.036em;max-width:14ch;}

/* The slot is taller than the viewport, so the panel pins and HOLDS STILL
   while you read it, then releases. Shorten the slot to speed the reel up. */
.panel-slot{position:relative;height:180svh;}
.panel{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center;
  transform:scale(calc(1 - .05 * var(--p,0)));transform-origin:50% 42%;
  will-change:transform;}
/* a framed screenshot occupies the upper half, so its copy stays low and smaller */
.panel.has-shot{align-items:flex-end;}
.panel.has-shot h2{font-size:clamp(28px,4.4vw,54px);}
.panel.has-shot p{font-size:clamp(15px,1.5vw,17px);}

.panel-media{position:absolute;inset:0;z-index:0;
  transform:translate3d(0,calc(-7% * var(--p,0)),0) scale(calc(1.06 - .06 * var(--q,0)));
  will-change:transform;}
.panel-media canvas,.panel-media img{width:100%;height:100%;object-fit:cover;display:block;}
.panel-media .gv,.panel-media .bv{position:absolute;inset:0;}

/* the outgoing panel sinks toward the sunk tone as the next covers it */
.panel-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--s-0);opacity:calc(.6 * var(--p,0));}
/* and copy always has ground to sit on, whatever the media behind it */
.panel::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(115% 78% at 50% 50%,
      color-mix(in srgb,var(--s-1) 58%,transparent) 0%,
      color-mix(in srgb,var(--s-1) 34%,transparent) 46%,
      var(--s-1-fade) 78%),
    linear-gradient(to bottom,
      var(--s-1) 0%, var(--s-1-fade) 13%,
      var(--s-1-fade) 82%, var(--s-1) 100%);}

.panel-body{position:relative;z-index:3;width:100%;padding:0 var(--gutter);}
.panel.has-shot .panel-body{padding-bottom:clamp(56px,9vh,104px);}
.panel-inner{max-width:var(--measure);margin:0 auto;display:flex;flex-direction:column;gap:clamp(12px,1.6vh,20px);
  opacity:calc(1 - 1.35 * var(--p,0));
  transform:translate3d(0,calc(46px * (1 - var(--q,0))),0);
  will-change:transform,opacity;}
.panel-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.panel-no{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--t-3);
  font-variant-numeric:tabular-nums;}
.panel-tag{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--t-2);border:1px solid var(--line);border-radius:var(--r3);padding:5px 12px;
  background:color-mix(in srgb,var(--s-1) 70%,transparent);}
.panel h2{font-family:var(--display);font-weight:300;color:var(--t-0);
  font-size:clamp(34px,6.6vw,88px);line-height:.98;letter-spacing:-.038em;max-width:15ch;text-wrap:balance;}
.panel-meta-line{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--t-3);margin-top:4px;}
.panel p{color:var(--t-2);font-size:clamp(16px,1.7vw,19px);line-height:1.6;max-width:54ch;}

/* video and photo backdrops fill the well the same way the canvas does */
.panel-media video{width:100%;height:100%;object-fit:cover;display:block;}

/* a screenshot floats over the backdrop in a screen frame, parallaxing
   slightly faster than it, so the panel reads as having depth */
.panel-object{position:absolute;left:50%;top:clamp(70px,10vh,110px);z-index:2;
  width:min(860px,84vw);
  /* capped so the headline underneath always has room; without this the frame
     and the copy overlap on any viewport shorter than about 800px */
  max-height:42vh;pointer-events:none;
  transform:translate3d(-50%,calc(54px * (1 - var(--q,0)) - 34px * var(--p,0)),0)
            scale(calc(1 - .045 * var(--p,0)));
  opacity:calc(1 - 1.2 * var(--p,0));
  will-change:transform,opacity;}
.device{position:relative;border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;
  background:var(--s-3);margin:0;pointer-events:auto;
  max-height:42vh;display:flex;flex-direction:column;}
.device-bar{display:flex;align-items:center;gap:7px;padding:11px 15px;
  border-bottom:1px solid var(--line);background:var(--s-2);}
.device-bar i{width:8px;height:8px;border-radius:50%;background:var(--line-2);flex:none;}
.device-label{margin-left:9px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--t-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.device-screen{display:block;background:var(--s-3);flex:1;min-height:0;overflow:hidden;}
/* anchored to the top: the header and the first fields are the part worth seeing */
.device-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;}

/* on a short viewport the frame and the copy would collide */
@media (max-height:760px){
  .panel-object{width:min(700px,80vw);top:clamp(72px,10vh,104px);}
}

/* position in the sequence */
.reel-rail{position:fixed;right:max(14px,calc(var(--gutter) - 10px));top:50%;transform:translateY(-50%);
  z-index:60;display:flex;flex-direction:column;gap:11px;
  opacity:0;pointer-events:none;transition:opacity var(--d3) var(--e-micro);}
body.in-reel .reel-rail{opacity:1;pointer-events:auto;}
.rail-dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--line-2);transition:background var(--d1) var(--e-micro),transform var(--d2) var(--e-enter);}
.rail-dot:hover{background:var(--t-3);}
.rail-dot.on{background:var(--accent);transform:scale(1.6);}
.rail-dot:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}

/* the live model panel keeps its readout */
.ghud{position:absolute;inset:0;pointer-events:none;z-index:3;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--t-3);}
.ghud .b{color:var(--t-1);}
.ghud .tl{position:absolute;top:14px;left:16px;line-height:1.8;}
/* boiler panel: telemetry, firing rate and the alarm ride with the model */
.ghud .readout{position:absolute;left:16px;right:16px;bottom:14px;
  display:flex;justify-content:space-between;gap:12px;pointer-events:none;}
.ghud .readout div{display:flex;flex-direction:column;align-items:flex-start;gap:3px;}
.ghud .readout span{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--t-3);}
.ghud .readout b{font-size:14px;font-weight:400;color:var(--t-1);font-variant-numeric:tabular-nums;}
.ghud .readout .live{color:var(--safe);}
.ghud .readout .watch{color:var(--watch);}
.ghud .readout .breach{color:var(--fault);}
/* ---- split panel: copy on the left, media card on the right ---- */
.panel.split{
  --arrow-size:clamp(40px,3.4vw,52px);
  --gap-out:clamp(32px,4.5vw,88px);          /* clear space between copy and arrow */
  /* the column yields enough width for a lane on each side, so the gap below is
     always real; capping at 94vw instead left no room and pinned them to the text */
  --split-w:min(1180px, calc(100vw - 2*(var(--gap-out) + var(--arrow-size) + 14px)));}
.panel.split .panel-inner{max-width:var(--split-w);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(24px,4vw,64px);align-items:center;}
.panel.split .panel-copy{display:flex;flex-direction:column;gap:clamp(12px,1.6vh,20px);min-width:0;}
.panel.split h2{font-size:clamp(30px,4.4vw,62px);}

.panel-card{position:relative;aspect-ratio:16/10;min-width:0;
  border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;
  background:var(--s-3);}
.panel-card .view{position:absolute;inset:0;opacity:0;
  transition:opacity var(--d4) var(--e-micro);}
/* contain, not cover: these are interfaces — cropping removes the sidebar
   and the right-hand column, which is where the information is */
.panel-card img.view{width:100%;height:100%;object-fit:contain;object-position:center;
  background:var(--s-3);}
[data-view="0"] .panel-card .view[data-view="0"],
[data-view="1"] .panel-card .view[data-view="1"],
[data-view="2"] .panel-card .view[data-view="2"],
[data-view="3"] .panel-card .view[data-view="3"]{opacity:1;}
/* boiler telemetry belongs to the model, not to a screenshot of an app */
.panel-card .ghud{transition:opacity var(--d3) var(--e-micro);}
[data-view]:not([data-view="0"]) .panel-card .ghud{opacity:0;}

@media (max-width:900px){
  .panel.split .panel-inner{grid-template-columns:1fr;gap:20px;}
  .panel.split .panel-card{order:-1;}
}

/* the label stays with the copy; the controls sit at the panel edges */
.view-switch{display:inline-flex;align-items:center;margin-bottom:4px;align-self:flex-start;
  border:1px solid var(--line);border-radius:var(--r3);padding:6px 14px;background:var(--s-2);}
.view-name{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--t-2);min-width:10ch;text-align:center;}

/* one at each edge, vertically centred on the panel */
.view-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:var(--arrow-size,44px);height:var(--arrow-size,44px);
  display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line);border-radius:50%;background:var(--s-2);color:var(--t-2);
  transition:border-color var(--d1) var(--e-micro),color var(--d1) var(--e-micro),
             background var(--d1) var(--e-micro),transform var(--d2) var(--e-enter);}
.view-arrow svg{width:17px;height:17px;}
.view-arrow.prev{left:calc(50% - var(--split-w)/2 - var(--gap-out) - var(--arrow-size));}
.view-arrow.next{right:calc(50% - var(--split-w)/2 - var(--gap-out) - var(--arrow-size));}
.view-arrow:hover{border-color:var(--line-2);color:var(--t-1);background:var(--s-3);
  transform:translateY(-50%) scale(1.07);}
.view-arrow:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* on a phone the card stacks on top, so the pair rides beside it rather than
   over the copy. never hidden: it is the only way to reach the second view. */
@media (max-width:900px){
  .view-arrow{width:38px;height:38px;top:26%;}
  .view-arrow svg{width:15px;height:15px;}
  .view-arrow.prev{left:8px;}
  .view-arrow.next{right:8px;}
}

/* ---- back out of a project view ---- */
.pv-back{position:fixed;left:var(--gutter);top:clamp(78px,10vh,104px);z-index:20;
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 12px;
  border:1px solid var(--line);border-radius:var(--r3);cursor:pointer;
  background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--t-2);
  transition:border-color var(--d1) var(--e-micro),color var(--d1) var(--e-micro);}
.pv-back svg{width:14px;height:14px;}
.pv-back:hover{border-color:var(--line-2);color:var(--t-1);}
.pv-back:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.ghud .live,.ghud .alert{position:absolute;display:flex;align-items:center;gap:8px;
  border-radius:var(--r3);padding:6px 13px;background:color-mix(in srgb,var(--s-1) 74%,transparent);
  text-transform:uppercase;letter-spacing:.16em;}
.ghud .live{top:clamp(78px,11vh,116px);right:var(--gutter);color:var(--t-2);border:1px solid var(--line);}
.ghud .live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--safe);
  animation:blink 2s ease-in-out infinite;}
.ghud .alert{top:calc(clamp(78px,11vh,116px) + 40px);right:var(--gutter);color:var(--t-3);
  border:1px solid var(--line);transition:color var(--d2),border-color var(--d2);}
.ghud .alert::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.ghud .alert.on{color:var(--fault);border-color:color-mix(in srgb,var(--fault) 42%,transparent);}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.ghud .live::before{animation:none;}}

/* ---------------- AVAILABILITY ---------------- */
.avail{max-width:var(--max);margin:0 auto;
  padding:clamp(46px,7vh,88px) var(--gutter) clamp(14px,2vh,22px);
  display:flex;flex-direction:column;gap:clamp(16px,2.6vh,26px);}
.avail-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);}
.avail-card{display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--r2);
  transition:border-color var(--d2) var(--e-micro),transform var(--d2) var(--e-enter);}
.avail-card:hover{border-color:var(--line-2);transform:translateY(-2px);}
/* The monogram sits underneath; the logo covers it when the file exists.
   A missing file removes its own <img>, so the card degrades to the initials
   rather than to a broken-image icon. */
/* ---- media card: image well on top, text beneath ---- */
.avail-card{overflow:hidden;padding:0;background:var(--s-3);}
.avail-media{aspect-ratio:16/11;background:var(--s-1);border-bottom:1px solid var(--line);
  display:grid;place-items:center;overflow:hidden;
  padding:clamp(20px,3.4vw,44px);}
.avail-body{display:flex;flex-direction:column;gap:7px;
  padding:clamp(16px,2.4vh,22px) clamp(16px,1.8vw,22px) clamp(16px,2.2vh,20px);}

/* The whole lockup, wordmark included — shown complete rather than clipped to
   the symbol. The name therefore appears twice, in the artwork and again as the
   heading, which is the normal shape for a product card. */
.avail-mark{position:relative;display:block;width:100%;height:100%;}
.avail-mark img{width:100%;height:100%;object-fit:contain;object-position:center;}

/* no artwork yet: the initials stand in, sized to the well rather than to a chip */
.avail-mark.empty{width:auto;aspect-ratio:1/1;height:100%;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:var(--r2);background:var(--s-2);}
.avail-mark.empty::before{content:attr(data-mono);font-family:var(--mono);
  font-size:clamp(15px,1.6vw,19px);letter-spacing:.14em;color:var(--t-3);}
.avail-mark.empty img{display:none;}


.avail-card h3{font-family:var(--display);font-weight:400;color:var(--t-0);
  font-size:clamp(18px,2vw,24px);line-height:1.1;letter-spacing:-.022em;}
.avail-card p{color:var(--t-2);font-size:14px;line-height:1.5;}

/* the values block shares .vm with the About-us panel, which needs its own
   generous padding — so this one is trimmed by id rather than by class */
#onsite{padding-top:clamp(18px,2.6vh,30px);padding-bottom:clamp(36px,5vh,64px);}

/* ---------------- WHERE IT RUNS ---------------- */
/* Stands in for the logo wall a site like this would normally carry. Sectors and
   geography are verifiable; client names are not ours to print yet. */
.runs{max-width:var(--max);margin:0 auto;padding:0 var(--gutter) clamp(14px,2vh,22px);
  display:flex;flex-direction:column;gap:clamp(14px,2.4vh,22px);}
.runs-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.runs-list li{background:var(--s-1);padding:clamp(16px,2.6vh,24px) 6px;
  font-family:var(--display);font-weight:300;color:var(--t-1);
  font-size:clamp(15px,1.7vw,21px);line-height:1.2;letter-spacing:-.015em;text-align:center;}

/* ---------------- SPACER ---------------- */
/* breathing room between the note and the door panels, in place of the
   pull-quote that used to sit here */
.gap{height:0;}

/* ---------------- DOORS ---------------- */
.doors{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);}
.door{position:relative;padding:clamp(60px,9vw,130px) 32px;min-height:74vh;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;border-right:1px solid var(--line);}
.door:last-child{border-right:0;}
.door .bg{position:absolute;inset:0;opacity:.42;transition:var(--d3);}
.door:hover .bg{opacity:.82;transform:scale(1.04);}
.door h2{font-family:var(--display);font-size:clamp(46px,9vw,140px);line-height:.84;position:relative;font-weight:300;}
.door h2 span{display:block;}
.door:hover h2 span:last-child{color:var(--accent);}
.door .body{position:relative;max-width:34ch;color:var(--dim);font-size:15px;line-height:1.55;margin-top:auto;}
.door .body b{color:var(--text);font-weight:600;}
.door .go{position:relative;margin-top:22px;display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;}
.door .go i{width:26px;height:1px;background:var(--accent);transition:var(--d2);}
.door:hover .go i{width:52px;}

.index-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:40px;}
.index-head h2{font-family:var(--display);font-size:clamp(38px,7vw,104px);line-height:.86;font-weight:300;}
.index-head h2 span{color:var(--accent);}
.index-head p{max-width:38ch;color:var(--dim);font-size:15px;line-height:1.55;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2px;background:var(--line);border:1px solid var(--line);}
.mod{background:var(--card);padding:20px 18px 16px;position:relative;transition:background var(--d2);}
.mod:hover{background:var(--tint);}
.mod .art{position:relative;aspect-ratio:1/1;margin-bottom:14px;}
.mod .art svg{position:absolute;inset:0;width:100%;height:100%;transition:opacity var(--d2),transform var(--d3);}
.mod .art .on{opacity:0;}
.mod:hover .art .off{opacity:0;}
.mod:hover .art .on{opacity:1;transform:scale(1.05);}
.mod h4{font-family:var(--display);font-size:17px;font-weight:300;letter-spacing:.01em;}
.mod .k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-top:3px;}
.index-cta{margin-top:36px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;}
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--hiviz);color:var(--on-lime);font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:15px 26px;border-radius:var(--r3);transition:var(--d2);}
.btn:hover{background:var(--text);color:var(--bg);}

/* ---------------- SOCIAL ---------------- */
.social{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(46px,6vw,80px) var(--gutter) clamp(34px,4.5vw,58px);overflow:hidden;}
.social-head{text-align:center;margin-bottom:clamp(20px,3vw,36px);}
.social-head h3{font-family:var(--display);font-size:clamp(26px,4vw,52px);line-height:.92;
  font-weight:300;margin-top:8px;}
.social-head h3 span{color:var(--accent);}

/* the lane the balls roll along */
.lane{position:relative;height:clamp(150px,17vw,224px);max-width:1100px;margin:0 auto;}
.lane::after{content:"";position:absolute;left:0;right:0;bottom:clamp(44px,5vw,58px);height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 12%,var(--line) 88%,transparent);}

.orb{--size:clamp(84px,10.5vw,132px);--travel:66vw;--turns:2;
  position:absolute;bottom:clamp(44px,5vw,58px);width:var(--size);height:var(--size);
  margin-left:calc(var(--size)/-2);text-decoration:none;
  transform:translateX(calc(var(--travel)*var(--dir)));}
.orb.yt{left:calc(50% - clamp(58px,7vw,96px));--dir:-1;}
.orb.ig{left:calc(50% + clamp(58px,7vw,96px));--dir:1;}

.orb.yt .sphere{background:radial-gradient(circle at 34% 28%, #FF4A3D, #E8330F 46%, #9E1B08 100%);}
.orb.ig .sphere{background:radial-gradient(circle at 30% 24%, #FDCB5C, #E1306C 46%, #6A2CB5 100%);}
.orb .sphere{position:absolute;inset:0;border-radius:50%;overflow:hidden;
  box-shadow:0 18px 26px -14px rgba(8,12,20,.5), 0 3px 8px -3px rgba(8,12,20,.3);}
/* the painted surface turns; the lighting on top of it does not */
.orb .spin{position:absolute;inset:0;display:grid;place-items:center;
  transform:rotate(calc(var(--turns) * 360deg * var(--dir)));}
.orb .spin svg{width:56%;height:56%;display:block;}
.orb .shade{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 32% 26%, rgba(255,255,255,.55), rgba(255,255,255,.12) 34%, transparent 56%),
             radial-gradient(circle at 72% 82%, rgba(0,0,0,.42), transparent 58%);
  box-shadow:inset -10px -12px 26px rgba(0,0,0,.34), inset 7px 7px 16px rgba(255,255,255,.14);}
.orb .cast{position:absolute;left:8%;right:8%;bottom:-9px;height:11px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%, rgba(8,12,20,.34), transparent 70%);}
.orb .name{position:absolute;left:50%;top:calc(100% + 16px);transform:translateX(-50%);
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);white-space:nowrap;opacity:0;transition:opacity var(--d3) ease var(--d1);}
.orb:hover .name{color:var(--text);}

/* roll in, once, when the section first comes into view */
.social.rolled .orb{transform:translateX(0);
  transition:transform var(--d5) var(--e-move);}
.social.rolled .orb .spin{transform:rotate(0deg);
  transition:transform var(--d5) var(--e-move);}
.social.rolled .orb .name{opacity:1;transition-delay:1.5s;}

@media (prefers-reduced-motion:reduce){
  .orb,.orb .spin{transform:none !important;transition:none !important;}
  .orb .name{opacity:1;transition:none;}
}

/* ---------------- PARTNERS ---------------- */
.partners{padding:clamp(70px,10vw,130px) 0;}
.partners .eyebrow{padding:0 var(--gutter);margin-bottom:26px;}
.pmarq{overflow:hidden;}
.pmarq-track{display:flex;gap:56px;white-space:nowrap;animation:slide 40s linear infinite;align-items:center;}
.pmarq-track span{font-family:var(--display);font-size:clamp(22px,3vw,40px);color:color-mix(in srgb,var(--text) 25%,transparent);transition:var(--d2);letter-spacing:.02em;}
.pmarq-track span:hover{color:var(--accent);}

/* ---------------- FOOTER ---------------- */
footer{background:var(--s-0);border-top:1px solid var(--line);padding:60px var(--gutter) var(--gutter);position:relative;overflow:hidden;}
.f-state{color:var(--t-0);font-family:var(--display);font-size:clamp(38px,9.5vw,150px);line-height:.92;letter-spacing:-.02em;}
.f-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:34px;margin:56px 0 40px;}
.f-cols h5{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:14px;}
.f-cols a,.f-cols p{display:block;font-size:14px;line-height:2;color:var(--text);}
.f-cols a:hover{color:var(--accent);}
.f-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);}
.f-base a:hover{color:var(--accent);}

/* reveal */
.rv{opacity:0;transform:translateY(var(--gutter));transition:opacity var(--d4) var(--e-enter),transform var(--d4) var(--e-enter);}
.rv.in{opacity:1;transform:none;}
/* tiles arrive in sequence rather than as one slab */
.pillars.in .pillar,.glance.in>div{animation:tilein 700ms var(--e-enter) both;}
.pillars.in .pillar:nth-child(2),.glance.in>div:nth-child(2){animation-delay:90ms;}
.pillars.in .pillar:nth-child(3),.glance.in>div:nth-child(3){animation-delay:180ms;}
.glance.in>div:nth-child(4){animation-delay:270ms;}
.glance.in>div:nth-child(5){animation-delay:360ms;}
@keyframes tilein{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}

@media (max-width:900px){
  .menu{grid-template-columns:1fr;}
  .menu-grid{display:none;}
  .vm-row{grid-template-columns:1fr;gap:10px;}
  .pillars,.pillars.four{grid-template-columns:1fr;}
  .glance{grid-template-columns:1fr 1fr;}
  .vm-open{grid-template-columns:1fr;gap:22px;}
  .avail-cards{grid-template-columns:1fr;}
  .runs-list{grid-template-columns:1fr 1fr;}
  .vm-rows{grid-template-columns:1fr;}
  .vm-mark{right:-22%;width:86vw;}
  .doors{grid-template-columns:1fr;}
  .door{border-right:0;border-bottom:1px solid var(--line);min-height:auto;}
  .cue{left:50%;bottom:16px;transform:translateX(-50%);}
  .nav{top:9px;left:9px;right:9px;gap:8px;}
  .brand{padding:7px 16px 7px 12px;}
  .brand .mark{height:24px;}
  .brand .wordmark{height:13px;}
  .nav-right{gap:12px;padding:6px 14px 6px 6px;}

}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
  html{scroll-behavior:auto;}
  .cue.show{opacity:1;}
}

/* ---------------- DOT CAROUSEL (main hub + project views) ---------------- */
/* no transform at rest on the hub: a transformed ancestor would trap the
   fixed nav/dock. the transform is applied only during a transition. */
#home{transition:transform var(--d4) var(--e-move);}
body.project-open #home{pointer-events:none;}
body.project-open{overflow:hidden;}

#stage{position:fixed;inset:0;z-index:500;overflow:hidden;pointer-events:none;}
.pview{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;background:var(--bg);color:var(--text);
  transform:translateX(100%);transition:transform var(--d4) var(--e-move);will-change:transform;pointer-events:none;}
.pview.is-active{pointer-events:auto;}

.pv-bg{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(120% 90% at 82% 8%, color-mix(in srgb,var(--accent) 12%,transparent), transparent 58%),
  repeating-linear-gradient(0deg, transparent 0 46px, color-mix(in srgb,var(--text) 4%,transparent) 46px 47px);}
.pv-inner{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:20px;
  padding:clamp(80px,12vw,160px) clamp(24px,7vw,120px);max-width:1120px;}
.pv-title{font-family:var(--display);font-size:clamp(52px,11vw,150px);line-height:.82;letter-spacing:-.03em;}
.pv-lead{max-width:56ch;font-size:clamp(16px,2vw,22px);line-height:1.5;opacity:.82;}

/* bottom-anchored fixed controls get trapped at the foot of the tall #home while
   it is transformed, so fade them during a transition / on project views instead
   of letting them pop (the nav is top-anchored and slides cleanly, so leave it) */

/* only the hero's own cue should fade out on transition — the project views keep theirs */
body.animating #home .cue,body.project-open #home .cue{opacity:0!important;pointer-events:none;}


/* ---------------- PROJECT PAGE — MyDandang (pv1) ---------------- */
.pj{--pj-pad:clamp(24px,7vw,120px);}
.pj>*{padding-left:var(--pj-pad);padding-right:var(--pj-pad);}
/* the base .hl paints its block on an absolute ::before, which collapses when the
   phrase wraps — paint the highlight directly on the span so it tiles every line */
.pj .hl{color:var(--t-0);}
.pj .hl::before{display:none;}

.pj-hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:26px;padding-top:120px;padding-bottom:60px;}
.pj-title{color:var(--t-0);font-family:var(--display);font-size:clamp(64px,13vw,190px);line-height:.84;letter-spacing:-.03em;}
.pj-title em{font-style:normal;color:var(--accent);}
.pj-lead{max-width:22ch;font-size:clamp(19px,2.4vw,30px);line-height:1.32;}
.pj-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;}
.pj-chips span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--line);border-radius:var(--r3);padding:8px 14px;}

.pj-intro{padding-top:clamp(50px,8vw,110px);padding-bottom:clamp(50px,8vw,110px);border-top:1px solid var(--line);}
.pj-intro p{max-width:18ch;font-family:var(--display);font-weight:300;
  font-size:clamp(28px,5.2vw,68px);line-height:1.34;letter-spacing:-.02em;}

.pj-block{padding-top:clamp(50px,8vw,120px);padding-bottom:clamp(50px,8vw,120px);border-top:1px solid var(--line);
  display:grid;grid-template-columns:minmax(240px,.9fr) 1.35fr;gap:clamp(var(--gutter),5vw,80px);align-items:start;}
.pj-block-head h2{font-family:var(--display);font-size:clamp(38px,6vw,92px);line-height:.9;letter-spacing:-.02em;margin:14px 0 18px;}
.pj-block-head p{color:var(--dim);max-width:38ch;line-height:1.55;font-size:clamp(15px,1.5vw,18px);}

.pj-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;}
.pj-card{background:var(--card);border:1px solid var(--line);padding:24px 22px var(--gutter);}
.pj-card b{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--accent);}
.pj-card h3{font-family:var(--display);font-weight:300;font-size:clamp(20px,2.2vw,28px);margin:14px 0 10px;line-height:1;}
.pj-card p{color:var(--dim);font-size:14px;line-height:1.6;}

.pj-feats{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);}
.pj-feats li{background:var(--bg);padding:26px 24px;display:flex;flex-direction:column;gap:9px;}
.pj-feats b{font-family:var(--display);font-weight:300;font-size:clamp(22px,2.4vw,32px);color:var(--accent);line-height:1;}
.pj-feats span{color:var(--dim);font-size:14px;line-height:1.6;}

.pj-shot{padding-top:clamp(50px,8vw,120px);padding-bottom:clamp(50px,8vw,120px);border-top:1px solid var(--line);display:grid;gap:22px;}
.pj-frame{position:relative;border:1px solid var(--line);background:var(--card);padding:clamp(12px,2vw,26px);overflow:hidden;}
.pj-frame img{display:block;width:100%;height:auto;}
.pj-tag{position:absolute;top:14px;left:14px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--t-2);background:color-mix(in srgb,var(--s-1) 70%,transparent);border:1px solid var(--line);border-radius:var(--r3);padding:4px 8px;}
.pj-shot-cap{display:flex;flex-direction:column;gap:8px;max-width:52ch;}
.pj-shot-cap p{color:var(--dim);line-height:1.6;}

.pj-closer{min-height:66svh;display:flex;flex-direction:column;justify-content:center;gap:18px;
  padding-top:clamp(60px,10vw,140px);padding-bottom:clamp(60px,10vw,140px);border-top:1px solid var(--line);}
.pj-closer h2{font-family:var(--display);font-size:clamp(52px,11vw,150px);line-height:1.08;letter-spacing:-.03em;}

@media (max-width:900px){
  .pj-block{grid-template-columns:1fr;}
  .pj-feats{grid-template-columns:1fr;}
}