/* Merriweather Media. Theme and page styles on top of scrollcraft.css.
   Six colours, two faces. Light paper by default; .is-dark and .films-band redefine the
   ground and restate `color`, because a token change alone does not re-ink inherited text. */

:root {
  --sc-canvas: #f6f6f3;
  --sc-surface: #eaebe6;
  --sc-ink: #14181a;
  --sc-ink-soft: #55605c;
  --sc-accent: #23533f;
  --sc-accent-ink: #f6f6f3;
  --sc-font-display: "Outfit", "Geist", system-ui, sans-serif;
  --sc-font-text: "Geist", system-ui, sans-serif;
  --sc-shadow-color: 150 18% 18%;
  --bar-h: 64px;
  --r: 4px;
  --on-media: #f4f6f3;
}
.is-dark, .films-band {
  --sc-canvas: #0f1312;
  --sc-surface: #181e1c;
  --sc-ink: #eef0ec;
  --sc-ink-soft: #a5afaa;
  --sc-accent: #8ec4a6;
  --sc-accent-ink: #0f1312;
  --sc-shadow-color: 160 30% 2%;
  background: var(--sc-canvas);
  color: var(--sc-ink);
}
/* Light text on dark: a touch more leading and tracking, one step more weight. */
.is-dark .sc-body, .films-band .sc-body, .is-dark .sc-lede { line-height: 1.68; letter-spacing: 0.002em; }

body { background: var(--sc-canvas); }
h1, h2, h3 { font-family: var(--sc-font-display); font-weight: 500; }
.sc-display { font-weight: 500; }
.label {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  margin: 0;
}
.vh, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* -------------------------------------------------------------- links, buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0.8rem 1.5rem;
  border: 0; border-radius: var(--r);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-family: var(--sc-font-display); font-size: var(--sc-t-sm); font-weight: 500; letter-spacing: 0.04em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: var(--sc-e1);
  transition: background-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.btn:hover { background: color-mix(in oklab, var(--sc-accent) 86%, var(--sc-ink)); box-shadow: var(--sc-e2); }
