styles.css

/* ------------------------------------------------------------------
   Colmez LP (Figma: SR007 / LP 9236:1110)
   Design frame: 1496 wide. --u = 1 design px, fluid.
   Scroll choreography lives in main.js and drives the custom props below.
------------------------------------------------------------------ */

@font-face {
  font-family: "Overused Grotesk";
  src: url("assets/fonts/OverusedGrotesk-VF.woff2") format("woff2"),
       url("assets/fonts/OverusedGrotesk-VF.woff") format("woff");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --c-black: #121212;
  --c-white: #ffffff;
  --c-grey-200: #737373;
  --c-grey-800: #313131;
  --c-gold-500: #ae9a29;
  --c-gold-700: #38360d;

  --u: calc(100vw / 1496);
  --gutter: calc(40 * var(--u));
  --content-w: calc(1416 * var(--u));

  --font: "Overused Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* scroll track length of the stage (100vh pinned + this much scrolling).
     The original choreography keeps its 420vh feel (main.js maps Pw over
     420vh of scroll); 330vh cuts the dead tail — the waste/pattern exit now
     happens DURING the crisis ride-in, driven by its entry progress E. */
  --stage-track: 330vh;

  /* scroll room for the pinned crisis accordion (two hand-over phases) */
  --crisis-track: 200vh;

  /* scroll room for the pinned team carousel (three member hand-overs) */
  --team-track: 210vh;
  /* band height: Figma's 1216u left ~388u of dead air under the last member,
     halved on the client rev */
  --team-h: calc(1022 * var(--u));
}

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

html { background: var(--c-black); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--font);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }

.lp {
  width: 100%;
  container-type: inline-size;
}
@supports (width: 1cqw) {
  .lp { --u: calc(100cqw / 1496); }
}

/* mobile-only hero block (see the media query at the end of the file) */
.mhero { display: none; }

/* ---------- STAGE ---------- */

.stage {
  position: relative;
  height: calc(100vh + var(--stage-track));
}

.stage__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--c-black);
}

/* full-viewport layers */
.layer {
  position: absolute;
  inset: 0;
}

/* ---------- HERO COPY (Figma: headline at 40/271, 529 wide) ---------- */

.hero-copy {
  position: absolute;
  left: var(--gutter);
  top: calc(271 * var(--u));
  width: calc(529 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
  z-index: 1;
}

.hero-copy__headline {
  font-size: calc(48 * var(--u));
  line-height: 1;
  letter-spacing: -0.02em;
  --hbase: var(--c-white);
}

.hero-copy__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: calc(14 * var(--u));
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--c-grey-200);
  white-space: nowrap;
  --hbase: var(--c-grey-200);
}

/* preloader entry variant: same sweep, but it leaves the base colour behind
   (words appear); main.js swaps back to the dissolve gradient at handoff */
.hero-copy .hw.win {
  background-image: linear-gradient(90deg,
    var(--hbase) 0%,
    var(--hbase) var(--fill),
    var(--c-gold-500) calc(var(--fill) + var(--edge-w)),
    var(--c-grey-800) calc(var(--fill) + var(--tail-w)),
    var(--c-grey-800) 100%);
}

/* hero words dissolve left→right with the same gold shimmer as the list below,
   but in reverse: the sweep leaves transparency behind instead of white */
.hero-copy .hw {
  display: inline-block;
  padding: 0.14em 0 0.24em;
  margin: -0.14em 0 -0.24em;
  --fill: -40%;   /* fully left of the word incl. the tail, so no gold at rest */
  --edge-w: 14%;
  --tail-w: 34%;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg,
    transparent 0%,
    transparent var(--fill),
    var(--c-gold-500) calc(var(--fill) + var(--edge-w)),
    var(--hbase) calc(var(--fill) + var(--tail-w)),
    var(--hbase) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  background-repeat: no-repeat;
}

/* ---------- PATTERN (vector canvas under the photo, inside the same box) ---------- */

.pattern-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--c-black);
}

/* ---------- PHOTO LAYER (Figma: 1496×820 at y=460, rises to y=0) ---------- */

.layer--photo {
  z-index: 3;
  top: calc(460 * var(--u));
  height: 100vh;
  transform: translate3d(0, calc(var(--rise, 0) * -460 * var(--u)), 0);
  will-change: transform;
}
.photo__canvas,
.photo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.photo__img { object-fit: cover; }
.layer--photo.has-gl .photo__img { display: none; }
.layer--photo:not(.has-gl) .photo__canvas { display: none; }
.layer--photo:not(.has-gl) .photo__img { opacity: calc(1 - var(--dissolve, 0)); }

/* ---------- TEXT LAYER ---------- */

.layer--text {
  z-index: 4;
  pointer-events: none;
}

.waste {
  position: absolute;
  left: calc(50% - 110 * var(--u));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: calc(64 * var(--u));
  font-size: calc(50 * var(--u));
  line-height: 1;
  letter-spacing: -0.02em;
}

.waste__list {
  width: calc(748 * var(--u));
  --fill: -24%;
  --edge-w: 14%;   /* relative to one word now, so wider */
  --tail-w: 34%;
}

/* Each word carries its own copy of the sweep gradient. JS sets background-size
   to the paragraph width and background-position to the word offset, so all
   words share one continuous sweep. (Gradient on the parent + composited word
   transforms mis-renders in Chromium, hence per-word backgrounds.) */
.waste .w {
  display: inline-block;
  opacity: 0;
  padding: 0.14em 0 0.24em;   /* room for ascenders/descenders inside the bg box */
  margin: -0.14em 0 -0.24em;  /* …without changing layout */
  will-change: transform, opacity;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg,
    var(--c-white) 0%,
    var(--c-white) var(--fill),
    var(--c-gold-500) calc(var(--fill) + var(--edge-w)),
    var(--c-grey-800) calc(var(--fill) + var(--tail-w)),
    var(--c-grey-800) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  background-repeat: no-repeat;
}

