@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-400.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-500.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: "Archivo Condensed";
  src: url("assets/fonts/archivo-condensed-900.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 900;
}

@font-face {
  font-family: "Archivo Black";
  src: url("assets/fonts/archivo-black.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}

:root {
  color-scheme: dark;
  --ink: #f2f1ed;
  --paper: #080808;
  --surface: #111111;
  --line: #2a2a2a;
  --muted: #aaa9a4;
  --quiet: #74736f;
  --pad: 64px;
  --nav-height: 72px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 200ms;
  --dur-fast: 150ms;
  --dur-slow: 300ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --delay-step: 40ms;
  --dist-1: 6px;
  --dist-2: 12px;
  --dist-3: 20px;
  --scale-in: 0.97;
  --scale-over: 1.02;
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(.22,1,.36,1);
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --digit-dur: 500ms;
  --digit-distance: 8px;
  --digit-stagger: 70ms;
  --digit-blur: 2px;
  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  --digit-dir-x: 0;
  --digit-dir-y: 1;
  --badge-slide-dur: 260ms;
  --badge-pop-dur: 500ms;
  --badge-pop-close-dur: 180ms;
  --badge-fade-dur: 400ms;
  --badge-fade-close-dur: 180ms;
  --badge-blur: 2px;
  --badge-offset-x: -8.2px;
  --badge-offset-y: 12.4px;
  --badge-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --badge-pop-ease: cubic-bezier(0.34, 1.36, 0.64, 1);
  --badge-close-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --text-swap-dur: 150ms;
  --text-swap-translate-y: 4px;
  --text-swap-blur: 2px;
  --text-swap-ease: ease-in-out;
  --dropdown-open-dur: 250ms;
  --dropdown-close-dur: 150ms;
  --dropdown-pre-scale: 0.97;
  --dropdown-closing-scale: 0.99;
  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --panel-open-dur: 400ms;
  --panel-close-dur: 350ms;
  --panel-translate-y: 100px;
  --panel-blur: 2px;
  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-slide-dur: 200ms;
  --page-fade-dur: 200ms;
  --page-slide-distance: 8px;
  --page-blur: 3px;
  --page-stagger: 0ms;
  --page-exit-enabled: 1;
  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --icon-swap-dur: 200ms;
  --icon-swap-blur: 2px;
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: ease-in-out;
  --check-opacity-dur: 550ms;
  --check-rotate-dur: 550ms;
  --check-rotate-from: 80deg;
  --check-bob-dur: 450ms;
  --check-y-amount: 40px;
  --check-blur-dur: 500ms;
  --check-blur-from: 10px;
  --check-path-dur: 550ms;
  --check-path-delay: 80ms;
  --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
  --check-ease-path: cubic-bezier(0.22, 1, 0.36, 1);
  --avatar-lift: -4px;
  --avatar-dur: 320ms;
  --avatar-scale: 1.05;
  --avatar-falloff: 0.45;
  --avatar-ease-in: cubic-bezier(0.22, 1, 0.36, 1);
  --avatar-ease-out: cubic-bezier(0.34, 3.85, 0.64, 1);
  --shake-distance: 6px;
  --shake-overshoot: 4px;
  --shake-dur-a: 80ms;
  --shake-dur-b: 60ms;
  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --revert-hold: 3000ms;
  --revert-dur: 280ms;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: "Archivo", Arial, sans-serif;
  letter-spacing: 0;
}

body.menu-open,
body.dialog-open {
  overflow: hidden;
}

button,
a {
  font: inherit;
}

button {
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

#work,
#photo,
#studio,
#learn {
  scroll-margin-top: var(--nav-height);
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-180%);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: var(--nav-height);
  padding: 0 var(--pad);
  overflow: hidden;
  border-bottom: 1px solid transparent;
  transition: background-color 240ms var(--ease), border-color 240ms var(--ease), opacity 640ms var(--ease), transform 640ms var(--ease);
}

.nav-logo-slot {
  justify-self: center;
  width: 148px;
  height: 34px;
}

.floating-logo {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 21;
  display: block;
  width: 148px;
  transform-origin: center;
  opacity: 1;
  transition: opacity 700ms var(--ease);
  will-change: transform;
}

body.motion-ready:not(.is-page-ready) .floating-logo {
  opacity: 0;
}

body.motion-ready.is-page-ready .floating-logo {
  opacity: 1;
  transition-delay: 420ms;
}

.floating-logo img {
  width: 100%;
  height: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.site-nav.is-solid {
  border-color: var(--line);
  background: rgb(8 8 8 / 94%);
}

.desktop-nav {
  grid-column: 1;
  justify-self: start;
  display: flex;
  gap: 32px;
  align-items: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
}

.nav-logo-slot {
  grid-column: 2;
}

body.motion-ready:not(.is-page-ready) .site-nav {
  opacity: 0;
  transform: translateY(-14px);
}

body.motion-ready.is-page-ready .site-nav {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0ms, 0ms, 520ms, 520ms;
}

.desktop-nav a,
.footer-bottom a {
  transition: color 180ms var(--ease);
}

.desktop-nav a:hover,
.desktop-nav a:focus-visible,
.footer-bottom a:hover,
.footer-bottom a:focus-visible {
  color: var(--muted);
}

.nav-cta {
  grid-column: 3;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-self: end;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgb(242 241 237 / 70%);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--ease);
}

.nav-cta:hover,
.nav-cta:focus-visible {
  background: var(--ink);
  color: var(--paper);
}

.nav-cta:active,
.button:active,
.lane:active {
  transform: scale(0.98);
}

.menu-toggle {
  grid-column: 3;
  display: none;
  justify-self: end;
  border: 0;
  background: transparent;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  cursor: pointer;
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 19;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: calc(var(--nav-height) + 20px) 24px 40px;
  background: var(--paper);
  text-align: center;
}

.mobile-menu[hidden] {
  display: none;
}

.mobile-menu a {
  padding: 14px 8px;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.hero {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  background: #050505;
  view-timeline-name: --hero;
  view-timeline-axis: block;
}

.hero-media,
.hero-fallback,
.hero-video,
.hero-scrim {
  position: absolute;
  inset: 0;
}

.hero-media {
  overflow: hidden;
  clip-path: inset(0);
}

.hero-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.045);
  will-change: transform;
}

.hero-video {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.02);
  transition: opacity 600ms var(--ease), transform 14s linear;
  will-change: transform, opacity;
}

.hero-media.video-ready .hero-video {
  opacity: 1;
  transform: scale(1.07);
}

.hero-scrim {
  background: linear-gradient(
    180deg,
    rgb(5 5 5 / 28%) 0%,
    rgb(5 5 5 / 32%) 48%,
    rgb(5 5 5 / 42%) 68%,
    rgb(5 5 5 / 66%) 80%,
    rgb(5 5 5 / 88%) 90%,
    #050505 100%
  );
  box-shadow: inset 0 120px 120px rgb(5 5 5 / 18%);
}

@keyframes hero-fallback-life {
  from {
    transform: scale(1.055) translate3d(-0.4%, 0, 0);
  }
  to {
    transform: scale(1.02) translate3d(0.4%, -0.5%, 0);
  }
}

.section-label,
.production-copy p,
.lane > span,
.lane strong,
.footer-bottom,
.film-loader,
.film-meta a {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  line-height: 1.4;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-fallback {
    animation: hero-fallback-life 9s var(--ease-out) both;
  }

  body.motion-ready .hero-media {
    transition: clip-path 900ms var(--ease-out);
  }

  body.motion-ready:not(.is-page-ready) .hero-media {
    clip-path: inset(0 0 100% 0);
  }

  body.motion-ready.is-page-ready .hero-media {
    clip-path: inset(0);
  }
}

@keyframes hero-media-away {
  to {
    opacity: 0.42;
    transform: scale(1.08);
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-media {
      animation: hero-media-away linear both;
      animation-range: exit 0% exit 100%;
      animation-timeline: --hero;
    }
  }
}

/* Label and arrow read as one unit. `space-between` with a 178px floor left a
   dead gap in the middle of short labels like "See more". */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 50px;
  padding: 0 24px;
  border: 1px solid transparent;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease);
}

.button-light {
  background: var(--ink);
  color: var(--paper);
}

.button-light:hover,
.button-light:focus-visible {
  border-color: var(--ink);
  background: transparent;
  color: var(--ink);
}

.work-section {
  position: relative;
  z-index: 2;
  margin-top: -100dvh;
  padding: 104px var(--pad) 160px;
  background: linear-gradient(180deg, rgb(8 8 8 / 0%) 0, rgb(8 8 8 / 86%) 46dvh, var(--paper) 92dvh);
}

.work-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 64px;
}

/*
 * .work-section uses a negative margin-top so #work can slide up under the
 * sticky galaxy hero above it. #films sits below #work in normal flow, so
 * inheriting that same negative margin pulls the whole Films section (and
 * its heading/CTA) up on top of the Featured Work grid. Reset it here and
 * add real spacing between the two sections instead.
 */
.films-section {
  position: relative;
  z-index: 1;
  margin-top: 0;
  padding-top: 160px;
  background: var(--paper);
}

.films-archive {
  margin-top: 0;
  padding-top: 40px;
  background: var(--paper);
}

.work-intro h2 {
  font-size: 66px;
}

.studio-copy h2,
.production-copy h2,
.lane h2,
.site-footer > p,
.film-meta h2 {
  margin: 0;
  font-family: "Archivo Black", Impact, sans-serif;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.campaign-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  column-gap: 18px;
  row-gap: 18px;
}

/* Films run a lead mosaic so the section stops repeating the Featured Projects
   3x3 directly above it: four columns, first film holds a 2x2 block, the rest
   fill around it. Nine films land as lead + 2, lead + 2, then a row of four. */
.campaign-grid.is-mosaic {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.campaign-grid.is-mosaic > :first-child {
  grid-column: span 2;
  grid-row: span 2;
  /* The grid sets align-items:start; the lead must stretch instead, or it
     keeps its own 16:9 height and stops short of the two rows it spans,
     leaving its bottom edge misaligned with the column beside it. */
  align-self: stretch;
}

.campaign-grid.is-mosaic > :first-child .campaign-media {
  height: 100%;
  /* aspect-ratio would otherwise win over height and reintroduce the gap. */
  aspect-ratio: auto;
}

.campaign-grid.is-mosaic > :first-child .campaign-still {
  height: 100%;
}

.campaign-card {
  position: relative;
  display: block;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  opacity: 0;
  clip-path: inset(0 0 10% 0);
  text-align: left;
  transform: translateY(42px) scale(0.992);
  transform-origin: center;
  cursor: pointer;
  transition: clip-path 780ms var(--ease) calc(var(--reveal-index) * 55ms), opacity 700ms var(--ease) calc(var(--reveal-index) * 55ms), transform 780ms var(--ease) calc(var(--reveal-index) * 55ms);
}

.campaign-card.is-revealed {
  opacity: 1;
  clip-path: inset(0);
  transform: translateY(0);
}

.campaign-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--paper);
  transform: translateY(0);
  transition: transform 520ms var(--ease);
}