.btn:active { transform: translateY(1px); box-shadow: var(--sc-e1); }
.btn:disabled { opacity: 0.55; cursor: progress; }
.btn--light { background: var(--on-media); color: #14181a; }
.btn--light:hover { background: #ffffff; }
.link {
  font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-sm); letter-spacing: 0.04em;
  color: var(--sc-ink); text-decoration: underline; text-decoration-color: var(--sc-accent);
  text-decoration-thickness: 1.5px; text-underline-offset: 0.35em;
  transition: color 160ms var(--sc-ease-out);
}
.link:hover { color: var(--sc-accent); }

.skip { position: absolute; left: var(--sc-gutter); top: -100px; z-index: 100; padding: 0.6rem 1rem; background: var(--sc-ink); color: var(--sc-canvas); border-radius: var(--r); }
.skip:focus { top: 0.75rem; }

/* ------------------------------------------------------------------- the bar -- */
.bar {
  position: sticky; top: 0; z-index: var(--sc-z-chrome);
  height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-5);
  padding-inline: var(--sc-gutter);
  background: var(--sc-canvas);
  border-bottom: 1px solid var(--sc-hairline);
  transition: transform 260ms var(--sc-ease-out);
}
.bar.is-tucked { transform: translateY(-100%); }
.bar__mark {
  font-family: var(--sc-font-display); font-weight: 600; font-size: 1.06rem;
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--sc-ink);
  white-space: nowrap;
}
.bar__mark span { font-weight: 400; }
.bar__nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.25rem); }
.bar__nav > a, .menu__btn {
  font-family: var(--sc-font-display); font-size: var(--sc-t-sm); font-weight: 500; letter-spacing: 0.06em;
  text-decoration: none; color: var(--sc-ink);
  padding: 0.4rem 0; background: none; border: 0; cursor: pointer;
  text-underline-offset: 0.45em;
}
.bar__nav > a:hover, .menu__btn:hover, .bar__nav > a[aria-current="page"], .menu__btn[data-current] { text-decoration: underline; text-decoration-color: var(--sc-accent); text-decoration-thickness: 1.5px; }
.bar__nav > a.bar__cta {
  padding: 0.55rem 1.05rem; border-radius: var(--r);
  background: var(--sc-accent); color: var(--sc-accent-ink); text-decoration: none;
}
.bar__nav > a.bar__cta:hover { background: color-mix(in oklab, var(--sc-accent) 86%, var(--sc-ink)); }
.menu { position: relative; }
.menu__btn::after { content: ""; display: inline-block; width: 0.42em; height: 0.42em; margin-left: 0.45em; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-0.2em) rotate(45deg); transition: transform 160ms var(--sc-ease-out); }
.menu__btn[aria-expanded="true"]::after { transform: translateY(0) rotate(-135deg); }
.menu__list {
  position: absolute; top: calc(100% + 0.9rem); left: -1rem; min-width: 15rem;
  margin: 0; padding: 0.5rem; list-style: none;
  background: var(--sc-canvas); border: 1px solid var(--sc-hairline); border-radius: var(--r);
  box-shadow: var(--sc-e3);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 160ms var(--sc-ease-out), transform 160ms var(--sc-ease-out), visibility 0s 160ms;
}
.menu.is-open .menu__list { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.menu__list a { display: block; padding: 0.6rem 0.75rem; border-radius: var(--r); text-decoration: none; font-size: var(--sc-t-sm); }
.menu__list a:hover, .menu__list a[aria-current="page"] { background: var(--sc-surface); }
.bar__toggle { display: none; }

@media (max-width: 860px) {
  .bar__toggle {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.9rem;
    font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-sm); letter-spacing: 0.06em;
    background: none; border: 1px solid var(--sc-hairline-strong); border-radius: var(--r); cursor: pointer;
  }
  .bar__nav {
    position: fixed; inset: var(--bar-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--sc-4) var(--sc-gutter) var(--sc-6);
    background: var(--sc-canvas); border-bottom: 1px solid var(--sc-hairline);
    box-shadow: var(--sc-e3);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 180ms var(--sc-ease-out), transform 180ms var(--sc-ease-out), visibility 0s 180ms;
  }
  .bar.is-open .bar__nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .bar__nav > a, .menu__btn { padding: 0.9rem 0; font-size: var(--sc-t-lg); text-align: left; border-bottom: 1px solid var(--sc-hairline); }
  .bar__nav > a.bar__cta { margin-top: var(--sc-5); text-align: center; border-bottom: 0; }
  .menu__list { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 0 var(--sc-4); display: none; }
  .menu.is-open .menu__list { display: block; }
  .menu__list a { font-size: var(--sc-t-base); padding: 0.7rem 0; }
}

/* ===================================================================== HOME == */

/* 1 · Opening. Three planes cut from one 4K frame share the same box and crop, so
   they stay registered; only their scroll rates differ. */
.hero {
  position: relative;
  height: calc(100svh - var(--bar-h));
  min-height: 520px;
  overflow: clip;
  background: #6fa9d8;
}
.hero__scene { position: absolute; inset: 0; }
.hero__plane { position: absolute; inset: -12% 0 0 0; pointer-events: none; }
.hero__img {
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 58%;
  will-change: transform;
}
/* The wordmark's baseline sits just above the summit (about 46% down the hero), so only the
   tip of the peak rises into the bottom of MEDIA at any screen shape. */
.hero__plane--mark { display: flex; justify-content: center; align-items: flex-end; padding-bottom: calc((100svh - var(--bar-h)) * 0.475); }
.hero__mark {
  margin: 0;
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: clamp(3rem, min(9.4vw, 17svh), 13.5rem);
  line-height: 0.86; letter-spacing: -0.012em;
  text-transform: uppercase; text-align: center;
  color: #101618;
  will-change: transform;
}
.hero__mark span { display: block; }
.hero__floor {
  position: absolute; inset: auto 0 0 0; height: 34%;
  background: linear-gradient(to top, var(--sc-canvas) 6%, color-mix(in oklab, var(--sc-canvas) 82%, transparent) 34%, transparent);
  pointer-events: none;
}
.hero__meta {
  position: absolute; left: 0; right: 0; bottom: clamp(1.25rem, 4.5vh, 3rem);
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sc-5);
  max-width: none;
}
.hero__line {
  margin: 0; max-width: 34ch;
  font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 500; line-height: 1.3; letter-spacing: -0.005em;
  color: var(--sc-ink); text-wrap: balance;
}
.hero__label { color: var(--sc-ink); }
@media (max-width: 860px) {
  .hero { height: calc(100svh - var(--bar-h)); }
  .hero__img { object-position: 47% 58%; }
  .hero__plane--mark { align-items: flex-start; padding-bottom: 0; padding-top: calc(12% + 13vh); }
  .hero__mark { font-size: 11.2vw; letter-spacing: -0.02em; }
  .hero__meta { flex-direction: column; align-items: flex-start; gap: var(--sc-2); }
  .hero__floor { height: 38%; }
}