/* superscripts: grey-800 like the text while sliding in; the sweep turns them
   grey-200 (instead of white). Own gradient copy, aligned by JS like the words. */
.waste__list sup {
  display: inline-block;
  font-size: 0.5em;
  line-height: 0;
  vertical-align: 0.55em;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg,
    var(--c-grey-200) 0%,
    var(--c-grey-200) var(--fill),
    var(--c-gold-500) calc(var(--fill) + var(--edge-w)),
    var(--c-grey-800) calc(var(--fill) + var(--tail-w)),
    var(--c-grey-800) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  background-repeat: no-repeat;
}

/* lead: word-by-word, same mechanics as the list (via .waste .w) */
.waste__lead {
  width: calc(818 * var(--u));
  --fill: -24%;
  --edge-w: 14%;
  --tail-w: 34%;
}

/* dissolve-out (stage exit): hero-style — the sweep leaves transparency
   behind the gold edge instead of white. main.js swaps the class per word. */
.waste .w.wout {
  background-image: linear-gradient(90deg,
    transparent 0%,
    transparent var(--fill),
    var(--c-gold-500) calc(var(--fill) + var(--edge-w)),
    var(--c-white) calc(var(--fill) + var(--tail-w)),
    var(--c-white) 100%);
}
.waste__list sup.wout {
  background-image: linear-gradient(90deg,
    transparent 0%,
    transparent var(--fill),
    var(--c-gold-500) calc(var(--fill) + var(--edge-w)),
    var(--c-grey-200) calc(var(--fill) + var(--tail-w)),
    var(--c-grey-200) 100%);
}

/* ---------- SCROLL HINT (Figma: 40×129 at right gutter, y=661) ---------- */

