/* ═══════════════════════════════════════════════════════════════════
   TACTIC — Site Styles
   Cinematic, type-led, generous negative space.
   Black bg, off-white type, cream/tan accent, rust pin.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* color */
  --c-ink:        #0a0a0a;
  --c-ink-2:      #111;
  --c-ink-3:      #161616;
  --c-bone:       #ece9e1;
  --c-bone-2:     rgba(236, 233, 225, 0.78);
  --c-muted:      rgba(236, 233, 225, 0.55);
  --c-cream:      #c9b894;
  --c-cream-2:    #a89875;
  --c-rust:       #EF322D;
  --c-line:       rgba(236, 233, 225, 0.10);
  --c-line-2:     rgba(236, 233, 225, 0.30);
  --c-gold-grad:  linear-gradient(135deg, #C2B270 0%, #C29170 100%);

  /* type */
  --f-display:  'Inter Tight', 'Mark Pro', 'Inter', system-ui, sans-serif;
  --f-body:     'Inter', 'Lato', system-ui, sans-serif;
  --f-mono:     'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* layout */
  --max:        1320px;
  --gutter:     clamp(20px, 4vw, 56px);
  --section-y:  clamp(96px, 12vw, 180px);

  /* motion */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --dur-md:     600ms;
  --dur-sm:     300ms;
}

/* reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-bone);
  background: var(--c-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: var(--c-cream); color: var(--c-ink); }
em {
  font-style: italic;
  color: var(--c-cream);
  font-family: var(--f-display);
  font-weight: 400;
}

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

/* type primitives */
.kicker {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0 0 1.5em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.kicker::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--c-rust);
}
.kicker--accent { color: var(--c-cream); }

.display {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 0.4em;
  color: var(--c-bone);
}

.section-head { max-width: 880px; margin-bottom: clamp(48px, 7vw, 96px); }
.section-head__sub {
  margin: clamp(20px, 3vw, 32px) 0 0;
  max-width: 56ch;
  color: var(--c-bone-2);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
}

.dot {
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.6;
}

.ord {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-rust);
  margin: 0 0 14px;
}

/* ───────── NAV ───────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 18px 0;
  background: linear-gradient(to bottom, rgba(10,10,10,0.7), rgba(10,10,10,0));
  transition: background 300ms var(--ease), backdrop-filter 300ms var(--ease);
}
.nav.is-scrolled {
  background: rgba(10,10,10,0.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}
.nav__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--c-bone);
}
.nav__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--c-rust);
}
.nav__links {
  display: flex;
  gap: clamp(16px, 2.4vw, 36px);
  justify-content: center;
}
.nav__links a {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-bone);
  opacity: 0.72;
  transition: opacity 200ms var(--ease), color 200ms var(--ease);
}
.nav__links a:hover, .nav__links a.is-current {
  opacity: 1;
  color: var(--c-cream);
}
.nav__cta {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--c-line-2);
  padding: 10px 18px;
  border-radius: 999px;
  color: var(--c-bone);
  transition: all 200ms var(--ease);
  white-space: nowrap;
}
.nav__cta:hover { background: var(--c-bone); color: var(--c-ink); border-color: var(--c-bone); }

@media (max-width: 720px) {
  .nav__links { display: none; }
  .nav__inner { grid-template-columns: auto auto; }
}

/* ───────── HERO ───────── */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
  padding-block: 0 clamp(80px, 10vw, 140px);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #0a0a0a;
}
/* Hero content (text, CTAs) sits above the video — explicit z-index so the
   YouTube iframe (z-index:1 inside hero__media) doesn't cover the headline. */
.hero__content,
.hero__sidemark,
.hero__scroll,
.hero__watch {
  position: relative;
  z-index: 2;
}
/* Poster fallback — shows behind the YouTube iframe while it loads,
   eliminating the black flash before stream starts. Also the final
   visual if the embed fails for any reason. */
.hero__poster-fallback {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  z-index: 0;
  pointer-events: none;
}
/* HTML5 <video> hero — fills the viewport, ken-burns scale animation
   for ambient motion. object-fit: cover crops the source 1920x800 to
   match viewport aspect (typically 16:9 → tiny vertical crop). */
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  /* Bulletproof fallback if the file fails to load */
  background: url('assets/posters/hero.jpg') center 40% / cover no-repeat #0a0a0a;
  filter: none;
  animation: kenburns 22s ease-out infinite alternate;
  position: relative;
  z-index: 1;
}
@keyframes kenburns {
  from { transform: scale(1.0); }
  to   { transform: scale(1.06); }
}
/* Scrim — lighter so the video is actually visible. Just enough gradient
   at the bottom for type legibility and a soft edge fade at the top
   for nav contrast. No heavy radial mask. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.25) 30%, rgba(10,10,10,0) 55%, rgba(10,10,10,0.35) 100%);
}
.hero__sidemark {
  position: absolute;
  right: clamp(16px, 2vw, 32px);
  top: 50%;
  transform: rotate(90deg) translate(50%, 0);
  transform-origin: right;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-muted);
  z-index: 2;
}
.hero__content {
  position: relative;
  z-index: 3;
  padding: 0 var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
}
.hero__tagline {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(40px, 6.4vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--c-bone);
  max-width: 22ch;
  margin: 0 0 clamp(28px, 4vw, 40px);
}
.hero__meta {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-cream);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.hero__scroll {
  position: absolute;
  right: clamp(20px, 3vw, 36px);
  bottom: clamp(20px, 3vw, 36px);
  z-index: 3;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-bone);
  opacity: 0.7;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  animation: floaty 2.4s var(--ease) infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* ───────── MARQUEE ───────── */
.marquee {
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  padding: clamp(18px, 2vw, 28px) 0;
  overflow: hidden;
}
.marquee__track {
  display: inline-flex;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 32px);
  letter-spacing: -0.01em;
  color: var(--c-bone);
  white-space: nowrap;
  animation: marquee 60s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee__track .dot { color: var(--c-rust); width: 5px; height: 5px; opacity: 1; }

/* ───────── SECTIONS — shared ───────── */
section { padding: var(--section-y) 0; border-top: 1px solid var(--c-line); }
section:first-of-type, .hero, .marquee { border-top: 0; }
.marquee { padding-block: clamp(18px, 2vw, 28px); }

/* ───────── STAKES ───────── */
.stakes__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(48px, 6vw, 80px);
  max-width: 1080px;
  margin-left: auto;
}
.stakes__grid p {
  margin: 0;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--c-bone-2);
}
@media (max-width: 720px) { .stakes__grid { grid-template-columns: 1fr; } }

/* ───────── POSITIONING ───────── */
.positioning__sub {
  margin: clamp(24px, 3vw, 40px) 0 0;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 24px);
  color: var(--c-cream);
  max-width: 56ch;
}

/* ───────── THREE TESTS ───────── */
.three-tests__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4vw, 56px);
  margin-top: clamp(40px, 5vw, 64px);
}
.three-tests__grid article {
  border-top: 1px solid var(--c-line-2);
  padding-top: 22px;
}
.three-tests__grid h3 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--c-bone);
  margin: 0 0 16px;
}
.three-tests__grid p:not(.ord) {
  margin: 0;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.6;
  color: var(--c-bone-2);
}
@media (max-width: 880px) { .three-tests__grid { grid-template-columns: 1fr; } }

/* UGC photo grid — small square tiles, 5 per row on desktop.
   Each tile opens the FCFCU asset on Frame.io in a new tab. */
.work-ugc-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 24px;
}
.work-ugc-cell {
  position: relative;
  display: block;
  aspect-ratio: 1;
  background: #1a1a1a;
  overflow: hidden;
  border-radius: 2px;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
              filter 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.work-ugc-cell:focus-visible {
  outline: 2px solid var(--accent, #ef322d);
  outline-offset: 3px;
}
.work-ugc-cell:hover {
  transform: translateY(-3px) scale(1.02);
  filter: brightness(1.1);
}
.work-ugc-cell__placeholder {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg,
      rgba(212, 179, 132, 0.06) 0 12px,
      rgba(212, 179, 132, 0.02) 12px 24px),
    linear-gradient(135deg, rgba(239, 50, 45, 0.18), rgba(212, 179, 132, 0.08));
}
.work-ugc-cell__caption {
  position: absolute; left: 10px; bottom: 10px;
  font-family: var(--f-mono);
  font-size: 8px; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(236, 233, 225, 0.55);
  pointer-events: none;
}
@media (max-width: 900px) { .work-ugc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px) { .work-ugc-grid { grid-template-columns: repeat(2, 1fr); } }

/* ───────── SELECTED WORK ───────── */
.work-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(12px, 1.4vw, 24px);
}
.work-tile {
  position: relative;
  grid-column: span 6;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-radius: 4px;
  background: var(--c-ink-2);
  cursor: pointer;
}
.work-tile.is-half { grid-column: span 3; aspect-ratio: 16 / 10; }
.work-tile video, .work-tile img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease), filter 800ms var(--ease);
  filter: saturate(0.92) contrast(1.05);
  /* Inner media must not swallow tile clicks — clicks should bubble to
     the .work-tile parent so the lightbox click handler fires. */
  pointer-events: none;
}
.work-tile:hover video, .work-tile:hover img {
  transform: scale(1.03);
  filter: saturate(1) contrast(1.05);
}
.work-tile__meta {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(16px, 2vw, 24px);
  z-index: 2;
  background: linear-gradient(to top, rgba(10,10,10,0.85), transparent);
  display: grid;
  gap: 4px;
}
.work-tile__client {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-cream);
}
.work-tile__title {
  font-family: var(--f-display);
  font-size: clamp(18px, 1.6vw, 24px);
  letter-spacing: -0.01em;
  color: var(--c-bone);
}
.work-tile__cat {
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-bone);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  padding: 6px 10px;
  border-radius: 2px;
}
.work-tile__hover {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-bone);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  padding: 6px 10px;
  border-radius: 2px;
  opacity: 0.8;
}
/* Frame.io review link on tiles. Real <a> — opens Frame.io in a new
   tab for clients who want to leave comments. Tile body still triggers
   the native lightbox playback; this anchor is the secondary path. */
.work-tile__fio-link {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 4;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-bone);
  text-decoration: none;
  background: rgba(239, 50, 45, 0.85);
  padding: 7px 11px;
  border-radius: 2px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
              background 200ms;
}
.work-tile__fio-link:hover {
  background: rgba(239, 50, 45, 1);
}
.work-tile:hover .work-tile__fio-link,
.work-tile:focus-within .work-tile__fio-link {
  opacity: 1;
  transform: translateY(0);
}

/* FRAME.IO IFRAME CROP — REEL MODE.
   The WEB-FETCH share is in Reel mode which is already a clean embed:
   no breadcrumb, no side panel, no comments. Only chrome to hide is
   the small "WEB-FETCH" title bar (~44px) at top + the 3 reel icons.
   Bottom thumbnail strip stays visible — that IS the reel UX. */
.lightbox__iframe-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: #0a0a0a;
}
.lightbox__iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* placeholder tile (when src is null) */
.work-tile.is-placeholder {
  background:
    repeating-linear-gradient(135deg, transparent 0 12px, rgba(236,233,225,0.04) 12px 24px),
    var(--c-ink-2);
  display: grid; place-items: center;
}
.work-tile.is-placeholder::after {
  content: "drop asset → media.config.js";
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-cream);
  opacity: 0.7;
}

@media (max-width: 880px) {
  .work-grid { grid-template-columns: 1fr 1fr; }
  .work-tile.is-half { grid-column: span 1; }
  .work-tile { grid-column: span 2; }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: all 200ms var(--ease);
  white-space: nowrap;
  margin-top: clamp(40px, 5vw, 64px);
}
.btn--primary { background: var(--c-bone); color: var(--c-ink); }
.btn--primary:hover { background: var(--c-cream); transform: translateY(-1px); }
.btn--ghost { border-color: var(--c-line-2); color: var(--c-bone); }
.btn--ghost:hover { border-color: var(--c-bone); }

/* ───────── ATMOSPHERE ───────── */
.atmosphere { background: var(--c-ink-2); }
.atmosphere blockquote {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(36px, 5.6vw, 80px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--c-bone);
  margin: 0 0 24px;
  max-width: 18ch;
}
.atmosphere cite {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-cream);
  font-style: normal;
}

/* ───────── BTS ───────── */
.bts__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(8px, 1vw, 14px);
}
.bts__cell {
  position: relative;
  grid-column: span 2;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
  background: var(--c-ink-2);
}
.bts__cell:nth-child(1) { grid-column: span 4; aspect-ratio: 16 / 10; }
.bts__cell img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.05);
  transition: transform 800ms var(--ease);
}
.bts__cell:hover img { transform: scale(1.04); }
.bts__cell figcaption {
  position: absolute;
  bottom: 12px; left: 12px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-bone);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  padding: 6px 10px;
  border-radius: 2px;
  opacity: 0;
  transition: opacity 200ms var(--ease);
}
.bts__cell:hover figcaption { opacity: 1; }
@media (max-width: 880px) {
  .bts__grid { grid-template-columns: 1fr 1fr; }
  .bts__cell, .bts__cell:nth-child(1) { grid-column: span 1; aspect-ratio: 4 / 3; }
}

