/* ========================================================================
   good news viral — v3
   white ground · figtree 800 sentence-case display · the original gnv rainbow
   (blue → green → yellow → red) as the accent · work shown as tilted collages
   ======================================================================== */

@font-face {
  font-family: 'Figtree';
  src: url('../assets/fonts/figtree-var.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts/jetbrainsmono-var.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --surface: #f3f3f5;
  --ink: #0a0a0a;
  --ink-70: rgba(10, 10, 10, 0.72);
  --ink-50: rgba(10, 10, 10, 0.52);
  --ink-34: rgba(10, 10, 10, 0.36);
  --ink-16: rgba(10, 10, 10, 0.14);
  --ink-08: rgba(10, 10, 10, 0.08);
  --ink-04: rgba(10, 10, 10, 0.045);

  /* the rainbow, sampled from the original gnv logo: blue → teal → green → yellow → orange → red */
  --s1: #3CAFF3;
  --s2: #13B1A7;
  --s3: #41E23D;
  --s4: #A9FD00;
  --s5: #FFF800;
  --s6: #FFCB00;
  --s7: #FF7700;
  --s8: #FF3A06;
  --spectrum: linear-gradient(90deg,
    var(--s1) 0%, var(--s2) 12%, var(--s3) 26%, var(--s4) 42%,
    var(--s5) 56%, var(--s6) 70%, var(--s7) 85%, var(--s8) 100%);

  /* patrick morley brand orange, from the mark */
  --pat-a: #FF7A1A;
  --pat-b: #F04E23;

  --sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);   /* ease in and out, for anything that moves and settles */
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --max: 1320px;
  --section-y: clamp(4.5rem, 9vw, 9rem);
  --r-tile: 28px;
  --r-tile-sm: 18px;
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.55;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--s1); outline-offset: 3px; border-radius: 4px; }
/* text can't be selected: holding the mouse down plays music notes instead (js/notes.js) */
html { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
img, video { -webkit-user-drag: none; }
::selection { background: transparent; }

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

/* ---------- type ---------- */

.display {
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 0.94;
  font-weight: 800;
  letter-spacing: -0.005em;
  max-width: 20ch;
  margin: 0;
}
.u-rainbow {
  background-image: var(--spectrum);
  background-repeat: no-repeat;
  background-size: 100% 0.14em;
  background-position: 0 92%;
  padding-bottom: 0.06em;
}
.h2 {
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}
.body-lg {
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  line-height: 1.5;
  color: var(--ink-70);
  text-wrap: pretty;
}
.num { font-variant-numeric: tabular-nums; }
.eyebrow {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-50);
}

/* ---------- spectrum rule ---------- */

.rule {
  height: 6px;
  width: 100%;
  background: var(--spectrum);
  border-radius: 99px;
  transform-origin: left center;
}

/* ---------- buttons ---------- */

.btn {
  --h: 3.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  height: var(--h);
  padding-inline: 1.75rem;
  border-radius: 99px;
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  white-space: nowrap;
  transition: transform .25s cubic-bezier(.2,.7,.3,1), color .25s ease, box-shadow .25s ease;
}
.btn:active { transform: scale(0.96); }

.btn--primary { background: var(--ink); color: #fff; overflow: hidden; }
.btn--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--spectrum);
  transform: translateY(101%);
  transition: transform .42s cubic-bezier(.2,.7,.3,1);
}
.btn--primary:hover::before { transform: translateY(0); }
.btn--primary:hover { color: var(--ink); }

.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink-16); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }

/* the rainbow button: the spectrum the other buttons show on hover, held still. hover slides the ink up over it and the words go white. */
.btn--rainbow {
  color: var(--ink);
  overflow: hidden;
  background: var(--spectrum);
  box-shadow: 0 14px 30px -18px rgba(10, 10, 10, 0.45);
}
.btn--rainbow::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform .42s cubic-bezier(.2,.7,.3,1);
}
.btn--rainbow:hover::before { transform: translateY(0); }
.btn--rainbow:hover { color: #fff; }

.btn--sm { --h: 2.75rem; padding-inline: 1.25rem; font-size: 0.9375rem; }

.btn .ico { flex: none; }
.btn .arw { transition: transform .25s cubic-bezier(.2,.7,.3,1); }
.btn:hover .arw { transform: translateX(3px); }

/* ---------- nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: 0.875rem;
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, padding .35s ease, filter .6s ease;
}
.nav.is-stuck {
  background: rgba(255, 255, 255, 0.94);   /* no backdrop blur: it costs a gpu pass on every scrolled frame */
  padding-block: 0.75rem;
}
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.nav__logo img { height: 64px; width: auto; transition: height .35s ease; }
.nav.is-stuck .nav__logo img { height: 48px; }
@media (max-width: 560px) { .nav__logo img { height: 52px; } .nav.is-stuck .nav__logo img { height: 42px; } }

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;                       /* a full screen: the logo bar starts just below the fold */
  display: flex;
  align-items: center;
  padding-top: clamp(8rem, 16vh, 11rem);    /* generous air between the header and the headline */
  padding-bottom: 2rem;
  overflow: hidden;
}
.hero__in { position: relative; z-index: 1; width: 100%; }
/* the spectrum ribbons, drawn by js/ribbons.js; they sit under the copy and come up to full colour on the right */
.hero__ribbons { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

.hero__kicker {
  margin: 0 0 1.25rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--ink-50);
}

