/* LUNYLABS — motion ads landing page
   One family (Archivo, variable width + weight). Black on studio grey.
   The work brings the colour; the page only borrows it. */

:root {
  --paper: #ECEDEE;
  --ink: #000;
  --graphite: #54575C;
  --line: rgba(0, 0, 0, .14);
  --pad: clamp(16px, 2.8vw, 40px);
  --ease: cubic-bezier(.2, .7, 0, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --spring: cubic-bezier(.22, 1.32, .36, 1);
  --r: clamp(12px, 1.25vw, 18px);
  --head: 72px;
  color-scheme: light;
}

@font-face { font-family: "Archivo Fallback"; src: local("Arial"); size-adjust: 102%; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.5 "Archivo", "Archivo Fallback", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
::selection { background: var(--ink); color: var(--paper); }
img, video { display: block; max-width: 100%; }
h1, h2, h3, p, figure, blockquote, ol { margin: 0; padding: 0; }
p { text-wrap: pretty; }
h2, h3 { text-wrap: balance; }
ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: fixed; left: var(--pad); top: 12px; z-index: 50;
  padding: 10px 16px; background: var(--ink); color: var(--paper); border-radius: 999px;
  transform: translateY(-160%); transition: transform .4s var(--ease);
}
.skip:focus { transform: none; }

/* Display type: the width axis is part of the motion vocabulary */
.hero, .v-title, .p-title, .b-title, .word {
  font-weight: 800;
  font-variation-settings: "wdth" 112, "wght" 800;
  letter-spacing: -.035em;
  line-height: .9;
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 20px;
  border-radius: 999px;
  font-size: 15px; font-weight: 600; letter-spacing: -.005em;
  overflow: hidden;
  white-space: nowrap;
  will-change: transform;
}
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-lg { height: 56px; padding: 0 28px; font-size: 17px; }
/* Hover: the label rolls north and its twin arrives from below */
.roll { display: inline-block; text-shadow: 0 2em 0 currentColor; transition: transform .55s var(--ease); }
@media (hover: hover) {
  .btn:hover .roll { transform: translateY(-2em); }
}

/* ---------- Header ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  height: var(--head);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad);
  transition: transform .6s var(--ease), opacity .6s var(--ease);
  pointer-events: none;
}
.top > * { pointer-events: auto; }
.top.is-hidden { transform: translateY(-100%); }
.mark {
  display: inline-flex; align-items: baseline; gap: 12px;
  font-size: 15px; font-weight: 800;
  font-variation-settings: "wdth" 125, "wght" 800;
  letter-spacing: .02em;
}
.mark-sub {
  font-size: 13px; font-weight: 500;
  font-variation-settings: "wdth" 100, "wght" 500;
  letter-spacing: 0;
  color: var(--graphite);
}
@media (max-width: 420px) { .mark-sub { display: none; } }

/* ---------- Cursor ---------- */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 40;
  pointer-events: none;
  display: none;
}
.cursor span {
  display: block;
  translate: -50% -50%;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-size: 13px; font-weight: 600; white-space: nowrap;
  scale: 0; opacity: 0;
  transition: scale .45s var(--ease), opacity .3s;
}
.cursor.is-on span { scale: 1; opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .cursor { display: block; }
  [data-cursor-target] { cursor: none; }
}

/* =========================================================
   FEED — scrolling swipes the ads north, like a feed
   ========================================================= */
