/* Wolfshoulder Films
   Black for picture, bone paper for reading, Lemon Milk for the shout,
   Archivo for everything you actually read. One accent (REC red), used
   for focus and the live indicator only. */

@font-face { font-family: "Lemon Milk"; src: url("/assets/fonts/lemonmilk-light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Lemon Milk"; src: url("/assets/fonts/lemonmilk-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lemon Milk"; src: url("/assets/fonts/lemonmilk-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Lemon Milk"; src: url("/assets/fonts/lemonmilk-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-italic-variable.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  --black: #000;
  --ink: #0c0c0d;
  --ink-2: #232325;
  --bone: #f4f1ea;
  --paper: #e9e5db;
  --line: #d8d6d1;
  --grey: #66645f;
  --grey-light: #b4b1ab;
  --rec: #e5322d;
  --display: "Lemon Milk", "Arial Narrow", Impact, sans-serif;
  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --radius: 6px;
  --header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Page-to-page: a short cross-fade in browsers that support cross-document view transitions; others just navigate. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
.site-header { view-transition-name: site-header; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
body {
  margin: 0;
  font: 400 1.0625rem/1.6 var(--sans);
  color: var(--ink-2);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--rec); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -200vw; top: 0; background: var(--rec); color: #fff; padding: .6rem 1rem; z-index: 100; }
.skip:focus { left: 12px; top: 12px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- type ---------- */
.display {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.02;
  color: var(--ink);
  text-wrap: balance;
}
.display--1 { font-size: clamp(1.9rem, 6vw, 4.6rem); }
.display--2 { font-size: clamp(1.6rem, 3.3vw, 2.5rem); }
.display--3 { font-size: clamp(1.25rem, 2.2vw, 1.7rem); }
.lede { font-size: clamp(1.0625rem, 1.4vw, 1.2rem); line-height: 1.55; max-width: 60ch; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: .75rem 1.5rem;
  border: 2px solid currentColor; border-radius: 999px;
  font: 700 .72rem/1 var(--display); text-transform: uppercase; letter-spacing: .1em;
  text-decoration: none; background: transparent; color: #fff;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn--solid { background: #fff; color: var(--ink); border-color: #fff; }
.btn--solid:hover { background: var(--bone); border-color: var(--bone); }
.btn--ghost:hover { background: rgba(255,255,255,.12); }
.btn--dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--dark:hover { background: #000; border-color: #000; }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 var(--gutter);
  color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,0));
  transition: background .25s ease;
}
.site-header.is-scrolled { background: rgba(0,0,0,.94); backdrop-filter: blur(6px); }
.page-docs .site-header, .page-404 .site-header { background: var(--black); }
.site-header__brand img { height: 44px; width: auto; }
.site-nav { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); }
.site-nav a {
  font: 700 .72rem/1 var(--display); text-transform: uppercase; letter-spacing: .1em;
  color: #fff; text-decoration: none; opacity: .85; padding: .5rem 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { opacity: 1; border-bottom-color: #fff; }
.site-header__toggle {
  display: none; width: 44px; height: 44px; background: none; border: 0; padding: 10px;
  flex-direction: column; justify-content: center; gap: 7px;
}
.site-header__toggle span { display: block; height: 2px; background: #fff; transition: transform .2s ease; }
.site-header__toggle[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.site-header__toggle[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100svh; min-height: 100vh; background: var(--black); color: #fff;
  display: flex; align-items: flex-end; overflow: hidden;
}
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.72) 100%);
}
.hero__content {
  position: relative; width: 100%; max-width: var(--wrap); margin: 0 auto;
  padding: 0 var(--gutter) clamp(72px, 12vh, 128px);
}
.hero__headline {
  font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(1.75rem, 4.6vw, 3.9rem); line-height: 1.04; max-width: 20ch; color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.hero__sub { margin-top: 18px; max-width: 44ch; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.5; color: rgba(255,255,255,.88); text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.hero__scroll {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  width: 22px; height: 36px; border: 2px solid rgba(255,255,255,.7); border-radius: 12px;
}
.hero__scroll span {
  position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px;
  background: #fff; border-radius: 2px; animation: scrollhint 1.8s ease-in-out infinite;
}
@keyframes scrollhint { 0%, 100% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(10px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
  .hero { background: var(--black) url("/assets/video/hero-poster.jpg") center / cover no-repeat; }
  .hero__scroll span { animation: none; }
}

/* ---------- intro ---------- */
.intro { background: var(--bone); padding: clamp(56px, 7vw, 96px) 0 clamp(44px, 6vw, 80px); }
.intro__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.intro__text .lede { margin-top: 24px; }
.intro__text .lede + .lede { margin-top: 16px; }
.intro__art img { width: min(100%, 520px); margin: 0 auto; }
.services {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(48px, 7vw, 88px);
}
.services li { border-top: 2px solid var(--ink); padding-top: 18px; }
.services h3 { font: 700 1.05rem/1.25 var(--sans); color: var(--ink); }
.services p { margin-top: 8px; font-size: .95rem; color: var(--grey); }
/* About page: the four services in a black panel, headings in the display face */
.services--panel { background: var(--black); color: #fff; border-radius: var(--radius); padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 44px); gap: clamp(20px, 3vw, 36px); }
.services--panel li { border-top-color: rgba(255,255,255,.28); padding-top: 16px; }
.services--panel h3 { font: 700 .8rem/1.3 var(--display); text-transform: uppercase; letter-spacing: .08em; color: #fff; }
.services--panel p { color: var(--grey-light); }
.studios { margin-top: clamp(40px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--line); }
.logos { background: var(--bone); padding: clamp(28px, 4vw, 44px) 0; border-bottom: 1px solid var(--line); }
.logos .studios { margin-top: 0; padding-top: 0; border-top: 0; }
.logos .studios__logos { justify-content: space-between; gap: 16px 20px; }
.logos .studios__logos li { display: flex; align-items: center; }
.logos .studios__logos img { height: 26px; max-width: 128px; }
.logos .studios__logos img[alt="Sony Pictures"], .logos .studios__logos img[alt="Warner Bros."], .logos .studios__logos img[alt="Paramount Pictures"] { height: 44px; }
.logos .studios__logos img[alt="BBC"] { height: 30px; }
.logos .studios__logos img[alt="Amazon MGM Studios"] { height: 12px; max-width: 190px; }
.studios__label { font-size: .9rem; color: var(--grey); }
.studios__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 18px clamp(24px, 4vw, 56px); margin-top: 18px; }
.studios__logos img { height: 32px; width: auto; max-width: 160px; object-fit: contain; filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; opacity: .85; }
.studios__logos img[alt="Sony Pictures"], .studios__logos img[alt="Warner Bros."], .studios__logos img[alt="Paramount Pictures"] { height: 56px; }
.studios__logos img[alt="BBC"] { height: 40px; }
.studios__logos img[alt="Amazon MGM Studios"] { height: 15px; max-width: 240px; }

/* REC mark in the hero */
.rec { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; font: 700 .72rem/1 var(--display); letter-spacing: .14em; color: #fff; opacity: .9; }
.rec__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rec); box-shadow: 0 0 0 2px rgba(229,50,45,.25); animation: recblink 1.6s steps(1) infinite; }
@keyframes recblink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .rec__dot { animation: none; } }

/* ---------- player ---------- */
.player { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; }
.player img { width: 100%; height: 100%; object-fit: cover; }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player__play {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(0,0,0,.18);
  display: grid; place-items: center; color: #fff; transition: background .15s ease;
}
.player__play:hover { background: rgba(0,0,0,.32); }
.player__play span {
  position: relative; display: block; width: clamp(64px, 9vw, 96px); height: clamp(64px, 9vw, 96px);
  border: 2px solid #fff; border-radius: 50%; font-size: 0; line-height: 0; color: transparent;
  background: rgba(0,0,0,.25); transition: transform .15s ease, background .15s ease;
}
.player__play span::after {
  content: ""; position: absolute; inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.6 5.2a1.2 1.2 0 0 0-1.8 1.04v11.52a1.2 1.2 0 0 0 1.8 1.04l10-5.76a1.2 1.2 0 0 0 0-2.08z' fill='white'/></svg>") 56% 50% / 46% no-repeat;
}
.player__play:hover span { transform: scale(1.06); background: var(--rec); border-color: var(--rec); }
.player__play:focus-visible { outline-offset: -4px; }

/* ---------- showreel ---------- */
.showreel { background: var(--black); color: #fff; padding: clamp(48px, 6vw, 88px) 0; }
.showreel__title { color: #fff; }
.showreel__meta, .showreel .work__count { color: var(--grey-light); }
.reel { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.reel__video, .reel__embed img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel__embed { position: absolute; inset: 0; }
.reel__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.reel__overlay { position: absolute; inset: auto 0 0 0; display: flex; justify-content: flex-start; padding: clamp(16px, 3vw, 36px);
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55)); }
.reel__sound { box-shadow: 0 6px 24px rgba(0,0,0,.4); }
@media (prefers-reduced-motion: reduce) { .reel__overlay { inset: 0; align-items: center; justify-content: center; background: rgba(0,0,0,.3); } }


/* ---------- work ---------- */
.work { background: var(--bone); padding: clamp(56px, 7vw, 96px) 0; }
.work__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 48px); }
.work__count { color: var(--grey); }
.work__count a { color: var(--ink); }
.work__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px) clamp(18px, 2.4vw, 28px); }
.card__button {
  display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; border-radius: var(--radius);
  color: inherit; text-decoration: none; font: inherit; cursor: pointer;
}
.card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: #000; position: relative; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease, opacity .2s ease; }
.card__media::after {
  content: ""; position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid #fff; background: rgba(0,0,0,.35) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.6 5.2a1.2 1.2 0 0 0-1.8 1.04v11.52a1.2 1.2 0 0 0 1.8 1.04l10-5.76a1.2 1.2 0 0 0 0-2.08z' fill='white'/></svg>") 56% 50% / 50% no-repeat;
  opacity: 0; transition: opacity .2s ease;
}
.card__button:hover .card__media img, .card__button:focus-visible .card__media img { transform: scale(1.04); }
.card__button:hover .card__media::after, .card__button:focus-visible .card__media::after { opacity: 1; }
.card--still .card__media::after { display: none; }
.card__tag { position: absolute; left: 10px; top: 10px; z-index: 1; font: 600 .68rem/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; padding: 6px 8px; border-radius: 3px; background: rgba(0,0,0,.6); color: #fff; }
.card__tag--page { background: var(--rec); }
.card--reel .card__media { cursor: pointer; }
.card--reel .card__media::after { display: none; }
.card__title { display: block; margin-top: 12px; font: 600 1rem/1.3 var(--sans); letter-spacing: -.005em; color: var(--ink); }
.card__meta { display: block; margin-top: 4px; font-size: .9rem; color: var(--grey); }
.card__copy { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 8px; font-size: .9rem; line-height: 1.45; color: var(--grey); }
.intro--text .intro__grid { grid-template-columns: minmax(0, 1fr); }
.intro--text .intro__text { max-width: 70ch; }
.work__also { margin-top: clamp(32px, 4vw, 48px); padding-top: 20px; border-top: 1px solid var(--line); color: var(--grey); font-size: .95rem; max-width: 80ch; }

/* filters and folding */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(20px, 3vw, 32px); }
.filters__btn { font: 700 .7rem/1 var(--display); text-transform: uppercase; letter-spacing: .08em; padding: .7rem 1.1rem; border-radius: 999px;
  border: 2px solid var(--ink); background: transparent; color: var(--ink); transition: background .15s ease, color .15s ease; }
.filters__btn:hover { background: var(--paper); }
.filters__btn.is-active { background: var(--ink); color: #fff; }
.card.is-folded, .card.is-filtered { display: none; }
.work__more { margin-top: clamp(24px, 3vw, 36px); }
.work__more[hidden] { display: none; }

/* ---------- crew ---------- */
.crew { background: var(--paper); padding: clamp(56px, 7vw, 96px) 0; }
.crew__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.crew__text .lede { margin-top: 20px; }
.crew__text p + p { margin-top: 14px; }
.crew__photo { margin: 0; }
.crew__photo img { border-radius: var(--radius); aspect-ratio: 16 / 9; object-fit: cover; }
.crew__photo figcaption { margin-top: 10px; font-size: .85rem; color: var(--grey); }
.pack { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: clamp(16px, 2.5vw, 28px); margin-top: clamp(48px, 7vw, 80px); }
.pack__card { background: var(--bone); border-radius: var(--radius); padding: 22px 18px 18px; text-align: center; border: 1px solid var(--line); }
.pack__card img { height: 150px; width: auto; margin: 0 auto 14px; }
.pack__mono { display: grid; place-items: center; width: 110px; height: 110px; margin: 20px auto 34px; border-radius: 50%; background: var(--ink); color: #fff; font: 700 1.6rem/1 var(--display); letter-spacing: .04em; }
.pack__name { display: block; font: 700 .9rem/1.3 var(--display); text-transform: uppercase; color: var(--ink); }
.pack__role { display: block; margin-top: 4px; font-size: .88rem; color: var(--grey); }
.crew__roster { margin-top: 24px; max-width: 70ch; color: var(--grey); }
.crew__base { margin-top: 14px; font-size: .95rem; color: var(--grey); }
.page-about .intro__art img { width: min(100%, 380px); }
.crew__strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 20px); margin-top: clamp(28px, 4vw, 44px); }
.crew__strip img { border-radius: var(--radius); aspect-ratio: 16 / 9; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .4s ease; }
.crew__strip li:hover img { filter: none; }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.82); animation: modal-scrim .18s ease both; }
.modal__panel { animation: modal-panel .22s cubic-bezier(.2,.7,.2,1) both; }
@keyframes modal-scrim { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-panel { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .modal__scrim, .modal__panel { animation: none; } }
.modal__panel {
  position: relative; width: min(100%, 980px); max-height: calc(100vh - 32px); overflow: auto;
  background: var(--ink); color: #fff; border-radius: 8px; box-shadow: 0 40px 100px rgba(0,0,0,.7);
}
.modal__close {
  position: absolute; top: 10px; right: 10px; z-index: 2; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.7); background: rgba(0,0,0,.5); color: #fff; font-size: 26px; line-height: 1;
}
.modal__close:hover { background: var(--rec); border-color: var(--rec); }
.modal__body .player { border-radius: 8px 8px 0 0; }
.modal__text { padding: clamp(20px, 3vw, 36px); }
.modal__title { font: 700 clamp(1.25rem, 2vw, 1.6rem)/1.2 var(--sans); letter-spacing: -.01em; }
.modal__caption { font-size: .82rem; color: var(--grey-light); margin-bottom: 10px; }
.modal__meta { margin: 8px 0 18px; color: var(--grey-light); font-size: .92rem; }
.modal__text p + p { margin-top: 12px; }
.modal__gallery { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin: 18px 0 0; padding: 0; }
.modal__gallery li { margin: 0; }
.modal__gallery figure { margin: 0; }
.modal__gallery img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: #000; }
.modal__gallery figcaption { margin-top: 6px; font-size: .78rem; line-height: 1.35; color: var(--grey-light); }
.modal__more { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.15); }
.modal__more h4 { font: 600 .85rem/1.3 var(--sans); color: var(--grey-light); margin-bottom: 8px; }
.modal__more-list { list-style: none; display: grid; gap: 10px; }
.modal__more-list a { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.modal__more-list a:hover span { text-decoration: underline; }
.modal__more-list img { width: 112px; height: 63px; object-fit: cover; border-radius: 4px; flex: 0 0 auto; background: #000; }
.modal__more li + li { margin-top: 0; }
.modal__more a, .modal__link a { color: #fff; }
.modal__link a.btn { color: var(--ink); }
.modal__link { margin-top: 18px; }
body.modal-open { overflow: hidden; }

/* ---------- quote ---------- */
.quote { background: var(--black); color: #fff; padding: clamp(56px, 7vw, 96px) 0; }
.quote__text { max-width: 820px; }
.quote__text p { font-size: clamp(1.35rem, 2.6vw, 2.1rem); line-height: 1.3; font-weight: 500; letter-spacing: -.01em; }
.quote__text footer { margin-top: 24px; color: var(--grey-light); font-size: .95rem; }

/* ---------- documentaries line (About page) ---------- */
.docs-line { background: var(--bone); padding: clamp(40px, 5vw, 64px) 0; }
.docs-line p { max-width: 70ch; font-size: 1.05rem; line-height: 1.6; }

/* ---------- contact ---------- */
.contact { background: var(--paper); padding: clamp(56px, 7vw, 96px) 0; }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact__text .lede { margin-top: 20px; }
.contact__email { margin-top: 18px; font-weight: 600; }
.contact__photo { margin-top: 36px; border-radius: var(--radius); filter: grayscale(1); transition: filter .4s ease; }
.contact__photo:hover { filter: none; }
.form__row { display: flex; flex-direction: column; gap: 6px; }
.form__row + .form__row { margin-top: 20px; }
.form label { font-weight: 600; font-size: .9rem; color: var(--ink); }
.form input, .form textarea {
  font: inherit; color: var(--ink); background: transparent; border: 0; border-bottom: 2px solid var(--ink);
  padding: 8px 0; border-radius: 0; width: 100%;
}
.form textarea { resize: vertical; min-height: 120px; }
.form input:focus, .form textarea:focus { outline: none; border-bottom-color: var(--rec); }
.form .btn { margin-top: 28px; }
.form__trap { position: absolute; left: -200vw; width: 1px; height: 1px; overflow: hidden; }
.form__status { margin-top: 14px; font-size: .95rem; min-height: 1.5em; }
.form__status.is-error { color: #b1261f; }
.form__status.is-ok { color: var(--ink); font-weight: 600; }
.form.is-sent .form__row, .form.is-sent .btn { display: none; }

/* ---------- footer ---------- */
.site-footer { background: var(--black); color: #fff; padding: clamp(48px, 6vw, 80px) 0 32px; }
.site-footer__inner { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px 48px; align-items: center; }
.site-footer__brand { display: flex; align-items: center; gap: 18px; flex: none; }
.site-footer__brand img { flex: none; max-width: none; }
.site-footer__brand img:first-child { height: 40px; width: auto; }
.site-footer__brand img:last-child { height: 44px; width: auto; }
.site-footer__nav, .site-footer__social { display: flex; flex-wrap: wrap; gap: 0 24px; }
.site-footer__nav { justify-content: flex-end; }
.site-footer__nav a { font: 700 .72rem/1 var(--display); text-transform: uppercase; letter-spacing: .1em; text-decoration: none; opacity: .85; display: inline-block; padding: 7px 0; }
.site-footer__nav a:hover { opacity: 1; }
.site-footer__social { grid-column: 1 / -1; font-size: .95rem; }
.site-footer__social a { color: var(--grey-light); text-decoration: none; display: inline-block; padding: 6px 0; }
.site-footer__social a:hover { color: #fff; }
.site-footer__legal { grid-column: 1 / -1; margin-top: 8px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); color: var(--grey-light); font-size: .8rem; }

/* ---------- content days page ---------- */
.intro--tight { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(40px, 6vw, 72px); }
.intro--tight .services { margin-top: 0; }
.services--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.strip { background: var(--black); }
.strip__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.strip__grid img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; filter: grayscale(1) contrast(1.05); transition: filter .4s ease; }
.strip__grid li:hover img, .strip__grid a:hover img { filter: none; }
@media (max-width: 1000px) { .services--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .services--three { grid-template-columns: minmax(0, 1fr); } .strip__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- social page ---------- */
.feed { background: var(--bone); padding: clamp(56px, 8vw, 104px) 0; border-top: 1px solid var(--line); }
.feed__note { color: var(--grey); margin: -12px 0 24px; }
.feed__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 18px); }
.feed__post { display: block; position: relative; border-radius: var(--radius); overflow: hidden; background: #000; text-decoration: none; color: #fff; }
.feed__post img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; transition: transform .35s ease; }
.feed__post:hover img, .feed__post:focus-visible img { transform: scale(1.04); }
.feed__caption { position: absolute; inset: auto 0 0 0; padding: 36px 12px 12px; font-size: .8rem; line-height: 1.35;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.75)); opacity: 0; transition: opacity .2s ease; }
.feed__post:hover .feed__caption, .feed__post:focus-visible .feed__caption { opacity: 1; }
@media (max-width: 1000px) { .feed__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .feed__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feed__caption { opacity: 1; } }

/* ---------- documentaries page ---------- */
.page-head { background: var(--black); color: #fff; padding: calc(var(--header-h) + clamp(48px, 8vw, 96px)) 0 clamp(48px, 7vw, 88px); }
.page-head .display { color: #fff; }
.page-head .lede { margin-top: 22px; color: var(--grey-light); }
.page-head--tall { min-height: 70vh; display: flex; align-items: center; }
.page-head--compact { padding-top: calc(var(--header-h) + clamp(32px, 5vw, 56px)); padding-bottom: clamp(32px, 5vw, 56px); }
.docs { background: var(--bone); padding: clamp(56px, 8vw, 104px) 0; }
.doc { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.doc + .doc { margin-top: clamp(64px, 9vw, 128px); padding-top: clamp(48px, 7vw, 96px); border-top: 1px solid var(--line); }
.doc--flip .doc__media { order: 2; }
.doc__media .player { box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.doc__platform { display: flex; align-items: center; height: 40px; margin-bottom: 14px; }
.doc__platform img { display: block; height: 34px; width: auto; max-width: 200px; object-fit: contain; object-position: left center; }
.doc__platform img[alt="Netflix"] { height: 28px; }
.doc__meta { margin: 12px 0 20px; color: var(--grey); font-size: .95rem; }
.doc__text p + p { margin-top: 12px; }
.doc__role { color: var(--grey); font-size: .95rem; margin-top: 16px; }
.doc__actions { margin-top: 24px; }
.cta { background: var(--black); color: #fff; padding: clamp(48px, 6vw, 88px) 0; }
.cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.cta .display { color: #fff; }
.cta--light { background: var(--paper); color: var(--ink); }
.cta--light .display { color: var(--ink); }
.intro__more { margin-top: 28px; }
.contact__text .display { color: var(--ink); }
.contact__note { margin-top: 14px; color: var(--grey); max-width: 46ch; }
.page-head__actions { margin-top: 28px; }
/* Credits table */
.credits-section { padding: clamp(40px, 6vw, 72px) 0; }
.credits { width: 100%; border-collapse: collapse; font-size: .92rem; line-height: 1.4; }
.credits th, .credits td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); }
.credits thead th { font: 700 .68rem/1 var(--display); text-transform: uppercase; letter-spacing: .1em; color: var(--grey); padding-top: 0; }
.credits tbody th { font-weight: 600; }
.credits td:first-child { white-space: nowrap; }
.credits__note { display: block; font-weight: 400; color: var(--grey); font-size: .85rem; margin-top: 2px; }
.credits__key { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 24px; margin-top: 28px; font-size: .9rem; }
.credits__key div { display: flex; gap: 8px; }
.credits__key dt { font-weight: 600; white-space: nowrap; }
.credits__key dt::after { content: ':'; }
.credits__key dd { color: var(--grey); margin: 0; }
.credits__updated { margin-top: 20px; color: var(--grey); font-size: .88rem; }
.contact__creds { margin-top: 14px; font-size: .95rem; }
.contact__creds a { color: var(--ink); }
/* Prose pages (privacy notice) */
.prose-section { padding: clamp(40px, 6vw, 72px) 0; }
.prose { max-width: 68ch; }
.prose h2 { font: 700 1.05rem/1.3 var(--sans); margin: 32px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose p + p { margin-top: 12px; }
.prose a { color: var(--ink); }
.prose__updated { margin-top: 32px; color: var(--grey); font-size: .88rem; }
.quote--many .quote__text + .quote__text { margin-top: clamp(36px, 5vw, 56px); padding-top: clamp(36px, 5vw, 56px); border-top: 1px solid rgba(255,255,255,.15); }
.form__turnstile { margin: 4px 0 14px; min-height: 65px; }
.page-head__jump { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 28px; }
.page-head__jump a { font: 700 .7rem/1 var(--display); text-transform: uppercase; letter-spacing: .08em; color: #fff; text-decoration: none; padding: .7rem 1rem; border: 2px solid rgba(255,255,255,.35); border-radius: 999px; }
.page-head__jump a:hover { border-color: #fff; }
.page-head__eyebrow { font-size: .9rem; color: var(--grey-light); margin-bottom: 14px; }
.page-head__eyebrow a { color: #fff; }
.svc { background: var(--bone); padding: clamp(48px, 6vw, 80px) 0; scroll-margin-top: var(--header-h); }
.svc:nth-of-type(even) { background: var(--paper); }
.svc__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; margin-bottom: clamp(24px, 3vw, 36px); }
.svc__text .lede { margin-top: 14px; max-width: 62ch; }
.svc__link { margin: 0; }
.project { background: var(--bone); padding: clamp(48px, 6vw, 80px) 0; }
/* Text left, the delivered list and facts right; the gallery sits under the text
   (row 2, column 1) and the side column spans both rows so it never pushes the
   gallery down. On phones everything stacks: text, list, then the gallery as a
   swipe strip. */
.project__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 32px clamp(32px, 6vw, 80px); align-items: start; }
.project__main { grid-column: 1; grid-row: 1; }
.project__side { grid-column: 2; grid-row: 1; }
.project__grid--gallery .project__side { grid-row: 1 / 3; }
.project__h { font: 700 .8rem/1.3 var(--display); text-transform: uppercase; letter-spacing: .08em; color: var(--grey); margin-bottom: 14px; }
.project__main p { font-size: 1.05rem; line-height: 1.6; max-width: 62ch; }
.project__main p + p { margin-top: 14px; }
.project__main p + .project__h { margin-top: 32px; }
.project__gallery { grid-column: 1; grid-row: 2; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.project__gallery li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.project__gallery figure { margin: 0; }
.project__gallery img { border-radius: var(--radius); aspect-ratio: 16 / 9; object-fit: cover; }
.project__gallery figcaption { margin-top: 8px; font-size: .82rem; color: var(--grey); }
.card--link .card__button { text-decoration: none; }
.project__list { list-style: none; }
.project__list li { padding: 10px 0; border-top: 1px solid var(--line); }
.project__list li:last-child { border-bottom: 1px solid var(--line); }
.project__facts { margin-top: 28px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px; font-size: .95rem; }
.project__facts dt { color: var(--grey); }
.project__watch { background: var(--black); color: #fff; padding: clamp(48px, 6vw, 80px) 0; }
.project__watch .display, .project__watch .work__count { color: #fff; }
.project__watch .work__count { color: var(--grey-light); }
.project__videos { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px) clamp(18px, 2.4vw, 28px); }
.project__videos li:only-child { grid-column: 1 / span 2; }
.project__subhead { font: 700 .8rem/1.3 var(--display); text-transform: uppercase; letter-spacing: .08em; color: var(--grey-light); margin: 0 0 16px; }
.project__videos + .project__subhead { margin-top: clamp(32px, 4vw, 48px); }
.project__video-title { margin-top: 12px; font-weight: 600; }
.project__video-length { color: var(--grey-light); font-weight: 400; margin-left: 6px; }
.project__video-label { margin-top: 4px; font-size: .88rem; color: var(--grey-light); }
.project__watch--still img { border-radius: var(--radius); width: 100%; max-width: 760px; height: auto; }
.project__related { background: var(--paper); }
.page-404__art { width: 140px; margin-bottom: 24px; }
.page-404 .page-head a { color: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .work__grid, .project__videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logos .studios__logos { justify-content: center; gap: 14px 28px; }
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .intro__grid, .contact__grid, .doc, .crew__grid, .project__grid, .svc__head { grid-template-columns: minmax(0, 1fr); }
  .project__videos li:only-child { grid-column: auto; }
  .pack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pack li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .doc--flip .doc__media { order: 0; }
  .intro__art { order: -1; }
  .intro__art img { width: min(70%, 360px); margin: 0 0 8px auto; }
  .contact__photo { display: none; }
  .project__main, .project__side, .project__gallery, .project__grid--gallery .project__side { grid-column: auto; grid-row: auto; }
  /* footer: one column, links in two tidy columns */
  .site-footer__inner { grid-template-columns: 1fr; gap: 24px; }
  .site-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; justify-content: flex-start; }
  .site-footer__nav a { padding: 9px 0; }
  .site-footer__social { gap: 0 20px; }
  .site-footer__social a[href^="mailto:"] { flex-basis: 100%; }
}
@media (max-width: 960px) {
  .site-header__toggle { display: flex; }
  .site-header__brand img { height: 38px; }
  .site-nav {
    position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: flex-start; gap: 0;
    background: rgba(0,0,0,.96); padding: 8px var(--gutter) 24px; transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .site-nav.is-open { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
  .site-nav a { padding: 16px 0; width: 100%; border-bottom: 1px solid rgba(255,255,255,.12); font-size: .82rem; }
  .site-header.is-open { background: rgba(0,0,0,.96); }
}
@media (max-width: 760px) {
  .credits thead { position: absolute; left: -200vw; }
  .credits, .credits tbody, .credits tr, .credits th, .credits td { display: block; }
  .credits tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .credits th, .credits td { border: 0; padding: 2px 0; }
  .credits tbody th { font-size: 1.02rem; padding-bottom: 6px; }
  .credits td::before { content: attr(data-label) ': '; color: var(--grey); }
}
@media (max-width: 700px) {
  .hero__headline { font-size: clamp(1.6rem, 8vw, 2.4rem); max-width: 14ch; }
  .hero__video { object-position: 50% 62%; }
  .project__videos { grid-template-columns: minmax(0, 1fr); }
  /* case-study gallery as a swipe strip, so the page stays short */
  .project__gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); gap: 12px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
  .project__gallery::-webkit-scrollbar { display: none; }
  .project__gallery li { flex: 0 0 84%; scroll-snap-align: start; }
  /* the delivered list and facts, tighter */
  .project__list li { padding: 8px 0; font-size: .97rem; }
  .project__facts { display: block; margin-top: 22px; }
  .project__facts dt, .project__facts dd { display: inline; margin: 0; }
  .project__facts dt::after { content: ": "; }
  .project__facts dd::after { content: ""; display: block; height: 6px; }
  .hero__sub { font-size: 1rem; }
  .work__grid { grid-template-columns: minmax(0, 1fr); }
  .services { grid-template-columns: minmax(0, 1fr); }
  .crew__strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); gap: 12px; margin: clamp(28px, 4vw, 44px) calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 4px; scrollbar-width: none; }
  .crew__strip::-webkit-scrollbar { display: none; }
  .crew__strip li { flex: 0 0 84%; scroll-snap-align: start; }
  .studios__logos img { height: 24px; }
  .modal { padding: 0; align-items: end; }
  .modal__panel { max-height: 100vh; border-radius: 0; }
  .modal__body .player { border-radius: 0; }
}

/* ---------- phone and laptop tuning ---------- */
@media (max-width: 1320px) {
  .studios__logos { gap: 16px clamp(18px, 2.6vw, 40px); }
  .studios__logos img { height: 26px; max-width: 130px; }
  .studios__logos img[alt="Sony Pictures"], .studios__logos img[alt="Warner Bros."], .studios__logos img[alt="Paramount Pictures"] { height: 46px; }
  .studios__logos img[alt="BBC"] { height: 32px; }
  .studios__logos img[alt="Amazon MGM Studios"] { height: 12px; max-width: 200px; }
}
@media (max-width: 1100px) {
  .hero__headline { font-size: clamp(1.75rem, 5.2vw, 3.2rem); }
}
@media (max-width: 700px) {
  :root { --header-h: 64px; }
  .hero { min-height: 84svh; }
  .hero__content { padding-bottom: 64px; }
  .hero__actions .btn { width: 100%; }
  .hero__scroll { display: none; }
  .filters__btn { min-height: 40px; }
  .work__grid { gap: 28px; }
  .card__title { font-size: .85rem; }
  .pack__card img { height: 110px; }
  .pack__mono { width: 84px; height: 84px; margin: 13px auto 23px; font-size: 1.25rem; }
  .pack__card { padding: 16px 12px 14px; }
  .quote__text p { font-size: 1.25rem; }
  .crew__photo figcaption { font-size: .8rem; }
  .doc + .doc { margin-top: 56px; padding-top: 40px; }
  .modal__close { top: 8px; right: 8px; }
  .feed__caption { font-size: .72rem; padding: 28px 8px 8px; }
}
@media (max-width: 400px) {
  .hero__headline { font-size: 1.55rem; }
  .display--2 { font-size: 1.5rem; }
}