.campaign-media::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  box-shadow: inset 0 -150px 120px rgb(8 8 8 / 72%);
  content: "";
  pointer-events: none;
}

.campaign-still,
.campaign-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.campaign-still {
  object-fit: cover;
  transition: opacity 420ms var(--ease), transform 720ms var(--ease);
}

.campaign-video {
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  border: 0;
  background: var(--paper);
  /* The films grid's loops are self-hosted <video> now, not Vimeo iframes.
     Without this a 16/9 encode letterboxes inside a card crop that is not
     16/9; on the iframe it is a no-op. */
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms var(--ease);
  will-change: opacity;
}

.campaign-card.is-previewing .campaign-still,
.campaign-card:focus-visible .campaign-still {
  transform: scale(1.025);
}

.campaign-card.is-previewing,
.campaign-card:focus-visible {
  z-index: 1;
}

.campaign-card.is-previewing .campaign-media,
.campaign-card:focus-visible .campaign-media {
  transform: translateY(-4px);
}

.campaign-card.is-previewing.is-preview-ready .campaign-still {
  opacity: 0;
}

.campaign-card.is-previewing.is-preview-ready .campaign-video {
  opacity: 1;
}

.campaign-credit {
  position: absolute;
  right: 20px;
  bottom: 18px;
  left: 20px;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 18px;
  row-gap: 5px;
  min-height: 0;
  padding: 0;
  transition: transform 260ms var(--ease);
}

.campaign-card.is-previewing .campaign-credit,
.campaign-card:focus-visible .campaign-credit {
  transform: translateY(-2px);
}

.campaign-client,
.campaign-meta {
  color: rgb(242 241 237 / 76%);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  line-height: 1.3;
  text-transform: uppercase;
}

.campaign-client {
  min-width: 0;
  overflow-wrap: anywhere;
}

.campaign-title {
  grid-column: 1 / -1;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.campaign-meta {
  justify-self: end;
  text-align: right;
}

@media (hover: hover) and (pointer: fine) {
  .campaign-grid:has(.campaign-card.is-previewing) .campaign-card:not(.is-previewing) {
    opacity: 0.42;
    transform: scale(0.986);
  }
}

/* Restrained secondary lift: the lit card's title rises a touch above the rest
   of its credit line while the loop plays. Applies to project and film cards
   alike, so both grids read as one lightboard. */
.campaign-card .campaign-title {
  transition: transform 300ms var(--ease);
}

.campaign-card.is-previewing .campaign-title,
.campaign-card:focus-visible .campaign-title {
  transform: translateY(-3px);
}

.galaxy-chapter {
  position: relative;
  height: 280dvh;
  min-height: 1980px;
  margin-top: -1px;
  background: #050505;
  --galaxy-copy-opacity: 0;
  --galaxy-copy-scale: 0.97;
  --galaxy-exit: 1;
}

.galaxy-sticky {
  position: sticky;
  top: 0;
  display: grid;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  place-items: center;
  background: #050505;
}

.galaxy-canvas,
.galaxy-vignette {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: var(--galaxy-exit, 1);
  transition: opacity 80ms linear;
}

.galaxy-canvas {
  display: block;
}

.galaxy-vignette {
  box-shadow: inset 0 0 190px rgb(5 5 5 / 72%), inset 0 -160px 130px rgb(5 5 5 / 74%), inset 0 130px 110px rgb(5 5 5 / 52%);
  pointer-events: none;
}

.galaxy-copy {
  position: relative;
  z-index: 1;
  width: min(1200px, calc(100% - (var(--pad) * 2)));
  margin: 0;
  color: var(--ink);
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: 82px;
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-align: center;
  text-transform: uppercase;
  opacity: var(--galaxy-copy-opacity);
  transform: scale(var(--galaxy-copy-scale));
  transition: opacity 80ms linear, transform 80ms linear;
  will-change: opacity, transform;
}

.galaxy-copy span {
  display: block;
  white-space: nowrap;
  opacity: var(--line-progress, 0);
  transform: translateY(var(--line-y, 34px));
  will-change: opacity, transform;
}

.galaxy-copy .galaxy-final-line {
  margin-top: 0;
  font-size: 1.32em;
  line-height: 0.72;
}

.photo-motion {
  padding: 70px 0 154px;
  overflow: hidden;
  border-top: 1px solid var(--line);
  view-timeline-name: --photo-runway;
  view-timeline-axis: block;
}

.photo-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  padding: 0 var(--pad);
}

.photo-intro h2,
.work-intro h2,
.photo-page-hero h1,
.reviews-heading h2,
.final-cta-content h2,
.footer-wordmark,
.photo-dialog-meta h2 {
  margin: 0;
  font-family: "Archivo Black", Impact, sans-serif;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.photo-intro h2 {
  font-size: 66px;
}

.button-outline {
  border-color: var(--line);
  background: transparent;
}

.button-outline:hover,
.button-outline:focus-visible {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.photo-scroller {
  position: relative;
  margin-top: 64px;
  padding: 34px 0;
  overflow: hidden;
}

.photo-scroller-rot {
  transform: rotate(-2deg) scale(1.045);
  transform-origin: center;
}

.photo-row {
  display: flex;
  gap: 14px;
  width: max-content;
  margin-bottom: 14px;
  animation: photo-loop-a 92s linear infinite;
  will-change: transform;
}

.photo-row-reverse {
  animation-name: photo-loop-b;
}

.photo-row-alt {
  animation-name: photo-loop-a;
  animation-duration: 116s;
}

.photo-row:last-child {
  margin-bottom: 0;
}

.photo-frame {
  flex: none;
  height: clamp(190px, 22vw, 318px);
  aspect-ratio: var(--photo-ratio);
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--surface);
  cursor: zoom-in;
}

.photo-frame img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--photo-position, 50% 50%);
  transition: transform 760ms var(--ease);
}

.photo-frame:hover img,
.photo-frame:focus-visible img {
  transform: scale(1.055);
}

@keyframes photo-loop-a {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes photo-loop-b {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes photo-runway-shift {
  from {
    transform: translateX(3vw) rotate(-2deg) scale(1.045);
  }
  to {
    transform: translateX(-5vw) rotate(-2deg) scale(1.045);
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .photo-scroller-rot {
      animation: photo-runway-shift linear both;
      animation-range: entry 0% exit 100%;
      animation-timeline: --photo-runway;
    }
  }
}

body.motion-ready .reveal {
  opacity: 0;
  transform: translateY(34px);
  /* r94: slower, felt entrances (Giovani) - with a focus pull on fine
     pointers, same language as the homepage sections. */
  transition: opacity 1100ms var(--ease), transform 1250ms var(--ease);
}

body.motion-ready .reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (pointer: fine) {
  body.motion-ready .reveal {
    filter: blur(7px);
    transition: opacity 1100ms var(--ease), transform 1250ms var(--ease), filter 1100ms var(--ease);
  }
  body.motion-ready .reveal.is-revealed { filter: blur(0); }
}

/* =========================================================================
   Round 9 — Cross-document page transitions (Giovani: "beautiful page swipe
   animations"). A quick cut to black between full page loads, timed to the
   site easing so it reads like a film cut, not a slideshow. Same-document
   routing (project galleries, film dialog, review marquee) never fires this
   because it isn't a navigation. Browsers without support navigate instantly.
   ========================================================================= */
/* r94: the Round 9 cross-document View Transition (a 160ms cut to black) is
   RETIRED — it only ran on interior routes (the homepage never loads this
   sheet), it could not hold the frame through a slow load, and together
   those were the "flash" Giovani flagged. The shell's veil wipe
   (site-shell.js r94) replaces it on every route; nothing here anymore. */

.studio-section {
  position: relative;
  padding: 150px var(--pad) 170px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  grid-template-areas:
    "intro media"
    "bio media"
    "bio social";
  column-gap: 80px;
  row-gap: 44px;
  align-items: start;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.about-social { grid-area: social; }

.about-intro {
  grid-area: intro;
}

.about-bio {
  grid-area: bio;
}

/* The media column holds the brand film and the social row beneath it, so the
   grid area belongs to the column rather than the 16:9 frame itself. */
.about-media-col {
  grid-area: media;
  align-self: center;
}

.about-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.about-social a {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line);
  color: var(--muted);
  transition: color 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
}

/* Matches .footer-social so both rows read identically. */
.about-social svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

/* The mail glyph is drawn on a 24 box, the sprite on 64, so it needs trimming
   to sit at the same optical weight as the sprite icons. */
.about-social .icon-mail {
  width: 19px;
  height: 19px;
}

.about-social a:hover,
.about-social a:focus-visible {
  color: var(--ink);
  border-color: var(--ink);
  transform: translateY(-2px);
}

.about-bio .about-body:first-child {
  margin-top: 0;
}

.studio-copy {
  width: min(720px, 100%);
  padding: 0;
}

.studio-copy .section-label {
  margin: 0 0 28px;
  color: var(--quiet);
}

.studio-copy h2 {
  font-size: 60px;
}

.studio-lead {
  max-width: 610px;
  margin: 30px 0 0;
  color: var(--ink);
  font-size: 19px;
  line-height: 1.55;
}

.about-body {
  max-width: 610px;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

.about-disciplines {
  max-width: 570px;
  margin: 36px 0 0;
  color: var(--quiet);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  line-height: 1.7;
  text-transform: uppercase;
}

.about-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface);
}

.about-media img,
.about-media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.about-media img {
  transition: opacity 420ms var(--ease), transform 900ms var(--ease);
}

.about-media:hover img {
  transform: scale(1.025);
}

.about-media.is-playing img,
.about-media.is-playing .story-play {
  opacity: 0;
  pointer-events: none;
}

.production-band {
  position: relative;
  padding: 160px var(--pad);
}

.production-band > img {
  width: 86%;
  max-height: 760px;
  margin-left: auto;
  object-fit: cover;
}

.production-copy {
  width: 62%;
  margin-top: -110px;
  padding: 54px 54px 0 0;
  background: var(--paper);
}

.production-copy h2 {
  font-size: 72px;
}

.production-copy p {
  margin: 32px 0 0;
  color: var(--quiet);
}

.story-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  padding: 0;
  border: 1px solid rgb(242 241 237 / 72%);
  border-radius: 50%;
  background: rgb(8 8 8 / 72%);
  color: var(--ink);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: background-color 220ms var(--ease), color 220ms var(--ease), opacity 220ms var(--ease), transform 220ms var(--ease);
}