.feed {
  --n: 4;
  --unit: 64svh;
  position: relative;
  height: calc(100svh + (var(--n) - 1 + .6) * var(--unit));
}
.feed-pin {
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
}
.feed-window {
  position: absolute;
  left: 50%; top: var(--cy);
  width: var(--cw); height: var(--ch);
  translate: -50% -50%;
  border-radius: var(--r);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 40px 80px -40px rgba(0, 0, 0, .45);
}
.feed-cards { position: absolute; inset: 0; border-radius: var(--r); overflow: hidden; isolation: isolate; background: #0d0d0f; }
.ad {
  position: absolute; inset: 0;
  border-radius: var(--r);
  overflow: hidden;
  background: #1b1c1f;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.ad video { width: 100%; height: 100%; object-fit: cover; }

.feed-meta {
  position: absolute;
  left: 50%; top: calc(var(--cy) + var(--ch) / 2 + 14px);
  width: var(--cw);
  translate: -50% 0;
}
.segs { display: flex; gap: 6px; }
.seg { flex: 1; height: 16px; display: flex; align-items: center; }
.seg i {
  position: relative; display: block; width: 100%; height: 2px;
  background: var(--line); border-radius: 2px; overflow: hidden;
}
.seg i::after {
  content: ""; position: absolute; inset: 0;
  background: var(--ink);
  transform-origin: 0 50%;
  transform: scaleX(var(--f, 0));
}
.captions { position: relative; height: 1.5em; margin-top: 6px; overflow: hidden; font-size: 15px; }
.cap {
  position: absolute; inset: 0;
  display: flex; gap: .45em; justify-content: center;
  color: var(--graphite);
  white-space: nowrap;
  transform: translateY(110%);
  transition: transform .7s var(--ease);
}
.cap b { color: var(--ink); font-weight: 600; }
.cap { align-items: center; }

/* 3D work gets declared: a tag in the caption, and a callout while the 3D ad holds the feed */
.tag {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  height: clamp(30px, 2.6vw, 42px); padding: 0 .55em;
  border-radius: 8px;
  background: var(--ink); color: var(--paper);
  font-size: clamp(15px, 1.3vw, 20px); font-weight: 800;
  font-variation-settings: "wdth" 112, "wght" 800;
  letter-spacing: -.01em;
}
.tag-sm { height: 18px; padding: 0 6px; border-radius: 4px; font-size: 11px; margin-right: .1em; }
.feed-3d {
  position: absolute;
  display: flex; align-items: center; gap: 16px;
  font-size: clamp(16px, 1.35vw, 21px); line-height: 1.28; font-weight: 500;
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .8s var(--ease);
  pointer-events: none;
}
.feed-pin.is-3d .feed-3d { opacity: 1; transform: none; }
.feed-3d .short { display: none; }
.cap.is-past { transform: translateY(-110%); }
.cap.is-active { transform: none; }

.sound {
  display: inline-flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 16px 0 14px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 14px; font-weight: 600;
  transition: border-color .3s, background-color .3s;
}
.sound:hover { border-color: var(--ink); }
.sound-feed { position: absolute; }
.eq { display: flex; align-items: center; gap: 2px; height: 12px; }
.eq i { width: 2px; height: 3px; background: currentColor; border-radius: 1px; transition: height .3s var(--ease); }
.sound[aria-pressed="true"] .eq i { animation: eq .9s var(--ease-io) infinite alternate; }
.sound[aria-pressed="true"] .eq i:nth-child(2) { animation-delay: -.3s; }
.sound[aria-pressed="true"] .eq i:nth-child(3) { animation-delay: -.6s; }
.sound[aria-pressed="true"] .eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes eq { from { height: 3px; } to { height: 12px; } }
.sound-label { position: relative; display: block; height: 1.3em; line-height: 1.3em; overflow: hidden; }
.sound-label span { display: block; transition: transform .5s var(--ease); }
.sound[aria-pressed="true"] .sound-label span { transform: translateY(-100%); }

/* Hero type, flanking the card on wide screens */
.feed-intro { position: relative; z-index: 2; }
.hero-sub { display: flex; gap: clamp(20px, 2.4vw, 40px); }
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat b {
  font-size: clamp(22px, 2.1vw, 32px); font-weight: 700;
  font-variation-settings: "wdth" 100, "wght" 700;
  letter-spacing: -.025em; line-height: 1;
  white-space: nowrap;
}
.stat span { color: var(--graphite); font-size: 14px; line-height: 1.3; }
.ln { display: block; overflow: hidden; padding: .08em 0; margin: -.08em 0; }
.ln > span { display: inline-block; }

/* ---------- Wide layout ---------- */
@media (min-width: 860px) and (min-aspect-ratio: 1/1) {
  .feed {
    --ch: min(76svh, 860px);
    --cw: calc(var(--ch) * .5625);
    --cy: 47svh;
    --gap: clamp(20px, 2.6vw, 44px);
    --side: calc((100vw - var(--cw)) / 2 - var(--pad) - var(--gap));
  }
  .feed-intro {
    position: sticky; top: 0;
    height: 100svh;
    pointer-events: none;
  }
  .feed-intro > * { pointer-events: auto; }
  .feed-pin { margin-top: -100svh; }
  .hero { font-size: min(calc(var(--side) / 4.7), 150px); }
  .feed-3d { left: calc(50% + var(--cw) / 2 + var(--gap)); top: calc(var(--cy) + min(calc(var(--side) / 4.7), 150px) * .95 + 36px); }
  .hero-side { position: absolute; top: var(--cy); translate: 0 -50%; }
  .hero-l { right: calc(50% + var(--cw) / 2 + var(--gap)); text-align: right; }
  .hero-r { left: calc(50% + var(--cw) / 2 + var(--gap)); }
  .hero-sub, .sound-feed { position: absolute; top: calc(var(--cy) + var(--ch) / 2); translate: 0 -100%; }
  .hero-sub { left: var(--pad); max-width: calc(var(--side) - 12px); }
  .sound-feed { right: var(--pad); }

  /* Intro: the words slide out from behind the ad and stretch into place */
  .js .hero-l .ln > span { transform: translateX(105%); }
  .js .hero-r .ln > span { transform: translateX(-105%); }
  .js .hero .ln > span {
    font-variation-settings: "wdth" 62, "wght" 800;
    transition: transform 1.25s var(--ease), font-variation-settings 1.5s var(--ease);
  }
  .js .hero .ln:nth-child(2) > span { transition-delay: .08s; }
  .is-in .hero .ln > span { transform: none; font-variation-settings: "wdth" 112, "wght" 800; }
}

/* ---------- Narrow layout ---------- */
@media not all and (min-width: 860px) and (min-aspect-ratio: 1/1) {
  .feed {
    --ch: min(calc(100svh - 176px), calc((100vw - 2 * var(--pad)) * 16 / 9));
    --cw: calc(var(--ch) * .5625);
    --cy: calc(50% - 22px);
    --unit: 58svh;
    height: auto;
  }
  /* scroll length for the pinned feed (a spacer, since sticky ignores padding) */
  .feed::after { content: ""; display: block; height: calc((var(--n) - 1 + .6) * var(--unit)); }
  .feed-intro { padding: calc(var(--head) + 4px) var(--pad) 0; }
  .hero { font-size: clamp(34px, 10.4vw, 72px); font-variation-settings: "wdth" 100, "wght" 800; }
  .hero-side { display: block; }
  .hero .ln { display: inline-block; vertical-align: top; }
  .hero-l .ln:first-child { margin-right: .24em; }
  .hero-r .ln:first-child { margin-right: .24em; }
  .hero-sub { margin-top: 20px; }
  .stat b { font-size: 24px; }
  .sound-feed { right: var(--pad); bottom: 18px; height: 36px; }
  .feed-meta { width: auto; left: var(--pad); right: calc(var(--pad) + 130px); translate: none; top: auto; bottom: 22px; }
  .feed-meta .captions { margin-top: 4px; }
  .cap { justify-content: flex-start; }
  .feed-3d {
    left: 50%; top: calc(var(--cy) - var(--ch) / 2 + 14px);
    transform: translate(-50%, -8px); gap: 10px;
    padding: 6px 14px 6px 6px; border-radius: 999px;
    background: rgba(255, 255, 255, .92); font-size: 13px; white-space: nowrap;
    box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .35);
  }
  .feed-3d .tag { height: 24px; font-size: 12px; border-radius: 999px; }
  .feed-3d .long { display: none; }
  .feed-3d .short { display: inline; }
  .feed-pin.is-3d .feed-3d { transform: translate(-50%, 0); }

  .js .hero .ln > span { transform: translateY(105%); transition: transform 1.1s var(--ease); }
  .js .hero-r .ln > span { transition-delay: .1s; }
  .is-in .hero .ln > span { transform: none; }
}

/* Intro: the first ad rises into place, the rest of the stage follows */
.js .feed-window { clip-path: inset(100% 0 0 0 round var(--r)); transition: clip-path 1.15s var(--ease); }
.js .feed-window video { scale: 1.12; transition: scale 1.6s var(--ease); }
.is-in .feed-window { clip-path: inset(-20% -20% -20% -20% round var(--r)); }
.is-in .feed-window video { scale: 1; }
.js .hero-sub, .js .feed-meta, .js .sound-feed, .js .top {
  opacity: 0; transition: opacity .9s var(--ease) .65s, transform .6s var(--ease), border-color .3s;
}
.is-in .hero-sub, .is-in .feed-meta, .is-in .sound-feed, .is-in .top { opacity: 1; }

/* =========================================================
   WIDE — 16:9 films open up to the full width as they arrive
   ========================================================= */
.wide { padding-top: 16svh; }
.w-title {
  font-size: clamp(40px, 6.4vw, 112px);
  font-weight: 800;
  font-variation-settings: "wdth" 112, "wght" 800;
  letter-spacing: -.035em;
  line-height: .9;
  max-width: 1360px; margin: 0 auto; padding: 0 var(--pad);
}
.film { position: relative; height: 175svh; }
.film-pin {
  position: sticky; top: 0;
  height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--head) + 8px) var(--pad) 20px;
}
.film-frame {
  position: relative;
  width: min(100%, calc((100svh - var(--head) - 96px) * 16 / 9));
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: var(--r);
  overflow: hidden;
  background: #16171a;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 40px 80px -40px rgba(0, 0, 0, .45);
  transform-origin: 50% 50%;
  will-change: transform;
}
.film-frame video { width: 100%; height: 100%; object-fit: cover; }
.film-cap {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: min(100%, calc((100svh - var(--head) - 96px) * 16 / 9));
  margin: 16px auto 0;
  font-size: 15px; color: var(--graphite);
  opacity: var(--cap, 1);
}
.film-cap b { color: var(--ink); font-weight: 600; margin-right: .45em; }
.sound-sm { height: 34px; padding: 0 14px 0 12px; font-size: 13px; }
@media (max-width: 760px) {
  .wide { padding-top: 12svh; }
  .film { height: 125svh; }
  .film-cap { font-size: 14px; }
}

