/* kadabra home. Tokens come from _refs/dna.json (Noho + L.I.S.A. DNA, remapped to the brief palette). */
@font-face {
  font-family: "Gabarito";
  src: url("../fonts/gabarito-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --white: #FFFFFF;
  --grey: #F1F2F4;
  --line: #D9DBE0;
  --mute: #4A4C53;
  --ink: #16171B;
  --red: #EC4433;
  --red-text: #C62A1F;
  --font-display: "Gabarito", "Hanken Grotesk", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 28px;
  --shadow-low: 0 1px 2px rgba(22,23,27,.06), 0 4px 12px rgba(22,23,27,.05);
  --shadow-med: 0 10px 30px rgba(22,23,27,.08), 0 2px 6px rgba(22,23,27,.06);
  --shadow-high: 0 40px 80px rgba(22,23,27,.12), 0 8px 20px rgba(22,23,27,.08);
  --ease: cubic-bezier(.2,.7,.1,1);
  --m: 32px;
  --head: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 18px/1.55 var(--font-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
a { color: inherit; }
img, svg { display: block; }
:focus-visible { outline: 2px solid var(--red-text); outline-offset: 3px; border-radius: 2px; }
section[id], article[id] { scroll-margin-top: var(--head); }

.skip {
  position: fixed; left: 12px; top: -60px; z-index: 50;
  background: var(--ink); color: var(--white); padding: 10px 14px; border-radius: var(--r-sm);
  text-decoration: none;
}
.skip:focus { top: 12px; }

/* motion helpers: an accessible copy of every split heading, and a mask per word */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wd { display: inline-block; overflow: clip; vertical-align: top; padding: .16em .05em .2em; margin: -.16em -.05em -.2em; }
.wd__i { display: inline-block; }
html.lenis, html.lenis body { height: auto; }

/* type */
/* bolder pass: display type is set big on purpose (past the usual 6rem cap) so each section opens on one decisive word block */
.display {
  font: 800 clamp(56px, 13vw, 220px)/.84 var(--font-display);
  letter-spacing: -.04em;
}
.h1 { font: 750 clamp(40px, 6.2vw, 108px)/.94 var(--font-display); letter-spacing: -.04em; text-wrap: balance; }
.h2 { font: 600 clamp(28px, 3vw, 46px)/1.05 var(--font-display); letter-spacing: -.02em; }
.lede { font-size: clamp(18px, 1.45vw, 22px); line-height: 1.45; color: var(--ink); max-width: 34em; }
.red { color: var(--red-text); }
::selection { background: var(--red); color: var(--white); }

/* buttons: rectangles, never pills */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 22px;
  border-radius: var(--r-sm);
  background: var(--ink); color: var(--white);
  font: 600 16px/1 var(--font-body);
  text-decoration: none;
  transition: background-color .16s var(--ease);
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--sm { height: 42px; padding: 0 16px; font-size: 15px; }
.btn--sm svg { width: 18px; height: 18px; }
.btn--lg { height: 64px; padding: 0 28px; font-size: 19px; }
.only-narrow { display: none; }

/* header */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  height: var(--head);
  display: flex; align-items: center; gap: 32px;
  padding: 0 var(--m);
  background: var(--white);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.top.is-scrolled { border-color: var(--line); }
.top__logo { color: var(--ink); margin-right: auto; }
.top__logo svg { height: 30px; width: auto; aspect-ratio: 1703.11 / 435.6; }
.top__nav { display: flex; gap: 28px; }
.top__nav a { font-weight: 500; font-size: 16px; text-decoration: none; padding: 6px 0; background: linear-gradient(var(--ink), var(--ink)) 0 100% / 0 1px no-repeat; transition: background-size .3s var(--ease); }

/* ---------- hero ---------- */
.hero { position: relative; }
.hero__stage {
  position: relative;
  height: 100vh; height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: radial-gradient(120% 70% at 55% 92%, var(--grey) 0, var(--white) 62%);
}
.hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.hero__lite { display: none; }
.hero__veil { display: none; }
.hero__copy {
  position: absolute; z-index: 2;
  left: var(--m); right: var(--m); top: calc(var(--head) + 3.5vh);
}
.hero__title { font-family: var(--font-display); font-weight: 800; letter-spacing: -.04em; line-height: .84; }
.hero__l1 { display: block; font-size: clamp(34px, 6vw, 104px); font-weight: 700; letter-spacing: -.035em; margin-bottom: .1em; }
.hero__l2 { display: block; font-size: clamp(52px, 14.5vw, 96px); margin-left: -.045em; text-wrap: balance; }
/* desktop: the second line fills the measure edge to edge on one line (the line is 8.87em wide in Gabarito 800) */
.is-desk .hero__copy { container-type: inline-size; }
.is-desk .hero__l2 { white-space: nowrap; font-size: min(calc(100cqi / 8.95), 17.5vh); }
.hero__aside { display: flex; align-items: center; gap: 28px 32px; margin-top: 3.4vh; }
.hero__aside .lede { max-width: 27em; font-size: clamp(18px, 1.4vw, 21px); }
.hero__aside .btn { flex: none; }
.hero__where { margin-left: auto; font-size: 15px; color: var(--mute); }
.hero__caps {
  position: absolute; z-index: 2;
  left: var(--m); top: calc(var(--head) + 3.5vh);
  width: min(1200px, 86vw);
  list-style: none; padding: 0;
}
.cap {
  font: 650 clamp(22px, 2.1vw, 32px)/1.1 var(--font-display);
  letter-spacing: -.025em;
  margin-bottom: 26px;
}
.suit-tag {
  position: absolute; z-index: 2; left: 0; top: 0;
  display: inline-flex; gap: 6px; align-items: center;
  font: 650 19px/1 var(--font-body);
  text-decoration: none;
  padding: 11px 15px;
  border-radius: var(--r-sm);
  background: var(--white);
  box-shadow: var(--shadow-low);
  white-space: nowrap;
}
.suit-tag svg { width: 17px; height: 17px; }
.suit-tag svg:nth-of-type(2) { margin-right: 6px; }
.suit-tag--red svg { color: var(--red); }
.hero__bar { position: absolute; left: var(--m); right: var(--m); bottom: 24px; height: 2px; background: var(--line); z-index: 2; }
.hero__bar i { position: absolute; inset: 0; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }

/* desktop, moving: a long sticky stage driven by scroll */
.is-desk .hero__gl { display: block; }
/* the white band the cards pour under: words sit on paper, never on a moving card */
.is-desk .hero__veil {
  display: block; position: absolute; z-index: 1; inset: 0 0 auto 0; height: 56%;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--white) 0, var(--white) 82%, rgba(255,255,255,0) 100%);
}
.is-desk:not(.is-still) .hero { height: 560vh; }
.is-desk:not(.is-still) .hero__stage { position: sticky; top: 0; }
.is-desk:not(.is-still) .hero__caps { display: grid; }
.is-desk:not(.is-still) .cap { grid-area: 1 / 1; opacity: 0; margin: 0; font-size: clamp(32px, 3.6vw, 58px); line-height: 1.04; text-wrap: balance; }
.is-desk:not(.is-still) .suit-tag { opacity: 0; }

/* desktop, reduced motion: one still frame of the ordered suits */
/* the captions leave the stage and sit in a row under it, so nothing lands on the forms or the button */
.is-desk.is-still .hero { padding-bottom: 210px; }
.is-desk.is-still .hero__stage { overflow: visible; }
.is-desk.is-still .hero__caps {
  top: 100%; right: var(--m); width: auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
  padding-top: 40px; border-top: 1px solid var(--line);
}
.is-desk.is-still .cap { font-size: clamp(21px, 1.8vw, 26px); margin: 0; }
.is-desk.is-still .hero__bar { display: none; }

/* phones and touch: no WebGL, a quiet still composition */
.is-lite .hero__stage { height: auto; min-height: 0; padding: calc(var(--head) + 40px) var(--m) 0; background: var(--white); }
.is-lite .hero__copy, .is-lite .hero__caps { position: static; width: auto; }
.is-lite .hero__aside { flex-direction: column; align-items: flex-start; }
.is-lite .hero__where { margin-left: 0; }
.is-lite .hero__lite { display: block; margin: 48px -8px 8px; }
.is-lite .hero__lite svg { width: 100%; height: auto; }
.is-lite .hero__caps { padding: 40px 0 8px; border-top: 1px solid var(--line); margin-top: 32px; }
.is-lite .cap { font-size: 22px; }
.is-lite .suit-tag, .is-lite .hero__bar { display: none; }

/* ---------- two halves ---------- */
.halves { padding: 180px var(--m) 0; }
.halves__head { max-width: 900px; margin-bottom: 64px; }
.halves__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.half {
  background: var(--grey);
  border-radius: var(--r-lg);
  padding: 48px;
  display: flex; flex-direction: column;
}
.half__morph { width: min(62%, 360px); height: auto; aspect-ratio: 1; margin: 0 auto 32px; filter: drop-shadow(0 26px 30px rgba(22,23,27,.12)) drop-shadow(0 4px 6px rgba(22,23,27,.08)); }
.half__title { font: 800 clamp(52px, 8.4vw, 140px)/.84 var(--font-display); letter-spacing: -.04em; margin-bottom: 18px; }
.half__kicker { display: flex; align-items: center; gap: 5px; font-weight: 650; font-size: 17px; margin-bottom: 22px; }
.half__kicker svg { width: 17px; height: 17px; }
.half__kicker svg:nth-of-type(2) { margin-right: 6px; }
.half--red .half__kicker { color: var(--red-text); }
.half__lede { font-size: 20px; line-height: 1.45; margin-bottom: 28px; max-width: 30em; }
.rows { list-style: none; padding: 0; margin-top: auto; }
.rows li { position: relative; border-top: 1px solid var(--line); padding: 15px 0 15px 26px; font-size: 17px; }
.rows li::before {
  content: ""; position: absolute; left: 2px; top: 22px;
  width: 9px; height: 12.6px; border-radius: 2px; background: var(--ink);
}
.half--red .rows li::before, .workshop .rows li::before { background: var(--red); }

/* ---------- together ---------- */
.together { padding: 200px var(--m); text-align: center; }
.statement {
  font: 650 clamp(30px, 4.4vw, 72px)/1.06 var(--font-display);
  letter-spacing: -.03em; text-wrap: balance;
  max-width: 1260px; margin: 0 auto 40px;
}
.statement .w { transition: color .3s var(--ease); }
.is-desk:not(.is-still) .statement .w { color: #C3C5CB; }
.is-desk:not(.is-still) .statement .w.on { color: var(--ink); }
.together__note { color: var(--mute); max-width: 36em; margin: 0 auto; }

/* ---------- figures ---------- */
.figures { padding: 0 var(--m) 180px; }
.figures__head { margin-bottom: 56px; max-width: 900px; }
.figures__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; }
.fig {
  display: grid; grid-template-columns: 1fr minmax(110px, 30%); gap: 0 32px; align-items: start;
  padding: 40px 0 56px; border-top: 1px solid var(--ink);
}
.fig__grid, .fig__bars { grid-column: 2; grid-row: 1 / span 2; width: 100%; height: auto; }
.fig__grid rect { fill: var(--line); transition: fill .4s var(--ease); }
.fig__grid rect.hit { fill: var(--red); }
.is-desk:not(.is-still) .fig:not(.is-in) .fig__grid rect.hit { fill: var(--line); }
.fig__bars .bar--base { fill: var(--ink); }
.fig__bars .bar--more { fill: var(--red); transform-origin: 0 0; transition: transform .9s var(--ease); }
.is-desk:not(.is-still) .fig:not(.is-in) .bar--more { transform: scaleX(.746); }
.fig__bars text { font: 600 9px var(--font-body); fill: var(--ink); }
.fig__num { grid-column: 1; font: 800 clamp(76px, 10vw, 168px)/.8 var(--font-display); letter-spacing: -.045em; margin-bottom: 24px; font-variant-numeric: tabular-nums; }
.fig figcaption { grid-column: 1; display: flex; flex-direction: column; }
.fig figcaption p { font-size: 18px; line-height: 1.45; margin-bottom: 14px; max-width: 26em; }
.fig cite { display: block; font-style: normal; font-size: 14px; line-height: 1.4; color: var(--mute); }

/* ---------- workshop ---------- */
.workshop {
  display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center;
  padding: 140px var(--m) 200px;
  border-top: 1px solid var(--line);
}
.workshop__card { perspective: 1200px; display: flex; justify-content: center; }
.wcard {
  width: min(460px, 32vw); aspect-ratio: 5 / 7;
  border-radius: var(--r-lg);
  background: var(--red);
  box-shadow: var(--shadow-high);
  transform: rotateX(var(--rx, 6deg)) rotateY(var(--ry, -12deg));
  transition: transform .5s var(--ease);
  padding: 14px;
}
.wcard__face {
  height: 100%; border-radius: 18px;
  border: 2px solid rgba(255,255,255,.55);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 22px; color: var(--white);
}
.wcard__face p { font: 700 clamp(30px, 2.8vw, 44px)/.98 var(--font-display); letter-spacing: -.03em; }
.wcard__pip { width: 44px; height: 44px; color: var(--white); }
.wcard__pip--b { align-self: flex-end; transform: rotate(180deg); }
.workshop__copy .h1 { margin-bottom: 24px; }
.workshop__copy .lede { margin-bottom: 36px; }

/* ---------- project deck ---------- */
.deck { position: relative; }
.deck__stage { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; background: var(--white); }
.deck__head { position: absolute; left: var(--m); top: calc(var(--head) + 5vh); width: min(900px, 60vw); }
.deck__head .h1 { margin-bottom: 22px; }
.deck__slots { position: absolute; right: var(--m); bottom: 8vh; display: flex; gap: 20px; }
.deck__slots i { width: clamp(150px, 14.5vw, 240px); aspect-ratio: 5 / 7; }
.pj { position: absolute; inset: 0; color: var(--white); background: var(--red); --edge: var(--red); }
.pj--2 { background: var(--ink); --edge: var(--ink); }
.pj--3 { background: var(--grey); color: var(--ink); --edge: var(--grey); }
.pj__face { position: absolute; display: flex; flex-direction: column; justify-content: space-between; padding: 18px; }
.pj__face svg { width: 44%; height: auto; aspect-ratio: 1; margin: 16% auto 0; color: currentColor; }
.pj--3 .pj__face svg, .pj--3 .pj__suit { color: var(--red); }
.pj__face p { font: 700 19px/1.2 var(--font-body); }
.pj__full { position: absolute; inset: 0; }
.pj__scroll { padding: calc(var(--head) + 6vh) var(--m) 12vh; min-height: 150vh; }
.pj__tag { font: 700 20px/1.2 var(--font-body); margin-bottom: 2vh; }
/* the takeover title runs edge to edge; the suit sits still, huge and cropped by the page corner */
.pj__title { font: 800 22.2vw/.8 var(--font-display); letter-spacing: -.045em; margin: 0 0 6vh -.04em; white-space: nowrap; }
.pj__text { font-size: clamp(24px, 2vw, 32px); line-height: 1.36; max-width: 19em; }
.pj__suit { position: absolute; right: -5vw; bottom: -30vh; width: min(52vw, 84vh); height: auto; aspect-ratio: 1; pointer-events: none; }

.is-desk:not(.is-still) .deck { height: 820vh; }
.is-desk:not(.is-still) .deck__stage { position: sticky; top: 0; }
.is-desk:not(.is-still) .pj { will-change: clip-path; }
.is-desk:not(.is-still) .pj__full { visibility: hidden; }
/* takeover lines are wiped in by script once the card is full */
.is-desk:not(.is-still) .pj__tag, .is-desk:not(.is-still) .pj__title, .is-desk:not(.is-still) .pj__text { clip-path: inset(100% -30% 0 -30%); }
.is-desk:not(.is-still) .pj__suit { will-change: transform; }

/* still and lite: a plain stack of reserved cards */
.is-still .deck__stage, .is-lite .deck__stage { height: auto; min-height: 0; padding: 140px var(--m) 140px; }
.is-still .deck__head, .is-lite .deck__head { position: static; width: auto; max-width: 760px; margin-bottom: 48px; }
.is-still .deck__slots, .is-lite .deck__slots, .is-still .pj__face, .is-lite .pj__face { display: none; }
.is-still .pj, .is-lite .pj { position: relative; border-radius: var(--r-lg); margin-bottom: 16px; overflow: hidden; }
.is-still .pj__full, .is-lite .pj__full { position: static; }
.is-still .pj__full, .is-lite .pj__full { position: relative; }
.is-still .pj__scroll, .is-lite .pj__scroll { min-height: 0; padding: 40px 240px 40px 40px; }
.is-still .pj__title, .is-lite .pj__title { font-size: clamp(56px, 12vw, 180px); margin: 0 0 20px -.04em; }
.is-still .pj__suit, .is-lite .pj__suit { right: 40px; bottom: 40px; width: clamp(72px, 12vw, 170px); }

/* ---------- close ---------- */
.close { background: var(--grey); padding: 140px var(--m) 160px; }
.close__gl { display: none; }
.close__copy { position: relative; }
/* desktop, moving: a pinned stage where the suits are rebuilt in 3D above the words */
/* one pin, two beats: the suits are built (first half), then step back as the words rise (second half) */
.has-close-gl .close { height: 250vh; padding: 0; }
.has-close-gl .close__stage {
  position: sticky; top: 0; overflow: hidden;
  height: 100vh; height: 100svh; min-height: 640px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--m) 9vh;
}
.has-close-gl .close__gl { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.has-close-gl .close__suits { display: none; }
.close__suits { display: flex; gap: clamp(8px, 2vw, 32px); margin-bottom: 72px; }
.close__suits svg { width: clamp(64px, 14vw, 230px); height: auto; aspect-ratio: 1; filter: drop-shadow(0 28px 26px rgba(22,23,27,.13)) drop-shadow(0 4px 5px rgba(22,23,27,.08)); }
.s-red { color: var(--red); }
.s-ink { color: var(--ink); }
.close .display { margin-bottom: 28px; }
/* the close heading fades up by time with no mask, so the q of "quieran" keeps its tail */
/* (and lets clicks through: the waiting words sit low, over the button) */
.close--once .wd { overflow: visible; pointer-events: none; }
.close .lede { margin-bottom: 40px; }

/* ---------- footer ---------- */
.foot { padding: 64px var(--m) 40px; display: grid; grid-template-columns: auto 1fr; gap: 24px 64px; align-items: start; }
.foot__mark { width: 56px; height: auto; }
.foot__facts { display: grid; grid-template-columns: repeat(4, auto); gap: 24px 48px; justify-content: start; }
.foot__facts dt { font-size: 14px; color: var(--mute); margin-bottom: 6px; }
.foot__facts dd { font-weight: 500; }
.foot__facts a { text-decoration: none; border-bottom: 1px solid var(--line); }
.foot__legal { grid-column: 1 / -1; font-size: 14px; color: var(--mute); padding-top: 24px; border-top: 1px solid var(--line); }

/* hover effects only where there is a real hover; on touch they stick after a tap */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--red-text); }
  .top__nav a:hover { background-size: 100% 1px; }
  .foot__facts a:hover { border-color: var(--ink); }
}