/* headline: lines rise out of a mask, nothing else */
.js .display[data-split] { visibility: hidden; }
.js .display[data-split].is-split { visibility: visible; }
.display .line-mask { overflow: hidden; padding-block: 0.08em; margin-block: -0.08em; }

.hero__lede { max-width: 42ch; margin: 1.5rem 0 0; }
.hero__lede p { margin: 0; text-wrap: balance; }   /* both lines of each paragraph come out about the same length */
.hero__lede p + p { margin-top: 0.65em; }
@media (min-width: 900px) { .hero__lede { max-width: 66ch; } }
.hero__rule { margin: clamp(1.75rem, 3vw, 2.5rem) 0; max-width: 42rem; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.875rem 1rem; margin-top: 1.875rem; }
.js [data-intro] { opacity: 0; }

/* ---------- revolver: the gnvc globe + one rotating proof line ---------- */

.revolver { display: flex; align-items: center; gap: 1.25rem; min-height: 3.2em; max-width: 44rem; }
.revolver__globe { flex: none; width: clamp(56px, 6vw, 76px); height: auto; }
/* hover: spins twice and eases to a stop, same as the footer globe */
.revolver__globe.is-spinning { animation: globe-spin 2.2s cubic-bezier(0.16, 0.84, 0.3, 1) both; }
.revolver__stack { position: relative; flex: 1; min-width: 0; }
.revolver__line {
  margin: 0;
  font-size: clamp(1.125rem, 2.1vw, 1.625rem);
  line-height: 1.32;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.revolver__line:not(:first-child) { position: absolute; inset: 0; }
.revolver__line em {
  font-style: normal;
  display: inline-block;
  background: var(--spectrum);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- marquees ---------- */

.clients { padding-block: clamp(0.75rem, 1.2vw, 1rem) clamp(2.75rem, 5.5vw, 4.5rem); border-bottom: 1px solid var(--ink-08); }
.clients__note {
  margin: 0 auto clamp(2.75rem, 5.5vw, 4.25rem);
  text-align: center;
  font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
  line-height: 1.5;
  color: var(--ink-50);
}
.marquee {
  --gap: clamp(2.75rem, 6vw, 5.5rem);
  position: relative;
  overflow: hidden;
}
/* the edges fade to the page colour with two overlays: cheaper than a mask, which would re-composite the row every frame */
.marquee::before, .marquee::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 9%;
  z-index: 1;
  pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--bg), rgba(255, 255, 255, 0)); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--bg), rgba(255, 255, 255, 0)); }
/* the track holds two identical groups; each group carries its own trailing gap
   so the track is exactly 2x one group and -50% lands on the same pixel.
   linear timing, gpu transform, no hover pause: one speed, no hiccups. */
.marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
  backface-visibility: hidden;
}
.js .marquee__track.is-paced { animation: slide var(--dur) linear infinite var(--dir, normal); }
.marquee + .marquee { margin-top: clamp(1.75rem, 3.5vw, 3rem); }
.marquee--reverse .marquee__track { --dir: reverse; }   /* the bottom row runs the other way */
.marquee__group {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding-right: var(--gap);
  flex: none;
}
@keyframes slide { to { transform: translate3d(-50%, 0, 0); } }
.marquee__track img {
  height: clamp(36px, 4vw, 52px);
  width: auto;
  max-width: 260px;
  object-fit: contain;
  opacity: 0.65;
  transition: opacity .3s ease;
  flex: none;
}
.marquee__track img[data-tall] { height: clamp(52px, 5.8vw, 78px); }
.marquee__track img[data-xl] { height: clamp(52px, 6vw, 76px); }
.marquee__track img:hover { opacity: 1; }

/* ---------- work ---------- */

.work { position: relative; padding-top: clamp(3.5rem, 7vw, 6.5rem); }
/* the sky starts inside the bottom of the section above and runs down over the trailer: white clouds on the white page
   become clouds on blue, so there is no seam between the two sections. the dunes lie underneath, from above the trailer's
   midline down under the grey band, and the sky fades out onto them across the trailer. js sets top, height and fade */