.story-play:hover,
.story-play:focus-visible {
  background: var(--ink);
  color: var(--paper);
  transform: translate(-50%, -50%) scale(1.06);
}

.story-play-icon {
  width: 26px;
  height: 26px;
  margin-left: 3px;
  fill: currentColor;
}

.reviews-section {
  position: relative;
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.reviews-sticky {
  display: grid;
  grid-template-rows: auto 1fr;
  width: 100%;
  padding: 78px 0 54px;
}

.reviews-heading {
  max-width: none;
  padding: 0 var(--pad);
  text-align: center;
}

.reviews-stars {
  margin: 0 0 20px;
  color: var(--ink);
  font-size: 18px;
  letter-spacing: 8px;
  line-height: 1;
}

.reviews-more {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-top: 22px;
  padding-bottom: 5px;
  border-bottom: 1px solid currentColor;
  color: var(--quiet);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  transition: color 200ms var(--ease), transform 200ms var(--ease);
}

.reviews-more:hover,
.reviews-more:focus-visible {
  color: var(--ink);
  transform: translateY(-2px);
}

.reviews-heading h2 {
  font-size: 60px;
}

.reviews-viewport {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: none;
}

.reviews-viewport::-webkit-scrollbar {
  display: none;
}

.review-track {
  display: flex;
  gap: 14px;
  width: max-content;
  padding: 0 var(--pad);
}

.review-card {
  display: flex;
  flex: none;
  flex-direction: column;
  width: 520px;
  min-height: 330px;
  margin: 0;
  padding: 28px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  transition: transform 260ms var(--ease);
}

.review-stars {
  margin: 0;
  color: var(--paper);
  font-size: 17px;
  letter-spacing: 7px;
  line-height: 1;
}

.review-card > p {
  max-width: 460px;
  margin: auto 0;
  padding: 26px 0;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.28;
  text-wrap: pretty;
}

.review-card > p.review-stars {
  margin: 0;
  padding: 0;
}

.review-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 18px;
  border-top: 1px solid rgb(8 8 8 / 22%);
}

.review-card footer strong {
  font-size: 13px;
  font-weight: 500;
}

.review-card footer span {
  color: rgb(8 8 8 / 56%);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  line-height: 1.4;
  text-transform: uppercase;
}

.review-card:hover,
.review-card:focus-within {
  transform: translateY(-4px);
}

.lane-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.lane {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 520px;
  padding: 72px var(--pad);
  text-align: center;
  transition: background-color 300ms var(--ease), color 300ms var(--ease), transform 180ms var(--ease);
}

.lane-studio {
  background: var(--ink);
  color: var(--paper);
}

.lane-learn {
  background: var(--paper);
  color: var(--ink);
}

.lane > span {
  margin: 0;
  opacity: 0.5;
}

.lane h2 {
  max-width: 620px;
  margin: 0;
  font-size: 56px;
}

.lane p {
  max-width: 470px;
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  opacity: 0.74;
}

.lane strong {
  margin-top: 4px;
  font-weight: 500;
}

/* Mirrored inversion. Pointing at either lane flips BOTH to the opposite of
   the one being pointed at, so the pair reads as a single surface changing
   state rather than two tiles toggling independently. Hover the white lane and
   the whole band goes black; hover the black lane and it all goes white. The
   seam between them disappears while they match, which is the point. */
.lane-section:has(.lane-studio:hover) .lane,
.lane-section:has(.lane-studio:focus-visible) .lane {
  background: var(--paper);
  color: var(--ink);
}

.lane-section:has(.lane-learn:hover) .lane,
.lane-section:has(.lane-learn:focus-visible) .lane {
  background: var(--ink);
  color: var(--paper);
}

/* Browsers without :has() keep the original per-lane inversion rather than
   losing the hover state entirely. */
@supports not selector(:has(*)) {
  .lane-studio:hover,
  .lane-studio:focus-visible {
    background: var(--paper);
    color: var(--ink);
  }

  .lane-learn:hover,
  .lane-learn:focus-visible {
    background: var(--ink);
    color: var(--paper);
  }
}

.final-cta {
  position: relative;
  display: grid;
  min-height: 88dvh;
  overflow: hidden;
  place-items: center;
}

.final-cta > img,
.final-cta-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.final-cta > img {
  object-fit: cover;
  object-position: center 42%;
  transform: scale(1.04);
}

.final-cta-scrim {
  background: rgb(8 8 8 / 42%);
  box-shadow: inset 0 -260px 200px rgb(8 8 8 / 70%), inset 0 120px 140px rgb(8 8 8 / 18%);
}

.final-cta-content {
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
  padding: 80px var(--pad);
  text-align: center;
}

.final-cta-content h2 {
  font-size: 62px;
}

.final-cta-content p {
  margin: 26px 0 38px;
  font-size: 18px;
}

.final-cta-content .button {
  margin-inline: auto;
}

@keyframes final-cta-drift {
  from {
    transform: scale(1.08);
  }
  to {
    transform: scale(1.02);
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .final-cta > img {
      animation: final-cta-drift linear both;
      animation-range: entry 0% exit 100%;
      animation-timeline: view();
    }
  }
}

.instagram-section {
  padding: 140px var(--pad) 150px;
  overflow: hidden;
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.instagram-heading {
  display: grid;
  justify-items: center;
  text-align: center;
}

.ig-avatar {
  display: block;
  width: 96px;
  height: 96px;
  margin-bottom: 26px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: transform 320ms var(--ease), border-color 320ms var(--ease);
}

.ig-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ig-avatar:hover,
.ig-avatar:focus-visible {
  border-color: var(--ink);
  transform: translateY(-3px);
}

.ig-label {
  margin: 0 0 16px;
  opacity: 0.62;
}

.instagram-heading h2 {
  max-width: 100%;
  margin: 0;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: 54px;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.instagram-heading h2 a {
  transition: opacity 200ms var(--ease);
}

.instagram-heading h2 a:hover,
.instagram-heading h2 a:focus-visible {
  opacity: 0.72;
}

.ig-followers {
  margin: 16px 0 0;
  color: var(--muted);
  opacity: 0.9;
}

.ig-view {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin-top: 28px;
  padding-bottom: 5px;
  border-bottom: 1px solid currentColor;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  transition: color 200ms var(--ease), transform 200ms var(--ease);
}

.ig-view:hover,
.ig-view:focus-visible {
  color: var(--muted);
  transform: translateY(-2px);
}

.label-eyebrow,
.section-label,
.lane > span,
.ig-label,
.ig-followers {
  font-family: "Archivo", Arial, sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.instagram-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  margin-top: 64px;
}

.instagram-tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  min-width: 0;
  overflow: hidden;
  background: var(--surface);
}

.instagram-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--photo-position, 50% 50%);
  transform: scale(1.01);
  transition: transform 700ms var(--ease), filter 350ms var(--ease);
}

.instagram-tile::after {
  position: absolute;
  inset: 0;
  background: rgb(8 8 8 / 0%);
  content: "";
  transition: background-color 300ms var(--ease);
}

.instagram-tile-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgb(242 241 237 / 64%);
  background: rgb(8 8 8 / 58%);
  opacity: 0;
  transform: translate(-50%, -44%) scale(0.9);
  transition: opacity 280ms var(--ease), transform 340ms var(--ease);
}

.instagram-tile-icon svg {
  width: 25px;
  height: 25px;
  fill: currentColor;
}

.instagram-tile:hover img,
.instagram-tile:focus-visible img {
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1.065);
}

.instagram-tile:hover::after,
.instagram-tile:focus-visible::after {
  background: rgb(8 8 8 / 28%);
}

.instagram-tile:hover .instagram-tile-icon,
.instagram-tile:focus-visible .instagram-tile-icon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

body.motion-ready .instagram-tile {
  transition-delay: calc(var(--instagram-index) * 35ms);
}

.site-footer {
  padding: 150px var(--pad) 36px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.footer-wordmark {
  width: 100%;
  max-width: none;
  font-size: 110px;
}

.footer-logo {
  display: flex;
  justify-content: center;
}

.footer-logo img {
  width: min(520px, 70vw);
  height: auto;
}

.footer-email {
  display: inline-block;
  max-width: 100%;
  margin-top: 52px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink);
  font-size: 28px;
  overflow-wrap: anywhere;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 34px;
  justify-content: center;
  max-width: 760px;
  margin: 80px auto 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
}

.footer-nav a,
.footer-social a {
  transition: color 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--muted);
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 54px;
}

.footer-social a {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
}

.footer-social a:hover,
.footer-social a:focus-visible {
  border-color: var(--ink);
  transform: translateY(-3px);
}

.footer-social svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-top: 150px;
  color: var(--quiet);
}

.film-dialog,
.photo-dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgb(8 8 8 / 98%);
  color: var(--ink);
}

.film-dialog::backdrop,
.photo-dialog::backdrop {
  background: rgb(8 8 8 / 96%);
}

.film-dialog::backdrop {
  background: transparent;
}

.film-dialog {
  background: #050505;
  opacity: 0;
  pointer-events: none;
  transition: opacity 520ms var(--ease);
  will-change: opacity;
}

.film-dialog.is-open {
  opacity: 1;
  pointer-events: auto;
}

.film-dialog.is-returning {
  opacity: 0;
  pointer-events: none;
  transition-duration: 680ms;
}

.t-modal {
  transform-origin: center;
  transform: scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-open-dur) var(--modal-ease),
    opacity var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}

.t-modal.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}

.t-modal.is-closing {
  transform: scale(var(--modal-scale-close));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-close-dur) var(--modal-ease),
    opacity var(--modal-close-dur) var(--modal-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-modal {
    transition: none !important;
  }
}

.film-shell {
  display: grid;
  place-content: center;
  min-height: 100dvh;
  padding: 82px var(--pad) 30px;
}

.film-stage {
  width: min(1280px, calc(100vw - 128px), 110dvh);
}

.film-frame-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface);
  transform: translate3d(var(--film-origin-x, 0), var(--film-origin-y, 0), 0) scale(var(--film-origin-scale, 0.96));
  transform-origin: top left;
  transition: transform 820ms var(--ease-out);
  will-change: transform;
}

.film-dialog.is-open .film-frame-wrap {
  transform: translate3d(0, 0, 0) scale(1);
}