/* ───────── CAPABILITIES ───────── */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
}
.cap-card {
  border-top: 1px solid var(--c-line-2);
  padding-top: 24px;
}
.cap-card h3 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.cap-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.cap-card li {
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-bone-2);
  padding-left: 18px;
  position: relative;
}
.cap-card li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--c-cream);
}
@media (max-width: 880px) { .cap-grid { grid-template-columns: 1fr; } }

/* ───────── EXPERTISE ───────── */
.expertise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  overflow: hidden;
}
.exp-tile {
  background: var(--c-ink);
  padding: clamp(28px, 3vw, 44px);
  transition: background 300ms var(--ease);
}
.exp-tile:hover { background: var(--c-ink-2); }
.exp-tile h3 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.exp-tile p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--c-bone-2); }
@media (max-width: 880px) { .expertise-grid { grid-template-columns: 1fr; } }

/* ───────── PROOF (clients/press) ───────── */
.proof { background: var(--c-ink-2); }
.proof__row {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: center;
  gap: 32px;
  padding: clamp(24px, 3vw, 40px) 0;
  border-bottom: 1px solid var(--c-line);
}
.proof__row:last-child { border-bottom: 0; }
.proof__row .kicker { margin: 0; }
.proof__logos {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  font-family: var(--f-display);
  font-size: clamp(16px, 1.4vw, 20px);
  color: var(--c-bone-2);
}
.proof__logos > * { transition: color 200ms var(--ease); }
.proof__logos > *:hover { color: var(--c-bone); }
@media (max-width: 720px) {
  .proof__row { grid-template-columns: 1fr; }
}

/* ───────── BRAND CANON CYCLER ───────── */
.canon {
  background: var(--c-ink);
  padding: clamp(80px, 10vw, 140px) 0;
  text-align: center;
  border-top: 1px solid var(--c-line);
}
.canon__line {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(56px, 9vw, 132px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--c-bone);
  margin: 0;
}
.canon__verb {
  display: inline-block;
  position: relative;
  color: var(--c-cream);
  font-style: italic;
  min-width: 4ch;
  text-align: left;
}
.canon__verb::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 2px;
  background: var(--c-rust);
  transform-origin: left;
  animation: cycler-bar 1.8s var(--ease) infinite;
}
@keyframes cycler-bar {
  0%, 80% { transform: scaleX(0); }
  90%, 100% { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .canon__verb::after { animation: none; transform: scaleX(0); }
}

/* ───────── CTA CLOSE (gold gradient — deck-spec) ───────── */
.cta-close {
  background: var(--c-gold-grad);
  color: #fff;
  border-top: 0;
  padding-block: clamp(80px, 10vw, 140px);
  position: relative;
  overflow: hidden;
}
/* deck-style framing brackets */
.cta-close::before,
.cta-close::after {
  content: "";
  position: absolute;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,0.7);
  pointer-events: none;
}
.cta-close::before {
  top: 32px; left: 32px;
  border-right: 0; border-bottom: 0;
}
.cta-close::after {
  bottom: 32px; right: 32px;
  border-left: 0; border-top: 0;
}
.cta-close__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
  position: relative;
  z-index: 1;
}
.cta-close__copy h2 {
  color: #fff;
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
}
.cta-close__copy em {
  color: #EF322D;
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 500;
}
.cta-close__contact {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.cta-close__email {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  padding-bottom: 4px;
}
.cta-close__email:hover { color: #fff; border-bottom-color: #fff; }
.cta-close__wordmark {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(56px, 8vw, 110px);
  letter-spacing: -0.02em;
  color: #fff;
  margin: 8px 0 0;
  line-height: 1;
}
.cta-close__sub {
  font-family: var(--f-body);
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255,255,255,0.85);
  margin: 0;
  line-height: 1.5;
}
.cta-close .btn--primary {
  background: #fff;
  color: var(--c-ink);
  border-color: #fff;
  margin-top: 16px;
}
.cta-close .btn--primary:hover { background: #fff; transform: translateY(-1px); opacity: 0.9; }
@media (max-width: 880px) { .cta-close__inner { grid-template-columns: 1fr; } }

/* ───────── FOOTER ───────── */
.footer {
  padding: 24px 0;
  border-top: 1px solid var(--c-line);
}
.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.footer__inner a:hover { color: var(--c-cream); }

/* ───────── FLOATING DECK PILL ───────── */
.floating-deck {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  background: var(--c-rust);
  color: var(--c-bone);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 12px 18px;
  border-radius: 999px;
  transition: transform 200ms var(--ease), background 200ms var(--ease);
}
.floating-deck:hover { transform: translateY(-2px); background: #d6614a; }

/* ───────── REVEAL ANIMATIONS ───────── */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--dur-md) var(--ease), transform var(--dur-md) var(--ease);
  }
  [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  .reveal-words .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.4em);
    transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  }
  .reveal-words.is-visible .word { opacity: 1; transform: translateY(0); }
}

/* ───────── PAGE-SPECIFIC HEADERS (work, process, about, contact, blog) ───────── */
.page-hero {
  padding: calc(120px + clamp(40px, 6vw, 80px)) 0 clamp(80px, 10vw, 140px);
  border-bottom: 1px solid var(--c-line);
}
.page-hero__title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(56px, 8vw, 120px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 24px;
  max-width: 18ch;
}
.page-hero__sub {
  margin: 0;
  max-width: 56ch;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--c-bone-2);
}

/* ───────── WORK PAGE — categorized ───────── */
.work-section { padding: clamp(60px, 8vw, 120px) 0; }
.work-section__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.work-section__head h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0;
}
.work-section__head p {
  margin: 0;
  color: var(--c-bone-2);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.6;
}
@media (max-width: 880px) { .work-section__head { grid-template-columns: 1fr; } }

/* ───────── ABOUT page tiles ───────── */
.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(40px, 5vw, 64px);
}
.value {
  border-top: 1px solid var(--c-line-2);
  padding-top: 22px;
}
.value h3 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.value p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--c-bone-2); }
@media (max-width: 720px) { .values-grid { grid-template-columns: 1fr; } }

/* ───────── BLOG (Notes) ───────── */
.notes-list { border-top: 1px solid var(--c-line); }
.note-row {
  display: grid;
  grid-template-columns: 140px 1fr 160px;
  gap: clamp(16px, 3vw, 40px);
  align-items: center;
  padding: clamp(20px, 2.4vw, 32px) 0;
  border-bottom: 1px solid var(--c-line);
  transition: background 200ms var(--ease);
}
.note-row:hover { background: rgba(236,233,225,0.02); }
.note-row__date {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.note-row__title {
  font-family: var(--f-display);
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.01em;
  color: var(--c-bone);
  margin: 0;
}
.note-row__cat {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-cream);
  text-align: right;
}
@media (max-width: 720px) {
  .note-row { grid-template-columns: 1fr; gap: 6px; }
  .note-row__cat { text-align: left; }
}

/* ───────── CONTACT FORM ───────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(40px, 5vw, 80px);
  margin-top: clamp(40px, 5vw, 64px);
}
.contact-info { display: grid; gap: clamp(24px, 3vw, 36px); }
.contact-info__block .kicker { margin: 0 0 8px; }
.contact-info__block a, .contact-info__block p {
  font-family: var(--f-display);
  font-size: clamp(16px, 1.4vw, 20px);
  color: var(--c-bone);
  margin: 0;
}
.contact-form {
  display: grid;
  gap: clamp(20px, 2vw, 28px);
}
.field { display: grid; gap: 6px; }
.field label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-cream);
}
.field input,
.field select,
.field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-line-2);
  padding: 10px 0;
  color: var(--c-bone);
  font-family: var(--f-body);
  font-size: 16px;
  transition: border-color 200ms var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-bottom-color: var(--c-cream);
}
.field textarea { min-height: 120px; resize: vertical; }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════
   WORLD-CLASS POLISH — preloader, cursor, transitions, grain, kinetic
   ═══════════════════════════════════════════════════════════════════ */

/* ── Preloader ─────────────────────────────────────────────────── */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--c-ink);
  display: grid;
  place-items: center;
  pointer-events: all;
  transition: opacity 800ms var(--ease), visibility 800ms var(--ease);
}
.preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader__inner {
  position: relative;
  width: clamp(120px, 18vw, 220px);
  height: clamp(120px, 18vw, 220px);
  display: grid;
  place-items: center;
  border: 1px solid var(--c-line-2);
  border-radius: 50%;
}
.preloader__inner::before,
.preloader__inner::after {
  content: "";
  position: absolute;
  background: var(--c-bone);
  opacity: 0.8;
}
.preloader__inner::before {
  left: 50%; top: 8%; bottom: 8%;
  width: 1px;
  transform: translateX(-50%);
}
.preloader__inner::after {
  top: 50%; left: 8%; right: 8%;
  height: 1px;
  transform: translateY(-50%);
}
.preloader__num {
  font-family: var(--f-display);
  font-size: clamp(64px, 10vw, 140px);
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--c-bone);
  line-height: 1;
  position: relative;
  z-index: 2;
  background: var(--c-ink);
  padding: 0 12px;
}
.preloader__mark {
  position: absolute;
  top: -10px;
  right: -10px;
  font-family: var(--f-mono);
  color: var(--c-rust);
  font-size: 18px;
  background: var(--c-ink);
  padding: 4px;
}
.preloader__brand {
  position: absolute;
  bottom: 10vh;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.4em;
  color: var(--c-bone);
  opacity: 0.6;
}
@keyframes preloader-num-flip {
  0%, 30%   { transform: translateY(0); opacity: 1; }
  50%       { transform: translateY(-100%); opacity: 0; }
  51%       { transform: translateY(100%); opacity: 0; }
  80%, 100% { transform: translateY(0); opacity: 1; }
}

/* ── Page transition overlay ───────────────────────────────────── */
.page-trans {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--c-ink);
  display: grid;
  place-items: center;
  pointer-events: none;
  transform: translateY(100%);
  transition: transform 600ms var(--ease);
}
.page-trans.is-active {
  transform: translateY(0);
  transition: transform 500ms var(--ease);
}
.page-trans.is-leaving {
  transform: translateY(-100%);
  transition: transform 500ms var(--ease);
}
.page-trans__bar {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1px;
  background: var(--c-rust);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 600ms var(--ease);
}
.page-trans.is-active .page-trans__bar { transform: scaleX(1); }
.page-trans__mark {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 80px);
  letter-spacing: 0.04em;
  color: var(--c-bone);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 400ms var(--ease) 200ms, transform 400ms var(--ease) 200ms;
}
.page-trans.is-active .page-trans__mark { opacity: 1; transform: translateY(0); }

/* ── Film grain overlay ────────────────────────────────────────── */
.grain {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.05;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  /* PERF: animation removed. Animating background-position over a
     full-viewport mix-blend-mode: overlay layer was forcing a full-page
     repaint+composite every step. Static grain is visually almost
     identical at 0.05 opacity but free to render. */
}
@keyframes grain-shift {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -10%); }
  20% { transform: translate(-15%, 5%); }
  30% { transform: translate(7%, -25%); }
  40% { transform: translate(-5%, 25%); }
  50% { transform: translate(-15%, 10%); }
  60% { transform: translate(15%, 0%); }
  70% { transform: translate(0%, 15%); }
  80% { transform: translate(3%, 35%); }
  90% { transform: translate(-10%, 10%); }
}
@media (prefers-reduced-motion: reduce) { .grain { animation: none; opacity: 0.04; } }

/* Custom cursor: REMOVED. The JS driver was deleted earlier (the
   mix-blend-mode: difference forced a full-page composite repaint on
   every mousemove, which was the dominant lag contributor). The
   .cursor div is left in HTML for backwards-compat but is fully
   hidden, and the native cursor is restored. */
.cursor { display: none !important; }

/* ── Kinetic split type ────────────────────────────────────────── */
.split-char {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 800ms var(--ease), opacity 600ms var(--ease);
}
.split-char.is-in {
  transform: translateY(0);
  opacity: 1;
}
.split-line {
  display: block;
  overflow: hidden;
}

/* ── Section "+" registration marks (deck-style) ───────────────── */
.section-mark {
  position: absolute;
  font-family: var(--f-mono);
  color: var(--c-rust);
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 400ms var(--ease), transform 600ms var(--ease);
}
.section-mark.is-in { opacity: 1; transform: scale(1); }
.section-mark--tl { top: 24px; left: 24px; }
.section-mark--tr { top: 24px; right: 24px; }
.section-mark--bl { bottom: 24px; left: 24px; }
.section-mark--br { bottom: 24px; right: 24px; }
section { position: relative; }