.work__sky {
  position: absolute;
  left: 0; right: 0;
  top: 40%; height: 40%;
  background: url('../assets/work/saul-sky.webp') center var(--lift, 0px) / 100% auto no-repeat; /* --lift: how far the box runs above the image, set by js */
  opacity: 0.92;
  pointer-events: none;
  will-change: transform;
  /* the bottom of the sky fades out over --fade px (set by js) onto the sand beneath it, so there is no white between the two */
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--fade, 300px)), rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - var(--fade, 300px)), rgba(0, 0, 0, 0) 100%);
}
.work__sky::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(160px, 22vw, 320px);
  background: linear-gradient(180deg, var(--bg) 0%, rgba(255, 255, 255, 0.7) 40%, rgba(255, 255, 255, 0) 100%);
}
.work__dunes {
  position: absolute;
  left: 0; right: 0;
  top: 60%; height: 40%;
  background: url('../assets/work/saul-dunes.webp') center top / cover no-repeat;
  opacity: 0.55;
  pointer-events: none;
  will-change: transform;
  /* the top edge hides under the solid part of the sky; a short feather makes sure of it */
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 80px);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 80px);
}
.work__head { position: relative; }
.work__head { margin-bottom: clamp(1.25rem, 3vw, 2.5rem); text-align: center; }
.work__head .h2 { margin-inline: auto; max-width: 22ch; line-height: 1.14; }

.scene {
  position: relative;
  display: grid;
  align-content: center;
  padding-block: clamp(1.75rem, 3.5vw, 3rem);
}
/* the grey eases in from the white over a short run, after the desert has already faded out above it */
.scene--band {
  background: linear-gradient(180deg, rgba(243, 243, 245, 0) 0, var(--surface) clamp(10rem, 16vw, 15rem));
  padding-top: clamp(5rem, 9vw, 8rem);
  padding-bottom: clamp(3.5rem, 6.5vw, 6rem);
}
.scene__in {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .scene__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .scene--flip .scene__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .scene--flip .scene__media { order: 2; }
}

/* media layer */
.scene__media { position: relative; }
.tile {
  position: relative;
  margin: 0;
  border-radius: var(--r-tile);
  overflow: hidden;
  background: var(--surface);               /* light, so the anti-aliased rounded edge never shows a dark sliver round the video */
  aspect-ratio: 16 / 9;
  isolation: isolate;
  cursor: pointer;
  box-shadow: 0 1px 0 var(--ink-08), 0 40px 80px -40px rgba(10, 10, 10, 0.45);
}
.tile video { width: 100%; height: 100%; object-fit: cover; display: block; background: transparent; transform: scale(1.01); }
.tile__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 99px;
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), opacity .3s ease;
}
.tile__play svg { margin-left: 3px; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.35)); }
.tile:hover .tile__play { transform: scale(1.08); }
.tile.is-playing .tile__play { opacity: 0; pointer-events: none; }

/* scrub bar: a thin line and a dot you can drag back and forth through the video */
.tile__bar {
  position: absolute;
  left: 1rem; right: 1rem; bottom: 0.75rem;
  height: 26px;
  display: flex;
  align-items: center;
  z-index: 2;
  opacity: 0;
  cursor: pointer;
  touch-action: none;
  transition: opacity .25s ease;
}
/* the bar only peeks for a moment when the cursor arrives, then hides until the cursor comes back; touch screens keep it */
.tile.is-active.is-peek .tile__bar { opacity: 1; }
@media (hover: none) { .tile.is-active .tile__bar { opacity: 1; } }
.tile__track { position: relative; width: 100%; height: 3px; border-radius: 99px; background: rgba(255, 255, 255, 0.38); }
.tile__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 99px; background: #fff; }
.tile__dot {
  position: absolute;
  top: 50%; left: 0;
  width: 13px; height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  transition: transform .15s ease;
}
.tile__bar:hover .tile__dot, .tile.is-scrubbing .tile__dot { transform: scale(1.4); }
.tile.is-scrubbing .tile__bar { opacity: 1; }
/* the time badge: the length of the clip on the poster, elapsed / length while it plays; it steps up when the scrub bar shows */
.tile__time {
  position: absolute;
  right: 1rem; bottom: 0.9rem;
  z-index: 2;
  padding: 0.45em 0.7em;
  border-radius: 99px;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  color: #fff;
  background: rgba(10, 10, 10, 0.55);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  transform: translate(var(--tx, 0), var(--ty, 0));
  transition: transform .25s ease;
}
.tile__time:empty { display: none; }
.tile.is-playing .tile__time { opacity: 0; transition: transform .25s ease, opacity .25s ease; }
.tile.is-active.is-peek .tile__time, .tile.is-scrubbing .tile__time { --ty: -1.6rem; opacity: 1; }
@media (hover: none) { .tile.is-active .tile__time { --ty: -1.6rem; opacity: 1; } }
/* the trailer has figures standing at both lower corners, so its badge sits bottom centre */
.saul__tile .tile__time { font-size: 0.875rem; right: auto; left: 50%; --tx: -50%; bottom: 1rem; }
.tile--vertical { aspect-ratio: 4 / 5; border-radius: 22px; }
.tile--vertical .tile__play { width: 3.75rem; height: 3.75rem; }

.photo {
  position: relative;
  margin: 0;
  border-radius: var(--r-tile-sm);
  overflow: hidden;
  background: var(--ink-04);
  outline: 1px solid var(--ink-08);
  outline-offset: -1px;
  box-shadow: 0 30px 60px -36px rgba(10, 10, 10, 0.5);
}
.photo img { width: 100%; height: 100%; object-fit: cover; }

