/* Cap Studio · the page is the film, filling the screen edge to edge */

:root { --night: #0d0f12; color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--night); }

.film { position: relative; height: calc(var(--film-scroll, 1000) * 1svh + 100svh); }
.film__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--night); }
.film__canvas, .film__poster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.film__poster { object-fit: cover; }
.film__canvas { opacity: 0; transition: opacity .6s ease; }
.film.is-live .film__canvas { opacity: 1; }
.film.is-live .film__poster { visibility: hidden; }

/* ---------- Contact: floating glass form above the "Let's work together" wall ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.contact {
  --glass-border: rgba(255, 255, 255, .42);
  --ui: "Inter", "Helvetica Neue", Arial, sans-serif; /* the bios font */
  --wide: "Archivo", "Helvetica Neue", Arial, sans-serif; /* the services lettering */
  position: absolute; z-index: 2; left: 50%; top: clamp(40px, 9svh, 96px);
  width: min(760px, calc(100vw - 48px));
  transform: translateX(-50%);
  visibility: hidden;
}
.contact.is-on { visibility: visible; }
.contact__form {
  display: grid; gap: 14px;
  font-family: var(--ui); color: #fff;
}
@media (prefers-reduced-motion: no-preference) {
  .contact.is-live .contact__form { animation: contact-float 7s ease-in-out infinite; }
}
@keyframes contact-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}

.contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Each piece fades on its own: opacity on a parent would stop the glass from blurring what is behind it */
.contact [data-piece] { opacity: 0; will-change: opacity, transform; }