.film-dialog.is-returning .film-frame-wrap {
  transform: translate3d(var(--film-origin-x, 0), var(--film-origin-y, 0), 0) scale(var(--film-origin-scale, 0.96));
  transition-duration: 680ms;
}

.film-frame-wrap iframe,
.film-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.film-frame-wrap iframe {
  z-index: 1;
  border: 0;
}

.film-poster {
  z-index: 2;
  object-fit: cover;
  opacity: 1;
  transition: opacity 460ms var(--ease), transform 680ms var(--ease);
}

.film-frame-wrap.is-player-ready .film-poster {
  opacity: 0;
  pointer-events: none;
}

.film-frame-wrap.is-switching .film-poster {
  opacity: 0.2;
  transform: scale(1.018);
}

.film-loader {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  color: rgb(242 241 237 / 68%);
  pointer-events: none;
  transition: opacity 240ms var(--ease);
}
/* 9/1 (Giovani): buffering is a wheel, centred and unmistakable - not a
   line of small text in the corner. */
.film-spin {
  display: block;
  width: clamp(44px, 5vw, 60px);
  height: clamp(44px, 5vw, 60px);
  border: 2px solid rgb(244 241 235 / 0.16);
  border-top-color: rgb(244 241 235 / 0.95);
  border-radius: 50%;
  animation: film-spin 860ms linear infinite;
}
@keyframes film-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .film-spin { animation-duration: 2s; } }
.film-poster[hidden] { display: none; }

.film-loader[hidden] {
  display: none;
}

.film-frame-wrap.is-player-ready .film-loader {
  opacity: 0;
}

/* Theater chrome to photo parity (Giovani, tonight's call): the close glyph
   and the prev/next arrows now MIRROR .kls-pv-x / .kls-pv-nav in
   case-study.css exactly - same sizes, same weight, same hover behavior -
   reproduced here rather than importing case-study.css onto pages that
   don't otherwise load it. */
.film-close {
  position: absolute;
  top: clamp(0.9rem, 3vh, 1.8rem);
  right: clamp(0.9rem, 3vw, 2.2rem);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgb(244 241 235 / 0.8);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  filter: drop-shadow(0 2px 10px rgb(0 0 0 / 0.65));
  transition: color 200ms ease, transform 260ms ease, opacity 380ms var(--ease);
}

.film-close:hover,
.film-close:focus-visible {
  color: #fff;
  transform: rotate(90deg);
}

.film-dialog .film-close {
  opacity: 0;
}

.film-dialog.is-open .film-close {
  opacity: 1;
  transition-delay: 540ms;
}

.film-dialog.is-returning .film-close {
  opacity: 0;
  transition-delay: 0ms;
}

.film-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgb(244 241 235 / 0.85);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  filter: drop-shadow(0 2px 12px rgb(0 0 0 / 0.65));
  opacity: 0;
  transition: color 200ms ease, transform 320ms cubic-bezier(0.22, 0.61, 0.21, 1), opacity 380ms var(--ease);
}