/* collage boards: pieces are placed by hand on desktop, stacked on small screens */
.board { position: relative; }
.board > * { margin: 0; }
@media (min-width: 900px) { .board { margin-block: 2%; } }
[data-float] { --tilt: 0deg; transform: rotate(var(--tilt)); }

@media (min-width: 900px) {
  .board { aspect-ratio: 1.06; }
  .board > * { position: absolute; }

  /* every board shares one grid: two 45% columns on a 3% inset with a 4% gutter,
     phones in the top row, the second row sits one gutter below them. */
  .board__va { left: 3%; top: 0; width: 45%; --tilt: -6deg; z-index: 3; }
  .board__vb { left: 52%; top: 3%; width: 45%; --tilt: 6deg; z-index: 3; }

  /* patrick morley: the amazon card fills the left column, the book the right */
  .board--pat { aspect-ratio: 1 / 1.08; }
  .rank        { left: 3%; top: 63%; width: 45%; --tilt: -2deg; z-index: 4; }
  .book        { left: 58%; top: 62%; width: 29%; --tilt: 3deg; z-index: 2; }

  /* better man: slightly bigger phones, one large event photo centred beneath them */
  .board--bm { aspect-ratio: 1 / 1.11; }
  .board--bm .board__va { left: 0; width: 48%; top: 2%; }
  .board--bm .board__vb { left: 52%; width: 48%; top: 2%; }
  /* phones are 48% wide at 4:5, so they end 62.2% of the board's width down; the photo starts one 4% gutter below that */
  .board__photo { left: 11%; top: 59.7%; width: 78%; aspect-ratio: 16 / 9; --tilt: 0deg; z-index: 1; }
}
@media (max-width: 899px) {
  .board { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: dense; gap: 0.875rem; align-items: center; }
  .board > * { transform: none; }
  .board__photo { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .rank { grid-column: 1; }
  .book { grid-column: 2; width: 70%; justify-self: center; }
}

/* amazon rank card */
.rank {
  background: #fff;
  border-radius: 22px;
  padding: 1.25rem 1.35rem 1.3rem;
  box-shadow: 0 1px 0 var(--ink-08), 0 30px 60px -30px rgba(10, 10, 10, 0.45);
  outline: 1px solid var(--ink-08);
  outline-offset: -1px;
  display: grid;
  gap: 0.45rem;
}
.rank__top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.rank__amazon { width: 64%; height: auto; }
.rank__arrow { width: 2.75rem; height: 2.75rem; flex: none; filter: drop-shadow(0 4px 10px rgba(23, 179, 91, 0.35)); }
.rank__row { display: flex; align-items: center; gap: 1.1rem; line-height: 1.1; margin-top: 0.35rem; }
.rank__num { font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.rank__row span { font-size: 1.2rem; font-weight: 700; color: var(--ink-70); }

/* the book cover, flat */
.book img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  filter: brightness(1.08) contrast(1.02);
  box-shadow: 0 1px 0 var(--ink-16), 0 30px 60px -28px rgba(10, 10, 10, 0.55);
  outline: 1px solid var(--ink-08);
  outline-offset: -1px;
}

/* type layer */
.scene__text { display: grid; gap: 1rem; }
.scene__brand { height: clamp(34px, 3.4vw, 42px); width: auto; margin-bottom: 0.25rem; }
.scene__brand--round { height: clamp(72px, 8vw, 104px); }
.scene__tag {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.scene__metric {
  font-size: clamp(2.75rem, 7vw, 6rem);
  line-height: 0.92;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0;
  background: var(--spectrum);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: fit-content;
  padding-inline-end: 0.1em;
  margin-inline-end: -0.1em;
  font-variant-numeric: tabular-nums;
}
.scene__sub { margin: 0; font-weight: 700; color: var(--ink); font-size: 1.0625rem; }
.scene__body { margin: 0; color: var(--ink-70); max-width: 44ch; text-wrap: pretty; }
.scene__stats {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--ink-16);
  display: grid;
  gap: 0.5rem;
}
.scene__stats li { display: flex; gap: 0.75rem; font-size: 0.9375rem; color: var(--ink-70); }
.scene__stats b {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  flex: none;
  min-width: 5.5rem;
  padding-top: 0.15em;
}
.scene__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 0.75rem; }

/* what-we-did chips: small outlined rectangles under the grey line, laid out as an even grid
   (four across for Pat's eight, three across for Better Man's six, two across on narrow screens) */
.scene__chips {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--ink-16);
  display: grid;
  gap: 0.625rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 1100px) {
  .scene__chips--4 { grid-template-columns: repeat(4, 1fr); }
  .scene__chips--3 { grid-template-columns: repeat(3, 1fr); }
}
.scene__chips li {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.5rem 0.5rem;
  border: 1px solid var(--ink-16);
  border-radius: 6px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--ink);
  text-wrap: balance;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.scene__chips li:hover { border-color: var(--ink-34); background: var(--ink-04); }