.scroll-hint {
  position: absolute;
  z-index: 5;
  bottom: calc(64 * var(--u));
  right: var(--gutter);
  width: calc(40 * var(--u));
  height: calc(129 * var(--u));
  padding: 0 calc(12 * var(--u)) calc(8 * var(--u));
  background: var(--c-grey-200);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-size: calc(16 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  opacity: var(--hint, 1);
}
.scroll-hint__arrow {
  display: inline-block;
  transform: rotate(90deg);
}

/* ---------- NAV (logo + CTA) ----------
   Rest state = Figma hero positions. main.js interpolates top/left/width/height
   towards the compact nav state (logo 24px tall top-left, CTA top-right). */

.nav {
  position: fixed;
  inset: 0;
  z-index: 50; /* above every section — the compact nav rides the whole page */
  pointer-events: none;
}
.nav > * { pointer-events: auto; }

.nav__logo {
  position: absolute;
  left: var(--gutter);
  top: var(--gutter);
  width: var(--content-w);
  height: calc(191 * var(--u));
  will-change: left, top, width, height;
}
.nav__logo img { width: 100%; height: 100%; }

/* hover fx: pattern revealed through liquid holes; the glyph clipping happens
   in the shader (logo.svg sampled as an alpha-mask texture — CSS mask-image on
   a WebGL canvas is unreliable in Chromium) */
.nav__logo-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* compact pair (separate elements so they can form while the big pair is
   still dissolving); JS owns geometry + visibility. The mini logo's layer
   blends with difference: white glyphs go black over the white screens
   section and stay (near-)white on the dark ones, switching with the scroll */
.nav__logo--mini, .cta--mini { visibility: hidden; }
.nav--blend { mix-blend-mode: difference; }

/* CTA goo canvas: paints the gold slab while it dissolves into holes on
   scroll (the DOM background goes transparent for the duration) */
.cta__fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cta {
  position: absolute;
  left: calc(1117 * var(--u));
  top: calc(271 * var(--u));
  width: calc(339 * var(--u));
  height: calc(129 * var(--u));
  padding: 0 calc(12 * var(--u)) calc(8 * var(--u));
  overflow: hidden; /* preloader draws it as a 2px line growing upward */
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  background: var(--c-gold-500);
  color: var(--c-white);
  font-size: calc(16 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  will-change: left, top, width, height;
}

@media (prefers-reduced-motion: reduce) {
  .waste__list, .waste__lead { transition: none; }
}

/* ---------- CRISIS (Figma 9236:1630) ----------
   Headline (698, 48px) + accordion, pinned while the active state hands over
   001 -> 002 -> 003. main.js drives per-item --mh (media height, design px),
   subhead fades and the word sweeps; scroll room comes from --crisis-track. */

.crisis {
  position: relative;
  background: var(--c-black);
}
.crisis::after {          /* scroll room for the pinned phases */
  content: "";
  display: block;
  height: var(--crisis-track);
}

.crisis__pin {
  position: sticky;
  /* first accordion row (list top 266 in the pin) parks 66u under the top
     edge — CLEAR of the fixed nav logo (bottom 44u; the old short-viewport
     min() lifted boxes into it, client complaint). Constant top: on short
     viewports subhead 003 may dip below the fold — nav clearance wins.
     Mirror any change in crisisProgress(). */
  top: calc(-200 * var(--u));
  padding: calc(100 * var(--u)) 0 calc(132 * var(--u));
  background: var(--c-black);
}

.crisis__head {
  margin: 0 0 0 calc(40 * var(--u));
  width: calc(798 * var(--u));
  font-size: calc(48 * var(--u));
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--c-white);
}

/* crisis words: same sweep mechanics as .waste .w — per-word gradient,
   --wbase is the colour the sweep leaves behind (white / gold for numbers) */
.crisis .cw, .map .cw, .quote .cw, .screens .cw, .security .cw, .footer .cw {
  display: inline-block;
  opacity: 0;
  padding: 0.14em 0 0.24em;
  margin: -0.14em 0 -0.24em;
  will-change: transform, opacity;
  --wbase: var(--c-white);
  --wtail: var(--c-grey-800); /* pre-sweep colour — pick per section so the
                                 unswept word melts into that section's bg */
  --fill: -24%;
  --edge-w: 14%;
  --tail-w: 34%;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg,
    var(--wbase) 0%,
    var(--wbase) var(--fill),
    var(--c-gold-500) calc(var(--fill) + var(--edge-w)),
    var(--wtail) calc(var(--fill) + var(--tail-w)),
    var(--wtail) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  background-repeat: no-repeat;
}
.crisis .cw--gold { --wbase: var(--c-gold-500); }
/* light sections: black ink sweeps in, tail melts into the section bg */
.screens .cw, .security .cw { --wbase: var(--c-black); --wtail: #fff; }
.team .cw { --wbase: var(--c-black); --wtail: #ebebeb; }
.screen-item__chip .cw { --wbase: var(--c-white); --wtail: var(--c-gold-500); }
/* fade-rise lines (subs, list rows, roles) — driven like the words, no fill */
.quote .fr, .screens .fr, .security .fr, .team .fr, .footer .fr { opacity: 0; will-change: transform, opacity; }
/* body blocks (client rev): long copy reveals as ONE block, not word by
   word — the per-word cascade made big paragraphs feel over-busy */
.blk { opacity: 0; will-change: transform, opacity; }

/* ---------- MAP (Figma 9249:1707 + colmez-hero-map-brief.md) ---------- */

.map {
  position: relative;
  background: var(--c-black);
  padding: calc(50 * var(--u)) 0 calc(140 * var(--u)); /* air before the quote band (client rev) */
}

.map__lead {
  margin: 0 0 0 calc(50% - 108 * var(--u)); /* same column as the waste lead */
  width: calc(820 * var(--u));
  font-size: calc(44 * var(--u));
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--c-white);
}

/* full-bleed band, 759u tall like the Figma frame box (9249:1707 rev: the
   framed field grew 713 -> 759 and the section paddings tightened); the
   frame lines are
   drawn ON the canvas (horizontals run the full page width, verticals sit at
   the 40u content margins) so they can draw in with the scroll.
   Viewport-capped so frame + map always fit on screen. */
.map__stage {
  position: relative;
  margin-top: calc(44 * var(--u));
  width: 100%;
  /* the vh term: viewport minus 64px nav clearance above the top line and
     the 24u page-end tail below the bottom line — at page end the band runs
     from just under the nav to ~24px above the viewport bottom (client rev) */
  height: min(calc(759 * var(--u)), calc(100vh - 88px));
  overflow: hidden;
}
/* pan wrapper fills the stage on desktop (map.js reads its size); on mobile
   it is wider than the viewport and the stage scrolls it */
.map__pan {
  position: absolute;
  inset: 0;
}
.map__stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.crisis__list {
  width: calc(1416 * var(--u));
  margin: calc(80 * var(--u)) 0 0 calc(40 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u)); /* tightened from Figma's 32 so subhead 003 fits on screen */
}

.crisis__rule {
  border: 0;
  margin: 0;
  width: 100%;
  height: 1px;
  background: var(--c-grey-800);
}

.crisis-item {
  display: flex;
  align-items: stretch;              /* image height drives the row */
  justify-content: space-between;
  gap: calc(40 * var(--u));
  /* the row IS the media height: min-height 0 beats the flex min-content
     floor (the hidden closed-state subhead otherwise inflates the row, the
     pin height varies mid-morph and the scroll fights the layout) */
  height: calc(var(--mh) * var(--u));
  min-height: 0;
}

.crisis-item__left {
  display: flex;
  align-items: stretch;
  gap: calc(32 * var(--u));
  flex: 0 0 auto;
}

.crisis-item__num {
  flex: 0 0 calc(100 * var(--u));
  padding-top: calc(8 * var(--u));
}

/* number chip: grey plate, label bottom-left; width rides the open state
   (26 idle / 100 active) via --chw, set inline by main.js like --mh */
.crisis-item__chip {
  display: flex;
  align-items: flex-end;
  width: calc(var(--chw, 26) * var(--u));
  height: calc(24 * var(--u));
  padding: calc(4 * var(--u)) 0 calc(4 * var(--u)) calc(4 * var(--u));
  background: var(--c-grey-800);
  font-size: calc(10 * var(--u));
  line-height: 1;
  font-weight: 600;
}

.crisis-item__text {
  width: calc(419 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: space-between;    /* title top, body bottom */
}

.crisis-item__title {
  margin: 0;
  font-size: calc(40 * var(--u));
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--c-white);
}

/* subhead: words hide themselves (.cw); the container opacity is used by
   main.js to fade the OUTGOING subhead while the item collapses */
.crisis-item__desc {
  margin: 0;
  padding-top: calc(20 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: 1;
  font-weight: 400;
  color: var(--c-white);
}

/* media height in design px via --mh, driven by main.js (340 active / 140 idle) */
.crisis-item { --mh: 140; --chw: 26; }
.crisis-item.is-open { --mh: 340; --chw: 100; }
.crisis-item__media {
  position: relative;
  flex: 0 0 auto;
  width: calc(698 * var(--u));
  height: calc(var(--mh) * var(--u));
  overflow: hidden;
  --ifill: -34%; /* photo shimmer sweep, driven by main.js; rest <= -(tail 26%)
                    so no gold sliver shows on the covered photo's left edge */
}
.crisis-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* goo-reveal overlay (JS-appended canvas): the preloader-logo reveal erodes
   a section-coloured cover off the image, gold rim on the melt edge */
.ggoo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
/* washed-photo layer (team carousel) sits UNDER the entry cover */
.ggoo--wash { z-index: 1; }
/* while the goo drives, the CSS shimmer ::after (kept as no-WebGL fallback)
   steps aside — doubled class beats the per-section ::after rules that come
   later in the file */
.ggoo-on.ggoo-on::after { content: none; }

/* shimmer-in (no-WebGL fallback): same sweep grammar as the words — a gold
   edge wipes L→R, revealing the photo from under page-black */
.crisis-item__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    transparent var(--ifill),
    var(--c-gold-500) calc(var(--ifill) + 8%),
    var(--c-black) calc(var(--ifill) + 26%),
    var(--c-black) 100%);
}