.film-nav.is-prev { left: clamp(0.7rem, 2.6vw, 2.2rem); }
.film-nav.is-next { right: clamp(0.7rem, 2.6vw, 2.2rem); }
.film-nav.is-prev:hover, .film-nav.is-prev:focus-visible { color: #fff; transform: translateY(-50%) translateX(-4px); }
.film-nav.is-next:hover, .film-nav.is-next:focus-visible { color: #fff; transform: translateY(-50%) translateX(4px); }

.film-dialog.is-open .film-nav {
  opacity: 1;
  transition-delay: 540ms;
}

.film-dialog.is-returning .film-nav {
  opacity: 0;
  transition-delay: 0ms;
}

/* the thumb swipes on touch; the arrows are desktop-chrome, same call as
   the photo viewer's .kls-pv-nav */
@media (max-width: 720px), (pointer: coarse) {
  .film-nav {
    display: none;
  }
}

/* the meta block: a centered stack under the frame - title, then
   "Category · Duration", then the Vimeo/YouTube link as a small pill. */
.film-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 22px;
  text-align: center;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 440ms var(--ease), transform 440ms var(--ease);
}

.film-dialog.is-open .film-meta {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 560ms;
}

.film-dialog.is-returning .film-meta {
  opacity: 0;
  transform: translateY(10px);
  transition-delay: 0ms;
}

.film-meta h2 {
  margin: 0;
  font-size: 32px;
}

.film-meta span {
  margin: 0;
  color: var(--quiet);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  line-height: 1.4;
  text-transform: uppercase;
}

/* the Vimeo/YouTube link reads as the site's own ghost pill (.button
   .button-outline), just smaller - no new button family. */
.film-meta .film-link {
  margin-top: 4px;
  min-height: 34px;
  padding: 0 16px;
  gap: 10px;
  font-size: 9px;
  border-color: var(--line);
  color: var(--ink);
  text-decoration: none;
}

.film-meta .film-link:hover,
.film-meta .film-link:focus-visible {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.photo-dialog-shell {
  display: grid;
  place-content: center;
  min-height: 100dvh;
  padding: 72px var(--pad) 28px;
}

.photo-dialog-shell > img {
  width: auto;
  max-width: min(1380px, calc(100vw - 128px));
  height: auto;
  max-height: calc(100dvh - 150px);
  margin: auto;
  object-fit: contain;
}

.photo-dialog-meta {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 28px;
  padding-top: 16px;
}

.photo-dialog-meta h2 {
  max-width: 900px;
  font-size: 28px;
}

.photo-dialog-meta span {
  color: var(--quiet);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
}

.photo-page-hero {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 60px;
  align-items: end;
  min-height: 72dvh;
  padding: calc(var(--nav-height) + 70px) var(--pad) 80px;
  border-bottom: 1px solid var(--line);
}

.photo-page-hero h1 {
  font-size: 128px;
}

.photo-page-hero > div {
  padding-bottom: 16px;
}

.photo-page-hero p {
  max-width: 430px;
  margin: 0 0 32px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.5;
}

.photo-archive {
  columns: 3 320px;
  column-gap: 14px;
  padding: 14px var(--pad) 140px;
}

.photo-archive-item {
  display: block;
  width: 100%;
  margin: 0 0 14px;
  padding: 0;
  overflow: hidden;
  break-inside: avoid;
  border: 0;
  background: var(--surface);
  cursor: zoom-in;
}

.photo-archive-item img {
  width: 100%;
  aspect-ratio: var(--photo-ratio);
  object-fit: cover;
  object-position: var(--photo-position, 50% 50%);
  transition: transform 760ms var(--ease), opacity 420ms var(--ease);
}

.photo-archive-item:hover img,
.photo-archive-item:focus-visible img {
  opacity: 0.84;
  transform: scale(1.025);
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 5px;
}

@media (max-width: 1600px) {
  .studio-copy h2 {
    font-size: 54px;
  }
}

@media (max-width: 1280px) {
  :root {
    --pad: 40px;
  }

  .hero h1 {
    font-size: 126px;
  }

  .studio-copy h2 {
    font-size: 56px;
  }

  .production-copy h2,
  .lane h2 {
    font-size: 52px;
  }

  .photo-intro h2,
  .work-intro h2 {
    font-size: 58px;
  }

  .about-grid {
    gap: 50px;
  }

  .review-card {
    width: 500px;
  }

  .review-card > p {
    font-size: 25px;
  }

  .instagram-heading h2 {
    font-size: 52px;
  }

  .final-cta-content h2 {
    font-size: 56px;
  }

  .photo-page-hero h1 {
    font-size: 104px;
  }

  .galaxy-copy {
    font-size: 66px;
  }

  .film-stage {
    width: min(1120px, calc(100vw - 80px), 110dvh);
  }
}

@media (max-width: 980px) {
  .site-nav {
    grid-template-columns: 1fr auto;
  }

  .desktop-nav,
  .nav-cta {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  .campaign-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Tablet: the lead keeps its emphasis across both columns but stops being a
     double-height block, which would leave a hole beside it at two columns. */
  .campaign-grid.is-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .campaign-grid.is-mosaic > :first-child {
    grid-column: span 2;
    grid-row: span 1;
  }

  .studio-copy h2 {
    font-size: 50px;
  }

  .production-band > img {
    width: 100%;
  }

  .production-copy {
    width: 84%;
  }

  .about-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "intro" "media" "bio" "social";
    gap: 48px;
  }

  /* Stacked, the row reads best AFTER his story rather than interrupting the
     jump from the film to the bio, and the tiles come down a size so they sit
     as a quiet footer to the section instead of competing with it. Still well
     above the 44px minimum touch target. */
  .about-social {
    justify-content: center;
    gap: 8px;
    margin: -20px 0 0;
  }

  .about-social a { width: 44px; height: 44px; }

  .about-social svg { width: 22px; height: 22px; }

  .about-social .icon-mail { width: 16px; height: 16px; }

  .review-card {
    width: 470px;
  }

  .instagram-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .instagram-heading h2 {
    font-size: 44px;
  }

  .lane-section {
    grid-template-columns: 1fr;
  }

  .lane + .lane {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .final-cta {
    min-height: 78dvh;
  }

  .photo-page-hero {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .photo-page-hero h1 {
    font-size: 92px;
  }

  .galaxy-copy {
    font-size: min(58px, 8vw);
  }
}

@media (max-width: 720px) {
  :root {
    --pad: 20px;
    --nav-height: 64px;
  }

  .hero {
    min-height: 86dvh;
  }

  .nav-logo-slot {
    width: 118px;
    height: 28px;
  }

  .button {
    width: auto;
    max-width: 100%;
    gap: 20px;
    padding: 0 24px;
  }

  .work-section {
    padding-top: 76px;
    padding-bottom: 100px;
  }

  .studio-copy h2,
  .production-copy h2,
  .lane h2,
  .site-footer > p {
    font-size: 40px;
  }

  .campaign-grid {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  /* Single column: every film is already full width, so the lead needs no span. */
  .campaign-grid.is-mosaic {
    grid-template-columns: 1fr;
  }

  .campaign-grid.is-mosaic > :first-child {
    grid-column: span 1;
    grid-row: span 1;
  }

  .campaign-media {
    aspect-ratio: 16 / 9;
  }

  .campaign-credit {
    right: 12px;
    bottom: 12px;
    left: 12px;
    column-gap: 12px;
  }

  .campaign-title {
    font-size: 29px;
  }

  .campaign-client,
  .campaign-meta {
    font-size: 9px;
  }

  .galaxy-chapter {
    height: 275dvh;
    min-height: 1780px;
  }

  .galaxy-copy {
    width: calc(100% - 40px);
    font-size: min(40px, 6.8vw);
    line-height: 0.98;
  }

  .galaxy-copy .galaxy-final-line {
    margin-top: 0;
    font-size: 1.26em;
    line-height: 0.72;
  }

  .galaxy-vignette {
    box-shadow: inset 0 0 90px rgb(5 5 5 / 68%), inset 0 -100px 90px rgb(5 5 5 / 78%), inset 0 90px 80px rgb(5 5 5 / 56%);
  }

  .photo-motion {
    padding-top: 68px;
    padding-bottom: 96px;
  }

  .photo-intro,
  .work-intro {
    align-items: center;
    flex-direction: column;
    gap: 22px;
    text-align: center;
  }

  .photo-intro h2,
  .work-intro h2 {
    font-size: min(42px, 10vw);
    white-space: nowrap;
  }

  /* "Featured Projects" is the longest heading on the page; at 10vw it breaks
     the nowrap one-line rule and pushes the document wider than the viewport.
     Size this one heading to its own character count so it still lands on a
     single line without introducing horizontal overflow. */
  #work-title {
    font-size: min(42px, 7.2vw);
  }

  .work-intro {
    margin-bottom: 40px;
  }

  .photo-intro .button,
  .work-intro .button {
    width: auto;
    min-width: 0;
    gap: 14px;
    padding: 0 22px;
    align-self: center;
  }

  .about-intro {
    text-align: center;
  }

  .about-intro .studio-lead {
    margin-left: auto;
    margin-right: auto;
  }

  .photo-scroller {
    margin-top: 38px;
    padding: 22px 0;
  }

  .photo-row {
    gap: 10px;
    margin-bottom: 10px;
  }

  .photo-frame {
    height: 180px;
  }

  .studio-section {
    padding: 92px var(--pad) 108px;
  }

  .studio-copy h2 {
    font-size: min(42px, 11.4vw);
  }

  .about-grid {
    gap: 40px;
  }

  .studio-lead {
    font-size: 17px;
  }

  .about-body {
    font-size: 15px;
  }

  .about-disciplines {
    margin-top: 28px;
    font-size: 10px;
  }

  .production-band {
    padding-top: 96px;
    padding-bottom: 96px;
  }

  .production-band > img {
    height: 440px;
    object-position: 42% center;
  }

  .production-copy {
    width: 92%;
    margin-top: -64px;
    padding: 32px 20px 0 0;
  }

  .production-copy p {
    line-height: 1.7;
  }

  .story-play {
    width: 62px;
    height: 62px;
  }

  .reviews-sticky {
    padding: 66px 0 28px;
  }

  .reviews-heading {
    margin: 0;
  }

  .reviews-heading h2 {
    font-size: 44px;
  }

  .review-track {
    gap: 12px;
  }

  .review-card {
    width: calc(100vw - 40px);
    min-height: 320px;
    padding: 24px;
  }

  .review-card > p {
    font-size: 21px;
  }

  .review-stars {
    font-size: 15px;
    letter-spacing: 6px;
  }

  .lane {
    min-height: 440px;
    padding: 46px var(--pad);
  }

  .final-cta {
    min-height: 78dvh;
  }

  .final-cta > img {
    object-position: 56% center;
  }

  .final-cta-content {
    padding: 50px var(--pad);
  }

  .final-cta-content h2 {
    font-size: 38px;
  }

  .final-cta-content p {
    font-size: 16px;
  }

  .final-cta-content .button {
    width: auto;
  }

  .instagram-section {
    padding: 94px 10px 100px;
  }

  .instagram-heading {
    padding: 0 10px;
  }

  .instagram-heading h2 {
    font-size: min(26px, 6.5vw);
  }

  .instagram-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    margin-top: 44px;
  }

  .instagram-tile-icon {
    width: 40px;
    height: 40px;
  }

  .instagram-tile-icon svg {
    width: 21px;
    height: 21px;
  }

  .site-footer {
    padding-top: 100px;
  }

  .footer-wordmark {
    font-size: 52px;
  }

  .footer-email {
    margin-top: 38px;
    font-size: 18px;
  }

  .footer-nav {
    gap: 14px 18px;
    max-width: 210px;
    margin-top: 58px;
    font-size: 10px;
  }

  .footer-social {
    margin-top: 42px;
  }

  .footer-bottom {
    flex-direction: column;
    margin-top: 100px;
  }

  .film-shell {
    padding: 74px 14px 24px;
  }

  .film-stage {
    width: calc(100vw - 28px);
  }

  .film-frame-wrap {
    width: 100%;
  }

  .film-meta {
    gap: 14px;
  }

  .film-meta h2 {
    font-size: 26px;
  }

  .photo-dialog-shell {
    padding: 70px 12px 20px;
  }

  .photo-dialog-shell > img {
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 150px);
  }

  .photo-dialog-meta {
    align-items: start;
    flex-direction: column;
    gap: 8px;
  }

  .photo-dialog-meta h2 {
    font-size: 22px;
  }

  .photo-page-hero {
    gap: 30px;
    min-height: 60dvh;
    padding: calc(var(--nav-height) + 44px) var(--pad) 58px;
  }

  .photo-page-hero h1 {
    font-size: 64px;
  }

  .photo-page-hero p {
    font-size: 16px;
  }

  .photo-archive {
    columns: 1;
    column-gap: 0;
    padding: 10px 10px 80px;
  }

  .photo-archive-item {
    margin-bottom: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .hero-video {
    display: none;
  }

  .campaign-video {
    display: none;
  }

  .photo-scroller {
    overflow-x: auto;
  }

  .photo-scroller-rot {
    transform: none;
  }

  .photo-row {
    animation: none;
  }

  .final-cta > img {
    transform: none;
  }

  .work-section {
    margin-top: 0;
    background: var(--paper);
  }

  .galaxy-chapter {
    height: auto;
    min-height: 0;
  }

  .galaxy-sticky {
    position: relative;
    min-height: 82dvh;
  }

  .galaxy-copy {
    --galaxy-copy-opacity: 1;
    --galaxy-copy-scale: 1;
  }

  .galaxy-copy span {
    --line-progress: 1;
    --line-blur: 0px;
    --line-y: 0px;
    filter: none;
    transform: none;
  }

  .film-frame-wrap,
  .film-dialog.is-open .film-frame-wrap,
  .film-dialog.is-returning .film-frame-wrap {
    transform: none;
  }
}

/* ============================================================
   Project case-study layer (per-client gallery)
   Continuous with the homepage: same #050505, Archivo Black
   display, Archivo 500 labels, --ease easing.
   ============================================================ */
:root {
  --layer-dur: 440ms;
}

.project-open {
  overflow: hidden;
}

.project-layer {
  position: fixed;
  inset: 0;
  z-index: 140;
  width: 100%;
  height: 100dvh;
  background: #050505;
  color: var(--ink);
  transform-origin: 0 0;
  transition: transform var(--layer-dur) var(--ease), opacity var(--layer-dur) var(--ease);
}

/* Round 16, handed over from workstream B. `will-change: transform, opacity`
   used to be declared on .project-layer permanently, which holds a full-screen
   compositing layer for the whole session whether or not anything is moving.
   The layer only ever animates during the FLIP, so it is promoted for exactly
   that and released a beat after it lands (see hintLayer in script.js). */
.project-layer.is-animating {
  will-change: transform, opacity;
}

.project-layer[hidden] {
  display: none;
}

.project-scroll {
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.project-scroll::-webkit-scrollbar {
  display: none;
}

/* Close: a typed label in the site's own mono, sitting in the nav band. The
   old blurred circular X was both generic and a backdrop-filter glass chip,
   which the anti-pattern list bans outright. */
.project-close {
  position: fixed;
  top: 0;
  right: var(--pad);
  z-index: 160;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: var(--nav-height);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 180ms var(--ease), opacity 180ms var(--ease);
}

.project-close::after {
  display: block;
  width: 9px;
  height: 9px;
  content: "";
  background: currentcolor;
  clip-path: polygon(
    0 8%, 8% 0, 50% 42%, 92% 0, 100% 8%, 58% 50%,
    100% 92%, 92% 100%, 50% 58%, 8% 100%, 0 92%, 42% 50%
  );
}

.project-close:hover,
.project-close:focus-visible {
  color: var(--muted);
}

/* The site header stays put over an open project instead of vanishing.
   Specificity is doubled on purpose: the page-entry rules
   (`body.motion-ready:not(.is-page-ready) .site-nav`) score higher than a
   plain `body.project-open .site-nav` and were parking the nav at opacity 0,
   which is what made the header vanish on project pages. */
body.project-open .site-nav.site-nav {
  z-index: 150;
  background-color: var(--paper);
  border-bottom-color: var(--line);
  opacity: 1;
  transform: none;
}

/* The logo is the header's anchor and normally sits at z-index 21, far below
   the project layer at 140, so it was being covered the whole time an open
   project was on screen. Lift it with the nav. */
body.project-open .floating-logo {
  z-index: 151;
}

/* On mobile .desktop-nav and .nav-cta are already display:none, so the menu
   toggle is the ONLY thing in the header. Hiding it for an open project left a
   solid but completely empty bar, which reads as the header being gone. The
   toggle now stays put on mobile; only the desktop CTA steps aside for Close. */
body.project-open .nav-cta {
  opacity: 0;
  pointer-events: none;
}

/* Desktop has room for the CTA slot to hold Close instead; mobile keeps its
   toggle and Close sits beside it. */
@media (min-width: 981px) {
  body.project-open .menu-toggle {
    opacity: 0;
    pointer-events: none;
  }
}

/* Close sits inboard of the menu toggle on mobile so the two never collide. */
@media (max-width: 980px) {
  .project-close {
    right: calc(var(--pad) + 74px);
  }
}

/* Hero: the project's key film runs as the backdrop, poster held until Vimeo
   reports real playback. Sized below full height so the page starts reading
   before it ends. */
.project-hero {
  position: relative;
  width: 100%;
  height: 78dvh;
  min-height: 420px;
  margin-top: var(--nav-height);
  overflow: hidden;
  background: #050505;
}

.project-hero-img,
.project-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.project-hero-video {
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms var(--ease);
}

/* Cover the frame at any viewport ratio so the backdrop is never letterboxed
   or upscaled soft: 16:9 blown up to fill, centred, cropped by the hero. */
.project-hero-video iframe,
.project-hero-video.is-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-width: 177.78vh;
  min-height: 100%;
  transform: translate(-50%, -50%);
}

.project-hero.is-playing .project-hero-video { opacity: 1; }
.project-hero.is-playing .project-hero-img { opacity: 0; }

.project-hero-img { transition: opacity 600ms var(--ease); }

.project-hero::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgb(5 5 5 / 82%), rgb(5 5 5 / 0%) 48%);
  content: "";
  pointer-events: none;
}

.project-hero-title {
  position: absolute;
  right: clamp(18px, 5vw, 64px);
  bottom: max(40px, calc(env(safe-area-inset-bottom) + 24px));
  left: clamp(18px, 5vw, 64px);
  z-index: 2;
}

.project-hero-client {
  display: block;
  margin-bottom: 12px;
  color: rgb(242 241 237 / 74%);
}

.project-hero-name {
  margin: 0;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(40px, 9vw, 104px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

/* Gallery: contained editorial column. Only the hero goes edge to edge; every
   photograph lives inside a centered max-width column with real side gutters.
   "Full-width" rows now mean full COLUMN width, never the viewport. */
.project-gallery {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vw, 18px);
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(26px, 4vw, 64px) clamp(16px, 4vw, 64px);
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   Project body: films first in a tight uniform grid, then photography in a
   complementary mosaic. Both run end to end with one shared gutter, so the
   two blocks read as one system instead of a stack of full-screen plates.
   --------------------------------------------------------------------------- */
.project-body {
  --pg-gap: 8px;
  --pg-gutter: clamp(8px, 1.4vw, 20px);
  padding: clamp(28px, 4vw, 56px) var(--pg-gutter) clamp(40px, 6vw, 96px);
}

.project-block + .project-block { margin-top: clamp(28px, 4vw, 56px); }

.project-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: var(--pg-gap);
  padding: 0 2px;
}

.project-block-head h2 {
  margin: 0;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* Films: every tile identical, gaps even, edge to edge. */
.project-films {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols, 3), minmax(0, 1fr));
  gap: var(--pg-gap);
}

.project-films .project-video,
.project-films .project-media {
  width: 100%;
  aspect-ratio: var(--pg-ratio, 16 / 9);
  height: auto;
  margin: 0;
}

/* A project whose films are mostly vertical gets a taller, narrower tile and
   more columns rather than a 9:16 frame cropped into a 16:9 hole. */
.project-films.is-vertical { --pg-cols: 5; --pg-ratio: 9 / 16; }

/* Photography: equal columns, native aspect preserved, no cropping and no
   full-bleed plates.
   This is CSS multi-column rather than a grid with computed row spans. The
   span approach needed the rendered column width measured in JS, which is
   only correct once the layer is visible and laid out, and got that wrong on
   every breakpoint it was not tuned for. Columns need no measurement at all:
   each frame keeps its own aspect, the gutters stay even, and it is right on
   first paint at any width. */
.project-photos {
  column-count: var(--pg-cols, 3);
  column-gap: var(--pg-gap);
}

.project-photos .project-row {
  break-inside: avoid;
  margin: 0 0 var(--pg-gap);
}

.project-photos .project-media {
  width: 100%;
  height: auto;
}

.project-photos .project-media img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 1100px) {
  .project-films { --pg-cols: 2; }
  .project-films.is-vertical { --pg-cols: 3; }
  .project-photos { --pg-cols: 2; }
}