/* ---------- saul of tarsus: open on the white page. the count and the mark share a row, one grey line,
   the trailer runs wider than the copy, and two of the film's figures stand behind it ---------- */

.scene--saul { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5.5rem); overflow: hidden; }
.saul { position: relative; }
.saul__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 2.75rem);
}
.saul__count { display: grid; gap: 0.5rem; flex: none; }
/* the seven digits: spectrum text, tabular so the count never jitters */
.saul__num {
  margin: 0;
  font-size: clamp(3.4rem, 6vw, 5.4rem);
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -0.035em;
  background: var(--spectrum);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: fit-content;
  /* the spectrum paints only inside the box, and the tight tracking pushes the last zero past it: give it room without moving anything */
  padding-inline-end: 0.1em;
  margin-inline-end: -0.1em;
}
.saul__sub { margin: 0; font-weight: 700; font-size: clamp(1.125rem, 1.3vw, 1.1875rem); color: var(--ink); }
/* the separator: a vertical run of the spectrum, the full height of the row */
.saul__sep {
  flex: none;
  align-self: stretch;
  width: 4px;
  border-radius: 99px;
  background: var(--ink);
}
.saul__logo { width: clamp(200px, 26vw, 390px); height: auto; flex: none; }
/* two lines on desktop, broken after the name; balanced wrapping on phones so a word is never left hanging */
.saul__line {
  margin: clamp(1.25rem, 2.5vw, 2rem) auto 0;
  text-align: center;
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  line-height: 1.45;
  font-style: italic;
  color: var(--ink-50);
  text-wrap: balance;
}
@media (max-width: 899px) { .saul__br { display: none; } .saul__line { max-width: 34rem; } }
.saul__hours { font-style: inherit; font-weight: 600; background-size: 100% 0.12em; background-position: 0 100%; padding-bottom: 0.08em; }
/* the stage: the trailer sits centred, wider than the copy but short of the wrap's edges. the shield soldier stands
   big at the lower left and saul at the lower right, both in front of the frame's edges with their feet on its bottom
   line; the sword soldier is small, behind the frame, looking over the top right corner */
.saul__stage { position: relative; z-index: 2; margin-top: clamp(2rem, 4vw, 3.25rem); }
.saul__tile { position: relative; z-index: 1; width: 84%; margin-inline: auto; transition: transform .75s var(--ease-io), box-shadow .75s var(--ease-io); }
.saul__tile .tile__play { width: 5rem; height: 5rem; }
/* the figures: the wrapper is placed and parallaxed by js, the image inside carries the tilt and the swipe */
.saul__fig { position: absolute; pointer-events: none; will-change: transform; }
.saul__fig img { display: block; width: 100%; height: auto; transition: transform .75s var(--ease-io), opacity .6s ease; }
.saul__fig--l { left: -8%; bottom: -10%; width: 36%; z-index: 2; }
.saul__fig--r { right: -6%; bottom: -10%; width: 28.5%; z-index: 2; }   /* same figure height as the shield soldier */
.saul__fig--t { right: 8%; top: -24%; width: 15%; z-index: 0; }
.saul__fig--l img { transform: rotate(-3deg); }
.saul__fig--t img { transform: rotate(6deg); }

/* theater: while the trailer plays, the figures swipe off, the trailer grows a quarter and the rest of the site blurs.
   pausing undoes all of it. every move eases in and out. */
