/* ============================================================
   9x16 Media - website styles (vertical slice: hero + the flip)
   Coral #FF5A3C, Kdam (lowercase display) + Switzer.
   Global fixed asymmetric swiss grid (portrait cells).
   Adaptive centered nav. Snug rounded highlighter keywords.
   ============================================================ */

/* self-hosted fonts (Fontshare's api CDN rate-limits & silently serves an empty
   stylesheet -> fonts fell back to system sans. hosting locally removes that dependency). */
@font-face { font-family: "Clash Display"; src: url("assets/fonts/clash-display-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Clash Display"; src: url("assets/fonts/clash-display-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("assets/fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("assets/fonts/switzer-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("assets/fonts/switzer-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("assets/fonts/switzer-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --snow: #FAFAFA;
  --paper: #F1EEE9;
  --pitch: #100C08;
  --orange: #FF5A3C;
  --brick: #8A100C;
  --slate: #3E3E3E;
  --mute: #6B6560;
  --line: rgba(16, 12, 8, 0.09);

  --maxw: 1440px;
  --pad: clamp(1.25rem, 4vw, 4rem);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --r-pill: 999px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--snow); color: var(--pitch);
  font-family: "Switzer", system-ui, sans-serif; font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* clip (not hidden): hidden makes body a scroll container, which breaks position:sticky pins on
     mobile browsers; clip contains horizontal overflow without that side effect. hidden = fallback. */
  overflow-x: hidden; overflow-x: clip;
}
img { max-width: 100%; display: block; }
main { position: relative; z-index: 1; }

/* snug rounded-rectangle highlighter: black box, orange text.
   inline-block so line-height + padding define the box (inline bg would paint the
   font's tall em box and look oversized). */
.hl {
  display: inline-block;
  background: var(--orange); color: #fff;   /* orange box, white text */
  border-radius: 0; padding: 0.12em 0.26em 0.1em;   /* sharp corners, to match the swiss grid */
  line-height: 0.9;                      /* taller so ascenders (l, i, t) aren't clipped */
}

/* global swiss grid - asymmetric vertical columns (always on, fixed & scroll-invariant). */
.grid { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
/* horizontal rows (24%/68% band) belong to each pinned section's pin and are CLIPPED to it, so only
   the section in view shows its own rows - the previous section's row can't bleed in. rows sit behind
   the section content, so the crop box / stat boxes / orange fill all sit on top of them. */
.flip__pin::before, .rec__pin::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, var(--line) 0, var(--line) 1px, transparent 1px, transparent 44vh);
  background-position: 0 24vh;
}
.grid__v { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.grid__h { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); }
/* white variant, used as a §2 overlay on the orange */
.grid--white .grid__v, .grid--white .grid__h { background: rgba(255, 255, 255, 0.5); }

.grain {
  position: fixed; inset: 0; z-index: 61; pointer-events: none;
  opacity: 0.04; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: "Switzer", sans-serif; font-weight: 600; font-size: 0.94rem; line-height: 1;
  text-decoration: none; color: var(--pitch); cursor: pointer; border: none; white-space: nowrap;
  transition: transform 0.16s var(--ease-out), background-color 0.24s var(--ease-out), color 0.24s var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--pill { padding: 0.72rem 0.72rem 0.72rem 1.2rem; border-radius: var(--r-pill); }
.btn--solid { background: var(--pitch); color: var(--snow); }
.btn--solid:hover { background: var(--orange); color: var(--pitch); }
.btn__ico { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-pill); background: var(--orange); color: var(--pitch); transition: transform 0.28s var(--ease-out), background-color 0.28s var(--ease-out); }
.btn--solid:hover .btn__ico { background: rgba(16,12,8,0.16); }
.btn:hover .btn__ico { transform: translate(2px, -2px) scale(1.05); }
.btn--ghost { color: var(--pitch); padding: 0.72rem 0.4rem; }
.btn--ghost span { box-shadow: inset 0 -1px 0 rgba(16,12,8,0.4); padding-bottom: 2px; transition: box-shadow 0.24s var(--ease-out); }
.btn--ghost:hover span { box-shadow: inset 0 -1px 0 var(--orange); }

/* sharp rectangle CTA: [ label | ↗ ]. arrow sits angled (up-right), rotates to point right on hover. */
.rect-cta { display: inline-flex; align-items: stretch; height: 52px; background: var(--pitch); color: var(--snow); text-decoration: none; border: none; transition: transform 0.16s var(--ease-out); }
.rect-cta:active { transform: scale(0.98); }
.rect-cta__label { display: flex; align-items: center; padding: 0 1.2rem; font-family: "Switzer", sans-serif; font-weight: 600; font-size: 0.95rem; white-space: nowrap; }
.rect-cta__arw { display: grid; place-items: center; aspect-ratio: 9 / 16; border-left: 1px solid rgba(255, 255, 255, 0.35); color: #fff; }
.rect-cta__arw svg { width: 16px; height: 16px; transform: rotate(-45deg); transition: transform 0.3s var(--ease-out); }
.rect-cta { transition: transform 0.16s var(--ease-out), background-color 0.24s var(--ease-out); }
.rect-cta:hover { background: var(--orange); }   /* fill orange; label + arrow stay white */
.rect-cta:hover .rect-cta__arw svg { transform: rotate(0deg); }
/* larger variant (used for the primary apply CTA in §11) */
.rect-cta--lg { height: clamp(58px, 6vw, 68px); }
.rect-cta--lg .rect-cta__label { padding: 0 1.7rem; font-size: clamp(1rem, 1.2vw, 1.15rem); }
.rect-cta--lg .rect-cta__arw svg { width: 19px; height: 19px; }
/* ghost (secondary) variant: outlined, fills pitch on hover — used for "back to home" */
.rect-cta--ghost { background: var(--snow); color: var(--pitch); box-shadow: inset 0 0 0 1px rgba(16, 12, 8, 0.22); }   /* opaque fill hides the grid lines behind it */
.rect-cta--ghost .rect-cta__arw { border-left-color: rgba(16, 12, 8, 0.2); color: var(--pitch); }   /* black arrow on the white fill */
.rect-cta--ghost:hover { background: var(--orange); color: #fff; }
.rect-cta--ghost:hover .rect-cta__arw { border-left-color: rgba(255, 255, 255, 0.35); color: #fff; }

/* ---------- Nav (centered container, adaptive light/dark, solid fill) ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; justify-content: center; padding: 16px var(--pad) 0; }
.nav__inner {
  width: min(1180px, 100%); display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 0.9rem 0.7rem 1.4rem; border-radius: 0;
  background: var(--snow);                         /* solid, not glass */
  box-shadow: inset 0 0 0 1px rgba(16,12,8,0.10), 0 12px 38px rgba(16,12,8,0.08);
  transition: background-color 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.nav[data-theme="dark"] .nav__inner { background: var(--pitch); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 12px 38px rgba(16,12,8,0.28); }
.nav__brand { display: inline-flex; align-items: center; }
.nav__logo { height: 56px; width: auto; }          /* bigger, more legible */
.nav__logo--dark { display: none; }
.nav[data-theme="dark"] .nav__logo--light { display: none; }
.nav[data-theme="dark"] .nav__logo--dark { display: block; }
.nav__links { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2.1rem); padding-right: 0.7rem; }
.nav__links a {
  font-family: "Clash Display", sans-serif; font-weight: 500; text-transform: lowercase;
  color: var(--pitch); text-decoration: none; font-size: 1.12rem; opacity: 0.9;
  transition: opacity 0.2s var(--ease-out), color 0.45s var(--ease-out);
}
.nav__links a:hover { opacity: 1; }
.nav[data-theme="dark"] .nav__links a { color: var(--snow); }

/* hamburger button — hidden until mobile (shown in the <=640 block). two bars morph to an X. */
.nav__burger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 7px; width: 44px; height: 44px; padding: 0; background: none; border: none; cursor: pointer; color: var(--pitch); }
.nav[data-theme="dark"] .nav__burger { color: var(--snow); }
/* thinner, smaller than the logo — 2px strokes, ~18px tall */
.nav__burger span { display: block; width: 25px; height: 2px; background: currentColor; transition: transform 0.32s var(--ease-out), opacity 0.2s var(--ease-out); }
.nav__burger.is-open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }              /* middle bar fades */
.nav__burger.is-open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
/* when the menu is open the nav sits above the overlay and stays on its white (light) variant —
   white bar, black logo, black burger/X. */
.nav.is-menu-open { z-index: 90; }

/* full-viewport mobile menu overlay: orange, white 9:16 grid, one link per grid row.
   curtain-swipes in from the right (translateX 100% -> 0), out to the right on close. */
/* curtain-swipe via clip-path (NOT translateX): a translated fixed element escapes body's
   overflow-x:hidden and expands the viewport, which pushed the fixed nav's burger off-screen.
   clip-path keeps the element at x:0 and just reveals it right->left. left inset 100% -> 0 = wipe in
   from the right; reversing sends it back out to the right on close. */
.menu {
  position: fixed; top: 0; left: 0; right: 0; height: 100dvh; z-index: 80; background: var(--orange); overflow: hidden;
  clip-path: inset(0 0 0 100%); visibility: hidden;
  transition: clip-path 0.5s var(--ease-out), visibility 0s linear 0.5s;
}
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 0.5s var(--ease-out); }
.menu__grid { position: absolute; inset: 0; z-index: 0; }
.menu__grid .grid__v { background: rgba(255, 255, 255, 0.45); }
/* white 9:16 rows behind the links */
.menu__grid::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.45) 0, rgba(255, 255, 255, 0.45) 1px, transparent 1px, transparent 29.2vw);
}
.menu__links { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; }
/* each link = one grid row (29.2vw), opaque orange so no vertical grid line crosses inside the text box,
   white horizontal separators top/bottom. tap -> box fills white, text turns orange. */