/* 2 · Showreel. A window that opens to the full frame across the first 42% of the act. */
.reel { background: var(--sc-canvas); }
.reel__stage { top: 0; }
.reel__frame {
  --i: calc(1 - min(var(--sc-p, 0) / 0.42, 1));
  position: absolute; inset: 0; overflow: hidden;
  background: #0f1312;
  clip-path: inset(calc(var(--i) * 17%) calc(var(--i) * 21%) round calc(var(--i) * 10px));
}
.reel__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1 + var(--i) * 0.07)); }
.reel__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top right, rgb(9 13 12 / 0.84) 0%, rgb(9 13 12 / 0.56) 30%, rgb(9 13 12 / 0.18) 50%, transparent 64%);
}
.reel__copy { position: absolute; z-index: var(--sc-z-copy); left: var(--sc-gutter); bottom: clamp(2.5rem, 10vh, 6.5rem); color: var(--on-media); }
.reel__copy .label { color: rgb(244 246 243 / 0.82); }
.reel__h { margin: var(--sc-2) 0 var(--sc-5); font-size: var(--sc-t-3xl); line-height: 1; letter-spacing: var(--sc-track-tight); }
@media (max-width: 860px) {
  .reel__frame { clip-path: inset(calc(var(--i) * 22%) calc(var(--i) * 8%) round calc(var(--i) * 8px)); }
  /* The caption spans the full width on a phone, so the density is a band, not a corner. */
  .reel__scrim { background: linear-gradient(to top, rgb(9 13 12 / 0.86) 0%, rgb(9 13 12 / 0.6) 26%, rgb(9 13 12 / 0.2) 44%, transparent 58%); }
}

/* 3 · Services. Lateral travel reads as "options". */
.svc { background: var(--sc-canvas); }
.svc__stage { display: flex; align-items: center; padding-top: var(--bar-h); }
.svc__rail { align-items: center; gap: clamp(1rem, 2.6vw, 2.75rem); padding-inline: var(--sc-gutter); }
.svc__lead { flex: 0 0 min(34rem, 82vw); }
.svc__lead .sc-body { margin-top: var(--sc-4); max-width: 30ch; }
.svc__panel {
  --w: min(clamp(16rem, 30vw, 30rem), calc((100svh - var(--bar-h) - 13rem) * 0.75));
  flex: 0 0 var(--w); width: var(--w);
  color: inherit; text-decoration: none;
}
.svc__media {
  aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--r);
  background: var(--sc-surface); box-shadow: var(--sc-e2);
}
.svc__media video { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--sc-ease-out); }
.svc__name { margin: var(--sc-4) 0 var(--sc-1); font-size: var(--sc-t-xl); line-height: 1.1; letter-spacing: var(--sc-track-snug); }
.svc__strap { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); max-width: 34ch; }
.svc__more { display: inline-block; margin-top: var(--sc-3); font-family: var(--sc-font-display); font-size: var(--sc-t-xs); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--sc-accent); text-underline-offset: 0.4em; }
@media (hover: hover) and (pointer: fine) { .svc__panel:hover .svc__media video { transform: scale(1.03); } }
.svc__note { flex: 0 0 min(22rem, 70vw); padding-left: var(--sc-5); border-left: 1px solid var(--sc-hairline-strong); }
.svc__also { list-style: none; margin: var(--sc-3) 0 var(--sc-5); padding: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); line-height: 1.35; }
.svc__also a { text-decoration: none; }
.svc__also a:hover { text-decoration: underline; text-decoration-color: var(--sc-accent); }
/* The first panel arrives sharp. The others come into focus as the rail brings them in:
   --s is the rail progress at which a panel is fully sharp, and it pulls focus over the
   quarter of travel before that, in the same language as the rack focus further down. */