.is-theater .saul__tile { transform: scale(1.25); box-shadow: 0 1px 0 var(--ink-08), 0 60px 120px -40px rgba(10, 10, 10, 0.55); }
.is-theater .saul__fig--r img { transform: translateX(130%) rotate(12deg); opacity: 0; }
.is-theater .saul__fig--l img { transform: translateX(-130%) rotate(-12deg); opacity: 0; }
.is-theater .saul__fig--t img { transform: translate(90%, -60%) rotate(18deg); opacity: 0; }
.hero, .clients, .work__head, .work__sky, .work__dunes, .scene, .services, .cta, .footer, .saul__head, .saul__line, .saul__quote { transition: filter .6s ease; }
.is-theater :is(.nav, .hero, .clients, .work__head, .work__sky, .work__dunes, .scene:not(.scene--saul), .services, .cta, .footer, .saul__head, .saul__line, .saul__quote) { filter: blur(10px); }
/* the quote, centred; the credit hangs under the last word, starting about halfway through "quality" */
.saul__quote { --q: clamp(1.6rem, 2.9vw, 2.75rem); margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 0; text-align: center; }
.saul__quote-in { display: inline-block; text-align: center; }
.saul__quote p { margin: 0; font-weight: 800; font-size: var(--q); line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.saul__quote cite { display: block; margin-top: 0.5rem; padding-left: calc(100% - var(--q) * 8); text-align: left; white-space: nowrap; font-style: italic; font-size: clamp(1.0625rem, 1.4vw, 1.375rem); color: var(--ink-50); }
.saul__quote cite em { font-style: normal; }
.saul__quote cite em { font-style: italic; }
@media (max-width: 1100px) {
  .saul__tile { width: 90%; }
  .saul__fig--l { left: -6%; width: 32%; }
  .saul__fig--r { right: -4%; width: 30%; }
  .saul__fig--t { right: 2%; top: -22%; width: 17%; }
  .is-theater .saul__tile { transform: scale(1.1); }
}
@media (max-width: 899px) {
  .work__sky { background-size: cover; }
  .saul__head { flex-wrap: wrap; gap: 1.25rem 0; justify-content: center; text-align: center; }
  .saul__count { justify-items: center; }
  .saul__sep { width: 100%; height: 4px; align-self: auto; max-width: 16rem; }
  .saul__logo { width: min(72%, 340px); }
  .saul__stage { margin-top: 4rem; }                        /* room for the soldier looking over the top edge */
  .saul__tile { width: 94%; }
  /* the shield soldier's head centre sits on the video's left edge, paul's on its right edge; same bottom so their feet share one line */
  .saul__fig--l { left: -7%; bottom: -9%; width: 27%; }
  .saul__fig--r { right: -7%; bottom: -9%; width: 21%; }
  .saul__fig--t { right: 7%; top: -31%; width: 21%; }
  .is-theater .saul__tile { transform: scale(1.04); }
  .saul__quote cite { padding-left: 0; text-align: center; white-space: normal; }
}

/* ---------- services ---------- */

.services { padding-block: clamp(3.5rem, 7vw, 6.5rem); text-align: center; overflow: hidden; }
.services .eyebrow { margin: 0 auto 0.75rem; }
.marquee--words { --gap: clamp(1.5rem, 3vw, 2.75rem); padding-block: 0.25em; }
.word {
  font-size: clamp(2.5rem, 6.5vw, 5.5rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--ink);
}
.word__dot { width: 0.3em; height: 0.3em; font-size: clamp(2.5rem, 6.5vw, 5.5rem); border-radius: 99px; background: var(--spectrum); flex: none; }

/* ---------- final cta ---------- */

/* generous padding: the sayings need room around the headline; more on top than below so the copy sits at the ring's visual centre */
.cta { position: relative; padding-block: clamp(8.5rem, 19.5vw, 17.5rem); border-top: 1px solid var(--ink-08); overflow: hidden; }
.cta__in { position: relative; z-index: 1; text-align: center; }
/* the collage: the things people say when they first call us, on small tilted cards around a wide clear centre */
.cta__art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cta__art::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 64% at 50% 50%, var(--bg) 48%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, var(--bg) 0%, rgba(255, 255, 255, 0) 7%, rgba(255, 255, 255, 0) 93%, var(--bg) 100%);
}
/* each mark: the wrapper is placed and drifted (its own compositor layer), the halo is a white
   radial gradient behind it, and the logo inside carries the tilt */
.cta__mark {
  position: absolute;
  left: var(--l);
  top: var(--t);
  width: var(--w);
  z-index: 1;               /* above the centre fade, so the cards stay crisp */
  will-change: transform;
}
.cta__mark::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 136%; height: 170%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, #fff 0%, rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}
.cta__piece {
  position: relative;
  display: block;
  width: 100%;
  transform: rotate(var(--r));
}
/* the glory: dozens of golden rays from the centre, running past the logos and fading out. drawn once per size. */
.cta__glory { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* a saying: a small white card, a spectrum-coloured opening quote, the words in the visitor's own voice */
.cta__piece--say {
  padding: 0.7em 0.95em 0.75em;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 0 var(--ink-08), 0 18px 40px -24px rgba(10, 10, 10, 0.35);
  outline: 1px solid var(--ink-08);
  outline-offset: -1px;
  font-size: clamp(0.85rem, 1.1vw, 1.125rem);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink-70);
  text-wrap: pretty;
}
.cta__piece--say::before {
  content: '\201C';
  color: var(--c);
  font-size: 1.7em;
  line-height: 0;
  vertical-align: -0.3em;
  margin-right: 0.08em;
  font-weight: 800;
}
/* the cards would sit on top of the headline on a phone, so the collage is desktop only */
@media (max-width: 759px) { .cta__mark { display: none; } }
.cta__rule { height: 8px; max-width: 16rem; margin: 0 auto 2.5rem; }
.cta__h { font-size: clamp(2.6rem, 6.2vw, 5.4rem); line-height: 0.96; max-width: 14ch; margin-inline: auto; }
.cta__actions { margin-top: 2.75rem; display: flex; justify-content: center; }
/* larger version, kept to revert: .cta__actions .btn { --h: 4rem; font-size: 1.1875rem; padding-inline: 2.25rem; } */
.cta__promise { margin: 1.75rem auto 0; font-size: 1.125rem; line-height: 1.6; color: var(--ink-70); font-style: italic; text-wrap: balance; }

/* ---------- footer ---------- */

