/* ============================================================
   MOTION — private creator growth agency
   Dark liquid-chrome editorial. The page is monochrome by
   decision: the metal supplies its own temperature split, and
   the one colour on it is the hand-drawn yellow, sprayed over
   the layout rather than designed into it. Keep it that way.
   Every scrawl is decoration, never a control, never a label.
   Spacing is on an 8pt grid, both ends of every clamp included.
   ============================================================ */

:root {
  /* surface */
  --void:      #060607;
  --base:      #0a0a0b;
  --raised:    #101013;
  --sunk:      #030304;

  /* ink */
  --ink:       #f2f0eb;
  --ink-2:     #b9b6af;
  --ink-3:     #8b8880;
  /* floor for small mono labels: 4.8:1 on --base. Anything dimmer
     than this fails at 10 to 12px, which is where they all live. */
  --ink-4:     #807d77;

  /* metal */
  --spec:      #ffffff;
  --steel:     #c9c7c2;
  --shadow-m:  #3b3c41;
  --cool:      #7d8794;

  /* the sprayed marks. One hue, sampled from the source art, and the
     only pigment on the page — see the SCRAWLS block */
  --spray:     #ffd901;

  --hair:      rgba(255,255,255,.09);
  --hair-2:    rgba(255,255,255,.16);
  --hair-3:    rgba(255,255,255,.34);

  /* type */
  --display: 'Anton', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --body:    'Archivo', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --mono:    'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* rhythm */
  --gutter:  clamp(24px, 5vw, 64px);
  --band:    clamp(96px, 11vw, 176px);
  --shell:   1360px;

  /* motion */
  --ease:    cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.62,.02,.34,1);
}

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

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

body {
  margin: 0;
  background: var(--base);
  color: var(--ink-2);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }

::selection { background: var(--ink); color: var(--void); }

:focus-visible {
  outline: 2px solid var(--spec);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: 8px; top: -64px; z-index: 200;
  background: var(--ink); color: var(--void);
  padding: 12px 20px; font-family: var(--mono); font-size: 12px;
  transition: top .2s var(--ease);
}
.skip:focus { top: 8px; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* ---------------- film grain ---------------- */
.grain {
  position: fixed; inset: 0; z-index: 90;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ============================================================
   TYPE
   ============================================================ */
.h1, .h2, .h3 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: -.005em;
  margin: 0;
  text-wrap: balance;
}
.h1 { font-size: clamp(40px, 6.4vw, 96px);  line-height: .94; }
.h2 { font-size: clamp(32px, 4.4vw, 64px);  line-height: 1.02; }
.h3 { font-size: clamp(24px, 2.8vw, 40px);  line-height: 1.05; }

p { margin: 0 0 24px; max-width: 62ch; }
p:last-child { margin-bottom: 0; }

.dim { color: var(--ink-4); }

/* ============================================================
   SCRAWLS — the sprayed marks

   Hand-placed stickers, one per section, positioned off the
   section shell so they keep their relationship to the headline
   they annotate. Each carries its art, its natural aspect and
   its placement as custom properties, so a nudge is one line
   and the responsive overrides at the bottom of this file stay
   readable.

   The art ships as alpha masks painted with --spray rather than
   as colour PNGs. Every mark measured as the same single yellow,
   so the pigment belongs in a token where it can be changed once,
   and dropping the colour channels took the five files from 214KB
   to 76KB. The soft spray edges survive: they live in the alpha.

   Masked, not screen-blended over a black plate: blending would
   light up whatever sits behind a mark the moment one of them
   lands on a photograph.
   ============================================================ */
.scrawl {
  position: absolute;
  left: var(--sx);
  top: var(--sy);
  width: var(--sw);
  aspect-ratio: var(--sa);
  margin-left: var(--sdx, 0);
  background: var(--spray);
  -webkit-mask: var(--si) center / contain no-repeat;
          mask: var(--si) center / contain no-repeat;
  pointer-events: none;
  z-index: 2;
}

.scrawl--heart { --si: url("assets/scrawl-heart.png"); --sa: 238 / 366; --sw: clamp(72px, 8.4vw, 119px); --sx: 62%;  --sy: -44px; }
.scrawl--smile { --si: url("assets/scrawl-smile.png"); --sa: 216 / 264; --sw: clamp(64px, 7.6vw, 108px); --sx: 56%;  --sy: -18px; }
.scrawl--spark { --si: url("assets/scrawl-spark.png"); --sa: 270 / 330; --sw: clamp(80px, 9.4vw, 135px); --sx: 28%;  --sy: 68px;  }
.scrawl--crown { --si: url("assets/scrawl-crown.png"); --sa: 306 / 264; --sw: clamp(96px, 10.6vw, 153px); --sx: 50%; --sy: 24px;  --sdx: calc(var(--sw) / -2 + 22px); }
.scrawl--tag   { --si: url("assets/scrawl-tag.png");   --sa: 352 / 264; --sw: clamp(112px, 12.2vw, 176px); --sx: 50%; --sy: 36px; --sdx: calc(var(--sw) / -2 + 11px); }

/* The counterpoint is weight and size, not a second voice. An
   editorial serif here would be the only thing on the page that
   does not belong to the metal. */
.pull {
  font-family: var(--body);
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -.014em;
  margin-top: 40px;
  max-width: 22ch;
}

/* ============================================================
   TITLE LINE REVEALS
   Words carry their own mask, so inline markup survives and the
   heading still reflows. Words on the same visual line share a
   --l index, so a heading arrives line by line rather than word
   by word. Nothing is hidden until JS has split it.
   ============================================================ */
.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* let descenders through without loosening the mask at the top */
  padding-bottom: .16em;
  margin-bottom: -.16em;
}
.w__i { display: inline-block; }