.field {
  position: relative; display: flex; align-items: flex-start; gap: 12px;
  border: 1.5px solid var(--glass-border);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .06) 60%),
    rgba(18, 28, 44, .2);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 18px 40px -18px rgba(10, 20, 35, .45);
  transition: border-color .3s ease, background-color .3s ease;
  cursor: text;
}
.field:focus-within { border-color: rgba(255, 255, 255, .9); background-color: rgba(18, 28, 44, .3); }
.field[data-invalid] { border-color: #ff8a7a; }
.field--pill { height: 58px; border-radius: 999px; align-items: center; padding: 0 26px; }
.field--box { border-radius: 30px; padding: 20px 26px; height: clamp(88px, 16svh, 168px); }
.field__icon { flex: none; width: 20px; height: 20px; fill: currentColor; opacity: .92; }
.field--box .field__icon { margin-top: 2px; }

.field input, .field textarea {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; resize: none;
  font: 400 17px/1.4 var(--ui); letter-spacing: -.01em; color: #fff;
  text-shadow: 0 1px 10px rgba(10, 20, 35, .35);
}
/* placeholders read like the service labels: wide Archivo capitals */
.field input::placeholder, .field textarea::placeholder {
  color: rgba(255, 255, 255, .92); opacity: 1;
  font-family: var(--wide); font-weight: 400; font-stretch: 112.5%; font-variation-settings: "wdth" 112.5, "wght" 400;
  text-transform: uppercase; letter-spacing: .01em; font-size: 15px;
}
.field input:-webkit-autofill { -webkit-text-fill-color: #fff; transition: background-color 9999s; }

.contact__honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.contact__foot { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 4px; }
.contact__send {
  height: 52px; padding: 0 56px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px;
  background: #0e0f11; color: #fff; cursor: pointer;
  /* the headlines' lettering: heavy, extra-wide Archivo capitals */
  font: 900 19px/1 var(--wide); font-stretch: 125%; font-variation-settings: "wdth" 125, "wght" 900; letter-spacing: .02em; text-transform: uppercase;
  padding-left: calc(56px + .02em); /* optical centring for the tracking */
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6);
  transition: background-color .3s ease, transform .2s ease;
}
.contact__send:hover { background: #26282c; }
.contact__send:active { transform: scale(.98); }
.contact__send:disabled { cursor: progress; opacity: .7; }
.contact__send:focus-visible, .field:focus-within { outline: 2px solid #fff; outline-offset: 3px; }
.contact__status {
  margin: 0; font: 400 15px/1.4 var(--ui); letter-spacing: -.01em; color: #fff; text-shadow: 0 1px 12px rgba(10, 20, 35, .55);
  max-width: 40ch; text-align: center;
}

@media (max-width: 767px) {
  .contact { top: 80px; width: calc(100vw - 32px); } /* clears the 52px ibex mark drawn at 16px */
  .contact__form { gap: 10px; }
  .contact__row { grid-template-columns: 1fr; gap: 10px; }
  .field--pill { height: 48px; padding: 0 20px; }
  .field--box { height: clamp(72px, 11svh, 104px); padding: 14px 20px; border-radius: 24px; }
  .field input, .field textarea { font-size: 16px; }
  .field__icon { width: 18px; height: 18px; }
  .contact__send { height: 46px; padding: 0 40px; padding-left: calc(40px + .02em); font-size: 17px; }
  .field input::placeholder, .field textarea::placeholder { font-size: 14px; }
  .contact__foot { gap: 10px; margin-top: 2px; }
  .contact__status { font-size: 14px; }
}

/* ---------- Opening copy: real text laid over the film at the film's own position ----------
   Laid out in 1920x1080 frame pixels; site.js scales the box to the drawn frame. Font settings were
   fitted to the lettering in the film (Archivo, width 92, weight 850). */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
}
.film-copy {
  position: absolute; z-index: 1; left: 0; top: 0; width: 1920px; height: 1080px; margin: 0;
  transform-origin: 0 0; visibility: hidden; pointer-events: none;
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-size: 32.0495px; line-height: 1;
  font-variation-settings: "wdth" 92, "wght" 850; letter-spacing: -1px; color: #0b0c0e;
  -webkit-font-smoothing: antialiased;
}
.film-copy.is-on { visibility: visible; }
.film-copy.is-on .film-copy__line { pointer-events: auto; }
.film-copy__line { position: absolute; display: block; white-space: nowrap; text-align: justify; text-align-last: justify; }
.film-copy__ch { opacity: 0; }

/* ---------- Section rail on the right (after pear.no's): a hairline, one tick per section, the current one named ----------
   Ink flips to dark over the paper scenes (html.rail-dark, set in site.js). */
.rail {
  --rail-x: clamp(28px, 3.4vw, 56px);
  position: fixed; z-index: 3; inset: 0 0 0 auto; width: 280px; pointer-events: none;
  color: #fff; transition: color .6s ease;
  font: 500 11.5px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .3em; text-transform: uppercase;
}
.rail::before { content: ""; position: absolute; right: var(--rail-x); top: 0; bottom: 0; width: 1px; background: currentColor; opacity: .32; }
html.rail-dark .rail { color: #16171a; }
.rail ol { position: absolute; right: var(--rail-x); justify-items: end; top: 60svh; margin: 0; padding: 0; list-style: none; display: grid; gap: 22px; pointer-events: auto; }
.rail a {
  display: flex; flex-direction: row-reverse; align-items: center; gap: 22px; height: 24px; padding-left: 12px;
  color: inherit; text-decoration: none; opacity: .5; transition: opacity .4s ease;
}
.rail a[aria-current="true"], .rail a:hover, .rail a:focus-visible { opacity: 1; }
.rail a:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.rail__tick { flex: none; width: 18px; height: 1px; background: currentColor; transition: width .55s cubic-bezier(.16, 1, .3, 1); }
.rail a[aria-current="true"] .rail__tick { width: 44px; }
.rail__label {
  white-space: nowrap; opacity: 0; transform: translateX(8px);
  padding: 7px calc(12px - .3em) 7px 12px; margin-right: -6px; /* trailing tracking trimmed for optical centring */ border-radius: 999px; /* glass chip, same material as the form */
  border: 1px solid rgba(255, 255, 255, .38);
  background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06)), rgba(18, 28, 44, .22);
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
  transition: opacity .45s ease, transform .55s cubic-bezier(.16, 1, .3, 1), background-color .6s ease, border-color .6s ease;
}
html.rail-dark .rail__label { border-color: rgba(22, 23, 26, .16); background: rgba(238, 236, 232, .72); box-shadow: 0 6px 18px -10px rgba(40, 30, 20, .35); }
.rail a[aria-current="true"] .rail__label, .rail a:hover .rail__label, .rail a:focus-visible .rail__label { opacity: 1; transform: none; }
.rail ol:hover .rail__label { opacity: .75; transform: none; }
.rail ol:hover a[aria-current="true"] .rail__label, .rail ol:hover a:hover .rail__label { opacity: 1; }

@media (max-width: 767px) {
  .rail { --rail-x: 16px; font-size: 10.5px; letter-spacing: .26em; }
  .rail::before { opacity: .22; }
  .rail ol { top: auto; bottom: max(24px, env(safe-area-inset-bottom)); gap: 10px; }
  .rail a { gap: 14px; height: 22px; }
  .rail__tick { width: 12px; }
  .rail a[aria-current="true"] .rail__tick { width: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .rail__tick, .rail__label { transition: none; }
}

/* ---------- Portrait phones: the opening line reflows into a readable block under the wordmark ----------
   (site.js stops positioning it over the frame on phones; letter timing is unchanged) */
@media (max-width: 767px) and (orientation: portrait) {
  .film-copy {
    left: 22px; right: 22px; top: calc(min(100vw - 56px, 340px) * .277 + 50px);
    width: auto; height: auto; transform: none !important;
    /* smaller on phones so the paragraph always sits on clear sky above the ibex, even on short screens */
    font-size: clamp(12.5px, 3.55vw, 15px); line-height: 1.36; letter-spacing: .012em;
    font-variation-settings: "wdth" 92, "wght" 800;
  }
  .film-copy__line { position: static !important; display: inline; width: auto !important; white-space: normal; text-align: left; }
  .film-copy__line::after { content: " "; }
}

/* ---------- Middle section pages as real text (red statement, gold founders, blue services) ----------
   Laid out in 1920x1080 frame px from measurements of the film; site.js scales the layer to the frame on
   screen and shows each page in step with the film. Colours are constant (the gold no longer shifts). */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
.mid-copy { position: absolute; z-index: 1; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; pointer-events: none; }
.mid-copy h2, .mid-copy h3, .mid-copy p, .mid-copy ul { margin: 0; padding: 0; font: inherit; list-style: none; }
.mc { position: absolute; inset: 0; visibility: hidden; opacity: 0; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.mc-photos { position: absolute; inset: 0; visibility: hidden; opacity: 0; }
.mc-photo { position: absolute; display: block; object-fit: cover; }
.mc.is-on { visibility: visible; }
.mc.is-on .mc-ln { pointer-events: auto; }
.mc-ln { position: absolute; top: 0; white-space: pre; line-height: 1; transform-origin: 0 0; -webkit-font-smoothing: antialiased; }
.mc-ln::selection { background: rgba(20, 30, 50, .18); }
.mc-ln[data-f="red-head"] { font-family: "Inter", "Helvetica Neue", Arial, sans-serif; font-variation-settings: "wdth" 100, "wght" 800; font-weight: 800; letter-spacing: -0.03em; color: #dc0810; }
.mc-ln[data-f="red-body"] { font-family: "Inter", "Helvetica Neue", Arial, sans-serif; font-variation-settings: "wdth" 100, "wght" 400; font-weight: 400; letter-spacing: -0.01em; color: #dc0810; }
.mc-ln[data-f="gold-n1"] { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-variation-settings: "wdth" 112.5, "wght" 800; font-weight: 800; letter-spacing: -0.01em; color: #febb2b; }
.mc-ln[data-f="gold-n2"] { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-variation-settings: "wdth" 112.5, "wght" 800; font-weight: 800; letter-spacing: -0.01em; color: #febb2b; }
.mc-ln[data-f="gold-c1"] { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-variation-settings: "wdth" 112.5, "wght" 800; font-weight: 800; letter-spacing: -0.01em; color: #febb2b; }
.mc-ln[data-f="gold-c2"] { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-variation-settings: "wdth" 112.5, "wght" 800; font-weight: 800; letter-spacing: -0.01em; color: #febb2b; }
.mc-ln[data-f="gold-b1"] { font-family: "Inter", "Helvetica Neue", Arial, sans-serif; font-variation-settings: "wdth" 100, "wght" 400; font-weight: 400; letter-spacing: -0.01em; color: #febb2b; }
.mc-ln[data-f="gold-b2"] { font-family: "Inter", "Helvetica Neue", Arial, sans-serif; font-variation-settings: "wdth" 100, "wght" 400; font-weight: 400; letter-spacing: -0.01em; color: #febb2b; }
.mc-ln[data-f="blue-head"] { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-variation-settings: "wdth" 125, "wght" 900; font-weight: 900; letter-spacing: -0.02em; color: #0c3be5; }
.mc-ln[data-f="blue-items"] { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-variation-settings: "wdth" 112.5, "wght" 400; font-weight: 400; letter-spacing: -0.01em; color: #0c3be5; }

/* Phones: the services page is restructured (each heading across the width, its four services in a 2 x 2 grid) */
.svc-m { display: none; }
@media (max-width: 767px) and (orientation: portrait) {
  .svc-m {
    display: block; position: absolute; z-index: 1; left: 16px; right: 16px; top: 50%; transform: translateY(-50%);
    visibility: hidden; opacity: 0; color: #0c3be5;
  }
  .svc-m.is-on { visibility: visible; }
  .svc-m h3 { margin: 0 0 10px; font: 900 clamp(22px, 7.4vw, 30px)/.95 "Archivo", sans-serif; font-variation-settings: "wdth" 125, "wght" 900; letter-spacing: -.02em; }
  .svc-m ul { margin: 0 0 26px; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
  .svc-m li { font: 400 clamp(12px, 3.7vw, 15px)/1.15 "Archivo", sans-serif; font-variation-settings: "wdth" 112.5, "wght" 400; letter-spacing: -.01em; text-transform: uppercase; }
}

/* The film look over the white pages (canvas filmLook steps 1-2, recreated as layers; shown by site.js) */
/* no z-index on the wrapper: it must not form a stacking context, or the layers would blend with nothing */
.paper-tone { position: absolute; inset: 0; pointer-events: none; visibility: hidden; }
.paper-tone.is-on { visibility: visible; }
.paper-tone > * { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; display: block; }
.paper-tone__warm { background: rgba(255, 176, 120, .14); mix-blend-mode: soft-light; }
.paper-tone__lift { background: rgb(24, 20, 18); mix-blend-mode: lighten; }
.paper-tone__vignette { mix-blend-mode: multiply; }

/* One Roof Splits Into Two (js/one-roof.js) */
.roof-goat { position: absolute; z-index: 1; height: auto; visibility: hidden; transform-origin: 50% 60%; pointer-events: none; }
.roof-actors { position: absolute; inset: 0; pointer-events: none; }
.roof-actor { position: absolute; left: 0; top: 0; visibility: hidden; }
.roof-actor .mc-ln { left: 0; color: var(--ink) !important; pointer-events: none; }
.roof-crack { position: absolute; top: 0; width: 2px; height: 1080px; background: var(--ink, #dc0810); transform-origin: 50% 0; visibility: hidden; }

/* The Goat Leaps (js/goat-leap.js). The goat's box is the logo's size; its feet (50% 95%) are the pivot. */
.goat { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; }
.goat__box { position: absolute; left: -46.5px; top: -111.8px; width: 93px; height: 117.7px; transform-origin: 50% 95%; }
.goat__box img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.goat__body { clip-path: inset(27% 0 0 0); }
.goat__horns { clip-path: inset(0 0 73% 0); transform-origin: 40% 27%; }
.goat__eye { clip-path: ellipse(4.4% 4.4% at 36.21% 34.29%); transform-origin: 36.21% 34.29%; }
.goat-crumbs { position: absolute; inset: 0; visibility: hidden; pointer-events: none; }
.goat-crumb { transform-origin: 50% 60%; }

/* Bios Break Into Services (js/bios-services.js) */
.bios-stage { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.bios-words { position: absolute; inset: 0; visibility: hidden; }
.bios-actor { position: absolute; left: 0; top: 0; visibility: hidden; }
.bios-actor .mc-ln { left: 0; color: var(--ink) !important; pointer-events: none;
  text-shadow: 0 0 var(--glow, 0px) color-mix(in oklch, var(--ink) 55%, transparent); }
.bios-actor .ba-sfx { position: relative; }
.bios-actor .ba-src { position: absolute; left: 0; top: 0; }
.bios-actor .ba-c { font-style: normal; display: inline-block; transform-origin: 50% 80%; }

/* Stretch to Fill (js/stretch-fill.js) */
.stretch-stage { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.stretch-actor { position: absolute; left: 0; top: 0; visibility: hidden; transform-origin: 0 0; }
.stretch-actor .mc-ln { left: 0; pointer-events: none; }

/* Gravity Drop (js/gravity-drop.js): pieces are screen-space copies synced to physics bodies */
.gravity-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.gravity-piece { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; will-change: transform; }
.gravity-layer.is-flickable .gravity-piece { pointer-events: auto; cursor: grab; }
html.gravity-grabbing, html.gravity-grabbing * { cursor: grabbing !important; user-select: none; }
.gravity-photo { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Card Deal (js/card-deal.js): screen-space card actors with 3D flips */
.cards-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; visibility: hidden; }
.cd-card { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; will-change: transform; }
.cd-inner { position: absolute; inset: 0; transform-style: preserve-3d; }
.cd-face, .cd-back { position: absolute; inset: 0; border-radius: 10px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.cd-chrome { position: absolute; inset: 0; border-radius: 10px; background: #fbfaf8; border: 1px solid rgba(0, 0, 0, .08);
  box-shadow: 0 10px 24px -12px rgba(60, 40, 20, .35), 0 1px 3px rgba(60, 40, 20, .12); }
.cd-content { position: absolute; inset: 0; }
.cd-back { transform: rotateY(180deg); background: #febb2b; box-shadow: 0 10px 24px -12px rgba(60, 40, 20, .4), 0 1px 3px rgba(60, 40, 20, .15); }
.cd-back::after { content: ""; position: absolute; inset: 7px; border: 1.5px solid rgba(251, 250, 248, .85); border-radius: 6px; }
.cd-back img { position: absolute; left: 50%; top: 50%; width: 22%; height: auto; transform: translate(-50%, -50%); filter: brightness(0) invert(1); opacity: .95; }
/* the giant backs' frame and goat are sized by card-deal.js each frame (so the shrink never distorts them) */
.cd-giant { z-index: 200; }
.cd-back-giant::after { content: none; }
.cd-back-giant .cd-frame { position: absolute; border-style: solid; border-color: rgba(251, 250, 248, .85); }
.cd-back-giant img { height: auto; }
.cd-giant.is-lifted .cd-back { box-shadow: 0 30px 60px -20px rgba(60, 40, 20, .45), 0 4px 10px rgba(60, 40, 20, .15); }
.cd-front { border-radius: 0; }
.cd-photo { position: absolute; display: block; object-fit: cover; }
  .cd-card.is-flat { will-change: auto; } /* flat for the handoff: text rendered exactly like the page text */

/* Goat Headbutt (js/goat-headbutt.js): the goat, effects, flying letters and blocks, in screen space */
.gh-stage { position: absolute; inset: 0; z-index: 1; pointer-events: none; visibility: hidden; overflow: hidden; }
.gh-goat { position: absolute; left: 0; top: 0; transform-origin: 50% 100%; z-index: 3; }
.gh-goat svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gh-fx { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 4; }
.gh-l { position: absolute; left: 0; top: 0; z-index: 2; will-change: transform; }
.gh-l .gh-blue { opacity: 0; }
.gh-b { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; z-index: 1; }
.gh-photo { position: absolute; display: block; object-fit: cover; }
.cd-back img.is-white { filter: none; }
.cd-inner { will-change: transform; } .cd-face, .cd-back { transform: translateZ(0); } .cd-back { transform: rotateY(180deg) translateZ(0); }
.cd-giant.is-lifted .cd-back { box-shadow: 0 22px 40px -18px rgba(60, 40, 20, .4), 0 3px 8px rgba(60, 40, 20, .14); }

/* Phones: the founders page stacked (index.html .who-m; shown by site.js once the One Roof transition is done) */
.who-m { display: none; }
@media (max-width: 767px) and (orientation: portrait) {
  .who-m {
    display: block; position: absolute; z-index: 1; left: 20px; right: 30px; top: 50%; transform: translateY(-50%);
    visibility: hidden; opacity: 0; color: #febb2b; pointer-events: none; /* right: clear of the side menu */
  }
  .who-m.is-on { visibility: visible; pointer-events: auto; }
  .who-m__p + .who-m__p { margin-top: clamp(14px, 4.5svh, 30px); }
  .who-m__name {
    margin: 0 0 clamp(8px, 2.2svh, 14px); font: 800 clamp(34px, 13.3vw, 60px)/.86 "Archivo", sans-serif; /* SOYLEMEZ, the longest name, fills the width */
    font-variation-settings: "wdth" 112.5, "wght" 800; letter-spacing: -.012em; text-transform: uppercase;
  }
  .who-m__row { display: grid; grid-template-columns: 33% 1fr; gap: 11px; align-items: start; }
  .who-m__photo { display: block; width: 100%; aspect-ratio: 205 / 305; object-fit: cover; }
  .who-m__role {
    margin: 0 0 5px; font: 800 clamp(14px, 4.6vw, 20px)/1 "Archivo", sans-serif;
    font-variation-settings: "wdth" 112.5, "wght" 800; letter-spacing: -.01em;
  }
  /* bio sized so each sits beside its photo */
  .who-m__bio { margin: 0; font: 400 clamp(10.5px, 3.05vw, 13.5px)/1.3 "Inter", sans-serif; letter-spacing: -.01em; }
}