/* ── Magnetic CTA buttons ──────────────────────────────────────── */
.btn, .nav__cta, .floating-deck {
  will-change: transform;
  transition: transform 200ms var(--ease), background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}

/* ── Upgraded work tile hover ──────────────────────────────────── */
.work-tile { transition: transform 600ms var(--ease); }
.work-tile:hover { transform: translateY(-4px); }
.work-tile video, .work-tile img {
  transition: transform 1000ms var(--ease), filter 1000ms var(--ease);
}
.work-tile:hover video, .work-tile:hover img {
  transform: scale(1.05);
  filter: saturate(1.05) contrast(1.08);
}
.work-tile__meta {
  transform: translateY(8px);
  transition: transform 400ms var(--ease);
}
.work-tile:hover .work-tile__meta { transform: translateY(0); }
.work-tile__title {
  position: relative;
  display: inline-block;
}
.work-tile__title::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--c-cream);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--ease);
}
.work-tile:hover .work-tile__title::after { transform: scaleX(1); }

/* ── Hero refinement ───────────────────────────────────────────── */
.hero__tagline { overflow: hidden; }
.hero__tagline .split-line { padding: 0 0 0.05em; }

/* ── Marquee letter spread on hover ────────────────────────────── */
.marquee__track span {
  transition: letter-spacing 400ms var(--ease), color 300ms var(--ease);
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee:hover .marquee__track span { letter-spacing: 0.04em; }

/* ── Three Tests upgrade ───────────────────────────────────────── */
.three-tests__grid article {
  position: relative;
  transition: transform 500ms var(--ease);
}
.three-tests__grid article::before {
  content: "+";
  position: absolute;
  top: -22px;
  left: 0;
  color: var(--c-rust);
  font-family: var(--f-mono);
  font-size: 18px;
  line-height: 1;
}
.three-tests__grid article:hover { transform: translateY(-4px); }

/* ── Cap card upgrade — corner + on hover ──────────────────────── */
.cap-card { position: relative; transition: transform 400ms var(--ease); }
.cap-card::before {
  content: "+";
  position: absolute;
  top: -10px;
  left: 0;
  color: var(--c-rust);
  font-family: var(--f-mono);
  font-size: 18px;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.cap-card:hover::before { opacity: 1; transform: rotate(45deg); }
.cap-card:hover { transform: translateY(-2px); }

/* ── Value tile (about) upgrade ────────────────────────────────── */
.value { position: relative; transition: transform 400ms var(--ease); }
.value::before {
  content: "+";
  position: absolute;
  top: -6px;
  left: 0;
  color: var(--c-rust);
  font-family: var(--f-mono);
  font-size: 14px;
  line-height: 1;
}
.value:hover { transform: translateX(4px); }

/* ── Note row upgrade — hover bar slide ────────────────────────── */
.note-row { position: relative; }
.note-row::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--c-rust);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 400ms var(--ease);
}
.note-row:hover::before { transform: scaleY(1); }
.note-row:hover .note-row__title { color: var(--c-cream); }

/* ── Hero scroll cue refinement ────────────────────────────────── */
.hero__scroll {
  border: 1px solid var(--c-line-2);
  padding: 10px 16px;
  border-radius: 999px;
  transition: background 250ms var(--ease), border-color 250ms var(--ease);
}
.hero__scroll:hover {
  background: rgba(236,233,225,0.05);
  border-color: var(--c-cream);
}

/* ── Improved nav link hover ───────────────────────────────────── */
.nav__links a {
  position: relative;
  padding-bottom: 2px;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--c-cream);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 300ms var(--ease);
}
.nav__links a:hover::after, .nav__links a.is-current::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav__links a.is-current { color: var(--c-cream); opacity: 1; }

/* ── Atmosphere blockquote upgrade ─────────────────────────────── */
.atmosphere blockquote {
  position: relative;
  padding-left: clamp(20px, 4vw, 64px);
}
.atmosphere blockquote::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 2px;
  background: var(--c-rust);
}

/* ── Floating deck pill upgrade ────────────────────────────────── */
.floating-deck::before {
  content: "▶";
  margin-right: 6px;
  font-size: 9px;
}
.floating-deck:hover { transform: translateY(-2px) scale(1.04); }

/* ── BTS hover lift ────────────────────────────────────────────── */
.bts__cell { transition: transform 500ms var(--ease); }
.bts__cell:hover { transform: translateY(-3px); }

/* ═══════════════════════════════════════════════════════════════════
   WOW FACTOR — massive type, manifesto sections, marker highlights
   ═══════════════════════════════════════════════════════════════════ */

/* ── MASSIVE HERO TYPE ─────────────────────────────────────────── */
.hero__tagline {
  font-size: clamp(56px, 9vw, 156px) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.035em !important;
  font-weight: 600;
  max-width: 100% !important;
}

.page-hero__title {
  font-size: clamp(64px, 11vw, 180px) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.035em !important;
  font-weight: 600;
}

/* ── Display H2s — MASSIVE ─────────────────────────────────────── */
.display {
  font-size: clamp(48px, 8vw, 132px) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.03em !important;
  font-weight: 600;
}

.intro__statement,
.contact__headline {
  font-size: clamp(48px, 8vw, 132px) !important;
  line-height: 0.96 !important;
}

/* ── Canon — TRULY ENORMOUS ────────────────────────────────────── */
.canon__line {
  font-size: clamp(72px, 14vw, 240px) !important;
  line-height: 0.92 !important;
  font-weight: 700;
  letter-spacing: -0.04em !important;
}

/* ── Marker highlight on em (coral stroke under accent words) ──── */
em {
  position: relative;
  display: inline-block;
  font-weight: 500;
}
em::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: 0.04em;
  height: 0.42em;
  background: var(--c-rust);
  z-index: -1;
  opacity: 0.18;
  /* Marker WIPES IN left→right as the word enters viewport. Default is
     unwiped (scaleX 0 from the left edge). The `.is-marked` class added
     by IntersectionObserver in script.js triggers the wipe.
     Slight skew + scaleY-from-bottom so the stroke feels handmade. */
  transform-origin: left bottom;
  transform: skewX(-2deg) scaleX(0) scaleY(1);
  transition: transform 720ms cubic-bezier(.22,.61,.36,1), opacity 400ms var(--ease);
  border-radius: 2px;
  pointer-events: none;
}
em.is-marked::after {
  transform: skewX(-2deg) scaleX(1) scaleY(1);
}
em:hover::after { opacity: 0.28; transform: skewX(-2deg) scaleX(1) scaleY(1.04); }
/* canon__verb has its own treatment; suppress marker */
.canon__verb::after { display: none; }
/* Don't double up on cta-close where em is full red */
.cta-close em::after { display: none; }

/* ── Big-room manifesto section ────────────────────────────────── */
.manifesto {
  padding: clamp(120px, 18vw, 280px) 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  position: relative;
  overflow: hidden;
}
.manifesto__line {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(80px, 16vw, 280px) !important;
  line-height: 0.88;
  letter-spacing: -0.045em;
  color: var(--c-bone);
  margin: 0;
  text-align: left;
}
.manifesto__line em {
  font-style: italic;
  color: var(--c-cream);
}
.manifesto__sub {
  margin: clamp(40px, 5vw, 64px) 0 0;
  font-family: var(--f-mono);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-bone-2);
  max-width: 56ch;
}
.manifesto__num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-rust);
  margin: 0 0 24px;
  display: inline-flex;
  gap: 8px;
}
.manifesto__num::before { content: "+"; }

/* ── Section dividers with the "+" mark inline ─────────────────── */
.divider-mark {
  display: flex;
  justify-content: center;
  padding: clamp(40px, 5vw, 80px) 0;
  font-family: var(--f-mono);
  font-size: 16px;
  color: var(--c-rust);
}

/* ── Refined hero scroll cue ───────────────────────────────────── */
.hero__scroll {
  font-size: 11px;
  letter-spacing: 0.24em;
}

/* ── Beefier nav wordmark ──────────────────────────────────────── */
.nav__wordmark {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ── Section ordinals as massive overlays ──────────────────────── */
.section-num {
  position: absolute;
  top: 24px;
  right: 32px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-muted);
  z-index: 1;
}

/* ── Bigger work grid presence ─────────────────────────────────── */
.work-grid {
  gap: clamp(16px, 2vw, 32px);
}

/* ── Thicker "+" mark with rotation on hover ───────────────────── */
.section-mark {
  font-size: 20px;
  font-weight: 600;
  transition: transform 800ms var(--ease), opacity 400ms var(--ease);
}
.section-mark.is-in { animation: mark-spin 12s linear infinite; }
@keyframes mark-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Atmosphere — turn into MASSIVE pull-quote ────────────────── */
.atmosphere blockquote {
  font-size: clamp(56px, 10vw, 180px) !important;
  line-height: 0.95 !important;
  font-weight: 600;
  letter-spacing: -0.03em !important;
}

/* ── Three Tests ords bigger ──────────────────────────────────── */
.three-tests__grid h3 {
  font-size: clamp(44px, 5vw, 72px) !important;
  font-weight: 600;
}

/* ── Cap card titles bigger ───────────────────────────────────── */
.cap-card h3 {
  font-size: clamp(36px, 4.4vw, 64px) !important;
  font-weight: 600;
}

/* ── Value tile titles bigger ─────────────────────────────────── */
.value h3 {
  font-size: clamp(28px, 3vw, 44px) !important;
  font-weight: 600;
}

/* ── CTA close copy enormously bigger ─────────────────────────── */
.cta-close__copy h2 {
  font-size: clamp(40px, 5.6vw, 88px) !important;
  font-weight: 500;
}

/* ── Atmospheric — alternating black/cream sections ──────────── */
.bg-cream {
  background: #ece9e1;
  color: var(--c-ink);
}
.bg-cream em { color: var(--c-rust); }
.bg-cream em::after { background: var(--c-rust); opacity: 0.22; }

/* ── Massive on-mobile fallback ───────────────────────────────── */
@media (max-width: 720px) {
  .hero__tagline,
  .page-hero__title,
  .display,
  .canon__line,
  .manifesto__line,
  .atmosphere blockquote {
    letter-spacing: -0.03em !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   MOTION — visible regardless of reduced-motion preference
   (these are subtle enough to not violate motion sickness concerns)
   ═══════════════════════════════════════════════════════════════════ */

/* Scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--c-rust);
  z-index: 999;
  transition: width 60ms linear;
}

/* Make hero kinetic always animate */
.split-char {
  transition: transform 700ms var(--ease), opacity 600ms var(--ease) !important;
}

/* Marquee — always run, faster */
.marquee__track {
  animation: marquee 38s linear infinite !important;
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: marquee 50s linear infinite !important; }
}

/* Always animate ken-burns hero */
.hero__video { animation: kenburns 22s ease-out infinite alternate !important; }

/* Scroll-driven scale on canon */
.canon { perspective: 1200px; }
.canon__line {
  display: inline-block;
  transform: scale(var(--canon-scale, 0.9));
  transition: transform 200ms linear;
  transform-origin: center;
}

/* Section reveal: always slide-up + fade, regardless of reduced-motion */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 800ms var(--ease), transform 900ms var(--ease) !important;
}
[data-reveal].is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Custom cursor disabled — was the largest perf cost (mix-blend-difference
   forces a full-page composite repaint per pointer move). Native cursor used. */
.cursor { display: none !important; }
body, a, button, input, select, textarea, [role="button"] { cursor: auto !important; }
a, button, [role="button"] { cursor: pointer !important; }
input, textarea, select { cursor: text !important; }

/* Hero pinned scroll */
.hero {
  position: sticky !important;
  top: 0;
  z-index: 1;
}
section:not(.hero) { position: relative; z-index: 2; background: var(--c-ink); }

/* Pin the canon section */
.canon {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  z-index: 5;
  background: var(--c-ink);
}
.canon + .cta-close { z-index: 10; }

/* Big horizontal scroll work strip */
.work-strip {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  display: flex;
  gap: 24px;
  padding: clamp(40px, 5vw, 80px) var(--gutter);
  scrollbar-width: none;
}
.work-strip::-webkit-scrollbar { display: none; }
.work-strip > * {
  flex: 0 0 calc(100vw - var(--gutter) * 2);
  max-width: 1200px;
  scroll-snap-align: center;
  aspect-ratio: 21 / 9;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  background: var(--c-ink-2);
}
.work-strip img, .work-strip video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Drama on hover — color shift */
.work-tile { isolation: isolate; }
.work-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(239,50,45,0.08), transparent 60%);
  opacity: 0;
  transition: opacity 400ms var(--ease);
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: overlay;
}
.work-tile:hover::after { opacity: 1; }

/* Text spinning trick on canon verb */
.canon__verb {
  display: inline-block;
  transform-origin: center;
}