.footer { padding-block: clamp(1.25rem, 2.5vw, 2rem); border-top: 1px solid var(--ink-08); }
.footer__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.25rem 1.75rem; }
.footer__globe { justify-self: start; }
.footer__meta { justify-self: end; }
/* the easter egg: the old gnvc globe, in the footer's grey, bottom left */
.footer__globe { display: block; width: 40px; }
.footer__globe img { width: 100%; height: auto; }
/* hover: two full turns that start quick and glide to a stop; js adds the class so the spin finishes even if the cursor leaves */
.footer__globe.is-spinning img { animation: globe-spin 2.2s cubic-bezier(0.16, 0.84, 0.3, 1) both; }
@keyframes globe-spin { to { transform: rotate(720deg); } }
.footer__meta { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--ink-50); }

/* ---------- sticky mobile cta ---------- */

.dock {
  position: fixed;
  z-index: 90;
  left: 0; right: 0; bottom: 0;
  padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid var(--ink-08);
  transform: translateY(110%);
  transition: transform .4s cubic-bezier(.2,.7,.3,1);
}
.dock.is-up { transform: translateY(0); }
.dock .btn { width: 100%; }
@media (min-width: 760px) { .dock { display: none; } }

/* ---------- reveal + reduced motion ---------- */

.js [data-reveal] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal], .js [data-intro] { opacity: 1 !important; transform: none !important; }
  .js .display[data-split] { visibility: visible; }
  .marquee__track { animation: none; }
  .cta__mark { transform: none !important; }
  /* no revolver without motion: show the first proof line only */
  .revolver__line:not(:first-child) { display: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- hero: who it's for, and the founders photo ---------- */

.hero__who { margin: clamp(1.25rem, 2.5vw, 2rem) 0 0; font-weight: 700; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); color: var(--ink); }
.hero__cta { margin-top: 1.25rem; }
.hero__team { margin: clamp(2.25rem, 4.5vw, 3.5rem) 0 0; max-width: 56rem; }
.hero__team-ph {
  position: relative;
  aspect-ratio: 12 / 5;
  border-radius: var(--r-tile);
  background: var(--surface);
  border: 1.5px dashed var(--ink-16);
  overflow: hidden;
}
.hero__team-ph svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__team-img { display: block; width: 100%; aspect-ratio: 12 / 5; object-fit: cover; border-radius: var(--r-tile); }
.hero__team-tag {
  position: absolute; top: 1rem; left: 1rem;
  padding: 0.35rem 0.7rem; border-radius: 99px;
  background: #fff; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-50);
}
.hero__team-cap { margin: 0.875rem 0 0 0.25rem; font-weight: 700; font-size: 1rem; color: var(--ink); }
@media (max-width: 560px) { .hero__team-ph { aspect-ratio: 4 / 3; } }

/* ---------- faq ---------- */

.faq { padding-block: clamp(3.5rem, 7vw, 6.5rem); background: var(--surface); }
.faq__in { max-width: 52rem; }
.faq__in > .h2 { text-align: center; }
.faq__list { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); border-top: 1px solid var(--ink-16); }
.faq__item { border-bottom: 1px solid var(--ink-16); }
.faq__q {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.625rem 0; font-weight: 700; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); color: var(--ink);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__plus { flex: none; position: relative; width: 1.25rem; height: 1.25rem; }
.faq__plus::before, .faq__plus::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--ink); border-radius: 99px; transition: transform .3s var(--ease-io); }
.faq__plus::before { width: 100%; height: 2px; }
.faq__plus::after { width: 2px; height: 100%; }
.faq__item[open] .faq__plus::after { transform: rotate(90deg); }
.faq__a { padding: 0 3rem 1.75rem 0; color: var(--ink-70); }
.faq__a p { margin: 0; max-width: 60ch; }

/* ---------- footer additions ---------- */

.footer__place { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--ink-70); }
.footer__pin { color: var(--s8); flex: none; }
.footer__links { display: flex; gap: 0.5rem; }
.footer__links .btn--sm { --h: 2.25rem; padding-inline: 1rem; font-size: 0.8125rem; }

/* the hidden attribute always wins, even over .btn and other display rules */
[hidden] { display: none !important; }

/* ---------- hero: everything centred ---------- */
.hero__in { text-align: center; }
.hero .display { margin-inline: auto; }
.hero__rule { margin-inline: auto; }
.revolver { margin-inline: auto; justify-content: center; }
.revolver__stack { text-align: left; }
.hero__cta { justify-content: center; }
.hero__team { margin-inline: auto; }
.hero__team-cap { margin-left: 0; text-align: center; }