.is-split .w__i {
  transform: translateY(112%);
  opacity: 0;
}
.is-split.is-lit .w__i {
  transform: none;
  opacity: 1;
  transition:
    transform 1.05s var(--ease),
    opacity .55s var(--ease);
  transition-delay: calc(var(--l, 0) * var(--lstep, 90ms));
}

/* the hero gets a slower, wider beat than the section headings */
.hero__title { --lstep: 120ms; }
.h1 { --lstep: 90ms; }
.h2, .h3 { --lstep: 80ms; }

/* chrome-filled lettering. The whole world is metal; this is the
   one place the metal gets into the type. Solid white is the
   fallback if background-clip is unavailable. */
.chrome-text {
  font-style: normal;
  color: var(--spec);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .chrome-text {
    background-image: linear-gradient(
      100deg,
      #6e7076 0%,  #e9e9ec 13%, #ffffff 20%, #9fa3ab 30%,
      #4d5057 40%, #d8d9dd 52%, #ffffff 58%, #8d9199 68%,
      #3f4249 80%, #cfd1d6 92%, #f4f4f6 100%);
    background-size: 240% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: sheen 9s var(--ease-io) infinite;
  }
}
@keyframes sheen {
  0%, 100% { background-position:   0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  transition: background .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .35s var(--ease);
}

.btn--ghost {
  padding: 12px 24px;
  border: 1px solid var(--hair-2);
  color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--void); }

.btn--solid {
  padding: 20px 32px;
  background: var(--ink);
  color: var(--void);
  position: relative;
  overflow: hidden;
}
.btn--solid::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.9) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .8s var(--ease);
}
.btn--solid:hover::after { transform: translateX(120%); }

.btn--text {
  padding: 20px 0;
  color: var(--ink-3);
  position: relative;
}
.btn--text::after {
  content: '';
  position: absolute; left: 0; bottom: 16px; height: 1px; width: 100%;
  background: currentColor; transform-origin: right;
  transform: scaleX(0);
  transition: transform .5s var(--ease);
}
.btn--text:hover { color: var(--ink); }
.btn--text:hover::after { transform-origin: left; transform: scaleX(1); }

.btn--slab {
  width: 100%;
  padding: 24px 32px;
  margin-top: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #dcdbd7 100%);
  color: var(--void);
  position: relative;
  overflow: hidden;
  font-weight: 700;
}
.btn--slab::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.95) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .9s var(--ease);
}
.btn--slab:hover::after { transform: translateX(120%); }
.btn--slab:active { transform: translateY(1px); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px;
  padding: 20px var(--gutter);
  background: rgba(10,10,11,.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid transparent;
  /* The condense is carried by the wordmark scaling, not by animating
     padding — a height animation here reflows the whole page. */
  transition: border-color .5s var(--ease), background .5s var(--ease);
}
.nav.is-stuck {
  border-bottom-color: var(--hair);
  background: rgba(6,6,7,.88);
}
.nav.is-stuck .wordmark { transform: scale(.88); }

.wordmark {
  display: block;
  color: var(--ink);
  line-height: 0;
  position: relative;
  overflow: hidden;
  transform-origin: left center;
  transition: transform .5s var(--ease);
}
.logo { display: block; width: auto; }
.wordmark .logo { height: 24px; }
.footer__mark .logo { height: 30px; }
.drawer .logo,
.wordmark .logo { color: currentColor; }
.wordmark::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.85) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform .9s var(--ease);
  mix-blend-mode: overlay;
}
.wordmark:hover::after { transform: translateX(130%); }