/* =========================================================
   VERSIONS — one ad splits into five
   ========================================================= */
.versions { position: relative; height: 270svh; }
.versions-pin {
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  padding: calc(var(--head) + 2svh) var(--pad) 4svh;
}
.v-title { text-align: center; font-size: clamp(44px, 7.6vw, 132px); }
.v-roll { display: block; height: 1.04em; overflow: hidden; }
.v-roll span { display: block; height: 1.04em; line-height: 1.04em; will-change: transform; }
.v-stage { position: relative; }
.v-card {
  position: absolute; left: 50%; top: 50%;
  will-change: transform;
}
.v-card .v-box {
  position: relative;
  border-radius: calc(var(--r) * .8);
  overflow: hidden;
  background: #121316;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 24px 48px -26px rgba(0, 0, 0, .45);
}
.v-box video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity .5s var(--ease);
}
.v-card figcaption {
  margin-top: 12px;
  font-size: 15px; font-weight: 600;
  text-align: center;
  opacity: var(--lab, 0);
  transform: translateY(calc((1 - var(--lab, 0)) * 8px));
}
.versions-pin .v-note {
  margin: 10px auto 0;
  text-align: center;
  color: var(--graphite);
  opacity: var(--foot, 0);
}
.v-foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  max-width: 1240px; width: 100%; margin: 0 auto;
  opacity: var(--foot, 0);
  transform: translateY(calc((1 - var(--foot, 0)) * 12px));
}
.v-offer { display: flex; align-items: flex-end; gap: clamp(28px, 3.4vw, 64px); flex-wrap: wrap; }
.v-price { display: flex; align-items: flex-end; gap: 14px; }
.v-price-num {
  font-size: clamp(48px, 5.4vw, 92px);
  font-weight: 800;
  font-variation-settings: "wdth" 112, "wght" 800;
  letter-spacing: -.035em;
  line-height: .8;
  font-variant-numeric: tabular-nums;
}
.v-price-what { color: var(--graphite); font-size: 16px; line-height: 1.35; padding-bottom: 2px; }
.formats { display: flex; align-items: center; gap: 18px; }
.fmt {
  position: relative;
  display: flex;
  padding: 4px;
  border: 1px solid var(--line); border-radius: 999px;
}
.fmt button {
  position: relative; z-index: 1;
  min-width: 64px; height: 36px; padding: 0 14px;
  border-radius: 999px;
  font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: color .45s var(--ease);
}
.fmt button[aria-checked="true"] { color: var(--paper); }
.fmt-pill {
  position: absolute; top: 4px; left: 0;
  height: 36px; width: 64px;
  border-radius: 999px;
  background: var(--ink);
  transition: transform .6s var(--ease), width .6s var(--ease);
}
.fmt-where { position: relative; height: 1.5em; min-width: 15em; overflow: hidden; color: var(--graphite); font-size: 15px; }
.fmt-where span { position: absolute; inset: 0; white-space: nowrap; transform: translateY(110%); transition: transform .6s var(--ease); }
.fmt-where span.is-past { transform: translateY(-110%); }
.fmt-where span.is-active { transform: none; }

