@charset "utf-8";
/* ==========================================================================
   SAN Media Solution — Section 1 / Hero
   Geometry is authored in the reference artboard's own pixel grid
   (1536 x 1024). `--u` converts one artboard pixel into one screen pixel,
   so the composition scales without ever being redrawn.
   ========================================================================== */

@font-face {
  font-family: "InterVar";
  src: url("../fonts/inter-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "AntonSAN";
  src: url("../fonts/anton-san.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
}

/* ── tokens ───────────────────────────────────────────────────────────── */
:root {
  --art-w: 1536;
  --art-h: 1024;
  --u: min(0.0651042vw, 0.0976563vh);

  --ink: #000;
  --ink-2: #1b1b1f;
  --ink-3: #4a4a4e;
  --ink-4: #58585c;
  --ink-5: #939395;
  --rule: #dcdce0;

  --lime: #98f014;
  --lime-h1: #9cdd2e;
  --lime-soft: #cdeea6;

  --paper: #fefefe;
  --paper-2: #f7f7f7;

  --sans: "InterVar", "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* The team plate and everything registered to it hang off the artboard's
     optical centre, so the group never drifts apart on a wider screen.
     Edge-anchored copy (headline, rail, statistics) keeps using percentages
     and simply breathes outward. */
  /* Hero section replacement .PNG (1536 x 1024) drawn at 0.70721, uniform,
     so its people fill the box the artwork's first group occupied — the same
     floor line under the shoes, the same head line, the same centre (see
     tools/build_team.py). */
  --plate-w: 1086.28;
  --plate-h: 724.19;
  --plate-x: 809.49;          /* its centre line */
  --plate-y: 240.94;          /* its top edge */

  /* motion */
  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-soft: cubic-bezier(.22, .61, .18, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }

.u-sr, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip:focus {
  position: fixed; z-index: 99; inset: 12px auto auto 12px;
  padding: 10px 16px; background: #000; color: #fff;
  border-radius: 8px; font-size: 14px; font-weight: 600;
}

/* ── stage & depth planes ─────────────────────────────────────────────── */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: calc(var(--art-h) * var(--u));
  overflow: hidden;
  background: var(--paper);
  contain: layout paint;
}

.stage {
  position: absolute;
  inset: 0;
  perspective: calc(1400 * var(--u));
  perspective-origin: 50% 46%;
}

.world {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.plane {
  position: absolute;
  inset: 0;
  --d: 0;
  transform: translate3d(0, 0, calc(var(--d) * var(--u)))
             scale(calc((1400 - var(--d)) / 1400));
  transform-style: preserve-3d;
  will-change: transform;
}
.plane--back   { --d: -260; }
.plane--san    { --d: -168; }
.plane--ink    { --d: -132; }
.plane--team   { --d: 0; }
.plane--fronds { --d: 150; }

/* ── backdrop ─────────────────────────────────────────────────────────── */
.paper {
  position: absolute;
  inset: -14%;
  background:
    radial-gradient(120% 78% at 50% 6%, #fff 0%, #fdfdfd 46%, #f6f6f6 100%),
    var(--paper);
}

.arc {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(520 * var(--u));
  height: auto;
  opacity: .95;
}

/* the outlined card that runs off the left edge */
.frame-card {
  position: absolute;
  left: calc(-64 * var(--u));
  top: calc(126 * var(--u));
  width: calc(107 * var(--u));
  height: calc(156 * var(--u));
  border: calc(1.8 * var(--u)) solid var(--lime-soft);
  border-radius: calc(30 * var(--u));
}

/* ── the oversized house mark ─────────────────────────────────────────── */
.san {
  --san-x: 525;          /* left edge, artboard px  */
  --san-y: 239;          /* line-box top, artboard px */
  position: absolute;
  left: calc(50% + (var(--san-x) - 768) * var(--u));
  top: calc(var(--san-y) * var(--u));
  font-family: "AntonSAN", "Anton", Impact, sans-serif;
  font-size: calc(393 * var(--u));
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  user-select: none;
}
.san span {
  display: block;
  background: linear-gradient(184deg, #3b3b3b 0%, #3f3f3f 13%, #444444 24%,
                              #5a5a5a 36%, #757575 47%, #8d8d8d 59%,
                              #a6a6a6 71%, #c8c8c8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── handwritten lettering ────────────────────────────────────────────── */
.ink { position: absolute; }
.ink svg { width: 100%; height: auto; overflow: visible; }
.ink .pen { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; }

.ink--grow {
  left: calc(50% - 62 * var(--u));
  top: calc(133 * var(--u));
  width: calc(354 * var(--u));
}
.ink--quote {
  position: absolute;
  left: calc(1336 * 100% / 1536);
  top: calc(466 * var(--u));
  width: calc(170 * var(--u));
}

/* ── team ─────────────────────────────────────────────────────────────── */
/* The cutout is one finished asset — every person, the chair and the
   pedestals on the alpha channel it was delivered with. It is drawn whole, at
   the artwork's scale, and only ever moved as a complete element. */
.team {
  position: absolute;
  left: calc(50% + (var(--plate-x) - 768) * var(--u));
  top: calc(var(--plate-y) * var(--u));
  width: calc(var(--plate-w) * var(--u));
  aspect-ratio: 1536 / 1024;
  translate: -50% 0;
}
/* a layer covers the cutout's own canvas unless it says otherwise, so a set
   of per-person cutouts exported from the same frame lines up untouched */
.team__layer {
  position: absolute;
  left: var(--x, 0%);
  top: var(--y, 0%);
  width: var(--w, 100%);
  transform-origin: 50% 100%;
}
.team__layer img { display: block; width: 100%; height: auto; }
/* the light: a bright band with a lime edge, swept across the team by
   hero.js; masked by the cutout itself, so it lights the people and nothing
   around them. At rest it is not there. */
.team__light {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none; opacity: 0;
  /* the mask is the cutout itself: hero.js sets it from the picture's own
     (versioned) source, so the browser fetches the plate once */
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  mix-blend-mode: screen;
}
.team__light b {
  position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .12) 28%, rgba(255, 255, 255, .5) 45%,
    rgba(255, 255, 255, .66) 50%, rgba(200, 255, 140, .42) 57%, rgba(152, 240, 20, .22) 66%, rgba(255, 255, 255, 0) 100%);
  transform: translate3d(-140%, 0, 0) skewX(-14deg);
  filter: blur(calc(2 * var(--u)));
}

/* ── foliage ──────────────────────────────────────────────────────────── */
.frond { position: absolute; height: auto; }
.frond--l { left: 0; bottom: 0; width: calc(236 * var(--u)); }
.frond--r { right: 0; bottom: 0; width: calc(206 * var(--u)); }

/* ── interface ────────────────────────────────────────────────────────── */
.ui {
  position: absolute;
  inset: 0;
  transform: translateZ(0);
}
.ui > * { position: absolute; }

/* header ------------------------------------------------------------- */
/* The header lives outside the hero so it can stay with the reader and keep
   showing which section they are in. */
.bar {
  position: fixed;
  z-index: 60;
  left: 0; right: 0; top: 0;
  height: calc(94 * var(--u));
  transition: background .4s var(--e-soft), box-shadow .4s var(--e-soft);
}
.bar.is-stuck {
  background: rgba(255, 255, 255, .84);
  backdrop-filter: saturate(1.6) blur(16px);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  box-shadow: 0 1px 0 rgba(12, 14, 10, .07), 0 18px 40px -28px rgba(12, 14, 10, .5);
}

.brand {
  position: absolute;
  left: calc(74 * 100% / 1536);
  top: calc(20 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(11 * var(--u));
}
.brand__mark { width: calc(50 * var(--u)); height: auto; overflow: visible; }
.brand__text { display: block; }
.brand__slide { display: block; }
.brand__name {
  display: block;
  font-size: calc(21.3 * var(--u));
  font-weight: 800;
  letter-spacing: calc(-.2 * var(--u));
  line-height: calc(22 * var(--u));
  white-space: nowrap;
  color: #111;
}
.brand__name em { font-style: normal; color: var(--lime); }
.brand__sub {
  display: block;
  margin-top: calc(5 * var(--u));
  font-size: max(calc(11 * var(--u)), 9px);
  font-weight: 600;
  letter-spacing: calc(2.55 * var(--u));
  line-height: 1;
  color: #2a2a2e;
}

.nav {
  position: absolute;
  left: calc(485 * 100% / 1536);
  top: calc(41 * var(--u));
}
.nav ul { display: flex; align-items: baseline; gap: calc(48 * var(--u)); }
.nav a {
  position: relative;
  display: block;
  font-size: max(calc(13.7 * var(--u)), 10px);
  font-weight: 400;
  line-height: 1;
  color: var(--ink-5);
  transition: color .32s var(--e-soft);
}
.nav a:hover, .nav a:focus-visible { color: #16161a; }
.nav a.is-current { color: #101014; font-weight: 600; }
/* one indicator that travels to whichever section is on screen */
.nav__ul {
  position: absolute;
  left: 0;
  bottom: calc(-13 * var(--u));
  width: calc(19 * var(--u));
  height: calc(3.4 * var(--u));
  background: var(--lime);
  border-radius: 2px;
  transform-origin: 0 50%;
  translate: var(--ul-x, 0) 0;
  scale: var(--ul-w, 1) 1;
  transition: translate .58s var(--e-out), scale .58s var(--e-out);
}
.nav { position: relative; }

/* the brand leads the opening, so it sits above the rest of the interface
   until it has landed in the header */
.brand { z-index: 6; }
.js [data-hero]:not(.is-landed) .brand { will-change: transform; }
.js [data-hero]:not(.is-landed) .brand__text { overflow: hidden; }
.js [data-hero]:not(.is-landed) .brand__slide { transform: translate3d(104%, 0, 0); }
.brand__glow {
  position: absolute;
  left: 50%; top: 50%;
  width: calc(50 * var(--u)); aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(152, 240, 20, .55) 0%, rgba(152, 240, 20, 0) 68%);
  opacity: 0;
  pointer-events: none;
}

/* menu button — phones only */
.burger {
  position: absolute;
  right: calc(1209 * 100% / 1536);
  top: calc(23 * var(--u));
  display: none;
  width: calc(44 * var(--u)); height: calc(44 * var(--u));
  padding: 0; border: 0; background: none; cursor: pointer;
  align-items: center; justify-content: center;
}
.burger__box { display: block; width: calc(22 * var(--u)); }
.burger__box i {
  display: block; height: calc(2 * var(--u));
  background: #111; border-radius: 2px;
  transition: transform .42s var(--e-out), opacity .24s linear, width .42s var(--e-out);
  transform-origin: 50% 50%;
}
.burger__box i + i { margin-top: calc(5 * var(--u)); }
.burger__box i:last-child { width: 68%; margin-left: auto; }
.burger[aria-expanded="true"] .burger__box i:nth-child(1) { transform: translateY(calc(7 * var(--u))) rotate(45deg); }
.burger[aria-expanded="true"] .burger__box i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__box i:nth-child(3) { width: 100%; transform: translateY(calc(-7 * var(--u))) rotate(-45deg); }

/* pills --------------------------------------------------------------- */
/* the sheet's own call to action exists for the narrowest phones only (below) */
.nav a.nav__cta { display: none; }
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(13 * var(--u));
  background: #000;
  color: #fff;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow:
    0 0 0 calc(1.6 * var(--u)) var(--lime),
    0 0 calc(16 * var(--u)) calc(1 * var(--u)) rgba(152, 240, 20, .55),
    0 calc(4 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, .16);
  transition: transform .45s var(--e-out), box-shadow .45s var(--e-out);
}
.pill svg {
  width: calc(20 * var(--u));
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: calc(1.5 * var(--u));
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .45s var(--e-out);
}
.pill:hover, .pill:focus-visible {
  transform: translateY(calc(-2 * var(--u)));
  box-shadow:
    0 0 0 calc(1.6 * var(--u)) var(--lime),
    0 0 calc(26 * var(--u)) calc(2 * var(--u)) rgba(152, 240, 20, .7),
    0 calc(8 * var(--u)) calc(26 * var(--u)) rgba(0, 0, 0, .2);
}
.pill:hover svg, .pill:focus-visible svg { transform: translateX(calc(3 * var(--u))); }

.pill--sm {
  position: absolute;
  left: calc(1209 * 100% / 1536);
  top: calc(23 * var(--u));
  width: calc(259 * var(--u));
  height: calc(48 * var(--u));
  font-size: calc(15 * var(--u));
  font-weight: 700;
  letter-spacing: calc(-.1 * var(--u));
}
.pill--lg {
  position: absolute;
  left: calc(78 * 100% / 1536);
  top: calc(344 * var(--u));
  width: calc(228 * var(--u));
  height: calc(49 * var(--u));
  font-size: calc(15.4 * var(--u));
  font-weight: 700;
}

/* lede ---------------------------------------------------------------- */
.lede { left: 0; top: 0; right: 0; }

.eyebrow {
  position: absolute;
  left: calc(81 * 100% / 1536);
  top: calc(120 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(7 * var(--u));
  font-size: max(calc(12.2 * var(--u)), 10px);
  font-weight: 600;
  letter-spacing: calc(3.05 * var(--u));
  line-height: calc(14 * var(--u));
  color: #232327;
}
.eyebrow i {
  display: block;
  width: calc(27 * var(--u));
  height: calc(2 * var(--u));
  background: var(--lime);
  transform-origin: 0 50%;
}

.h1 {
  position: absolute;
  left: calc(81 * 100% / 1536);
  top: calc(145 * var(--u));
  margin: 0;
  font-size: calc(62 * var(--u));
  font-weight: 900;
  line-height: calc(60 * var(--u));
  letter-spacing: calc(-4.28 * var(--u));
  word-spacing: calc(12 * var(--u));
  font-kerning: none;
  font-feature-settings: "kern" 0;
  color: var(--ink);
}
.h1 em { font-style: normal; color: var(--lime-h1); }
.h1 .line {
  display: block;
  overflow: hidden;
  padding-bottom: calc(2 * var(--u));
  margin-bottom: calc(-2 * var(--u));
}
.h1 .line__in { display: block; }
.h1 .line:first-child { letter-spacing: calc(-3.28 * var(--u)); }

.sub {
  position: absolute;
  left: calc(81 * 100% / 1536);
  top: calc(270 * var(--u));
  font-size: calc(18.7 * var(--u));
  font-weight: 400;
  line-height: calc(26 * var(--u));
  letter-spacing: calc(-.15 * var(--u));
  color: var(--ink-3);
}

/* right rail ---------------------------------------------------------- */
.rail { right: calc(118 * 100% / 1536); top: calc(138 * var(--u)); text-align: right; }

.rail__list {
  font-size: max(calc(12.8 * var(--u)), 10px);
  font-weight: 500;
  letter-spacing: calc(2.5 * var(--u));
  line-height: calc(19.75 * var(--u));
  color: #3a3a3e;
}
.rail__list li { white-space: nowrap; }
.rail__list li:last-child {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(10 * var(--u));
}
.rail__list i {
  display: block;
  width: calc(33 * var(--u));
  height: calc(1.6 * var(--u));
  margin-right: calc(-42 * var(--u));
  background: var(--lime);
  transform-origin: 0 50%;
}
.rail__note {
  position: absolute;
  top: calc(112 * var(--u));
  right: calc(-31 * var(--u));
  width: max-content;
  text-align: left;
  font-size: calc(16.6 * var(--u));
  font-weight: 400;
  line-height: calc(23.5 * var(--u));
  letter-spacing: calc(-.1 * var(--u));
  color: #2b2b2f;
}

/* stats --------------------------------------------------------------- */
.stats {
  left: 0; right: 0;
  top: calc(943 * var(--u));   /* the row sits just under the lowest shoe */
  display: flex;
  align-items: flex-start;
}
.stats__list {
  display: flex;
  align-items: center;
  margin-left: calc(147 * 100% / 1536);
}
.stat {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(19 * var(--u));
  --g: 26;
  padding-right: calc(var(--g) * var(--u));
  margin-right: calc(var(--g) * var(--u));
}
.stat:nth-child(1) { --g: 24.5; }
.stat:nth-child(2) { --g: 27.5; }
.stat:nth-child(3) { --g: 32; }
.rule-v {
  position: absolute;
  left: calc(var(--g) * var(--u) * -1);
  top: calc(4 * var(--u));
  width: 1px;
  height: calc(41 * var(--u));
  background: var(--rule);
  transform-origin: 50% 0;
}
.stat__icon { height: auto; fill: #08080a; flex: none; }
.stat:nth-child(1) .stat__icon { width: calc(34 * var(--u)); }
.stat:nth-child(2) .stat__icon { width: calc(28 * var(--u)); }
.stat:nth-child(3) .stat__icon { width: calc(23 * var(--u)); }
.stat__icon--line { width: calc(37 * var(--u)); fill: none; stroke: #08080a; stroke-width: 2.2; }
.stat__body { display: block; }
.stat__body b {
  display: block;
  white-space: nowrap;
  font-size: calc(22.2 * var(--u));
  font-weight: 800;
  letter-spacing: calc(-.5 * var(--u));
  line-height: calc(23 * var(--u));
  color: #08080a;
  font-variant-numeric: tabular-nums;
}
.stat__body em {
  display: block;
  margin-top: calc(5 * var(--u));
  font-size: max(calc(12.5 * var(--u)), 10px);
  white-space: nowrap;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  color: var(--ink-4);
}

.pull {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(33 * var(--u));
  margin-left: calc(5 * var(--u));
}
.pull .rule-v { left: calc(-26 * var(--u)); top: calc(2 * var(--u)); }
.pull__rule {
  display: block;
  width: calc(35 * var(--u));
  height: calc(1.8 * var(--u));
  background: #17171b;
  flex: none;
  transform-origin: 0 50%;
}
.pull__q { width: calc(22 * var(--u)); height: auto; fill: var(--lime-h1); flex: none; }
.pull__q--open { align-self: flex-start; margin-top: calc(2 * var(--u)); }
.pull__q--close { align-self: flex-end; margin-bottom: calc(1 * var(--u)); }
.pull__text {
  margin: 0 calc(-14 * var(--u));
  font-size: calc(14.9 * var(--u));
  font-weight: 400;
  line-height: calc(22 * var(--u));
  letter-spacing: calc(-.1 * var(--u));
  color: #14141a;
  white-space: nowrap;
}

/* ── placeholders for the sections still to be built ──────────────────── */
.after { position: relative; z-index: 2; background: #0b0b0d; color: #f2f2f2; }
.after section[hidden], .after > [hidden] { display: none !important; }
.after section:not(.about):not(.svc):not(.snk):not(.grow):not(.deck):not(.work):not(.clients):not(.space):not(.touch):not(.how):not(.next):not(.squad) {
  display: flex;
  align-items: center;
  min-height: 72vh;
  padding: 10vh clamp(22px, 8vw, 120px);
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.after section:not(.about):not(.svc):not(.snk):not(.grow):not(.deck):not(.work):not(.clients):not(.space):not(.touch):not(.how):not(.next):not(.squad) h2 {
  margin: 0;
  font-size: clamp(30px, 5vw, 64px);
  font-weight: 900;
  letter-spacing: -.03em;
  color: #f4f4f4;
}

/* ══ opening choreography ═════════════════════════════════════════════ */
/* Pre-roll state. `.is-ready` is set by script the moment the type and the
   team plate have landed, so nothing is ever shown half-assembled. */
.js [data-hero]:not(.is-ready) .ui,
.js [data-hero]:not(.is-ready) .plane { visibility: hidden; }

[data-hero].is-ready.is-playing .h1 .line__in,
[data-hero].is-ready.is-playing [data-reveal] { will-change: transform, opacity; }

.js [data-reveal] { opacity: 0; }
.js .h1 .line__in { transform: translate3d(0, 105%, 0); }
.js .nav__ul,
.js .eyebrow i,
.js .rail__list i,
.js .pull__rule { transform: scaleX(0); }
.js .rule-v { transform: scaleY(0); }
.js .team__layer { opacity: 0; }
.js .san span { opacity: 0; }
.js .frond { opacity: 0; }
.js .arc, .js .frame-card { opacity: 0; }
.js .ink { opacity: 0; }

/* ── reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js .team__layer, .js .san span, .js .frond, .js .arc, .js .frame-card { opacity: 1 !important; }
  .js .h1 .line__in { transform: none !important; }
  .js .nav__ul, .js .eyebrow i,
  .js .rail__list i, .js .pull__rule { transform: none !important; }
  .js .rule-v { transform: none !important; }
  .js .ink { opacity: 1 !important; }
  .pill, .pill svg, .nav a { transition: none !important; }
}

/* ══ responsive ═══════════════════════════════════════════════════════ */

/* Very wide, short viewports: hold the artboard's vertical rhythm and let
   the extra width breathe rather than inflating the type. */
@media (min-aspect-ratio: 17/9) {
  :root { --u: min(0.0554vw, 0.0976563vh); }
}

/* ══════════════════════════════════════════════════════════════════════
   Narrow screens: the artboard is re-laid, not shrunk. The interface
   becomes a column, and the team plate stays a full-bleed backdrop
   anchored to the floor, exactly as it reads on the wide composition.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  :root {
    --u: min(0.118vw, 0.086vh);
    --floor: clamp(74px, 8vh, 118px);
    /* the header never drops under 50px, however short the viewport */
    --bar-h: max(calc(94 * var(--u)), 50px);
    /* the plate's box, so the mark and the ink can be set against it */
    --plate-stack-w: min(96vw, 1240px);
    --plate-stack-h: calc(var(--plate-stack-w) * 1024 / 1536);
  }

  /* hero.js sets --hero-min where the copy and the plate would not both fit:
     the hero then grows past the fold, and the page scrolls to the team */
  .hero { height: 100svh; min-height: max(620px, var(--hero-min, 0px)); }
  .stage { perspective: calc(1200 * var(--u)); perspective-origin: 50% 60%; }

  .bar { position: fixed; height: var(--bar-h); }
  .ui {
    display: flex;
    flex-direction: column;
    padding: calc(var(--bar-h) + 4px) clamp(20px, 3.2vw, 44px) clamp(14px, 1.8vw, 24px);
  }
  .ui > *, .bar > *, .lede > *, .rail > * { position: static; }

  .bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: clamp(10px, 2vw, 18px);
    padding: 0 clamp(20px, 3.2vw, 44px);
  }
  .brand { min-width: 0; flex: 0 0 auto; }
  /* on short viewports --u follows the height; the lockup keeps a legible floor */
  .brand__mark { width: max(calc(50 * var(--u)), 30px); }
  .brand__name { font-size: max(calc(21.3 * var(--u)), 13px); line-height: max(calc(22 * var(--u)), 14px); }
  .brand__sub { font-size: max(calc(11 * var(--u)), 8px); letter-spacing: max(calc(2.55 * var(--u)), 1.5px); }
  .burger { position: static; }
  .nav ul { gap: clamp(11px, 2.1vw, 30px); }
  .nav a { white-space: nowrap; font-size: clamp(9.5px, 1.15vw, 15px); }
  .pill--sm {
    width: auto; height: clamp(38px, 4.4vw, 48px); flex: none;
    padding: 0 clamp(13px, 1.7vw, 22px); gap: clamp(8px, 1vw, 13px);
    font-size: clamp(11.5px, 1.35vw, 15px);
  }

  .lede { margin-top: clamp(16px, 3vh, 44px); }
  .eyebrow { gap: clamp(6px, .8vw, 11px); font-size: clamp(9.5px, 1.15vw, 12.2px); letter-spacing: .26em; }
  .eyebrow i { width: clamp(18px, 2vw, 27px); }
  .h1 {
    margin-top: clamp(8px, 1.4vh, 18px);
    font-size: min(6.5vw, calc(62 * var(--u)));
    line-height: .95;
    letter-spacing: -.062em;
    word-spacing: normal;
  }
  .h1 .line:first-child { letter-spacing: -.055em; }
  .sub { margin-top: clamp(10px, 1.7vh, 20px); font-size: clamp(13.5px, 1.85vw, 20px); line-height: 1.42; }
  .pill--lg {
    margin-top: clamp(14px, 2.1vh, 26px); align-self: flex-start;
    width: auto; height: clamp(42px, 4.6vw, 50px);
    padding: 0 clamp(18px, 2.2vw, 28px); font-size: clamp(12.5px, 1.5vw, 16px);
  }

  .rail { margin-top: clamp(12px, 2vh, 22px); text-align: left; }
  .rail__list {
    display: flex; flex-wrap: wrap;
    gap: 0 clamp(11px, 1.7vw, 22px);
    font-size: clamp(9.5px, 1.1vw, 13px);
    letter-spacing: .2em;
    line-height: 1.9;
  }
  .rail__list li:last-child { display: inline; }
  .rail__list i { display: none; }
  .rail__note { margin-top: clamp(8px, 1.2vh, 14px); font-size: clamp(12.5px, 1.55vw, 17px); line-height: 1.45; }

  /* the plate stands on the floor and the copy stacks above it. The canvas
     carries 1.76% of clear space under the shoes and the group's centre sits
     50% across it, so the translate sets the *people* on the line. The group
     fills its canvas edge to edge, so the canvas stays inside the viewport. */
  .team {
    left: 50%;
    top: auto;
    bottom: var(--floor);
    width: var(--plate-stack-w);    /* the whole group always fits the viewport */
    translate: -50% 1.76%;
  }
  /* the mark stands behind the group's heads and shoulders, wherever the plate is */
  .san {
    left: 50%;
    top: auto;
    bottom: calc(var(--floor) + var(--plate-stack-h) * .5);
    font-size: min(32vw, 34vh);
    transform: translateX(-52%);
  }
  .ink--grow {
    left: auto; right: clamp(10px, 2vw, 30px);
    top: clamp(150px, 26vh, 300px);
    width: min(38vw, 300px);
  }
  .ink--quote { display: none; }
  /* foliage keeps to the corners here so it never stands in front of the outer people */
  .frond--l { width: min(20vw, 150px); }
  .frond--r { width: min(18vw, 130px); }
  .arc { width: min(70vw, 470px); }
  .frame-card { display: none; }

  .stats { margin-top: auto; top: auto; }
  .stats__list {
    margin-left: 0; width: 100%;
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 0 clamp(6px, 1vw, 14px);
  }
  .stat { --g: 0; padding-right: 0; margin-right: 0; gap: clamp(7px, 1vw, 14px); }
  .rule-v { display: none; }
  .stat__icon { width: clamp(18px, 2.3vw, 30px) !important; }
  .stat__body b { font-size: clamp(14px, 1.9vw, 24px); line-height: 1.1; }
  .stat__body em { font-size: clamp(9.5px, 1.25vw, 15px); white-space: normal; }
  .pull { display: none; }
}

/* Phones: two-up statistics, no primary nav, the plate fills the floor. */
@media (max-width: 720px) {
  :root { --u: min(0.2vw, 0.1vh); --floor: clamp(92px, 11.5vh, 124px); --plate-stack-w: min(96vw, 560px); }

  /* the sheet is a child of the bar, so its siblings are lifted over it */
  .brand, .burger, .pill--sm { position: relative; inset: auto; z-index: 40; }
  .burger { display: flex; order: 3; width: 40px; height: 40px; flex: none; }
  .burger__box { width: 21px; }
  .burger__box i { height: 2px; }
  .burger__box i + i { margin-top: 5px; }
  .burger[aria-expanded="true"] .burger__box i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .burger[aria-expanded="true"] .burger__box i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* the primary nav becomes a sheet the menu button opens */
  .nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: 30;
    padding: 78px clamp(22px, 6vw, 40px) clamp(26px, 7vw, 44px);
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 24px 60px rgba(10, 12, 8, .12);
    transform: translate3d(0, -101%, 0);
    transition: transform .62s var(--e-out), visibility .62s;
    visibility: hidden;
  }
  .nav.is-open { transform: none; visibility: visible; }
  .nav ul { display: block; }
  .nav li + li { margin-top: 2px; }
  .nav a {
    font-size: clamp(21px, 6.4vw, 29px);
    font-weight: 600;
    line-height: 1.72;
    color: #131317;
  }
  .nav a.is-current { color: #000; }
  .nav__ul { display: none; }

  .brand { gap: clamp(5px, 1.8vw, 8px); }
  .brand__mark { width: clamp(23px, 6.6vw, 32px); }
  .brand__name { font-size: clamp(9.8px, 2.8vw, 15px); line-height: 1.15; }
  .brand__sub { margin-top: 2px; font-size: clamp(6.5px, 1.7vw, 7.5px); letter-spacing: .13em; }
  .pill--sm { order: 2; flex: 0 1 auto; min-width: 0; height: clamp(32px, 8.4vw, 38px); padding: 0 clamp(7px, 1.9vw, 13px); gap: 5px; font-size: clamp(9px, 2.15vw, 11px); }
  .pill--sm span { overflow: hidden; text-overflow: ellipsis; }
  .pill--sm svg { width: clamp(11px, 3.2vw, 15px); }
  .eyebrow { font-size: clamp(8px, 2.3vw, 10px); }
  .h1 { font-size: min(9.6vw, 44px); line-height: .98; letter-spacing: -.05em; }
  .h1 .line:first-child { letter-spacing: -.045em; }
  .rail__note { display: none; }

  .team { bottom: var(--floor); }
  .san { font-size: 38vw; }
  /* the ink rides on the plate: its foot just inside the clear canvas above the heads */
  .ink--grow { top: auto; bottom: calc(var(--floor) + var(--plate-stack-h) * .96); right: clamp(6px, 2.4vw, 18px); width: 43vw; }



  .stats__list { grid-template-columns: 1fr 1fr; gap: clamp(7px, 1.8vw, 13px) 0; }
  .stat__body b { font-size: clamp(13px, 3.7vw, 17px); }
  .stat__body em { font-size: clamp(8.5px, 2.4vw, 11px); }
  .stat__icon { width: clamp(16px, 4.4vw, 21px) !important; }
  .frond--l { width: 18vw; }
  .frond--r { width: 16vw; }
}

/* Phones up to 440px: the header keeps the lockup and the menu button; the
   call to action lives in the sheet instead of being clipped beside them. */
@media (max-width: 440px) {
  .pill--sm { display: none; }
  .nav a.nav__cta {
    display: inline-flex; margin-top: 18px; height: 46px; padding: 0 22px; gap: 10px;
    font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: -.01em;
  }
  .nav a.nav__cta svg { width: 18px; }
}

/* Landscape phones and other short viewports: the copy keeps its column and
   the group stands whole beneath it, so the two never overlap — the hero
   grows past the fold and the page scrolls to the team. */
@media (max-width: 1080px) and (max-height: 540px) {
  :root { --floor: 62px; --plate-stack-w: min(96vw, 620px); }
  .hero { min-height: max(700px, var(--hero-min, 0px)); }
  .h1 { font-size: min(6vw, 40px); }
  .rail, .ink--grow { display: none; }
}