.nav__links {
  display: flex; gap: 40px;
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
}
.nav__links a { color: var(--ink-3); position: relative; padding-block: 4px; }
.nav__links a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--ink); transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform-origin: left; transform: scaleX(1); }

.burger {
  display: none;
  width: 40px; height: 40px;
  background: none; border: 0; cursor: pointer;
  padding: 0; position: relative;
}
.burger span {
  position: absolute; left: 8px; width: 24px; height: 1px;
  background: var(--ink);
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 23px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

.drawer[hidden] { display: none; }

.drawer {
  position: fixed; inset: 0; z-index: 79;
  background: var(--void);
  display: flex; flex-direction: column; justify-content: center;
  gap: 8px;
  padding: 0 var(--gutter);
}
.drawer a {
  font-family: var(--display);
  font-size: clamp(36px, 11vw, 64px);
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.1;
  opacity: 0; transform: translateY(24px);
  animation: drawerIn .6s var(--ease) forwards;
}
.drawer a:nth-child(1) { animation-delay: .04s; }
.drawer a:nth-child(2) { animation-delay: .08s; }
.drawer a:nth-child(3) { animation-delay: .12s; }
.drawer a:nth-child(4) { animation-delay: .16s; }
.drawer a:nth-child(5) { animation-delay: .20s; }
@keyframes drawerIn { to { opacity: 1; transform: none; } }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: min(88vh, 880px);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(40px, 5vw, 72px) var(--gutter) 0;
  border-bottom: 1px solid var(--hair);
  overflow: hidden;
  isolation: isolate;
}

/* the sculpture. Sits behind the type on the right, bleeding off
   the top and right edges so it reads as a crop of something
   larger rather than a picture placed in a column. */
.hero__art {
  position: absolute;
  top: 2%; right: -5%;
  width: min(780px, 52vw);
  height: 96%;
  z-index: -1;
  pointer-events: none;
}
.hero__chrome,
.hero__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__fallback {
  background:
    radial-gradient(40% 34% at 54% 40%, rgba(232,234,239,.34) 0%, rgba(118,124,136,.16) 44%, transparent 70%),
    radial-gradient(24% 22% at 40% 64%, rgba(255,255,255,.20) 0%, transparent 66%);
  filter: blur(26px);
  opacity: 1;
  transition: opacity .8s var(--ease);
}
.hero.chrome-live .hero__fallback { opacity: 0; }

.hero__inner {
  width: 100%; max-width: var(--shell);
  margin: 0 auto;
  padding-block: clamp(24px, 4vw, 56px);
}