@media (max-width: 640px) {
  .project-body { --pg-gap: 6px; }
  .project-films { --pg-cols: 1; }
  .project-films.is-vertical { --pg-cols: 2; }
  .project-photos { --pg-cols: 2; }
}

.project-row {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 660ms var(--ease), transform 660ms var(--ease);
}

.project-row.is-in {
  opacity: 1;
  transform: none;
}

.project-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1.4vw, 18px);
}

.project-single {
  max-width: 100%;
  margin: 0 auto;
}

.project-media {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #0d0d0d;
}

.project-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0d0d0d;
}

.project-video-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 14px;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: radial-gradient(circle at 50% 46%, rgb(20 20 20 / 55%), #0b0b0b);
  color: var(--ink);
  cursor: pointer;
}

.project-video-play span {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid rgb(242 241 237 / 45%);
  border-radius: 50%;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}

.project-video-play:hover span {
  border-color: var(--ink);
  transform: scale(1.06);
}

.project-video-play small {
  font-family: "Archivo", Arial, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.project-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Next project */
.project-next {
  position: relative;
  display: block;
  width: 100%;
  min-height: 46dvh;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #050505;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.project-next-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.32;
  transition: opacity 520ms var(--ease), transform 900ms var(--ease);
}

.project-next:hover .project-next-img {
  opacity: 0.48;
  transform: scale(1.03);
}

.project-next::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(5 5 5 / 62%), rgb(5 5 5 / 30%));
  content: "";
  pointer-events: none;
}

.project-next-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
  min-height: 46dvh;
  padding: clamp(28px, 6vw, 84px);
}

.project-next-label {
  color: rgb(242 241 237 / 74%);
}

.project-next-name {
  margin: 0;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(34px, 7vw, 88px);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .project-pair {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-layer {
    transition: opacity 160ms linear;
  }

  .project-row {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- Round 5: project context line, rhythm variation, video posters ---- */
.project-hero-context {
  margin: 12px 0 0;
  color: rgb(242 241 237 / 74%);
  font-family: "Archivo", Arial, sans-serif;
  font-size: clamp(13px, 1.5vw, 15px);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Breathing beat: a wider gap before every fourth row. */
.project-row--beat {
  margin-top: clamp(26px, 5vw, 72px);
}

/* Standalone portrait: height-capped and centered on desktop, full-width on
   mobile (avoids any chance of horizontal overflow at narrow widths). */
@media (min-width: 761px) {
  .project-row--tall {
    display: flex;
    justify-content: center;
  }

  .project-row--tall .project-media {
    width: auto;
    max-width: 100%;
    height: 85dvh;
  }
}

/* Round 9 fix: the tall row is a flex item of the gallery column, and
   .project-single's auto margins cancel the default cross-axis stretch, so
   the row's width falls back to fit-content. A portrait IMAGE still sizes the
   row through the <img>'s intrinsic width, but the video wrapper's children
   are all absolutely positioned (intrinsic width 0), so below 761px the row
   and video collapsed to 0x0. Give the tall row a definite width, and size
   vertical video from a definite WIDTH (85dvh worth of its true aspect,
   capped by the container) so aspect-ratio always resolves: height-capped,
   centered, true aspect at every viewport width. */
.project-row--tall {
  width: 100%;
}

.project-row--tall .project-video {
  width: min(100%, calc(85dvh * var(--video-aspect, 0.5625)));
  height: auto;
  margin-inline: auto;
}

/* Real still behind the play button (poster-first). */
.project-video-poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-video .project-video-play {
  z-index: 1;
  background: rgb(5 5 5 / 44%);
}

.project-video .project-video-play:hover {
  background: rgb(5 5 5 / 32%);
}

/* ============================================================
   Round 6: Course pages (coaching / blueprint / cinematography)
   and Contact page. Same #050505 world, Archivo Black display,
   Plex Mono labels, shared easing. Fully contained columns; only
   the course hero goes edge to edge.
   ============================================================ */
.course-inner {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding-inline: var(--pad);
  box-sizing: border-box;
}

/* Hero */
.course-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100dvh;
  overflow: hidden;
  background: #050505;
}

.course-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}

.course-hero::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgb(5 5 5 / 92%) 4%, rgb(5 5 5 / 30%) 52%, rgb(5 5 5 / 55%));
  content: "";
  pointer-events: none;
}

.course-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  width: 100%;
  padding-block: clamp(96px, 14vh, 140px) clamp(48px, 8vh, 96px);
  text-align: center;
}

.course-hero .section-label {
  display: block;
  margin-bottom: 20px;
  color: rgb(242 241 237 / 74%);
}

.course-hero h1 {
  max-width: 22ch;
  margin: 0 auto;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(21px, 6.4vw, 60px);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-wrap: balance;
}

.course-hero-pitch {
  max-width: 48ch;
  margin: 24px auto 0;
  color: var(--ink);
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.5;
  text-wrap: balance;
}

.course-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 26px;
  margin-top: 34px;
}

.course-price {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(242 241 237 / 78%);
}

.course-price strong {
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Generic contained section */
.course-section {
  padding-block: clamp(58px, 8.5vh, 108px);
  border-top: 1px solid var(--line);
}

.course-section-head {
  display: grid;
  justify-items: center;
  gap: 16px;
  max-width: 52ch;
  margin-inline: auto;
  text-align: center;
}

.course-section-head h2 {
  max-width: 20ch;
  text-wrap: balance;
}

.course-section-head .course-lede {
  margin-inline: auto;
  text-align: center;
}

.course-section-head h2 {
  margin: 0;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(21px, 3vw, 38px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.course-lede {
  max-width: 62ch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(16px, 1.9vw, 20px);
  line-height: 1.62;
}

.course-lede + .course-lede {
  margin-top: 22px;
}

/* Included list */
.course-includes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: 56px;
  border-top: 1px solid var(--line);
}

.course-includes li {
  display: flex;
  gap: 16px;
  padding: 26px 30px 26px 0;
  border-bottom: 1px solid var(--line);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.5;
}

.course-includes li span {
  flex: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--quiet);
}

/* Module cards */
.course-modules {
  display: grid;
  gap: 18px;
  margin-top: 56px;
}

.course-module {
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr);
  gap: clamp(18px, 4vw, 60px);
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid var(--line);
  background: var(--surface);
}

.course-module-index {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--quiet);
}

.course-module h3 {
  margin: 8px 0 0;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: normal;
}

.course-module p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.6;
}

/* Pricing tiers (coaching) */
.course-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 56px;
}

.course-tier {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(28px, 3vw, 40px);
  border: 1px solid var(--line);
  background: var(--surface);
}

.course-tier-name {
  margin: 0;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.course-tier-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--quiet);
}

.course-tier-price strong {
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.course-tier p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.course-tier ul {
  display: grid;
  gap: 12px;
  margin: 0;
}

.course-tier li {
  padding-left: 20px;
  position: relative;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}

.course-tier li::before {
  position: absolute;
  left: 0;
  content: "+";
  color: var(--quiet);
}

.course-tier .button {
  margin-top: auto;
  width: 100%;
}

/* Comparison (cinematography) */
.course-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 56px;
}

.course-compare-col {
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid var(--line);
}

.course-compare-col.is-featured {
  background: var(--ink);
  color: var(--paper);
}