/* Larger floating deck pill */
.floating-deck {
  font-size: 12px;
  padding: 14px 22px;
}

/* Pull quote drama */
.atmosphere blockquote em::after {
  height: 0.5em !important;
  opacity: 0.3 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FIX — split-the-difference headline sizes + remove sticky chaos
   ═══════════════════════════════════════════════════════════════════ */

/* Dial back from 9vw/156px → ~7vw/118px (between original 92px and bloated 156px) */
.hero__tagline {
  font-size: clamp(48px, 7vw, 118px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.03em !important;
  font-weight: 500;
  max-width: 24ch !important;
}

.page-hero__title {
  font-size: clamp(52px, 7.6vw, 124px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.03em !important;
  font-weight: 500;
}

.display {
  font-size: clamp(40px, 6.2vw, 100px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.025em !important;
  font-weight: 500;
}

.intro__statement,
.contact__headline {
  font-size: clamp(40px, 6.2vw, 100px) !important;
  line-height: 1.02 !important;
}

.canon__line {
  font-size: clamp(64px, 10vw, 168px) !important;
  line-height: 0.96 !important;
  font-weight: 600;
  letter-spacing: -0.035em !important;
}

.atmosphere blockquote {
  font-size: clamp(48px, 7.4vw, 120px) !important;
  line-height: 1 !important;
  font-weight: 500;
  letter-spacing: -0.025em !important;
}

.three-tests__grid h3 {
  font-size: clamp(36px, 4vw, 56px) !important;
  font-weight: 500;
}

.cap-card h3 {
  font-size: clamp(30px, 3.6vw, 50px) !important;
  font-weight: 500;
}

.value h3 {
  font-size: clamp(22px, 2.4vw, 32px) !important;
  font-weight: 500;
}

.cta-close__copy h2 {
  font-size: clamp(32px, 4.4vw, 64px) !important;
  font-weight: 500;
}

/* REMOVE the sticky chaos that broke layout */
.hero { position: relative !important; }
.canon {
  position: relative !important;
  height: auto !important;
  display: block !important;
  padding: clamp(80px, 10vw, 140px) 0 !important;
  text-align: center;
}
.canon .container { text-align: center; }
section:not(.hero) { background: transparent !important; }

/* The marker highlight on em — softer so it doesn't dominate */
em::after {
  height: 0.32em !important;
  bottom: 0.06em !important;
  opacity: 0.14 !important;
}

/* Hero meta sits below tagline cleanly */
.hero__content { padding-bottom: 0; }
.hero__meta { margin-top: 8px; }

/* Reduce wrapper max-width so giant type doesn't bleed off */
.display, .hero__tagline, .page-hero__title {
  max-width: 18ch;
}
.display + *, .page-hero__title + * { max-width: 60ch; }

/* Atmosphere blockquote — smaller max-width */
.atmosphere blockquote { max-width: 16ch; }

/* ── Lottie icons in cards ─────────────────────────────────────── */
.lottie-icon {
  width: clamp(72px, 8vw, 120px);
  height: clamp(72px, 8vw, 120px);
  margin: 0 0 24px;
  display: block;
  position: relative;
}
.lottie-icon svg {
  width: 100% !important;
  height: 100% !important;
}
/* Tinted lottie — invert dark on dark bg */
.three-tests__grid .lottie-icon,
.cap-card .lottie-icon,
.value .lottie-icon {
  filter: invert(1) hue-rotate(180deg) brightness(1.1);
  mix-blend-mode: lighten;
}

/* ═══════════════════════════════════════════════════════════════════
   CINEMATIC MOTION — native to TACTIC's vocabulary
   ═══════════════════════════════════════════════════════════════════ */

/* ── Cine icons (replace lottie-icon) ────────────────────────────── */
.cine-icon {
  display: block;
  width: clamp(48px, 5vw, 72px);
  height: clamp(48px, 5vw, 72px);
  margin: 0 0 24px;
  color: var(--c-cream);
}
.cine-icon svg { width: 100%; height: 100%; overflow: visible; }

/* Pulse: audio waveform bars - heartbeat-like rhythm */
.cine-icon--pulse .b {
  transform-origin: center;
  animation: pulse-bar 1.6s ease-in-out infinite;
}
.cine-icon--pulse .b:nth-child(1) { animation-delay: 0s; }
.cine-icon--pulse .b:nth-child(2) { animation-delay: 0.1s; }
.cine-icon--pulse .b:nth-child(3) { animation-delay: 0.2s; }
.cine-icon--pulse .b:nth-child(4) { animation-delay: 0.3s; }
.cine-icon--pulse .b:nth-child(5) { animation-delay: 0.4s; }
.cine-icon--pulse .b:nth-child(6) { animation-delay: 0.5s; }
@keyframes pulse-bar {
  0%, 100% { transform: scaleY(0.6); }
  50%      { transform: scaleY(1.2); }
}

/* Grid: dots pulsing in sequence */
.cine-icon--grid .g {
  transform-origin: center;
  animation: grid-pulse 2.4s ease-in-out infinite;
}
.cine-icon--grid .g:nth-child(1) { animation-delay: 0.0s; }
.cine-icon--grid .g:nth-child(2) { animation-delay: 0.1s; }
.cine-icon--grid .g:nth-child(3) { animation-delay: 0.2s; }
.cine-icon--grid .g:nth-child(4) { animation-delay: 0.3s; }
.cine-icon--grid .g:nth-child(5) { animation-delay: 0.4s; }
.cine-icon--grid .g:nth-child(6) { animation-delay: 0.5s; }
.cine-icon--grid .g:nth-child(7) { animation-delay: 0.6s; }
.cine-icon--grid .g:nth-child(8) { animation-delay: 0.7s; }
.cine-icon--grid .g:nth-child(9) { animation-delay: 0.8s; }
@keyframes grid-pulse {
  0%, 100% { transform: scale(0.6); opacity: 0.4; }
  50%      { transform: scale(1.4); opacity: 1; }
}

/* Link: Venn circles drifting / intersecting */
.cine-icon--link .r1 {
  transform-origin: 22px 30px;
  animation: link-r1 3s ease-in-out infinite;
}
.cine-icon--link .r2 {
  transform-origin: 38px 30px;
  animation: link-r2 3s ease-in-out infinite;
}
@keyframes link-r1 {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(6px); }
}
@keyframes link-r2 {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-6px); }
}

/* Camera/Cube/Refine icons — for capability cards. Use SVG inline; fallback to + */
.cap-card .cine-icon { color: var(--c-rust); opacity: 0.85; }

/* ── Aperture iris page transition (replaces page-trans bar) ────── */
.page-trans {
  background: transparent !important;
}
.page-trans__bar { display: none !important; }
.page-trans::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-ink);
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 700ms cubic-bezier(0.85, 0, 0.15, 1);
}
.page-trans.is-active::before {
  clip-path: circle(150% at 50% 50%);
}
.page-trans__mark {
  position: relative;
  z-index: 2;
}

/* ── Work tile color-sweep (desaturated → full grade on hover) ──── */
.work-tile img,
.work-tile video {
  filter: saturate(0.5) contrast(1.05) brightness(0.85);
  transition: filter 800ms var(--ease), transform 1000ms var(--ease);
}
.work-tile:hover img,
.work-tile:hover video {
  filter: saturate(1.05) contrast(1.08) brightness(1);
}
/* Color bar that sweeps across on hover */
.work-tile { isolation: isolate; }
.work-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 0%, rgba(239,50,45,0.16) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform 900ms var(--ease);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}
.work-tile:hover::before { transform: translateX(100%); }

/* ── Frame mask reveal on hero image (clapper-like) ─────────────── */
.hero__media::before,
.hero__media::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 50%;
  background: var(--c-ink);
  z-index: 1;
  animation: frame-pull 1.2s cubic-bezier(0.7, 0, 0.2, 1) 0.4s forwards;
}
.hero__media::before { top: 0; transform-origin: top; }
.hero__media::after  { bottom: 0; transform-origin: bottom; }
@keyframes frame-pull {
  to { transform: scaleY(0); }
}

/* ── Hero tagline — clean, no per-frame skew ──────────────────── */
.hero__tagline {
  transform: none;
}

/* ── Marquee accent — first letter of each word in coral ────────── */
.marquee__track span {
  position: relative;
}
.marquee__track .dot {
  background: var(--c-rust) !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px;
  opacity: 1 !important;
}

/* ── Section "+" registration: bigger, slower spin ──────────────── */
.section-mark {
  font-size: 28px !important;
  font-weight: 600;
  color: var(--c-rust);
  font-family: var(--f-mono);
  opacity: 0;
}
.section-mark.is-in { animation: mark-spin 24s linear infinite, mark-fade 800ms var(--ease) forwards; }
@keyframes mark-fade { to { opacity: 0.5; } }

/* ── Hero scroll cue — bigger floaty bouncing ──────────────────── */
.hero__scroll {
  opacity: 0.85;
  font-size: 11px;
  padding: 12px 20px;
}

/* ── Number ticker on scroll progress (top bar) ─────────────────── */
.scroll-progress {
  background: linear-gradient(to right, var(--c-rust), var(--c-cream));
}

/* ── Subtle horizontal drift on the marquee text on scroll ──────── */

/* ── Cine ICON for capability cards (replaces lottie-icon) ──────── */
.cap-card .cine-icon {
  width: 56px;
  height: 56px;
  display: inline-block;
  position: relative;
  margin-bottom: 24px;
}

/* ── Scope (aperture/crosshair) ─────────────────────────────────── */
.cine-icon--scope .o {
  transform-origin: center;
  animation: scope-rotate 12s linear infinite;
}
.cine-icon--scope .m {
  transform-origin: center;
  animation: scope-rotate-r 8s linear infinite;
}
@keyframes scope-rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes scope-rotate-r { from { transform: rotate(0); } to { transform: rotate(-360deg); } }