.hero__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(46px, 6.6vw, 96px);
  line-height: .92;
  letter-spacing: -.012em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 32px;
  max-width: 17ch;
}
.hero__lead {
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--ink-2);
  max-width: 44ch;
  margin: 0 0 40px;
  opacity: 0;
  animation: fadeUp .9s var(--ease) .42s forwards;
}
.hero__actions {
  display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp .9s var(--ease) .52s forwards;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* film-slate strip pinned to the bottom of the hero */
.hero__slate {
  width: 100%; max-width: var(--shell);
  margin: 0 auto;
  display: flex; gap: 32px; flex-wrap: wrap; align-items: center;
  padding: 24px 0;
  border-top: 1px solid var(--hair);
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-4);
  opacity: 0;
  animation: fadeUp .9s var(--ease) .62s forwards;
}
.hero__slate span { position: relative; }
.hero__slate span + span:not(.hero__scroll)::before {
  content: ''; position: absolute; left: -16px; top: 50%;
  width: 1px; height: 10px; background: var(--hair-2); transform: translateY(-50%);
}
.hero__scroll { margin-left: auto; color: var(--ink-3); }
.hero__scroll::after {
  content: ''; display: inline-block; vertical-align: middle;
  width: 40px; height: 1px; margin-left: 12px;
  background: linear-gradient(90deg, var(--ink-3), transparent);
  animation: pull 2.4s var(--ease-io) infinite;
}
@keyframes pull { 0%,100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.4); opacity: .4; } }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee {
  border-bottom: 1px solid var(--hair);
  overflow: hidden;
  padding: 24px 0;
  background: var(--sunk);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex; align-items: baseline; gap: 40px;
  width: max-content;
  font-family: var(--display);
  font-size: clamp(40px, 6vw, 88px);
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1;
  color: var(--ink-4);
  animation: slide 34s linear infinite;
}
.marquee__track .dot { color: var(--shadow-m); font-size: .7em; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ============================================================
   LEDGER
   ============================================================ */
.ledger { padding: var(--band) 0; border-bottom: 1px solid var(--hair); }

/* Read as a statement of record, not a stat card: figure hard left,
   label hard right, a rule between each line. */
.ledger__row {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 40px;
  align-items: baseline;
  padding: 32px 0;
  border-top: 1px solid var(--hair);
}
.ledger__row:last-child { border-bottom: 1px solid var(--hair); }

.ledger__fig {
  font-family: var(--display);
  font-size: clamp(48px, 8vw, 120px);
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ledger__label {
  font-size: 16px;
  color: var(--ink-3);
  max-width: 40ch;
  justify-self: end;
  text-align: right;
}

/* placeholder marking — a dotted rule under any invented figure.
   Drop data-proof on <html> and every marker disappears. */
[data-proof="placeholder"] .placeholder {
  border-bottom: 1px dotted var(--ink-4);
  padding-bottom: 2px;
}

/* ============================================================
   SPLIT (text + image)
   ============================================================ */
.split { padding: var(--band) 0; border-bottom: 1px solid var(--hair); }

.split__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.split__grid--rev { margin-bottom: clamp(80px, 9vw, 136px); }

.split__text { position: relative; }
.split__text p { color: var(--ink-2); }
.split__text .h2 { margin-bottom: 32px; }

.frame {
  position: relative;
  margin: 0;
}
.frame img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(.94);
  background: var(--raised);
}
.frame--tall img { aspect-ratio: 3 / 4; }

/* Artwork, not a photograph: the mark is already sprayed into the
   pixels, so the desaturation pass that keeps the reportage shots
   in line would take the only colour out with it. */
.frame--art img { filter: contrast(1.05) brightness(.98); }

/* a hairline offset behind the image: metal edge, not a card */
.frame::before {
  content: '';
  position: absolute;
  inset: -16px -16px 16px 16px;
  border: 1px solid var(--hair-2);
  pointer-events: none;
  z-index: -1;
}
.frame figcaption {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-4);
}

/* ============================================================
   PILLARS — an index, not cards
   ============================================================ */
.pillars { padding: var(--band) 0; border-bottom: 1px solid var(--hair); }
.pillars .shell { position: relative; }
.pillars .h1 { margin-bottom: clamp(48px, 6vw, 80px); }

.index { list-style: none; margin: 0; padding: 0; }

.index__row {
  display: grid;
  grid-template-columns: 56px minmax(0, 280px) minmax(0, 1fr);
  gap: 32px;
  align-items: baseline;
  padding: 32px 24px 32px 0;
  border-top: 1px solid var(--hair);
  position: relative;
  transition: background .5s var(--ease);
}
.index__row:last-child { border-bottom: 1px solid var(--hair); }

/* the sliver of chrome that grows down the left edge on hover */
.index__row::before {
  content: '';
  position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px;
  background: linear-gradient(180deg, var(--spec), var(--cool));
  transform: scaleY(0); transform-origin: top;
  transition: transform .55s var(--ease);
}
.index__row:hover { background: rgba(255,255,255,.022); }
.index__row:hover::before { transform: scaleY(1); }

.index__n {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .2em;
  color: var(--ink-4);
  transition: color .45s var(--ease);
}
.index__row:hover .index__n { color: var(--steel); }

.index__t {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .006em;
  color: var(--ink-2);
  margin: 0;
  transition: color .45s var(--ease), transform .55s var(--ease);
}
.index__row:hover .index__t { color: var(--ink); transform: translateX(8px); }

.index__d {
  font-size: 16px;
  color: var(--ink-4);
  margin: 0;
  max-width: 46ch;
  transition: color .45s var(--ease);
}
.index__row:hover .index__d { color: var(--ink-2); }

/* ============================================================
   FUNNEL
   ============================================================ */
.funnel {
  padding: var(--band) 0;
  border-bottom: 1px solid var(--hair);
  position: relative;
  overflow: hidden;
}

/* the chrome O. Conic gradient ring, slowly turning — cheap, and
   it reads as brushed metal against the grain overlay. */