@media (max-width: 859px), (max-aspect-ratio: 1/1) {
  .versions { height: 340svh; }
  .v-title { font-size: clamp(32px, 9.4vw, 72px); }
  .v-foot { flex-direction: column; align-items: flex-start; gap: 16px; }
  .versions-pin .v-note { font-size: 15px; max-width: 30ch; }
  .v-price-what { font-size: 14px; }
  .formats { flex-wrap: wrap; gap: 10px 14px; }
  .fmt-where { min-width: 0; flex: 1 1 12em; }
  .v-card figcaption { font-size: 13px; margin-top: 8px; }
}

/* =========================================================
   PROCESS + PRICE
   ========================================================= */
.process {
  padding: 20svh var(--pad) 16svh;
  max-width: 1360px; margin: 0 auto;
}
.p-title { font-size: clamp(88px, 17vw, 280px); line-height: .82; letter-spacing: -.045em; }
.p-sub { margin-top: 24px; max-width: 32ch; font-size: clamp(19px, 1.7vw, 26px); line-height: 1.3; color: var(--graphite); }
.track { position: relative; margin-top: clamp(64px, 12svh, 140px); }
.axis { position: relative; height: 2px; background: var(--line); border-radius: 2px; }
.axis-fill { position: absolute; inset: 0; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--fill, 0)); }
.hour-72 {
  position: absolute; top: -34px; right: 0;
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--graphite);
  opacity: calc((.9 - var(--fill, 0)) * 12);
}
/* the clock riding the timeline: 0h at the brief, 72h at delivery */
.hour-pill {
  position: absolute; top: -46px;
  left: calc(var(--fill, 0) * 100%);
  transform: translateX(calc(var(--fill, 0) * -100%));
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.step { position: relative; padding-top: 34px; color: var(--graphite); transition: color .6s var(--ease); }
.step::before {
  content: ""; position: absolute; left: 0; top: -7px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--paper); box-shadow: inset 0 0 0 2px var(--line);
  transition: background-color .5s var(--ease), box-shadow .5s var(--ease), transform .6s var(--ease);
}
.step h3 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 8px; }
.step p { max-width: 26ch; }
.step.is-on { color: var(--ink); }
.step.is-on::before { background: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); transform: scale(1.15); }
.step.is-on p { color: var(--graphite); }