/* ── Reel (film reel rotating) ──────────────────────────────────── */
.cine-icon--reel { transform-origin: center; }
.cine-icon--reel svg {
  transform-origin: center;
  animation: reel-spin 6s linear infinite;
}
@keyframes reel-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ── Frame (video frame with playhead) ──────────────────────────── */
.cine-icon--frame .fp {
  animation: frame-play 3s ease-in-out infinite;
}
@keyframes frame-play {
  0%   { transform: translateX(-18px); }
  100% { transform: translateX(18px); }
}
.cine-icon--frame .fr {
  stroke-dasharray: 144;
  stroke-dashoffset: 144;
  animation: frame-draw 3s ease-out forwards infinite;
}
@keyframes frame-draw {
  0% { stroke-dashoffset: 144; }
  60%, 100% { stroke-dashoffset: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   TYPE SCALE — final authoritative consolidation
   Refined premium-agency scale. Everything below this overrides prior drift.
   ═══════════════════════════════════════════════════════════════════ */

/* Hero — the largest non-canon type on the page */
.hero__tagline {
  font-size: clamp(44px, 6.2vw, 96px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.028em !important;
  font-weight: 500 !important;
  max-width: 22ch !important;
  margin: 0 0 clamp(24px, 3vw, 36px) !important;
}

/* Page heroes (Work, Process, About, Notes, Contact) */
.page-hero__title {
  font-size: clamp(48px, 6.6vw, 108px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.028em !important;
  font-weight: 500 !important;
  max-width: 18ch !important;
  margin: 0 0 24px !important;
}

/* Display H2s (positioning, stakes, capabilities, expertise sections) */
.display,
.intro__statement,
.contact__headline {
  font-size: clamp(36px, 5.4vw, 80px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.022em !important;
  font-weight: 500 !important;
  max-width: 22ch;
}

/* Atmosphere pull-quote — slightly larger than display */
.atmosphere blockquote {
  font-size: clamp(44px, 6.2vw, 100px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.024em !important;
  font-weight: 500 !important;
  max-width: 16ch !important;
}

/* Canon "Make it Count." — brand statement, allowed bigger */
.canon__line {
  font-size: clamp(64px, 9vw, 168px) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.035em !important;
  font-weight: 600 !important;
}

/* Three Tests headers */
.three-tests__grid h3 {
  font-size: clamp(32px, 3.6vw, 52px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.018em !important;
  font-weight: 500 !important;
  margin: 0 0 14px !important;
}

/* Capability card titles */
.cap-card h3 {
  font-size: clamp(28px, 3.2vw, 44px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.018em !important;
  font-weight: 500 !important;
  margin: 0 0 16px !important;
}

/* Value card titles (about page) */
.value h3 {
  font-size: clamp(20px, 2.2vw, 28px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.012em !important;
  font-weight: 500 !important;
  margin: 0 0 8px !important;
}

/* Expertise tile titles */
.exp-tile h3 {
  font-size: clamp(20px, 2vw, 26px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.012em !important;
  font-weight: 500 !important;
  margin: 0 0 10px !important;
}

/* CTA close copy */
.cta-close__copy h2 {
  font-size: clamp(28px, 3.6vw, 52px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
  font-weight: 500 !important;
}

/* CTA close wordmark — keep big, it's a logotype moment */
.cta-close__wordmark {
  font-size: clamp(48px, 6.4vw, 96px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.018em !important;
  line-height: 1 !important;
}

/* Em accents — match parent type, don't grow it */
em { font-weight: inherit !important; }

/* Marker highlight under em — softer, subtler */
em::after {
  height: 0.28em !important;
  bottom: 0.06em !important;
  opacity: 0.13 !important;
  border-radius: 1px !important;
}

/* Body, kickers, ords stay where they are */
.kicker { margin: 0 0 1.2em !important; }

/* Section padding — slightly tighter */
section { padding: clamp(80px, 10vw, 140px) 0 !important; }
.hero, .marquee, .canon { padding: 0 !important; }
.canon { padding: clamp(80px, 10vw, 140px) 0 !important; }

/* Section head margin tighter */
.section-head { margin-bottom: clamp(40px, 5vw, 64px) !important; }

/* Cine icons — prominent, hero-card scale (bumped up after live-site
   audit found them barely visible on Three Tests / Capabilities cards). */
.cine-icon {
  width: clamp(56px, 5.5vw, 84px) !important;
  height: clamp(56px, 5.5vw, 84px) !important;
  margin: 0 0 22px !important;
}

/* Three Tests articles — tighten gaps */
.three-tests__grid {
  gap: clamp(28px, 3.5vw, 48px) !important;
  margin-top: clamp(32px, 4vw, 48px) !important;
}

/* Cap grid — tighter */
.cap-grid { gap: clamp(28px, 3.5vw, 48px) !important; }

/* Hero scroll cue tighter padding */
.hero__scroll {
  padding: 8px 14px !important;
  font-size: 10px !important;
}

/* Floating deck pill — REMOVED per direction. Hard-hide if any stragglers render. */
.floating-deck { display: none !important; }

/* ════════════════════════════════════════════════════════════════════
   END-PAGE FIX — gold close type sized + max-width corrected,
   footer newsletter signup styles, image-slot wireframe placeholders,
   and aggressive perf cleanup so the page stops feeling laggy.
   ════════════════════════════════════════════════════════════════════ */

/* ── Gold close: dedicated h class so it doesn't inherit .display 18ch clamp.
   Scoped through .cta-close__copy to beat earlier `.cta-close__copy h2 !important` rules. ── */
.cta-close__copy .cta-close__h {
  margin: 0 !important;
  color: #fff !important;
  font-family: var(--f-display) !important;
  font-weight: 500 !important;
  font-size: clamp(30px, 3.6vw, 56px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
  max-width: 32ch !important;
}
.cta-close__copy .cta-close__h em {
  color: #EF322D !important;
  font-style: normal !important;
  font-weight: 500 !important;
}
.cta-close__copy .cta-close__h em::after { display: none !important; }
@media (max-width: 880px) {
  .cta-close__copy .cta-close__h {
    max-width: 100% !important;
    font-size: clamp(28px, 7.2vw, 42px) !important;
  }
}

/* ── Footer rebuild: split into meta + newsletter inline form ── */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.footer { padding: 28px 0 !important; }
.footer__inner {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 24px;
  flex-wrap: wrap;
}
.footer__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.footer__divider { opacity: 0.4; }
.footer__sub {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.footer__sub-label { color: var(--c-muted); }
.footer__sub input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-line-2);
  color: var(--c-bone);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 6px 4px;
  width: 200px;
  outline: none;
  text-transform: none;
  transition: border-color 200ms var(--ease);
}
.footer__sub input::placeholder { color: rgba(236, 233, 225, 0.4); }
.footer__sub input:focus { border-bottom-color: var(--c-rust); }
.footer__sub button {
  background: transparent;
  border: 0;
  color: var(--c-bone);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 0 6px 6px;
  cursor: pointer;
  transition: color 200ms var(--ease);
}
.footer__sub button:hover { color: var(--c-rust); }
.footer__sub.is-sent .footer__sub-label,
.footer__sub.is-sent input,
.footer__sub.is-sent button { display: none; }
.footer__sub-thanks { color: var(--c-cream); }
.footer__sub.is-sent .footer__sub-thanks::before { content: "Thanks. We'll be in touch."; }
@media (max-width: 720px) {
  .footer__inner { flex-direction: column; align-items: flex-start; }
  .footer__sub input { width: 180px; }
}

/* ── Image-slot wireframe placeholders — visible structure where imagery will live ── */
.img-slot {
  position: relative;
  display: block;
  width: 100%;
  background: var(--c-ink-2);
  border: 1px dashed rgba(236, 233, 225, 0.18);
  border-radius: 4px;
  overflow: hidden;
  color: rgba(236, 233, 225, 0.5);
}
.img-slot::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(236, 233, 225, 0.06);
  pointer-events: none;
}
.img-slot::after {
  content: attr(data-slot);
  position: absolute;
  left: 18px; bottom: 14px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(236, 233, 225, 0.55);
}
.img-slot__plus {
  position: absolute;
  top: 14px; right: 18px;
  font-family: var(--f-mono);
  color: var(--c-rust);
  font-size: 18px;
  opacity: 0.7;
}
.img-slot--16x9   { aspect-ratio: 16 / 9; }
.img-slot--4x5    { aspect-ratio: 4 / 5; }
.img-slot--1x1    { aspect-ratio: 1 / 1; }
.img-slot--21x9   { aspect-ratio: 21 / 9; }
.img-slot--3x4    { aspect-ratio: 3 / 4; }

/* Side-by-side image rail — for the wireframe layout */
.img-rail {
  display: grid;
  gap: clamp(12px, 1.6vw, 24px);
  margin-top: clamp(40px, 5vw, 64px);
}
.img-rail--2 { grid-template-columns: 1fr 1fr; }
.img-rail--3 { grid-template-columns: 1.2fr 1fr 1fr; }
.img-rail--4 { grid-template-columns: repeat(4, 1fr); }
.img-rail--asym { grid-template-columns: 2fr 1fr; }
@media (max-width: 880px) {
  .img-rail--3, .img-rail--4 { grid-template-columns: 1fr 1fr; }
  .img-rail--asym { grid-template-columns: 1fr; }
}

/* Image columns flanking text */
.text-with-image {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.text-with-image--reverse { direction: rtl; }
.text-with-image--reverse > * { direction: ltr; }
@media (max-width: 880px) {
  .text-with-image { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   PERF — kill the worst offenders. Lag culprits diagnosed:
   - Always-on rAF tick for skew + progress bar
   - mix-blend-mode overlay grain animating per-frame across full viewport
   - backdrop-filter blur(14px) on scrolled nav (Safari composites whole page)
   - Cine-icon CSS animations running offscreen
   - Always-running canon scale onScroll
   ════════════════════════════════════════════════════════════════════ */

/* Make the grain static — no animation. The texture stays, the cost goes. */
.grain {
  animation: none !important;
  opacity: 0.045 !important;
  mix-blend-mode: normal !important;
}

/* Drop nav blur cost — keep the surface dark, lose the heavy backdrop-filter */
.nav.is-scrolled {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(10, 10, 10, 0.94) !important;
}

/* Pause cine-icon animations when their card is out of viewport */
.cine-icon.is-paused .b,
.cine-icon.is-paused .g,
.cine-icon.is-paused .r1,
.cine-icon.is-paused .r2,
.cine-icon.is-paused .o,
.cine-icon.is-paused .m,
.cine-icon.is-paused .reel-outer,
.cine-icon.is-paused .fr,
.cine-icon.is-paused .fp { animation-play-state: paused !important; }

/* Cap will-change to elements that actually transform during scroll */
.split-char, .canon__line, .scroll-progress { will-change: transform; }
.section-mark, .grain, .marquee__track { will-change: auto; }

/* Section "+" marks — stop the continuous rotation, only fade in once */
.section-mark { animation: none !important; }

/* HERO PHRASE — colors a wider sub-clause ("why the work matters")
   in warm gold so the whole closing thought reads as the emphasis.
   The marker highlight stays only on the inner <em> ("work matters")
   so the visual hierarchy is: bone body → gold phrase → coral-marker
   pulse on the two anchor words. */
.hero__phrase {
  color: #D4B384;
  -webkit-text-fill-color: #D4B384;
}
/* Em inside .hero__phrase inherits the gold color (so it doesn't
   re-color back to its own gold) but keeps its marker pseudo-element. */
.hero__phrase em {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

/* ════════════════════════════════════════════════════════════════════
   WARM-GOLD EM WORDS — pulled from the pitch deck.
   Flat warm gold-cream (between the pitch's #C2B270 and #C29170 stops)
   so we keep the deck warmth without the background-clip:text + ::after
   stacking issues that were occluding text on some browsers. Solid color
   plays cleanly with the marker pseudo-element underneath.
   ════════════════════════════════════════════════════════════════════ */
em {
  color: #D4B384 !important;
  -webkit-text-fill-color: #D4B384 !important;
  isolation: isolate;
  z-index: 1;
}
/* Em underline highlight — feels like a real marker stroke.
   Variable opacity along its length (uneven absorption), slight skew
   so it doesn't read as a digital rectangle, and a paper-grain noise
   layer for tactile texture. Layered backgrounds compose:
     1. Long horizontal gradient with uneven density stops
     2. Fine SVG noise for paper-absorption grain
   Plus tiny blur for marker bleed and a soft border-radius.
   Animates ON via clip-path when the parent em enters the viewport
   (.is-marked class added by IntersectionObserver in script.js).
   Until then, fully clipped (right side) so the stroke draws itself
   left-to-right. */
em::after {
  /* Coral ink with density falloff at the leading and trailing edges */
  background:
    linear-gradient(94deg,
      rgba(239, 50, 45, 0)    0%,
      rgba(239, 50, 45, 0.95) 9%,
      rgba(239, 50, 45, 1)    50%,
      rgba(239, 50, 45, 0.95) 91%,
      rgba(239, 50, 45, 0)    100%
    ) !important;
  /* Horizontal-bias turbulence carves streaks into the ink, exactly the way
     a real chisel-tip marker leaves uneven density along the stroke. The
     baseFrequency '3.4 0.6' biases noise hugely on X (streaks), the colorMatrix
     amplifies contrast so we get clear opaque/transparent banding, not muddy
     gradient. Tiled horizontally so longer ems get continuous streaks. */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='30'><filter id='ink' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='3.4 0.6' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 2.4 -0.6'/></filter><rect width='100%25' height='100%25' filter='url(%23ink)'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='30'><filter id='ink' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='3.4 0.6' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 2.4 -0.6'/></filter><rect width='100%25' height='100%25' filter='url(%23ink)'/></svg>") !important;
  -webkit-mask-size: 240px 100% !important;
          mask-size: 240px 100% !important;
  -webkit-mask-repeat: repeat-x !important;
          mask-repeat: repeat-x !important;
  /* 1.6x the previous marker height — chunky, real-marker presence */
  height: 0.54em !important;
  bottom: 0.04em !important;
  border-radius: 2px 6px 4px 2px !important;
  transform: skewX(-3deg) translateY(0.5px) rotate(-0.4deg) !important;
  transform-origin: left center !important;
  filter: blur(0.35px) !important;
  opacity: 0.55 !important;
  mix-blend-mode: normal !important;
  /* Keep behind em's text glyph so the highlight reads as under-stroke */
  z-index: -1 !important;
  /* Animate-on: clipped from the right by default, flips to fully
     revealed on .is-marked. Hand-paced cubic-bezier starts slow
     (loading the marker) and finishes with a tiny overshoot (lift-off). */
  clip-path: inset(0 100% 0 0) !important;
  -webkit-clip-path: inset(0 100% 0 0) !important;
  transition: clip-path 820ms cubic-bezier(0.55, 0.05, 0.32, 1.04),
              -webkit-clip-path 820ms cubic-bezier(0.55, 0.05, 0.32, 1.04) !important;
}
em.is-marked::after {
  clip-path: inset(0 0 0 0) !important;
  -webkit-clip-path: inset(0 0 0 0) !important;
}
@media (prefers-reduced-motion: reduce) {
  em::after {
    clip-path: inset(0 0 0 0) !important;
    -webkit-clip-path: inset(0 0 0 0) !important;
    transition: none !important;
  }
}
/* Some places intentionally render em as flat coral/white instead
   of gold — reset the gradient there. */
.cta-close__h em,
.cta-close__copy em {
  background: none !important;
  color: #EF322D !important;
  -webkit-text-fill-color: #EF322D !important;
}
.bg-cream em {
  background: none !important;
  color: var(--c-rust) !important;
  -webkit-text-fill-color: var(--c-rust) !important;
}

/* ════════════════════════════════════════════════════════════════════
   DISC STACK — three concentric horizontal ellipses (white, coral,
   gold). A signature deck motif. Recurring visual element used as
   a section transition marker. Scroll-driven Y-axis rotation makes
   the discs subtly tilt as the user scrolls past.
   ════════════════════════════════════════════════════════════════════ */
.disc-stack {
  position: relative;
  overflow: visible;
  padding: clamp(60px, 8vw, 120px) 0;
}
.disc-stack .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.disc-stack__label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(236, 233, 225, 0.4);
  margin: 0;
}
.disc-stack__svg {
  width: 100%;
  max-width: 880px;
  height: auto;
  display: block;
  perspective: 800px;
  filter: drop-shadow(0 8px 32px rgba(239, 50, 45, 0.04));
}
.disc-stack__svg .disc {
  transform-origin: 50% 50%;
  transform-box: fill-box;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
/* Per-disc colors */
.disc-stack__svg .disc--bone { stroke: var(--c-bone); }
.disc-stack__svg .disc--rust { stroke: #EF322D; }
.disc-stack__svg .disc--gold { stroke: #C29170; }

/* Smaller "stamp" variant for repeating use */
.disc-stack--mark { padding: 40px 0; }
.disc-stack--mark .disc-stack__svg { max-width: 240px; }

/* ════════════════════════════════════════════════════════════════════
   FRAMED DISPLAY — corner-bracket accents around key H2s.
   Used selectively via .display--framed modifier. Top-right + bottom-left
   short hairlines plus a small vertical accent on the left edge,
   echoing the deck's registration framing.
   ════════════════════════════════════════════════════════════════════ */
.display--framed {
  position: relative;
  padding-left: 14px;
}
.display--framed::before {
  content: "";
  position: absolute;
  left: 0; top: 0.18em;
  bottom: 0.32em;
  width: 1px;
  background: linear-gradient(to bottom, transparent 0%, var(--c-cream-2) 18%, var(--c-cream-2) 82%, transparent 100%);
}
.display--framed::after {
  content: "";
  position: absolute;
  right: 0; top: -8px;
  width: 64px; height: 1px;
  background: var(--c-bone);
  opacity: 0.5;
}

/* Section accent rule — short horizontal line at the top-right of
   any section that has class .has-mark. Used on h2 sections to hint
   at the registration framing without being heavy. */
.has-mark .section-head {
  position: relative;
  padding-top: 28px;
}
.has-mark .section-head::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 56px; height: 1px;
  background: var(--c-line-2);
}
.has-mark .section-head::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 1px; height: 14px;
  background: var(--c-rust);
}

/* ════════════════════════════════════════════════════════════════════
   DOSSIER LAYER — subtle research-board polish.
   Paper-texture overlay (two-layer SVG noise: fine grain + large
   variation) selectively applied to interlude sections so the eye
   gets a small texture break between hero content blocks. Plus
   hand-drawn annotation marks that draw themselves on scroll, and
   small mono-spaced "file codes" living in section margins. None of
   it loud. Connective tissue, not a feature.
   ════════════════════════════════════════════════════════════════════ */
.paper-bg {
  position: relative;
}
.paper-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    /* fine paper grain */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>"),
    /* large fibre variation */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='720' height='720'><filter id='q'><feTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='4' seed='9'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23q)'/></svg>");
  background-size: 240px 240px, 720px 720px;
  background-blend-mode: multiply;
  mix-blend-mode: overlay;
  opacity: 0.06;
}
.paper-bg > * { position: relative; z-index: 1; }

/* ════════════════════════════════════════════════════════════════════
   FLOATING BG COLLAGE — page-wide editorial dossier layer.
   Ellipses, registration marks, hairlines, hand-written notes,
   blueprint diagrams (story arcs, lighting, lens, logo grid, aspect
   ratios, storyboard) scattered through the document. Each element
   is positioned via CSS variables (--top, --left, --right) and
   parallaxes via data-parallax. Animates in on scroll-into-view.
   Sits z-index 0 so all real content (z-index 1+) reads on top.
   ════════════════════════════════════════════════════════════════════ */
.bg-collage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  height: 480vh; /* span the natural document height (approx 4-5 viewports) */
}
.bg-collage__el {
  position: absolute;
  top: var(--top, 50vh);
  left: var(--left, auto);
  right: var(--right, auto);
  width: var(--width, auto);
  height: var(--height, auto);
  display: block;
  pointer-events: none;
  opacity: 0;
  /* Use INDIVIDUAL transform properties so they compose independently
     with `transform: ...` continuous animations below. Each transform
     axis lives on its own CSS property so cursor follow, scroll
     parallax, static rotation, enter scale, and keyframe drift can
     all run at once without overwriting each other.
       translate -> cursor follow + enter slide + scroll parallax
       rotate    -> static element rotation (set per-element via --rot)
       scale     -> enter scale
       transform -> reserved for keyframe animations (drift/breathe/spin)
     CSS variables wired by JS:
       --cx, --cy : cursor-driven push (px). Integer values from script.js.
       --py       : scroll parallax push (px). Integer values from the
                    shared scroll ticker — sub-pixel rounding kept jitter
                    out of the layer when scrolling slowly.
       --rot      : static rotation set inline per element (e.g. -2deg).
                    Lives on its own `rotate:` property so the keyframe
                    `transform` in collage-drift cannot stomp it.
       --enterY   : flips from 12px -> 0 on .is-in
       --enterS   : flips from 0.96 -> 1 on .is-in */
  --cx: 0px;
  --cy: 0px;
  --py: 0px;
  --rot: 0deg;
  --enterY: 12px;
  --enterS: 0.96;
  translate: var(--cx) calc(var(--enterY) + var(--cy) + var(--py));
  rotate: var(--rot);
  scale: var(--enterS);
  transition: opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1),
              translate 720ms cubic-bezier(0.22, 1, 0.36, 1),
              scale 1100ms cubic-bezier(0.22, 1, 0.36, 1);
  /* PERF: only translate is animated continuously (cursor follow + parallax).
     Removing opacity/scale/transform from will-change drops 38 compositor
     promotions down to 38 lighter layers — significantly less GPU memory. */
  will-change: translate;
  color: rgba(236, 233, 225, 0.22);
}
.bg-collage__el.is-in {
  opacity: 1;
  --enterY: 0px;
  --enterS: 1;
}
/* After enter, snap cursor follow to a fast easing so it feels live.
   180ms is short enough to track cursor + scroll responsively, long
   enough to smooth out the 6Hz rect-refresh cap. */
.bg-collage__el.is-in {
  transition: opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1),
              translate 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Continuous breath / drift / spin keyframes target `transform` so they
   compose with the `translate`+`scale` cursor logic above. */
@keyframes collage-breathe {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.045) rotate(0.6deg); }
}
@keyframes collage-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33%      { transform: translate(2px, -3px) rotate(0.8deg); }
  66%      { transform: translate(-3px, 2px) rotate(-0.5deg); }
}
@keyframes collage-spin-slow {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes collage-pulse-opacity {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* Plus marks: slow drift only after they enter */
.bg-collage__plus.is-in,
.bg-collage__crosshair.is-in {
  animation: collage-drift 11s ease-in-out infinite;
  animation-delay: var(--anim-delay, 0s);
}
/* Ellipses and stacks: slow breath */
.bg-collage__ellipse.is-in,
.bg-collage__stack.is-in {
  animation: collage-breathe 8s ease-in-out infinite;
  animation-delay: var(--anim-delay, 0s);
  transform-origin: center;
}
/* Notes drift like loose paper */
.bg-collage__note.is-in {
  animation: collage-drift 13s ease-in-out infinite;
  animation-delay: var(--anim-delay, 0s);
}
/* Diagrams pulse opacity rather than transform (preserves geometry) */
.bg-collage__diagram.is-in {
  animation: collage-pulse-opacity 9s ease-in-out infinite;
  animation-delay: var(--anim-delay, 0s);
}

/* SCRIBBLE / DIAGRAM DRAW-IN.
   When .is-in fires, SVG strokes draw themselves L-to-R via
   stroke-dasharray. Default length 800, override per-element with
   inline --scribble-len for longer paths. */
.bg-collage__scribble path,
.bg-collage__scribble polyline,
.bg-collage__scribble line,
.bg-collage__diagram path:not([fill]),
.bg-collage__diagram polyline,
.bg-collage__diagram line {
  stroke-dasharray: var(--scribble-len, 800);
  stroke-dashoffset: var(--scribble-len, 800);
  transition: stroke-dashoffset 1800ms cubic-bezier(0.22, 1, 0.36, 1) var(--draw-delay, 0s);
}
.bg-collage__scribble.is-in path,
.bg-collage__scribble.is-in polyline,
.bg-collage__scribble.is-in line,
.bg-collage__diagram.is-in path:not([fill]),
.bg-collage__diagram.is-in polyline,
.bg-collage__diagram.is-in line {
  stroke-dashoffset: 0;
}

/* "+" registration marks */
.bg-collage__plus {
  font-family: var(--f-mono);
  font-weight: 400;
  color: rgba(239, 50, 45, 0.4);
  line-height: 1;
}

/* Mono file codes / archival stamps */
.bg-collage__code {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(236, 233, 225, 0.22);
  white-space: nowrap;
}

/* Faint hairlines (horizontal + vertical variants) */
.bg-collage__hairline {
  width: var(--width, 120px);
  height: var(--height, 1px);
  background: linear-gradient(to right, rgba(236,233,225,0.0), rgba(236,233,225,0.22), rgba(236,233,225,0.0));
}
.bg-collage__hairline--vert {
  background: linear-gradient(to bottom, rgba(236,233,225,0.0), rgba(236,233,225,0.22), rgba(236,233,225,0.0));
}

/* Tape-strip ephemera. Rotation lives on the individual `rotate:`
   property (via --rot fallback) so the keyframe `transform` doesn't
   stomp it once .is-in fires. */
.bg-collage__tape {
  width: 84px;
  height: 22px;
  background: rgba(236, 233, 225, 0.06);
  --rot: -3deg;
  border-left: 1px dashed rgba(236, 233, 225, 0.1);
  border-right: 1px dashed rgba(236, 233, 225, 0.1);
}

/* Bracket character treated as an editorial mark */
.bg-collage__bracket {
  font-family: var(--f-display);
  font-size: 38px;
  font-weight: 300;
  color: rgba(194, 145, 112, 0.32);
  line-height: 1;
}

/* Hand-written research notes (Caveat fallback chain) */
.bg-collage__note {
  font-family: 'Caveat', 'Bradley Hand', 'Marker Felt', cursive;
  font-size: 18px;
  color: rgba(236, 233, 225, 0.28);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.bg-collage__note--coral { color: rgba(239, 50, 45, 0.55); }

/* Ellipses, stacks, diagrams render at their inline-styled width */
.bg-collage__ellipse,
.bg-collage__ellipse-big,
.bg-collage__stack,
.bg-collage__crosshair,
.bg-collage__diagram,
.bg-collage__scribble {
  display: block;
  height: auto;
}

/* Reduced motion: instant reveal, no transform */
@media (prefers-reduced-motion: reduce) {
  .bg-collage__el {
    opacity: 0.7;
    transform: none;
    transition: none;
  }
}

/* ════════════════════════════════════════════════════════════════════
   ATMOSPHERIC LIGHT RAYS + HAZE — depth layer.
   FIXED-position layer over the viewport. Scroll-parallax driven by
   data-parallax shifts elements so they feel page-relative without
   the body { position: relative } trap that broke hero stacking.
   ════════════════════════════════════════════════════════════════════ */
.bg-atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  height: 100vh;
}
.bg-atmosphere .ray,
.bg-atmosphere .haze {
  position: absolute;
  pointer-events: none;
  display: block;
  will-change: transform;
}
/* Light rays — angled bright streaks emanating from off-screen sources */
.bg-atmosphere .ray {
  width: 80vw;
  height: 80vh;
  background:
    linear-gradient(112deg,
      transparent 38%,
      rgba(212, 179, 132, 0.05) 48%,
      rgba(212, 179, 132, 0.09) 52%,
      transparent 62%);
  /* PERF: was filter: blur(40px) + mix-blend-mode: screen — both forced
     full-page composites. Soft transparent gradient lands the same
     "ray" feel without the blur kernel cost. */
  opacity: 0.7;
}
.bg-atmosphere .ray--1 { top: 8vh;   left: -20vw;  transform: rotate(-12deg); }
.bg-atmosphere .ray--2 { top: 110vh; right: -30vw; transform: rotate(18deg);
  background: linear-gradient(106deg, transparent 40%, rgba(239,50,45,0.05) 50%, rgba(239,50,45,0.08) 53%, transparent 64%); }
.bg-atmosphere .ray--3 { top: 260vh; left: -25vw;  transform: rotate(-22deg);
  background: linear-gradient(118deg, transparent 42%, rgba(236,233,225,0.05) 51%, rgba(236,233,225,0.07) 54%, transparent 65%); }

/* Haze — soft fog blobs giving cinematic depth separation.
   PERF: was filter: blur(120px) on a 70vw×70vh element, which is one
   of the heaviest filter operations possible (huge convolution kernel
   x large surface). Switched to a radial-gradient transparent fade —
   visually identical, basically free to paint. */
.bg-atmosphere .haze {
  width: 70vw;
  height: 70vh;
  border-radius: 50%;
  opacity: 0.45;
  background: radial-gradient(circle at center,
    var(--haze-tint, rgba(236, 233, 225, 0.18)) 0%,
    var(--haze-tint, rgba(236, 233, 225, 0.10)) 35%,
    transparent 65%);
}
.bg-atmosphere .haze--1 {
  top: 30vh; right: -15vw;
  background: radial-gradient(closest-side, rgba(194, 145, 112, 0.10), rgba(194, 145, 112, 0) 70%);
}
.bg-atmosphere .haze--2 {
  top: 140vh; left: -20vw;
  background: radial-gradient(closest-side, rgba(239, 50, 45, 0.06), rgba(239, 50, 45, 0) 70%);
}
.bg-atmosphere .haze--3 {
  top: 240vh; right: -25vw;
  background: radial-gradient(closest-side, rgba(236, 233, 225, 0.05), rgba(236, 233, 225, 0) 70%);
}
.bg-atmosphere .haze--4 {
  top: 360vh; left: -15vw;
  background: radial-gradient(closest-side, rgba(194, 178, 112, 0.08), rgba(194, 178, 112, 0) 70%);
}

@media (prefers-reduced-motion: reduce) {
  .bg-atmosphere .ray, .bg-atmosphere .haze { transform: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   HAMBURGER NAV + FULLSCREEN OVERLAY
   ════════════════════════════════════════════════════════════════════ */
.nav__links { display: none !important; }
.nav__hamburger {
  width: 44px;
  height: 44px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0 4px;
  margin-left: 12px;
  z-index: 100;
  position: relative;
}
.nav__hamburger-bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--c-bone);
  transition: transform 320ms cubic-bezier(0.65, 0, 0.35, 1),
              opacity 220ms cubic-bezier(0.65, 0, 0.35, 1),
              width 220ms cubic-bezier(0.65, 0, 0.35, 1);
}
.nav__hamburger-bar:nth-child(2) { width: 14px; }
.nav__hamburger-bar:nth-child(3) { width: 18px; }
.nav__hamburger.is-active .nav__hamburger-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
  width: 22px;
}
.nav__hamburger.is-active .nav__hamburger-bar:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.nav__hamburger.is-active .nav__hamburger-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
  width: 22px;
}

/* CLOTH-SIM HAMBURGER REVEAL.
   The overlay enters as a series of vertical "panels" that drop from
   above with staggered delays — feels like a piece of cloth unfurling
   over the viewport rather than a flat fade. JS toggles .is-open on
   the parent; CSS does the rest. Panels are clip-pathed to slabs of
   the viewport so each one slides independently. */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: transparent;
  opacity: 1;
  visibility: hidden;
  /* When closed, snap visibility off after the panels finish lifting */
  transition: visibility 0s linear 720ms;
  display: flex;
  align-items: stretch;
  justify-content: center;
  pointer-events: none;
}
.nav-overlay.is-open {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s linear 0s;
}
/* Cloth panels: 7 vertical slabs that drop in / lift out.
   Each panel is the full viewport size with a clip-path slab; only
   its slab is visible. Translate Y goes from -110% (offscreen above)
   to 0% (settled). Different per-panel translate transitions give
   the wobble/cloth-fall feel. */
.nav-overlay__cloth {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.nav-overlay__panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg,
    rgba(8, 8, 8, 1) 0%,
    rgba(14, 14, 14, 1) 100%);
  /* Each panel only paints its slab — clip-path inset(top right bottom left) */
  clip-path: inset(0 calc(100% - var(--slab-end, 14.29%)) 0 var(--slab-start, 0%));
  transform: translateY(-110%);
  transition: transform 720ms cubic-bezier(0.5, 1.6, 0.4, 1);
  transition-delay: var(--delay, 0ms);
  will-change: transform;
}
.nav-overlay.is-open .nav-overlay__panel {
  transform: translateY(0);
  /* Open uses overshoot easing for the cloth bounce */
  transition: transform 760ms cubic-bezier(0.34, 1.56, 0.55, 1);
  transition-delay: var(--delay, 0ms);
}
/* Closing pulls them up, slightly faster, with reverse stagger so
   the right side leaves first (felt: cloth being yanked to the side). */
.nav-overlay:not(.is-open) .nav-overlay__panel {
  transition: transform 580ms cubic-bezier(0.6, 0, 0.4, 1);
  transition-delay: var(--close-delay, 0ms);
}
/* Coral accent stripe: a thin vertical bar that drops slightly behind
   the rest of the cloth — visual signal that the brand color is the
   leading edge of the unfurl. */
.nav-overlay__accent {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.nav-overlay__accent-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 4px;
  background: var(--c-coral, #EF322D);
  transform: translateY(-110%);
  transition: transform 760ms cubic-bezier(0.34, 1.56, 0.55, 1);
  transition-delay: var(--bar-delay, 0ms);
  will-change: transform;
}
.nav-overlay.is-open .nav-overlay__accent-bar {
  transform: translateY(0);
}
.nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear;
}
.nav-overlay__inner {
  width: 100%;
  max-width: 1320px;
  padding: 88px clamp(24px, 5vw, 80px) clamp(40px, 6vw, 80px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
.nav-overlay__kicker {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-rust);
  margin: 0 0 8px;
}
.nav-overlay__kicker::before {
  content: "● ";
  color: var(--c-rust);
}
.nav-overlay__links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: clamp(40px, 6vw, 80px) 0 0;
  border-top: 1px solid var(--c-line);
}
.nav-overlay__links a {
  display: flex;
  align-items: baseline;
  gap: clamp(20px, 3vw, 36px);
  padding: clamp(18px, 2.4vw, 28px) 0;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-bone);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(36px, 5.4vw, 80px);
  line-height: 1;
  letter-spacing: -0.02em;
  transition: color 240ms var(--ease), padding-left 320ms cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  text-decoration: none;
  opacity: 0;
  transform: translateY(20px);
}
.nav-overlay.is-open .nav-overlay__links a {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 580ms cubic-bezier(0.22, 1, 0.36, 1),
              color 240ms var(--ease),
              padding-left 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-overlay.is-open .nav-overlay__links a:nth-child(1) { transition-delay: 80ms; }
.nav-overlay.is-open .nav-overlay__links a:nth-child(2) { transition-delay: 140ms; }
.nav-overlay.is-open .nav-overlay__links a:nth-child(3) { transition-delay: 200ms; }
.nav-overlay.is-open .nav-overlay__links a:nth-child(4) { transition-delay: 260ms; }
.nav-overlay.is-open .nav-overlay__links a:nth-child(5) { transition-delay: 320ms; }
.nav-overlay.is-open .nav-overlay__links a:nth-child(6) { transition-delay: 380ms; }
.nav-overlay__num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(236, 233, 225, 0.4);
  font-weight: 400;
  flex: 0 0 auto;
}
.nav-overlay__label {
  flex: 1;
}
.nav-overlay__links a:hover {
  color: var(--c-cream);
  padding-left: 12px;
}
.nav-overlay__links a:hover .nav-overlay__num { color: var(--c-rust); }
.nav-overlay__links a.is-current::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--c-rust);
  transform: translateY(-50%);
}
.nav-overlay__foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--c-line);
}
.nav-overlay__foot p, .nav-overlay__foot a {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.4;
  color: rgba(236, 233, 225, 0.78);
  margin: 0;
}
.nav-overlay__foot a:hover { color: var(--c-rust); }
.nav-overlay__foot-kicker {
  font-family: var(--f-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(236, 233, 225, 0.45) !important;
  margin: 0 0 6px !important;
}
@media (max-width: 720px) {
  .nav-overlay__foot { grid-template-columns: 1fr; gap: 18px; }
}

/* ════════════════════════════════════════════════════════════════════
   BOLD WATCH REEL — confident hero anchor instead of small ghost
   ════════════════════════════════════════════════════════════════════ */
.hero__watch--bold {
  padding: 16px 22px 16px 18px !important;
  gap: 14px !important;
  background: rgba(239, 50, 45, 0.95) !important;
  border-color: rgba(239, 50, 45, 0.95) !important;
  color: #fff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  margin-top: 28px !important;
  box-shadow: 0 8px 32px rgba(239, 50, 45, 0.22);
}
.hero__watch--bold:hover {
  background: #ef322d !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 40px rgba(239, 50, 45, 0.32);
}
.hero__watch--bold .hero__watch-icon {
  width: 28px; height: 28px;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
}
.hero__watch--bold .hero__watch-label {
  font-size: 13px;
  letter-spacing: 0.16em;
  font-weight: 600;
}
.hero__watch--bold .hero__watch-meta {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.65);
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

/* ════════════════════════════════════════════════════════════════════
   COLOR WIPE — elastic spring-driven coral wave that sweeps across
   the viewport when crossing major section boundaries. JS sets a
   transform via spring physics; CSS owns the visual. The wipe is a
   tall coral skewed strip that overshoots, oscillates, and settles.
   ════════════════════════════════════════════════════════════════════ */
.color-wipe {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  transform: translate3d(-120%, 0, 0) skewX(-8deg);
  background:
    linear-gradient(96deg,
      transparent 0%,
      rgba(239, 50, 45, 0.0) 28%,
      rgba(239, 50, 45, 0.20) 38%,
      rgba(239, 50, 45, 0.42) 50%,
      rgba(239, 50, 45, 0.20) 62%,
      rgba(239, 50, 45, 0.0) 72%,
      transparent 100%);
  filter: blur(2px);
  mix-blend-mode: screen;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .color-wipe { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   AUDIT FIXES — bg-collage layering, marquee/nav z-index, hide
   wireframe img-slots that read as broken/placeholder.
   ════════════════════════════════════════════════════════════════════ */

/* Nav must always sit on top of marquee + bg-collage */
.nav { z-index: 80 !important; position: sticky; top: 0; }
.nav__inner {
  background: rgba(10, 10, 10, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.marquee { z-index: 1 !important; position: relative; }

/* Image-slot wireframes — Claude Design feedback: they read as
   "leaking past the wireframing stage." Hide entirely now;
   the bg-collage layer handles texture/depth in the negative space. */
.img-slot { display: none !important; }
.img-rail { display: none !important; }

/* Sections that hold content sit at z-index 2 so they read above
   bg-collage (z-index 0) and bg-atmosphere (z-index 0).
   IMPORTANT: nav-overlay and lightbox have their OWN position rules
   (fixed). Do NOT include them here — that breaks layout. */
.marquee, .stakes, .positioning, .three-tests, .selected-work,
.atmosphere, .motion-vocab, .bts, .capabilities, .expertise,
.proof, .canon, .cta-close, .footer,
.page-hero, .work-section, .contact-form {
  position: relative;
  z-index: 2;
}
/* Hero gets isolated stacking — its internal layers (media -1, scrim,
   content) rely on hero owning the stacking context. */
.hero { position: relative; z-index: 2; isolation: isolate; }

/* Hero stacking — restore z-index: -1 on hero__media (the video sits
   behind hero content via the original CSS architecture). The
   `body { position: relative }` change broke this; we revert that
   instead and use a wrapper for bg layers. */

/* ════════════════════════════════════════════════════════════════════
   FULL FOOTER — five-column editorial close. Replaces the old
   single-line strip. Wordmark + tagline, two studio addresses,
   direct contact, index of pages, social. Newsletter row mid.
   Bottom: copyright + index code.
   ════════════════════════════════════════════════════════════════════ */
.footer--full {
  padding: clamp(64px, 8vw, 120px) 0 24px !important;
  border-top: 1px solid var(--c-line) !important;
  position: relative;
  overflow: hidden;
}
.footer--full .footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: clamp(20px, 4vw, 48px);
  margin-bottom: clamp(40px, 6vw, 64px);
}
@media (max-width: 880px) {
  .footer--full .footer__top {
    grid-template-columns: 1fr 1fr;
  }
  .footer--full .footer__brand { grid-column: 1 / -1; margin-bottom: 24px; }
}
.footer__wordmark {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(36px, 4.4vw, 64px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--c-bone);
  margin: 0 0 14px;
}
.footer__tagline {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(236, 233, 225, 0.65);
  max-width: 28ch;
  margin: 0;
}
.footer__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer__col-kicker {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-rust);
  margin: 0 0 10px;
}
.footer__col a {
  font-family: var(--f-body);
  font-size: 14px;
  color: rgba(236, 233, 225, 0.85);
  text-decoration: none;
  transition: color 220ms var(--ease);
  line-height: 1.5;
}
.footer__col a:hover { color: var(--c-rust); }
.footer__col-meta {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(236, 233, 225, 0.4);
  margin: 12px 0 0;
}
.footer__addr {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.4;
  color: rgba(236, 233, 225, 0.85);
  margin: 0 0 8px;
}
.footer__addr-city {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(236, 233, 225, 0.4);
}
.footer__sub-row {
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  padding: 18px 0;
  margin-bottom: 24px;
}
.footer--full .footer__sub-row .footer__sub {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer--full .footer__sub-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-rust);
}
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(236, 233, 225, 0.35);
}
.footer__bottom-meta {
  font-family: var(--f-mono);
}
@media (max-width: 720px) {
  .footer__bottom { flex-direction: column; gap: 8px; align-items: flex-start; }
}

/* File code — small mono ID stamp for sections, lives in the
   margin. Reads like a director's slate or archival reference. */
.file-code {
  position: absolute;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(236, 233, 225, 0.22);
  pointer-events: none;
  white-space: nowrap;
  z-index: 1;
}
.file-code--tl { top: clamp(20px, 3vw, 36px); left: clamp(20px, 3vw, 56px); }
.file-code--tr { top: clamp(20px, 3vw, 36px); right: clamp(20px, 3vw, 56px); }
.file-code--bl { bottom: clamp(20px, 3vw, 36px); left: clamp(20px, 3vw, 56px); }
.file-code--br { bottom: clamp(20px, 3vw, 36px); right: clamp(20px, 3vw, 56px); }
.file-code__dot {
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 999px;
  background: var(--c-rust);
  vertical-align: middle;
  margin-right: 6px;
  opacity: 0.7;
}

/* Annotation marks — pen-stroke SVGs that draw themselves on scroll.
   Use sparingly: one or two per page, as quiet research-board accents.
   The .is-drawn class flips stroke-dashoffset to 0. */
.annot {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  color: rgba(236, 233, 225, 0.55);
}
.annot path,
.annot circle,
.annot polyline,
.annot line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  transition: stroke-dashoffset 1400ms cubic-bezier(0.65, 0, 0.35, 1) 200ms;
}
.annot.is-drawn path,
.annot.is-drawn circle,
.annot.is-drawn polyline,
.annot.is-drawn line {
  stroke-dashoffset: 0;
}
.annot--coral { color: rgba(239, 50, 45, 0.7); }

/* On hover over the parent display heading, annotations subtly
   shift like a hand jittered the page — tasteful expert touch. */
@media (hover: hover) and (pointer: fine) {
  .display:hover + .annot,
  .display:hover .annot,
  .annot:hover {
    transform: translate(0.5px, -0.5px) rotate(0.15deg);
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .annot path, .annot circle, .annot polyline, .annot line {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   HERO — Watch Reel button + fullscreen lightbox
   ════════════════════════════════════════════════════════════════════ */
.hero__watch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 11px 18px 11px 14px;
  border: 1px solid var(--c-line-2);
  border-radius: 999px;
  background: rgba(10,10,10,0.45);
  color: var(--c-bone);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 250ms var(--ease), border-color 250ms var(--ease), transform 200ms var(--ease);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.hero__watch:hover {
  background: rgba(239, 50, 45, 0.92);
  border-color: var(--c-rust);
  color: #fff;
  transform: translateY(-1px);
}
.hero__watch-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: inherit;
}
.hero__watch-icon svg { width: 9px; height: 9px; transform: translateX(1px); }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.lightbox.is-open {
  display: flex;
  pointer-events: auto;
}
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 320ms var(--ease);
  cursor: pointer;
}
.lightbox.is-open .lightbox__backdrop { opacity: 1; }
.lightbox__frame {
  position: relative;
  width: min(92vw, 1280px);
  max-height: 86vh;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
  transform: scale(0.96);
  opacity: 0;
  transition: transform 380ms cubic-bezier(0.22,1,0.36,1), opacity 320ms var(--ease);
  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
}
.lightbox.is-open .lightbox__frame {
  transform: scale(1);
  opacity: 1;
}
.lightbox__video {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
}
.lightbox__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(236, 233, 225, 0.3);
  background: rgba(10,10,10,0.6);
  color: var(--c-bone);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
}
.lightbox__close:hover {
  background: var(--c-rust);
  border-color: var(--c-rust);
  transform: rotate(90deg);
}
.lightbox__caption {
  position: absolute;
  left: 18px; bottom: 14px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(236, 233, 225, 0.6);
  margin: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .lightbox__frame, .lightbox__backdrop { transition: none !important; }
  .lightbox__close:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════
   MOTION VOCABULARY — completely redesigned. A two-column showcase:
   big SVG stage on the left, paired caption on the right, rail of
   six pins below to jump between gestures. Cinema-style iris
   transitions (clip-path circle expanding from center) tie back to
   TACTIC's aperture motif. Coral iris ring flashes during transition
   — a single deliberate accent that signals the cut. JS-driven state
   machine; CSS owns all motion.
   ════════════════════════════════════════════════════════════════════ */
.motion-vocab {
  background: var(--c-ink);
  position: relative;
  overflow: hidden;
}
.motion-vocab .container {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 64px);
}
.motion-vocab__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}
.motion-vocab__head .display { margin: 0; max-width: 22ch; }
.motion-vocab__head .display em {
  color: var(--c-cream);
  font-style: italic;
}
.motion-vocab__lead {
  font-family: var(--f-body);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.55;
  color: rgba(236, 233, 225, 0.65);
  margin: 8px 0 0;
  max-width: 56ch;
}