.chrome-ring {
  position: absolute;
  right: -20%; top: 54%;
  width: min(640px, 50vw); aspect-ratio: 1;
  transform: translateY(-50%);
  pointer-events: none;
  /* held well down: at full strength it eats the stage labels
     sitting in front of it */
  opacity: .22;
  -webkit-mask-image: radial-gradient(circle, transparent 44%, #000 46%, #000 72%, transparent 74%);
          mask-image: radial-gradient(circle, transparent 44%, #000 46%, #000 72%, transparent 74%);
}
.chrome-ring i {
  position: absolute; inset: 0; display: block;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    #4a4d54 0deg,  #eceef2 26deg, #ffffff 38deg, #85898f 62deg,
    #33353b 96deg, #cfd2d8 132deg, #ffffff 148deg, #6f737a 178deg,
    #2c2e33 214deg, #dfe1e6 250deg, #ffffff 266deg, #7c8087 300deg,
    #3a3c42 332deg, #4a4d54 360deg);
  filter: blur(1px);
  animation: turn 44s linear infinite;
}
@keyframes turn { to { transform: rotate(360deg); } }

.funnel__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
/* the portrait the headline is written on */
.funnel__intro { position: relative; padding-top: clamp(48px, 9.8vw, 140px); }

.funnel__art {
  position: absolute;
  left: 0;
  top: clamp(-112px, -7.8vw, -40px);
  width: min(548px, 96%);
  aspect-ratio: 548 / 684;
  overflow: hidden;
  z-index: 0;
}
.funnel__art img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.06) brightness(.96);
}
/* Ramps in under the sunglasses. Above that line the graffiti is
   the point; below it the copy has to clear 4.5:1 over a face. */
.funnel__art::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(6,6,7,0) 0%, rgba(6,6,7,.06) 22%, rgba(6,6,7,.46) 34%,
    rgba(6,6,7,.84) 48%, rgba(6,6,7,.93) 68%, rgba(6,6,7,.96) 100%);
}

.funnel__copy { position: relative; z-index: 1; }
.funnel__intro .h1 { margin-bottom: 32px; }
.funnel__intro p { color: var(--ink-2); }

.stages { list-style: none; margin: 0; padding: 0; }

.stage {
  width: var(--w);
  min-width: 200px;
  margin-bottom: 8px;
  padding: 20px 24px;
  border: 1px solid var(--hair-2);
  /* opaque enough to hold its own text against the ring behind it */
  background: rgba(8,8,10,.82);
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  position: relative;
  overflow: hidden;
  transition: border-color .5s var(--ease), background .5s var(--ease);
}
.stage:hover { border-color: var(--hair-3); background: rgba(20,20,24,.92); }

/* light travels down the funnel, one stage at a time */
.stage::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.14) 50%, transparent 70%);
  transform: translateX(-130%);
}
.stages.is-live .stage::after { animation: pass 3.6s var(--ease-io) infinite; }
.stages.is-live .stage:nth-child(1)::after { animation-delay: 0s; }
.stages.is-live .stage:nth-child(2)::after { animation-delay: .18s; }
.stages.is-live .stage:nth-child(3)::after { animation-delay: .36s; }
.stages.is-live .stage:nth-child(4)::after { animation-delay: .54s; }
.stages.is-live .stage:nth-child(5)::after { animation-delay: .72s; }
@keyframes pass {
  0%   { transform: translateX(-130%); }
  38%  { transform: translateX(130%); }
  100% { transform: translateX(130%); }
}