/* ---------- QUOTE (Figma 9264:273) ---------- */
.quote {
  position: relative;
  height: calc(500 * var(--u));
  background: var(--c-grey-800);
  overflow: hidden;
}
.quote__media {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(354 * var(--u));
  height: 100%;
  background: #454748;
  overflow: hidden;
  --ifill: -34%;
}
.quote__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* photo shimmer — crisis grammar, cover colour = the section's grey */
.quote__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    transparent var(--ifill),
    var(--c-gold-500) calc(var(--ifill) + 8%),
    var(--c-grey-800) calc(var(--ifill) + 26%),
    var(--c-grey-800) 100%);
}
.quote__body {
  position: absolute;
  left: calc(499 * var(--u));
  top: 50%;
  transform: translateY(-50%);
  width: calc(857 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--u));
}
.quote__text {
  margin: 0;
  font-size: calc(48 * var(--u));
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--c-white);
}
.quote__attr { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.quote__name {
  margin: 0;
  font-size: calc(20 * var(--u));
  line-height: 1;
  font-weight: 400;
  color: var(--c-white);
}
.quote__roles { display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.quote__role {
  margin: 0;
  font-size: calc(14 * var(--u));
  line-height: 1;
  color: #8e8e8e;
}

/* ---------- SCREENS (Figma 9279:16) ---------- */
.screens {
  position: relative;
  background: #fff;
  color: var(--c-black);
  padding: calc(150 * var(--u)) 0 0; /* the bottom run continues in .security */
}
.screens__head {
  margin: 0 0 calc(149 * var(--u)) calc(40 * var(--u));
  width: calc(798 * var(--u));
  font-size: calc(48 * var(--u));
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--c-black);
}
.screens__list {
  display: flex;
  flex-direction: column;
  gap: calc(120 * var(--u));
}
.screens__sep { height: 1px; background: rgba(115, 115, 115, 0.2); }
.screen-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(40 * var(--u));
}
/* left column stretches to the media height; title block and the signal
   list pin to its top and bottom (Figma: justify-between) */
.screen-item__left {
  display: flex;
  gap: calc(32 * var(--u));
  width: calc(660 * var(--u));
  flex: 0 0 auto;
  align-self: stretch;
}
.screen-item__num {
  flex: 0 0 auto;
  width: calc(100 * var(--u));
  padding-top: calc(8 * var(--u));
}
.screen-item__chip {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: calc(26 * var(--u));
  background: var(--c-gold-500);
  padding: calc(4 * var(--u)) 0 calc(4 * var(--u)) calc(4 * var(--u));
  font-size: calc(10 * var(--u));
  line-height: 1;
  font-weight: 600;
  color: var(--c-white);
}
.screen-item__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.screen-item__top { display: flex; flex-direction: column; gap: calc(32 * var(--u)); }
.screen-item__title {
  margin: 0;
  font-size: calc(40 * var(--u));
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-weight: 500;
}
.screen-item__sub { margin: 0; font-size: calc(20 * var(--u)); line-height: 1; font-weight: 400; }
.screen-item__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: 1;
}
.screen-item__rows li + li {
  border-top: 1px solid rgba(115, 115, 115, 0.2);
  padding-top: calc(24 * var(--u));
}
.screen-item__media {
  position: relative;
  flex: 0 0 auto;
  width: calc(696 * var(--u));
  height: calc(441 * var(--u));
  border: 1px solid var(--c-black);
  overflow: hidden;
  --ifill: -34%;
}
.screen-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* shimmer over WHITE — the light section's take on the crisis photo sweep */
.screen-item__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    transparent var(--ifill),
    var(--c-gold-500) calc(var(--ifill) + 8%),
    #fff calc(var(--ifill) + 26%),
    #fff 100%);
}

/* ---------- SECURITY (Figma 9286:337) ---------- */
/* white continuation of the screens run: gold chip + claim + SOC2 badge */
.security {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  color: var(--c-black);
  padding: calc(241 * var(--u)) calc(40 * var(--u)) calc(200 * var(--u));
}
.security__left {
  display: flex;
  gap: calc(32 * var(--u));
  align-items: flex-start;
}
.security__head {
  margin: 0;
  width: calc(718 * var(--u));
  font-size: calc(48 * var(--u));
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-weight: 500;
}
.security__badge {
  flex: 0 0 auto;
  width: calc(220 * var(--u));
  height: calc(220 * var(--u));
  /* optically centred in the run between the heading's right edge (890u)
     and the page edge: (1496-890-220)/2 = 193u each side, minus the 40u
     section padding */
  margin-right: calc(153 * var(--u));
}