/* Two-column layout: stage on left, caption on right */
.motion-vocab__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
  min-height: clamp(280px, 36vw, 480px);
}
@media (max-width: 880px) {
  .motion-vocab__layout {
    grid-template-columns: 1fr;
    gap: clamp(32px, 5vw, 48px);
  }
}

/* Stage — wraps the SVG with a halo gradient + ring guide */
.motion-vocab__stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: clamp(280px, 36vw, 460px);
  justify-self: center;
}
.motion-vocab__halo {
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(201, 184, 148, 0.06) 0%, rgba(201, 184, 148, 0) 70%),
    radial-gradient(closest-side, rgba(239, 50, 45, 0.06) 30%, rgba(239, 50, 45, 0) 70%);
  filter: blur(10px);
  pointer-events: none;
}
.motion-vocab__ring {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  border: 1px solid rgba(236, 233, 225, 0.07);
  pointer-events: none;
}
/* Canvas — particle stage. Square, full bleed of stage area. The
   particles handle all motion + transitions internally; CSS just
   sizes the canvas and provides the cursor affordance. */
.motion-vocab__canvas {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair !important;
  border-radius: 50%;
}
.motion-vocab__hint {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(236, 233, 225, 0.35);
  margin: 0;
  white-space: nowrap;
  pointer-events: none;
  transition: color 240ms var(--ease);
}
.motion-vocab__stage:hover .motion-vocab__hint { color: rgba(239, 50, 45, 0.7); }