/* ---------- small screens ---------- */
@media (max-width: 1100px) {
  .foot__facts { grid-template-columns: repeat(2, auto); }
}
@media (max-width: 820px) {
  :root { --m: 20px; --head: 62px; }
  .top { gap: 12px; }
  .top__nav { display: none; }
  .top__logo svg { height: 24px; }
  .only-wide { display: none; }
  .only-narrow { display: inline; }
  .halves { padding-top: 112px; }
  .halves__grid { grid-template-columns: 1fr; }
  .half { padding: 28px 22px; border-radius: 20px; }
  .half__title { font-size: clamp(52px, 16vw, 72px); }
  .half__morph { width: 46%; margin-bottom: 20px; }
  .together { padding: 112px var(--m); }
  .figures { padding-bottom: 112px; }
  .figures__grid { grid-template-columns: 1fr; }
  .fig { padding: 28px 0 40px; }
  .workshop { grid-template-columns: 1fr; gap: 40px; padding: 96px var(--m) 112px; }
  .wcard { width: min(260px, 66vw); }
  .is-lite .deck__stage { padding: 96px var(--m); }
  .is-lite .pj__scroll { padding: 28px 22px 116px; }
  .is-lite .pj__suit { right: auto; left: 22px; bottom: 28px; width: 72px; }
  .close { padding: 96px var(--m) 112px; }
  .close__suits { margin-bottom: 48px; }
  .btn--lg { height: 58px; font-size: 17px; padding: 0 20px; }
  .foot { grid-template-columns: 1fr; }
  .foot__facts { grid-template-columns: 1fr; }
}