/* ---------- TEAM (Figma 9286:278) ---------- */
.team {
  position: relative;
  background: var(--c-black); /* opaque: the underfooter sits behind it */
  height: calc(var(--team-h) + var(--team-track));
}
/* the 1216u band pins centred in the viewport while the carousel scrubs */
.team__pin {
  position: sticky;
  /* centred in the viewport, but never so high that the heading (150u down)
     slides under the fixed nav — mirrored by teamStickyTop() in main.js */
  top: max(calc(64px - 150 * var(--u)), calc((100vh - var(--team-h)) / 2));
  height: var(--team-h);
  background: #ebebeb;
  color: var(--c-black);
  overflow: hidden;
}
.team__head {
  position: absolute;
  left: calc(40 * var(--u));
  top: calc(150 * var(--u));
  margin: 0;
  width: calc(578 * var(--u));
  font-size: calc(56 * var(--u));
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-weight: 500;
}
.team__name {
  margin: 0;
  font-size: calc(32 * var(--u));
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-weight: 500;
}
.team__chip {
  display: flex;
  align-items: flex-end;
  height: calc(26 * var(--u));
  padding: calc(4 * var(--u)) calc(8 * var(--u));
  background: var(--c-grey-200);
  color: var(--c-white);
  font-size: calc(10 * var(--u));
  line-height: 1;
  font-weight: 600;
}
.team__bio {
  position: absolute;
  left: calc(997 * var(--u));
  top: calc(599 * var(--u));
  width: calc(459 * var(--u));
}
/* stacked bio variants; the carousel crossfades them (JS drives opacity) */
.team__bio-item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(32 * var(--u));
}
.team__bio-item:not(:first-child) { opacity: 0; visibility: hidden; }
.team__desc { margin: 0; font-size: calc(20 * var(--u)); line-height: 1; font-weight: 400; }
.team__logos {
  display: flex;
  flex-direction: column;
  gap: calc(24.7 * var(--u));
  width: 100%;
}
.team__logos-row { display: flex; align-items: center; gap: calc(29 * var(--u)); }
.team__logos img { height: auto; width: auto; display: block; }
.team__list {
  position: absolute;
  left: calc(40 * var(--u));
  top: calc(599 * var(--u));
  width: calc(339 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--u));
}
.team__list li { cursor: pointer; }
.team__list li:not(.is-active) { opacity: 0.2; } /* dimmed queue; the inner .fr fades within */
.team__list li > div {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  align-items: flex-start;
}
/* portrait strip: a centred vertical column on the page axis; the carousel
   translates it so the active member's portrait (grown to 380x458) sits at
   599u while the neighbours rest at 285x343.5 (JS drives size + offset) */
.team__strip {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, calc(370 * var(--u))); /* rest pose: member 0 centred */
  width: calc(380 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(20 * var(--u));
}
.team__photo {
  position: relative;
  flex: 0 0 auto;
  width: calc(285 * var(--u));
  height: calc(343.5 * var(--u));
  background: var(--c-black);
  overflow: hidden;
}
.team__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.team__photo:first-child { width: calc(380 * var(--u)); height: calc(458 * var(--u)); }

/* ---------- FOOTER (Figma 9298:457) ---------- */
/* Underfooter: sticky at the viewport bottom for the whole page, painted
   behind every section (they all carry z-index 1), so the team band slides
   up off it at the end of the page instead of pushing it down. */
.lp > section,
.lp > .stage { position: relative; z-index: 1; }
.security { position: relative; z-index: 1; }

.footer {
  position: sticky;
  bottom: 0;
  z-index: 0;
  height: max(100vh, calc(792 * var(--u)));
  background: var(--c-black);
  overflow: hidden;
}
.footer__pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* the black plate the whole footer sits on (Figma: 1416x450, nudged 21u up) */
.footer__content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% - 21 * var(--u)));
  width: calc(1416 * var(--u));
  height: calc(450 * var(--u));
  background: var(--c-black);
  overflow: hidden;
}
.footer__logo {
  position: absolute;
  left: calc(24 * var(--u));
  top: calc(24 * var(--u));
  width: calc(1368 * var(--u));
}
.footer__logo img { display: block; width: 100%; height: auto; opacity: 0; } /* the goo canvas hands it over */
/* the goo canvas the wordmark forms out of (preloader grammar) */
.footer__logofx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.footer__row {
  position: absolute;
  left: calc(24 * var(--u));
  top: calc(234 * var(--u));
  width: calc(1368 * var(--u));
  height: calc(100 * var(--u));
}
.footer__claim {
  margin: 0;
  width: calc(622 * var(--u));
  font-size: calc(56 * var(--u));
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--c-white);
  position: absolute;
  left: 0;
  bottom: 0;
}
.footer .cw { --wbase: var(--c-white); --wtail: var(--c-black); }
.footer__bar .cw { --wtail: var(--c-gold-700); }
/* CTA: absolute so it can draw its 2px line and grow up like the hero's */
.footer__cta {
  position: absolute;
  left: calc(1029 * var(--u)); /* left-anchored: the line draws L->R like the hero's */
  bottom: 0;
  width: calc(339 * var(--u));
  height: calc(100 * var(--u));
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 calc(12 * var(--u)) calc(8 * var(--u));
  background: var(--c-gold-500);
  color: var(--c-white);
  font-size: calc(16 * var(--u));
  line-height: 1.2;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}
.footer__bar {
  position: absolute;
  left: 0;
  top: calc(382 * var(--u));
  width: 100%;
  box-sizing: border-box;
  padding: calc(24 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* the plate behind the links draws in like the CTA (JS drives w then h) */
.footer__plate {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: var(--c-gold-700);
  z-index: 0;
}
.footer__link,
.footer__backed {
  position: relative;
  z-index: 1;
  font-size: calc(14 * var(--u));
  line-height: 1;
  font-weight: 400;
  color: var(--c-white);
  text-decoration: none;
  white-space: nowrap;
}
.footer__backed { display: flex; align-items: center; gap: calc(18 * var(--u)); }
.footer__backed img { width: calc(141.667 * var(--u)); height: calc(20 * var(--u)); display: block; }
a.footer__link { transition: opacity 0.22s ease; }
a.footer__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.08em;
  height: 1px;
  background: var(--c-white);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s cubic-bezier(0.61, 0, 0.2, 1);
}
a.footer__link:hover { opacity: 0.7; }
a.footer__link:hover::after { transform: scaleX(1); }

/* ---------- CTA hover (global: hero, compact nav and footer) ----------
   The label re-runs the page's own gold sweep, the arrow flies out of the
   button to the right while a fresh one drops into its place, and the
   footer bar's dark gold rises over the whole slab from the bottom. */
@property --cfill {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 124%;
}
@keyframes ctaWash {
  from { --cfill: -24%; }
  to   { --cfill: 124%; }
}
.cta, .footer__cta { isolation: isolate; }
.cta::before,
.footer__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--c-gold-700);
  transform: translateY(101%);
  transition: transform 0.42s cubic-bezier(0.61, 0, 0.2, 1);
}
.cta:hover::before,
.footer__cta:hover::before { transform: translateY(0); }
.cta > span, .footer__cta > span { position: relative; z-index: 1; }
.cta__fx { z-index: 1; } /* stays absolute — only lifted above the hover plate */