/* ── Caption block — synced to phase via JS ────────────────────── */
.motion-vocab__caption {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 44ch;
}
.motion-vocab__step {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-rust);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.motion-vocab__step::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--c-rust);
  display: inline-block;
}
.motion-vocab__title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--c-bone);
  margin: 0;
}
.motion-vocab__title em {
  color: var(--c-cream);
  font-style: italic;
}
.motion-vocab__desc {
  font-family: var(--f-body);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.55;
  color: rgba(236, 233, 225, 0.78);
  margin: 0;
}
/* Caption fade swap during cut */
.motion-vocab__step,
.motion-vocab__title,
.motion-vocab__desc {
  transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1), transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.motion-vocab.is-cutting .motion-vocab__step,
.motion-vocab.is-cutting .motion-vocab__title,
.motion-vocab.is-cutting .motion-vocab__desc {
  opacity: 0;
  transform: translateY(6px);
}

/* ── Rail nav — six clickable pins ─────────────────────────────── */
.motion-vocab__rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.motion-vocab__pin {
  appearance: none;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--c-line);
  padding: 18px 16px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  font: inherit;
  color: rgba(236, 233, 225, 0.55);
  transition: color 200ms var(--ease), background 200ms var(--ease);
  position: relative;
}
.motion-vocab__pin:last-child { border-right: 0; }
.motion-vocab__pin:hover { color: var(--c-bone); background: rgba(236, 233, 225, 0.02); }
.motion-vocab__pin.is-active {
  color: var(--c-bone);
  background: rgba(239, 50, 45, 0.04);
}
.motion-vocab__pin.is-active::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 100%;
  height: 2px;
  background: var(--c-rust);
}
.motion-vocab__pin-num {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(236, 233, 225, 0.4);
}
.motion-vocab__pin.is-active .motion-vocab__pin-num { color: var(--c-rust); }
.motion-vocab__pin-label {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(13px, 1vw, 16px);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
@media (max-width: 720px) {
  .motion-vocab__rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .motion-vocab__pin:nth-child(3) { border-right: 0; }
  .motion-vocab__pin:nth-child(n+4) { border-top: 1px solid var(--c-line); }
}

/* ── Progress fill — bottom timing strip ───────────────────────── */
.motion-vocab__progress {
  height: 1px;
  width: 100%;
  background: rgba(236, 233, 225, 0.06);
  position: relative;
  overflow: hidden;
}
.motion-vocab__progress-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--c-rust);
  transition: width 60ms linear;
}