.course-compare-col h3 {
  margin: 0 0 20px;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(15px, 2.1vw, 24px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.course-compare-col dl {
  display: grid;
  gap: 0;
  margin: 0;
}

.course-compare-col div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-top: 1px solid rgb(122 122 122 / 34%);
  font-size: 14px;
  line-height: 1.4;
}

.course-compare-col dt {
  color: rgb(122 122 122 / 92%);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
}

.course-compare-col.is-featured dt {
  color: rgb(8 8 8 / 60%);
}

.course-compare-col dd {
  margin: 0;
  text-align: right;
}

/* Proof / testimonials */
.course-proof {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 56px;
}

.course-quote {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid var(--line);
  background: var(--surface);
}

.course-quote p {
  margin: 0;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(19px, 2.2vw, 25px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.course-quote footer {
  display: grid;
  gap: 4px;
}

.course-quote strong {
  font-size: 14px;
  font-weight: 500;
}

.course-quote span {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--quiet);
}

/* Enroll band */
.course-enroll {
  display: grid;
  gap: 26px;
  justify-items: center;
  padding-block: clamp(80px, 14vh, 170px);
  border-top: 1px solid var(--line);
  text-align: center;
}

.course-enroll h2 {
  max-width: 30ch;
  margin: 0;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(22px, 3.4vw, 40px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-wrap: balance;
}

.course-enroll p {
  max-width: 54ch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.6;
}

.course-enroll-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: 6px;
}

@media (max-width: 760px) {
  .course-includes,
  .course-compare {
    grid-template-columns: 1fr;
  }

  .course-includes li {
    padding-right: 0;
  }

  .course-module {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ---- Contact page ---- */
.contact-shell {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
  padding: calc(var(--nav-height) + clamp(64px, 12vh, 120px)) var(--pad) clamp(80px, 12vh, 140px);
}

.contact-intro h1 {
  margin: 0;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(44px, 8vw, 104px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

.contact-intro-lede {
  max-width: 46ch;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.55;
}

.contact-routes {
  display: grid;
  gap: 0;
  margin-top: 48px;
  border-top: 1px solid var(--line);
}

.contact-route {
  display: grid;
  gap: 6px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.contact-route span {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--quiet);
}

.contact-route a,
.contact-route p {
  margin: 0;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.4;
  color: var(--ink);
  transition: color 180ms var(--ease);
}

.contact-route a:hover,
.contact-route a:focus-visible {
  color: var(--muted);
}

.contact-form {
  display: grid;
  gap: 24px;
  padding: clamp(28px, 3.4vw, 44px);
  border: 1px solid var(--line);
  background: var(--surface);
}

.contact-field {
  display: grid;
  gap: 10px;
}

.contact-field label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted);
}

.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: #0b0b0b;
  color: var(--ink);
  font-family: "Archivo", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  box-sizing: border-box;
  transition: border-color 180ms var(--ease);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
}

.contact-field select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 L6 8 L9.5 4.5' fill='none' stroke='%23aaa9a4' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 11px 11px;
  cursor: pointer;
}

.contact-field textarea {
  min-height: 130px;
  resize: vertical;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--ink);
}

.contact-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.contact-form .button {
  width: 100%;
}

.contact-form-note {
  margin: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--quiet);
}

@media (max-width: 860px) {
  .contact-shell {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

@media (max-width: 560px) {
  .contact-field-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* =========================================================================
   ROUND 7 — Course + Contact redesign
   Tonal rhythm (paper/light sections), image anchors, video testimonials,
   pricing focal points. Scoped to course/contact selectors only.
   Palette note: --paper is the DARK base (#080808); --ink is the near-white
   (#f2f1ed). A "paper" (light) section = ink background, paper-colored text,
   matching the homepage "Work with us" lane inversion.
   ========================================================================= */

/* --- Center the enroll head phrasing consistently --- */
.course-enroll h2 {
  text-wrap: balance;
}

/* --- Paper (light) section treatment --- */
.course-section.is-paper {
  background: var(--ink);
  color: var(--paper);
  border-top-color: rgb(8 8 8 / 12%);
}

.course-section.is-paper h2,
.course-section.is-paper h3 {
  color: var(--paper);
}

.course-section.is-paper .section-label {
  color: rgb(8 8 8 / 52%);
}

.course-section.is-paper .course-lede,
.course-section.is-paper .course-module p,
.course-section.is-paper .course-split-text p,
.course-section.is-paper p {
  color: rgb(8 8 8 / 66%);
}

.course-section.is-paper .course-includes,
.course-section.is-paper .course-includes li {
  border-color: rgb(8 8 8 / 14%);
}

.course-section.is-paper .course-includes li {
  color: var(--paper);
}

.course-section.is-paper .course-includes li::before {
  color: rgb(8 8 8 / 45%);
}

.course-section.is-paper .course-module,
.course-section.is-paper .course-tier,
.course-section.is-paper .course-quote {
  background: #fbfaf7;
  border-color: rgb(8 8 8 / 12%);
}

.course-section.is-paper .course-tier li {
  color: var(--paper);
}

.course-section.is-paper .course-tier li::before,
.course-section.is-paper .course-module-index {
  color: rgb(8 8 8 / 45%);
}

/* Buttons on paper: flip so the primary reads dark on the light field */
.course-section.is-paper .button-light {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.course-section.is-paper .button-light:hover,
.course-section.is-paper .button-light:focus-visible {
  background: transparent;
  color: var(--paper);
  border-color: var(--paper);
}

.course-section.is-paper .button-outline {
  border-color: rgb(8 8 8 / 28%);
  color: var(--paper);
}

.course-section.is-paper .button-outline:hover,
.course-section.is-paper .button-outline:focus-visible {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

/* --- Clean list markers (no decorative number stamps) --- */
.course-includes {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 900px;
  margin-inline: auto;
}

.course-includes li {
  padding-left: 26px;
  position: relative;
}

.course-includes li::before {
  position: absolute;
  left: 0;
  content: "+";
  color: var(--quiet);
  font-family: "IBM Plex Mono", monospace;
}

/* --- Full-bleed image band (dark, one focal image per viewport) --- */
.course-band {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #050505;
}

.course-band img {
  display: block;
  width: 100%;
  height: clamp(300px, 58vh, 620px);
  object-fit: cover;
}

.course-band.is-tall img {
  height: clamp(360px, 72vh, 760px);
}

/* --- Split section: text one side, image the other (alternating) --- */
.course-split .course-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 84px);
}

.course-split-text {
  display: grid;
  gap: 20px;
  justify-items: start;
  text-align: left;
  max-width: 46ch;
}

.course-split-text h2 {
  margin: 0;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(20px, 2.7vw, 36px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: pretty;
}

/* Longer verbatim statements (e.g. the Blueprint "$10k-$30k" line) get a
   touch smaller so they read as a tight block, not orphaned words. */
.course-split-text h2.is-long {
  font-size: clamp(16px, 2.2vw, 30px);
  line-height: 1.12;
  text-wrap: normal;
}

.course-split-text .course-lede {
  margin: 0;
  max-width: none;
}

.course-split-media {
  margin: 0;
  overflow: hidden;
  background: #0d0d0d;
}

.course-split-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(280px, 42vh, 520px);
  object-fit: cover;
}

.course-split.is-reverse .course-split-text {
  order: 2;
}

.course-split.is-reverse .course-split-media {
  order: 1;
}

/* --- BTS strip: a row of stills --- */
.course-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 48px;
}

.course-strip figure {
  margin: 0;
  overflow: hidden;
  background: #0d0d0d;
}

.course-strip img {
  display: block;
  width: 100%;
  height: clamp(200px, 26vw, 340px);
  object-fit: cover;
}

/* --- Video testimonials (poster-first, tap to play) --- */
.course-videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 48px;
}

.course-video {
  display: grid;
  gap: 16px;
  margin: 0;
}

.course-video-play {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 1px solid var(--line);
  background: #0d0d0d;
  cursor: pointer;
  overflow: hidden;
}

.course-video-play img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--ease), opacity 200ms var(--ease);
}

.course-video-play:hover img,
.course-video-play:focus-visible img {
  transform: scale(1.03);
  opacity: 0.86;
}

.course-video-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgb(8 8 8 / 62%);
  color: var(--ink);
  backdrop-filter: blur(2px);
  transition: background-color 180ms var(--ease);
}

.course-video-play:hover .course-video-icon,
.course-video-play:focus-visible .course-video-icon {
  background: rgb(8 8 8 / 82%);
}

.course-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  display: block;
}

.course-video figcaption {
  display: grid;
  gap: 4px;
}

.course-video figcaption strong {
  font-size: 14px;
  font-weight: 500;
}

.course-video figcaption span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

/* --- Pricing focal (paper, price is the largest element) --- */
.course-pricing .course-tiers {
  max-width: 900px;
  margin-inline: auto;
}

.course-price-focal {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: 48px;
  text-align: center;
}

.course-price-focal .amount {
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(64px, 13vw, 150px);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: -0.02em;
}

.course-price-focal .term {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(8 8 8 / 55%);
}

.course-price-focal .course-enroll-actions {
  margin-top: 26px;
}

/* Paper pricing: enlarge the tier price so money is the focal point */
.course-pricing.is-paper .course-tier-price strong {
  color: var(--paper);
  font-size: clamp(40px, 5vw, 56px);
}

.course-pricing.is-paper .course-tier-price {
  color: rgb(8 8 8 / 55%);
}

.course-pricing .course-tier.is-feature {
  outline: 2px solid var(--paper);
  outline-offset: -2px;
}

/* Comparison table money focal on paper */
.course-section.is-paper .course-compare-col {
  border-color: rgb(8 8 8 / 14%);
}

.course-section.is-paper .course-compare-col.is-featured {
  background: var(--paper);
  color: var(--ink);
}

.course-section.is-paper .course-compare-col:not(.is-featured) dt {
  color: rgb(8 8 8 / 55%);
}

.course-section.is-paper .course-compare-col div {
  border-color: rgb(8 8 8 / 14%);
}

/* --- Contact page: paper panel (intro + form) beside a strong image --- */
.contact-shell.is-split {
  grid-template-columns: 1.02fr 0.98fr;
  align-items: stretch;
  gap: 0;
  padding: 0;
  min-height: 100dvh;
}

.contact-shell.is-split .contact-panel {
  display: grid;
  gap: clamp(34px, 6vh, 60px);
  align-content: start;
  padding: calc(var(--nav-height) + clamp(48px, 9vh, 96px)) clamp(24px, 5vw, 72px) clamp(56px, 9vh, 110px);
  box-sizing: border-box;
  background: var(--ink);
  color: var(--paper);
}

.contact-shell.is-split .contact-intro h1 {
  max-width: 16ch;
  font-size: clamp(30px, 5.4vw, 76px);
  text-wrap: balance;
}

.contact-shell.is-split .contact-intro-lede {
  color: rgb(8 8 8 / 66%);
}

.contact-shell.is-split .contact-routes {
  border-top-color: rgb(8 8 8 / 14%);
}