.stage__label {
  font-family: var(--display);
  font-size: clamp(18px, 1.8vw, 26px);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ink-3);
  line-height: 1.1;
  transition: color .5s var(--ease);
}
.stage:hover .stage__label { color: var(--ink); }
.stage__meta {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.stage--end {
  background: linear-gradient(180deg, #f6f5f2 0%, #cfcdc8 100%);
  border-color: transparent;
  margin-top: 16px;
}
.stage--end:hover { background: linear-gradient(180deg, #ffffff 0%, #dedcd7 100%); border-color: transparent; }
.stage--end .stage__label,
.stage--end:hover .stage__label { color: var(--void); }
.stage--end .stage__meta { color: #55534f; }

/* ============================================================
   STATEMENT
   ============================================================ */
.statement { padding: var(--band) 0; border-bottom: 1px solid var(--hair); }
.statement__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
}
.statement p { color: var(--ink-2); }

/* ============================================================
   ROSTER
   ============================================================ */
.roster { padding: var(--band) 0; border-bottom: 1px solid var(--hair); background: var(--void); }

.roster__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 40px; flex-wrap: wrap;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.roster__head p { color: var(--ink-3); max-width: 36ch; margin: 0; }

.roster__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.card { margin: 0; }
/* margin, not transform: the reveal owns `transform` on this
   element and would reset the offset the moment it lands */
.card--offset { margin-top: 48px; }

.card__img {
  position: relative;
  overflow: hidden;
  background: var(--raised);
}
/* Same reason as .frame--art: these four are collages, and the
   marker on them is the only colour in the section. The hover
   used to be "the colour comes back" — now that it never left,
   it lifts the plate instead. */
.card__img img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  filter: contrast(1.04) brightness(.94);
  transition: filter .7s var(--ease), transform 1.1s var(--ease);
}
.card:hover .card__img img { filter: contrast(1.02) brightness(1.08); transform: scale(1.04); }

/* hairline that draws itself around the portrait on hover */
.card__img::after {
  content: '';
  position: absolute; inset: 8px;
  border: 1px solid var(--hair-3);
  opacity: 0;
  transition: opacity .5s var(--ease), inset .5s var(--ease);
  pointer-events: none;
}
.card:hover .card__img::after { opacity: 1; inset: 12px; }

.card figcaption { display: flex; flex-direction: column; gap: 4px; padding-top: 16px; }
.card__name {
  font-family: var(--display);
  font-size: 20px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink);
}
.card__cat {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-4);
}
.card__fig {
  margin-top: 8px;
  font-size: 15px;
  color: var(--steel);
  align-self: flex-start;
}
.card__fig i { font-style: normal; color: var(--ink-4); font-size: 13px; }

/* ============================================================
   OFFLINE
   ============================================================ */
.offline { padding: var(--band) 0; border-bottom: 1px solid var(--hair); background: var(--sunk); }
.offline__inner { max-width: 880px; margin: 0 auto; text-align: center; }
.offline .h2 { margin-bottom: 40px; }
.offline p { color: var(--ink-3); margin: 0 auto; max-width: 56ch; }

.chips {
  list-style: none; margin: 0 0 40px; padding: 0;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 12px;
}
.chips li {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--hair-2);
  padding: 14px 24px;
  position: relative;
  overflow: hidden;
}
.chips li::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 34%, rgba(255,255,255,.20) 50%, transparent 66%);
  transform: translateX(-140%);
  animation: pass 5.4s var(--ease-io) infinite;
}
.chips li:nth-child(2)::after { animation-delay: .4s; }
.chips li:nth-child(3)::after { animation-delay: .8s; }

/* ============================================================
   WHY
   ============================================================ */
.why { padding: var(--band) 0; border-bottom: 1px solid var(--hair); }
.why .h3 { margin-bottom: 48px; }

.cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--hair);
}
.col {
  padding: 40px 32px 8px 0;
  position: relative;
}
.col + .col { padding-left: 32px; }
.col + .col::before {
  content: ''; position: absolute; left: 0; top: 40px; bottom: 8px; width: 1px;
  background: var(--hair);
}
.col__t {
  display: block;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 16px;
}
.col p { color: var(--ink-3); font-size: 16px; margin: 0; }

/* ============================================================
   APPLY
   ============================================================ */
.apply {
  padding: clamp(112px, 13vw, 200px) var(--gutter);
  background: var(--void);
  border-bottom: 1px solid var(--hair);
  position: relative;
  overflow: hidden;
}
.apply__inner { max-width: 640px; margin: 0 auto; text-align: center; }
.apply .h1 { margin-bottom: 24px; }
.apply__lead { color: var(--ink-3); margin: 0 auto 56px; max-width: 48ch; }

.form { display: flex; flex-direction: column; gap: 16px; text-align: left; }

.field { position: relative; }
.field input,
.field select {
  width: 100%;
  background: transparent;
  border: 1px solid var(--hair-2);
  padding: 26px 20px 12px;
  color: var(--ink);
  font-size: 15px;
  outline: none;
  transition: border-color .4s var(--ease), background .4s var(--ease);
  border-radius: 0;
  -webkit-appearance: none;
          appearance: none;
}
.field select { color: var(--ink-2); cursor: pointer; }
.field select option { background: var(--void); color: var(--ink); }

.field label {
  position: absolute; left: 20px; top: 20px;
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-4);
  pointer-events: none;
  transform-origin: left top;
  transition: transform .35s var(--ease), color .35s var(--ease);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field select:focus + label,
.field select:valid + label {
  transform: translateY(-11px) scale(.82);
  color: var(--ink-3);
}
.field--select label { transform: translateY(-11px) scale(.82); }