@media (prefers-reduced-motion: no-preference) {
  .svc__panel--settle {
    --f: clamp(0, calc((var(--sc-p, 0) - var(--s, 0.5) + 0.25) * 4), 1);
    opacity: calc(0.6 + var(--f) * 0.4);
  }
  .svc__panel--settle .svc__media video { filter: blur(calc((1 - var(--f)) * 7px)); }
}
@media (max-width: 860px) {
  .svc__panel { --w: min(72vw, calc((100svh - var(--bar-h) - 14rem) * 0.75)); }
  .svc__name { font-size: var(--sc-t-lg); }
}

/* 4 · Selected work, with the rack focus. --rf is 1 (sharp) unless the page script is
   running with motion allowed, so nothing is ever left blurred without JS. */
.work { padding-block: var(--sc-section) calc(var(--sc-section) * 0.8); }
.work__head, .films-band__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sc-5); margin-bottom: var(--sc-8); }
.work__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2.4vw, 2.5rem); row-gap: clamp(3rem, 9vh, 7rem); align-items: start; }
.rf { --rf: 1; display: block; color: inherit; text-decoration: none; }
.rf--1 { grid-column: 1 / span 7; }
.rf--2 { grid-column: 9 / span 4; margin-top: 16vh; }
.rf--3 { grid-column: 2 / span 6; }
.rf--4 { grid-column: 9 / span 3; margin-top: 8vh; }
.rf--5 { grid-column: 1 / span 6; }
.rf--6 { grid-column: 8 / span 4; margin-top: 12vh; }
.rf--7 { grid-column: 3 / span 8; }
.rf__fig { margin: 0; }
.rf__frame { position: relative; overflow: hidden; border-radius: var(--r); background: var(--sc-surface); }
.rf__frame img {
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(calc((1 - var(--rf)) * 9px));
  transform: scale(calc(1.04 - var(--rf) * 0.04));
}
.rf__marks {
  position: absolute; inset: clamp(8px, 1.4vw, 16px); pointer-events: none;
  --m: rgb(246 246 243 / 0.92); --l: clamp(14px, 2vw, 26px);
  background:
    linear-gradient(var(--m), var(--m)) top left / var(--l) 1.5px,
    linear-gradient(var(--m), var(--m)) top left / 1.5px var(--l),
    linear-gradient(var(--m), var(--m)) top right / var(--l) 1.5px,
    linear-gradient(var(--m), var(--m)) top right / 1.5px var(--l),
    linear-gradient(var(--m), var(--m)) bottom left / var(--l) 1.5px,
    linear-gradient(var(--m), var(--m)) bottom left / 1.5px var(--l),
    linear-gradient(var(--m), var(--m)) bottom right / var(--l) 1.5px,
    linear-gradient(var(--m), var(--m)) bottom right / 1.5px var(--l);
  background-repeat: no-repeat;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.35));
  opacity: calc(var(--rf) * var(--rf));
  transform: scale(calc(1.06 - var(--rf) * 0.06));
}
.rf__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.9rem; margin-top: var(--sc-3); opacity: calc(0.3 + var(--rf) * 0.7); }
.rf__title { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 500; letter-spacing: var(--sc-track-snug); }
.rf__meta { font-family: var(--sc-font-display); font-size: var(--sc-t-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); }
@media (max-width: 860px) {
  .work__grid { grid-template-columns: 1fr; row-gap: var(--sc-8); }
  .rf[class*="rf--"] { grid-column: 1; margin-top: 0; }
  .rf--4, .rf--2 { width: 78%; justify-self: end; }
}

/* 5 · Films. The ground cuts to near-black on a hard edge. */
.films-band { padding-block: var(--sc-section); }
.films-band__head .sc-body { max-width: 38ch; }
.films-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vh, 4rem) clamp(1rem, 2.4vw, 2.5rem); }
.film { display: block; color: inherit; text-decoration: none; }
.film__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r); background: var(--sc-surface); }
.film__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .film:hover .film__media img { transform: scale(1.025); } }
/* Home films: the still is a little taller than its frame and drifts slowly inside it
   (the engine moves the wrapper), so the band feels like film rather than a grid of cards. */
.film__drift { position: absolute; inset: -9% 0; }
/* A film with no still: thin columns behind a typeset title. */
.film__type {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem;
  background:
    linear-gradient(to bottom, var(--sc-surface) 0%, transparent 22%, transparent 78%, var(--sc-surface) 100%),
    repeating-linear-gradient(90deg, transparent 0 calc(2.2% - 2px), color-mix(in oklab, var(--sc-ink) 9%, transparent) calc(2.2% - 2px) 2.2%),
    var(--sc-surface);
  color: var(--sc-ink); text-align: center;
}
.film__type-big { font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(3.5rem, 9vw, 8rem); line-height: 0.85; letter-spacing: -0.04em; }
.film__type-small { font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-xs); letter-spacing: 0.32em; text-transform: uppercase; color: var(--sc-ink-soft); }
.film__type-small:only-child { font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug); text-transform: none; color: var(--sc-ink); }
.film__title { margin: var(--sc-4) 0 var(--sc-1); font-size: var(--sc-t-xl); line-height: 1.1; letter-spacing: var(--sc-track-snug); }
.film__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; font-family: var(--sc-font-display); font-size: var(--sc-t-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.film__role { color: var(--sc-accent); }
.films-band__all { display: inline-block; margin-top: var(--sc-8); }
@media (max-width: 700px) { .films-grid { grid-template-columns: 1fr; } }

/* 6 · About teaser */
.about-teaser__in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.about-teaser__stills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-3); }
.about-teaser__still { overflow: hidden; border-radius: var(--r); aspect-ratio: 3 / 4; }
.about-teaser__still:nth-child(2) { transform: translateY(12%); }
.about-teaser__still img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .about-teaser__in { grid-template-columns: 1fr; } }

/* 7 · Enquire. Set like one of the labels, and it holds. */
.close { background: var(--sc-canvas); }
.close__stage { display: flex; flex-direction: column; justify-content: flex-start; }
.close__plate { padding-block: clamp(3rem, 9vh, 6rem) var(--sc-9); }
.about-teaser { padding-bottom: var(--sc-7); }
.close__h { margin: var(--sc-3) 0 var(--sc-5); font-size: var(--sc-t-3xl); line-height: 1; letter-spacing: var(--sc-track-tight); max-width: 16ch; text-wrap: balance; }
.close__email, .band__email, .enq__email {
  display: inline-block; font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--sc-t-2xl); letter-spacing: var(--sc-track-snug); line-height: 1.15;
  color: var(--sc-ink); text-decoration: underline; text-decoration-color: var(--sc-accent);
  text-decoration-thickness: 2px; text-underline-offset: 0.18em; overflow-wrap: anywhere;
}
.close__email:hover, .band__email:hover, .enq__email:hover { color: var(--sc-accent); }
@media (max-width: 640px) { .close__email, .band__email, .enq__email { font-size: min(var(--sc-t-2xl), 6vw); } }
.close__row, .band__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-5); margin-top: var(--sc-6); }
.band__social { display: inline-flex; gap: var(--sc-5); font-family: var(--sc-font-display); font-size: var(--sc-t-sm); }
.close__meta { margin: var(--sc-6) 0 0; font-family: var(--sc-font-display); font-size: var(--sc-t-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.close .foot { position: absolute; left: 0; right: 0; bottom: 0; }

/* --------------------------------------------------------- band + footer -- */
.band { background: var(--sc-surface); padding-block: calc(var(--sc-section) * 0.8); }
.is-dark .band { background: var(--sc-surface); }
.band__h { margin: var(--sc-3) 0 var(--sc-4); font-size: var(--sc-t-3xl); line-height: 1; letter-spacing: var(--sc-track-tight); }
.foot { border-top: 1px solid var(--sc-hairline); }
.foot__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sc-2) var(--sc-6); padding-block: var(--sc-5); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }

/* =============================================================== INNER PAGES == */
.page-head { padding-top: calc(var(--sc-section) * 0.7); padding-bottom: var(--sc-7); }
.page-head .sc-lede { margin-top: var(--sc-5); }
.page-head .label + .sc-display { margin-top: var(--sc-3); }

.chips { display: flex; flex-wrap: wrap; gap: var(--sc-2); margin-bottom: var(--sc-7); }
.chip {
  min-height: 40px; padding: 0.45rem 0.95rem; border-radius: var(--r);
  border: 1px solid var(--sc-hairline-strong); background: transparent; cursor: pointer;
  font-family: var(--sc-font-display); font-size: var(--sc-t-sm); font-weight: 500; letter-spacing: 0.02em;
  transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out);
}
.chip:hover { border-color: var(--sc-ink); }
.chip[aria-pressed="true"] { background: var(--sc-ink); color: var(--sc-canvas); border-color: var(--sc-ink); }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-7) clamp(1rem, 2.4vw, 2.5rem); padding-bottom: var(--sc-section); }
.tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 0; }
.tiles--1 { grid-template-columns: minmax(0, 1fr); max-width: 52rem; padding-bottom: 0; }
.tile { display: block; color: inherit; text-decoration: none; }
.tile[hidden] { display: none; }
.tile__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); background: var(--sc-surface); }
.tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .tile:hover .tile__media img { transform: scale(1.03); } }
.tile__title { margin: var(--sc-3) 0 0.15rem; font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-snug); }
.tile__meta { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); }
@media (max-width: 1100px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tiles, .tiles--2 { grid-template-columns: 1fr; } }

/* project */
.proj__head { padding-top: calc(var(--sc-section) * 0.6); padding-bottom: var(--sc-6); }
.proj__head .sc-display { margin-top: var(--sc-3); }
.proj__facts { margin: var(--sc-4) 0 0; font-family: var(--sc-font-display); font-size: var(--sc-t-sm); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); }
.proj__cover img { width: 100%; height: min(82svh, 62vw); object-fit: cover; }
.proj__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); padding-block: var(--sc-section) var(--sc-8); align-items: start; }
.proj__clip { border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 9; background: var(--sc-surface); }
.proj__clip--vertical { aspect-ratio: 9 / 16; max-width: 22rem; justify-self: end; width: 100%; }
.proj__clip video { width: 100%; height: 100%; object-fit: cover; }
.proj__next { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sc-5); padding-block: var(--sc-8) var(--sc-section); }
.proj__nextlink { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug); text-decoration: none; }
.proj__nextlink .label { margin-right: var(--sc-3); }
.proj__nextlink:hover { color: var(--sc-accent); }
@media (max-width: 860px) { .proj__body { grid-template-columns: 1fr; } .proj__clip--vertical { justify-self: start; } }

.gallery { columns: 2; column-gap: clamp(1rem, 2.4vw, 2.5rem); }
.gallery--3 { columns: 3; }
.gallery__item { margin: 0 0 clamp(1rem, 2.4vw, 2.5rem); break-inside: avoid; border-radius: var(--r); overflow: hidden; background: var(--sc-surface); }
.gallery__item img { width: 100%; height: auto; }
@media (max-width: 860px) { .gallery--3 { columns: 2; } }
@media (max-width: 560px) { .gallery, .gallery--3 { columns: 1; } }