@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; gap: 36px; }
  .axis, .hour-72, .hour-pill { display: none; }
  .track { border-left: 2px solid var(--line); padding-left: 24px; }
  .track::before {
    content: ""; position: absolute; left: -2px; top: 0; width: 2px; height: 100%;
    background: var(--ink); transform-origin: 50% 0; transform: scaleY(var(--fill, 0));
  }
  .step { padding-top: 0; }
  .step::before { left: -31px; top: 7px; }
}

/* =========================================================
   PROOF — the client's words, read at reading pace
   ========================================================= */
.proof {
  max-width: 1360px; margin: 0 auto;
  padding: 14svh var(--pad) 8svh;
}
.quote { max-width: 1100px; }
.quote blockquote { margin: 0; }
.quote p {
  font-size: clamp(28px, 3.9vw, 60px);
  font-weight: 500;
  font-variation-settings: "wdth" 100, "wght" 500;
  line-height: 1.12;
  letter-spacing: -.028em;
  text-indent: -.4em;
}
.quote [data-w] { opacity: var(--a, .16); }
.quote figcaption { display: flex; flex-direction: column; margin-top: 40px; font-size: 17px; }
.quote figcaption b { font-weight: 600; }
.quote figcaption span { color: var(--graphite); }

/* =========================================================
   BRIEF
   ========================================================= */