.menu__row {
  position: relative; display: flex; align-items: center; height: 29.2vw;
  padding: 0 9%; margin-top: -1px;
  background: var(--orange); color: #fff; text-decoration: none;
  font-family: "Clash Display", sans-serif; font-weight: 600; text-transform: lowercase;
  font-size: clamp(2.1rem, 9vw, 3.1rem); letter-spacing: -0.02em; line-height: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.45); border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.menu__row.is-active, .menu__row:active { background: #fff; color: var(--orange); }

/* ============ 1 · THE FLIP (hero + morph, one pinned section) ============
   200vh: 100vh pinned, 100vh of scrub. One screen of scrolling from headline to column, so the
   first half of the sentence is still on screen when the second half lands. */
.flip { position: relative; height: 200vh; }
.flip__pin { position: sticky; top: 0; height: 100dvh; overflow: hidden; display: grid; place-items: center; }

/* --- the headline, which is also frame one of the animation --- */
.fh {
  position: relative; z-index: 3; margin: 0; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: clamp(1rem, 2.4vh, 1.9rem);
  font-family: "Clash Display", sans-serif; font-weight: 600; text-transform: lowercase;
  font-size: clamp(2.6rem, 7vw, 6.2rem); line-height: 1; letter-spacing: -0.02em; color: var(--pitch);
}
.fh__line { display: block; white-space: nowrap; }
/* JS replaces the line's text with these; the two that survive carry .fg--keep */
.fg { display: inline-block; will-change: transform, opacity; }
.fg--space { width: 0.26em; }
/* reserves the box's place in the headline so the composition is right before anything moves */
.fh__slot { display: block; width: var(--fbox-w); height: calc(var(--fbox-w) * 9 / 16); }
.fh__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --- the box: a true 16x9 rectangle that becomes a true 9x16 one, then the column --- */
.flip { --fbox-w: clamp(230px, 23vw, 340px); }
.mbox {
  position: absolute; z-index: 2; left: 50%; top: 0;
  width: var(--fbox-w); height: calc(var(--fbox-w) * 9 / 16);
  background: var(--orange); transform: translateX(-50%);
  will-change: width, height;
}
/* absolutely centred, not grid-centred: the group (with its hidden "to") is wider than the box, and
   grid alignment shunts an overflowing item to the start edge instead of centring it. */
.mbox__nums {
  position: absolute; left: 50%; top: 50%;
  display: inline-flex; align-items: baseline; color: #fff; white-space: nowrap; will-change: transform;
}
.fnum { display: inline-block; font-family: "Clash Display", sans-serif; font-weight: 600; font-size: clamp(2.6rem, 7vw, 6.2rem); line-height: 1; letter-spacing: -0.02em; will-change: transform; }
/* the "to" the headline's surviving glyphs hand over to. Lives inside the box from the start so it
   scales and travels with it; invisible until the two flying glyphs land on top of it. */
.fto { display: inline-flex; margin-right: 0.24em; opacity: 0; font-family: "Clash Display", sans-serif; font-weight: 600; font-size: clamp(2.6rem, 7vw, 6.2rem); line-height: 1; letter-spacing: -0.02em; }
.fto span { display: inline-block; }

/* --- the crop: rails + registration marks, sized to the box, handed to .pfr at the end --- */
.crop {
  position: absolute; z-index: 4; left: 50%; top: 0; transform: translateX(-50%);
  width: var(--fbox-w); height: calc(var(--fbox-w) * 9 / 16);
  border: 2px solid var(--pitch); opacity: 0; pointer-events: none;
}
.crop__c { position: absolute; width: 12px; height: 12px; background: var(--snow); border: 2px solid var(--pitch); }
.crop__c--tl { top: -7px; left: -7px; } .crop__c--tr { top: -7px; right: -7px; }
.crop__c--bl { bottom: -7px; left: -7px; } .crop__c--br { bottom: -7px; right: -7px; }

/* white grid overlay on the orange (fades in) */
.flip__whitegrid { position: absolute; inset: 0; z-index: 5; opacity: 0; }

/* narrative: white, centered on the orange, fades in last */
.flip__copy { position: absolute; z-index: 6; opacity: 0; width: min(52rem, 86vw); text-align: center; }
.flip__eyebrow { font-family: "Switzer", sans-serif; font-weight: 600; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.14em; color: #fff; opacity: 0.8; margin: 0 0 1.2rem; }
.flip__statement {
  font-family: "Switzer", sans-serif; font-weight: 700; color: #fff;
  font-size: clamp(1.7rem, 3.4vw, 3.2rem); line-height: 1.2; letter-spacing: -0.01em; margin: 0;
}
.flip__copy .hl { background: #fff; color: var(--orange); }   /* white box, orange text */
/* keeps hyphenated compounds off a line break, e.g. "on-demand" splitting into "on-" / "demand" */
.nb { white-space: nowrap; }
/* scroll affordance: fades the moment the morph starts */
.flip__cue {
  position: absolute; z-index: 6; bottom: clamp(1.4rem, 5vh, 2.9rem); left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.55rem; margin: 0; pointer-events: none; white-space: nowrap;
  font-family: "Switzer", sans-serif; font-weight: 600; font-size: clamp(0.72rem, 1.1vw, 0.82rem);
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--mute);
}
.flip__cue-arw { font-size: 1.05em; line-height: 1; animation: flipCueBob 1.5s var(--ease-out) infinite; }
@keyframes flipCueBob { 0%, 100% { transform: translateY(-2px); opacity: 0.55; } 50% { transform: translateY(3px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .flip__cue-arw { animation: none; } }

.slice-end { height: 30vh; }

/* shared small section label */
.sec-eyebrow { font-family: "Switzer", sans-serif; font-weight: 600; font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--orange); margin: 0 0 1.1rem; }

/* ============ 3 · THE RECEIPTS (pinned, viewport-based beats) ============ */
.rec { position: relative; z-index: 1; height: 460vh; }
.rec__pin { position: sticky; top: 0; height: 100dvh; overflow: hidden; }
.rec__text { position: absolute; inset: 0; z-index: 1; }
.rec__boxes { position: absolute; inset: 0; z-index: 2; }
.rec__dash { position: absolute; inset: 0; z-index: 3; }

/* beat 1: text (flex column so the eyebrow hugs the headline, like section 2) */
.rec__text { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--pad); }
.rec__h { font-family: "Clash Display", sans-serif; font-weight: 600; text-transform: lowercase; font-size: clamp(2.1rem, 4.8vw, 4.4rem); line-height: 1.04; letter-spacing: -0.02em; margin: 0 auto 1.4rem; max-width: 18ch; }
.rec__sub { font-size: clamp(1.02rem, 1.4vw, 1.24rem); color: var(--slate); max-width: 40rem; margin: 0 auto; line-height: 1.5; }

/* beat 2: stat boxes fill orange on the grid, big white numbers inside */
.rec__boxes { opacity: 0; }
.statbox {
  position: absolute; left: var(--l); top: 24%; width: 16.4%; height: 44%;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left;
  padding: clamp(0.9rem, 1.4vw, 1.5rem); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(16,12,8,0.16);
}
.statbox__fill { position: absolute; inset: 0; z-index: 0; background: var(--orange); transform: scaleY(0); transform-origin: bottom; }
.statbox__num { position: relative; z-index: 1; font-family: "Clash Display", sans-serif; font-weight: 600; font-size: clamp(2.6rem, 4.8vw, 4.8rem); line-height: 1; letter-spacing: -0.02em; color: #fff; opacity: 0; white-space: nowrap; }
.statbox__label { position: relative; z-index: 1; font-size: 0.92rem; color: rgba(255,255,255,0.9); margin-top: 0.5rem; line-height: 1.3; opacity: 0; max-width: 20ch; }

/* beat 3: black dashboard; the middle grid row scrolls as filled grid-box cards */
.rec__dash { background: var(--pitch); clip-path: inset(100% 0 0 0); }   /* curtain-wipes UP from the bottom */
.rec__dashgrid { position: absolute; inset: 0; z-index: 0; }
.carousel { position: absolute; left: 0; right: 0; top: 24%; height: 44%; overflow: hidden; z-index: 1; }
.carousel__track { display: flex; height: 100%; will-change: transform; }
.dcard {
  flex: 0 0 auto; width: 16.4vw; height: 100%; position: relative;
  background: var(--snow); color: var(--pitch); padding: clamp(1rem, 1.6vw, 1.7rem);
  display: flex; flex-direction: column; justify-content: flex-end;
  border-right: 1px solid rgba(16, 12, 8, 0.15);   /* separator between cells */
}
.carousel__track .dcard:first-child { border-left: 1px solid rgba(16, 12, 8, 0.15); }
.dcard--w2 { width: 32.8vw; }
.dcard b { font-family: "Clash Display", sans-serif; font-weight: 600; font-size: clamp(2.2rem, 4vw, 4.2rem); line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.dcard__lbl { font-size: 0.9rem; color: var(--slate); margin-top: 0.6rem; max-width: 24ch; }
.dcard__acc { position: absolute; top: clamp(1rem, 1.6vw, 1.7rem); left: clamp(1rem, 1.6vw, 1.7rem); width: 14px; height: 14px; background: var(--orange); }
.dcard--title { background: var(--orange); color: #fff; justify-content: space-between; }
.dcard--title b { text-transform: lowercase; font-size: clamp(2rem, 3.4vw, 3.4rem); line-height: 1.02; }
.dcard__badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.4rem; background: var(--pitch); color: #fff; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; padding: 0.32rem 0.6rem; border-radius: 0; text-transform: uppercase; }
.dcard__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
@media (prefers-reduced-motion: no-preference) { .dcard__dot { animation: livePulse 1.6s infinite; } }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 60,0.55); } 70% { box-shadow: 0 0 0 8px rgba(255, 90, 60,0); } 100% { box-shadow: 0 0 0 0 rgba(255, 90, 60,0); } }

@media (max-width: 720px) {
  .statbox { width: 27%; }
  .dcard { width: 46vw; } .dcard--w2 { width: 82vw; }
}

/* ============ 4 · LIVE ATTENTION DASHBOARD ============ */
/* Zoon's dashboard in this site's language: no rounded cards or pill badges — a connected swiss
   grid of hairline cells, Clash Display numbers, and sharp orange change chips. */
.ldash { position: relative; z-index: 1; padding: calc(clamp(3rem, 7vh, 5.5rem) + 4px) 0 calc(clamp(3.5rem, 8vh, 6rem) + 4px); }
/* the head sits on the page's swiss grid, so without an opaque card the verticals and the 9x16
   rows run straight through the title. Same move .creative__head and .unrel__head already make.
   It shares its left/right edges with the metrics grid below and collapses into it, so head,
   figures and panels read as one continuous board. */
.ldash__top { position: relative; z-index: 1; background: var(--snow); margin: 0 9vw; border: 1px solid var(--line); padding: clamp(1.3rem, 2.2vw, 2rem) clamp(1.1rem, 1.8vw, 1.7rem); }
.ldash__head { padding: 0; }
.ldash__h { font-family: "Clash Display", sans-serif; font-weight: 600; text-transform: lowercase; font-size: clamp(1.7rem, 3.2vw, 3rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0; color: var(--pitch); }

/* period row: label left, hint + segmented control right */
.ldash__bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; padding: clamp(1.2rem, 3vh, 1.9rem) 0 0; }
.ldash__period { font-family: "Clash Display", sans-serif; font-weight: 600; text-transform: lowercase; font-size: clamp(1.05rem, 1.5vw, 1.35rem); letter-spacing: -0.01em; margin: 0; color: var(--pitch); }
.ldash__ctrl { display: flex; flex-direction: column; align-items: flex-end; gap: 0.55rem; }
.ldash__hint { margin: 0; font-size: 0.78rem; line-height: 1.4; color: var(--mute); text-align: right; }
/* segmented control: sharp, hairline box; the active half fills pitch like the site's CTAs */
.ldash__tabs { display: inline-flex; border: 1px solid var(--line); background: var(--snow); }
.ldash__tab {
  appearance: none; border: 0; background: none; cursor: pointer;
  font-family: "Switzer", sans-serif; font-weight: 600; font-size: 0.82rem; text-transform: lowercase;
  padding: 0.55rem 1.1rem; color: var(--mute); transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.ldash__tab:hover { color: var(--pitch); }
.ldash__tab.is-on { background: var(--pitch); color: var(--snow); }

/* cells: 1px gap on the line colour gives every cell a shared hairline, so nothing doubles up */
.ldash__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: -1px 9vw 0; background: var(--line); border: 1px solid var(--line); }
.lcell { background: var(--snow); display: flex; flex-direction: column; padding: clamp(1.1rem, 1.8vw, 1.7rem); min-height: clamp(132px, 17vh, 172px); justify-content: flex-end; }
.lcell__sq { width: 10px; height: 10px; background: var(--orange); margin-bottom: auto; }
.lcell__top { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.9rem; }
.lcell__num { font-family: "Clash Display", sans-serif; font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 3.2rem); line-height: 1; letter-spacing: -0.02em; color: var(--pitch); white-space: nowrap; }
/* change chip: sharp rectangle, orange — the site has no pills */
.lcell__chg { font-family: "Switzer", sans-serif; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.01em; color: #fff; background: var(--orange); padding: 0.18em 0.45em; white-space: nowrap; }
.lcell__chg:empty { display: none; }   /* a period with no published change simply shows the number */
.lcell__lbl { font-size: 0.9rem; line-height: 1.3; color: var(--slate); margin-top: 0.5rem; }

/* chart + target board, sharing the metrics grid's hairline construction. -1px collapses the two
   boxes' touching borders so the whole thing reads as one continuous board. */
.ldash__panels { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1px; margin: -1px 9vw 0; background: var(--line); border: 1px solid var(--line); }
.lpanel { background: var(--snow); padding: clamp(1.1rem, 1.8vw, 1.7rem); display: flex; flex-direction: column; }
.lpanel__h { font-family: "Clash Display", sans-serif; font-weight: 600; text-transform: lowercase; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.15; letter-spacing: -0.01em; margin: 0; color: var(--pitch); }
.lpanel__h span { color: var(--mute); }
.lpanel__sub { margin: 0.4rem 0 0; font-size: 0.8rem; line-height: 1.4; color: var(--mute); }
.lpanel__tot { margin-top: 1rem; }
.lpanel__tot-lbl { display: block; font-size: 0.76rem; color: var(--mute); }
.lpanel__tot-row { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.25rem; }
.lpanel__tot b { font-family: "Clash Display", sans-serif; font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1; letter-spacing: -0.02em; color: var(--pitch); }

.lchart { margin-top: 1.1rem; }
.lchart svg, .lgauge svg { display: block; width: 100%; height: auto; }
.lc-grid { stroke: var(--line); stroke-width: 1; }
.lc-ax { font-family: "Switzer", sans-serif; font-weight: 500; font-size: 10px; fill: var(--mute); }
.lc-views { fill: none; stroke: var(--pitch); stroke-width: 2; stroke-linejoin: round; }
.lc-target { fill: none; stroke: var(--mute); stroke-width: 1.5; stroke-dasharray: 5 4; }
.lc-dot { fill: var(--pitch); }
/* square keys, like every other accent on the site */
.lchart__key { display: flex; gap: 1.2rem; margin: 0.8rem 0 0; font-size: 0.74rem; color: var(--mute); }
.lkey { display: inline-flex; align-items: center; gap: 0.45rem; }
.lkey::before { content: ""; width: 9px; height: 9px; background: var(--pitch); }
.lkey--target::before { background: none; box-shadow: inset 0 0 0 1px var(--mute); }

.lgauge { margin: 1.2rem auto 0; width: min(230px, 100%); }
.lg-track { fill: none; stroke: var(--paper); }
.lg-fill { fill: none; stroke: var(--pitch); }
.lg-num { font-family: "Clash Display", sans-serif; font-weight: 600; font-size: 42px; letter-spacing: -0.02em; fill: var(--pitch); }
.lgauge__note { margin: 1rem 0 0; font-size: 0.84rem; line-height: 1.4; color: var(--slate); text-align: center; }
/* the container's --line background is what draws the hairlines between the three cells, so any
   padding on it paints as a solid band — the spacing belongs to the note above and the cells. */
.lgauge__note { margin-bottom: 1.4rem; }
.lgauge__stats { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.lgauge__stats > div { background: var(--snow); display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding-top: 0.9rem; }
.lgauge__stats span { font-size: 0.72rem; color: var(--mute); }
.lgauge__stats b { font-family: "Clash Display", sans-serif; font-weight: 600; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1; letter-spacing: -0.02em; color: var(--pitch); }

@media (max-width: 820px) {
  .ldash__top { margin-left: var(--pad); margin-right: var(--pad); }
  .ldash__grid { grid-template-columns: repeat(2, 1fr); margin-left: var(--pad); margin-right: var(--pad); }
  .ldash__panels { grid-template-columns: 1fr; margin-left: var(--pad); margin-right: var(--pad); }
}
@media (max-width: 480px) {
  .ldash__bar { align-items: flex-start; }
  .ldash__ctrl { align-items: flex-start; }
  .ldash__hint { text-align: left; }
}
/* phones: a long figure like 165.4M pushes its chip onto a second line while a short one like
   5.3M keeps it inline, which leaves the 2x2 grid ragged. Drop them all to their own line. */
@media (max-width: 640px) {
  .lcell__top { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

/* ============ 3 · BRANDS WALL (3 auto-scrolling logo rows, middle row reversed) ============ */
.trust { position: relative; z-index: 1; background: var(--snow); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-top: clamp(3rem, 7vh, 5.5rem); }
.trust__h { font-family: "Clash Display", sans-serif; font-weight: 600; letter-spacing: -0.02em; font-size: clamp(1.7rem, 3.2vw, 3rem); line-height: 1.05; margin: 0 0 clamp(1.6rem, 4vh, 3rem); padding-left: 9%; color: var(--pitch); }
.trust__marquee { overflow: hidden; height: clamp(88px, 12vh, 128px); border-top: 1px solid var(--line); }
.trust__track { display: flex; height: 100%; width: max-content; animation: trustMarquee var(--dur, 46s) linear infinite; will-change: transform; }
.trust__track--rev { animation-direction: reverse; }   /* middle row travels the other way */
.trust__marquee:hover .trust__track { animation-play-state: paused; }
.tbox {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  padding: 0 clamp(1.6rem, 3.4vw, 3.6rem); border-right: 1px solid var(--line); white-space: nowrap;
}
/* every mark is delivered tightly cropped (Cloudinary e_trim / bbox-fitted SVGs), so one
   fixed optical box + object-fit:contain sizes them all coherently: wide wordmarks hit the
   width cap and sit short, compact symbol marks hit the height cap. */
.tlogo { display: block; --h: clamp(34px, 4.6vh, 46px); height: var(--h); width: clamp(104px, 11vw, 148px); object-fit: contain; filter: brightness(0); opacity: 0.85; }
.tlogo--sq { --h: clamp(46px, 6.2vh, 64px); }   /* square/tall marks need more height to carry the same ink weight */
@keyframes trustMarquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .trust__track { animation: none; } .trust__marquee { overflow-x: auto; } }
/* phones: heading lines up with the §4 stats heading below it */
@media (max-width: 720px) { .trust__h { padding-left: var(--pad); } }

/* ============ 5 · WHAT WE DO (orange section, full rectangular rows, brand-first) ============ */
.wwd { position: relative; z-index: 1; background: var(--orange); color: #fff; padding: clamp(2rem, 4vh, 3.25rem) 0 clamp(2.25rem, 4vh, 3.5rem); overflow: hidden; }
.wwd .sec-eyebrow { color: #fff; opacity: 0.85; }
.wwd__intro { padding: 0 9vw; margin-bottom: clamp(2.5rem, 5vh, 4.5rem); }
.wwd__h {
  font-family: "Clash Display", sans-serif; font-weight: 600; text-transform: lowercase;
  font-size: clamp(1.7rem, 3.2vw, 3rem); line-height: 1.08; letter-spacing: -0.02em;
  margin: 0; max-width: 20ch; color: #fff;
}
.wwd .hl { background: #fff; color: var(--orange); }   /* inverted highlighter on orange */
/* the rows are service-led now, so creators/agencies keep a quiet route into the apply tabs */
.wwd__aside { margin: 1.2rem 0 0; font-size: 0.92rem; color: rgba(255, 255, 255, 0.82); }
.wwd__aside a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.wwd__aside a:hover { color: var(--pitch); }

/* rows: clean orange rectangles (no swiss grid lines); box partitions appear on hover */
.wwd__rows { border-top: 1px solid rgba(255, 255, 255, 0.45); }
.wwd-row { display: flex; align-items: stretch; text-decoration: none; min-height: clamp(210px, 30vh, 340px); border-bottom: 1px solid rgba(255, 255, 255, 0.45); transition: background-color 0.3s var(--ease-out); }
.wwd-row:hover { background: #fff; }   /* opaque white fill on hover */

/* box 1: empty spacer. right edge = the separator to the left of the name. */
.wwd-row__pad { flex: 0 0 auto; width: 9vw; border-right: 1px solid rgba(255, 255, 255, 0.45); transition: border-color 0.3s var(--ease-out); }
/* box 2: number + name, larger, vertically centred left. right edge = name|body partition. */
.wwd-row__id { flex: 0 0 auto; width: clamp(210px, 24vw, 350px); display: flex; flex-direction: column; justify-content: center; gap: 0.7rem; padding: clamp(1.4rem, 2vw, 2.2rem) clamp(1.2rem, 1.8vw, 2rem); border-right: 1px solid rgba(255, 255, 255, 0.45); transition: border-color 0.3s var(--ease-out); }
.wwd-row__idx { display: inline-flex; align-items: center; gap: 0.5rem; font-family: "Switzer", sans-serif; font-weight: 600; font-size: 0.85rem; color: #fff; transition: color 0.3s var(--ease-out); }
.wwd-sq { width: 8px; height: 8px; background: #fff; transition: background-color 0.3s var(--ease-out); }   /* square accent, matches the dashboard cards */
.wwd-row__name { font-family: "Clash Display", sans-serif; font-weight: 600; text-transform: lowercase; font-size: clamp(1.6rem, 2.35vw, 2.5rem); line-height: 1; letter-spacing: -0.02em; color: #fff; transition: color 0.3s var(--ease-out); }

/* box 3: body (copy always visible) */
.wwd-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.55rem; padding: clamp(1.6rem, 2.4vw, 2.6rem) 0 clamp(1.6rem, 2.4vw, 2.6rem) clamp(1.6rem, 3vw, 3.2rem); }
.wwd-row__head { font-family: "Switzer", sans-serif; font-weight: 700; font-size: clamp(1.2rem, 1.7vw, 1.6rem); line-height: 1.15; color: #fff; margin: 0; transition: color 0.3s var(--ease-out); }
.wwd-row__copy { font-size: clamp(0.98rem, 1.1vw, 1.1rem); line-height: 1.5; color: rgba(255, 255, 255, 0.88); margin: 0.75rem 0 0; max-width: 54ch; transition: color 0.3s var(--ease-out); }
.wwd-row__lines { display: flex; flex-wrap: wrap; align-items: center; margin: 0.85rem 0 0; font-family: "Switzer", sans-serif; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.01em; color: #fff; transition: color 0.3s var(--ease-out); }
.wwd-row__lines span { display: inline-flex; align-items: center; }
.wwd-row__lines span:not(:last-child)::after { content: ""; width: 7px; height: 7px; background: #fff; margin: 0 0.75em; transition: background-color 0.3s var(--ease-out); }   /* square separators */
/* per-row tap CTA — desktop uses the rectangle cursor instead, so it's hidden until mobile */
.wwd-cta { display: none; }

/* hover: partitions appear, text inverts to black, accents to orange */
.wwd-row:hover .wwd-row__pad, .wwd-row:hover .wwd-row__id { border-right-color: rgba(16, 12, 8, 0.14); }
.wwd-row:hover .wwd-row__name, .wwd-row:hover .wwd-row__head { color: var(--pitch); }
.wwd-row:hover .wwd-row__copy { color: var(--slate); }
.wwd-row:hover .wwd-row__lines { color: var(--pitch); }
.wwd-row:hover .wwd-row__idx { color: var(--orange); }
.wwd-row:hover .wwd-sq, .wwd-row:hover .wwd-row__lines span:not(:last-child)::after { background: var(--orange); }

/* shared rectangle cursor: [ label | ↗ ], rides a set of targets (desktop, JS-added).
   label set per section; arrow rotates to point right on press. used by §5 and §7. */
.rcur-target { cursor: none; }
.rcursor { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; will-change: transform; }
.rcursor__box { display: flex; align-items: stretch; height: 46px; background: var(--pitch); color: #fff; transform: translate(-50%, -50%) scale(0); transform-origin: center; transition: transform 0.26s var(--ease-out); }
.rcursor__box.is-on { transform: translate(-50%, -50%) scale(1); }
.rcursor__label { display: flex; align-items: center; padding: 0 0.95rem; font-family: "Switzer", sans-serif; font-weight: 600; font-size: 0.85rem; white-space: nowrap; }
.rcursor__arw { display: grid; place-items: center; aspect-ratio: 9 / 16; border-left: 1px solid rgba(255, 255, 255, 0.4); }
.rcursor__arw svg { width: 15px; height: 15px; transform: rotate(-45deg); transition: transform 0.3s var(--ease-out); }
.rcursor__box.is-click .rcursor__arw svg { transform: rotate(0deg); }

/* deferred: full mobile/tablet pass. minimal stack so it isn't broken on small screens. */
@media (max-width: 820px) {
  .wwd-row { flex-direction: column; }
  .wwd-row__pad { display: none; }
  .wwd-row__id { width: 100%; flex-direction: row; align-items: center; justify-content: flex-start; gap: 1rem; border-right: none; padding: 1.2rem var(--pad); }
  /* horizontal grid separator between the subtitle (brands/creators/agencies) and its body */
  .wwd-row__body { padding: 1.6rem var(--pad) 2.1rem; border-top: 1px solid rgba(255, 255, 255, 0.45); align-items: flex-start; }
  .wwd__intro, .wwd__h, .wwd-row__id, .wwd-row__body, .wwd-row__head, .wwd-row__copy, .wwd-row__lines { text-align: left; justify-content: flex-start; }
}

/* ============ 6 · CREATIVE (white head band + auto-scroll sine band + grid reel) ============ */
.creative { position: relative; z-index: 1; padding: clamp(6rem, 13vh, 10rem) 0 clamp(2rem, 4vh, 3rem); }
/* title + copy in a bordered row box (grid-coloured stroke); snow bg hides the fixed grid behind it */
.creative__head { position: relative; z-index: 1; background: var(--snow); padding: clamp(2.5rem, 5vh, 4rem) 9vw; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.creative__h { font-family: "Clash Display", sans-serif; font-weight: 600; text-transform: lowercase; font-size: clamp(2.2rem, 5.2vw, 4.6rem); line-height: 1.03; letter-spacing: -0.02em; margin: 0 0 1.2rem; color: var(--pitch); max-width: 20ch; }
.creative__sub { font-size: clamp(1.05rem, 1.4vw, 1.3rem); color: var(--slate); max-width: 44ch; margin: 0; line-height: 1.5; }

/* stage: reel sits in the flow (grid shows through); the sine band weaves behind it.
   extra vertical room so the deeper arch clears the cards without clipping. */
.creative__stage { position: relative; padding: clamp(4.5rem, 10vh, 8.5rem) 0; }

/* thin black sine band: white text + orange square separators, auto-scrolls. sits BEHIND the cards. */
.cband { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); width: 100%; height: auto; z-index: 1; pointer-events: none; overflow: visible; }
.cband__ribbon { fill: none; stroke: var(--pitch); stroke-width: 40; }
.cband__t { fill: #fff; font-family: "Switzer", sans-serif; font-weight: 600; font-size: 18px; letter-spacing: 0.04em; }
.cband__sq { fill: var(--orange); }

/* reel: 9:16 grid-cell video cards, sharp edges, drag-to-scrub (desktop) / swipe (touch). above the band. */
.reel { position: relative; z-index: 2; padding-left: 9vw; overflow-x: auto; scrollbar-width: none; cursor: grab; }
.reel::-webkit-scrollbar { display: none; }
.reel.is-drag { cursor: grabbing; }
.reel__track { display: flex; width: max-content; user-select: none; }
.reel__card { flex: 0 0 auto; width: 16.4vw; aspect-ratio: 9 / 16; position: relative; overflow: hidden; background: var(--paper); border-right: 1px solid var(--line); }
.reel__card:first-child { border-left: 1px solid var(--line); }
.reel__card img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) saturate(0.94); pointer-events: none; }
/* inline video cards */
.reel__card--video { background: var(--pitch); }
.reel__vid { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; background: var(--pitch); }
.reel__mute {
  position: absolute; bottom: 10px; right: 10px; z-index: 3; pointer-events: auto;
  width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(16,12,8,0.5); backdrop-filter: blur(4px); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
  display: grid; place-items: center; -webkit-tap-highlight-color: transparent; transition: background 0.2s;
}
.reel__mute:hover { background: rgba(16,12,8,0.72); }
.reel__mute svg { width: 16px; height: 16px; grid-area: 1 / 1; }
.reel__mute .icon-muted path:first-child, .reel__mute .icon-unmuted path:first-child { fill: #fff; }
.reel__mute .icon-unmuted { display: none; }
.reel__mute.reel__mute--on .icon-muted { display: none; }
.reel__mute.reel__mute--on .icon-unmuted { display: block; }
/* pause / play — bottom-left, same treatment as the mute button */
.reel__pause {
  position: absolute; bottom: 10px; left: 10px; z-index: 3; pointer-events: auto;
  width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(16,12,8,0.5); backdrop-filter: blur(4px); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
  display: grid; place-items: center; -webkit-tap-highlight-color: transparent; transition: background 0.2s;
}
.reel__pause:hover { background: rgba(16,12,8,0.72); }
.reel__pause svg { width: 15px; height: 15px; grid-area: 1 / 1; fill: #fff; }
.reel__pause .icon-play { display: none; }
.reel__pause.reel__pause--paused .icon-pause { display: none; }
.reel__pause.reel__pause--paused .icon-play { display: block; }

/* full-bleed cover: the media sits ~1px past every edge so the card's own
   (dark) background can't peek through as a thin black border when object-fit
   cover leaves a sub-pixel gap. */
.reel__card img, .reel__vid {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: calc(100% + 2px); height: calc(100% + 2px);
}

/* reel controls (mute / pause) hide by default, reveal on card hover or focus.
   Touch devices (no hover) keep them visible so they stay reachable. */
@media (hover: hover) {
  .reel__mute, .reel__pause { opacity: 0; transition: opacity 0.22s var(--ease-out), background 0.2s; }
  .reel__card:hover .reel__mute, .reel__card:hover .reel__pause,
  .reel__mute:focus-visible, .reel__pause:focus-visible { opacity: 1; }
}

@media (max-width: 820px) { .reel__card { width: 44vw; } }

/* ============ 7 · COMPLETELY UNRELATED (whimsical bento + join-the-conversation chat) ============ */
.unrel { position: sticky; z-index: 1; padding: clamp(2rem, 4vh, 3rem) 0 clamp(6rem, 12vh, 9rem); }
/* title block: same bordered row box as §6 (grid-coloured stroke, body below the title) */
.unrel__head { background: var(--snow); padding: clamp(2.5rem, 5vh, 4rem) 9vw; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: clamp(2rem, 4vh, 3rem); }
.unrel__h { font-family: "Clash Display", sans-serif; font-weight: 600; text-transform: lowercase; font-size: clamp(2.2rem, 5.2vw, 4.6rem); line-height: 1.03; letter-spacing: -0.02em; margin: 0 0 1rem; color: var(--pitch); }
.unrel__sub { font-size: clamp(1.05rem, 1.4vw, 1.3rem); color: var(--slate); max-width: 42ch; margin: 0; line-height: 1.5; }

/* connected swiss grid of fact cards: square accent top, text bottom, sharp */
.unrel__grid { margin: 0 9vw; display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.ucard { grid-column: span 2; background: var(--snow); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(1.5rem, 2.2vw, 2.4rem); display: flex; flex-direction: column; justify-content: space-between; gap: clamp(1.5rem, 3vw, 2.5rem); min-height: clamp(190px, 23vh, 260px); transition: background-color 0.3s var(--ease-out); }
.ucard--wide { grid-column: span 3; }
/* hover: opaque orange fill, text + square invert to white (matches the site's interaction style) */
.ucard:hover { background: var(--orange); }
.ucard:hover p { color: #fff; }
.ucard:hover .ucard__sq { background: #fff; }
.ucard__sq { width: 12px; height: 12px; background: var(--orange); flex: 0 0 auto; transition: background-color 0.3s var(--ease-out); }
/* mobile-only "clickable" affordance: black square + angled arrow, bottom-right of each card */
.ucard__go { display: none; }
.ucard p { font-family: "Switzer", sans-serif; font-weight: 500; font-size: clamp(1.05rem, 1.35vw, 1.35rem); line-height: 1.4; color: var(--pitch); margin: 0; max-width: 34ch; transition: color 0.3s var(--ease-out); }
@media (max-width: 820px) { .unrel__grid { grid-template-columns: 1fr; } .ucard, .ucard--wide { grid-column: 1 / -1; } }

/* §7 chat modal: sharp rectangle "team group chat" */
.chat { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--pad); background: rgba(16, 12, 8, 0.55); }
.chat[hidden] { display: none; }
.chat__box { width: min(440px, 100%); height: min(560px, 84vh); display: flex; flex-direction: column; background: var(--snow); box-shadow: 0 40px 90px -30px rgba(16, 12, 8, 0.5); }
.chat__head { display: flex; align-items: center; gap: 0.8rem; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--line); }
.chat__badge { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--pitch); color: #fff; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.3rem 0.5rem; white-space: nowrap; }
.chat__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
@media (prefers-reduced-motion: no-preference) { .chat__dot { animation: livePulse 1.6s infinite; } }
.chat__topic { font-family: "Clash Display", sans-serif; font-weight: 600; text-transform: lowercase; font-size: 1.15rem; letter-spacing: -0.01em; color: var(--pitch); flex: 1; }
.chat__close { display: grid; place-items: center; margin-left: auto; padding: 0.3rem; background: none; border: none; color: var(--pitch); cursor: pointer; }
.chat__close:hover { color: var(--orange); }
.chat__log { flex: 1; min-height: 0; overflow-y: auto; padding: 1.2rem; display: flex; flex-direction: column; gap: 0.9rem; }
.chat__msg { max-width: 82%; }
.chat__msg .who { font-size: 0.7rem; font-weight: 600; color: var(--mute); margin: 0 0 0.25rem 0.15rem; }
.chat__bubble { padding: 0.6rem 0.85rem; font-size: 0.92rem; line-height: 1.35; color: var(--pitch); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.chat__msg--me { align-self: flex-end; }
.chat__msg--me .who { text-align: right; }
.chat__msg--me .chat__bubble { background: var(--orange); color: #fff; box-shadow: none; }
.chat__bar { display: flex; border-top: 1px solid var(--line); }
.chat__input { flex: 1; min-width: 0; border: none; padding: 0.9rem 1.1rem; font-family: "Switzer", sans-serif; font-size: 0.95rem; color: var(--pitch); background: #fff; }
.chat__input:focus { outline: 2px solid var(--orange); outline-offset: -2px; }
.chat__send { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0 1.2rem; background: var(--pitch); color: #fff; border: none; font-family: "Switzer", sans-serif; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: background-color 0.24s var(--ease-out); }
.chat__send:hover { background: var(--orange); }

/* ============ 8 · FOUNDER (full-viewport orange panel, white 9:16 grid, curtain-wipes up) ============ */
/* .tail-freeze bounds §7's sticky tail so it releases (stops freezing) right as §8 finishes.
   its height (= §7 height + 100vh of freeze room) is set responsively in JS. */
.tail-freeze { position: relative; }
/* margin-top: -200vh pulls §8 up over the frozen §7 (§7 height + 100vh freeze room via the wrapper),
   so the last cards + closing rule are the FROZEN backdrop the black panel wipes up over. */
/* pointer-events: the pin overlaps §7 for 200vh while fully clipped, so it would swallow
   clicks on the §7 cards (chat modal). Only the panel takes pointer events, and its clip-path
   means it only takes them where it has actually wiped in. */
.founder { position: relative; z-index: 1; height: 200vh; margin-top: -200vh; pointer-events: none; }
.founder__pin { position: sticky; top: 0; height: 100dvh; overflow: hidden; }
/* orange panel = the curtain; wipes up from the bottom (clip-path animated in JS).
   inverted from the old black close: the photo box is the only black thing here now. */
.founder__panel { position: absolute; inset: 0; background: var(--orange); clip-path: inset(100% 0 0 0); will-change: clip-path; pointer-events: auto; }
.founder__grid { position: absolute; inset: 0; z-index: 0; }   /* white 9:16 grid, same as the dashboard */

/* bento content: shared white borders, orange fills so the bg grid never crosses inside a box */
.founder__inner {
  position: absolute; inset: 0; z-index: 1;
  margin: clamp(84px, 11vh, 120px) 9vw clamp(1.25rem, 3.5vh, 2.5rem);
  display: grid; grid-template-columns: 49.2fr 32.8fr; grid-template-rows: auto repeat(4, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.5); border-left: 1px solid rgba(255, 255, 255, 0.5);
}
.fbox { position: relative; background: var(--orange); border-right: 1px solid rgba(255, 255, 255, 0.5); border-bottom: 1px solid rgba(255, 255, 255, 0.5); padding: clamp(0.85rem, 1.4vw, 1.5rem); min-width: 0; overflow: hidden; }

/* title box: full width, top row */
.fbox--title { grid-column: 1 / -1; grid-row: 1; display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; padding: clamp(0.9rem, 1.7vw, 1.6rem) clamp(1.1rem, 1.8vw, 1.7rem); }
.founder .sec-eyebrow { color: #fff; opacity: 0.85; }      /* orange-on-orange would vanish */
.founder .hl { background: #fff; color: var(--orange); }   /* inverted highlighter on orange */
.founder__h { font-family: "Clash Display", sans-serif; font-weight: 600; text-transform: lowercase; font-size: clamp(1.55rem, 2.9vw, 2.7rem); line-height: 1.04; letter-spacing: -0.02em; margin: 0; color: var(--snow); max-width: 22ch; }
.founder__lede { font-size: clamp(0.9rem, 1.05vw, 1.1rem); line-height: 1.4; color: rgba(255, 255, 255, 0.88); margin: 0; max-width: 50ch; }

/* photo box: left, spans the four fact rows. BLACK fill — the shot is a full-bleed studio
   frame, not a cutout, so it covers the box. He sits right of centre in the source, which
   leaves the dark negative space on the left for the name wordmark. */
.fbox--photo { grid-column: 1; grid-row: 2 / 6; padding: 0; background: var(--pitch); }
.fbox--photo img { width: 100%; height: 100%; object-fit: cover; object-position: 56% center; }
/* name wordmark: top-left on the orange, echoes Zoon's big ARSALAN */
.fbox__name { position: absolute; left: clamp(1rem, 1.6vw, 1.7rem); bottom: clamp(0.9rem, 1.6vw, 1.5rem); z-index: 1; font-family: "Clash Display", sans-serif; font-weight: 600; text-transform: lowercase; font-size: clamp(1.8rem, 3vw, 3rem); line-height: 0.9; letter-spacing: -0.02em; color: var(--snow); }

/* fact boxes: right column, big number + label; orange square accent inline before the label */
.fstat { grid-column: 2; display: flex; flex-direction: column; justify-content: center; gap: 0.3rem; padding: clamp(0.55rem, 0.9vw, 1rem) clamp(0.85rem, 1.4vw, 1.5rem); }
.fstat:nth-of-type(3) { grid-row: 2; } .fstat:nth-of-type(4) { grid-row: 3; }
.fstat:nth-of-type(5) { grid-row: 4; } .fstat:nth-of-type(6) { grid-row: 5; }
.fbox__sq { width: 10px; height: 10px; background: #fff; flex: 0 0 auto; margin-bottom: 0.15rem; }   /* inline accent, no top-clearance needed */
.fstat__num { font-family: "Clash Display", sans-serif; font-weight: 600; font-size: clamp(1.7rem, 2.6vw, 2.7rem); line-height: 1; letter-spacing: -0.02em; color: var(--snow); }
.fstat__lbl { font-size: clamp(0.84rem, 0.98vw, 1rem); line-height: 1.3; color: rgba(255, 255, 255, 0.85); max-width: 32ch; }
.fstat--wink .fstat__num { font-size: clamp(1.3rem, 1.9vw, 2rem); }

/* TABLET ONLY (641-820): stacked static founder, no wipe. mobile (<=640) keeps the desktop
   pinned-wipe machinery (enabled below) since the Writer wants the curtain-wipe on phones. */
@media (min-width: 641px) and (max-width: 820px) {
  .tail-freeze { height: auto !important; }
  .unrel { position: relative; top: auto; }   /* no tail-freeze on the stacked tablet model */
  .founder { height: auto; margin-top: 0; }
  .founder__pin { position: relative; height: auto; }
  .founder__panel { position: relative; clip-path: none !important; }
  .founder__inner { position: relative; inset: auto; margin: 92px var(--pad) var(--pad); grid-template-columns: 1fr; grid-template-rows: none; }
  .fbox--photo { grid-column: 1; grid-row: auto; aspect-ratio: 4 / 5; }
  .fstat { grid-column: 1; }
  .fstat:nth-of-type(n) { grid-row: auto; }
}

/* ============ 11 · WORK WITH US / PRICING (orange, white 9:16 grid, big copy card) ============ */
.pricing { position: relative; z-index: 1; background: var(--orange); min-height: 100vh; display: grid; place-items: center; padding: clamp(5rem, 12vh, 9rem) var(--pad); overflow: hidden; }
.pricing__grid { position: absolute; inset: 0; z-index: 0; }   /* white 9:16 grid on the orange */

/* big snow card: opaque so the white grid never crosses inside; copy split into bento boxes */
.pricing__card {
  position: relative; z-index: 1; width: min(1080px, 100%);
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--snow);
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
  box-shadow: 0 34px 90px -34px rgba(16, 12, 8, 0.4);
}
.pbox { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(1.6rem, 2.8vw, 2.8rem); min-width: 0; }
.pbox--head { grid-column: 1 / -1; }
.pbox--body { grid-column: 1; display: flex; align-items: center; }
.pbox--count { grid-column: 2; display: flex; flex-direction: column; justify-content: center; gap: 0.4rem; }
.pbox--cta { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: clamp(1.2rem, 2.5vw, 2.5rem); flex-wrap: wrap; }
/* .pbox .pcta__note (not just .pcta__note) to beat `.pbox p`'s font-size */
.pbox .pcta__note { font-size: clamp(0.76rem, 0.9vw, 0.88rem); line-height: 1.45; color: var(--mute); margin: 0; max-width: 34ch; }
.pricing__h { font-family: "Clash Display", sans-serif; font-weight: 600; text-transform: lowercase; font-size: clamp(2.4rem, 5.5vw, 4.6rem); line-height: 1; letter-spacing: -0.02em; margin: 0; color: var(--pitch); }
.pbox p { font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.55; color: var(--slate); margin: 0; max-width: 44ch; }
/* applications counter (demand = scarcity); number counts up on view */
.pcount__sq { width: 10px; height: 10px; background: var(--orange); margin-bottom: 0.3rem; }
.pcount__num { font-family: "Clash Display", sans-serif; font-weight: 600; font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 0.95; letter-spacing: -0.02em; color: var(--pitch); font-variant-numeric: tabular-nums; }
.pcount__lbl { font-size: clamp(0.9rem, 1.05vw, 1.05rem); color: var(--mute); }
@media (max-width: 720px) {
  .pricing__card { grid-template-columns: 1fr; }
  .pbox--body, .pbox--count { grid-column: 1; }
}

/* ============ 12 · FOOTER (dark close, tagline framed by two lines, compact meta) ============ */
/* compact light closer with an asymmetric grid: two full-height verticals + full-width row borders cross */
.footer { --fpad: calc(9vw + clamp(1.1rem, 2.2vw, 2rem)); position: relative; z-index: 1; background: var(--snow); color: var(--pitch); overflow: hidden; padding: clamp(2.8rem, 6vh, 4.5rem) 0 0; border-top: 1px solid var(--line); }
.footer__lines { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.footer__v { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }   /* @9% (left of 't') and @91% (right of social) — full height, equal margins */
.footer__body { position: relative; z-index: 1; }

/* every row's content sits in the 9% → 91% band, padded off both lines so text never touches them.
   the rows are full-width, so their borders run edge-to-edge and cross the verticals. */
.footer__tagbox, .footer__meta, .footer__bottom { padding-left: var(--fpad); padding-right: var(--fpad); }
.footer__tagbox { padding-bottom: clamp(1.5rem, 3.2vh, 2.4rem); border-bottom: 1px solid var(--line); }
.footer__tag { display: block; font-family: "Clash Display", sans-serif; font-weight: 600; text-transform: lowercase; font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 0.98; letter-spacing: -0.02em; margin: 0; color: var(--pitch); }
.footer__note { font-size: clamp(0.95rem, 1.15vw, 1.1rem); line-height: 1.5; color: var(--mute); max-width: 42ch; margin: 1rem 0 0; }

.footer__meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; padding-top: clamp(1.3rem, 2.6vh, 2rem); padding-bottom: clamp(1.3rem, 2.6vh, 2rem); border-bottom: 1px solid var(--line); }
.footer__contact { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.footer__email { font-family: "Switzer", sans-serif; font-weight: 500; font-size: clamp(1rem, 1.3vw, 1.2rem); color: var(--pitch); text-decoration: none; transition: color 0.2s var(--ease-out); }
.footer__email:hover { color: var(--orange); }
.footer__addr { font-size: 0.9rem; color: var(--mute); line-height: 1.55; max-width: 52ch; }
.footer__addr strong { color: var(--pitch); font-weight: 600; }
.footer__addr a { color: inherit; text-decoration: none; transition: color 0.2s var(--ease-out); }
.footer__addr a:hover { color: var(--orange); }
.footer--dark .footer__addr strong { color: var(--snow); }
.footer__social { display: flex; align-items: center; gap: clamp(0.7rem, 1.4vw, 1.2rem); }
.footer__ic { display: grid; place-items: center; width: 30px; height: 30px; color: var(--slate); transition: color 0.2s var(--ease-out); }
.footer__ic:hover { color: var(--orange); }
.footer__ic svg { width: 21px; height: 21px; }

.footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.8rem; padding-top: clamp(1.1rem, 2vh, 1.5rem); padding-bottom: clamp(1.3rem, 2.6vh, 2.1rem); font-size: 0.84rem; color: var(--mute); }
.footer__domain { font-family: "Clash Display", sans-serif; font-weight: 500; text-transform: lowercase; color: var(--slate); letter-spacing: -0.01em; }
@media (max-width: 600px) { .footer__meta { flex-direction: column; align-items: flex-start; gap: 1.3rem; } }

/* dark variant (used on the apply page): black bg, white grid + text; .hl stays orange/white */
.footer--dark { background: var(--pitch); color: var(--snow); border-top-color: rgba(255, 255, 255, 0.16); }
.footer--dark .footer__v { background: rgba(255, 255, 255, 0.26); }
.footer--dark .footer__tagbox, .footer--dark .footer__meta { border-bottom-color: rgba(255, 255, 255, 0.26); }
.footer--dark .footer__tag { color: var(--snow); }
.footer--dark .footer__note { color: rgba(255, 255, 255, 0.55); }
.footer--dark .footer__email { color: var(--snow); }
.footer--dark .footer__addr { color: rgba(255, 255, 255, 0.5); }
.footer--dark .footer__ic { color: rgba(255, 255, 255, 0.8); }
.footer--dark .footer__bottom { color: rgba(255, 255, 255, 0.45); }
.footer--dark .footer__domain { color: rgba(255, 255, 255, 0.7); }

/* ---------- scroll-to-top button (sharp, fixed) ---------- */
.totop {
  position: fixed; right: clamp(1rem, 2.6vw, 2rem); bottom: clamp(1rem, 2.6vw, 2rem); z-index: 60;
  display: grid; place-items: center; width: clamp(46px, 4vw, 54px); aspect-ratio: 1; padding: 0;
  background: var(--pitch); color: #fff; border: none; cursor: pointer;   /* black box, white arrow (natural) */
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), background-color 0.3s var(--ease-out), top 0.4s var(--ease-out), bottom 0.4s var(--ease-out);
}
.totop.is-on { opacity: 1; transform: translateY(0); pointer-events: auto; }
.totop:hover { background: #000; }
.totop--dark { background: var(--orange); }        /* orange box on black-bg sections */
.totop--dark:hover { background: #FF7359; }
.totop:active { transform: scale(0.94); }
.totop svg { width: 18px; height: 18px; }
/* in the footer: sit at the top-right of the viewport, beside the nav */
.totop--footer { top: clamp(1rem, 2.2vw, 1.6rem); bottom: auto; }

/* ============ APPLY PAGE (one bento card over the grid) ============ */
/* horizontal grid lines that scroll behind the card (spaced 44vh like §2, portrait cells) */
.apply { position: relative; z-index: 1; padding: clamp(6rem, 13vh, 9rem) var(--pad) clamp(4rem, 9vh, 7rem);
  background-image: repeating-linear-gradient(to bottom, var(--line) 0, var(--line) 1px, transparent 1px, transparent 44vh);
  background-position: 0 24vh; }
.apply__wrap { max-width: 960px; margin: 0 auto; }

/* the card: white bento grid over the grid; every direct child is a box sectioned by lines */
.acard { display: grid; grid-template-columns: 1fr 1fr; background: var(--snow); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.acard > * { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; margin: 0; }
.acard [data-full], .acard__title, .switch, .opt { grid-column: 1 / -1; }

/* title box */
.acard__title { padding: clamp(1.6rem, 3.2vw, 2.8rem); }
.acard__title .sec-eyebrow { margin: 0; }
.apply__h { font-family: "Clash Display", sans-serif; font-weight: 600; text-transform: lowercase; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1; letter-spacing: -0.02em; margin: 0.7rem 0 0.9rem; color: var(--pitch); }
.apply__intro { font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.5; color: var(--slate); max-width: 50ch; margin: 0; }

/* selector: one full-width box split into 3 */
.switch { display: flex; background: var(--snow); }
.switch__tab { flex: 1; font-family: "Clash Display", sans-serif; font-weight: 500; text-transform: lowercase; font-size: clamp(1rem, 1.4vw, 1.2rem); color: var(--pitch); background: transparent; border: none; border-right: 1px solid var(--line); padding: clamp(0.85rem, 1.6vw, 1.25rem); cursor: pointer; transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out); }
.switch__tab:last-child { border-right: none; }
.switch__tab:hover { color: var(--orange); }
.switch__tab.is-active { background: var(--orange); color: #fff; }

/* field box: white question part + light-grey input part; whole box highlights orange when focused */
.field { display: flex; flex-direction: column; padding: clamp(1rem, 1.8vw, 1.5rem); position: relative; }
.field:focus-within { box-shadow: inset 0 0 0 2px var(--orange); z-index: 1; }
.field.is-invalid { box-shadow: inset 0 0 0 2px var(--brick); z-index: 1; }
.field__lbl { font-family: "Switzer", sans-serif; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--mute); margin-bottom: 0.7rem; }
.field__lbl em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 500; opacity: 0.7; }
.field input { width: 100%; margin-top: auto; padding: 0.7rem 0.85rem; border: none; background: rgba(16, 12, 8, 0.05); font-family: "Switzer", sans-serif; font-size: 1rem; color: var(--pitch); border-radius: 0; }
.field input::placeholder { color: rgba(107, 101, 96, 0.6); }
.field input:focus { outline: none; }   /* the box's focus-within provides the highlight */

/* option selector (revenue / audience / …): label on top, then a row of option boxes */
.opt { padding: 0; margin: 0; min-inline-size: 0; border: none; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }   /* reset the fieldset UA groove border */
.opt__lbl { display: block; padding: clamp(1rem, 1.8vw, 1.5rem) clamp(1rem, 1.8vw, 1.5rem) clamp(0.8rem, 1.4vw, 1.1rem); font-family: "Switzer", sans-serif; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--mute); }
.opt__row { display: flex; border-top: 1px solid var(--line); }
.opt__box { flex: 1; position: relative; border-right: 1px solid var(--line); }
.opt__box:last-child { border-right: none; }
.opt__box input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt__box span { display: grid; place-items: center; text-align: center; height: 100%; padding: clamp(0.85rem, 1.6vw, 1.35rem) 0.5rem; font-family: "Switzer", sans-serif; font-weight: 500; font-size: clamp(0.82rem, 1vw, 0.95rem); color: var(--pitch); cursor: pointer; transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out); }
.opt__box span:hover { background: rgba(16, 12, 8, 0.04); }
.opt__box input:checked + span { background: var(--orange); color: #fff; }
.opt__box input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: -3px; }

/* category visibility (direct-child fields only, so the switch tabs stay visible) */
.acard > [data-cat] { display: none; }
.acard[data-active="brand"] > [data-cat="brand"],
.acard[data-active="creator"] > [data-cat="creator"],
.acard[data-active="agency"] > [data-cat="agency"] { display: flex; }
.acard[data-active="brand"] > fieldset[data-cat="brand"],
.acard[data-active="creator"] > fieldset[data-cat="creator"],
.acard[data-active="agency"] > fieldset[data-cat="agency"] { display: block; }

/* buttons: attached to the bottom-left of the card */
.apply__submit { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; margin-top: -1px; }
.apply__hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.apply__err { flex-basis: 100%; margin: 0.9rem 0 0; font-family: "Switzer", sans-serif; font-weight: 500; font-size: 0.92rem; color: var(--brick); }
/* the [hidden] attribute must win over .acard's grid / .apply__submit's flex
   display — otherwise the form never disappears on submit */
.acard[hidden], .apply__submit[hidden], .apply__done[hidden] { display: none !important; }
.apply__done { padding-top: 1rem; }
.apply__done .apply__h { margin-top: 0; }
.apply__done .rect-cta { margin-top: 1.8rem; }

@media (max-width: 620px) {
  .acard { grid-template-columns: 1fr; }
  .switch { flex-direction: column; }
  .switch__tab { border-right: none; border-bottom: 1px solid var(--line); }
  .switch__tab:last-child { border-bottom: none; }
  .opt__row { flex-wrap: wrap; }
  .opt__box { flex: 1 0 50%; border-bottom: 1px solid var(--line); }
}

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .flip__copy { width: min(86vw, 34rem); }
  .nav__logo { height: 46px; }
  .nav__links a { font-size: 0.98rem; }
}
@media (max-width: 540px) {
  .nav__links { gap: 0.9rem; }
  .nav__links a { font-size: 0.82rem; }
}
/* narrow phones: keep the logo + 3 links on one row without overflow */
@media (max-width: 460px) {
  .nav { padding-top: 10px; }
  .nav__inner { padding: 0.55rem 0.6rem 0.55rem 0.9rem; }
  .nav__logo { height: 34px; }
  .nav__links { gap: 0.6rem; padding-right: 0.25rem; }
  .nav__links a { font-size: 0.72rem; }
}

/* ---------- mobile: background grid forms TRUE 9:16 cells ----------
   desktop/tablet keep 44vh rows (locked). on phones a 44vh row is far too tall against the
   ~16.4vw columns, so the cells read extreme-portrait. row = 16.4vw * 16/9 = 29.2vw makes each
   central cell a real 9:16 box → many more short rows fit the viewport. */
@media (max-width: 640px) {
  /* nav: swap the inline links for the hamburger */
  .nav__links { display: none; }
  .nav__burger { display: flex; }

  /* wwd mobile: the white-fill invert is a desktop cursor interaction — on touch, rows stay orange
     and the per-row CTA button is the tap target. neutralise the sticky :hover/:active invert. */
  .wwd-row:hover, .wwd-row:active { background: transparent; }
  .wwd-row:hover .wwd-row__name, .wwd-row:hover .wwd-row__head,
  .wwd-row:active .wwd-row__name, .wwd-row:active .wwd-row__head { color: #fff; }
  .wwd-row:hover .wwd-row__copy, .wwd-row:active .wwd-row__copy { color: rgba(255, 255, 255, 0.88); }
  .wwd-row:hover .wwd-row__idx, .wwd-row:active .wwd-row__idx { color: #fff; }
  .wwd-row:hover .wwd-sq, .wwd-row:active .wwd-sq { background: #fff; }

  /* two-word service names, so smaller than the old one-word labels and no forced break */
  .wwd-row__name { font-size: clamp(1.85rem, 8.6vw, 2.6rem); }
  .wwd-row__name br { display: none; }
  .wwd-row__id { align-items: flex-start; }
  .wwd-row__body { padding-top: 2rem; justify-content: flex-end; }   /* more room above; bottom-align the text */

  /* per-row tap CTA: white fill / orange text (inactive) -> black fill / white (on tap), on the orange section */
  .wwd-cta { display: inline-flex; align-self: flex-start; align-items: stretch; height: 44px; margin-top: 1.5rem; background: #fff; color: var(--orange); text-decoration: none; transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out); }
  .wwd-cta__label { display: flex; align-items: center; padding: 0 1.1rem; font-family: "Switzer", sans-serif; font-weight: 600; font-size: 0.9rem; white-space: nowrap; }
  .wwd-cta__arw { display: grid; place-items: center; aspect-ratio: 9 / 16; border-left: 1px solid rgba(255, 90, 60, 0.3); color: var(--orange); }
  .wwd-cta__arw svg { transform: rotate(-45deg); transition: transform 0.3s var(--ease-out); }
  .wwd-row:active .wwd-cta { background: var(--pitch); color: #fff; }
  .wwd-row:active .wwd-cta__arw { border-left-color: rgba(255, 255, 255, 0.35); color: #fff; }
  .wwd-row:active .wwd-cta__arw svg { transform: rotate(0deg); }

  /* completely-unrelated cards: black square-arrow button bottom-right (tap affordance) */
  .ucard { position: relative; padding-bottom: 3.8rem; }   /* reserve room so the button clears the text */
  .ucard__go { display: grid; place-items: center; position: absolute; right: clamp(1.1rem, 4vw, 1.6rem); bottom: clamp(1.1rem, 4vw, 1.6rem); width: 34px; height: 34px; background: var(--pitch); color: #fff; transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out); }
  .ucard__go svg { transform: rotate(-45deg); transition: transform 0.3s var(--ease-out); }
  /* on hover/tap the card fills orange -> the square flips white with an orange arrow, rotated to face right */
  .ucard:hover .ucard__go, .ucard:active .ucard__go { background: #fff; color: var(--orange); }
  .ucard:hover .ucard__go svg, .ucard:active .ucard__go svg { transform: rotate(0deg); }

  .flip__pin::before, .rec__pin::before {
    background-image: repeating-linear-gradient(to bottom, var(--line) 0, var(--line) 1px, transparent 1px, transparent 29.2vw);
    background-position: 0 0;
  }
  /* white overlays (flip/receipts/founder/pricing): drop the 24/68 rows, repeat 9:16 instead */
  .grid--white { background-image: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0.5) 1px, transparent 1px, transparent 29.2vw); }
  .grid--white .grid__h { display: none; }
  /* apply page grid too */
  .apply { background-image: repeating-linear-gradient(to bottom, var(--line) 0, var(--line) 1px, transparent 1px, transparent 29.2vw); background-position: 0 0; }

  /* --- §3 receipts stat boxes: stack vertically, each 2 cols x 2 rows (9:16), staggered L/R/L,
         edges on grid lines (9%/41.8% and 58.2%/91%, rows at 29.2vw multiples) --- */
  /* width in % (not vw) so the box edge lands on the same-unit grid line exactly — a vw-vs-%
     subpixel gap was leaving a thin white sliver on the box's right edge on device. */
  .statbox { width: 32.8%; height: 58.4vw; }
  .statbox:nth-child(1) { left: 9%; top: 29.2vw; }
  .statbox:nth-child(2) { left: 58.2%; top: 87.6vw; }
  .statbox:nth-child(3) { left: 9%; top: 146vw; }
  .statbox__fill { inset: -1px; }         /* bleed under overflow:hidden so the orange reaches every edge */
  .statbox__num { font-size: 2.2rem; }   /* fits the 2-col box, no clip */

  /* scroll-to-top stays bottom-right in the footer on mobile (no top-dock) */
  .totop--footer { top: auto; bottom: clamp(1rem, 2.6vw, 2rem); }

  /* founder (pinned wipe on mobile): more black grid framing above + below the bento so it isn't
     squeezed to the panel edges; a touch larger title. */
  .founder__inner { margin-top: clamp(98px, 14vh, 140px); margin-bottom: clamp(1.8rem, 6vh, 3.4rem); }
  .founder__h { font-size: clamp(1.7rem, 6.4vw, 2.2rem); }
  /* "meet arsalan" to the TOP-left — at the bottom it overlapped the photo (anchored bottom-right) */
  .fbox__name { top: clamp(0.9rem, 3.2vw, 1.4rem); bottom: auto; font-size: clamp(1.5rem, 6vw, 2rem); }
  /* the mobile photo cell is a narrow portrait, so crop tighter around him */
  .fbox--photo img { object-position: 63% center; }
  /* shrink the stat cells to fit the small mobile bento; the world-no.2 cell + its orange square
     were overflowing and clipping against the cell border. */
  .fstat { padding: clamp(0.6rem, 2.4vw, 0.95rem) clamp(0.75rem, 2.8vw, 1.1rem); }
  .fstat__num { font-size: clamp(1.3rem, 6vw, 1.9rem); }
  .fstat__lbl { font-size: clamp(0.74rem, 3vw, 0.88rem); line-height: 1.25; }
  .fstat--wink .fstat__num { font-size: clamp(1rem, 4.4vw, 1.35rem); }
  .fstat--wink .fstat__lbl { font-size: clamp(0.62rem, 2.7vw, 0.74rem); line-height: 1.2; }

  /* footer: one clean column — email, address, then socials in a row. the old
     two-column split crammed the address and left the socials floating. */
  .footer__meta { display: flex; flex-direction: column; align-items: stretch; gap: 1.3rem; padding-top: clamp(1.4rem, 3vh, 1.9rem); padding-bottom: clamp(1.4rem, 3vh, 1.9rem); }
  .footer__contact { gap: 0.6rem; padding: 0; }
  .footer__email { font-size: 1.02rem; }
  .footer__addr { font-size: 0.85rem; line-height: 1.75; }
  /* the divider is on a CHILD of the padded row, so it would stop at the content box while
     every other footer rule runs edge to edge. bleed it back out by the row's own inset so
     it crosses both verticals like the rest of them. */
  .footer__social {
    flex-direction: row; align-items: center; justify-content: flex-start; gap: 1.5rem;
    margin-left: calc(-1 * var(--fpad)); margin-right: calc(-1 * var(--fpad));
    padding: 1.15rem var(--fpad) 0;
    border-top: 1px solid var(--line);
  }
  .footer--dark .footer__social { border-top-color: rgba(255, 255, 255, 0.26); }
  .footer__ic { width: 28px; height: 28px; }
  .footer__ic svg { width: 22px; height: 22px; }
  /* ©/domain row */
  .footer__bottom { flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1rem; padding-top: 0.9rem; padding-bottom: 0.9rem; font-size: 0.7rem; }
  /* clear the fixed scroll-to-top button so it doesn't sit on the domain in the corner */
  .footer { padding-bottom: clamp(3.6rem, 10vh, 5.5rem); }
  .footer__domain { position: relative; z-index: 2; }

  /* creative sine band: the desktop viewBox is very wide, so at phone width it renders too short and
     hides entirely behind the tall reel cards. scale it up (uniform, so text isn't distorted) until the
     curve clears the cards and peeks above + below the scroll, like desktop. */
  .cband { transform: translateY(-50%) scale(2.6); }

  /* phones run the same morph; only the type and the starting box get smaller */
  .flip__pin::before, .flip__whitegrid { background-position: 0 calc(50dvh - 14.6vw); }
  .flip { --fbox-w: clamp(170px, 52vw, 240px); }
  /* the line is nowrap, so it has to actually fit: "attention moved from" at 8.2vw clears a 390 */
  .fh { font-size: clamp(1.4rem, 8.2vw, 2.6rem); gap: clamp(0.8rem, 2.4vh, 1.4rem); }
  /* the digits are free to run bigger than the line — they only have to fill the box */
  .fnum, .fto { font-size: clamp(1.9rem, 12.5vw, 3.2rem); }
}

/* ============ TABLET GATE (641-1024px: not optimised — send them to desktop or phone) ============ */
.tabgate { display: none; }
@media (min-width: 641px) and (max-width: 1024px) {
  html, body { overflow: hidden; }                 /* no scroll on this screen */
  .tabgate { display: block; position: fixed; inset: 0; z-index: 45; background: var(--snow); overflow: hidden; }

  /* the mobile 9:16 grid, scaled up: fixed vertical columns + repeating rows.
     rows are anchored to the card's top so the card's top + bottom borders land on grid lines. */
  .tabgate__grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .tabgate__grid .grid__v { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
  .tabgate::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: repeating-linear-gradient(to bottom, var(--line) 0, var(--line) 1px, transparent 1px, transparent 29vw);
    background-position: 0 calc(50dvh - 29vw);
  }

  /* white card: left/right on the 25.5% & 74.5% verticals, top/bottom 2 rows apart on the row lines.
     opaque fill covers the interior lines (borders sit ON the grid, never cut through the card). */
  .tabgate__card {
    position: absolute; z-index: 1; left: 25.5%; width: 49%;
    top: calc(50dvh - 29vw); height: 58vw;
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(1.8rem, 4vw, 3.4rem);
    background: var(--snow); border: 1px solid var(--line);
    box-shadow: 0 34px 90px -40px rgba(16, 12, 8, 0.32);
  }
  .tabgate__h { font-family: "Clash Display", sans-serif; font-weight: 600; text-transform: lowercase; font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.04; letter-spacing: -0.02em; margin: 0.7rem 0 1.2rem; color: var(--pitch); }
  .tabgate__body { font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.55; color: var(--slate); margin: 0; max-width: 42ch; }
}

/* ---------- reduced motion: the flip has no morph, so it resolves straight to its end state ----------
   phones DO get the morph (the 9:16 geometry for it lives in the phone block above), so this is
   the one case that still needs the static fallback. */
@media (prefers-reduced-motion: reduce) {
  .flip { height: auto; } .flip__pin { position: relative; min-height: 100dvh; }
  .crop, .flip__cue, .fh { display: none; }
  /* the box resolves straight to the filled frame, no morph */
  .mbox { position: absolute; inset: 0; width: 100%; height: 100%; transform: none; z-index: 0; }
  .mbox__nums { display: none; }
  .flip__whitegrid { opacity: 1; }
  .flip__copy { opacity: 1; }
}

/* ---------- reduced motion ---------- */
/* Static layout: reduced-motion users AND all phones (<=640px). The pinned
   scroll-choreography (hero ring, flip, §7 freeze, founder wipe) is a
   desktop flourish that overflows / reads as empty scroll on a phone, so mobile
   gets the same clean static fallback. main.js gates the matching GSAP off. */
@media (prefers-reduced-motion: reduce), (max-width: 640px) {
  html { scroll-behavior: auto; }
  .rec { height: auto; }
  .rec__pin { position: relative; height: auto; overflow: visible; }
  .rec__text { position: relative; inset: auto; padding: 8vh var(--pad); }
  .rec__boxes { position: relative; inset: auto; height: 62vh; }
  .rec__dash { position: relative; inset: auto; clip-path: none; height: 62vh; }
  .carousel { overflow-x: auto; }
  .tail-freeze { height: auto !important; }
  .unrel { position: relative; top: auto; }
  .founder { height: auto; margin-top: 0; }
  .founder__pin { position: relative; height: auto; min-height: 100dvh; }
  .founder__panel { clip-path: none; }
}

/* founder on phones: size the bento to its content instead of a forced full
   viewport, so the orange photo box isn't a tall column with dead space above
   the cutout. Comes after the static block above so it wins on mobile. */
@media (max-width: 640px) {
  .founder__pin { min-height: 0; }
  /* keep the top/bottom framing as black padding INSIDE the panel — as inner
     margins it collapsed out into white gaps above and below the section. */
  .founder__panel { position: relative; padding: clamp(2rem, 6vh, 3rem) 0 clamp(1.4rem, 4.5vh, 2.3rem); }
  .founder__inner { position: relative; inset: auto; margin-top: 0; margin-bottom: 0; grid-template-rows: auto auto auto auto auto; }
  /* §7's big bottom padding is a desktop leftover (the founder wipes up over it) —
     trim it so there's no dead space before the founder. */
  .unrel { padding-bottom: clamp(1.8rem, 4.5vh, 2.8rem); }
}

/* ============ BRAND GROWTH PAGE (subpage: complete brand growth) ============ */
.bgpage { position: relative; z-index: 1; }
.bghero { padding: clamp(7rem, 17vh, 11rem) 9vw clamp(2.6rem, 6vh, 4.5rem); }
.bghero__h { font-family: "Clash Display", sans-serif; font-weight: 600; text-transform: lowercase; font-size: clamp(2.3rem, 5.4vw, 4.8rem); line-height: 1.03; letter-spacing: -0.02em; margin: 0 0 1.4rem; max-width: 17ch; color: var(--pitch); }
.bghero__lede { font-size: clamp(1.05rem, 1.4vw, 1.28rem); color: var(--slate); max-width: 58ch; line-height: 1.55; margin: 0; }

.bgsec { padding: clamp(3rem, 7vh, 5rem) 9vw; border-top: 1px solid var(--line); }
.bgsec__h { font-family: "Clash Display", sans-serif; font-weight: 600; text-transform: lowercase; font-size: clamp(1.7rem, 3.2vw, 3rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 clamp(1.6rem, 4vh, 2.6rem); color: var(--pitch); }

/* service cards: shared 1px borders via a grid gap on the line colour, so lines never double up */
.bggrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.bgcard { background: var(--snow); padding: clamp(1.5rem, 2.3vw, 2.3rem); display: flex; flex-direction: column; gap: 0.7rem; min-height: clamp(190px, 25vh, 250px); }
.bgcard__sq { width: 9px; height: 9px; background: var(--orange); }
.bgcard__h { font-family: "Switzer", sans-serif; font-weight: 700; font-size: clamp(1.02rem, 1.3vw, 1.22rem); margin: 0; color: var(--pitch); }
.bgcard p { margin: 0; font-size: 0.97rem; line-height: 1.5; color: var(--slate); }

/* process rows: number | short title | body, on full-width rules */
.bgflow { border-top: 1px solid var(--line); }
.bgstep { display: flex; align-items: baseline; gap: clamp(1.2rem, 3vw, 3rem); padding: clamp(1.3rem, 2.6vh, 2rem) 0; border-bottom: 1px solid var(--line); }
.bgstep__n { flex: 0 0 auto; width: 3rem; font-family: "Switzer", sans-serif; font-weight: 700; font-size: 0.85rem; color: var(--orange); }
.bgstep__t { flex: 0 0 auto; width: clamp(150px, 18vw, 250px); font-family: "Clash Display", sans-serif; font-weight: 600; text-transform: lowercase; font-size: clamp(1.3rem, 2vw, 1.9rem); line-height: 1; letter-spacing: -0.02em; color: var(--pitch); }
.bgstep__d { margin: 0; font-size: 0.97rem; line-height: 1.5; color: var(--slate); max-width: 62ch; }

.bgcta { background: var(--orange); color: #fff; padding: clamp(3rem, 8vh, 5.5rem) 9vw; }
.bgcta__h { font-family: "Clash Display", sans-serif; font-weight: 600; text-transform: lowercase; font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 1.1rem; color: #fff; }
.bgcta p { margin: 0 0 2rem; max-width: 54ch; color: rgba(255, 255, 255, 0.9); line-height: 1.55; }

@media (max-width: 820px) {
  .bghero, .bgsec, .bgcta { padding-left: var(--pad); padding-right: var(--pad); }
  .bggrid { grid-template-columns: 1fr; }
  .bgstep { flex-direction: column; align-items: flex-start; gap: 0.45rem; }
  .bgstep__n, .bgstep__t { width: auto; }
}

/* =========================================================================================
   EXPERIMENT · 9x16 COLUMN
   The site is a 16x9 page until the flip. At the moment the morphing frame reaches a
   viewport-tall 9:16 box (touching top and bottom), it stops being a page-wide layout: the
   frame stays put and every section below runs inside it, so a desktop reads the site the way
   a phone does. The surround keeps the swiss grid, the crop's rails and registration marks
   are held by .pfr, and the column carries its own grid measured against itself. It runs from
   the flip to the end of pricing; the footer opens back out to full width as the closing 16x9
   beat, which is also where the rails retract.

   Scope guard: desktop only (>1024px) and motion-on. Phones (<=640px) keep their own layout,
   the 641-1024 gate is untouched, and reduced-motion users get the original wide page — in all
   three cases the wrapper below is an inert div.
   ========================================================================================= */
.pcol { position: relative; }
.pcol__grid, .pfr { display: none; }

@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
  :root {
    /* the column is as wide as a phone screen would be if it stood the full viewport height.
       clamped so a very short or very tall window still lands on a believable phone width. */
    --col: clamp(360px, calc(100dvh * 9 / 16), 620px);
  }

  /* ---------- the column shell ----------
     --vw redefines "1% of the viewport width" as 1% of the COLUMN width. Every rule below that
     would normally reach for vw uses calc(N * var(--vw)) instead, so the phone's proportions
     come across at column scale. Plain arithmetic on --col, so no container-query support (and
     none of container-type's containment side effects) is needed. */
  .pcol__scr {
    position: relative;
    --vw: calc(var(--col) / 100);
    --pad: clamp(1rem, calc(4.6 * var(--vw)), 1.7rem);
    background: var(--snow);
    border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  }
  .pcol { width: var(--col); margin-left: auto; margin-right: auto; }

  /* the column's own grid: page-identical verticals (9/25.5/41.8/58.2/74.5/91%) measured
     against the column, and rows every 29.2% of its width so each central cell is a true
     9:16 box — the same construction the phone layout uses. */
  .pcol__grid {
    display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: repeating-linear-gradient(to bottom, var(--line) 0, var(--line) 1px, transparent 1px, transparent calc(29.2 * var(--vw)));
  }

  /* ---------- the held frame: rails + registration marks ----------
     Coincident with the flip's crop at the moment it lands, so the handoff is invisible; JS
     switches it on once the morph has settled and off once the column has passed. */
  .pfr {
    display: block; position: fixed; z-index: 20; top: 0; height: 100dvh;
    left: 50%; width: var(--col); transform: translateX(-50%);
    pointer-events: none; opacity: 0; transition: opacity 0.3s var(--ease-out);
  }
  .pfr.is-on { opacity: 1; }
  /* Rails sit INSIDE the column, not outside it. The flip hands over from .crop, whose 2px border
     is painted inside its border-box, so an outside rail here made the frame jump 4px wider the
     moment the column took over. Inside, both paint on exactly the same two pixels. */
  .pfr::before, .pfr::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--pitch); }
  .pfr::before { left: 0; }
  .pfr::after { right: 0; }
  /* marks only while the frame fills the screen — JS clips its height at the column's two ends.
     -5px centres a 12px mark on a rail occupying 0-2px, matching how .crop__c rides its border. */
  .pfr__c { position: absolute; width: 12px; height: 12px; background: var(--snow); border: 2px solid var(--pitch); opacity: 0; transition: opacity 0.2s var(--ease-out); }
  .pfr.is-full .pfr__c { opacity: 1; }
  .pfr__c--tl { top: 0; left: -5px; } .pfr__c--tr { top: 0; right: -5px; }
  .pfr__c--bl { bottom: 0; left: -5px; } .pfr__c--br { bottom: 0; right: -5px; }

  /* ---------- the flip lands ON the column ----------
     Instead of the orange scaling 12x past the edges of the screen, it grows to exactly the
     column's width and the full pin height, and the crop border grows with it — so the frame
     the reader has been watching becomes the frame the rest of the site lives in. */
  /* the white grid belongs to the column now, not the viewport, so its verticals line up with
     .pcol__grid below and its rows switch to the same 9:16 rhythm. */
  .flip__whitegrid {
    left: 50%; right: auto; width: var(--col); transform: translateX(-50%);
    background-image: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0.5) 1px, transparent 1px, transparent calc(29.2 * var(--col) / 100));
  }
  .flip__whitegrid .grid__h { display: none; }
  /* the reveal copy now has a column to fit, not a page */
  .flip__copy { width: calc(var(--col) - 2 * clamp(1.4rem, calc(7 * var(--col) / 100), 2.4rem)); }
  .flip__statement { font-size: clamp(1.3rem, calc(7.4 * var(--col) / 100), 2rem); }
  .flip__eyebrow { font-size: 0.82rem; margin-bottom: 0.9rem; }

  /* ---------- 3 · brands wall ---------- */
  .pcol__scr .trust__h { padding-left: var(--pad); padding-right: var(--pad); font-size: clamp(1.2rem, calc(7 * var(--vw)), 1.7rem); }
  .pcol__scr .trust__marquee { height: clamp(76px, calc(20 * var(--vw)), 108px); }
  .pcol__scr .tbox { padding: 0 clamp(0.85rem, calc(4 * var(--vw)), 1.7rem); }
  .pcol__scr .tlogo { --h: clamp(26px, calc(7.4 * var(--vw)), 38px); width: clamp(74px, calc(23 * var(--vw)), 118px); }
  .pcol__scr .tlogo--sq { --h: clamp(34px, calc(10 * var(--vw)), 50px); }

  /* ---------- 4 · 2025 stats: the three boxes stack, as they do on a phone ---------- */
  .pcol__scr .ldash { padding: calc(clamp(2.2rem, calc(9 * var(--vw)), 3.8rem) + 4px) 0 calc(clamp(2.5rem, calc(10 * var(--vw)), 4.2rem) + 4px); }
  .pcol__scr .ldash__top { margin-left: var(--pad); margin-right: var(--pad); padding: clamp(0.9rem, calc(4 * var(--vw)), 1.4rem); }
  .pcol__scr .ldash__h { font-size: clamp(1.2rem, calc(7 * var(--vw)), 1.7rem); }
  .pcol__scr .ldash__bar { padding: clamp(1rem, calc(4.5 * var(--vw)), 1.6rem) 0 0; align-items: flex-start; }
  .pcol__scr .ldash__period { font-size: clamp(0.95rem, calc(3.6 * var(--vw)), 1.15rem); }
  /* flush the hint and the tabs to the card's content edge, which is the same inset the metric
     cells use — so the control lines up with the board below it. The hint's own text stays
     left-aligned; only the block moves. */
  .pcol__scr .ldash__ctrl { align-items: flex-end; }
  .pcol__scr .ldash__hint { text-align: left; font-size: 0.74rem; max-width: 28ch; }
  .pcol__scr .ldash__tab { font-size: 0.78rem; padding: 0.5rem 0.95rem; }
  /* -1px keeps the head card and the metrics grid sharing one hairline instead of doubling it */
  .pcol__scr .ldash__grid { grid-template-columns: repeat(2, 1fr); margin: -1px var(--pad) 0; }
  .pcol__scr .lcell { padding: clamp(0.9rem, calc(4 * var(--vw)), 1.4rem); min-height: clamp(112px, calc(26 * var(--vw)), 146px); }
  .pcol__scr .lcell__num { font-size: clamp(1.4rem, calc(7.6 * var(--vw)), 2.2rem); }
  .pcol__scr .lcell__top { gap: 0.45rem; margin-top: 0.9rem; }
  .pcol__scr .lcell__lbl { font-size: 0.82rem; }
  /* the two panels stack in the column, like every other multi-column block */
  .pcol__scr .ldash__panels { grid-template-columns: 1fr; margin-left: var(--pad); margin-right: var(--pad); }
  .pcol__scr .lpanel { padding: clamp(0.9rem, calc(4 * var(--vw)), 1.4rem); }
  .pcol__scr .lpanel__h { font-size: clamp(0.95rem, calc(3.6 * var(--vw)), 1.15rem); }
  .pcol__scr .lpanel__tot b { font-size: clamp(1.3rem, calc(6.4 * var(--vw)), 1.9rem); }
  .pcol__scr .lgauge { width: min(210px, 100%); }
  .pcol__scr .lgauge__stats b { font-size: clamp(0.95rem, calc(3.8 * var(--vw)), 1.2rem); }

  /* ---------- 5 · what we do: rows go vertical, the row's left pad column drops out ---------- */
  .pcol__scr .wwd { padding: clamp(1.6rem, calc(7 * var(--vw)), 2.6rem) 0 0; }
  .pcol__scr .wwd__intro { padding: 0 calc(9 * var(--vw)); margin-bottom: clamp(1.6rem, calc(8 * var(--vw)), 3rem); }
  .pcol__scr .wwd__h { font-size: clamp(1.35rem, calc(7.6 * var(--vw)), 2.1rem); max-width: none; }
  .pcol__scr .wwd__aside { font-size: 0.86rem; margin-top: 1rem; }
  .pcol__scr .wwd-row { flex-direction: column; min-height: 0; }
  .pcol__scr .wwd-row__pad { display: none; }
  .pcol__scr .wwd-row__id {
    width: 100%; flex-direction: row; align-items: flex-start; justify-content: flex-start;
    gap: 0.9rem; border-right: none; padding: 1.1rem var(--pad);
  }
  .pcol__scr .wwd-row__name { font-size: clamp(1.45rem, calc(8.6 * var(--vw)), 2.3rem); }
  .pcol__scr .wwd-row__name br { display: none; }
  .pcol__scr .wwd-row__body {
    padding: 1.6rem var(--pad) 2.2rem; border-top: 1px solid rgba(255, 255, 255, 0.45);
    align-items: flex-start; justify-content: flex-start;
  }
  .pcol__scr .wwd-row__head { font-size: clamp(1.02rem, calc(4.8 * var(--vw)), 1.3rem); }
  .pcol__scr .wwd-row__copy { font-size: 0.94rem; max-width: none; }
  .pcol__scr .wwd-row__lines { font-size: 0.78rem; }
  /* the white-fill invert still belongs to a mouse, so it stays — the rows just carry their
     borders differently now that the left pad column is gone. */
  .pcol__scr .wwd-row:hover .wwd-row__id { border-right-color: transparent; }

  /* ---------- footer: the frame runs to the very bottom, so the footer is a column section too.
     Same one-column treatment the phone gets, measured against the column instead of the screen. */
  .pcol__scr .footer {
    --fpad: calc(9 * var(--vw) + clamp(0.9rem, calc(2.2 * var(--vw)), 1.4rem));
    padding-bottom: clamp(3rem, calc(12 * var(--vw)), 4.6rem);
  }
  .pcol__scr .footer__tag { font-size: clamp(1.7rem, calc(9 * var(--vw)), 2.6rem); }
  .pcol__scr .footer__note { font-size: clamp(0.9rem, calc(3.4 * var(--vw)), 1.05rem); max-width: none; }
  .pcol__scr .footer__meta { flex-direction: column; align-items: stretch; gap: 1.3rem; }
  .pcol__scr .footer__contact { gap: 0.6rem; padding: 0; }
  .pcol__scr .footer__email { font-size: 1.02rem; }
  .pcol__scr .footer__addr { font-size: 0.85rem; line-height: 1.75; max-width: none; }
  /* the divider is on a child of the padded row, so bleed it back out by the row's own inset to
     cross both verticals like every other footer rule */
  .pcol__scr .footer__social {
    flex-direction: row; align-items: center; justify-content: flex-start; gap: 1.5rem;
    margin-left: calc(-1 * var(--fpad)); margin-right: calc(-1 * var(--fpad));
    padding: 1.15rem var(--fpad) 0; border-top: 1px solid var(--line);
  }
  .pcol__scr .footer__ic { width: 28px; height: 28px; }
  .pcol__scr .footer__ic svg { width: 22px; height: 22px; }
  .pcol__scr .footer__bottom { flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1rem; font-size: 0.72rem; }
  .pcol__scr .footer__domain { position: relative; z-index: 2; }

  /* the white 9:16 overlays inside the column (founder, pricing) measure against the column, so
     their verticals line up with .pcol__grid; rows switch to the 9:16 rhythm the phone uses. */
  .pcol__scr .grid--white {
    background-image: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0.5) 1px, transparent 1px, transparent calc(29.2 * var(--vw)));
  }
  .pcol__scr .grid--white .grid__h { display: none; }

  /* ---------- 6 · creative ---------- */
  .pcol__scr .creative { padding: clamp(2.5rem, calc(13 * var(--vw)), 5rem) 0 clamp(1.5rem, calc(5 * var(--vw)), 2.5rem); }
  .pcol__scr .creative__head { padding: clamp(1.8rem, calc(7 * var(--vw)), 3rem) calc(9 * var(--vw)); }
  .pcol__scr .creative__h { font-size: clamp(1.9rem, calc(9 * var(--vw)), 3rem); max-width: none; }
  .pcol__scr .creative__sub { font-size: 1rem; max-width: none; }
  /* the band is scaled up and deliberately overruns its box; on a phone the viewport clips it, but
     here it would run 1300px wide straight across the surround, so clip it to the column. clip (not
     hidden) on one axis only, so the curve can still peek above and below the cards. */
  .pcol__scr .creative__stage { padding: clamp(2.5rem, calc(10 * var(--vw)), 5rem) 0; overflow-x: clip; }
  /* the band's viewBox is a wide desktop curve, so at column width it renders too flat to clear the
     cards. Both the card height and the band height scale off the same width, so the phone's factor
     carries over unchanged. */
  .pcol__scr .cband { transform: translateY(-50%) scale(2.6); }
  .pcol__scr .reel { padding-left: calc(9 * var(--vw)); }
  .pcol__scr .reel__card { width: calc(44 * var(--vw)); }

  /* ---------- 7 · completely unrelated: the bento goes to one card per row ---------- */
  /* no tail-freeze in the column — §8 is static here, so there is nothing to freeze under */
  .pcol__scr .tail-freeze { height: auto !important; }
  .pcol__scr .unrel { position: relative; top: auto; padding-bottom: clamp(2rem, calc(9 * var(--vw)), 4rem); }
  .pcol__scr .unrel__head { padding: clamp(1.8rem, calc(7 * var(--vw)), 3rem) calc(9 * var(--vw)); }
  .pcol__scr .unrel__h { font-size: clamp(1.9rem, calc(9 * var(--vw)), 3rem); }
  .pcol__scr .unrel__sub { font-size: 1rem; max-width: none; }
  .pcol__scr .unrel__grid { margin: 0 calc(9 * var(--vw)); grid-template-columns: 1fr; }
  .pcol__scr .ucard, .pcol__scr .ucard--wide { grid-column: 1 / -1; }
  /* the desktop card is a tall box with the square and the text pushed to opposite ends. At column
     width two lines of text leave that gap reading as a hole, so the cards close up to their content. */
  .pcol__scr .ucard {
    padding: clamp(1.1rem, calc(4.6 * var(--vw)), 1.8rem);
    min-height: 0; justify-content: flex-start; gap: clamp(0.8rem, calc(3.2 * var(--vw)), 1.3rem);
  }
  .pcol__scr .ucard p { font-size: clamp(0.98rem, calc(3.6 * var(--vw)), 1.15rem); max-width: none; }

  /* ---------- 8 · founder: static bento, no curtain wipe ----------
     The wipe is a 200vh pinned move over a frozen §7. In the column §7 has nothing to freeze
     against and the panel would pin to the viewport rather than the column, so this takes the
     same static treatment the phone gets (main.js skips the matching timeline). */
  .pcol__scr .founder { height: auto; margin-top: 0; pointer-events: auto; }
  .pcol__scr .founder__pin { position: relative; height: auto; min-height: 0; }
  .pcol__scr .founder__panel {
    position: relative; clip-path: none;
    padding: clamp(2rem, calc(8 * var(--vw)), 3.4rem) 0 clamp(1.4rem, calc(6 * var(--vw)), 2.4rem);
  }
  .pcol__scr .founder__inner { position: relative; inset: auto; margin: 0 calc(9 * var(--vw)); grid-template-rows: auto auto auto auto auto; }
  .pcol__scr .founder__h { font-size: clamp(1.5rem, calc(6.4 * var(--vw)), 2.1rem); max-width: none; }
  .pcol__scr .founder__lede { font-size: clamp(0.86rem, calc(3.2 * var(--vw)), 1rem); max-width: none; }
  /* the column's photo cell is a narrow portrait, so crop tighter around him — as on the phone */
  .pcol__scr .fbox--photo img { object-position: 63% center; }
  .pcol__scr .fbox__name { top: clamp(0.8rem, calc(3.2 * var(--vw)), 1.4rem); bottom: auto; font-size: clamp(1.3rem, calc(6 * var(--vw)), 1.9rem); }
  .pcol__scr .fstat { padding: clamp(0.55rem, calc(2.4 * var(--vw)), 0.95rem) clamp(0.7rem, calc(2.8 * var(--vw)), 1.1rem); }
  .pcol__scr .fstat__num { font-size: clamp(1.2rem, calc(6 * var(--vw)), 1.8rem); }
  .pcol__scr .fstat__lbl { font-size: clamp(0.72rem, calc(3 * var(--vw)), 0.86rem); line-height: 1.25; max-width: none; }
  .pcol__scr .fstat--wink .fstat__num { font-size: clamp(0.95rem, calc(4.4 * var(--vw)), 1.3rem); }
  .pcol__scr .fstat--wink .fstat__lbl { font-size: clamp(0.6rem, calc(2.7 * var(--vw)), 0.74rem); line-height: 1.2; }

  /* ---------- 9 · pricing: the card goes to a single column ---------- */
  .pcol__scr .pricing { padding: clamp(3rem, calc(12 * var(--vw)), 5.5rem) var(--pad); }
  .pcol__scr .pricing__card { grid-template-columns: 1fr; }
  .pcol__scr .pbox--body, .pcol__scr .pbox--count { grid-column: 1; }
  .pcol__scr .pbox { padding: clamp(1.2rem, calc(6 * var(--vw)), 2rem); }
  .pcol__scr .pricing__h { font-size: clamp(2rem, calc(9.8 * var(--vw)), 3.4rem); }
  .pcol__scr .pbox p { font-size: clamp(0.95rem, calc(3.4 * var(--vw)), 1.08rem); max-width: none; }
  .pcol__scr .pcount__num { font-size: clamp(2rem, calc(9 * var(--vw)), 3.2rem); }
  .pcol__scr .pcount__lbl { font-size: clamp(0.84rem, calc(3.1 * var(--vw)), 0.98rem); }
  .pcol__scr .pbox--cta { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
  .pcol__scr .pbox .pcta__note { max-width: none; }
}