/* ---------- clients: the line is a pull quote now ---------- */
.clients__quote { position: relative; margin: 0 auto clamp(2.75rem, 5.5vw, 4.25rem); padding-top: 0.5rem; text-align: center; }
.clients__quote p { margin: 0 auto; max-width: 26ch; font-weight: 800; font-size: clamp(1.375rem, 2.4vw, 2.125rem); line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
.clients__mark { display: block; width: fit-content; margin: 0 auto -0.15em; font-family: Georgia, "Times New Roman", serif; font-size: clamp(4rem, 7vw, 6.5rem); line-height: 1; font-weight: 700; background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- footer contact: globe | orlando with email + phone under it, centred | buttons | copyright ---------- */
.footer__mid { justify-self: center; display: grid; justify-items: center; gap: 0.3rem; text-align: center; }
.footer__reach { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 600; color: var(--ink-50); }
.footer__reach a { color: var(--ink-70); text-decoration: none; }
.footer__reach a:hover { color: var(--ink); }
.footer__dot { color: var(--ink-34); }
@media (max-width: 899px) {
  .footer__in { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 1rem; }
  .footer__globe, .footer__meta { justify-self: center; }
}

/* ---------- ad tiles as phones: dark bezel, island, the ad letterboxed on the screen ---------- */
.tile--vertical {
  aspect-ratio: 9 / 16;
  border-radius: clamp(26px, 3.4vw, 44px);
  background: #0a0a0a;
  padding: clamp(7px, 0.85vw, 11px);
  box-shadow: 0 1px 0 var(--ink-08), 0 40px 80px -40px rgba(10, 10, 10, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.tile--vertical video { border-radius: clamp(18px, 2.4vw, 32px); object-fit: contain; background: #000; transform: none; }
.tile--vertical::before {           /* the island */
  content: ""; position: absolute; left: 50%; top: clamp(16px, 2vw, 26px); transform: translateX(-50%);
  width: 26%; height: clamp(14px, 1.7vw, 22px); border-radius: 99px; background: #0a0a0a; z-index: 2; pointer-events: none;
}
@media (min-width: 900px) {
  /* 9:16 phones with a 4% gutter between them; the second row sits exactly one gutter below the lower phone.
     note: top is a % of the board's height, so every value here is tied to the aspect-ratio beside it */
  .board__va { left: 4.5%; width: 43%; top: 0; }
  .board__vb { left: 52.5%; width: 43%; top: 2%; }
  .board--pat { aspect-ratio: 1 / 1.37; }
  .rank { top: 63.5%; }
  .book { top: 63.5%; }
  .board--bm .board__va { left: 4.5%; width: 43%; top: 0; }
  .board--bm .board__vb { left: 52.5%; width: 43%; top: 0; }
  .board--bm { aspect-ratio: 1 / 1.32; }
  .board__photo { top: 61.5%; }
}

/* ---------- kickers: one spacing everywhere, matched to "original film" over the saul count ---------- */
.eyebrow + .h2, .eyebrow + .display { margin-top: 0.75rem; }


/* ---------- hero: more air under the header, about one headline's height ---------- */
.hero { padding-top: calc(clamp(8rem, 16vh, 11rem) + 1.9 * clamp(2.5rem, 6vw, 5rem)); }

/* ---------- phones (< 900px) ---------- */
.br-m { display: none; }
@media (max-width: 599px) { .br-m { display: inline; } }      /* line breaks that only exist on small screens */
@media (max-width: 599px) { .hide-m { display: none; } }      /* words that only exist on larger screens */

@media (max-width: 899px) {
  /* the ad phones stack, one above the other, and get big */
  .board__va, .board__vb { grid-column: 1 / -1; width: min(82%, 380px); justify-self: center; }
  /* better man: the story (kicker, logo, 48,000, copy, badges) comes before the phones and the photo */
  .scene--flip .scene__text { order: -1; }
  /* a little more air between the lower phone and the event photo (the grid gap is 0.875rem = 14px; this adds 12px) */
  .board--bm .board__photo { margin-top: 0.75rem; }
}
@media (max-width: 759px) {
  /* the sticky "book" bar sits over the bottom of the page: give the footer room beneath it */
  .footer { padding-bottom: calc(clamp(1.25rem, 2.5vw, 2rem) + 5.75rem + env(safe-area-inset-bottom)); }
}

@media (max-width: 899px) {
  /* pat on phones: the book and the amazon badge become one piece, the badge tucked behind the book's right edge */
  .rank, .book { grid-column: 1 / -1; grid-row: 3; }
  .book { width: 41.4%; justify-self: start; margin-left: 3%; z-index: 2; transform: rotate(4deg); margin-top: 1.5rem; }
  .rank { width: 68%; justify-self: end; align-self: center; z-index: 1; padding-left: calc(14% + 1.2rem); padding-right: 1.1rem; margin-top: 1.5rem; }
  .rank__top { gap: 0.5rem; }
  .rank__arrow { width: 2.5rem; height: 2.5rem; translate: -0.4rem 0.3rem; }
  .rank__row { flex-direction: column; align-items: flex-start; gap: 0.1rem; margin-top: 0.2rem; }
  .rank__row span { font-size: 0.95rem; white-space: nowrap; }
  .rank__num { font-size: 2.1rem; line-height: 1; }
  /* more air between the tilted book's bottom corner and the "book launch ads" kicker below it */
  #patrick-morley .scene__text { margin-top: 1.25rem; }
  /* footer: the sentence centred, the pin hanging off its left */
  .footer__place { position: relative; display: block; padding-left: 1.5rem; text-align: center; }
  .footer__pin { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
}