.brief {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title phone" "form phone";
  align-items: start;
  column-gap: clamp(48px, 6vw, 112px);
  row-gap: 56px;
  max-width: 1360px; margin: 0 auto;
  padding: 14svh var(--pad) 16svh;
  border-top: 1px solid var(--line);
}
.b-title { grid-area: title; font-size: clamp(56px, 7.6vw, 140px); }
.b-form { grid-area: form; display: grid; gap: 28px; align-content: start; max-width: 520px; width: 100%; }

/* Orrin in a phone, tilting toward the pointer, the offer orbiting it (a callback to brenthen) */
.b-stage {
  grid-area: phone; align-self: center;
  --w: clamp(230px, 19vw, 300px);
  width: calc(var(--w) * 1.9);
  display: grid; place-items: center;
  perspective: 1400px;
  padding: 24px 0 64px;
}
.b-lift { transform-style: preserve-3d; transition: opacity 1s var(--ease), transform 1.6s var(--spring); }
.js .b-lift { opacity: 0; transform: translateY(60px) rotateX(24deg) scale(.94); }
.b-stage.is-up .b-lift { opacity: 1; transform: none; }
.b-scene {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  will-change: transform;
}
.phone {
  --b: calc(var(--w) * .035);
  position: relative;
  width: calc(var(--w) + 2 * var(--b));
  height: calc(var(--w) * 16 / 9 + 2 * var(--b));
  padding: var(--b);
  border-radius: calc(var(--w) * .165);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .12)),
    linear-gradient(180deg, #2a2d33, #0e0f12);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .12),
    inset 0 0 0 3px #000,
    0 60px 90px -50px rgba(0, 0, 0, .55),
    0 24px 40px -24px rgba(0, 0, 0, .35);
  transform: translateZ(0);
}
.phone::before, .phone::after {
  content: ""; position: absolute; width: 3px; border-radius: 3px;
  background: linear-gradient(90deg, #34383f, #16181c);
}
.phone::before { left: -2px; top: 22%; height: 8%; box-shadow: 0 calc(var(--w) * .2) 0 #1d2025; }
.phone::after { right: -2px; top: 28%; height: 12%; }
.screen {
  position: relative;
  width: var(--w); height: calc(var(--w) * 16 / 9);
  border-radius: calc(var(--w) * .13);
  overflow: hidden;
  background: #0e1116;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.screen video { width: 100%; height: 100%; object-fit: cover; }
.screen::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 28%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
/* on a light page the ring sits at the phone's base like a turntable, so ink letters never cross the dark phone */
.ring {
  position: absolute; left: 50%; top: 100%;
  width: 0; height: 0;
  transform-style: preserve-3d;
  transform: translateY(-8px) rotateX(-12deg) rotateZ(-2deg);
  pointer-events: none;
}
.ring-spin { transform-style: preserve-3d; animation: spin 26s linear infinite; }
.ring span {
  position: absolute; left: 0; top: 0;
  font-size: var(--rf, 12px); font-weight: 700; letter-spacing: .02em;
  color: var(--ink);
  transform: translate(-50%, -50%) rotateY(var(--a)) translateZ(var(--r));
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  opacity: 0;
  transition: opacity .8s var(--ease);
  transition-delay: calc(.9s + var(--k) * 6ms);
}
.b-stage.is-up .ring span { opacity: 1; }
@keyframes spin { to { transform: rotateY(-360deg); } }

.field { position: relative; display: grid; gap: 6px; }
.field > span { font-size: 14px; font-weight: 600; }
.field em { font-style: normal; font-weight: 400; color: var(--graphite); margin-left: .35em; }
.field input, .field textarea {
  width: 100%;
  padding: 6px 0 12px;
  border: 0; border-radius: 0;
  border-bottom: 1.5px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: 400 22px/1.35 "Archivo", "Archivo Fallback", system-ui, sans-serif;
  letter-spacing: -.01em;
  resize: none;
  outline: none;
  transition: border-color .4s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(0, 0, 0, .3); }
.field::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--ink);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .6s var(--ease);
}
.field:focus-within::after { transform: scaleX(1); }
.field input:user-invalid { border-bottom-color: #B3261E; }
.b-form .btn { justify-self: start; margin-top: 8px; }
.b-form .btn[disabled] { opacity: .5; cursor: progress; }
.b-status { min-height: 1.5em; font-size: 16px; }
.b-status a, .b-alt a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.b-alt { font-size: 15px; color: var(--graphite); }
.b-status.is-error { color: #B3261E; }
.hp { position: absolute; left: -9999px; }
.b-form.is-sent .field, .b-form.is-sent .btn { display: none; }
.b-form.is-sent .b-status { font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }

@media (max-width: 900px) {
  .brief { grid-template-columns: 1fr; grid-template-areas: "title" "phone" "form"; row-gap: 40px; }
  .b-stage { --w: min(240px, 58vw); justify-self: center; width: auto; padding: 8px 0 40px; }
}

/* =========================================================
   FOOTER — the wordmark opens to full width as you arrive
   ========================================================= */
.foot { padding: 0 var(--pad) 28px; overflow: hidden; }
.word { font-size: var(--word-size, 16vw); line-height: .78; white-space: nowrap; letter-spacing: 0; padding-top: .06em; }
.word span { display: inline-block; letter-spacing: -.02em; font-variation-settings: "wdth" var(--wdth, 125), "wght" 800; }
.foot-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px;
  margin-top: 24px; padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 14px; color: var(--graphite);
}
.foot-row a { color: var(--ink); font-weight: 600; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease); }
.foot-row a:hover { background-size: 100% 1px; }

/* =========================================================
   Reduced motion: the same content, laid out flat
   ========================================================= */
.rm .feed { height: auto; padding: 0; }
.rm .feed::after { display: none; }
.rm .feed-intro { position: static; height: auto; margin: 0; padding: calc(var(--head) + 24px) var(--pad) 32px; pointer-events: auto; }
.rm .hero-side, .rm .hero-sub, .rm .sound-feed { position: static; translate: none; }
.rm .hero .ln { display: inline-block; margin-right: .24em; }
.rm .hero { font-size: clamp(38px, 7vw, 120px); }
.rm .hero-r { display: block; }
.rm .hero-sub { margin-top: 18px; max-width: none; }
.rm .feed-pin { position: static; height: auto; overflow: visible; margin-top: 0; padding: 0 var(--pad) 48px; }
.rm .feed-window { position: static; translate: none; width: auto; height: auto; clip-path: none; }
.rm .feed-cards { position: static; display: flex; gap: 16px; overflow-x: auto; padding-bottom: 12px; }
.rm .ad { position: relative; inset: auto; flex: 0 0 min(300px, 72vw); aspect-ratio: 9 / 16; transform: none !important; opacity: 1 !important; }
.rm .feed-meta { display: none; }
.rm .sound { display: none; }
.rm .film { height: auto; }
.rm .film-pin { position: static; height: auto; padding: 0 0 10svh; }
.rm .film-frame { transform: none !important; }
.rm .versions { height: auto; }
.rm .versions-pin { position: static; height: auto; display: block; padding: 12svh var(--pad); }
.rm .v-roll { height: auto; }
.rm .v-roll span:first-child { display: none; }
.rm .v-stage { display: flex; gap: 16px; overflow-x: auto; margin: 40px 0; padding-bottom: 12px; }
.rm .v-card { position: relative; left: auto; top: auto; transform: none !important; flex: 0 0 min(220px, 46vw); }
.rm .v-box { width: 100% !important; height: auto !important; aspect-ratio: var(--ar, 9 / 16); }
.rm .v-card figcaption, .rm .v-foot { opacity: 1; transform: none; }
.rm .b-lift { opacity: 1; transform: none; }
.rm .ring-spin { animation: none; }
.rm .ring span { opacity: 1; }
.rm *, .rm *::before, .rm *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }