:root {
  --black: #000000;
  --white: #ffffff;
  --hot-pink: #ff2b91;
  --content-background: #dcf0e6;
  --page-background-current: #000000;
  --state-enter: 2.5s;
  --state-exit: 0.833333s;
  --clients-enter: .633333s;
  --ui-font: "P22 Johnston Underground", "Gill Sans", "Trebuchet MS", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--page-background-current); }
body {
  overflow-x: hidden;
  color: var(--white);
  font-family: var(--ui-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
button, input, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.site-shell { width: 100%; background: var(--page-background-current); }

/*
  Banner geometry:
  - source movies = 1440 x 720
  - permanent tint: black at y=0 -> white at y=230
  - white/no vertical tint from y=230 -> y=450
  - white at y=450 -> black at y=710
  - solid black from y=710 -> y=785 as bleed protection
*/
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 785;
  /* Keep enough vertical room for the splash-sized ring and the category row.
     This changes only the banner depth on narrow windows; the ring itself
     always retains the exact splash scale and screen position below. */
  min-height: 92vh;
  min-height: 92svh;
  overflow: hidden;
  background: var(--black);
  isolation: isolate;
}

/* The movies and both tint layers live on one 1440 x 785 plane. The plane
   covers the hero with a single scale factor and crops only at the sides. */
.banner-composite {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 0;
  width: max(100%, calc(92vh * 1440 / 785));
  width: max(100%, calc(92svh * 1440 / 785));
  aspect-ratio: 1440 / 785;
  transform: translateX(-50%);
  overflow: hidden;
  background: var(--black);
}

.banner-player {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 91.719745%;
  z-index: 0;
  overflow: hidden;
  background: var(--black);
}
.banner-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
}
.banner-video.is-active { opacity: 1; }

/* Initial page-load entrance only. Subsequent banner changes are immediate. */
.banner-video.initial-entry {
  animation: initial-banner-fade 2.5s ease both;
}

@keyframes initial-banner-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/*
  Permanent Banner Black Tinting.
  Top and bottom tinting are preserved from Draft 08.
  Only the donut/radial darkening behind the Title Ring has been removed.
  The layer remains a neutral Multiply tint: white is neutral and black fully darkens.
*/
.banner-black-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: fill;
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
}

/* Exact Banner Overlay - Tinting artwork from Illustrator. It shares the
   banner's 1440 x 785 coordinate system and responsive scaling. */
.banner-overlay-tint {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  background-image: url("../images/ui/Banner%20Overlay%20-%20Tinting.webp");
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  mix-blend-mode: multiply;
  opacity: .3;
  pointer-events: none;
  user-select: none;
  transition: opacity var(--state-exit) ease;
}

/* The new page colour begins at the physical bottom of the viewport, then
   rises to its top as scrollY moves from 250px to 700px. Keeping this outside
   the scaled banner plane removes the screen-size-dependent starting seam. */
.content-background-wipe {
  position: fixed;
  inset: 0;
  z-index: 3;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: var(--content-background);
  transform: translate3d(0, var(--content-wipe-viewport-top, 100vh), 0);
  will-change: transform;
  pointer-events: none;
}
.hero.info-overlay-active .banner-overlay-tint,
.hero:has(.clients-overlay.is-active) .banner-overlay-tint,
.hero:has(.hero-info-overlay.is-active) .banner-overlay-tint {
  opacity: .8;
}

.clients-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.client-logo {
  position: absolute;
  z-index: 1;
  height: auto;
  opacity: 0;
  transform: translateY(80px);
  pointer-events: none;
  user-select: none;
}

/* Exact individual bounds from the revised Clients layer (1440 x 785).
   Every logo fades and rises for 19 frames. Rows enter top-to-bottom, with
   irregular frame-based delays inside each row; the last logo finishes at 1.7s. */
.client-a1 { left: 33.402778%; top: 22.165605%; width: 3.194444%; --delay: .1s; }
.client-a2 { left: 40.902778%; top: 23.821656%; width: 7.638889%; --delay: .2s; }
.client-a3 { left: 51.944444%; top: 22.165605%; width: 6.180556%; --delay: 0s; }
.client-a4 { left: 60.486111%; top: 22.165605%; width: 8.472222%; --delay: .133333s; }
.client-b1 { left: 30.763889%; top: 32.993631%; width: 8.472222%; --delay: .4s; }
.client-b2 { left: 42.291667%; top: 32.738854%; width: 4.861111%; --delay: .266667s; }
.client-b3 { left: 53.194444%; top: 32.738854%; width: 3.680556%; --delay: .433333s; }
.client-b4 { left: 60.694444%; top: 32.993631%; width: 8.055556%; --delay: .366667s; }
.client-c1 { left: 30.763889%; top: 44.458599%; width: 8.472222%; --delay: .7s; }
.client-c2 { left: 40.902778%; top: 44.203822%; width: 7.638889%; --delay: .633333s; }
.client-c3 { left: 51.180556%; top: 43.439490%; width: 7.708333%; --delay: .733333s; }
.client-c4 { left: 60.902778%; top: 44.585987%; width: 7.638889%; --delay: .533333s; }
.client-d1 { left: 31.180556%; top: 53.885350%; width: 7.638889%; --delay: .966667s; }
.client-d2 { left: 40.625000%; top: 52.515924%; width: 8.472222%; --delay: 1.066667s; }
.client-d3 { left: 51.180556%; top: 54.267516%; width: 7.708333%; --delay: .866667s; }
.client-d4 { left: 62.638889%; top: 54.267516%; width: 4.236111%; --delay: 1s; }
.client-d5 { left: 40.625000%; top: 63.566879%; width: 8.472222%; --delay: .933333s; }
.client-d6 { left: 51.180556%; top: 63.566879%; width: 7.708333%; --delay: 1.033333s; }
.clients-overlay.is-active .client-logo {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--clients-enter) ease var(--delay),
    transform var(--clients-enter) cubic-bezier(.16,1,.3,1) var(--delay);
}
.clients-overlay.is-leaving .client-logo {
  opacity: 0;
  transform: translateY(0);
  transition: opacity var(--state-exit) ease;
}
.clients-overlay:not(.is-active):not(.is-leaving) .client-logo { transition: none; }

/* Banner-level About and Contact states from the latest Illustrator mock. */
.hero-info-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
}
.hero-info-overlay.is-active {
  opacity: 1;
  transition: opacity var(--state-enter) ease;
}
.hero-info-overlay.is-leaving {
  opacity: 0;
  transition: opacity var(--state-exit) ease;
}
.hero-info-overlay:not(.is-active):not(.is-leaving) { transition: none; }

.about-banner-art {
  position: absolute;
  left: 30.833333%;
  top: 22.038217%;
  width: 38.263889%;
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
}

.contact-banner-overlay.is-active { pointer-events: auto; }
.contact-form {
  position: absolute;
  left: 30.833333%;
  top: 22.038217%;
  width: 38.333333%;
  height: 53.885350%;
  color: var(--white);
}
.contact-form-main {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 91.962175%;
  border: max(1px, .138889vw) solid rgba(255,255,255,.98);
}
.contact-form-header {
  position: relative;
  height: 20.051414%;
  border-bottom: max(1px, .138889vw) solid rgba(255,255,255,.98);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .06em;
  font-size: clamp(10px, 1.25vw, 18px);
  line-height: 1.05;
  letter-spacing: .08em;
}
.email-link {
  color: var(--white);
  text-decoration: none;
  transition: color 180ms ease;
}
.email-link:hover,
.email-link:focus-visible { color: var(--hot-pink); }

.contact-field {
  position: relative;
  display: block;
  height: 8.997429%;
  border-bottom: max(1px, .138889vw) solid rgba(255,255,255,.98);
}
.contact-field input,
.contact-message-field textarea {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--white);
  caret-color: var(--hot-pink);
  font-size: clamp(8px, .833333vw, 12px);
  line-height: 1.15;
}
.contact-field input {
  padding: 0 4.529%;
}
.contact-message-field {
  position: relative;
  display: block;
  height: 61.953728%;
}
.contact-message-field textarea {
  padding: 3.6% 4.529%;
  resize: none;
  overflow: auto;
}
.contact-field input::placeholder,
.contact-message-field textarea::placeholder {
  color: rgba(255,255,255,.98);
  opacity: 1;
}
.contact-field:focus-within,
.contact-message-field:focus-within {
  box-shadow: inset 0 0 0 1px var(--hot-pink);
}
.contact-send {
  position: absolute;
  left: 89.130435%;
  top: 91.725768%;
  width: 10.869565%;
  height: 8.274232%;
  margin: 0;
  padding: 0;
  border: max(1px, .138889vw) solid rgba(255,255,255,.98);
  border-top: 0;
  border-radius: 0;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  font-size: clamp(8px, .833333vw, 12px);
}
.contact-send:active,
.contact-send.is-sending {
  background: var(--white);
  color: var(--black);
}
.contact-send:focus-visible { outline: 2px solid var(--hot-pink); outline-offset: 2px; }
.contact-send:disabled { cursor: wait; }
.contact-status {
  position: absolute;
  left: 4.529%;
  top: 92.6%;
  width: 82%;
  margin: 0;
  color: var(--white);
  font-size: clamp(8px, .694444vw, 10px);
  line-height: 1.2;
}
.contact-status.is-error { color: var(--hot-pink); }
.contact-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Exact Mock(7) Text layer: 16pt navigation treatment with no stroke. */
.text-overlay-static,
.work-text-stack,
.work-text-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

.text-overlay-static,
.work-text-stack { z-index: 5; }

.text-overlay-static,
.work-text-overlay { object-fit: fill; }

/* CLIENTS / ABOUT / CONTACT white artwork fades in on initial load. */
.text-overlay-static {
  opacity: 0;
}

.hero.initial-ui-ready .text-overlay-static {
  animation: initial-ui-fade 1s ease forwards;
}

/* Bottom category text remains 0% on load and is scroll-driven. The same
   moving edge that reveals the green field swaps the white artwork to black. */
.work-text-stack {
  opacity: 0;
  will-change: opacity;
}
.work-text-overlay-white {
  clip-path: inset(0 0 calc(100% - var(--content-wipe-top, 100%)) 0);
}
.work-text-overlay-black {
  clip-path: inset(var(--content-wipe-top, 100%) 0 0 0);
  filter: brightness(0);
}


/*
  Animated replacement for Mock(7)'s “Title Ring” layer.

  The splash movie scales from the height of the browser. The home-page ring
  therefore always uses the identical height-based size and screen position.
  Narrow-window clearance is created by the hero's minimum height above,
  never by resizing or moving this ring independently.
*/
.title-ring-anchor {
  position: absolute;
  left: 50%;
  top: 49.7222vh;
  top: 49.7222svh;
  width: 50vh;
  width: 50svh;
  height: 48.8778vh;
  height: 48.8778svh;
  transform: translate(-50%, -50%);
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  user-select: none;
  opacity: 1;
  transition: opacity var(--state-enter) ease;
}
.hero.info-overlay-active .title-ring-anchor {
  opacity: 0;
  transition-duration: var(--state-exit);
}

.title-ring-rotator {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: 50% 50%;
  animation: title-ring-spin 100s linear infinite;
  animation-play-state: paused;
  will-change: transform;
}

.hero.initial-ui-ready .title-ring-rotator {
  animation-play-state: running;
}

/* Once the one-time entrance has completed, scroll position controls the
   ring and upper navigation directly. The ring's existing panel fade remains
   on its parent anchor and is therefore preserved. */
.hero.initial-ui-entered .title-ring-rotator {
  opacity: var(--top-ui-opacity, 1);
}

.title-ring-frame {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  mix-blend-mode: plus-lighter;
  opacity: 0;
}

.hero.initial-ui-ready .title-ring-frame {
  animation: initial-ui-fade 1s ease forwards;
}

/* Exact 50 × 57 px “Button DOWN” geometry from the 1440 × 785 Illustrator
   banner. The ring is sized and positioned in viewport-height units, so the
   arrow now uses the same coordinate system. This preserves their original
   38.8px gap at the 785px reference height even when the hero grows wider. */
.hero-down-button {
  position: absolute;
  left: 50%;
  top: 79.10828vh;
  top: 79.10828svh;
  z-index: 10;
  height: 7.261146%;
  aspect-ratio: 50 / 57;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: color 180ms ease;
}

.hero-down-button svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.hero-down-shadow { fill: rgb(0 0 0 / 40%); }
.hero-down-mark { fill: currentColor; }

.hero.initial-ui-ready .hero-down-button {
  animation: initial-ui-fade 1s ease forwards;
}

.hero.initial-ui-entered .hero-down-button {
  animation: none;
  opacity: var(--top-ui-opacity, 1);
}