/* Pause everything when offscreen */
[data-motion-vocab].is-paused .phase.is-active,
[data-motion-vocab].is-paused .phase.is-active .b,
[data-motion-vocab].is-paused .phase.is-active .g,
[data-motion-vocab].is-paused .phase.is-active .r1,
[data-motion-vocab].is-paused .phase.is-active .r2,
[data-motion-vocab].is-paused .phase.is-active .o,
[data-motion-vocab].is-paused .phase.is-active .m,
[data-motion-vocab].is-paused .phase.is-active .reel-outer,
[data-motion-vocab].is-paused .phase.is-active .fp { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .motion-vocab__svg .phase.is-active,
  .motion-vocab__svg .phase.is-leaving { animation: none !important; clip-path: none !important; }
  .motion-vocab__svg .phase.is-active { opacity: 1; transform: none; }
  .motion-vocab__svg .phase.is-active .b,
  .motion-vocab__svg .phase.is-active .g,
  .motion-vocab__svg .phase.is-active .r1,
  .motion-vocab__svg .phase.is-active .r2,
  .motion-vocab__svg .phase.is-active .o,
  .motion-vocab__svg .phase.is-active .m,
  .motion-vocab__svg .phase.is-active .reel-outer,
  .motion-vocab__svg .phase.is-active .fp { animation: none !important; }
  .motion-vocab.is-cutting .iris { animation: none !important; opacity: 0; }
}

/* ════════════════════════════════════════════════════════════════════
   PARALLAX — JS sets `--py` on each tagged element. CSS owns the
   actual transform via translate3d so the layer composites on the GPU.
   Speed is set in script.js per-element so different layers move at
   different rates → real depth. No per-frame text skew anywhere.
   ════════════════════════════════════════════════════════════════════ */
[data-parallax] {
  --py: 0px;
  transform: translate3d(0, var(--py), 0);
  /* NO transition on scroll-driven transforms — the JS rAF loop already
     paints the new value every frame. Adding a transition makes the
     element try to "ease" between scroll values, which fights the next
     update and produces visible jitter / lag. Removed 2026-05-01. */
  will-change: transform;
  /* Hint the browser to keep this layer on the compositor */
  backface-visibility: hidden;
}

/* OVERRIDE: bg-collage elements use individual `translate` + `scale` so
   that scroll parallax composes with cursor-follow (--cx/--cy) and the
   continuous keyframe animations targeting `transform`. The base
   [data-parallax] rule above hijacks `transform`, which would silently
   wipe both the cursor follow and the breath/drift loops. The rule
   below restores the composable form for any collage element. */
.bg-collage__el[data-parallax] {
  transform: none; /* clear the inherited override */
  /* translate: lives in .bg-collage__el base rule and reads --cx, --cy, --py */
  transition: opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1),
              translate 80ms linear;
  will-change: translate, transform;
}
.bg-collage__el[data-parallax].is-in {
  transition: opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1),
              translate 80ms linear;
}

/* Hero parallax — applied to the .hero__media wrapper, not the video
   itself. This way the ken-burns scale animation on .hero__video keeps
   composing naturally inside the parallax-translated parent. The wrapper
   has overflow:hidden so the slight offset doesn't expose section edges. */
.hero__media { overflow: hidden; }
.hero__media[data-parallax] {
  /* nudge a touch oversized via inner video, parent just translates */
  transition: transform 120ms linear;
}

/* Atmosphere blockquote: slow upward drift looks intentional */
.atmosphere blockquote[data-parallax] {
  transform: translate3d(0, calc(var(--py) * -1), 0);
}

/* Disable parallax for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-parallax],
  .hero__video[data-parallax],
  .atmosphere blockquote[data-parallax] {
    transform: none !important;
    transition: none !important;
  }
}