.field input:focus,
.field select:focus { border-color: var(--hair-3); background: rgba(255,255,255,.03); }
.field.is-bad input { border-color: #8d6a6a; }

.field--select::after {
  content: '';
  position: absolute; right: 22px; top: 50%;
  width: 7px; height: 7px;
  border-right: 1px solid var(--ink-3);
  border-bottom: 1px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.form__error {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .08em;
  color: #c79a9a;
  margin: 0;
}
.form__note {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-4);
  text-align: center;
  margin: 8px 0 0;
}

.done {
  border: 1px solid var(--hair-2);
  padding: 56px 40px;
  animation: fadeUp .7s var(--ease) forwards;
}
.done h3 {
  font-family: var(--display);
  font-weight: 400; font-size: 30px; text-transform: uppercase;
  color: var(--ink); margin: 0 0 16px;
}
.done p { color: var(--ink-3); margin: 0 auto; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--void); padding-top: clamp(80px, 9vw, 128px); overflow: hidden; }

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 48px;
  padding-bottom: clamp(64px, 8vw, 104px);
}
.footer__grid nav { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.footer__grid nav a { font-size: 15px; color: var(--ink-3); transition: color .3s var(--ease); }
.footer__grid nav a:hover { color: var(--ink); }

.footer__h {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 8px;
}
.footer__mark {
  color: var(--ink);
  margin-bottom: 20px;
}
.footer__tag {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-4); margin: 0 0 16px;
}
.footer__sub { color: var(--ink-3); font-size: 15px; margin: 0; }

.footer__bar {
  border-top: 1px solid var(--hair);
  padding: 24px 0 32px;
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .1em;
  color: var(--ink-4);
}

/* the sign-off: the real mark, oversized and nearly submerged,
   bleeding off the bottom edge. Anton here would spell the brand
   name in a letterform the brand does not use. */
.footer__giant {
  color: rgba(255,255,255,.07);
  padding: 0 var(--gutter);
  margin-bottom: -6%;
  user-select: none;
  pointer-events: none;
}
.footer__giant svg { display: block; width: 100%; height: auto; }

/* ============================================================
   CHROME SHARDS
   Solid metal splinters, cut with clip-path so they have real
   points. The conic gradient is the same studio room the WebGL
   sculpture reflects, flattened onto a facet.
   ============================================================ */
.shard {
  position: absolute;
  display: block;
  pointer-events: none;
  /* long and narrow. A radially symmetric shape reads as a sparkle,
     which is the opposite of what this world wants. */
  aspect-ratio: .38;
  background: conic-gradient(from 210deg,
    #2b2d32 0deg,  #d8dade 34deg,  #ffffff 52deg,  #6c7077 88deg,
    #232529 128deg, #c6c9cf 172deg, #ffffff 196deg, #5d6167 232deg,
    #2c2e33 278deg, #e2e4e8 324deg, #2b2d32 360deg);
  /* an irregular splinter: two sharp tips, faceted flanks, and no
     line of symmetry anywhere in it */
  clip-path: polygon(
    54% 0%,  66% 21%, 57% 39%, 74% 55%,
    62% 73%, 46% 100%, 37% 71%, 24% 54%,
    41% 38%, 31% 19%);
  filter: drop-shadow(0 0 22px rgba(186,197,212,.14));
  opacity: .5;
  animation: shardTurn 34s linear infinite, shardFloat 13s ease-in-out infinite;
  z-index: 0;
}
@keyframes shardTurn  { to { rotate: 360deg; } }
@keyframes shardFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -22px; } }

.shard--a { animation-delay: -4s,  -2s; width: 104px;  right: 6%;  top: 16%;  opacity: .42; animation-duration: 41s, 15s; }
.shard--b { animation-delay: -19s, -7s; width: 148px; right: 3%;  top: 8%;   opacity: .34; animation-duration: 55s, 17s; }
.shard--c { animation-delay: -11s, -5s; width: 88px;  left: 46%;  top: 24%;  opacity: .5;  animation-duration: 33s, 11s; }
.shard--d { animation-delay: -27s, -9s; width: 120px; left: 2%;   bottom: 12%; opacity: .3; animation-duration: 47s, 19s; }

/* A spinning splinter sweeps a box the size of its diagonal, so the
   hosts have to clip or the page grows a horizontal scrollbar.
   `clip` rather than `hidden`: it does not create a scroll container. */
.split, .pillars, .statement, .roster {
  position: relative;
  overflow: hidden;
  overflow: clip;
}

/* ---- the shard field behind the offline band ---- */
.offline { position: relative; overflow: hidden; }

.offline__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.shard--x1 { animation-delay: -33s,-12s; width: 190px; left: 8%;  top: 16%; opacity: .30; animation-duration: 61s, 21s; }
.shard--x2 { animation-delay: -8s, -3s; width: 128px; right: 11%; top: 22%; opacity: .38; animation-duration: 44s, 16s; }
.shard--x3 { animation-delay: -22s, -6s; width: 96px;  right: 22%; bottom: 14%; opacity: .26; animation-duration: 52s, 13s; }
.shard--x4 { animation-delay: -41s,-15s; width: 150px; left: 17%;  bottom: 10%; opacity: .22; animation-duration: 68s, 24s; }