.hero-down-button.is-scroll-interactive { pointer-events: auto; }
.hero-down-button:hover { color: var(--hot-pink); }
.hero-down-button:active { color: #ff0000; }
.hero-down-button:focus-visible {
  color: var(--hot-pink);
  outline: 2px solid var(--hot-pink);
  outline-offset: 4px;
}

@keyframes title-ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.top-nav,
.work-nav {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.top-nav {
  opacity: 0;
}

.hero.initial-ui-ready .top-nav {
  animation: initial-ui-fade 1s ease forwards;
}

.hero.initial-ui-entered .text-overlay-static,
.hero.initial-ui-entered .top-nav {
  animation: none;
  opacity: var(--top-ui-opacity, 1);
}

/* Existing lower category hotspots remain scroll-driven. */
.work-nav {
  opacity: 0;
  will-change: opacity;
}

@keyframes initial-ui-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Do not create invisible clickable category hotspots before the links
   have begun to appear. */
.work-nav:not(.is-interactive) .nav-hit {
  pointer-events: none;
}
.top-nav:not(.is-scroll-interactive) .nav-hit {
  pointer-events: none;
}
.nav-hit {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}
.nav-hit img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}
.nav-hit:hover img,
.nav-hit:focus-visible img { opacity: 1; }
.nav-hit:focus-visible { outline: 2px solid var(--hot-pink); outline-offset: 4px; }

/* Work links use explicit artwork layers: pink for rollover and pure red for
   the brief click confirmation. This remains reliable when opened from disk. */
.work-nav .nav-hit .nav-click-state { opacity: 0; }
.work-nav .nav-hit.is-click-pulsing .nav-click-state {
  animation: work-link-click-pulse 280ms ease-out both;
}
/* Once the green field has passed the link row, cover the underlying black
   static label inside the tight hotspot before drawing its coloured state.
   Fade that cover at exactly the same speed as the pink artwork so the result
   is a continuous black-to-pink crossfade with no blank intermediate frame. */
.work-nav.is-on-content-background .nav-hit {
  transition: background-color 180ms ease;
}
.work-nav.is-on-content-background .nav-hit:hover,
.work-nav.is-on-content-background .nav-hit:focus-visible,
.work-nav.is-on-content-background .nav-hit.is-click-pulsing {
  background-color: var(--content-background);
}
@keyframes work-link-click-pulse {
  0%   { opacity: 1; }
  58%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Tight bounds of the new 16pt, no-stroke Mock(5) labels. */
.nav-clients { left: 29.305556%; top: 8.535032%; width: 5.972222%; height: 1.528662%; }
.nav-about   { left: 47.569444%; top: 8.535032%; width: 4.861111%; height: 1.528662%; }
.nav-contact { left: 64.305556%; top: 8.535032%; width: 6.805556%; height: 1.528662%; }
.nav-graphic    { left: 12.083333%; top: 88.025478%; width: 6.319444%; height: 3.949045%; }
.nav-short      { left: 25.000000%; top: 88.025478%; width: 8.263889%; height: 3.949045%; }
.nav-commercial { left: 38.194444%; top: 88.025478%; width: 9.722222%; height: 3.949045%; }
.nav-stage      { left: 53.055556%; top: 88.025478%; width: 7.847222%; height: 3.949045%; }
.nav-production { left: 66.041667%; top: 88.025478%; width: 9.583333%; height: 3.949045%; }
.nav-other      { left: 82.361111%; top: 88.025478%; width: 4.722222%; height: 3.949045%; }

/* Blank black space on first load. */
.below-hero {
  position: relative;
  min-height: 100vh;
  background: var(--page-background-current);
}
.state-stage {
  position: relative;
  width: 100%;
  min-height: 50.069444vw;
  background: var(--page-background-current);
}
.body-state {
  position: absolute;
  left: 0;
  top: -37px; /* Mock content begins at about y=748; hero now resolves at y=785. */
  width: 100%;
  min-height: 50.069444vw;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--state-exit) ease;
}
.body-state.is-active {
  opacity: var(--content-scroll-opacity, 1);
  pointer-events: auto;
  transition: opacity var(--state-enter) ease;
}
.state-art { position: absolute; display: block; width: 100%; height: auto; user-select: none; pointer-events: none; }
.short-placeholder { left: 0; top: 1px; }

/* Content 01-06 are extracted from the 1440px Illustrator composition.
   Their 800px artwork column starts at x=320 and y=840, which is 55px
   below the 785px banner at the reference size. */
.content-state {
  top: 0;
  transition: opacity var(--state-exit) ease;
}
.content-state.is-active {
  opacity: var(--content-scroll-opacity, 1);
  transition: none;
}
.content-gallery {
  position: absolute;
  left: 22.222222%;
  top: 3.819444vw;
  width: 55.555556%;
  display: grid;
  gap: 0;
}
.content-gallery-published,
.content-gallery-commercial,
.content-gallery-production {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.content-gallery-short { grid-template-columns: minmax(0, 1fr); }
.content-gallery-stage { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.content-gallery-other {
  left: 22.222222%;
  width: 55.555556%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Illustrator layer “Content 02 Short Animations Badge”. Its resting point
   is x=1072, y=796 on the 1440px composition: 11px below the content stage's
   origin and overlapping GRISTLE's upper-right corner. It shares the gallery
   inertia system but has its own mass, producing a slight independent lag. */
.short-bonus-badge {
  --inertia-y: 0px;
  position: absolute;
  left: 74.444444%;
  top: .763889vw;
  z-index: 3;
  width: 6.597222%;
  aspect-ratio: 1;
  display: block;
  border-radius: 50%;
  transform: translate3d(0, var(--inertia-y), 0);
  will-change: transform;
  cursor: pointer;
}
.short-bonus-badge-reveal {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transform: translate3d(0, 80px, 0);
  will-change: opacity, transform;
}
.short-bonus-badge-spinner {
  position: absolute;
  inset: 0;
  display: block;
  animation: short-bonus-badge-spin 12s linear infinite;
  animation-play-state: paused;
  transform-origin: 50% 50%;
  will-change: transform;
}
.short-bonus-badge-spinner img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.short-bonus-badge-click-state {
  opacity: 0;
  pointer-events: none;
}
.content-state.is-active .short-bonus-badge-reveal {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity .78s ease .14s,
    transform .78s cubic-bezier(.16, 1, .3, 1) .14s;
}
.short-bonus-badge:hover .short-bonus-badge-spinner,
.short-bonus-badge:focus-visible .short-bonus-badge-spinner {
  animation-play-state: running;
}
.short-bonus-badge.is-click-pulsing .short-bonus-badge-click-state {
  animation: short-bonus-click-pulse 280ms ease-out both;
}
.short-bonus-badge:focus-visible {
  outline: max(2px, .138889vw) solid var(--hot-pink);
  outline-offset: 3px;
}
@keyframes short-bonus-badge-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes short-bonus-click-pulse {
  0%   { opacity: 1; }
  58%  { opacity: 1; }
  100% { opacity: 0; }
}

.content-tile {
  --inertia-y: 0px;
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transform: translate3d(0, var(--inertia-y), 0);
  will-change: transform;
}
.content-gallery-published .content-tile { aspect-ratio: 8 / 9; }
.content-gallery-short .content-tile,
.content-gallery-commercial .content-tile { aspect-ratio: 16 / 9; }
.content-gallery-stage .content-tile:nth-child(1),
.content-gallery-stage .content-tile:nth-child(4),
.content-gallery-stage .content-tile:nth-child(8),
.content-gallery-stage .content-tile:nth-child(9) {
  grid-column: span 6;
  aspect-ratio: 16 / 9;
}
.content-gallery-stage .content-tile:nth-child(2),
.content-gallery-stage .content-tile:nth-child(3) {
  grid-column: span 3;
  aspect-ratio: 8 / 9;
}
.content-gallery-stage .content-tile:nth-child(5),
.content-gallery-stage .content-tile:nth-child(6),
.content-gallery-stage .content-tile:nth-child(7) {
  grid-column: span 2;
  aspect-ratio: 16 / 27;
}
.content-gallery-production .content-tile {
  aspect-ratio: 8 / 9;
}
.content-gallery-production .content-tile:nth-child(5) {
  grid-column: span 2;
  aspect-ratio: 16 / 9;
}
.content-gallery-other .content-tile { aspect-ratio: 8 / 9; }
.content-gallery-other .content-tile-plain {
  grid-column: span 1;
  aspect-ratio: 8 / 9;
  cursor: default;
}
/* Every OTHER STUFF piece moves as a complete unit. The artwork thumbnails
   retain a controlled two-pixel bleed so the pale page cannot appear as a
   hairline. The four header tiles remain at their exact crop bounds: their
   text moves with each tile without neighbouring text fragments overlapping. */
.content-gallery-other .content-tile {
  overflow: visible;
}
.content-gallery-other .content-tile:not(.content-tile-plain) > .content-tile-reveal {
  inset: -2px;
}
.content-gallery-other .content-tile-plain > .content-tile-reveal {
  inset: 0;
}

.content-tile-reveal {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transform: translate3d(0, 80px, 0);
  will-change: opacity, transform;
}
.content-state.is-active .content-tile-reveal {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity var(--entry-duration, .78s) ease var(--entry-delay, 0s),
    transform var(--entry-duration, .78s) cubic-bezier(.16, 1, .3, 1) var(--entry-delay, 0s);
}
.content-tile-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.content-tile-segmented-art {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}
.content-tile-segment-backdrop {
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
}
.content-tile-segment {
  --inertia-y: 0px;
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(25% + 1px);
  display: block;
  overflow: hidden;
  transform: translate3d(0, var(--inertia-y), 0);
  will-change: transform;
}
/* Count only the four segment spans. The seam-protection image is a different
   element type and must never shift the quarter positions. */
.content-tile-segment:nth-of-type(1) { left: 0; }
.content-tile-segment:nth-of-type(2) { left: 25%; }
.content-tile-segment:nth-of-type(3) { left: 50%; }
.content-tile-segment:nth-of-type(4) {
  left: 75%;
  width: 25%;
}
.content-tile-segment img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
}
.content-tile-on {
  opacity: 0;
  transition: opacity 240ms ease;
}
.content-tile:hover .content-tile-on,
.content-tile:focus-visible .content-tile-on,
.content-tile:active .content-tile-on { opacity: 1; }
.content-gallery-other .content-tile:hover .content-tile-on,
.content-gallery-other .content-tile:focus-visible .content-tile-on,
.content-gallery-other .content-tile:active .content-tile-on { opacity: .85; }
.content-tile:focus-visible {
  z-index: 2;
  outline: max(2px, .138889vw) solid var(--hot-pink);
  outline-offset: -2px;
}

/* Irregular, deterministic entrance rhythm. Each tile completes its own
   80px rise and fade before the 1.7-second mark. */
.content-gallery-published .content-tile:nth-child(1) { --entry-delay: .04s; --entry-duration: .76s; }
.content-gallery-published .content-tile:nth-child(2) { --entry-delay: .16s; --entry-duration: .82s; }

.content-gallery-short .content-tile:nth-child(1) { --entry-delay: .02s; --entry-duration: .78s; }
.content-gallery-short .content-tile:nth-child(2) { --entry-delay: .24s; --entry-duration: .82s; }
.content-gallery-short .content-tile:nth-child(3) { --entry-delay: .12s; --entry-duration: .75s; }

.content-gallery-commercial .content-tile:nth-child(1) { --entry-delay: .10s; --entry-duration: .80s; }
.content-gallery-commercial .content-tile:nth-child(2) { --entry-delay: 0s;   --entry-duration: .76s; }
.content-gallery-commercial .content-tile:nth-child(3) { --entry-delay: .34s; --entry-duration: .81s; }
.content-gallery-commercial .content-tile:nth-child(4) { --entry-delay: .23s; --entry-duration: .77s; }
.content-gallery-commercial .content-tile:nth-child(5) { --entry-delay: .46s; --entry-duration: .83s; }
.content-gallery-commercial .content-tile:nth-child(6) { --entry-delay: .57s; --entry-duration: .76s; }
.content-gallery-commercial .content-tile:nth-child(7) { --entry-delay: .82s; --entry-duration: .80s; }
.content-gallery-commercial .content-tile:nth-child(8) { --entry-delay: .70s; --entry-duration: .78s; }

.content-gallery-stage .content-tile:nth-child(1) { --entry-delay: .06s; --entry-duration: .80s; }
.content-gallery-stage .content-tile:nth-child(2) { --entry-delay: .22s; --entry-duration: .78s; }
.content-gallery-stage .content-tile:nth-child(3) { --entry-delay: .14s; --entry-duration: .84s; }
.content-gallery-stage .content-tile:nth-child(4) { --entry-delay: .34s; --entry-duration: .79s; }
.content-gallery-stage .content-tile:nth-child(5) { --entry-delay: .50s; --entry-duration: .80s; }
.content-gallery-stage .content-tile:nth-child(6) { --entry-delay: .42s; --entry-duration: .76s; }
.content-gallery-stage .content-tile:nth-child(7) { --entry-delay: .64s; --entry-duration: .82s; }
.content-gallery-stage .content-tile:nth-child(8) { --entry-delay: .78s; --entry-duration: .80s; }
.content-gallery-stage .content-tile:nth-child(9) { --entry-delay: .92s; --entry-duration: .76s; }

.content-gallery-production .content-tile:nth-child(1) { --entry-delay: .04s; --entry-duration: .80s; }
.content-gallery-production .content-tile:nth-child(2) { --entry-delay: .20s; --entry-duration: .78s; }
.content-gallery-production .content-tile:nth-child(3) { --entry-delay: .13s; --entry-duration: .84s; }
.content-gallery-production .content-tile:nth-child(4) { --entry-delay: .34s; --entry-duration: .79s; }
.content-gallery-production .content-tile:nth-child(5) { --entry-delay: .48s; --entry-duration: .82s; }

.content-gallery-other .content-tile:nth-child(1)  { --entry-delay: .03s; --entry-duration: .79s; }
.content-gallery-other .content-tile:nth-child(2)  { --entry-delay: .17s; --entry-duration: .83s; }
.content-gallery-other .content-tile:nth-child(3)  { --entry-delay: .09s; --entry-duration: .76s; }
.content-gallery-other .content-tile:nth-child(4)  { --entry-delay: .25s; --entry-duration: .81s; }
.content-gallery-other .content-tile:nth-child(5)  { --entry-delay: .14s; --entry-duration: .84s; }
.content-gallery-other .content-tile:nth-child(6)  { --entry-delay: .37s; --entry-duration: .78s; }
.content-gallery-other .content-tile:nth-child(7)  { --entry-delay: .48s; --entry-duration: .82s; }
.content-gallery-other .content-tile:nth-child(8)  { --entry-delay: .41s; --entry-duration: .76s; }
.content-gallery-other .content-tile:nth-child(9)  { --entry-delay: .63s; --entry-duration: .80s; }
.content-gallery-other .content-tile:nth-child(10) { --entry-delay: .54s; --entry-duration: .78s; }
.content-gallery-other .content-tile:nth-child(11) { --entry-delay: .79s; --entry-duration: .82s; }
.content-gallery-other .content-tile:nth-child(12) { --entry-delay: .70s; --entry-duration: .77s; }
.content-gallery-other .content-tile:nth-child(13) { --entry-delay: .90s; --entry-duration: .80s; }
.content-gallery-other .content-tile:nth-child(14) { --entry-delay: .84s; --entry-duration: .76s; }
.content-gallery-other .content-tile:nth-child(15) { --entry-delay: .98s; --entry-duration: .81s; }
.content-gallery-other .content-tile:nth-child(16) { --entry-delay: .91s; --entry-duration: .78s; }

/* Allow the active Illustrator artwork to determine the content depth. */
.state-stage:has(.commercial-animation-state.is-active) { min-height: 66.319444vw; }
.state-stage:has(.short-animation-state.is-active) { min-height: 97.569444vw; }
.state-stage:has(.video-stage-state.is-active) { min-height: 191.319444vw; }
.state-stage:has(.production-design-state.is-active) { min-height: 97.569444vw; }
.state-stage:has(.other-stuff-state.is-active) { min-height: 81.944444vw; }

@media (max-width: 700px) {
  .hero { min-height: max(425px, 92vh); min-height: max(425px, 92svh); aspect-ratio: auto; }
  .banner-composite { min-width: 779.618px; }
  .banner-video { object-position: center; }
  .text-overlay-static,
  .work-text-overlay { object-fit: cover; }
  .clients-overlay { display: none; }
  .state-stage { min-height: 480px; }
}

@media (prefers-reduced-motion: reduce) {
  .body-state,
  .hero-info-overlay,
  .banner-overlay-tint,
  .client-logo,
  .content-tile-reveal,
  .short-bonus-badge-reveal,
  .short-bonus-badge-spinner,
  .content-tile-on,
  .title-ring-anchor,
  .nav-hit img,
  .email-link { transition-duration: .01ms !important; transition-delay: 0s !important; }
  .content-tile,
  .content-tile-segment,
  .short-bonus-badge { transform: none !important; }
  .short-bonus-badge-spinner { animation: none !important; }
  .title-ring-rotator { animation: none !important; }
}

/* Commercial-animation pages: exact RGB Illustrator layers on a responsive canvas. */
.commercial-film-modal .commercial-film-stage {
  aspect-ratio: auto;
  height: var(--commercial-stage-height);
  min-height: var(--commercial-stage-height);
  overflow: hidden;
}
.commercial-film-modal .commercial-layer {
  object-fit: fill;
  opacity: 1;
  animation: none !important;
  pointer-events: none;
}
.commercial-film-modal .commercial-black-bg { z-index: 0; }
.commercial-film-modal .commercial-art { z-index: 1; }
.commercial-film-modal .commercial-gradient { z-index: 3; }
.commercial-image-fade {
  position: absolute;
  z-index: 2;
  display: block;
  background: #000;
  opacity: 1;
  pointer-events: none;
  transition: opacity 1.3s ease;
}
.commercial-film-modal.are-commercial-images-loaded .commercial-image-fade { opacity: 0; }
.commercial-film-modal .commercial-controls { z-index: 3; }
.commercial-film-modal .commercial-inertia-panel {
  --commercial-inertia-y: 0px;
  position: absolute;
  z-index: 2;
  overflow: hidden;
  background: #000;
  transform: translate3d(0, var(--commercial-inertia-y), 0);
  will-change: transform;
}
.commercial-film-modal .commercial-passive-video {
  pointer-events: none;
  user-select: none;
}
.commercial-passive-video iframe,
.commercial-passive-video .commercial-passive-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: fill;
  opacity: 0;
  pointer-events: none;
}
.commercial-passive-video iframe { transition: opacity 1.5s ease; }
.commercial-passive-video.is-passive-ready iframe,
.commercial-passive-video.has-video-error .commercial-passive-poster { opacity: 1; }
.commercial-film-modal .commercial-panel-image,
.commercial-film-modal .commercial-panel-rollover {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.commercial-film-modal .commercial-panel-image {
  z-index: 0;
  opacity: 0;
  transition: opacity 1.3s ease;
}
.commercial-film-modal .commercial-inertia-panel.is-image-loaded .commercial-panel-image {
  opacity: 1;
}
.commercial-film-modal .commercial-panel-rollover {
  z-index: 1;
  opacity: 0;
  transition: opacity .65s ease;
}
.commercial-film-modal .commercial-inertia-panel.is-image-loaded:hover .commercial-panel-rollover,
.commercial-film-modal .commercial-inertia-panel.is-image-loaded:focus-within .commercial-panel-rollover {
  opacity: 1;
}
.commercial-film-modal .commercial-panel-play {
  position: absolute;
  z-index: 2;
  left: 37.5%;
  top: 27.5%;
  width: 25%;
  height: 45%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.commercial-film-modal .commercial-panel-play-icon {
  position: absolute;
  left: 8.333333%;
  top: 8.333333%;
  display: block;
  width: 83.333333%;
  height: 83.333333%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.commercial-film-modal .commercial-panel-play:hover .commercial-panel-play-icon,
.commercial-film-modal .commercial-panel-play:focus-visible .commercial-panel-play-icon {
  filter: brightness(0) saturate(100%) invert(76%) sepia(22%) saturate(854%) hue-rotate(296deg) brightness(102%) contrast(87%);
}
.commercial-film-modal .commercial-panel-play:active .commercial-panel-play-icon {
  filter: brightness(0) saturate(100%) invert(17%) sepia(98%) saturate(5991%) hue-rotate(353deg) brightness(105%) contrast(86%);
}
.commercial-film-modal .commercial-panel-play:focus-visible {
  outline: 3px solid var(--film-pink);
  outline-offset: 3px;
}
.commercial-film-modal > .film-modal-top,
.commercial-film-modal > .film-modal-close {
  z-index: 8;
  opacity: 1;
  animation: none !important;
}
.commercial-film-modal.is-to-video > .film-modal-top,
.commercial-film-modal.is-video-visible > .film-modal-top {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.commercial-film-modal.is-commercial-video > .film-modal-top {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.commercial-film-hit {
  position: absolute;
  z-index: 4;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .commercial-image-fade,
  .commercial-passive-video iframe,
  .commercial-film-modal .commercial-panel-image,
  .commercial-film-modal .commercial-panel-rollover { transition-duration: .01ms; }
  .commercial-film-modal .commercial-inertia-panel { transform: none !important; }
}
.commercial-film-hit:focus-visible {
  outline: 3px solid var(--film-pink);
  outline-offset: 3px;
}
.commercial-film-rollover {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.commercial-film-hit:hover .commercial-film-rollover,
.commercial-film-hit:focus-visible .commercial-film-rollover {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(76%) sepia(22%) saturate(854%) hue-rotate(296deg) brightness(102%) contrast(87%);
}
.commercial-film-hit:active .commercial-film-rollover {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(17%) sepia(98%) saturate(5991%) hue-rotate(353deg) brightness(105%) contrast(86%);
}
.commercial-film-video {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  padding: 4vw;
  background: #000;
}
.commercial-film-video[hidden] { display: none; }
.commercial-film-video iframe,
.commercial-film-video video {
  width: min(92vw, 160vh);
  aspect-ratio: 16 / 9;
  max-height: 90vh;
  border: 0;
  background: #000;
  object-fit: contain;
}
.commercial-film-video .is-load-fade {
  opacity: 0;
  transition: opacity 1.5s ease;
}
.commercial-film-video .is-load-fade.is-loaded { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .commercial-film-video .is-load-fade { transition-duration: .01ms; }
}

/* GRISTLE desktop film modal, translated from the 1920 x 1080 Illustrator file. */
body.film-modal-open { overflow: hidden; }
.film-modal {
  --film-pink: #ef87a7;
  --film-red: #ed1c24;
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: block;
  visibility: hidden;
  overflow-x: hidden;
  overflow-y: auto;
  background: #000;
  color: #fff;
  font-family: Helvetica, Arial, sans-serif;
  opacity: 0;
  pointer-events: none;
  transition: opacity 2s ease;
  will-change: opacity;
}
.film-modal.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 2s ease;
}
.film-modal:focus { outline: none; }
.film-modal.is-closing {
  visibility: visible;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}
.film-modal:not(.is-open) * { pointer-events: none !important; }
.film-modal-stage {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  opacity: 1;
  transition: opacity .7s ease;
}
.film-modal.is-to-video .film-modal-stage { opacity: 0; pointer-events: none; }
.film-modal-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.film-modal.is-entering .film-modal-image { animation: film-image-in .8s ease forwards; }
.film-modal-tint {
  position: absolute;
  left: 9.895833%;
  top: 17.592593%;
  width: 80.208333%;
  height: 64.814815%;
  background: rgba(0, 0, 0, .70);
  opacity: 0;
}
.film-modal-copy { position: absolute; inset: 0; opacity: 0; }
.film-modal.is-entering .film-modal-tint,
.film-modal.is-entering .film-modal-copy {
  animation: film-copy-in 1.2s ease .6s forwards;
}
.film-modal-tabs {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 24.406111%;
  width: 0;
  height: 0;
}
.film-modal-tab {
  position: absolute;
  top: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font: 700 clamp(15px, 1.3vw, 25px)/1 Helvetica, Arial, sans-serif;
  cursor: pointer;
  transform: translateX(-50%);
}
.film-modal-tab:nth-child(1) { left: 46.354167vw; }
.film-modal-tab:nth-child(2) { left: 53.645833vw; }
.film-modal-tab:hover,
.film-modal-tab:focus-visible { color: var(--film-pink); }
.film-modal-tab:active,
.film-modal-tab.is-active { color: var(--film-red); }
.film-modal-tab:focus-visible { outline: 2px solid var(--film-pink); outline-offset: 5px; }
.film-modal-panel {
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease;
}
.film-modal-panel.is-active { opacity: 1; pointer-events: auto; }
.film-modal-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: #fff;
  font-family: Helvetica, Arial, sans-serif;
}
.film-title,
.film-synopsis-art { font-size: 40px; font-weight: 700; font-style: oblique; }
.film-year { font-size: 35px; font-style: oblique; }
.film-credits-art { font-size: 20px; }
.film-heading { font-weight: 700; }
.film-festival-art { font-size: 20px; font-weight: 700; }
.film-festival-art .film-title { font-size: 40px; font-style: oblique; }
.film-festival-heading { font-size: 20px; }
.film-modal-left {
  position: absolute;
  left: 15.46875%;
  top: 32.49%;
  width: 25.260417%;
  text-align: center;
}
.film-modal-left h2 {
  margin: 0;
  font-size: 2.083333vw;
  font-style: oblique;
  line-height: 2.1875vw;
}
.film-year {
  margin: 0;
  font-size: 1.822917vw;
  font-style: oblique;
  line-height: 2.1875vw;
}
.film-synopsis {
  margin: 2.1875vw 0 0;
  font-size: 2.083333vw;
  font-weight: 700;
  font-style: oblique;
  line-height: 2.1875vw;
  white-space: nowrap;
}
.film-synopsis span { display: block; }
.film-modal-right {
  position: absolute;
  left: 59.342448%;
  top: 24.69%;
  width: 25.0625%;
  text-align: center;
  font-size: 1.041667vw;
  line-height: 1.302083vw;
}
.film-modal-right h3 {
  margin: 0 0 .3vw;
  font-size: 1em;
  line-height: 1;
}
.film-modal-right p { margin: 0; }
.film-credits > h3,
.film-credits > p {
  position: absolute;
  left: 0;
  width: 100%;
  margin: 0;
  white-space: nowrap;
}
.film-credits > h3:nth-of-type(1) { top: 0; }
.film-credits > p:nth-of-type(1) { top: 1.152188vw; }
.film-credits > h3:nth-of-type(2) { top: 6.510938vw; }
.film-credits > p:nth-of-type(2) { top: 7.663125vw; }
.film-credits > h3:nth-of-type(3) { top: 11.719688vw; }
.film-credits > p:nth-of-type(3) { top: 12.871875vw; }
.film-credits > p:nth-of-type(4) { top: 20.685vw; }
.film-credits > h3:nth-of-type(4) { top: 23.439375vw; }
.film-credits > p:nth-of-type(5) { top: 24.591563vw; }
.film-modal-festivals .film-modal-left {
  left: 15.46875%;
  top: 32.49%;
  width: 25.260417%;
}
.film-modal-festivals .film-modal-left h3 {
  position: absolute;
  left: 0;
  top: 2.351771vw;
  width: 100%;
  margin: 0;
  font-size: 1.302083vw;
  line-height: 1;
}
.film-modal-festivals ul {
  position: absolute;
  left: 0;
  top: 5.476771vw;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style-position: inside;
  font-size: 1.145833vw;
  font-weight: 700;
  line-height: 1.5vw;
  white-space: nowrap;
}
.film-modal-festivals li { margin: 0 0 1.625vw; }
.film-award {
  top: 42.23%;
  left: 59.342448%;
  width: 25.0625%;
  font-size: 1.25vw;
  font-weight: 700;
}
.film-award h3 { margin: 0; }
.film-award p {
  position: absolute;
  left: 0;
  top: 3.125vw;
  width: 100%;
  margin: 0;
  line-height: 1.5625vw;
  white-space: nowrap;
}
.film-modal-play {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 7.8125vw;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transform: translate(-50%, -50%);
}
.film-modal-play svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: rgba(255, 255, 255, .60);
}
.film-modal.is-entering .film-modal-play { animation: film-play-in .5s ease 2s forwards; }
.film-modal-play:hover svg { fill: var(--film-pink); }
.film-modal-play:active svg { fill: var(--film-red); }
.film-modal-play:focus-visible { outline: 3px solid var(--film-pink); outline-offset: 5px; }
.film-modal-bonus {
  position: absolute;
  z-index: 4;
  left: 47.5%;
  top: 29.907407%;
  width: 4.947917vw;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  opacity: 0;
}
.film-modal-bonus-spinner,
.film-modal-bonus img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.film-modal-bonus-spinner {
  animation: short-bonus-badge-spin 12s linear infinite;
  animation-play-state: paused;
  transform-origin: 50% 50%;
}
.film-modal-bonus img {
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.film-modal-bonus-press { opacity: 0; pointer-events: none; }
.film-modal.is-entering .film-modal-bonus { animation: film-copy-in 1.2s ease .6s forwards; }
.film-modal-bonus:hover .film-modal-bonus-spinner,
.film-modal-bonus:focus-visible .film-modal-bonus-spinner { animation-play-state: running; }
.film-modal-bonus.is-click-pulsing .film-modal-bonus-press {
  animation: short-bonus-click-pulse 280ms ease-out both;
}
.film-modal-bonus:focus-visible { outline: 3px solid var(--film-pink); outline-offset: 5px; }
.film-modal-close {
  position: fixed;
  z-index: 3;
  left: 92.1875vw;
  top: 1.5625vw;
  width: 3.645833vw;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  opacity: 0;
}
.film-modal-close svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.film-modal-close-shadow {
  fill: rgb(16 15 13 / 40%);
}
.film-modal-close-mark {
  fill: currentColor;
}
.film-modal-top {
  position: fixed;
  z-index: 4;
  left: 89.010417vw;
  top: 1.770833vw;
  width: 2.604167vw;
  height: 2.96875vw;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transition: opacity .25s ease;
}
.film-modal-top img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
}
.film-modal.is-entering .film-modal-close,
.film-modal.is-entering .film-modal-top { animation: film-copy-in 1.2s ease .6s forwards; }
.film-modal-top:hover img,
.film-modal-top:focus-visible img {
  filter: brightness(0) saturate(100%) invert(76%) sepia(22%) saturate(854%) hue-rotate(296deg) brightness(102%) contrast(87%);
}
.film-modal-top:active img {
  filter: brightness(0) saturate(100%) invert(17%) sepia(98%) saturate(5991%) hue-rotate(353deg) brightness(105%) contrast(86%);
}
.film-modal-top:focus-visible { outline: 3px solid var(--film-pink); outline-offset: 5px; }
.film-modal.is-to-video .film-modal-top,
.film-modal.is-video-visible .film-modal-top {
  opacity: 0 !important;
  pointer-events: none;
}
.film-modal-close:hover { color: var(--film-pink); }
.film-modal-close:active { color: var(--film-red); }
.film-modal-close:focus-visible { outline: 3px solid var(--film-pink); outline-offset: 5px; }

/* GRISTLE is kept in the Illustrator 1920 x 39986.2 coordinate system.
   Raster artwork is split into individually loaded assets; all visible copy
   remains live SVG text instead of being baked into page-sized images. */
.gristle-schema-modal .gristle-modal-document {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 39986.2;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    #000 0,
    #000 4.776648%,
    #f3fff8 4.776648%,
    #f3fff8 100%
  );
}
.gristle-artwork-images {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.gristle-art-image {
  position: absolute;
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
}
.gristle-tint-image {
  z-index: 1;
  mix-blend-mode: multiply;
}
.gristle-black-bg-image { z-index: 0; }
.gristle-live-text {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  text-rendering: geometricPrecision;
}
.gristle-live-text text {
  pointer-events: visiblePainted;
  user-select: text;
  -webkit-user-select: text;
}
.gristle-schema-modal .film-modal-scroll-anchor {
  position: absolute;
  z-index: 1;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.gristle-schema-modal .film-modal-scroll-anchor--info {
  top: 2.219516%;
}
.gristle-schema-modal .film-modal-scroll-anchor--production {
  top: 4.669111%;
}
.gristle-schema-modal .film-modal-play,
.gristle-schema-modal .film-modal-down {
  position: absolute;
  z-index: 4;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  cursor: pointer;
  opacity: 0;
  transform: none;
}
.gristle-schema-modal .film-modal-play {
  left: 45.9375%;
  top: .605209%;
  width: 8.125%;
  height: auto;
  aspect-ratio: 1;
  background-image: url("../images/films/gristle-schema/button-play.webp");
}
.gristle-schema-modal .film-modal-down {
  left: 47.5%;
  top: 1.107882%;
  width: 5%;
  height: auto;
  aspect-ratio: 96 / 114;
  background-image: url("../images/films/gristle-schema/button-down.webp");
}
.gristle-schema-modal .film-modal-play img,
.gristle-schema-modal .film-modal-down img {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.gristle-schema-modal.is-entering .film-modal-down {
  animation: film-play-in .5s ease 2s forwards;
}
.gristle-schema-modal .film-modal-play:hover,
.gristle-schema-modal .film-modal-play:focus-visible {
  background-image: url("../images/films/gristle-schema/button-play-hover.webp");
}
.gristle-schema-modal .film-modal-play:active {
  background-image: url("../images/films/gristle-schema/button-play-active.webp");
}
.gristle-schema-modal .film-modal-down:hover,
.gristle-schema-modal .film-modal-down:focus-visible {
  background-image: url("../images/films/gristle-schema/button-down-hover.webp");
}
.gristle-schema-modal .film-modal-down:active {
  background-image: url("../images/films/gristle-schema/button-down-active.webp");
}
.gristle-schema-modal .film-modal-down:focus-visible {
  outline: 3px solid var(--film-pink);
  outline-offset: 5px;
}
.gristle-schema-modal .film-modal-bonus {
  left: 47.34375%;
  top: 3.376165%;
  width: 5.3125%;
  height: auto;
  aspect-ratio: 102 / 100;
}
.gristle-schema-modal .film-modal-bonus-spinner {
  animation: none;
  transform: rotate(0deg);
  will-change: transform;
}
.gristle-schema-modal .film-modal-bonus:hover .film-modal-bonus-spinner,
.gristle-schema-modal .film-modal-bonus:focus-visible .film-modal-bonus-spinner {
  animation: none;
}

/* Mr Money and The Glass Teat retain their 1920 × 2131.38 Illustrator pages. */
.glass-teat-modal .film-page-stage,
.mr-money-modal .film-page-stage {
  aspect-ratio: 1920 / 2131.38;
  background: #000;
}
.glass-teat-modal .film-page-stage .film-modal-image,
.mr-money-modal .film-page-stage .film-modal-image {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.glass-teat-modal .film-page-black-bg,
.mr-money-modal .film-page-black-bg { z-index: 0; }
.glass-teat-modal .film-page-img,
.mr-money-modal .film-page-img { z-index: 1; }
.glass-teat-modal .film-page-text,
.mr-money-modal .film-page-text { z-index: 2; }
.glass-teat-modal .film-modal-play,
.mr-money-modal .film-modal-play,
.glass-teat-modal .film-modal-down,
.mr-money-modal .film-modal-down {
  position: absolute;
  z-index: 4;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transform: none;
}
.glass-teat-modal .film-modal-play,
.mr-money-modal .film-modal-play {
  left: 46.09375%;
  top: 11.494037%;
  width: 7.8125%;
  aspect-ratio: 1;
}
.glass-teat-modal .film-modal-down,
.mr-money-modal .film-modal-down {
  left: 47.65625%;
  top: 20.925753%;
  width: 4.6875%;
  aspect-ratio: 5 / 6;
}
.glass-teat-modal .film-modal-down img,
.mr-money-modal .film-modal-down img {
  display: block;
  width: 100%;
  height: 100%;
}
.glass-teat-modal.is-entering .film-modal-down,
.mr-money-modal.is-entering .film-modal-down {
  animation: film-play-in .5s ease 2s forwards;
}
.glass-teat-modal .film-modal-down:hover img,
.glass-teat-modal .film-modal-down:focus-visible img,
.mr-money-modal .film-modal-down:hover img,
.mr-money-modal .film-modal-down:focus-visible img {
  content: url("../images/films/gristle-schema/button-down-hover.webp");
}
.glass-teat-modal .film-modal-down:active img,
.mr-money-modal .film-modal-down:active img {
  content: url("../images/films/gristle-schema/button-down-active.webp");
}
.glass-teat-modal .film-modal-close,
.mr-money-modal .film-modal-close {
  left: 92.65625vw;
  top: 1.770833vw;
  width: 2.96875vw;
}

.mr-money-panel-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.film-modal-inline-video {
  position: absolute;
  z-index: 3;
  overflow: hidden;
  background: #000;
}
.film-modal-inline-video--lip {
  left: 0;
  top: 55.996069%;
  width: 100%;
  height: 2.700932%;
}
.film-modal-inline-video--walk {
  left: 0;
  top: 58.697000%;
  width: 100%;
  height: 2.700932%;
}
.film-modal-inline-video--replace {
  left: 0;
  top: 64.265422%;
  width: 100%;
  height: 2.700932%;
}
.film-modal-inline-video--tour {
  left: 56.019271%;
  top: 75.636094%;
  width: 43.980729%;
  height: 3.806313%;
}
.film-modal-inline-video-media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  background: #000;
}
.film-modal-inline-video-sound {
  position: absolute;
  right: clamp(8px, .9vw, 16px);
  bottom: clamp(8px, .9vw, 16px);
  z-index: 3;
  margin: 0;
  padding: .55em .8em .48em;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 2px;
  background: rgba(0,0,0,.58);
  color: #fff;
  font: 600 clamp(8px, .65vw, 12px)/1 Arial, Helvetica, sans-serif;
  letter-spacing: .16em;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.film-modal-inline-video-sound:hover {
  color: var(--film-pink);
  border-color: var(--film-pink);
}
.film-modal-inline-video-sound[aria-pressed="true"] {
  background: rgba(0,0,0,.78);
}
.film-modal-inline-video-sound:focus-visible {
  outline: 3px solid var(--film-pink);
  outline-offset: 3px;
}
.film-modal-video {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s ease;
}
.film-modal-video[hidden] { display: none; }
.film-modal.is-video-visible .film-modal-video { opacity: 1; pointer-events: auto; }
.film-modal.is-video-returning .film-modal-video {
  opacity: 0;
  pointer-events: none;
  transition-duration: 1s;
}
.film-modal-video iframe {
  display: block;
  width: 100vw;
  height: 56.25vw;
  border: 0;
  pointer-events: none;
}
.film-modal.is-video-visible:not(.is-video-returning) .film-modal-video iframe {
  pointer-events: auto;
}
.film-modal-video-hitarea {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  cursor: default;
}
.film-modal-video-hitarea:focus { outline: none; }
.film-modal-video.uses-native-controls .film-modal-video-hitarea,
.film-modal-video.uses-native-controls .film-modal-video-controls { display: none; }
.film-modal-video-controls {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: 2.4rem auto minmax(7rem, 1fr) 2.4rem minmax(4.5rem, 7rem) 2.4rem auto;
  align-items: center;
  gap: clamp(.45rem, 1vw, 1rem);
  min-height: 5rem;
  padding: 2.8rem clamp(1rem, 2vw, 2.25rem) clamp(.8rem, 1.6vw, 1.55rem);
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .86));
  opacity: 0;
  transform: translateY(.45rem);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.film-modal-video-controls.is-visible,
.film-modal-video-controls:focus-within {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.film-modal-video-control {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  margin: 0;
  padding: .35rem;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.film-modal-video-control svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.film-modal-video-toggle .film-modal-video-icon-pause { display: block; }
.film-modal-video-toggle .film-modal-video-icon-play { display: none; }
.film-modal-video-toggle.is-paused .film-modal-video-icon-pause { display: none; }
.film-modal-video-toggle.is-paused .film-modal-video-icon-play { display: block; }
.film-modal-video-volume-slash { display: none; fill: none; }
.film-modal-video-volume-wave { fill: none; }
.film-modal-video-volume-toggle.is-muted .film-modal-video-volume-wave { display: none; }
.film-modal-video-volume-toggle.is-muted .film-modal-video-volume-slash { display: block; }
.film-modal-video-time {
  color: #fff;
  font: 600 .75rem/1 Arial, Helvetica, sans-serif;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.film-modal-video-progress,
.film-modal-video-volume {
  --range-progress: 0%;
  width: 100%;
  height: 1rem;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}
.film-modal-video-progress::-webkit-slider-runnable-track,
.film-modal-video-volume::-webkit-slider-runnable-track {
  height: 3px;
  background: linear-gradient(to right, #00adef var(--range-progress), rgba(255, 255, 255, .45) var(--range-progress));
}
.film-modal-video-progress::-moz-range-track,
.film-modal-video-volume::-moz-range-track {
  height: 3px;
  background: rgba(255, 255, 255, .45);
}
.film-modal-video-progress::-moz-range-progress,
.film-modal-video-volume::-moz-range-progress {
  height: 3px;
  background: #00adef;
}
.film-modal-video-progress::-webkit-slider-thumb,
.film-modal-video-volume::-webkit-slider-thumb {
  width: .82rem;
  height: .82rem;
  margin-top: -.34rem;
  border: 0;
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
}
.film-modal-video-progress::-moz-range-thumb,
.film-modal-video-volume::-moz-range-thumb {
  width: .82rem;
  height: .82rem;
  border: 0;
  border-radius: 50%;
  background: #fff;
}
.film-modal-video-progress:focus-visible,
.film-modal-video-volume:focus-visible,
.film-modal-video-control:focus-visible,
.film-modal-video-vimeo:focus-visible {
  outline: 2px solid #00adef;
  outline-offset: 3px;
}
.film-modal-video-vimeo {
  color: #fff;
  font: italic 800 1.25rem/1 Arial, Helvetica, sans-serif;
  letter-spacing: -.08em;
  text-decoration: none;
}
.film-modal-video-vimeo:hover { color: #00adef; }
.film-modal-video.is-pointer-idle { cursor: none; }

@media (max-width: 720px) {
  .film-modal-video-controls {
    grid-template-columns: 2.2rem 1fr 2.2rem 4.5rem 2.2rem auto;
    gap: .35rem;
    padding-inline: .65rem;
  }
  .film-modal-video-time { display: none; }
}

@keyframes film-image-in { to { opacity: 1; } }
@keyframes film-copy-in { to { opacity: 1; } }
@keyframes film-play-in { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .film-modal-stage,
  .film-modal,
  .film-modal-video { transition-duration: .01ms !important; }
  .film-modal-image,
  .film-modal-tint,
  .film-modal-copy,
  .film-modal-play,
  .film-modal-down,
  .film-modal-bonus,
  .film-modal-close,
  .film-modal-top { animation-duration: .01ms !important; animation-delay: 0s !important; }
}

.stage-section-header{display:block;width:100%;height:auto;aspect-ratio:800/225}

/* Keep the introduction and gallery in one flowing artwork column. */
.stage-content-column{position:absolute;left:22.222222%;top:3.819444vw;width:55.555556%}
.stage-content-column>.content-gallery-stage{position:relative;left:auto;top:auto;width:100%}
.state-stage:has(.video-stage-state.is-active){min-height:206.944444vw}

/* Same header construction as Other Stuff: exact text crops, grey-only bleed. */
.stage-section-header{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.stage-section-header>.content-tile-plain{aspect-ratio:8/9;overflow:visible;cursor:default}
.stage-section-header .content-tile-reveal{inset:0;overflow:visible}
.stage-section-header .stage-intro-crop{position:absolute;inset:0;display:block;overflow:hidden}
.stage-section-header .stage-intro-art{width:400%;max-width:none}
.stage-section-header>.content-tile-plain:nth-child(-n+3)>.content-tile-reveal::before{content:"";position:absolute;top:0;bottom:0;right:-1px;width:2px;background:rgb(149,162,155);pointer-events:none}
.stage-section-header>.content-tile-plain:nth-child(1){--entry-delay:.03s;--entry-duration:.79s}
.stage-section-header>.content-tile-plain:nth-child(2){--entry-delay:.17s;--entry-duration:.83s}
.stage-section-header>.content-tile-plain:nth-child(3){--entry-delay:.09s;--entry-duration:.76s}
.stage-section-header>.content-tile-plain:nth-child(4){--entry-delay:.25s;--entry-duration:.81s}

.book-film-player{position:fixed;inset:0;z-index:100002;background:#000}
.book-film-player[hidden]{display:none}
.book-film-player>.film-modal-close{position:absolute;right:20px;top:20px;z-index:10;width:44px;height:44px;opacity:1;transform:none;padding:0;border:2px solid #fff;border-radius:50%;color:#fff;background:#0009;font:32px/36px Arial,sans-serif;cursor:pointer}
.book-film-player>.film-modal-close:hover{color:#ff63da;border-color:#ff63da}