/* films pages */
.films-grid--page { padding-bottom: var(--sc-section); }
.filmpage__head { padding-top: calc(var(--sc-section) * 0.6); padding-bottom: var(--sc-6); }
.filmpage__head .sc-display { margin-top: var(--sc-3); }
.filmpage__player { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--sc-surface); }
.filmpage__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-ph { position: absolute; inset: 0; }
.player-ph img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.player-ph__note {
  position: absolute; left: var(--sc-5); bottom: var(--sc-5); margin: 0;
  display: flex; gap: var(--sc-3); align-items: baseline;
  padding: 0.7rem 1rem; border-radius: var(--r);
  background: rgb(15 19 18 / 0.82); color: #eef0ec; font-size: var(--sc-t-sm);
}
.player-ph__note .label { color: #8ec4a6; }
.player-ph--type .film__type-big { font-size: clamp(5rem, 16vw, 14rem); }

/* "Made for the feed": vertical loops at phone proportions */
.feed { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; padding-bottom: var(--sc-section); }
.feed__text .sc-body { margin-top: var(--sc-4); max-width: 32ch; }
.feed__clips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 2vw, 1.75rem); }
.feed__clip { aspect-ratio: 9 / 16; overflow: hidden; border-radius: 14px; background: var(--sc-surface); box-shadow: var(--sc-e2); }
.feed__clip:nth-child(2) { transform: translateY(8%); }
.feed__clip video { width: 100%; height: 100%; object-fit: cover; }
.feed--single { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.feed--single .feed__clips { grid-template-columns: minmax(0, 20rem); justify-content: end; }
@media (max-width: 860px) {
  .feed, .feed--single { grid-template-columns: 1fr; }
  .feed--single .feed__clips { justify-content: start; grid-template-columns: minmax(0, 15rem); }
}
.filmpage__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 6vw, 6rem); padding-block: var(--sc-8); align-items: start; }
.credits { margin: 0; display: grid; gap: var(--sc-4); }
.credits div { display: grid; grid-template-columns: 7rem 1fr; gap: var(--sc-3); padding-bottom: var(--sc-3); border-bottom: 1px solid var(--sc-hairline); }
.credits dt { font-family: var(--sc-font-display); font-size: var(--sc-t-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.credits dd { margin: 0; }
@media (max-width: 860px) { .filmpage__body { grid-template-columns: 1fr; } }

/* service pages */
.svc-hero { position: relative; height: min(76svh, 54rem); min-height: 26rem; overflow: hidden; background: #0f1312; }
.svc-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc-hero__scrim { position: absolute; inset: 0; background: linear-gradient(to top right, rgb(9 13 12 / 0.78) 0%, rgb(9 13 12 / 0.42) 30%, transparent 60%); }
.svc-hero__copy { position: absolute; left: 0; right: 0; bottom: clamp(2rem, 8vh, 5rem); color: var(--on-media); }
.svc-hero__copy .sc-lede { color: var(--on-media); margin-top: var(--sc-4); }
.svc-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.svc-intro__who { margin: 0; color: var(--sc-ink-soft); }
.svc-intro__who .label { display: block; margin-bottom: var(--sc-2); }
.pkgs { padding-bottom: var(--sc-8); }
.pkgs__list { margin-top: var(--sc-6); border-top: 1px solid var(--sc-hairline-strong); }
.pkg { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sc-5); padding-block: var(--sc-6); border-bottom: 1px solid var(--sc-hairline); }
.pkg__name { margin: 0; font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug); }
.pkg__lines { margin: 0; padding-left: 1.1em; color: var(--sc-ink-soft); }
.pkg__lines li + li { margin-top: var(--sc-2); }
.pkgs__addons { margin: var(--sc-6) 0 0; color: var(--sc-ink-soft); }
.pkgs__addons .label { margin-right: var(--sc-3); }
.pkgs__note { margin: var(--sc-5) 0 0; max-width: 60ch; padding: var(--sc-5); background: var(--sc-surface); border-radius: var(--r); }
.pkgs__quote { margin: var(--sc-6) 0 var(--sc-5); font-family: var(--sc-font-display); font-size: var(--sc-t-lg); max-width: 44ch; }
.related { margin-top: var(--sc-9); }
.related .tiles { margin-top: var(--sc-6); }
.steps { padding-bottom: var(--sc-section); }
.steps__list { list-style: none; counter-reset: step; margin: var(--sc-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sc-5); }
.steps__list li { counter-increment: step; padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline-strong); }
.steps__list li::before { content: counter(step); font-family: var(--sc-font-display); font-size: var(--sc-t-xs); font-weight: 500; color: var(--sc-accent); }
.steps__list h3 { margin: var(--sc-2) 0 var(--sc-2); font-size: var(--sc-t-lg); }
.steps__list p { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.faq { padding-top: 0; }
.faq__list { margin-top: var(--sc-6); max-width: 52rem; border-top: 1px solid var(--sc-hairline-strong); }
.faq details { border-bottom: 1px solid var(--sc-hairline); }
.faq summary { display: flex; justify-content: space-between; gap: var(--sc-4); padding-block: var(--sc-5); cursor: pointer; list-style: none; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--sc-accent); font-weight: 400; transition: transform 160ms var(--sc-ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 var(--sc-5); max-width: 60ch; color: var(--sc-ink-soft); }
@media (max-width: 860px) {
  .svc-intro, .pkg { grid-template-columns: 1fr; }
  .steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* about */
.about { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 6vw, 6rem); padding-bottom: var(--sc-section); align-items: start; }
.about__text { max-width: 62ch; font-size: var(--sc-t-lg); line-height: 1.6; }
.about__text p { margin: 0; }
.about__text .btn { margin-top: var(--sc-6); }
.about__photo { border-radius: var(--r); overflow: hidden; margin-bottom: var(--sc-6); }
.about__photo img { width: 100%; height: auto; }
.credit-list { list-style: none; margin: var(--sc-3) 0 0; padding: 0; border-top: 1px solid var(--sc-hairline-strong); }
.credit-list li { display: flex; flex-direction: column; gap: 0.15rem; padding-block: var(--sc-3); border-bottom: 1px solid var(--sc-hairline); }
.credit-list a { font-family: var(--sc-font-display); font-weight: 500; text-decoration: none; }
.credit-list a:hover { color: var(--sc-accent); }
.credit-list span { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } }

/* enquire */
.enq__email-line { margin: var(--sc-6) 0 var(--sc-3); font-size: var(--sc-t-lg); }
.enq__email-line .enq__email { display: block; margin-top: var(--sc-2); }
.enq { padding-bottom: var(--sc-section); }
.enq__form { max-width: 48rem; display: grid; gap: var(--sc-5); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-5); }
.field { display: grid; gap: var(--sc-2); }
.field > span, .choices__q, .extra legend { font-family: var(--sc-font-display); font-size: var(--sc-t-sm); font-weight: 500; letter-spacing: 0.02em; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 0.7rem 0.85rem;
  border: 1px solid var(--sc-hairline-strong); border-radius: var(--r);
  background: #fcfcfa; color: var(--sc-ink);
  transition: border-color 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.field textarea { resize: vertical; min-height: 9rem; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: color-mix(in oklab, var(--sc-ink) 45%, transparent); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 1px; border-color: var(--sc-accent); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #a1321f; }
.extra { margin: 0; padding: var(--sc-5); border: 1px solid var(--sc-hairline); border-radius: var(--r); background: var(--sc-surface); display: grid; gap: var(--sc-5); }
.extra[hidden] { display: none; }
.extra legend { padding: 0 var(--sc-2); }
.extra--callback { background: transparent; }
.choices { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-3) var(--sc-5); }
.choices__q { flex-basis: 100%; }
.choices label { display: inline-flex; align-items: center; gap: var(--sc-2); min-height: 44px; cursor: pointer; }
.choices input { width: 1.1rem; height: 1.1rem; margin: 0; }
.enq__privacy { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.enq__submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-5); }
.enq__status { margin: 0; font-size: var(--sc-t-sm); }
.enq__status.is-error { color: #a1321f; }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }

.thanks { min-height: 56svh; }
.thanks .sc-lede { margin-bottom: var(--sc-6); }

/* showreel with sound */
.player { width: min(92vw, 1400px); padding: 0; border: 0; border-radius: var(--r); background: #000; color: #fff; overflow: visible; }
.player::backdrop { background: rgb(8 10 10 / 0.86); }
.player__video { width: 100%; aspect-ratio: 16 / 9; background: #000; }
.player__close { position: absolute; right: 0; top: -3rem; min-height: 40px; padding: 0.4rem 0.9rem; border: 1px solid rgb(255 255 255 / 0.5); border-radius: var(--r); background: transparent; color: #fff; font-family: var(--sc-font-display); cursor: pointer; }
.player__close:hover { background: rgb(255 255 255 / 0.12); }