.cta__label {
  --cfill: 124%;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg,
    var(--c-white) 0%,
    var(--c-white) var(--cfill),
    var(--c-gold-500) calc(var(--cfill) + 12%),
    rgba(255, 255, 255, 0.22) calc(var(--cfill) + 30%),
    rgba(255, 255, 255, 0.22) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  background-repeat: no-repeat;
}
.cta:hover .cta__label,
.footer__cta:hover .cta__label { animation: ctaWash 0.55s cubic-bezier(0.33, 0, 0.2, 1) forwards; }

/* The arrow leaves the button and a replacement drops into its place. BOTH
   arrows are pseudo-elements of a span that never moves — animating the span
   itself dragged the replacement out with it. The span keeps its own glyph
   only for layout, painted transparent. */
.cta__arrow { /* the mask: both arrows move inside the glyph's own box */
  position: relative;
  display: inline-block;
  overflow: hidden;
  color: transparent;
}
.cta__arrow::before,
.cta__arrow::after {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-white);
  transition: transform 0.42s cubic-bezier(0.61, 0, 0.2, 1);
}
.cta__arrow::after { transform: translateX(-120%); } /* the replacement waits just outside the mask */
.cta:hover .cta__arrow::before,
.footer__cta:hover .cta__arrow::before { transform: translateX(120%); }
.cta:hover .cta__arrow::after,
.footer__cta:hover .cta__arrow::after { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .cta::before, .footer__cta::before,
  .cta__arrow::before, .cta__arrow::after { transition: none; }
  .cta:hover .cta__label, .footer__cta:hover .cta__label { animation: none; }
}

