/* ═══════════════════════════════════════════════════════════
   TRY NEW AI — light system, modelled on the reference sites
   ═══════════════════════════════════════════════════════════ */

@property --ps{ syntax:'<number>'; inherits:false; initial-value:1; }
@property --py{ syntax:'<length>'; inherits:false; initial-value:0px; }

:root{
  --paper:   #FFFFFF;
  --paper-2: #F2F3F4;
  --paper-3: #E9EBEC;
  --ink:     #0A0B0C;
  --ink-2:   #5F656A;
  --ink-3:   #A9AEB2;      /* the muted half of a two-tone headline */
  --line:    rgba(10,11,12,.09);
  --line-2:  rgba(10,11,12,.16);
  --green:   #00A34A;
  --green-2: #17C25E;

  --sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* labels/eyebrows are Poppins — small, uppercase, tracked out */
  --mono: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --shell: 1360px;
  --pad:   clamp(18px, 4vw, 64px);
  --ease:  cubic-bezier(.22,1,.36,1);
  --nav-h: 56px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html.lock{ overflow:hidden; }

body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.loading{ overflow:hidden; height:100vh; }
img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,textarea{ font:inherit; color:inherit; background:none; border:none; }
button{ cursor:pointer; }
ul{ list-style:none; }
::selection{ background:var(--green); color:#fff; }
:focus-visible{ outline:2px solid var(--green); outline-offset:3px; border-radius:6px; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad); }
.mono{ font-family:var(--mono); font-weight:500; font-size:10.5px;
       letter-spacing:.15em; text-transform:uppercase; }
.grey{ color:var(--ink-3); font-style:normal; }
/* eyebrows at 10.5px in --ink-3 were barely there */
.tag{ color:var(--ink-2); margin-bottom:18px; font-size:13px; letter-spacing:.13em; }

.skip-link{ position:fixed; top:-100px; left:16px; z-index:9999; background:var(--ink);
            color:#fff; padding:10px 16px; border-radius:999px; }
.skip-link:focus{ top:16px; }

/* section heads */
.head{ margin-bottom:clamp(40px,5.5vw,80px); }
.h2{ font-size:clamp(32px,5.2vw,72px); font-weight:400; line-height:1.02;
     letter-spacing:-.045em; }

/* ═══════════ PRELOADER ═══════════ */
.pre{
  position:fixed; inset:0; z-index:9998; background:var(--paper);
  display:flex; flex-direction:column; justify-content:center;
  transition:opacity .55s ease, visibility .55s;
}
/* words spread edge to edge; JS locks each width before scrambling so the
   line never reflows while the glyphs resolve */
.pre__row{
  position:relative; z-index:2;
  display:flex; justify-content:space-between; align-items:baseline;
  gap:10px; width:100%; padding-inline:var(--pad);
}
.pre__row span{
  display:inline-block; white-space:nowrap; text-align:center;
  font-size:clamp(10px,1.45vw,21px); font-weight:400; letter-spacing:-.015em;
  opacity:0; transform:translateY(9px);
  transition:opacity .5s var(--ease), transform .6s var(--ease);
}
.pre.in .pre__row span{ opacity:1; transform:none; }
.pre__foot{
  position:absolute; left:var(--pad); right:var(--pad); bottom:clamp(30px,5vh,58px);
  z-index:2; display:flex; justify-content:space-between; color:var(--ink-3);
}
.pre__orb{
  position:absolute; left:50%; top:50%; width:min(560px,80vw); aspect-ratio:1;
  transform:translate(-50%,-50%); border-radius:50%; filter:blur(46px); opacity:.85;
  background:
    radial-gradient(45% 45% at 34% 30%, rgba(255,255,255,.98), transparent 70%),
    radial-gradient(40% 40% at 70% 34%, rgba(0,163,74,.30), transparent 70%),
    radial-gradient(45% 45% at 62% 74%, rgba(150,190,255,.28), transparent 70%),
    radial-gradient(50% 50% at 30% 70%, rgba(255,205,170,.22), transparent 70%),
    #fff;
  animation:orbSpin 16s linear infinite;
}
.pre__pct{ color:var(--green); font-variant-numeric:tabular-nums; }
.pre__bar{ position:absolute; left:var(--pad); right:var(--pad);
           bottom:clamp(22px,4vh,44px); z-index:2; height:1px; background:var(--line-2); }
.pre__bar i{ position:absolute; inset:0; width:0%; background:var(--ink); }
.pre.done{ opacity:0; visibility:hidden; }

/* ═══════════ PILLS ═══════════ */
.pill{
  position:relative; display:inline-flex; align-items:center; gap:9px;
  height:42px; padding:0 18px; border-radius:999px;
  font-size:13px; font-weight:400; white-space:nowrap;
  transition:background .35s var(--ease), color .35s var(--ease),
             transform .5s var(--ease), box-shadow .5s var(--ease);
}
.pill--lg{ height:50px; padding:0 24px; font-size:14px; }
.pill--block{ width:100%; justify-content:center; height:54px; }
.pill--dark{ background:var(--ink); color:#fff; }
.pill--dark:hover{ background:#22262A; }
.pill--light{ background:var(--paper-2); color:var(--ink); }
.pill--light:hover{ background:var(--paper-3); }
.pill__dot{ width:16px; height:16px; border-radius:50%; background:#fff; flex-shrink:0;
            transition:transform .45s var(--ease); }
#menuBtn[aria-expanded="true"] .pill__dot{ transform:translateX(2px) scale(.8); }
.pill--seg{ background:var(--paper-2); padding:0 6px; gap:0; }
.pill--seg a{ padding:0 14px; height:32px; display:inline-flex; align-items:center;
              border-radius:999px; font-size:13px; color:var(--ink-2);
              transition:background .35s var(--ease), color .35s var(--ease); }
.pill--seg a:hover{ background:#fff; color:var(--ink); }
.pill--circle{ width:42px; height:42px; padding:0; justify-content:center;
               background:var(--ink); color:#fff; }
.pill--circle svg{ width:20px; height:20px; }
.pill--circle:hover svg{ animation:spin 3s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* iridescent glow under the dark CTA — straight from the Reboot reference */
.glow::after{
  content:''; position:absolute; left:8%; right:8%; bottom:-5px; height:22px;
  border-radius:999px; z-index:-1; filter:blur(11px); opacity:.85;
  background:linear-gradient(90deg,#00A34A,#7FD8FF,#C9A6FF,#FFC48A,#00A34A);
  background-size:300% 100%; animation:glowShift 6s linear infinite;
}
.glow{ isolation:auto; }
@keyframes glowShift{ to{ background-position:300% 0; } }

/* ═══════════ NAV ═══════════ */
.nav{
  position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:900;
  width:calc(100% - var(--pad)); max-width:calc(var(--shell) - 24px);
  display:flex; align-items:center; gap:10px;
  transition:transform .5s var(--ease), opacity .4s;
}
.nav.hide{ transform:translateX(-50%) translateY(-160%); opacity:0; }
.nav__brand{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:500;
             letter-spacing:-.02em; padding-right:10px; }
/* mark is 820×880 — set the height and let the width follow the aspect ratio */
.nav__mark{ height:24px; width:auto; color:var(--green); flex-shrink:0;
            transition:transform .5s var(--ease); }
.nav__brand:hover .nav__mark{ transform:translateY(-1px) scale(1.06); }
.nav__end{ margin-left:auto; display:flex; align-items:center; gap:10px; }

/* ═══════════ MENU ═══════════ */
.menu{
  position:fixed; inset:0; z-index:890; background:var(--paper);
  display:flex; flex-direction:column; justify-content:center; padding:100px var(--pad) 48px;
  clip-path:inset(0 0 100% 0); transition:clip-path .85s var(--ease); pointer-events:none;
}
.menu.open{ clip-path:inset(0 0 0 0); pointer-events:auto; }
.menu__links{ display:flex; flex-direction:column; }
.menu__links a{
  display:flex; align-items:baseline; gap:18px; padding:14px 0;
  border-bottom:1px solid var(--line);
  font-size:clamp(28px,6vw,50px); font-weight:300; letter-spacing:-.04em;
  opacity:0; transform:translateY(26px);
  transition:opacity .6s var(--ease), transform .7s var(--ease), color .3s;
}
.menu__links a em{ color:var(--green); font-size:11px; font-style:normal; }
.menu.open .menu__links a{ opacity:1; transform:none; }
.menu__links a:hover{ color:var(--green); }
.menu__links a.is-here{ color:var(--ink-3); }
.menu__links a.is-here::after{ content:'—'; margin-left:auto; font-size:.4em;
                               color:var(--green); }
.pill--seg a.is-here{ background:#fff; color:var(--ink); }
.menu__foot{ display:flex; justify-content:space-between; margin-top:34px; color:var(--ink-3); }

/* ═══════════ HERO ═══════════ */
.hero{
  position:relative; min-height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--nav-h) + 40px) 0 34px;
  background:linear-gradient(180deg,#F6F7F8 0%, #FFFFFF 42%);
}

/* pearlescent orb */
.orb{
  position:absolute; left:50%; top:47%; transform:translate(-50%,-50%);
  width:min(680px,84vw); aspect-ratio:1; pointer-events:none;
}
.orb__body{
  position:absolute; inset:0; border-radius:50%; filter:blur(30px);
  background:
    radial-gradient(42% 42% at 36% 28%, rgba(255,255,255,1), transparent 72%),
    radial-gradient(38% 38% at 72% 32%, rgba(0,163,74,.34), transparent 70%),
    radial-gradient(42% 42% at 66% 72%, rgba(140,185,255,.30), transparent 72%),
    radial-gradient(46% 46% at 28% 68%, rgba(255,200,160,.26), transparent 72%),
    radial-gradient(closest-side, #ffffff, #f4f6f7);
  animation:orbSpin 22s linear infinite;
}
.orb__sheen{
  position:absolute; inset:6%; border-radius:50%; filter:blur(16px); mix-blend-mode:screen;
  background:conic-gradient(from 0deg,
    rgba(0,163,74,.30), rgba(120,200,255,.26), rgba(210,170,255,.22),
    rgba(255,205,150,.24), rgba(0,163,74,.30));
  animation:orbSpin 30s linear infinite reverse;
}
@keyframes orbSpin{ to{ transform:rotate(360deg); } }

/* converging hands */
.halftone{ position:absolute; inset:0; width:100%; height:100%; z-index:2;
           pointer-events:none; }

.hero__center{ position:relative; z-index:3; text-align:center; padding-inline:var(--pad); }
.hero__title{
  font-size:clamp(32px,5.9vw,86px); font-weight:400; line-height:1.06;
  letter-spacing:-.048em;
}
/* Descender rescue: `overflow:hidden` powers the line-mask reveal, but at these
   tight line-heights it slices the tails off g/y/p. Pad the clip box, then pull
   the extra space back with a negative margin so line spacing is unchanged.
   translateY is a % of the inner's own (now taller) box, so the mask still
   hides it completely. */
.hero__title .line{ display:block; overflow:hidden; margin-bottom:-.18em; }
.hero__title .line i{ display:block; font-style:normal; padding-bottom:.18em;
                      transform:translateY(105%); }
.hero.in .hero__title .line i{ transform:none; transition:transform 1.1s var(--ease); }
.hero.in .line:nth-child(2) i{ transition-delay:.1s; }

.hero__foot{
  position:relative; z-index:3; margin-top:auto; padding-top:clamp(40px,7vw,90px);
  display:flex; align-items:flex-end; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
/* the hero eyebrow at 10.5px read as noise rather than a line of copy */
.hero__foot .tag{ font-size:16px; letter-spacing:.09em; color:var(--ink-2); }
.hero__blurb{ max-width:34ch; font-size:15px; color:var(--ink-2); }

/* Desktop: the title sat against the top padding while margin-top:auto held
   the foot at the bottom, so the whole middle of the screen was hollow. Drop
   the title toward the optical centre and the orb reads as sitting behind it
   rather than in a gap of its own. */
@media (min-width:641px){
  .hero__center{ margin-top:clamp(30px,12vh,150px); }
}
.hero__foot-r{ display:flex; gap:10px; flex-wrap:wrap; }


/* ═══════════ INNER-PAGE HERO ═══════════ */
.phero{
  position:relative; overflow:hidden;
  padding:calc(var(--nav-h) + clamp(70px,10vw,150px)) 0 clamp(48px,6vw,86px);
  background:linear-gradient(180deg,#F6F7F8 0%, #FFFFFF 72%);
  border-bottom:1px solid var(--line);
}
.phero__orb{
  position:absolute; right:-6%; top:-42%; width:min(620px,68vw); aspect-ratio:1;
  border-radius:50%; filter:blur(46px); pointer-events:none; opacity:.85;
  background:
    radial-gradient(42% 42% at 38% 30%, rgba(255,255,255,1), transparent 72%),
    radial-gradient(38% 38% at 70% 34%, rgba(0,163,74,.30), transparent 70%),
    radial-gradient(42% 42% at 64% 70%, rgba(140,185,255,.26), transparent 72%),
    radial-gradient(46% 46% at 30% 68%, rgba(255,200,160,.22), transparent 72%);
  animation:orbSpin 24s linear infinite;
}
.phero .shell{ position:relative; z-index:2; }
.phero__h{
  font-size:clamp(36px,6.4vw,88px); font-weight:400; line-height:1.02;
  letter-spacing:-.048em; max-width:16ch;
  padding-bottom:.08em;              /* descender room */
}
.phero__lede{ margin-top:22px; max-width:56ch; font-size:clamp(15px,1.35vw,18px);
              color:var(--ink-2); }

/* ═══════════ CTA BAND ═══════════ */
.cta{ padding:clamp(70px,9vw,130px) 0; text-align:center;
      border-top:1px solid var(--line); }
.cta__h{ font-size:clamp(32px,5.6vw,76px); font-weight:400; letter-spacing:-.048em;
         line-height:1.03; margin:14px auto clamp(28px,3.4vw,44px); max-width:18ch;
         padding-bottom:.08em; }

/* ═══════════ ORBIT CTA ═══════════
   After the emergent.sh reference: work drifting outward past a fixed centre,
   each piece emerging small and blurred, sharpening as it passes, then leaving
   the frame. Retuned for a light page — these read as work crossing a desk
   rather than screens floating in space. */
.orbit{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:min(88svh,760px);
  display:grid; place-items:center;
  background:
    radial-gradient(58% 46% at 50% 46%, #FFFFFF 0%, rgba(255,255,255,0) 72%),
    var(--paper-2);
}
.orbit__field{ position:absolute; inset:0; z-index:0; pointer-events:none; }
/* On a dark page the drifting work can pass straight over the headline and it
   still reads. On white it cannot, so the centre keeps a soft scrim: cards
   dissolve into the page as they cross it, and the type is never fighting a
   screenshot for contrast. */
.orbit__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(46% 42% at 50% 50%,
    var(--paper-2) 0%, var(--paper-2) 46%, rgba(242,243,244,0) 100%);
}
.orbit .oc{
  position:absolute; left:50%; top:50%; display:block;
  margin-left:calc(var(--ow) / -2); margin-top:calc(var(--oh) / -2);
  width:var(--ow); filter:blur(var(--b,0px));
  will-change:transform,opacity;
  animation:orbitDrift var(--dur,22s) linear var(--d,0s) infinite;
  opacity:0;
}
.orbit .oc--phone{ --ow:clamp(84px,11.5vmin,168px); --oh:calc(var(--ow) * 1.78); }
.orbit .oc--wide { --ow:clamp(150px,23vmin,340px);  --oh:calc(var(--ow) * 0.46); }
.orbit .oc--tall { --ow:clamp(110px,15vmin,220px);  --oh:calc(var(--ow) * 1.24); }
.orbit .oc img{
  width:100%; height:auto; display:block; border-radius:12px;
  box-shadow:0 26px 60px -30px rgba(10,11,12,.42);
  border:1px solid var(--line);
}

@keyframes orbitDrift{
  0%   { opacity:0;
         transform:translate3d(var(--x1),var(--y1),0) rotate(var(--a)) scale(var(--s1)); }
  14%  { opacity:var(--o,.8); }
  74%  { opacity:var(--o,.8); }
  100% { opacity:0;
         transform:translate3d(var(--x2),var(--y2),0) rotate(var(--a2)) scale(var(--s2)); }
}

/* the centre never moves — everything else passes it */
.orbit__mid{ position:relative; z-index:2; }
.orbit__mark{
  width:clamp(34px,4vw,52px); height:auto; color:var(--green);
  margin:0 auto clamp(18px,2vw,28px);
  animation:orbitMark 9s var(--ease) infinite;
}
@keyframes orbitMark{
  0%,62%  { transform:rotateY(0deg); }
  80%     { transform:rotateY(180deg); }
  100%    { transform:rotateY(360deg); }
}
.orbit .cta__h{ margin-top:12px; }

.orbit__field:not(.is-live) .oc,
.orbit__field:not(.is-live) ~ .orbit__mid .orbit__mark{ animation-play-state:paused; }

/* ═══════════ CLIENT STRIP ═══════════ */
.strip__head{
  display:flex; justify-content:space-between; gap:16px;
  max-width:var(--shell); margin-inline:auto; padding:16px var(--pad);
  color:var(--ink-3); border-bottom:1px solid var(--line); margin-bottom:22px;
}
.strip__head span:first-child{ display:inline-flex; align-items:center; gap:8px;
                               color:var(--ink-2); }
.dot{ width:6px; height:6px; border-radius:50%; background:var(--green);
      flex-shrink:0; display:inline-block; }

.strip{ border-block:1px solid var(--line); overflow:hidden; padding:0 0 22px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.strip__row{ display:flex; width:max-content; animation:marquee 40s linear infinite; }
.strip:hover .strip__row{ animation-play-state:paused; }
.strip__grp{ display:flex; align-items:center; gap:30px; padding-right:30px; }
.strip__grp span{ font-size:clamp(16px,1.7vw,24px); font-weight:300; letter-spacing:-.03em;
                  color:var(--ink-3); transition:color .3s; }
.strip__grp span:hover{ color:var(--ink); }
.strip__grp b{ color:var(--green); font-size:8px; font-weight:400; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ═══════════ STAT TRACKS ═══════════ */
.stats{ padding:clamp(50px,7vw,90px) 0; }
.stat{
  display:grid; grid-template-columns:minmax(190px,1fr) auto minmax(0,2.2fr);
  align-items:center; gap:clamp(16px,3vw,44px);
  padding:clamp(22px,3vw,34px) 0; border-bottom:1px solid var(--line);
}
.stat:first-child{ border-top:1px solid var(--line); }
.stat__num{ display:block; font-size:clamp(34px,5vw,68px); font-weight:400;
            letter-spacing:-.05em; line-height:1; font-variant-numeric:tabular-nums; }
.stat__cap{ display:block; margin-top:8px; font-size:12px; color:var(--ink-3); }
.stat__chip{ width:30px; height:30px; border-radius:50%; background:var(--paper-2);
             display:grid; place-items:center; }
.stat__chip i{ width:5px; height:5px; border-radius:50%; background:var(--ink-3); }

.stat__track{
  position:relative; height:clamp(56px,6vw,84px); border-radius:999px;
  background:var(--paper-2); overflow:hidden;
}
.stat__fill{
  position:absolute; inset:0; width:0%; border-radius:999px;
  background:linear-gradient(90deg,
    rgba(0,163,74,.16), rgba(130,195,255,.20), rgba(215,180,255,.18), rgba(255,205,160,.16));
  transition:width 1.6s var(--ease);
}
.stat__knob{
  position:absolute; top:50%; left:0; transform:translate(6px,-50%);
  width:clamp(46px,4.6vw,68px); aspect-ratio:1; border-radius:50%; background:#fff;
  box-shadow:0 4px 18px rgba(10,11,12,.10);
  transition:left 1.6s var(--ease);
}

/* ═══════════ CREED ═══════════
   The statement, then the four ideas as a 2x2 card grid (client reference).
   Structure follows that reference; the palette stays ours, so it sits inside
   the site instead of arriving from somewhere else. */
.creed{
  padding:clamp(70px,9vw,130px) 0;
  background:var(--paper-2);
  border-block:1px solid var(--line);
}
/* any eyebrow carrying a status dot needs the gap, not just the creed */
.tag .dot{ margin-right:9px; }
.creed__say{
  font-size:clamp(26px,3.4vw,46px); font-weight:300; letter-spacing:-.04em;
  line-height:1.2; max-width:26ch;
}

.ideas{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px); margin-top:clamp(40px,5vw,72px);
}
.idea{
  position:relative; display:flex; flex-direction:column;
  padding:clamp(18px,1.8vw,26px);
  background:var(--paper); border:1px solid var(--line); border-radius:18px;
  overflow:hidden; color:var(--ink);
  transition:border-color .4s, transform .55s var(--ease), box-shadow .55s var(--ease);
}
.idea:hover{ border-color:var(--line-2); transform:translateY(-4px);
             box-shadow:0 22px 50px -34px rgba(10,11,12,.5); }

.idea__art{
  border-radius:12px; background:var(--paper-2); margin-bottom:clamp(18px,1.8vw,26px);
  overflow:hidden; border:1px solid var(--line);
}
.idea__art svg{ display:block; width:100%; height:auto; }

/* ── shared chrome, so the four read as screens from one system ── */
.idea__art .pnl{ fill:var(--paper); }
.idea__art .hair{ stroke:var(--line); stroke-width:1; }
.idea__art .chd{ fill:var(--line-2); }
.idea__art .lbl{ font-family:var(--mono); font-size:7.5px; letter-spacing:.14em;
                 text-transform:uppercase; fill:var(--ink-3); }
.idea__art .lbl--r{ text-anchor:end; }
.idea__art .lbl--c{ text-anchor:middle; }
.idea__art .num{ font-family:var(--mono); font-size:15px; font-weight:500;
                 fill:var(--ink); text-anchor:middle; letter-spacing:-.02em; }
.idea__art .grid{ stroke:var(--line); stroke-width:1; }
.idea__art .mtr{ fill:var(--line); }
.idea__art .mtr--f{ fill:var(--green); transform-box:fill-box; transform-origin:0 50%; }

/* animations run only while the card is on screen */
.idea__art:not(.is-live) *{ animation-play-state:paused !important; }

/* ── 01 · inference in production ── */
.idea__art .spark{ fill:none; stroke:var(--green); stroke-width:2;
  stroke-linejoin:round; stroke-linecap:round;
  stroke-dasharray:320; stroke-dashoffset:320;
  animation:draw 4.2s var(--ease) infinite; }
.idea__art .area{ fill:var(--green); opacity:0; animation:fadein 4.2s var(--ease) infinite; }
.idea__art .scan{ stroke:var(--green); stroke-width:1; opacity:.35; }
.idea__art .sweep{ animation:sweep 4.2s var(--ease) infinite; }
.idea__art .ping{ fill:var(--green); opacity:0; animation:ping 4.2s var(--ease) infinite; }
.idea__art .ping--b{ animation-delay:.5s; }
.idea__art .chip{ fill:var(--paper-2); }
.idea__art .mtr--f{ animation:meter 4.2s var(--ease) infinite; }
.idea__art .mtr--f2{ animation-delay:.18s; --to:.62; }
.idea__art .mtr--f3{ animation-delay:.36s; --to:.34; }

@keyframes draw{ 0%{ stroke-dashoffset:320 } 55%,100%{ stroke-dashoffset:0 } }
@keyframes fadein{ 0%,20%{ opacity:0 } 62%,100%{ opacity:.16 } }
@keyframes sweep{ 0%{ transform:translateX(24px) } 55%,100%{ transform:translateX(220px) } }
@keyframes ping{ 0%,42%{ opacity:0; r:3.5 } 52%{ opacity:1; r:6 } 70%,100%{ opacity:.9; r:3.5 } }
@keyframes meter{ 0%{ transform:scaleX(0) } 60%,100%{ transform:scaleX(var(--to,.84)) } }

/* ── 02 · evaluation suite ── */
.idea__art .bar{ fill:var(--line-2); }
.idea__art .tick__bg{ fill:var(--paper-2); }
.idea__art .tick__mk{ fill:none; stroke:var(--ink-3); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:18; stroke-dashoffset:18; }
.idea__art .tick{ animation:pass 4.6s var(--ease) infinite; }
.idea__art .tick--2{ animation-delay:.55s; }
.idea__art .tick--3{ animation-delay:1.1s; }
.idea__art .mtr--score{ fill:var(--green); transform-box:fill-box; transform-origin:0 50%; animation:score 4.6s var(--ease) infinite; }

/* the chip greens and the tick draws itself as each check passes */
@keyframes pass{
  0%,8%{ opacity:.45 }
  22%,100%{ opacity:1 }
}
.idea__art .tick .tick__mk{ animation:mark 4.6s var(--ease) infinite; }
.idea__art .tick--2 .tick__mk{ animation-delay:.55s; }
.idea__art .tick--3 .tick__mk{ animation-delay:1.1s; }
.idea__art .tick__bg{ animation:chipin 4.6s var(--ease) infinite; }
.idea__art .tick--2 .tick__bg{ animation-delay:.55s; }
.idea__art .tick--3 .tick__bg{ animation-delay:1.1s; }
@keyframes chipin{ 0%,10%{ fill:var(--paper-2) } 30%,100%{ fill:rgba(0,163,74,.10) } }
@keyframes mark{ 0%,10%{ stroke-dashoffset:18; stroke:var(--ink-3) }
                 30%,100%{ stroke-dashoffset:0; stroke:var(--green) } }
@keyframes score{ 0%,6%{ transform:scaleX(0) } 62%,100%{ transform:scaleX(.98) } }

/* ── 03 · sovereign infrastructure ── */
.idea__art .bound{ fill:none; stroke:var(--green); stroke-width:1.5;
  stroke-dasharray:5 6; animation:crawl 9s linear infinite; }
.idea__art .rack{ fill:var(--paper-2); stroke:var(--line-2); stroke-width:1; }
.idea__art .slot{ stroke:var(--line-2); stroke-width:2; stroke-linecap:round; }
.idea__art .pkt{ fill:var(--green); animation:hop 3.4s var(--ease) infinite; }
.idea__art .pkt--b{ animation-delay:1.7s; }
.idea__art .out{ fill:none; stroke:var(--line-2); stroke-width:1.5; }
.idea__art .blocked{ stroke:var(--line-2); stroke-width:1.5; stroke-dasharray:3 4; }

@keyframes crawl{ to{ stroke-dashoffset:-110 } }
/* a packet crosses between racks, then the next leg — never past the boundary */
@keyframes hop{
  0%{ transform:translateX(75px); opacity:0 }
  8%{ opacity:1 }
  40%{ transform:translateX(126px) }
  50%{ transform:translateX(143px) }
  82%{ transform:translateX(194px); opacity:1 }
  92%,100%{ transform:translateX(194px); opacity:0 }
}

/* ── 04 · agent trace ── */
.idea__art .edge{ stroke:var(--line-2); stroke-width:1.5; }
.idea__art .flow{ stroke:var(--green); stroke-width:1.5; stroke-linecap:round;
  stroke-dasharray:8 68; animation:pulse-run 2.8s linear infinite; }
.idea__art .flow--2{ animation-delay:.35s; }
.idea__art .flow--3{ animation-delay:.7s; }
.idea__art .nd{ fill:var(--paper); stroke:var(--ink-3); stroke-width:1.5; }
.idea__art .nd--1{ animation:hot 4.2s var(--ease) infinite; }
.idea__art .nd--2{ animation:hot 4.2s var(--ease) infinite .6s; }
.idea__art .nd--3{ animation:hot 4.2s var(--ease) infinite .9s; }
.idea__art .nd--4{ animation:hot 4.2s var(--ease) infinite 1.5s; }
.idea__art .nd--5{ animation:hot 4.2s var(--ease) infinite 2.1s; }
.idea__art .nd--6{ animation:hot 4.2s var(--ease) infinite 2.4s; }

@keyframes pulse-run{ from{ stroke-dashoffset:76 } to{ stroke-dashoffset:0 } }
@keyframes hot{ 0%,6%{ fill:var(--paper); stroke:var(--ink-3) }
                14%,30%{ fill:var(--green); stroke:var(--green) }
                44%,100%{ fill:var(--paper); stroke:var(--ink-3) } }

/* hover lifts the whole screen a touch rather than restyling its parts */
.idea:hover .idea__art{ border-color:var(--line-2); }

.idea__n{ color:var(--ink-3); margin-bottom:8px; }
.idea h3{ font-size:clamp(19px,2vw,26px); font-weight:400; letter-spacing:-.035em;
          line-height:1.18; }
.idea__go{
  margin-top:auto; padding-top:clamp(20px,2.2vw,30px);
  color:var(--ink-3); display:inline-flex; align-items:center; gap:7px;
  transition:color .4s;
}
.idea__go i{ font-style:normal; display:inline-block;
             transition:transform .45s var(--ease); }
.idea:hover .idea__go{ color:var(--ink); }
.idea:hover .idea__go i{ transform:translate(3px,-3px); }

/* ═══════════ CAPABILITIES ═══════════ */
.caps{ padding:clamp(70px,9vw,130px) 0; }
.caps__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
             background:var(--line); border:1px solid var(--line); border-radius:20px;
             overflow:hidden; }
.cap{ background:var(--paper); padding:clamp(24px,2.6vw,40px);
      display:flex; flex-direction:column; gap:12px; transition:background .5s var(--ease); }
.cap:hover{ background:var(--paper-2); }
.cap__n{ color:var(--green); }
.cap h3{ font-size:clamp(18px,1.75vw,23px); font-weight:400; letter-spacing:-.03em;
         line-height:1.2; }
.cap p{ font-size:14.5px; color:var(--ink-2); }
.cap__stack{ color:var(--green) !important; font-family:var(--mono); font-size:9.5px !important;
             letter-spacing:.08em; text-transform:uppercase; line-height:1.8; margin-top:auto;
             padding-top:8px; }

/* "see everything" button under a teaser grid */
.more{ display:flex; justify-content:center; margin-top:clamp(28px,3.4vw,44px); }

/* mission / vision pair */
.mv{ padding:clamp(60px,8vw,110px) 0; }
.mv__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
           gap:clamp(28px,4vw,64px); padding-bottom:clamp(30px,4vw,56px);
           border-bottom:1px solid var(--line); }
.mv__p{ font-size:clamp(18px,2vw,26px); font-weight:300; line-height:1.35;
        letter-spacing:-.028em; max-width:34ch; padding-bottom:.06em; }

/* why-us band reuses the capability card grid */
.edge{ padding:clamp(60px,8vw,110px) 0; background:var(--paper-2); }
.edge .caps__grid{ background:var(--line); }
.edge .cap{ background:var(--paper); }

/* ═══════════ TESTIMONIALS · COVER FLOW ═══════════
   Apple's Cover Flow, as it actually behaves: the centre item faces you flat,
   its neighbours are turned steeply away on the Y axis and pushed back in Z,
   and — the part that makes it read as Cover Flow rather than a rotated
   carousel — the side items are COMPRESSED toward the centre so they overlap
   like records in a crate instead of sitting in an evenly spaced row.

   Every transform is written by script as a concrete value. The first version
   built them in CSS with calc() and abs(); abs() is new enough that it cannot
   be relied on, and when it fails the whole declaration drops. Nothing here
   depends on it now. */
.tstm{ padding:clamp(70px,9vw,120px) 0 clamp(50px,6vw,80px); overflow:hidden; }
.tstm .head{ margin-bottom:clamp(24px,3vw,44px); }

.flow{
  /* real testimonials run far longer than the outcome lines they replaced,
     so the card is taller and the quote sits a size down */
  --tc-w:clamp(260px,29vw,420px);
  --tc-h:clamp(360px,36vw,520px);
  position:relative; height:calc(var(--tc-h) + 90px);
  perspective:1200px; perspective-origin:50% 46%;
  touch-action:pan-y;
  cursor:grab;
}
.flow.is-drag{ cursor:grabbing; }
.flow__stage{
  position:absolute; inset:0; transform-style:preserve-3d;
}
.tcard{
  position:absolute; top:50%; left:50%;
  width:var(--tc-w); height:var(--tc-h);
  margin-left:calc(var(--tc-w) / -2); margin-top:calc(var(--tc-h) / -2);
  transform-origin:50% 50%;
  will-change:transform,opacity;
  backface-visibility:hidden;
}
.tcard blockquote{
  height:100%; display:flex; flex-direction:column; gap:clamp(16px,2vw,26px);
  padding:clamp(22px,2.4vw,34px);
  background:var(--paper); border:1px solid var(--line); border-radius:20px;
  box-shadow:0 34px 70px -40px rgba(10,11,12,.5);
}
.tcard p{
  font-size:clamp(14px,1.15vw,16.5px); font-weight:300; letter-spacing:-.015em;
  line-height:1.5;
}
.tcard footer{ margin-top:auto; display:flex; flex-direction:column; gap:5px;
               padding-top:clamp(14px,1.6vw,22px); border-top:1px solid var(--line); }
.tcard footer b{ font-size:15px; font-weight:500; letter-spacing:-.02em; }
.tcard footer em{ line-height:1.5; }
.tcard footer em{ font-style:normal; color:var(--ink-3); }

.flow__bar{ display:flex; align-items:center; justify-content:center; gap:14px;
            margin-top:clamp(14px,2vw,26px); }
.flow__btn{
  width:46px; height:46px; border-radius:999px; display:grid; place-items:center;
  background:var(--paper-2); color:var(--ink); font-size:17px;
  transition:background .3s, transform .4s var(--ease);
}
.flow__btn:hover{ background:var(--ink); color:#fff; }
.flow__btn:active{ transform:scale(.94); }

@media (prefers-reduced-motion:reduce){
  .flow{ perspective:none; }
}

/* ═══════════ WORK ═══════════ */
.work{ padding:clamp(70px,9vw,130px) 0; background:var(--paper-2); }
.proj{ margin-bottom:clamp(40px,5vw,76px); cursor:pointer; }
.proj:last-child{ margin-bottom:0; }
.proj__art{
  width:100%; aspect-ratio:16/7.4; border-radius:20px; overflow:hidden;
  border:1px solid var(--line); background:var(--paper-2);
  transition:transform .8s var(--ease), box-shadow .8s var(--ease);
}
.proj__art img{ width:100%; height:100%; object-fit:cover; object-position:top center;
                display:block; transition:transform 1s var(--ease); }
.proj:hover .proj__art{ box-shadow:0 26px 60px -30px rgba(10,11,12,.4); }
.proj:hover .proj__art img{ transform:scale(1.02); }

.proj__meta{
  display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  flex-wrap:wrap; margin-top:20px;
}
.proj__meta h3{ font-size:clamp(18px,2vw,27px); font-weight:400; letter-spacing:-.035em; }
.proj__meta p{ color:var(--ink-3); margin-top:6px; }
.tags{ display:flex; flex-wrap:wrap; gap:7px; }
.tags li{ padding:7px 13px; border-radius:999px; background:var(--paper);
          border:1px solid var(--line); color:var(--ink-2);
          font-family:var(--mono); font-size:9.5px; letter-spacing:.08em;
          text-transform:uppercase; }
.proj__note{ margin-top:12px; max-width:62ch; color:var(--ink-2); font-size:15px; }
.proj__note b{ font-weight:500; color:var(--ink); }

/* ═══════════ INDUSTRIES ═══════════ */
.inds{ padding:clamp(70px,9vw,130px) 0; }
.inds__list li{
  position:relative; display:grid;
  grid-template-columns:48px minmax(0,1fr) minmax(0,1.2fr) 30px;
  gap:clamp(14px,3vw,44px); align-items:baseline;
  padding:clamp(20px,2.6vw,32px) 0; border-top:1px solid var(--line);
  transition:padding-left .6s var(--ease);
}
.inds__list li:last-child{ border-bottom:1px solid var(--line); }
.inds__list li:hover{ padding-left:clamp(6px,1.2vw,20px); }
.inds__list span{ color:var(--ink-3); font-family:var(--mono); font-size:10.5px;
                  letter-spacing:.11em; }
.inds__list h3{ font-size:clamp(18px,2.2vw,30px); font-weight:400; letter-spacing:-.035em;
                line-height:1.15; }
.inds__list p{ color:var(--ink-2); font-size:14.5px; }
.inds__list i{ justify-self:end; font-style:normal; color:var(--ink-3); font-size:17px;
               transition:transform .5s var(--ease), color .4s; }
.inds__list li:hover i{ transform:translate(4px,-4px); color:var(--green); }

/* ═══════════ APPROACH ═══════════ */
.steps{ padding:clamp(70px,9vw,130px) 0; background:var(--paper-2); }
.steps__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
              background:var(--line); border:1px solid var(--line);
              border-radius:20px; overflow:hidden; }
.step{ background:var(--paper); padding:clamp(24px,2.4vw,36px);
       display:flex; flex-direction:column; gap:11px; }
.step span{ color:var(--green); }
.step h3{ font-size:clamp(20px,2vw,26px); font-weight:400; letter-spacing:-.035em; }
.step p{ font-size:14px; color:var(--ink-2); }

/* ═══════════ TEAM ═══════════
   Credential card after the SilverX reference: landscape headshot bleeding to
   the card edge, a LinkedIn badge sitting on the bottom-right of the photo, and
   a dense text block underneath. Proportions are measured from that card
   (photo 304x224, badge 32px, body padding 20px), retyped in Poppins. */
.team{ padding:clamp(70px,9vw,130px) 0; }
/* five people now, so three across and the last row runs short rather than
   two across and a lone card stranded on its own row */
.team__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
             gap:clamp(18px,2.2vw,28px); }
@media (max-width:1000px){
  .team__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:820px; }
}
.person{
  display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; transition:border-color .4s, box-shadow .5s var(--ease),
                              transform .5s var(--ease);
}
.person:hover{ border-color:var(--line-2); transform:translateY(-3px);
               box-shadow:0 18px 44px -30px rgba(10,11,12,.45); }
.person__shot{
  position:relative; aspect-ratio:19/14; overflow:hidden;
  background:var(--paper-2); border-bottom:1px solid var(--line);
}
/* square source in a 19:14 frame: bias the crop upward so the head sits
   in the top third rather than the chest filling the card */
.person__shot img{ width:100%; height:100%; object-fit:cover;
                   object-position:center 24%; display:block; }
.person:hover .person__shot img{ --ps:1.045; }

/* the badge is the only clickable thing on the card, so it has to read as a
   control: it lifts and takes brand green the moment the card is hovered */
.person__in{
  position:absolute; right:12px; bottom:12px;
  width:34px; height:34px; border-radius:8px;
  display:grid; place-items:center;
  background:var(--ink); color:#fff;
  transition:background .35s, transform .45s var(--ease);
}
.person__in svg{ width:17px; height:17px; display:block; }
.person:hover .person__in{ background:var(--green); transform:translateY(-2px); }
.person__in:hover{ background:var(--green); }
.person__in:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }

.person__body{ padding:clamp(18px,1.7vw,24px); display:flex; flex-direction:column;
               gap:10px; flex:1; }
.person__body h3{ font-size:clamp(18px,1.7vw,21px); font-weight:500;
                  letter-spacing:-.025em; line-height:1.25; }
.person__role{ font-size:13px; font-weight:500; color:var(--green);
               letter-spacing:-.01em; margin-top:-7px; }
.person__exp{ font-size:12.5px; line-height:1.5; color:var(--ink-2); }

.person__chips{ display:flex; flex-wrap:wrap; gap:6px; }
.person__chips li{
  font-size:11px; line-height:1.5; letter-spacing:.005em;
  padding:3px 10px; border-radius:7px;
  background:var(--paper-2); border:1px solid var(--line); color:var(--ink-2);
  transition:background .3s, color .3s, border-color .3s;
}
.person:hover .person__chips li{ border-color:var(--line-2); }
.person__chips li:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }

.person__facts{ margin-top:auto; padding-top:12px; border-top:1px solid var(--line);
                display:flex; flex-direction:column; gap:6px; }
.person__facts > div{ font-size:11.5px; line-height:1.45; color:var(--ink-2); }
.person__facts dt{ display:inline; font-weight:500; color:var(--ink); }
.person__facts dt::after{ content:':'; }
.person__facts dd{ display:inline; margin-left:4px; }

/* ═══════════ STACK ROW ═══════════ */
.stack-row{ padding:clamp(50px,7vw,90px) 0; border-top:1px solid var(--line); }
.stack-row__list{
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:18px; overflow:hidden;
  margin-top:26px;
}
.stack-row__list li{
  background:var(--paper); display:grid; place-items:center;
  padding:clamp(16px,2vw,26px) clamp(8px,1.4vw,18px);
  transition:background .35s var(--ease);
}
.stack-row__list li:hover{ background:var(--paper-2); }
.stack-row__list img{
  width:auto; height:clamp(26px,2.4vw,34px);
  opacity:.42; transition:opacity .35s var(--ease), transform .45s var(--ease);
}
.stack-row__list li:hover img{ opacity:1; transform:translateY(-2px); }

/* ═══════════ CONTACT ═══════════ */
.contact{ padding:clamp(70px,9vw,130px) 0; text-align:center; }
.avail{ display:inline-flex; align-items:center; gap:8px; color:var(--ink-3);
        margin-bottom:16px; }
.avail i{ width:7px; height:7px; border-radius:50%; background:var(--green);
          box-shadow:0 0 0 0 rgba(0,163,74,.45); animation:pulse 2.4s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 8px rgba(0,163,74,0); }
                  100%{ box-shadow:0 0 0 0 rgba(0,163,74,0); } }
.form{ max-width:600px; margin-inline:auto; display:flex; flex-direction:column; gap:10px;
       text-align:left; }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.field input,.field textarea{
  width:100%; padding:17px 18px; background:var(--paper-2); border-radius:12px;
  font-size:14.5px; resize:vertical; border:1px solid transparent;
  transition:background .35s, border-color .35s;
}
.field input::placeholder,.field textarea::placeholder{ color:var(--ink-3); }
.field input:focus,.field textarea:focus{ background:#fff; border-color:var(--ink); }
.field.bad input,.field.bad textarea{ border-color:#C6483C; }
.form__note{ color:var(--green); min-height:16px; text-align:center; }
.form__note.bad{ color:#C6483C; }
.contact__details{ display:flex; flex-wrap:wrap; justify-content:center;
                   gap:12px clamp(20px,3vw,40px); margin-top:clamp(30px,4vw,48px);
                   color:var(--ink-3); }

/* ═══════════ FOOTER ═══════════ */
.foot{ padding-top:clamp(56px,7vw,96px); border-top:1px solid var(--line);
       overflow:hidden; }
.foot__grid{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px); padding-bottom:clamp(44px,6vw,84px);
}
.foot__say h2{
  font-size:clamp(26px,3.6vw,52px); font-weight:600; line-height:1.02;
  letter-spacing:-.04em; text-transform:uppercase; padding-bottom:.06em;
}
.foot__say p{ margin-top:20px; color:var(--ink-2); font-size:12px; }

.foot__col{ display:flex; flex-direction:column; gap:9px; }
/* footer was set a size below everything else it sits next to */
.foot__col a{ width:fit-content; font-size:17px; color:var(--ink-2);
              transition:color .3s, transform .4s var(--ease); }
.foot__col a:hover{ color:var(--ink); transform:translateX(4px); }
/* social row sits under the contact lines */
.foot__soc{ display:flex; align-items:center; gap:14px; margin-top:2px; }
.foot__soc a{
  display:grid; place-items:center; width:38px; height:38px; border-radius:10px;
  background:var(--paper-2);
  transition:background .3s var(--ease), transform .4s var(--ease);
}
.foot__soc img{ width:19px; height:19px; opacity:.66; transition:opacity .3s; }
.foot__soc a:hover{ background:var(--ink); transform:translateY(-2px); }
.foot__soc a:hover img{ opacity:1; filter:invert(1); }
.foot__gap{ height:clamp(14px,2vw,26px); }

.foot__locs{ display:flex; flex-direction:column; gap:clamp(20px,2.4vw,34px); }
.foot__locs p.mono{ display:flex; align-items:center; gap:8px; color:var(--ink); font-size:12px;
                    margin-bottom:10px; }
.mk{ width:7px; height:7px; background:var(--green); flex-shrink:0;
     clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.foot__locs p:not(.mono){ color:var(--ink-2); font-size:16px; line-height:1.75; }

.foot__base{
  display:flex; justify-content:space-between; align-items:center;
  gap:10px 28px; flex-wrap:wrap;
  margin-top:clamp(24px,3.2vw,42px);
  padding:18px 0 26px;
  border-top:1px solid var(--line);
  color:var(--ink-3);
}
/* quieter than a section label: this is a legal strip, not a heading */
.foot__base.mono, .foot__base .mono{ font-size:12px; letter-spacing:.1em; font-weight:400; }
.foot__base > span{ font-size:12px; letter-spacing:.1em; }
.foot__tag{ flex:1 1 auto; text-align:center; }
.foot__credit a{ color:var(--ink-2); font-weight:500; transition:color .3s; }
.foot__credit a:hover{ color:var(--green); }
.foot__credit i{ font-style:normal; display:inline-block;
                 transition:transform .4s var(--ease); }
.foot__credit a:hover i{ transform:translate(2px,-2px); }

@media (max-width:900px){
  .foot__grid{ grid-template-columns:1fr 1fr; }
  .foot__say{ grid-column:1 / -1; }
}
@media (max-width:600px){
  .foot__grid{ grid-template-columns:1fr; }
  .foot__base{ flex-direction:column; gap:6px; }
}


/* ═══════════ PAGE TRANSITION CURTAIN ═══════════
   Five vertical panels wipe up to cover, then down to reveal, so navigating
   between pages reads as one continuous motion instead of a white flash. */
.curtain{ position:fixed; inset:0; z-index:9999; pointer-events:none;
          display:grid; grid-template-columns:repeat(5,1fr); }
.curtain i{ background:var(--ink); transform:scaleY(0); transform-origin:bottom;
            transition:transform .62s cubic-bezier(.76,0,.24,1); }
.curtain i:nth-child(1){ transition-delay:0s }
.curtain i:nth-child(2){ transition-delay:.05s }
.curtain i:nth-child(3){ transition-delay:.1s }
.curtain i:nth-child(4){ transition-delay:.15s }
.curtain i:nth-child(5){ transition-delay:.2s }
.curtain.cover i{ transform:scaleY(1); }
.curtain.reveal i{ transform:scaleY(0); transform-origin:top; }

/* ═══════════ SCROLL PROGRESS ═══════════ */
.sprog{ position:fixed; top:0; left:0; right:0; height:2px; z-index:9998;
        pointer-events:none; }
.sprog i{ display:block; height:100%; width:0%; background:var(--green); }

/* ═══════════ LINE-MASK HEADINGS ═══════════ */
[data-lines] .ln{ display:block; overflow:hidden; }
[data-lines] .ln > i{ display:block; font-style:normal; padding-bottom:.12em;
                      transform:translateY(105%); }
[data-lines].in .ln > i{ transform:none;
  transition:transform 1s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--n) * 85ms); }

/* ═══════════ IMAGE WIPE ═══════════ */
/* ═══════════ STRATA ═══════════
   Panel row from the produx reference: five columns that trade width as you
   move across them, the open one carrying its label. Widths are flex-grow, so
   the row always fills exactly and never overflows. */
.strata{ padding:clamp(50px,7vw,90px) 0 clamp(60px,8vw,110px); }
.strata__row{ display:flex; gap:clamp(6px,.8vw,12px); margin-top:26px;
              height:clamp(260px,42vw,470px); }
.strata__p{
  position:relative; flex:1 1 0; min-width:0; overflow:hidden;
  border-radius:16px; background:var(--paper-2);
  transition:flex-grow .8s var(--ease);
  cursor:default;
}
.strata__p img{ position:absolute; inset:0; width:100%; height:100%;
                object-fit:cover; display:block;
                transform:scale(1.06); transition:transform 1.1s var(--ease); }
.strata__row:hover .strata__p{ flex-grow:.72; }
.strata__row .strata__p:hover,
.strata__row .strata__p.is-open{ flex-grow:3.1; }
.strata__p:hover img, .strata__p.is-open img{ transform:scale(1); }

.strata__t{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; flex-direction:column; gap:4px;
  padding:clamp(14px,1.4vw,22px);
  background:linear-gradient(0deg, rgba(10,11,12,.62), rgba(10,11,12,0));
  color:#fff;
}
.strata__t b{ font-size:clamp(13px,1.25vw,18px); font-weight:400;
              letter-spacing:-.025em; line-height:1.2; }
.strata__t em{ font-style:normal; color:rgba(255,255,255,.72);
               opacity:0; transform:translateY(6px);
               transition:opacity .5s var(--ease), transform .6s var(--ease); }
.strata__p:hover .strata__t em,
.strata__p.is-open .strata__t em{ opacity:1; transform:none; }

/* ═══════════ MOSAIC ASSEMBLY ═══════════ */
[data-mosaic]{ position:relative; overflow:hidden; }
[data-mosaic] img{ opacity:0; transition:opacity .5s ease; }
[data-mosaic].done img{ opacity:1; }
.mz{ position:absolute; inset:0; z-index:2; pointer-events:none; display:block; }
.mz i{
  position:absolute; display:block; background-repeat:no-repeat;
  opacity:0; filter:blur(8px);
  transform:translate3d(var(--dx,0),var(--dy,0),0) scale(.46) rotate(var(--r,0deg));
  transition:opacity .55s var(--ease), transform .95s var(--ease), filter .7s var(--ease);
  transition-delay:var(--dly,0s);
  will-change:transform,opacity;
}
.mz.in i{ opacity:1; filter:blur(0); transform:none; }
[data-mosaic].done .mz{ opacity:0; transition:opacity .5s ease; }
@media (prefers-reduced-motion:reduce){
  [data-mosaic] img{ opacity:1 !important; }
  .mz{ display:none !important; }
}

[data-wipe]{ clip-path:inset(0 0 100% 0); }
[data-wipe].in{ clip-path:inset(0 0 0% 0);
  transition:clip-path 1.15s cubic-bezier(.76,0,.24,1); }
[data-wipe] img{ --ps:1.14;
  transform:translate3d(0,var(--py,0px),0) scale(var(--ps));
  transition:--ps 1.5s cubic-bezier(.22,1,.36,1), transform .1s linear; }
[data-wipe].in img{ --ps:1; }
@supports not (transition: --ps 1s){
  /* browsers without registered-property transitions still land on scale 1 */
  [data-wipe] img{ transition:transform 1.5s cubic-bezier(.22,1,.36,1); }
}

/* ═══════════ PARALLAX + MAGNETIC ═══════════ */
[data-para]{ will-change:transform; }
[data-mag]{ transition:transform .55s cubic-bezier(.22,1,.36,1); }

@media (prefers-reduced-motion:reduce){
  .curtain{ display:none; }
  [data-lines] .ln > i{ transform:none !important; }
  [data-wipe]{ clip-path:none !important; }
  [data-wipe] img{ transform:none !important; }
}


/* ═══════════ TOUCH FEEDBACK ═══════════
   Every tactile cue on this site was a :hover state, which a phone never
   fires, so taps felt dead. These give the same affordances to touch. */
@media (hover:none), (pointer:coarse){
  /* kill the grey flash, then supply real feedback instead */
  *{ -webkit-tap-highlight-color:transparent; }

  .pill:active{ transform:scale(.96); }
  .pill--dark:active{ background:#22262A; }
  .pill--light:active{ background:var(--paper-3); }
  .person__in:active{ background:var(--green); color:#fff; }
  .person__chips li:active{ background:var(--ink); border-color:var(--ink); color:#fff; }
  .chip:active{ background:var(--ink); color:#fff; }

  .proj:active .proj__art{ box-shadow:0 18px 40px -22px rgba(10,11,12,.4); }
  .proj:active .proj__art img{ transform:translate3d(0,var(--py,0px),0) scale(1.03); }
  .cap:active{ background:var(--paper-2); }
  .inds__list li:active{ padding-left:12px; }
  .inds__list li:active i{ color:var(--green); transform:translate(4px,-4px); }
  .person:active .person__shot img{ --ps:1.045; }
  .person:active .person__in{ background:var(--green); }
  .foot__col a:active, .foot a:active{ color:var(--ink); }
  .strip__grp span:active{ color:var(--ink); }
  .stack-row__list li:active{ color:var(--ink); }
  .menu__links a:active{ color:var(--green); }

  /* the arrow on industry rows is hidden on small screens; keep the row itself
     reading as tappable */
  .inds__list li{ transition:padding-left .3s var(--ease), background .3s var(--ease); }
}

/* ═══════════ REVEALS ═══════════ */
.rv{ opacity:0; transform:translateY(24px); }
.rv.in{ opacity:1; transform:none;
        transition:opacity .9s var(--ease), transform 1s var(--ease);
        transition-delay:calc(var(--d,0) * 80ms); }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1080px){
  .caps__grid{ grid-template-columns:repeat(2,1fr); }
  .steps__grid{ grid-template-columns:repeat(2,1fr); }
  .pill--seg{ display:none; }
}
@media (max-width:820px){
  .stat{ grid-template-columns:1fr auto; row-gap:16px; }
  .stat__track{ grid-column:1 / -1; }
  .creed__say{ max-width:none; }
  .inds__list li{ grid-template-columns:34px minmax(0,1fr); }
  .inds__list i{ display:none; }
  .inds__list p{ grid-column:2; margin-top:6px; }
}
@media (max-width:640px){
  /* Full-screen hero on a phone. The old version centred the title and pushed
     the foot to the bottom with margin-top:auto, which on a tall screen left a
     hole in the middle. Here everything reads top to bottom in one flow —
     title, line, buttons — and the leftover space goes to the scroll cue at
     the bottom, so the height is spent rather than empty. */
  /* Full screen, but the type has to earn the height or the block just floats
     in the middle of it. Bigger title, bigger supporting line, roomier button
     row — the content fills the screen instead of the padding doing it. */
  .hero{
    min-height:100svh; justify-content:center;
    /* the nav eats the top, so the block is nudged down to sit optically
       centred rather than mathematically centred */
    padding:calc(var(--nav-h) + 10px) 0 calc(18px + env(safe-area-inset-bottom));
  }
  .hero__title{ font-size:clamp(48px,14.8vw,78px); line-height:.99; }

  /* One axis for the whole hero. The title was centred while the eyebrow,
     the line and the buttons ran off the left edge, which is what made it
     look thrown together. Everything shares the centre line now, and the
     copy is narrow enough to sit inside the clean gap in the dot field
     instead of being typed over it. */
  .hero__foot{
    margin-top:clamp(46px,8.2vh,78px); padding-top:0;
    flex-direction:column; align-items:center; text-align:center;
    gap:clamp(24px,3.6vh,34px);
  }
  .hero__foot-l{ display:flex; flex-direction:column; align-items:center; }
  /* balance evens the rag so the last line is not a two-word orphan */
  .hero__blurb{ margin:16px auto 0; font-size:16.5px; line-height:1.55;
                max-width:29ch; text-wrap:balance; }
  .hero__foot-r{ width:100%; max-width:356px; gap:10px; justify-content:center; }
  .hero__foot-r .pill{ flex:1 1 0; justify-content:center; min-width:0; height:54px; }
  .orb{ top:44%; width:min(500px,116vw); }

  .caps__grid,.steps__grid{ grid-template-columns:1fr; }
  .ideas{ grid-template-columns:1fr; }
  .stack-row__list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* five columns cannot share a phone: scroll them instead */
  .strata__row{ height:auto; overflow-x:auto; scroll-snap-type:x mandatory;
                scrollbar-width:none; }
  .strata__row::-webkit-scrollbar{ display:none; }
  .strata__p{ flex:0 0 62vw; height:64vw; scroll-snap-align:center; }
  .strata__row:hover .strata__p,
  .strata__row .strata__p:hover{ flex-grow:0; }
  .strata__t em{ opacity:1; transform:none; }
  /* Full-screen on a phone. The drift radius is a fraction of the short side,
     so left alone the ring collapses onto the middle of the screen and the work
     crosses the headline instead of passing behind it. Eight screens rather
     than twelve, smaller, and a scrim that spans the text block rather than
     sitting behind it as a small disc. */
  .orbit{ min-height:100svh; padding:clamp(70px,12vw,100px) 0; }
  .orbit .oc:nth-child(n+9){ display:none; }
  .orbit .oc--phone{ --ow:76px; } .orbit .oc--wide{ --ow:128px; } .orbit .oc--tall{ --ow:90px; }
  /* The ring is wider than it is tall, which suited a short section. Now that
     the section is the whole screen, stretch the field vertically so the drift
     fills a portrait frame — and counter-scale the screens themselves by
     exactly the inverse, so the ring changes shape and the cards do not. */
  .orbit__field{ transform:scale(1.15,1.95); transform-origin:50% 50%; }
  .orbit .oc img{ transform:scale(0.870,0.513); }
  .orbit .oc img{ box-shadow:0 14px 30px -20px rgba(10,11,12,.4); }
  .orbit__veil{
    background:radial-gradient(52% 40% at 50% 50%,
      var(--paper-2) 0%, var(--paper-2) 52%, rgba(242,243,244,0) 100%);
  }
  .team__grid{ grid-template-columns:1fr; gap:16px; }
  /* full-bleed 19:14 is a lot of photo on a phone — crop tighter so the
     credentials stay near the top of the card */
  .person__shot{ aspect-ratio:16/10; }
  .stack-row__list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .f2{ grid-template-columns:1fr; }
  .nav__brand span{ display:none; }
  .foot__base{ flex-direction:column; gap:6px; }
  .menu__foot{ flex-direction:column; gap:5px; }
  /* the rail already scrolls; on a phone just narrow the card and flatten the
     turn so the side cards stay legible instead of edge-on */
  .flow{ --tc-w:min(76vw,320px); perspective:900px; }
  .tcard{ transform:rotateY(calc(var(--t,0) * -22deg))
                    translateZ(calc(abs(var(--t,0)) * -90px))
                    scale(calc(1 - abs(var(--t,0)) * .07)); }
}

/* ═══════════ REDUCED MOTION ═══════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
                        transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .rv{ opacity:1 !important; transform:none !important; }
  .hero__title .line i,.pre__row span{ transform:none !important; }
  .pre{ display:none; }
  .orbit .oc{ opacity:var(--o,.8) !important;
              transform:translate3d(var(--x1),var(--y1),0) rotate(var(--a)) scale(var(--s1)); }
  .orbit__mark{ transform:none !important; }
}