.contact-shell.is-split .contact-route {
  border-bottom-color: rgb(8 8 8 / 14%);
}

.contact-shell.is-split .contact-route span {
  color: rgb(8 8 8 / 50%);
}

.contact-shell.is-split .contact-route a,
.contact-shell.is-split .contact-route p {
  color: var(--paper);
}

.contact-shell.is-split .contact-route a:hover,
.contact-shell.is-split .contact-route a:focus-visible {
  color: rgb(8 8 8 / 55%);
}

/* Form on the paper panel: dark fields on the light field read as intentional */
.contact-shell.is-split .contact-form {
  border: 0;
  background: transparent;
  padding: 0;
  gap: 20px;
  align-content: start;
}

.contact-shell.is-split .contact-field label {
  color: rgb(8 8 8 / 58%);
}

.contact-shell.is-split .contact-field input,
.contact-shell.is-split .contact-field select,
.contact-shell.is-split .contact-field textarea {
  background-color: #fff;
  color: var(--paper);
  border-color: rgb(8 8 8 / 20%);
}

.contact-shell.is-split .contact-field input:focus,
.contact-shell.is-split .contact-field select:focus,
.contact-shell.is-split .contact-field textarea:focus {
  border-color: var(--paper);
}

.contact-shell.is-split .contact-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 L6 8 L9.5 4.5' fill='none' stroke='%23737373' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 11px 11px;
}

.contact-shell.is-split .contact-form .button-light {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.contact-shell.is-split .contact-form .button-light:hover,
.contact-shell.is-split .contact-form .button-light:focus-visible {
  background: transparent;
  color: var(--paper);
  border-color: var(--paper);
}

.contact-shell.is-split .contact-form-note {
  color: rgb(8 8 8 / 50%);
}

.contact-media {
  position: relative;
  overflow: hidden;
  background: #0b0b0b;
  min-height: clamp(320px, 48vh, 100dvh);
}

.contact-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 960px) {
  .course-split .course-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .course-split.is-reverse .course-split-text {
    order: 1;
  }

  .course-split.is-reverse .course-split-media {
    order: 2;
  }

  .course-split-text {
    max-width: none;
  }

  .contact-shell.is-split {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .contact-media {
    order: -1;
    min-height: clamp(240px, 40vh, 360px);
  }
}

@media (max-width: 720px) {
  .course-strip {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .course-strip figure:nth-child(3) {
    grid-column: 1 / -1;
  }

  .course-strip img {
    height: clamp(180px, 42vw, 260px);
  }
}

@media (max-width: 480px) {
  .course-videos {
    grid-template-columns: 1fr;
  }
}

/* --- Enroll money-close with a background image anchor --- */
.course-enroll.is-image {
  position: relative;
  overflow: hidden;
  background: #050505;
}

.course-enroll.is-image .course-enroll-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
}

.course-enroll.is-image::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background: linear-gradient(to top, rgb(5 5 5 / 88%), rgb(5 5 5 / 40%) 50%, rgb(5 5 5 / 78%));
  pointer-events: none;
}

.course-enroll.is-image > .course-inner {
  position: relative;
  z-index: 2;
}

/* Enroll inner stack (replaces the old inline grid style) */
.course-enroll > .course-inner {
  display: grid;
  gap: 26px;
  justify-items: center;
}

/* Compact modules: 3-up stacked cards (2 rows) so the section stays near one viewport */
.course-modules {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-inline: auto;
  margin-top: 40px;
}

.course-modules .course-module {
  grid-template-columns: 1fr;
  gap: 10px;
  padding: clamp(22px, 2.4vw, 30px);
}

@media (max-width: 900px) {
  .course-modules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .course-modules {
    grid-template-columns: 1fr;
  }
}

/* Tighter includes so the list stays within a viewport */
.course-includes {
  margin-top: 40px;
}

.course-includes li {
  padding-top: 18px;
  padding-bottom: 18px;
}

/* Includes/learn list living inside a split (keeps an image in view beside the list) */
.course-split .course-includes {
  grid-template-columns: 1fr;
  max-width: none;
  margin-top: 6px;
  border-top: 0;
}

.course-split .course-includes li {
  border-bottom: 1px solid var(--line);
  padding: 13px 0 13px 26px;
  font-size: clamp(15px, 1.6vw, 17px);
}

.course-section.is-paper.course-split .course-includes li {
  border-color: rgb(8 8 8 / 14%);
}

.course-split .course-includes li:last-child {
  border-bottom: 0;
}

/* Image tile filling the empty cell of the module grid (keeps a photo in-section) */
.course-module-media {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0d0d0d;
}

.course-section.is-paper .course-module-media {
  border-color: rgb(8 8 8 / 12%);
}

.course-module-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 200px;
  object-fit: cover;
}

@media (max-width: 620px) {
  .course-module-media {
    min-height: 220px;
  }
}

/* Inline full-width media inside a text section (e.g. comparison) */
.course-inline-media {
  margin: 44px 0 0;
  overflow: hidden;
  background: #0d0d0d;
}

.course-inline-media img {
  display: block;
  width: 100%;
  height: clamp(240px, 32vw, 400px);
  object-fit: cover;
}

/* =========================================================================
   ROUND 8 — Interior reset (Giovani, 2026-07-11)
   Copy-fidelity rebuild. Fixes: compact contact page, films/photo hero
   rhythm to match the homepage, single-column includes on paper sections,
   honest module grid (no filler tiles). Scoped; overrides only where the
   Round 7 layout is being retired.
   ========================================================================= */

/* --- Films / Photo hero: quiet centered opening in the homepage display
   treatment, generous breathing room before the grids --- */
.photo-page-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  min-height: 64dvh;
  padding: calc(var(--nav-height) + clamp(70px, 12vh, 130px)) var(--pad) clamp(56px, 9vh, 104px);
  text-align: center;
  border-bottom: 1px solid var(--line);
}

.photo-page-hero h1 {
  max-width: 16ch;
  font-size: clamp(56px, 12vw, 148px);
  line-height: 0.9;
  text-wrap: balance;
}

.photo-page-hero > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding-bottom: 0;
}

.photo-page-hero p {
  max-width: 46ch;
  margin: 0;
  text-align: center;
  font-size: clamp(16px, 1.9vw, 19px);
}

@media (max-width: 760px) {
  .photo-page-hero {
    gap: 22px;
    min-height: 56dvh;
    padding: calc(var(--nav-height) + 52px) var(--pad) 54px;
  }
  .photo-page-hero h1 {
    font-size: clamp(46px, 16vw, 72px);
  }
}

/* --- Contact: compact, quiet page. Intro then one contained block that
   holds the form and the direct routes together. No viewport-devouring
   panels; reads like the footer's calm. --- */
.contact-compact {
  padding: calc(var(--nav-height) + clamp(56px, 10vh, 104px)) var(--pad) clamp(72px, 12vh, 120px);
}

.contact-compact-inner {
  width: min(1080px, 100%);
  margin: 0 auto;
}

.contact-compact .contact-intro {
  display: grid;
  justify-items: center;
  gap: 22px;
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(40px, 6vh, 64px);
}

.contact-compact .contact-intro h1 {
  margin: 0;
  max-width: 18ch;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(32px, 5vw, 62px);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-wrap: balance;
}

.contact-compact .contact-intro-lede {
  max-width: 40ch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: 1.55;
  text-wrap: balance;
}

.contact-block {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  padding: clamp(28px, 3.4vw, 48px);
  border: 1px solid var(--line);
  background: var(--surface);
}

.contact-block .contact-form {
  border: 0;
  background: transparent;
  padding: 0;
  gap: 20px;
}

.contact-block .contact-routes {
  margin-top: 0;
  border-top: 1px solid var(--line);
}

@media (max-width: 760px) {
  .contact-block {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

/* =========================================================================
   ROUND 8 — Proof / evidence treatment (Giovani correction 2026-07-11)
   Kyle's software screenshots (invoices, revenue, program UI, win-chats) are
   PROOF on these sales pages. They get deliberate framing + context, placed
   beside the claim they support. Photography stays atmosphere; this is
   evidence. Two frames: a browser/receipt card and a phone chat card.
   ========================================================================= */
/* Round 9 (Giovani 2026-07-11): kill the fake browser shell + phone bezel.
   The screenshot itself IS the card: tight crop, 1px site line, small radius,
   soft real shadow. Caption sits BELOW in the letterspaced Archivo 500 label
   style. Generous room around each card lives in the grid gap, not inside it. */
.proof-cards {
  display: grid;
  gap: clamp(22px, 3vw, 36px);
  margin-top: 48px;
}

.proof-cards.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.proof-cards.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.proof-cards.is-chats { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.proof-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.proof-shot {
  display: block;
  width: 100%;
  height: clamp(190px, 20vw, 250px);
  object-fit: cover;
  object-position: top center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 22px 46px -26px rgb(0 0 0 / 66%);
}

.course-section.is-paper .proof-shot {
  border-color: rgb(8 8 8 / 14%);
  box-shadow: 0 22px 46px -28px rgb(8 8 8 / 32%);
}

/* Caption below the card — letterspaced Archivo 500 label, not a title bar. */
.proof-cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}

.proof-cap .label {
  font-family: "Archivo", Arial, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--quiet);
}

.course-section.is-paper .proof-cap .label { color: rgb(8 8 8 / 55%); }

.proof-cap .fig {
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(15px, 1.7vw, 19px);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Win-chats: same quiet card, just a taller portrait crop. No device bezel. */
.proof-chat .proof-chat-shot {
  display: block;
  width: 100%;
  height: clamp(300px, 30vw, 380px);
  object-fit: cover;
  object-position: top center;
  background: #000;
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 22px 46px -26px rgb(0 0 0 / 66%);
}

.course-section.is-paper .proof-chat .proof-chat-shot {
  border-color: rgb(8 8 8 / 14%);
  box-shadow: 0 22px 46px -28px rgb(8 8 8 / 32%);
}

@media (max-width: 900px) {
  .proof-cards.is-chats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-cards.is-3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .proof-cards.is-2,
  .proof-cards.is-3,
  .proof-cards.is-chats { grid-template-columns: 1fr; }
}

.proof-cards.is-solo {
  grid-template-columns: minmax(0, 780px);
  justify-content: center;
}

.proof-cards.is-solo .proof-shot {
  height: clamp(240px, 34vw, 440px);
  object-position: center;
}

/* Small-screen tier cards: tighten padding and title so two-word tier names
   ("Club Membership" / "VIP Membership") stay on one line at 320px. */
@media (max-width: 560px) {
  .course-tier {
    padding: 24px 20px;
  }
  .course-tier-name {
    font-size: 20px;
  }
}