/* ==================================================================
   MOBILE (<= 767px) — a static, single-column translation of the page.
   No smooth scroll, no pinning, no scroll hijacking: main.js exits
   early on this breakpoint, so every JS-driven state below is undone
   in CSS (words visible, images uncovered, sections unstuck).
   Scale: --u = 1px of a 390-wide design frame, capped so type stops
   growing past ~430px-wide viewports.
================================================================== */
@media (max-width: 767px) {

  :root { --u: min(calc(100vw / 390), 1.1px); }
  @supports (width: 1cqw) {
    .lp { --u: min(calc(100cqw / 390), 1.1px); }
  }

  /* forced desktop line breaks make words hang on the narrow column —
     let the headings wrap naturally, balanced */
  .mhero__headline br, .waste__list br, .waste__lead br, .crisis__head br,
  .map__lead br, .screens__head br, .screen-item__title br, .team__head br,
  .footer__claim br { display: none; }
  .mhero__headline, .crisis__head, .map__lead, .screens__head,
  .screen-item__title, .security__head, .team__head, .quote__text,
  .footer__claim { text-wrap: balance; }

  /* the team head words have no desktop gradient (they only fade-rise);
     hide them at rest so the mobile animator can bring them in */
  .team .cw { display: inline-block; opacity: 0; will-change: transform, opacity; }

  /* ---------- stage -> static hero + waste list ---------- */
  .stage { height: auto; }
  .stage__pin { position: static; height: auto; overflow: visible; }
  .hero-copy, .scroll-hint { display: none; }
  .layer { position: static; }
  /* the desktop photo box as a sticky, viewport-filling background: the
     photo goo-dissolves into the pattern while the waste list (pulled up
     over it) scrolls in and sweeps ON the pattern — the desktop sequence
     on the native scroll, no pinning of the scroll itself */
  .layer--photo {
    position: sticky;
    /* the desktop .layer's inset:0 leaves bottom:0 behind — as a sticky
       constraint it pins the box to the viewport BOTTOM at rest, riding it
       up over the hero copy. Reset every side, keep only the top stick. */
    inset: auto;
    top: 0;
    z-index: auto;
    width: 100%;
    height: 100vh;
    height: 100svh;
    margin-top: calc(48 * var(--u));
    transform: none;
    will-change: auto;
    overflow: hidden;
    background: var(--c-black);
  }
  .layer--text {
    position: relative;
    pointer-events: auto;
    margin-top: -100vh;
    margin-top: -100svh;
  }

  .mhero {
    display: flex;
    flex-direction: column;
    padding: calc(16 * var(--u)) calc(16 * var(--u)) 0;
    /* desktop grammar: the hero holds still while the photo (later in the
       DOM, so it paints on top) scrolls up OVER it — sticky, not a pin */
    position: sticky;
    top: 0;
  }
  .mhero__logo { width: 100%; height: auto; }
  .mhero__headline {
    margin: calc(56 * var(--u)) 0 0;
    font-size: calc(48 * var(--u));
    line-height: 1;
    letter-spacing: -0.02em;
    font-weight: 500;
  }
  /* hero words: the preloader's entry sweep — gold edge wipes in, white stays */
  .mhero .hw {
    display: inline-block;
    padding: 0.14em 0 0.24em;
    margin: -0.14em 0 -0.24em;
    opacity: 0;
    will-change: transform, opacity;
    --fill: -40%;
    --edge-w: 14%;
    --tail-w: 34%;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg,
      var(--c-white) 0%,
      var(--c-white) var(--fill),
      var(--c-gold-500) calc(var(--fill) + var(--edge-w)),
      var(--c-grey-800) calc(var(--fill) + var(--tail-w)),
      var(--c-grey-800) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    background-repeat: no-repeat;
  }
  .mhero__cta {
    margin-top: calc(32 * var(--u));
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: calc(88 * var(--u));
    padding: 0 calc(12 * var(--u)) calc(8 * var(--u));
    background: var(--c-gold-500);
    font-size: calc(14 * var(--u));
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .waste {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    /* one viewport of run-up: the photo dissolves into the pattern before
       the first words ride onto it; the tail keeps the last words on the
       pattern before it scrolls off */
    padding: 88vh calc(16 * var(--u)) 22vh;
    padding: 88svh calc(16 * var(--u)) 22svh;
    gap: calc(48 * var(--u));
    font-size: calc(30 * var(--u));
  }
  .waste__list, .waste__lead { width: auto; }

  /* ---------- nav: compact fixed pair, slides in after the hero ---------- */
  #navLogo, #navCta { display: none; }
  .nav__logo--mini, .cta--mini {
    visibility: visible;
    transform: translateY(-160%);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.61, 0, 0.2, 1), opacity 0.3s ease;
  }
  .nav__logo--mini {
    left: calc(16 * var(--u));
    top: calc(18 * var(--u));
    width: calc(110 * var(--u));
    height: auto;
  }
  .nav__logo--mini img { width: 100%; height: auto; }
  .nav__logo--mini .nav__logo-fx { display: none; }
  .cta--mini {
    left: auto;
    right: calc(12 * var(--u));
    top: calc(12 * var(--u));
    width: auto;
    height: calc(40 * var(--u));
    padding: 0 calc(12 * var(--u)) calc(8 * var(--u));
    gap: calc(12 * var(--u));
    font-size: calc(11 * var(--u));
  }
  body.mnav .nav__logo--mini, body.mnav .cta--mini { transform: none; opacity: 1; }

  /* ---------- crisis: static stack — chip, image, text under it ---------- */
  .crisis::after { display: none; }
  .crisis__pin {
    position: static;
    padding: calc(96 * var(--u)) 0;
  }
  .crisis__head {
    margin: 0 calc(16 * var(--u)) calc(56 * var(--u));
    width: auto;
    font-size: calc(32 * var(--u));
  }
  .crisis__list {
    width: auto;
    margin: 0 calc(16 * var(--u));
    gap: calc(40 * var(--u));
  }
  .crisis-item, .crisis-item.is-open {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: calc(20 * var(--u));
  }
  .crisis-item__left { display: contents; }
  .crisis-item__num { order: 1; flex: none; padding: 0; }
  .crisis-item__chip, .crisis-item.is-open .crisis-item__chip {
    display: inline-flex;
    width: auto;
    min-width: calc(44 * var(--u));
    padding: calc(4 * var(--u)) calc(6 * var(--u));
  }
  .crisis-item__media {
    order: 2;
    width: 100%;
    height: auto;
    aspect-ratio: 358 / 220;
  }
  .crisis-item__text {
    order: 3;
    width: auto;
    justify-content: flex-start;
    gap: calc(16 * var(--u));
  }
  .crisis-item__title { font-size: calc(28 * var(--u)); }
  .crisis-item__desc { padding-top: 0; font-size: calc(16 * var(--u)); line-height: 1.3; }

  /* ---------- map: big, with its own horizontal pan ---------- */
  .map { padding: calc(80 * var(--u)) 0 calc(96 * var(--u)); }
  .map__lead {
    margin: 0 calc(16 * var(--u));
    width: auto;
    font-size: calc(26 * var(--u));
  }
  /* the stage scrolls a 2-viewport-wide pan: roughly the map's left half is
     on screen, the rest has room to breathe instead of being squeezed in */
  .map__stage {
    margin-top: calc(40 * var(--u));
    height: min(120vw, 500px);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .map__stage::-webkit-scrollbar { display: none; }
  .map__pan {
    position: relative;
    inset: auto;
    width: 200vw;
    height: 100%;
  }

  /* ---------- quote (mobile Figma 9319:6819): centred portrait on the
     grey band, quote / name / roles under it ---------- */
  .quote { height: auto; padding: calc(28 * var(--u)) 0 calc(48 * var(--u)); }
  .quote__media {
    position: relative;
    left: auto;
    top: auto;
    width: calc(187 * var(--u));
    height: auto;
    aspect-ratio: 354 / 500; /* the source photo's own aspect — no crop */
    margin: 0 auto;
  }
  .quote__body {
    position: static;
    transform: none;
    width: auto;
    padding: calc(32 * var(--u)) calc(24 * var(--u)) 0;
    gap: calc(28 * var(--u));
  }
  .quote__text { font-size: calc(26 * var(--u)); line-height: 1.05; }
  .quote__name { font-size: calc(16 * var(--u)); }
  .quote__role { font-size: calc(12 * var(--u)); }

  /* ---------- screens: chip, title, image, rows — one column ---------- */
  .screens { padding: calc(96 * var(--u)) 0 0; }
  .screens__head {
    margin: 0 calc(16 * var(--u)) calc(64 * var(--u));
    width: auto;
    font-size: calc(32 * var(--u));
  }
  .screens__list { gap: calc(64 * var(--u)); }
  .screen-item {
    flex-direction: column;
    align-items: stretch;
    padding: 0 calc(16 * var(--u));
    gap: calc(24 * var(--u));
  }
  .screen-item__left, .screen-item__text { display: contents; }
  .screen-item__num { order: 1; width: auto; padding: 0; }
  .screen-item__chip { width: calc(88 * var(--u)); }
  .screen-item__top { order: 2; gap: calc(20 * var(--u)); }
  .screen-item__title { font-size: calc(28 * var(--u)); }
  .screen-item__sub { font-size: calc(16 * var(--u)); line-height: 1.3; }
  .screen-item__media {
    order: 3;
    width: 100%;
    height: auto;
    aspect-ratio: 696 / 441;
  }
  .screen-item__rows { order: 4; gap: calc(16 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.3; }
  .screen-item__rows li + li { padding-top: calc(16 * var(--u)); }

  /* ---------- security ---------- */
  .security {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(48 * var(--u));
    padding: calc(96 * var(--u)) calc(16 * var(--u));
  }
  .security__left { flex-direction: column; gap: calc(24 * var(--u)); }
  .security__left .screen-item__num { order: 0; width: auto; padding: 0; }
  .security__left .screen-item__chip { width: calc(88 * var(--u)); }
  .security__head { width: auto; font-size: calc(28 * var(--u)); }
  .security__badge { width: calc(140 * var(--u)); height: calc(140 * var(--u)); margin: 0; }

  /* ---------- team: horizontal swipe carousel (built by main.js) ---------- */
  .team { height: auto; }
  .team__pin {
    position: static;
    height: auto;
    padding: calc(80 * var(--u)) 0 calc(96 * var(--u));
    overflow: visible;
  }
  .team__head {
    position: static;
    margin: 0 calc(16 * var(--u)) calc(48 * var(--u));
    width: auto;
    font-size: calc(36 * var(--u));
  }
  .team__list, .team__bio, .team__strip { display: none; }
  .team__mcar {
    display: flex;
    gap: calc(16 * var(--u));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: calc(16 * var(--u));
    padding: 0 calc(16 * var(--u));
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .team__mcar::-webkit-scrollbar { display: none; }
  .team__mcard {
    flex: 0 0 calc(300 * var(--u));
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(16 * var(--u));
  }
  .team__mcard-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 285 / 343.5;
    background: var(--c-black);
    overflow: hidden;
  }
  .team__mcard-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
  .team__mcard .team__name { font-size: calc(24 * var(--u)); }
  .team__mcard .team__chip { height: calc(24 * var(--u)); }
  /* the cloned bio is not the first child of its card — undo the desktop
     stacked-crossfade hiding (and the absolute positioning); the mobile
     animator drives the .fr opacities inline */
  .team__mcard .team__bio-item {
    position: static;
    opacity: 1 !important;
    visibility: visible !important;
    gap: calc(20 * var(--u));
    margin-top: calc(8 * var(--u));
  }
  .team__mcard .team__desc { font-size: calc(15 * var(--u)); line-height: 1.3; }
  .team__mcard .team__logos { gap: calc(14 * var(--u)); }
  .team__mcard .team__logos-row { flex-wrap: wrap; gap: calc(16 * var(--u)); row-gap: calc(10 * var(--u)); }
  /* desktop logo sizes ride inline --u styles — flatten to one height,
     then optical per-logo corrections (client rev): wordmark-style logos
     (susquehanna) run huge at a shared height, emblem-style ones (bair,
     nomura, jeff's set) vanish — sized so each member's set reads level
     and every row fits the card in the intended line count */
  .team__mcard .team__logos img { height: calc(18 * var(--u)) !important; width: auto !important; }
  .team__mcard .team__logos img[src*="susquehanna"] { height: calc(14 * var(--u)) !important; }
  .team__mcard .team__logos img[src*="stanford-med"] { height: calc(24 * var(--u)) !important; }
  .team__mcard .team__logos img[src*="boeing"] { height: calc(24 * var(--u)) !important; }
  .team__mcard .team__logos img[src*="bair"] { height: calc(26 * var(--u)) !important; }
  .team__mcard .team__logos img[src*="antin"] { height: calc(26 * var(--u)) !important; }
  .team__mcard .team__logos img[src*="nomura"] { height: calc(30 * var(--u)) !important; }
  .team__mcard .team__logos img[src*="us-ecology"] { height: calc(28 * var(--u)) !important; }
  .team__mcard .team__logos img[src*="tetra-tech"] { height: calc(26 * var(--u)) !important; }
  .team__mcard .team__logos img[src*="milestone"] { height: calc(28 * var(--u)) !important; }

  /* ---------- footer: desktop grammar, one column ----------
     The underfooter reveal stays (sticky bottom, sections slide off it),
     the hero pattern paints the full band (bootMobile drives it) and the
     content sits on a black plate like the desktop's. */
  .footer {
    height: auto;
    min-height: 100svh;
    display: flex;
  }
  .footer__logofx { display: none; }
  .footer__content {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: calc(100% - 16 * var(--u));
    height: auto;
    margin: auto calc(8 * var(--u)) calc(8 * var(--u));
    padding: calc(20 * var(--u)) calc(16 * var(--u)) 0;
    background: var(--c-black);
    display: flex;
    flex-direction: column;
    gap: calc(32 * var(--u));
    overflow: visible;
  }
  .footer__logo { position: static; width: 100%; }
  .footer__row {
    position: static;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: calc(28 * var(--u));
  }
  .footer__claim { position: static; width: auto; font-size: calc(34 * var(--u)); }
  .footer__cta {
    position: static;
    width: 100%;
    height: calc(72 * var(--u));
    font-size: calc(14 * var(--u));
  }
  .footer__bar {
    position: static;
    width: calc(100% + 32 * var(--u));
    margin: calc(8 * var(--u)) calc(-16 * var(--u)) 0;
    padding: calc(20 * var(--u)) calc(16 * var(--u));
    background: var(--c-gold-700);
    flex-direction: column;
    align-items: flex-start;
    gap: calc(14 * var(--u));
  }
  .footer__plate { display: none; }
  .footer__link, .footer__backed { font-size: calc(13 * var(--u)); }

}