.offline__inner { position: relative; z-index: 1; }

/* ============================================================
   REVEAL
   ============================================================ */
/* Elements crossing in on one tick form a wave: --ri is their step
   in it, --rs is how wide the beat is for that section. */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--ri, 0) * var(--rs, 90ms));
}
[data-reveal].is-in { opacity: 1; transform: none; }

.ledger    { --rs: 130ms; }
.pillars   { --rs: 110ms; }
.roster    { --rs: 110ms; }
.funnel    { --rs: 100ms; }
.why, .offline, .apply { --rs: 90ms; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 861px) {
  .drawer { display: none; }
}

@media (max-width: 1080px) {
  .roster__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .card--offset { margin-top: 0; }
  .index__row { grid-template-columns: 64px minmax(0, 240px) minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 860px) {
  .nav__links, .nav__cta { display: none; }
  .burger { display: block; }

  /* On a phone there is no room to sit the sculpture behind the
     type, so it becomes its own block under the copy. Flex order
     does the reordering; the canvas stays first in the DOM. */
  /* On a phone there is no room to sit the sculpture behind the
     type, so it becomes its own block under the copy. Flex order
     does the reordering; the canvas stays first in the DOM. */
  .hero { min-height: auto; padding-top: 40px; }
  .hero__inner { order: 1; padding-bottom: 32px; }
  .hero__art   { order: 2; }
  .hero__slate { order: 3; }

  .hero__art {
    position: relative;
    inset: auto;
    z-index: auto;          /* in flow now, so it must not sit behind the page */
    width: 100%;
    height: clamp(280px, 52vw, 400px);
    margin-bottom: 24px;
  }
  .hero__title { max-width: none; }

  .split__grid,
  .statement__grid,
  .funnel__grid { grid-template-columns: minmax(0, 1fr); }
  .split__grid--rev { display: flex; flex-direction: column-reverse; }
  .frame::before { inset: -8px -8px 8px 8px; }

  /* One column leaves no clear air beside a headline that now runs
     the full width, so the three inline marks move up into the band
     above it. Sized so each one lands inside that padding and clears
     the first line rather than tagging over it. */
  .scrawl--heart { --sw: 60px; --sx: 70%; --sy: -92px; }
  .scrawl--smile { --sw: 64px; --sx: 68%; --sy: -86px; }
  .scrawl--spark { --sw: 68px; --sx: 66%; --sy: -90px; }

  /* The portrait stops being a backdrop the copy overruns and
     becomes the block it is written on: clipped to the intro so it
     never bleeds under the funnel stages. */
  .funnel__intro {
    overflow: hidden;
    padding-top: clamp(160px, 46vw, 220px);
  }
  .funnel__art { top: 0; width: 100%; }

  .index__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 24px 16px 24px 0;
  }
  .index__row:hover .index__t { transform: none; }
  .index__d { color: var(--ink-3); }

  .chrome-ring { top: 12%; right: -34%; width: 88vw; opacity: .28; }
  .stage { min-width: 0; width: max(var(--w), 68%); }

  .cols { grid-template-columns: minmax(0, 1fr); }
  .col { padding: 32px 0 8px; border-top: 1px solid var(--hair); }
  .col:first-child { border-top: 0; padding-top: 32px; }
  .col + .col { padding-left: 0; }
  .col + .col::before { display: none; }

  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .ledger__row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .roster__grid { grid-template-columns: minmax(0, 1fr); }
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__slate { gap: 24px; font-size: 10px; }
  .hero__scroll { display: none; }
  .hero__actions { gap: 16px; }
  .btn--solid { width: 100%; }
  .btn--slab { font-size: 11px; letter-spacing: .12em; padding: 24px 16px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .is-split .w__i,
  .hero__lead,
  .hero__actions,
  .hero__slate,
  .drawer a { opacity: 1; transform: none; }
  [data-reveal] { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
  .shard { animation: none; opacity: .3; }
}

/* Shards are decoration and they cost compositing on a phone. */
@media (max-width: 860px) {
  .shard--b, .shard--c { display: none; }
  .shard--a { width: 64px; top: 4%; right: 4%; }
  .shard--d { width: 72px; bottom: 4%; }
  .shard--x1, .shard--x4 { display: none; }
  .shard--x2 { width: 88px; }
  .shard--x3 { width: 68px; }
}