/* fonts, hosted with the site (upright only: italics are slanted by the browser) */
/* stand-ins until Archivo arrives, sized to its width (narrow headings, normal body) so text doesn't re-wrap and jump at the swap */
@font-face { font-family: "Archivo Display Fallback"; src: local("Arial"), local("Roboto"), local("Helvetica"); size-adjust: 73%; }
@font-face { font-family: "Archivo Body Fallback"; src: local("Arial"), local("Roboto"), local("Helvetica"); size-adjust: 98%; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(../fonts/archivo-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(../fonts/archivo-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face { font-family: 'Azeret Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/azeret-mono-latin-ext-400.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face { font-family: 'Azeret Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/azeret-mono-latin-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face { font-family: 'Azeret Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/azeret-mono-latin-ext-400.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face { font-family: 'Azeret Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/azeret-mono-latin-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face { font-family: 'Azeret Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/azeret-mono-latin-ext-400.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face { font-family: 'Azeret Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/azeret-mono-latin-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* =========================================================
   Skyora Productions — shared stylesheet
   ========================================================= */
:root {
  --bg: #faf9f6;           /* warm white page */
  --surface: #ffffff;
  --surface-2: #f1efea;
  --sky: #e8eef6;          /* pale sky: the second colour, for tinted bands and card backs */
  --text: #141413;
  --text-dim: rgba(20, 20, 19, 0.62);
  --line: rgba(20, 20, 19, 0.12);
  --on-dark: #f3f1ec;      /* text on the dark props: clapperboard, film strip, game screens */
  --on-dark-dim: rgba(243, 241, 236, 0.62);
  --prop: #121211;
  --sun: #d03c17;          /* the one accent: vermilion, deep enough for white text on it */
  --sun-deep: #b5320f;
  --sun-hover: #e04a22;
  --rec: #e0352b;
  --ink-rgb: 20, 20, 19;    /* the text colour as channels, for tints and rules */
  --bg-rgb: 250, 249, 246;  /* the page colour as channels, for fades over photos */
  --sun-rgb: 208, 60, 23;
  --shadow-rgb: 20, 20, 19; /* shadows stay dark in every theme */
  --text-muted: #6b6862;    /* labels on paper and tinted cards */
  --on-sun: #fff;           /* text on the accent colour */
  --hero-sky: #e4e4e2;      /* behind the hero photo while it loads */
  --hero-sky-top: #f0f0ee;

  --f-display: "Archivo", "Archivo Display Fallback", "Arial Narrow", sans-serif;
  --f-body: "Archivo", "Archivo Body Fallback", system-ui, -apple-system, Segoe UI, sans-serif;
  --f-mono: "Azeret Mono", ui-monospace, "SFMono-Regular", monospace;
  --display-wdth: 72%;     /* Archivo's width axis: condensed, like a film billing block */
  --display-wght: 600;

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1280px;
  --nav-h: 64px;
  --screen: calc(100svh - var(--nav-h));   /* one viewport, minus the fixed nav */
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
main { overflow-x: hidden; overflow-x: clip; }   /* the tilted strip pokes past the edges */
img, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--sun); color: var(--on-sun); }
em { font-style: italic; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 999; background: var(--sun); color: var(--on-sun); padding: 8px 14px; }
.skip:focus { left: 8px; }

:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }

/* ---------- Intro: lights, camera, action ---------- */
/* html[data-stage] = the step on screen (dark → lights → camera → action); html[data-fx] = its effect is playing.
   Each step: the word grows in and fades, then the effect runs. No attribute = the finished page. */
html[data-stage], html[data-stage] body { overflow: hidden; }
.intro { position: fixed; inset: 0; z-index: 200; pointer-events: none; display: none; --roll: 1.5s; }
html[data-stage] .intro { display: block; }

/* the page behind is out of focus until the camera rolls past */
.intro__focus { position: absolute; inset: 0; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: rgba(var(--bg-rgb), .22); }
html[data-stage="camera"][data-fx] .intro__focus { animation: focusWipe var(--roll) cubic-bezier(.45, 0, .55, 1) forwards; }
html[data-stage="action"] .intro__focus { display: none; }
@keyframes focusWipe { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }

/* LIGHTS: the black screen catches, flickers and burns white, then clears */
.intro__screen { position: absolute; inset: 0; background: #0b0b0a; }
html[data-stage="lights"][data-fx] .intro__screen { animation: lightsWhite 1.2s forwards; }
html[data-stage="camera"] .intro__screen, html[data-stage="action"] .intro__screen { opacity: 0; }
@keyframes lightsWhite {
  0% { background: #0b0b0a; } 10% { background: #fff; } 16% { background: #0b0b0a; }
  28%, 55% { background: #fff; opacity: 1; } 100% { background: #fff; opacity: 0; }
}

/* the word for each step: small → big, then gone */
.intro__word {
  position: absolute; left: 50%; top: 50%; margin: 0; opacity: 0; transform: translate(-50%, -50%) scale(.55);
  font-family: var(--f-display); font-stretch: 75%; font-weight: 800; line-height: 1;
  font-size: clamp(64px, 15vw, 220px); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; color: var(--text);
}
html[data-stage="lights"] .intro__word { color: #f3f1ec; }
.intro__word.is-on { animation: wordIn 1s cubic-bezier(.2, .7, .1, 1) forwards; }
@keyframes wordIn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.55); }
  35% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  72% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.22); }
}

/* CAMERA: a camera on a dolly rolls left to right, focus follows it */
.intro__camera { position: absolute; left: 0; top: 50%; width: clamp(150px, 18vw, 250px); transform: translate(-110%, -50%); display: none; }
html[data-stage="camera"] .intro__camera { display: block; }
html[data-stage="camera"][data-fx] .intro__camera { animation: camRoll var(--roll) cubic-bezier(.45, 0, .55, 1) forwards; }
.intro__camera .reel { animation: reelSpin .55s linear infinite; }
@keyframes camRoll { to { transform: translate(100vw, -50%); } }
@keyframes reelSpin { to { transform: rotate(360deg); } }

/* ACTION: the slate cuts, with a flash */
.intro__clap { position: absolute; left: 50%; top: 50%; width: clamp(140px, 16vw, 220px); transform: translate(-50%, -50%); display: none; }
.intro__clap-top { transform-origin: 20px 40px; transform: rotate(-26deg); }
html[data-stage="action"][data-fx] .intro__clap { display: block; animation: clapPop .95s cubic-bezier(.2, .7, .1, 1) forwards; }
html[data-stage="action"][data-fx] .intro__clap-top { animation: clapCut .95s forwards; }
@keyframes clapPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  20%, 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); }
}
@keyframes clapCut { 0%, 30% { transform: rotate(-26deg); } 42%, 100% { transform: rotate(0); } }
.intro__flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
html[data-stage="action"][data-fx] .intro__flash { animation: cutFlash .95s forwards; }
@keyframes cutFlash { 0%, 38% { opacity: 0; } 42% { opacity: .85; } 100% { opacity: 0; } }

/* "Tap for sound": a fingertip with a ripple, for the first 2s only; light on the black screen, ink once the lights come up
   (no blend modes here: any blending inside .intro switches off the focus blur below) */
.intro__tap {
  position: absolute; left: 50%; bottom: max(12vh, 64px); transform: translateX(-50%); margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 18px; color: #f3f1ec;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; white-space: nowrap;
  animation: tapIn .5s .15s both; transition: opacity .4s;
}
.intro__tap.is-gone { opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
html[data-stage="lights"][data-fx] .intro__tap { color: var(--text); }
html[data-stage="camera"] .intro__tap, html[data-stage="action"] .intro__tap { display: none; }
.intro__tap-dot { position: relative; width: 14px; height: 14px; border-radius: 50%; background: currentColor; animation: tapPress 1s ease-in-out infinite; }
.intro__tap-dot::before, .intro__tap-dot::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0;
  animation: tapRing 1s ease-out infinite;
}
.intro__tap-dot::after { animation-delay: .22s; }
@keyframes tapIn { from { opacity: 0; transform: translate(-50%, 8px); } }
@keyframes tapPress { 0%, 100% { transform: scale(1); } 18% { transform: scale(.72); } 36% { transform: scale(1); } }
@keyframes tapRing { 0%, 14% { opacity: 0; transform: scale(1); } 20% { opacity: .9; } 100% { opacity: 0; transform: scale(3.4); } }

.intro__skip {
  position: fixed; right: 20px; bottom: 20px; z-index: 210; display: none;
  border: 0; border-radius: 99px; padding: 9px 16px; cursor: pointer;
  background: rgba(var(--ink-rgb), .72); color: #f3f1ec; font-size: 13px; font-weight: 500;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.intro__skip:hover { background: #141413; }
html[data-stage] .intro__skip { display: block; }   /* only while the intro runs */

/* what the steps reveal: the viewfinder with the camera, the buttons after the cut */
.hud { transition: opacity .8s .4s var(--ease), transform .8s .4s var(--ease); }
html[data-stage="dark"] .hud, html[data-stage="lights"] .hud, html[data-stage="camera"]:not([data-fx]) .hud { opacity: 0; transform: scale(1.08); }
.hero__actions { transition: opacity .6s var(--ease), transform .6s var(--ease); }
html[data-stage] .hero__actions { opacity: 0; transform: translateY(14px); pointer-events: none; }


/* ---------- Grain ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 120; pointer-events: none; opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(6) infinite;
}
/* touch screens and reduced motion: the grain stays as a still texture; animating a full-screen layer costs phones CPU and battery */
@media (hover: none), (max-width: 760px), (prefers-reduced-motion: reduce) { .grain { animation: none; inset: 0; } }
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -5%); }
  60% { transform: translate(-6%, -2%); } 80% { transform: translate(5%, 4%); } 100% { transform: translate(0, 0); }
}

/* ---------- Viewfinder cursor ---------- */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cursor {
    display: block; position: fixed; left: 0; top: 0; z-index: 190; pointer-events: none;
    width: 34px; height: 34px; margin: -17px 0 0 -17px;
    transition: width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease);
  }
  .cursor span { position: absolute; width: 9px; height: 9px; border-color: var(--sun); border-style: solid; border-width: 0; }
  .cursor span:nth-child(1) { left: 0; top: 0; border-left-width: 1.5px; border-top-width: 1.5px; }
  .cursor span:nth-child(2) { right: 0; top: 0; border-right-width: 1.5px; border-top-width: 1.5px; }
  .cursor span:nth-child(3) { left: 0; bottom: 0; border-left-width: 1.5px; border-bottom-width: 1.5px; }
  .cursor span:nth-child(4) { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; }
  .cursor.is-hover { width: 58px; height: 58px; margin: -29px 0 0 -29px; }
  .cursor.is-hover span { border-color: var(--text); }
}

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px var(--gutter);
  transition: background .4s, padding .4s, backdrop-filter .4s;
}
.nav.is-scrolled { background: rgba(var(--bg-rgb), .84); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; text-decoration: none; }
/* The supplied coloured emblem pairs with the existing wordmark. */
.brand { gap: 10px; }
.brand__logo { display: block; height: 46px; width: auto; }
.brand__logo--on-dark { display: none; }
.credits__brand .brand__logo { height: 68px; }
/* centre links sit in a glass pill, centred on the page whatever the side widths */
.nav__pill {
  position: absolute; left: 50%; transform: translateX(-50%);
  padding: 5px; border-radius: 99px; border: 1px solid rgba(var(--ink-rgb), .1);
  background: rgba(255, 255, 255, .38); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 6px 24px -14px rgba(var(--shadow-rgb), .35);
}
.nav__links { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; align-items: center; }
.nav__links a {
  display: block; padding: 8px 18px; border-radius: 99px; text-decoration: none;
  font-size: 14px; font-weight: 500; letter-spacing: .02em; color: var(--text-dim); transition: color .2s, background .25s, box-shadow .25s;
}
.nav__links a:hover { color: var(--text); background: rgba(255, 255, 255, .5); }
.nav__links a.is-on { color: var(--text); background: var(--surface); box-shadow: 0 1px 3px rgba(var(--shadow-rgb), .12); }
.nav__end { display: flex; align-items: center; gap: 18px; }
.nav__cta { text-decoration: none; font-size: 14px; color: var(--on-sun); background: var(--sun); padding: 10px 20px; border-radius: 99px; font-weight: 500; transition: background .2s; }
.nav__cta:hover { background: var(--sun-hover); }
.footage { font-family: var(--f-mono); font-size: 12px; color: var(--text-dim); letter-spacing: .1em; min-width: 76px; text-align: right; }
.footage__label { color: var(--rec); margin-right: 6px; }
@media (max-width: 960px) { .footage { display: none; } }

/* phones: two lines open a white panel that slides in from the right */
.nav__burger, .mnav__close { display: none; position: relative; width: 44px; height: 44px; border: 0; padding: 0; background: none; cursor: pointer; color: var(--text); }
.nav__burger span, .mnav__close span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: currentColor; border-radius: 2px; }
/* the staggered bars (like Font Awesome bars-staggered): long, offset to the right, long */
.nav__burger span { height: 2.5px; width: 19px; right: auto; }
.nav__burger span:nth-child(1) { top: 15px; }
.nav__burger span:nth-child(2) { top: 20.75px; left: 14px; }
.nav__burger span:nth-child(3) { top: 26.5px; }
.mnav__close span { top: 21px; }
.mnav__close span:first-child { transform: rotate(45deg); }
.mnav__close span:last-child { transform: rotate(-45deg); }

.mnav {
  position: fixed; inset: 0; z-index: 150; display: none; flex-direction: column;
  height: 100vh; height: 100dvh; padding: 12px var(--gutter) max(22px, env(safe-area-inset-bottom));
  background: var(--surface); transform: translateX(100%); transition: transform .5s cubic-bezier(.7, 0, .2, 1), visibility 0s .5s; visibility: hidden;
}
.mnav.is-open { transform: none; visibility: visible; transition: transform .5s cubic-bezier(.7, 0, .2, 1); }
.mnav__top { display: flex; align-items: center; justify-content: space-between; margin-right: -10px; }
.mnav nav { margin-top: 14px; }
.mnav__links { list-style: none; margin: 0; padding: 0; }
.mnav__links li + li { border-top: 1px solid var(--line); }
.mnav__links a {
  display: flex; align-items: center; gap: 14px; padding: 13px 0; text-decoration: none; color: var(--text);
  font-family: var(--f-display); font-stretch: 75%; font-weight: 700; font-size: 24px; line-height: 1; text-transform: uppercase; letter-spacing: .01em;
  opacity: 0; transform: translateX(20px); transition: opacity .4s, transform .5s var(--ease), color .2s;
}
.mnav__links a::after { content: "→"; margin-left: auto; font-family: var(--f-body); font-size: 18px; font-weight: 400; color: var(--text-dim); transition: transform .25s, color .2s; }
.mnav__no { font-family: var(--f-mono); font-size: 10px; font-weight: 400; letter-spacing: .14em; color: var(--sun); width: 18px; }
.mnav__links a:active, .mnav__links a:hover { color: var(--sun); }
.mnav__links a:active::after, .mnav__links a:hover::after { color: var(--sun); transform: translateX(4px); }
.mnav.is-open .mnav__links a { opacity: 1; transform: none; }
.mnav.is-open .mnav__links li:nth-child(1) a { transition-delay: .16s; }
.mnav.is-open .mnav__links li:nth-child(2) a { transition-delay: .21s; }
.mnav.is-open .mnav__links li:nth-child(3) a { transition-delay: .26s; }
.mnav.is-open .mnav__links li:nth-child(4) a { transition-delay: .31s; }
.mnav.is-open .mnav__links li:nth-child(5) a { transition-delay: .36s; }
.mnav.is-open .mnav__links li:nth-child(6) a { transition-delay: .41s; }
/* a still from a set fills the middle; it gives way first on short screens */
.mnav__still { position: relative; flex: 1 1 auto; min-height: 0; margin: 16px 0 18px; border-radius: 14px; overflow: hidden; background: #121211; }
.mnav__still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.mnav__still figcaption {
  position: absolute; left: 14px; right: 14px; bottom: 12px; color: rgba(243, 241, 236, .85);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
}
.mnav__foot { display: grid; gap: 18px; }
.mnav__cta { display: block; text-align: center; text-decoration: none; color: var(--on-sun); background: var(--sun); padding: 14px 20px; border-radius: 99px; font-size: 15px; font-weight: 500; }
.mnav__cta:active { background: var(--sun-hover); }
.mnav__people { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mnav__person { display: grid; gap: 3px; font-size: 13px; align-content: start; }
.mnav__person b { font-weight: 600; color: var(--text); }
.mnav__person a { color: var(--text-dim); text-decoration: none; }
.mnav__person span { display: flex; gap: 12px; margin-top: 3px; }
.mnav__person span a { color: var(--text); font-size: 12px; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
html.mnav-open, html.mnav-open body { overflow: hidden; }
html.mnav-open .fontpick { display: none; }

/* WhatsApp: the one floating button, bottom right */
.wa {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 140;
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #25d366; color: #fff;
  box-shadow: 0 10px 26px -10px rgba(var(--shadow-rgb), .45); transition: transform .25s var(--ease), box-shadow .25s;
}
.wa svg { width: 28px; height: 28px; fill: currentColor; }
.wa:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(var(--shadow-rgb), .5); }
html[data-stage] .wa, html.mnav-open .wa { display: none; }
@media (min-width: 761px) { .wa { right: 24px; bottom: 24px; } }   /* the temporary font switcher would sit over the panel */

/* six links no longer fit beside the logo below 1025px: tablets get the slide-in menu too */
@media (max-width: 1024px) {
  .nav__pill, .nav__cta { display: none; }
  .nav__burger, .mnav__close { display: block; }
  .nav__end { margin-right: -10px; }
  .mnav { display: flex; }
}
@media (max-width: 760px) {
  .nav { padding-top: 10px; padding-bottom: 10px; }
  .nav.is-scrolled { padding-top: 8px; padding-bottom: 8px; }
  .brand__logo { height: 40px; }
}
@media (max-width: 760px) and (max-height: 620px) { .mnav__still { display: none; } .mnav__foot { margin-top: auto; } }
@media (prefers-reduced-motion: reduce) { .mnav, .mnav.is-open, .mnav__links a { transition: none; } }

/* ---------- Buttons / chips ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 14px 24px; border-radius: 99px; text-decoration: none; cursor: pointer;
  font-size: 15px; font-weight: 500; letter-spacing: .02em; border: 1px solid transparent;
  transition: transform .25s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn--sun { background: var(--sun); color: var(--on-sun); box-shadow: 0 10px 30px -12px rgba(var(--sun-rgb), .55); }
.btn--sun:hover { background: var(--sun-hover); box-shadow: 0 14px 36px -12px rgba(var(--sun-rgb), .7); }
.btn--ghost { background: transparent; border-color: rgba(var(--ink-rgb), .25); color: var(--text); }
.btn--ghost:hover { border-color: var(--text); }
.btn--sm { padding: 9px 16px; font-size: 13px; }
.chip {
  background: transparent; border: 1px solid var(--line); color: var(--text-dim);
  padding: 8px 16px; border-radius: 99px; cursor: pointer; font-size: 14px; transition: all .2s;
}
.chip:hover { color: var(--text); border-color: rgba(var(--ink-rgb), .4); }
.chip.is-on { background: var(--text); color: var(--bg); border-color: var(--text); }

/* ---------- Sluglines ---------- */
.slug {
  font-family: var(--f-mono); font-weight: 500; font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: .12em; text-transform: uppercase; color: var(--sun);
  margin: 0 0 clamp(10px, 2svh, 22px); min-height: 1.6em;
}
.slug::after { content: "▍"; animation: blink 1s steps(1) infinite; margin-left: 2px; color: var(--text-dim); }
.slug.is-typed::after { animation: none; opacity: 0; }
@keyframes blink { 50% { opacity: 0; } }

/* below the fold: the browser skips each section's layout until it's near the screen. Not the forms: this clips to the section, and their dropdowns can reach past it */
main > section:not(:first-of-type):not(.strip):not(.pitch):not(.sl-request), .credits { content-visibility: auto; contain-intrinsic-size: auto 100svh; }
@media (max-width: 760px) { main > section:not(:first-of-type):not(.strip):not(.pitch):not(.sl-request), .credits { contain-intrinsic-size: auto 900px; } }

html.cv-off main > section, html.cv-off .credits { content-visibility: visible !important; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  padding: 128px var(--gutter) 72px; overflow: hidden; isolation: isolate;   /* clears the HUD top row */
}
.hero__photo { position: absolute; inset: 0; z-index: -2; background: var(--hero-sky); }   /* the photo's pale sky, shown while it loads */
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
@media (max-width: 760px) {
  /* phone: a big photo behind the text, sitting low so its people land below the buttons; the veil in themes.css keeps the text readable */
  .hero__photo img { position: absolute; left: 0; top: 22%; height: 90%; object-position: 56% 50%;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%); mask-image: linear-gradient(to bottom, transparent, #000 14%); }
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--bg-rgb), .94), rgba(var(--bg-rgb), .88) 32%, rgba(var(--bg-rgb), .45) 50%, rgba(var(--bg-rgb), 0) 68%),
              linear-gradient(to bottom, transparent 88%, var(--bg));
}
.hero__content { max-width: 980px; position: relative; }
.hero__title {
  font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: var(--display-wght);
  font-size: calc(clamp(42px, min(8.4vw, 12.5svh), 150px) * var(--title-scale, 1)); line-height: .92; letter-spacing: -.01em;
  margin: 0 0 clamp(18px, 3svh, 30px);
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__title .line > span { display: inline-block; transform: translateY(110%); transition: transform 1.2s var(--ease); }
.hero__title .line:nth-child(2) > span { transition-delay: .12s; }
.hero__title .line:nth-child(3) > span { transition-delay: .24s; }
body.is-open .hero__title .line > span { transform: none; }
.hero__title em { font-style: normal; }
.hero__title .line:first-child { font-weight: 300; white-space: nowrap; }   /* light lead-in, bold show name */
/* the show name cycles; all titles stay in the heading for search */
.hero__title .line > .cycle { display: inline-grid; }
.cycle__item {
  grid-area: 1 / 1; white-space: nowrap;
  opacity: 0; transform: translateY(45%); transition: opacity .45s var(--ease), transform .7s var(--ease);
}
.cycle__item.is-on { opacity: 1; transform: none; }
.cycle__item.is-out { opacity: 0; transform: translateY(-45%); }
.hero__meta {
  display: flex; align-items: center; gap: 10px; margin: 0 0 clamp(14px, 2.6svh, 24px); min-height: 1.4em;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); transition: opacity .3s;
}
.hero__meta::before { content: ""; width: 7px; height: 7px; background: var(--sun); flex: none; }
.hero__meta.is-swap { opacity: 0; }
.hero__proof { margin: clamp(16px, 3svh, 28px) 0 0; max-width: 560px; font-size: 13px; line-height: 1.6; color: var(--text-dim); }
.hero__proof span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text); margin-right: 8px; }
.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; }
@media (max-width: 640px) { .hero__meta { font-size: 10.5px; letter-spacing: .06em; } .hero__proof { font-size: 12px; } }
.hero__lede { max-width: 560px; font-size: clamp(16px, 1.5vw, 19px); color: var(--text-dim); margin: 0 0 clamp(20px, 4svh, 36px); }
.hero__lede strong { color: var(--text); font-weight: 500; }
.hero__lede-short { display: none; }
@media (min-width: 761px) and (max-height: 620px) { .hero__lede-more { display: none; } .hero__lede-short { display: inline; } }   /* short laptops: the shorter second sentence */
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero .btn--ghost { background: rgba(255, 255, 255, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* HUD */
.hud { position: absolute; inset: 88px var(--gutter) 40px; pointer-events: none; font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; color: rgba(var(--ink-rgb), .62); }
.hud__corner { position: absolute; width: 26px; height: 26px; border: 0 solid rgba(var(--ink-rgb), .4); }
.hud__corner--tl { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; }
.hud__corner--tr { right: 0; top: 0; border-right-width: 1px; border-top-width: 1px; }
.hud__corner--bl { left: 0; bottom: 0; border-left-width: 1px; border-bottom-width: 1px; }
.hud__corner--br { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }
.hud__top, .hud__bottom { position: absolute; left: 40px; right: 40px; display: flex; justify-content: space-between; gap: 12px; }
.hud__top { top: 6px; }
.hud__bottom { bottom: 6px; justify-content: flex-start; gap: 26px; }
.hud__rec { color: var(--text); display: inline-flex; align-items: center; gap: 8px; }
.hud__rec i { width: 9px; height: 9px; border-radius: 50%; background: var(--rec); box-shadow: 0 0 10px var(--rec); animation: blink 1.4s steps(1) infinite; }
.hud__batt { margin-left: auto; width: 26px; height: 12px; border: 1px solid currentColor; position: relative; }
.hud__batt::after { content: ""; position: absolute; right: -4px; top: 3px; width: 3px; height: 4px; background: currentColor; }
.hud__batt i { position: absolute; inset: 2px; right: 30%; background: currentColor; }
.hud__center { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px; }
.hud { contain: layout style; }   /* the timecode ticking doesn't re-lay out the page */
.hud__center::before, .hud__center::after { content: ""; position: absolute; background: rgba(var(--ink-rgb), .35); }
.hud__center::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.hud__center::after { top: 50%; left: 0; right: 0; height: 1px; }
/* tablets: the same breathing room under the nav */
@media (min-width: 641px) and (max-width: 1024px) {
  .hero { padding-top: 156px; }
  .hud { top: 108px; }
}
@media (max-width: 640px) {
  /* phones: the text starts under the nav, over the full-screen photo */
  .hero { flex-direction: column; align-items: stretch; padding-top: 146px; padding-bottom: 96px; }
  .hero__title { font-size: calc(clamp(44px, 13.6vw, 64px) * var(--title-scale, 1)); }
  .hero__lede { font-size: 16px; }
  .hero__lede-more { display: none; }   /* phones get a shorter second sentence */
  .hero__lede-short { display: inline; }
  .hud { inset: 100px 10px 24px; font-size: 10px; }   /* a clear gap under the nav */
  .hud__top, .hud__bottom { left: 16px; right: 16px; }
  .hud__bottom span:nth-child(n+3):not(.hud__batt) { display: none; }
  .hud__center { display: none; }
}

/* ---------- Film strip marquee ---------- */
.strip {
  --hole: var(--bg);
  position: relative; background: var(--prop); overflow: hidden;
  padding: 22px 0; transform: rotate(-1.6deg); margin: -10px -20px 0; z-index: 2;
  box-shadow: 0 18px 40px -18px rgba(var(--shadow-rgb), .35);
}
.strip::before, .strip::after {
  content: ""; position: absolute; left: 0; right: 0; height: 10px;
  background: repeating-linear-gradient(90deg, transparent 0 14px, var(--hole) 14px 26px);
  border-radius: 2px;
}
.strip::before { top: 6px; }
.strip::after { bottom: 6px; }
.strip__track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.strip:hover .strip__track { animation-play-state: paused; }
.strip__row { display: flex; list-style: none; margin: 0; padding: 0; }
.strip__row li {
  font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: var(--display-wght); font-size: clamp(20px, 2.6vw, 32px); white-space: nowrap; text-transform: uppercase; letter-spacing: .04em;
  padding: 0 34px; color: var(--on-dark); display: flex; align-items: center; gap: 34px;
}
.strip__row li::after { content: ""; width: 7px; height: 7px; background: var(--sun); }
/* every platform on the same tile: an ice-blue chip on the film, each logo in deep navy so they read as one set */
.platform-logo { display: flex; align-items: center; justify-content: center; height: clamp(38px, 4.4vw, 50px); min-width: clamp(96px, 9vw, 124px); padding: 0 clamp(14px, 1.6vw, 20px); border-radius: 10px; background: linear-gradient(180deg, #e9effc, #c9d6f2); border: 1px solid #fff; box-shadow: inset 0 1px 0 #fff, 0 6px 16px -8px rgba(0, 0, 0, .6); transition: transform .3s, box-shadow .3s; }
.platform-logo img { display: block; height: 42%; width: auto; filter: brightness(0) saturate(100%) invert(9%) sepia(40%) saturate(2400%) hue-rotate(215deg); opacity: 1; transition: opacity .3s; }
.strip:hover .platform-logo { box-shadow: inset 0 1px 0 #fff, 0 8px 20px -8px rgba(0, 0, 0, .7); }
.strip:hover .platform-logo img { opacity: 1; }
.platform-logo--zee5 img { height: 62%; }
.platform-logo--jio img, .platform-logo--mx img { height: 48%; }
.platform-logo--minitv img { height: 56%; }
.platform-logo--sonyliv img { height: 74%; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Icons: line drawings in the accent colour, inside a thin ring (drawn inline, no icon library) ---------- */
.ico { display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(var(--sun-rgb), .55); color: var(--sun); background: rgba(var(--sun-rgb), .06); }
.ico svg { width: 22px; height: 22px; }
.ico--sm { width: 36px; height: 36px; }
.ico--sm svg { width: 18px; height: 18px; }

/* ---------- Hero: the client's sub-line ---------- */
.hero__sub { margin: 0 0 clamp(8px, 1.4svh, 14px); font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: var(--display-wght); font-size: clamp(20px, min(2.2vw, 3.6svh), 30px); line-height: 1.15; color: var(--sun); }
.hero__title em { color: var(--sun); }

/* ---------- Experience: heading plus four stat cards ---------- */
.xp { padding-bottom: clamp(20px, 4svh, 48px); }
.xp .numbers { max-width: none; margin: 0; padding: 0; }
.xp .numbers { gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* phones: the two hero buttons stay on one row; smaller service icons; a tighter FAQ list */
@media (max-width: 760px) {
  .hero__actions { flex-wrap: nowrap; gap: 8px; }
  .hero__actions .btn { padding: 12px 16px; font-size: 14px; white-space: nowrap; }
  .ico--sm { width: 28px; height: 28px; }
  .ico--sm svg { width: 15px; height: 15px; }
  .faq details summary { padding-top: 16px; padding-bottom: 16px; font-size: 19px; }
  .faq details p, .faq details ul { font-size: 14.5px; }
}
@media (min-width: 761px) and (max-height: 660px) { .xp { padding-top: 48px; } .xp .section__head h2 br { display: none; } .xp .section__head { margin-bottom: 14px; } }

/* ---------- Numbers ---------- */
.numbers {
  display: grid; grid-template-columns: repeat(4, 1fr); max-width: var(--max); margin: 0 auto;
  padding: clamp(70px, 10vw, 130px) var(--gutter) 0; gap: 24px;
}
/* the stats band: four columns split by thin rules; the number is gold with a light that sweeps across it now and then */
.numbers__item { position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(10px, 1.8svh, 18px); min-height: 0; padding: clamp(16px, 3svh, 30px) clamp(14px, 2vw, 30px); border-left: 1px solid var(--line); transition: background .5s; }
.numbers__item:first-child { border-left: 0; padding-left: 0; }
.numbers__item:hover { background: radial-gradient(80% 70% at 30% 100%, rgba(var(--sun-rgb), .08), transparent 70%); }
.numbers__item .ico { position: absolute; top: clamp(14px, 2.6svh, 26px); right: clamp(10px, 1.6vw, 22px); width: 34px; height: 34px; border-color: rgba(var(--sun-rgb), .35); background: none; }
.numbers__item .ico svg { width: 17px; height: 17px; }
.numbers__n {
  display: block; font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: 800; font-size: clamp(54px, min(7.2vw, 13svh), 120px); line-height: .9; letter-spacing: -.03em;
  background: linear-gradient(100deg, var(--sun) 0%, var(--sun-hover) 40%, rgba(255, 255, 255, .95) 50%, var(--sun-hover) 60%, var(--sun) 100%) 100% 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: statShine 7s ease-in-out infinite;
}
.numbers__item:nth-child(2) .numbers__n { animation-delay: .8s; }
.numbers__item:nth-child(3) .numbers__n { animation-delay: 1.6s; }
.numbers__item:nth-child(4) .numbers__n { animation-delay: 2.4s; }
@keyframes statShine { 0%, 70% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.numbers__l { display: flex; align-items: baseline; gap: 10px; max-width: 220px; font-family: var(--f-mono); font-size: 11px; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
.numbers__l::before { content: ""; flex: none; width: 18px; height: 1px; background: var(--sun); transform: translateY(-3px); }
.numbers__l em { font-style: normal; color: var(--text); }
@media (prefers-reduced-motion: reduce) { .numbers__n { animation: none; background-position: 0 0; } }
/* phones: two by two */
@media (max-width: 760px) {
  .numbers { grid-template-columns: 1fr 1fr; }
  .numbers__item { min-height: 0; padding: 16px 0 16px 14px; }
  .numbers__item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .numbers__item:nth-child(n+3) { border-top: 1px solid var(--line); }
  .numbers__item .ico { top: 14px; right: 6px; width: 28px; height: 28px; }
  .numbers__item .ico svg { width: 14px; height: 14px; }
  .numbers__n { font-size: clamp(40px, 12vw, 56px); }
  .numbers__l { font-size: 10px; letter-spacing: .08em; }
  .numbers__l::before { width: 12px; }
}
@media (max-width: 760px) { .numbers { grid-template-columns: 1fr 1fr; } }

/* ---------- Sections ---------- */
.section { max-width: var(--max); margin: 0 auto; padding: clamp(64px, 10svh, 120px) var(--gutter) 0; position: relative; }
.section__head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: end; margin-bottom: clamp(20px, 4svh, 48px); }
.section__head h2 { font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: var(--display-wght); font-size: clamp(38px, min(6.6vw, 9svh), 104px); line-height: .95; letter-spacing: -.015em; margin: 0; }
.section__head h2 em { font-style: normal; color: var(--text-dim); }
.section__head p { margin: 0; color: var(--text-dim); max-width: 440px; }
@media (max-width: 760px) {
  .section__head { grid-template-columns: 1fr; gap: 10px; }
  .section__head p { font-size: 14.5px; line-height: 1.5; }
}

.reveal { opacity: 0; transform: translateY(36px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Services: a numbered list on the left, the chosen service in a large panel on the right ---------- */
.svc__intro { display: grid; gap: 14px; }
.svc__formats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.svc__formats li { padding: 6px 14px; border: 1px solid var(--line); border-radius: 99px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.svc__grid { display: grid; grid-template-columns: minmax(260px, 5fr) 7fr; grid-template-rows: repeat(6, auto) 1fr; column-gap: clamp(28px, 5vw, 80px); }
.svc__item { display: contents; }
.svc__tab {
  grid-column: 1; position: relative; display: flex; align-items: baseline; gap: 16px; width: 100%; padding: clamp(11px, 2svh, 18px) 0; border: 0; border-top: 1px solid var(--line);
  background: none; cursor: pointer; text-align: left; color: var(--text-dim); transition: color .3s;
}
.svc__item:nth-child(6) .svc__tab { border-bottom: 1px solid var(--line); }
.svc__no { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; transition: color .3s; }
.svc__tab { align-items: center; }
.svc__tab .ico { transition: background .3s, border-color .3s; }
.svc__item.is-on .svc__tab .ico { background: var(--sun); border-color: var(--sun); color: var(--on-sun); }
.svc__name { font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: var(--display-wght); font-size: clamp(21px, min(2.3vw, 3.9svh), 34px); line-height: 1; letter-spacing: -.01em; transition: transform .45s var(--ease); }
.svc__bar { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--sun); transform: scaleX(0); transform-origin: left; }
.svc__tab:hover { color: var(--text); }
.svc__tab:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }
.svc__item.is-on .svc__tab { color: var(--text); }
.svc__item.is-on .svc__no { color: var(--sun); }
.svc__item.is-on .svc__name { transform: translateX(10px); }
.svc__item.is-on .svc__bar { transform: scaleX(1); transition: transform .5s var(--ease); }
/* while the list plays on its own, the bar fills over the time the service is shown */
.svc.is-playing .svc__item.is-on .svc__bar { animation: svcFill var(--svc-time, 6s) linear forwards; }
@keyframes svcFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.svc__panel {
  grid-column: 2; grid-row: 1 / -1; position: relative; overflow: hidden; align-self: stretch; display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(22px, 4svh, 44px) clamp(22px, 3vw, 44px); border-radius: 6px; background: var(--surface); border: 1px solid var(--line);
  opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s .45s;
}
.svc__item.is-on .svc__panel { opacity: 1; visibility: visible; transition: opacity .5s; }
.svc__ghost {
  position: absolute; right: -.04em; bottom: -.2em; font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: 800; font-size: clamp(160px, 30svh, 300px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(var(--sun-rgb), .5); pointer-events: none; transform: translateY(24px); transition: transform .9s var(--ease);
}
.svc__item.is-on .svc__ghost { transform: none; }
.svc__panel > :not(.svc__ghost) { position: relative; opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .6s var(--ease); }
.svc__item.is-on .svc__panel > :not(.svc__ghost) { opacity: 1; transform: none; }
.svc__item.is-on .svc__lede { transition-delay: .06s; }
.svc__item.is-on .svc__label, .svc__item.is-on .svc__covers { transition-delay: .12s; }
.svc__item.is-on .svc__cta { transition-delay: .18s; }
.svc__title { margin: 0 0 clamp(8px, 1.6svh, 14px); font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: var(--display-wght); font-size: clamp(30px, min(3.6vw, 6svh), 56px); line-height: .95; letter-spacing: -.015em; }
.svc__lede { margin: 0 0 clamp(16px, 3svh, 28px); max-width: 34ch; font-size: clamp(16px, min(1.5vw, 2.6svh), 21px); line-height: 1.45; color: var(--text); }
.svc__label { margin: 0 0 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); }
.svc__covers { margin: 0 0 clamp(18px, 3.4svh, 30px); padding: 0; list-style: none; display: grid; gap: clamp(6px, 1.1svh, 10px); max-width: 420px; }
.svc__covers li { display: flex; align-items: baseline; gap: 12px; font-size: 15px; line-height: 1.4; color: var(--text-muted); }
.svc__covers li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--sun); transform: translateY(-2px); }
.svc__cta { margin-top: auto; }
.svc { padding-bottom: clamp(40px, 7svh, 88px); }

/* short laptops: one-line heading, tighter list */
@media (min-width: 861px) and (max-height: 660px) {
  .svc { padding-bottom: 12px; }
  .svc .section__head h2 br { display: none; }
  .svc .section__head { margin-bottom: 14px; }
  .svc__tab { padding: 9px 0; }
  .svc__panel { padding: 18px 26px; }
  .svc__lede { margin-bottom: 12px; }
  .svc__covers { margin-bottom: 14px; gap: 4px; }
}
/* phones and small tablets: each service opens under its name */
@media (max-width: 860px) {
  .svc__grid { display: block; }
  .svc__item { display: block; }
  .svc__item:last-child .svc__tab { border-bottom: 1px solid var(--line); }
  .svc__item:nth-child(6) .svc__tab { border-bottom: 0; }
  .svc__item:last-child.is-on .svc__tab { border-bottom: 0; }
  .svc__name { font-size: 22px; }
  .svc__item.is-on .svc__name { transform: none; }
  .svc__tab::after { content: ""; margin-left: auto; width: 10px; height: 10px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .3s; }
  .svc__item.is-on .svc__tab::after { transform: translateY(2px) rotate(-135deg); }
  .svc__panel { display: none; padding: 20px; margin-bottom: 14px; }
  .svc__item.is-on .svc__panel { display: flex; }
  .svc__ghost { font-size: 140px; }
  .svc__title { display: none; }
  .svc__lede { font-size: 16px; }
  .svc__covers li { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .svc__panel, .svc__panel > *, .svc__ghost, .svc__name, .svc__bar { transition: none !important; }
  .svc.is-playing .svc__item.is-on .svc__bar { animation: none; }
}

/* ---------- Rent / Buy switch (the Skyora Lights request form) ---------- */
.mode { display: inline-flex; padding: 4px; gap: 2px; border-radius: 99px; border: 1px solid rgba(var(--ink-rgb), .14); background: rgba(255, 255, 255, .6); }
.mode button {
  border: 0; cursor: pointer; padding: 8px 22px; border-radius: 99px; background: transparent; color: var(--text-dim);
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; transition: background .25s, color .25s;
}
.mode button:hover { color: var(--text); }
.mode button[aria-checked="true"] { background: var(--text); color: var(--surface); }
.mode button:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }

/* ---------- Why choose Skyora: a dark sound stage, six lamps across the top, one beam on one reason ---------- */
.why { padding-bottom: clamp(40px, 7svh, 88px); }
.why__stage {
  --bx: 8.33%;   /* the lit lamp's centre, set by the script */
  position: relative; overflow: hidden; isolation: isolate; height: clamp(380px, 54svh, 540px); border-radius: 14px;
  background: radial-gradient(120% 80% at 50% 110%, #1d1a15, #0b0a09 60%); color: #f4efe6;
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
/* the lighting bar and its six lamps */
.why__lamps { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(6, 1fr); padding-top: 14px; }
.why__lamps::before { content: ""; position: absolute; left: 3%; right: 3%; top: 22px; height: 4px; border-radius: 2px; background: linear-gradient(#3a352d, #1f1c17); box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
.why__lamp { position: relative; display: grid; justify-items: center; gap: 10px; padding: 0 4px 6px; border: 0; background: none; color: rgba(244, 239, 230, .5); cursor: pointer; transition: color .3s; }
.why__bulb { position: relative; width: 30px; height: 26px; margin-top: 4px; border-radius: 6px 6px 14px 14px; background: linear-gradient(#2c2822, #15130f); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: box-shadow .4s; }
.why__bulb::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 3px; height: 6px; border-radius: 50%; background: #3b362e; transition: background .3s, box-shadow .4s; }
.why__tag { font: 500 10.5px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; text-align: center; line-height: 1.3; }
.why__lamp:hover { color: #f4efe6; }
.why__lamp:hover .why__bulb::after { background: #6d6252; }
.why__lamp[aria-selected="true"] { color: #fff; }
.why__lamp[aria-selected="true"] .why__bulb::after { background: #fff7e6; box-shadow: 0 0 10px 3px rgba(255, 236, 200, .9), 0 0 30px 8px rgba(var(--sun-rgb), .55); }
.why__lamp:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; border-radius: 6px; }
/* the beam: from the lit lamp down to a pool of light in the middle of the floor */
.why__beam {
  position: absolute; z-index: 1; left: 0; right: 0; top: 44px; bottom: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(to bottom, rgba(255, 244, 222, .55), rgba(255, 226, 180, .2) 45%, rgba(var(--sun-rgb), .1) 80%, transparent);
  clip-path: polygon(calc(var(--bx) - 1.6%) 0, calc(var(--bx) + 1.6%) 0, 80% 100%, 20% 100%);
  filter: blur(10px); transition: clip-path .9s var(--ease);
  animation: whyFlicker 6s ease-in-out infinite;
}
@keyframes whyFlicker { 0%, 100% { opacity: .95; } 48% { opacity: 1; } 50% { opacity: .86; } 52% { opacity: 1; } }
.why__pool { position: absolute; z-index: 0; left: 15%; right: 15%; bottom: -12%; height: 42%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 236, 205, .32), rgba(var(--sun-rgb), .12) 55%, transparent); pointer-events: none; }
.why__stage.is-swing .why__beam { opacity: .55; }
/* the reason on stage */
.why__shows { position: absolute; z-index: 2; inset: 96px 0 0; display: grid; place-items: center; padding: 0 clamp(18px, 4vw, 48px) clamp(20px, 5svh, 48px); text-align: center; }
.why__show { grid-area: 1 / 1; display: grid; justify-items: center; gap: clamp(8px, 1.6svh, 14px); opacity: 0; transform: translateY(16px) scale(.98); filter: blur(6px); transition: opacity .5s, transform .7s var(--ease), filter .5s; pointer-events: none; }
.why__show.is-on { opacity: 1; transform: none; filter: none; pointer-events: auto; transition-delay: .25s; }
.why__ico { width: 54px; height: 54px; border-color: rgba(255, 230, 190, .55); color: #ffe6b8; background: rgba(255, 230, 190, .08); }
.why__ico svg { width: 26px; height: 26px; }
@media (max-width: 760px), (max-height: 660px) { .why__ico { display: none; } }
.why__big { font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: 800; font-size: clamp(68px, min(13vw, 17svh), 170px); line-height: .85; letter-spacing: -.03em; color: #fff; text-shadow: 0 0 40px rgba(255, 230, 190, .35); }
.why__title { margin: 0; font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: var(--display-wght); font-size: clamp(22px, min(2.4vw, 4svh), 34px); line-height: 1.05; color: var(--sun); }
.why__line { margin: 0; max-width: 44ch; font-size: clamp(14px, 1.2vw, 16.5px); line-height: 1.55; color: rgba(244, 239, 230, .72); }
/* short laptops and phones */
@media (min-width: 761px) and (max-height: 660px) {
  .why { padding-top: 48px; padding-bottom: 20px; }
  .why .section__head h2 br { display: none; }
  .why .section__head { margin-bottom: 14px; }
  .why__stage { height: max(330px, 60svh); }
}
@media (max-width: 760px) {
  .why__stage { height: 440px; }
  .why__lamps { padding-top: 10px; }
  .why__lamps::before { top: 18px; }
  .why__bulb { width: 24px; height: 20px; }
  .why__tag { font-size: 8.5px; letter-spacing: .06em; }
  .why__beam { top: 36px; }
  .why__shows { inset: 84px 0 0; }
  .why__big { font-size: clamp(60px, 18vw, 84px); }
  .why__title { font-size: 22px; }
  .why__line { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .why__beam { animation: none; transition: none; } .why__show { transition: none; filter: none; } }

/* the request form opens over the page, on the same script paper as the pitch form */
.order {
  border: 0; padding: 0; margin: auto; background: transparent; color: var(--text); overflow: visible;
  width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
}
.order[open] { animation: orderIn .45s var(--ease); }
.order::backdrop { background: rgba(var(--ink-rgb), .5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
@keyframes orderIn { from { opacity: 0; transform: translateY(18px) rotate(-.4deg); } }
html.order-open, html.order-open body { overflow: hidden; }
.order__form { transform: none; max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; padding: clamp(22px, 3.4vw, 40px) clamp(22px, 3.4vw, 40px) clamp(18px, 3vw, 32px) clamp(40px, 5vw, 56px); }
.order__x { position: absolute; right: 8px; top: 8px; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; color: var(--text); }
.order__x span { position: absolute; left: 13px; right: 13px; top: 21px; height: 1.5px; background: currentColor; }
.order__x span:first-child { transform: rotate(45deg); }
.order__x span:last-child { transform: rotate(-45deg); }
.order__title { margin: 0 44px clamp(10px, 1.8svh, 16px) 0; font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: var(--display-wght); font-size: clamp(26px, 4.4vh, 36px); line-height: 1.02; }
.order .mode { margin-bottom: clamp(10px, 2svh, 18px); background: transparent; border-color: rgba(var(--ink-rgb), .25); }
.order__dates { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.order__dates .script__field { grid-template-columns: 1fr; gap: 2px; }
.order input[type="date"] { color-scheme: light; min-height: 34px; }
.order [hidden] { display: none; }
.order__check:has(iframe) { margin-top: 8px; }
.order__rig { margin: 0 0 clamp(8px, 1.6svh, 14px); padding: 10px 12px; border: 1px dashed rgba(var(--ink-rgb), .3); max-height: 150px; overflow: auto; }
.order__rig p { margin: 0 0 6px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
.order__rig ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 16px; font-size: 13px; line-height: 1.6; }
.order__rig b { color: var(--sun); font-weight: 600; }
@media (max-width: 520px) {
  .order { width: 100vw; max-width: 100vw; max-height: 100dvh; margin: auto 0 0; }
  .order__form { max-height: 92dvh; border-radius: 12px 12px 0 0; padding-left: 40px; }
  .order .script__field:not(.order__dates .script__field):not(.script__field--block) { grid-template-columns: 92px 1fr; }
}

/* ---------- Founders slates ---------- */
.founders, .set { padding-bottom: clamp(48px, 8svh, 96px); }
.founders::before, .set::before { content: ""; position: absolute; inset: 0 50%; margin: 0 -50vw; background: var(--sky); z-index: -1; }
.founders, .set { isolation: isolate; }
.founders__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); }
@media (max-width: 860px) {
  /* side-by-side swipe instead of stacking, so the section stays one screen tall */
  .founders__grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(86%, 440px); gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(var(--gutter) * -1); padding: 6px var(--gutter) 10px; scroll-padding: 0 var(--gutter);
  }
  .founders__grid::-webkit-scrollbar { display: none; }
  .founders .slate { scroll-snap-align: start; }
  .founders .slate.reveal { opacity: 1; transform: none; }   /* keep the next card's edge visible as a swipe hint */
}
.slate { perspective: 1600px; cursor: pointer; outline: none; }
.slate:focus-visible .slate__inner { outline: 2px solid var(--sun); outline-offset: 6px; }
/* both faces share one grid cell, so the card is as tall as its longer face and never clips */
.slate__inner { position: relative; display: grid; height: 100%; transform-style: preserve-3d; transition: transform 1s var(--ease); border-radius: 6px; }
.slate.is-flipped .slate__inner { transform: rotateY(180deg); }
.slate__face {
  grid-area: 1 / 1; position: relative; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 6px; overflow: hidden;
}
.slate__front { background: var(--surface); border: 1px solid var(--line); box-shadow: 0 24px 50px -32px rgba(var(--shadow-rgb), .35); display: flex; flex-direction: column; }
.slate__sticks {
  height: 46px; flex: none; transform-origin: 0 100%; transition: transform .45s var(--ease);
  background: repeating-linear-gradient(-55deg, var(--text) 0 26px, var(--surface) 26px 52px);
  border-bottom: 4px solid var(--surface);
}
.slate:hover .slate__sticks { transform: rotate(-7deg); }
.slate__body { padding: clamp(16px, 3svh, 28px) clamp(20px, 3vw, 36px); display: flex; flex-direction: column; flex: 1; gap: clamp(10px, 1.8svh, 18px); min-height: 0; }
.slate__row { display: flex; justify-content: space-between; gap: 12px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); border-bottom: 1px dashed var(--line); padding-bottom: 12px; }
.slate__row b { color: var(--sun); font-weight: 700; text-align: right; }
.slate__name { font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: var(--display-wght); font-size: clamp(56px, min(8vw, 11svh), 116px); line-height: .86; margin: 6px 0 4px; letter-spacing: -.02em; }
.slate__bio { margin: 0; color: var(--text-dim); font-size: 14.5px; line-height: 1.5; }
/* the portrait sits beside the name, hidden until the photo file loads */
.slate__photo:not(.is-ready) { display: none; }
.slate__head { display: grid; grid-template-columns: 1fr auto; gap: clamp(14px, 2vw, 26px); align-items: center; }
.slate__photo { position: relative; margin: 0; width: clamp(64px, min(9vw, 14svh), 136px); aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: var(--surface-2); box-shadow: 0 0 0 1px var(--line), 0 18px 34px -22px rgba(var(--shadow-rgb), .55); }
.slate__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.slate:hover .slate__photo img, .slate:focus-visible .slate__photo img { transform: scale(1.04); }
.founders:has(.slate__photo.is-ready) { padding-bottom: clamp(24px, 4svh, 48px); }   /* the portraits make the cards taller */
@media (min-width: 761px) and (max-height: 860px) { .slate__flip { display: none; } }   /* the heading already says to tap a card */
@media (min-width: 861px) and (max-height: 660px) { .founders { padding-top: 40px; padding-bottom: 12px; } .founders .section__head h2 br { display: none; } .founders .section__head { margin-bottom: 14px; } }
@media (max-width: 760px) { .slate__photo { width: 84px; } .slate__flip { display: none; } .slate__body { gap: 10px; } }
@media (min-width: 861px) and (max-height: 860px) { .slate__name br { display: none; } }   /* one-line name on short laptops */
.slate__grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); margin-top: auto; }
.slate__grid div { padding: 7px 12px; border-right: 1px solid var(--line); }
.slate__grid div:last-child { border-right: 0; }
.slate__grid span { display: block; font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); }
.slate__grid b { font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: var(--display-wght); font-size: 24px; line-height: 1.1; }
.slate__flip { font-family: var(--f-mono); font-size: 12px; color: var(--text-dim); letter-spacing: .1em; }
.slate__back {
  transform: rotateY(180deg); background: var(--sky); color: var(--text); border: 1px solid var(--line);
  padding: clamp(20px, 3svh, 40px) clamp(20px, 3vw, 40px); display: flex; flex-direction: column;
}
.slate__back h4 { font-family: var(--f-mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; margin: 0 0 clamp(8px, 1.4svh, 18px); color: var(--text-muted); }
.slate__credits { list-style: none; margin: 0; padding: 0; flex: 1; align-content: start; }
@media (min-width: 861px) { .slate__credits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 18px; } .slate__credits b { font-size: clamp(16px, min(1.6vw, 2.8svh), 21px); } .slate__credits span { font-size: 12px; } }
.slate__credits li { padding: clamp(6px, 1.1svh, 12px) 0; border-bottom: 1px solid rgba(var(--ink-rgb), .12); display: grid; gap: 1px; }
.slate__credits b { font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: var(--display-wght); font-size: clamp(20px, min(2.2vw, 3.2svh), 28px); line-height: 1.1; }
.slate__credits span { font-size: 13px; line-height: 1.4; color: var(--text-muted); }
.slate__links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: clamp(12px, 2svh, 20px); }
.slate__links a { text-decoration: none; font-size: 14px; padding: 8px 16px; border: 1px solid rgba(var(--ink-rgb), .3); border-radius: 99px; transition: background .2s, color .2s; }
.slate__links a:hover { background: var(--text); color: var(--surface); }
@media (max-width: 860px) {
  .slate__credits { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
  .slate__credits li { padding: 5px 0; }
  .slate__credits b { font-size: 16px; }
  .slate__credits span { font-size: 11px; line-height: 1.3; }
  .slate__links a { padding: 6px 13px; font-size: 13px; }
  .slate__bio { font-size: 13.5px; line-height: 1.5; }
}

/* ---------- Reel / film strip ---------- */
.film {
  position: relative; overflow-x: auto; overflow-y: hidden; cursor: grab;
  scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter);
  -webkit-overflow-scrolling: touch;
}
.film::-webkit-scrollbar { display: none; }
.film.is-drag { cursor: grabbing; }
.film__track {
  list-style: none; margin: 0; padding: 30px 14px; display: flex; gap: 14px; width: max-content;
  background: var(--prop); position: relative; border-radius: 4px;
}
.film__track::before, .film__track::after {
  content: ""; position: absolute; left: 0; right: 0; height: 12px;
  background: repeating-linear-gradient(90deg, transparent 0 10px, var(--bg) 10px 26px);
}
.film__track::before { top: 9px; }
.film__track::after { bottom: 9px; }
.frame {
  height: clamp(280px, calc(var(--screen) - 330px), 400px); aspect-ratio: 4 / 5; flex: none; position: relative;
  border-radius: 3px; overflow: hidden; background: #1c1c1a; color: var(--on-dark);
  transition: transform .5s var(--ease), opacity .4s, filter .4s;
  user-select: none;
}
.frame__art { position: absolute; inset: 0; }
.frame__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,10,9,0) 30%, rgba(11,10,9,.92)); }
.frame__meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; z-index: 2; }
.frame__no { position: absolute; top: 14px; left: 16px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; color: rgba(239, 230, 214, .7); z-index: 2; }
.frame__tag { position: absolute; top: 12px; right: 14px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; background: rgba(var(--ink-rgb), .6); padding: 4px 8px; border-radius: 99px; z-index: 2; }
.frame h3 { font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: var(--display-wght); font-size: 34px; line-height: 1; margin: 0 0 8px; }
.frame p { margin: 0; font-size: 13px; color: var(--on-dark-dim); line-height: 1.45; }
/* the trailer behind a card: a still thumbnail, then the muted clip, cropped to cover the card */
.frame__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) brightness(.85); }
.frame__video { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity .6s; pointer-events: none; }
.frame__video.is-on { opacity: 1; }
.frame__video iframe { position: absolute; left: 50%; top: 50%; height: 100%; width: auto; aspect-ratio: 16 / 9; border: 0; transform: translate(-50%, -50%) scale(1.2); }
.frame.has-clip:hover .frame__art { animation: none; }
.frame__art::after { z-index: 1; }
.frame { cursor: pointer; }
.frame:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }
/* the play mark: says "click to watch" */
.frame__play { position: absolute; z-index: 2; right: 14px; bottom: 16px; width: 34px; height: 34px; border-radius: 50%; background: rgba(0, 0, 0, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); transition: transform .35s var(--ease), background .25s; }
.frame__play::after { content: ""; position: absolute; left: 13px; top: 10px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #fff; }
.frame.has-clip .frame__meta { padding-right: 56px; }   /* titles stay clear of the play button */
.frame:hover .frame__play { transform: scale(1.12); background: var(--sun); }
.frame:hover .frame__play::after { border-left-color: var(--on-sun); }

/* the project dialog: the trailer on top, the details under it; sized so both fit on a laptop screen */
.watch { border: 0; padding: 0; margin: auto; width: min(1040px, calc((100dvh - 250px) * 16 / 9), calc(100vw - 32px)); min-width: min(620px, calc(100vw - 32px)); max-height: calc(100dvh - 24px); background: transparent; color: var(--text); overflow: visible; }
.watch::backdrop { background: rgba(0, 0, 0, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.watch[open] { animation: orderIn .4s var(--ease); }
html.watch-open, html.watch-open body { overflow: hidden; }
.watch__box { position: relative; overflow: hidden auto; max-height: calc(100dvh - 24px); border-radius: 14px; background: var(--surface); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8), 0 0 0 1px var(--line); }
.watch__screen { position: relative; aspect-ratio: 16 / 9; background: #000; }
.watch__screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* while the trailer starts: its still, dimmed, with a spinner; fades away once the player is ready */
.watch__loader { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; align-content: center; gap: 12px; overflow: hidden; background: #000; color: #fff; transition: opacity .5s, visibility 0s .5s; }
.watch__loader img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.45) blur(2px); transform: scale(1.04); }
.watch__spin { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .22); border-top-color: var(--sun); animation: watchSpin .8s linear infinite; }
.watch__loader p { position: relative; margin: 0; font: 500 11px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.watch__loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes watchSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .watch__spin { animation-duration: 2s; } }
.watch__art { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 6px; overflow: hidden; color: #fff; }
.watch__art span { font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: 800; font-size: clamp(90px, 18vw, 180px); line-height: .9; opacity: .35; }
.watch__art p { margin: 0; font: 500 11px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.watch__x { position: absolute; z-index: 2; right: 10px; top: 10px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .65); color: #fff; cursor: pointer; }
.watch__x span { position: absolute; left: 12px; right: 12px; top: 19px; height: 1.5px; background: currentColor; }
.watch__x span:first-child { transform: rotate(45deg); }
.watch__x span:last-child { transform: rotate(-45deg); }
.watch__x:hover { background: rgba(0, 0, 0, .9); }
.watch__info { display: grid; grid-template-columns: 1fr 1fr; gap: 10px clamp(18px, 3vw, 36px); padding: clamp(14px, 2.4svh, 22px) clamp(16px, 2.4vw, 28px); align-items: start; }
.watch__kicker { margin: 0 0 4px; font: 500 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sun); }
.watch__title { margin: 0; font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: var(--display-wght); font-size: clamp(26px, min(3vw, 5svh), 40px); line-height: 1; letter-spacing: -.01em; }
.watch__note { margin: 6px 0 0; font-size: 14px; color: var(--text-dim); }
.watch__note[hidden] { display: none; }
.watch__roles { margin: 0; display: grid; gap: 0; }
.watch__roles div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.watch__roles dt { font-size: 13.5px; font-weight: 600; }
.watch__roles dd { margin: 0; font-size: 13.5px; color: var(--text-muted); }
.watch__nav { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.watch__yt { font-size: 13.5px; color: var(--text); text-decoration: underline; text-decoration-color: rgba(var(--sun-rgb), .6); text-underline-offset: 3px; }
.watch__pos { margin-left: auto; font: 500 12px var(--f-mono); letter-spacing: .1em; color: var(--text-dim); }
.watch__arrow { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--text); font-size: 16px; cursor: pointer; transition: border-color .2s; }
.watch__arrow:hover { border-color: var(--text); }
.watch__arrow:focus-visible, .watch__x:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }
@media (max-width: 760px) {
  .watch { width: 100vw; max-width: 100vw; min-width: 0; margin: auto 0 0; }
  .watch__box { border-radius: 14px 14px 0 0; }
  .watch__info { grid-template-columns: 1fr; }
  .watch__roles div { grid-template-columns: 96px 1fr; }
}
@media (prefers-reduced-motion: reduce) { .watch[open] { animation: none; } }

.frame:hover { transform: translateY(-8px) scale(1.02); }
.frame:hover .frame__art { animation: flicker .18s steps(2) infinite; }
@keyframes flicker { 50% { filter: brightness(1.18) contrast(1.05); } }
.projector { height: 40px; position: relative; pointer-events: none; overflow: hidden; margin-top: -10px; }
.projector__beam { position: absolute; left: 50%; top: 0; width: 120%; height: 100%; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 0%, rgba(var(--sun-rgb), .08), transparent 65%); }

/* ---------- Plan your shoot: three choices on the left, a clapperboard that fills in on the right ---------- */
.planner__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.planner__steps { display: grid; gap: clamp(14px, 2.6svh, 26px); }
.pstep { margin: 0; padding: 0; border: 0; min-width: 0; }
.pstep legend { display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: clamp(8px, 1.4svh, 12px); font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: var(--display-wght); font-size: clamp(20px, min(2vw, 3.4svh), 28px); line-height: 1; }
.pstep__no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sun); color: var(--on-sun); font-family: var(--f-mono); font-size: 12px; font-weight: 600; }
.pstep__picks { display: flex; flex-wrap: wrap; gap: 8px; }
.pstep__picks--cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pick { position: relative; cursor: pointer; }
.pick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pick__box { display: block; padding: 10px 18px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); font-size: 15px; transition: border-color .2s, background .2s, color .2s, transform .2s; }
.pick__box b { font-weight: 600; }
.pstep__picks--cards .pick__box { height: 100%; padding: clamp(12px, 2svh, 18px) 16px; border-radius: 10px; }
.pstep__picks--cards .pick__box b { display: block; font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: var(--display-wght); font-size: clamp(19px, min(1.8vw, 3svh), 24px); line-height: 1.05; }
.pick__box small { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.35; color: var(--text-dim); }
.pick:hover .pick__box { border-color: rgba(var(--ink-rgb), .35); }
.pick input:checked + .pick__box { border-color: var(--sun); background: rgba(var(--sun-rgb), .12); box-shadow: inset 0 0 0 1px var(--sun); }
.pick input:checked + .pick__box small { color: var(--text-muted); }
.pick input:focus-visible + .pick__box { outline: 2px solid var(--sun); outline-offset: 2px; }
.pick:active .pick__box { transform: scale(.98); }
.pdays { display: flex; align-items: center; gap: 18px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.pdays input { flex: 1; min-width: 0; accent-color: var(--sun); height: 28px; cursor: pointer; }
.pdays__out { flex: none; min-width: 88px; text-align: right; font-size: 15px; color: var(--text-dim); }
.pdays__out b { font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: var(--display-wght); font-size: 30px; color: var(--text); }

/* the clapperboard: always black and white like the real thing; the top stick claps when the plan is sent */
.planner__out { padding-top: clamp(18px, 4svh, 40px); }
.planner__go { display: grid; gap: 12px; justify-items: start; }
.board { width: 100%; filter: drop-shadow(0 22px 34px rgba(var(--shadow-rgb), .35)); }
.board__body, .board__stick { outline: 1px solid rgba(243, 241, 236, .08); }
.board__sticks { position: relative; height: clamp(44px, 8svh, 60px); }
.board__stick { position: absolute; left: 0; right: 0; height: 46%; border-radius: 4px; background: repeating-linear-gradient(-55deg, #f3f1ec 0 22px, #141413 22px 44px); box-shadow: inset 0 0 0 2px #141413; }
.board__stick:not(.board__stick--top) { bottom: 0; background: repeating-linear-gradient(55deg, #f3f1ec 0 22px, #141413 22px 44px); }
.board__stick--top { top: 0; transform-origin: 2% 100%; transform: rotate(-7deg); transition: transform .5s var(--ease); }
.board.is-clap .board__stick--top { transform: rotate(0deg); transition: transform .09s ease-in; }
.board__body { margin-top: 4px; padding: clamp(12px, 2.2svh, 20px) clamp(14px, 2vw, 22px); border-radius: 8px; background: #141413; color: #f3f1ec; display: grid; gap: 0; }
.board__row { padding: clamp(8px, 1.5svh, 12px) 0; border-bottom: 1px solid rgba(243, 241, 236, .2); }
.board__row span { display: block; margin-bottom: 4px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(243, 241, 236, .55); }
.board__row b { display: block; font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: var(--display-wght); font-size: clamp(20px, min(2vw, 3.4svh), 28px); line-height: 1.05; color: #f3f1ec; transition: color .3s; }
.board__row b.is-new { animation: slotIn .45s var(--ease); }
@keyframes slotIn { from { opacity: 0; transform: translateY(8px); } }
.board__row--split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.board__row--split > div + div { padding-left: 16px; border-left: 1px solid rgba(243, 241, 236, .2); }
.board__name {
  width: 100%; padding: 0; border: 0; background: none; color: #f3f1ec; outline: none;
  font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: var(--display-wght); font-size: clamp(24px, min(2.6vw, 4.4svh), 36px); line-height: 1.1;
}
.board__name::placeholder { color: rgba(243, 241, 236, .4); }
.board__name:focus-visible { box-shadow: 0 2px 0 var(--sun); }
.board__row--last { border-bottom: 0; padding-bottom: 0; }
.planner__sum { margin: 14px 0 0; max-width: 46ch; font-size: 15px; line-height: 1.5; color: var(--text-muted); }
.planner__sum b { color: var(--text); font-weight: 600; }
.planner__send.is-nudge { animation: nudge .4s; }
@keyframes nudge { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.pstep.is-missing legend { color: var(--sun); }

/* short laptops: one-line heading, tighter steps */
@media (min-width: 861px) and (max-height: 660px) {
  .planner { padding-bottom: 20px; }
  .planner .section__head h2 br { display: none; }
  .planner .section__head { margin-bottom: 12px; }
  .planner__steps { gap: 10px; }
  .pstep legend { margin-bottom: 6px; }
  .pstep__picks--cards .pick__box { padding: 8px 14px; }
  .pick__box small { display: none; }
  .pdays { padding: 4px 16px; }
  .planner__out { padding-top: 22px; }
  .board__sticks { height: 38px; }
  .board__row { padding: 6px 0; }
}
@media (max-width: 860px) {
  .planner .section__head p { display: none; }
  .planner { padding-top: 56px; padding-bottom: 24px; }
  .planner .section__head { margin-bottom: 14px; }
  .planner__sum { display: none; }
  .planner__steps { gap: 12px; }
  .pstep legend { font-size: 18px; margin-bottom: 6px; }
  .pstep__no { width: 22px; height: 22px; font-size: 11px; }
  .pdays { padding: 2px 14px; }
  .pdays__out b { font-size: 24px; }
  .planner__out { padding-top: 0; }
  .board__body { padding: 8px 14px; }
  .board__row { padding: 6px 0; }
  .board__row b { font-size: 18px; }
  .board__name { font-size: 22px; }
  .board__row--last { grid-template-columns: 1fr; }
  .board__date { display: none; }
  .planner__sum { margin-top: 10px; font-size: 14px; }
  .planner__grid { grid-template-columns: 1fr; gap: 14px; }
  /* the send button goes under the clapperboard */
  .planner__steps { display: contents; }
  .planner__out { order: 1; margin-top: 10px; }
  .planner__go { order: 2; }
  .pstep__picks--cards { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .pstep__picks--cards .pick__box { padding: 10px; }
  .pstep__picks--cards .pick__box b { font-size: 17px; }
  .pick__box small { display: none; }
  .pick__box { padding: 9px 12px; font-size: 13.5px; }
  .pstep__picks { gap: 6px; flex-wrap: nowrap; }
  .pstep__picks .pick { flex: 1 1 auto; text-align: center; }
  .board__sticks { height: 26px; }
}
@media (prefers-reduced-motion: reduce) { .board__stick--top, .board.is-clap .board__stick--top { transition: none; } .board__row b.is-new { animation: none; } }

/* ---------- Process ---------- */
.process__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--line); position: relative; }
.process__list::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: var(--p, 0%); background: var(--sun); box-shadow: 0 0 12px var(--sun); transition: width .2s linear; }
.process__list li { padding: 28px 22px 0 0; border-right: 1px solid var(--line); margin-right: 22px; }
.process__list li:last-child { border-right: 0; margin-right: 0; }
.tc { font-family: var(--f-mono); font-size: 12px; color: var(--sun); letter-spacing: .1em; }
.process__list h3 { font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: var(--display-wght); font-size: clamp(28px, 2.8vw, 40px); margin: 8px 0 10px; line-height: 1; }
.process__list p { margin: 0; color: var(--text-dim); font-size: 15px; }
@media (max-width: 900px) {
  .process__list { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--line); padding-left: 22px; }
  .process__list::before { left: -1px; top: 0; width: 1px; height: var(--p, 0%); }
  .process__list li { border-right: 0; margin: 0; padding: 0 0 16px; }
  .process__list h3 { font-size: 24px; margin: 2px 0 4px; }
  .process__list p { font-size: 14px; line-height: 1.45; }
}

/* ---------- FAQ ---------- */
.faq__list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 26px 50px 26px 0; position: relative;
  font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: var(--display-wght); font-size: clamp(24px, 2.6vw, 36px); line-height: 1.15;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--f-body); font-weight: 300; font-size: 32px; color: var(--sun); transition: transform .3s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { margin: 0 0 28px; max-width: 760px; color: var(--text-dim); }
.faq details ul { margin: -14px 0 28px; padding-left: 18px; max-width: 760px; color: var(--text-dim); }
.faq details ul li { margin: 4px 0; }
/* homepage and about page: two columns of questions on computers, so the list fits one screen (the contact page keeps its grouped list) */
@media (min-width: 900px) {
  .faq:not(.faqs) .faq__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 4vw, 64px); align-items: start; border-top: 0; }
  .faq:not(.faqs) details { border-top: 1px solid var(--line); border-bottom: 0; }
  .faq:not(.faqs) .section__head h2 br { display: none; }
  .faq:not(.faqs) summary { padding-top: clamp(14px, 2.4svh, 22px); padding-bottom: clamp(14px, 2.4svh, 22px); font-size: clamp(18px, 1.7vw, 23px); }
}
.faq__more { margin: 22px 0 0; color: var(--text-dim); }
.faq__more a { color: var(--text); }

/* ---------- Contact page ---------- */
.reach { min-height: 100svh; display: flex; align-items: center; padding-top: clamp(96px, 14svh, 132px); padding-bottom: clamp(28px, 5svh, 64px); }
.reach__grid { width: 100%; display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.crumbs { display: flex; gap: 8px; margin: 0 0 clamp(10px, 2svh, 18px); font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }
.crumbs a { color: var(--text-dim); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.reach h1 { font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: var(--display-wght); font-size: clamp(46px, min(7vw, 11.5svh), 112px); line-height: .92; letter-spacing: -.015em; margin: 0 0 clamp(12px, 2.4svh, 22px); }
.reach h1 em { font-style: normal; color: var(--text-dim); }
.reach__lede { margin: 0 0 clamp(18px, 4svh, 36px); max-width: 480px; color: var(--text-dim); font-size: clamp(16px, 1.4vw, 18px); }
/* the two producers, like a pair of cast cards */
.people { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); }
.person { display: grid; gap: 3px; align-content: start; padding-top: clamp(10px, 1.8svh, 16px); border-top: 1px solid var(--text); }
.person__role { margin: 0 0 2px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--sun); }
.person__name { margin: 0 0 clamp(4px, 1svh, 8px); font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: var(--display-wght); font-size: clamp(24px, min(2.4vw, 4.4svh), 34px); line-height: 1; }
.person > a { width: fit-content; color: var(--text); text-decoration: none; font-size: 15px; word-break: break-word; background: linear-gradient(var(--sun), var(--sun)) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--ease); }
.person > a:hover { background-size: 100% 1px; }
.person__links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: clamp(4px, 1svh, 8px) 0 0; }
.person__links a { font-size: 13px; color: var(--text-dim); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.person__links a:hover { color: var(--text); text-decoration-color: var(--sun); }
/* Skyora's one number, shown once beside the founders' emails */
.callline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: clamp(12px, 2.4svh, 20px) 0 0; font-size: 15px; }
.callline__label { font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--sun); }
.callline__dot { color: var(--text-dim); }
.callline a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.callline a:hover { text-decoration-color: var(--sun); }
.mnav__foot .callline { margin: 0; font-size: 14px; }
.reach__where { margin: clamp(14px, 3svh, 28px) 0 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }

.script__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.script__pair .script__field { grid-template-columns: 1fr; gap: 2px; }
.reach__form { transform: rotate(.4deg); }
.reach__form textarea { height: clamp(52px, 10svh, 96px); }

/* FAQ on the contact page: grouped with tabs, every answer stays in the page for search */
.faqs { padding-bottom: clamp(48px, 9svh, 110px); }
.faqs__side { display: grid; gap: clamp(12px, 2svh, 18px); }
.faqs__side p a { color: var(--text); }
.faqs__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.chip__n { font-family: var(--f-mono); font-size: .85em; opacity: .6; margin-left: 2px; }
.faqs summary { font-size: clamp(20px, min(2vw, 3.6svh), 28px); padding-top: clamp(14px, 2.6svh, 24px); padding-bottom: clamp(14px, 2.6svh, 24px); }
.faqs details p a { color: var(--text); }
.faqs details[hidden] { display: none; }

@media (max-width: 900px) {
  .reach { display: block; min-height: 0; }
  .reach__grid { grid-template-columns: 1fr; gap: clamp(28px, 6svh, 48px); }
  .reach__info { min-height: calc(100svh - 150px); display: flex; flex-direction: column; justify-content: center; }
  .reach__form { transform: none; }
}
@media (max-width: 520px) {
  .people { grid-template-columns: 1fr 1fr; gap: 14px; }
  .person > a { font-size: 13px; }
  .person__name { font-size: 22px; }
  .script__pair { grid-template-columns: 1fr; }
  .script__pair .script__field, .reach__form .script__field:not(.script__field--block) { grid-template-columns: 92px 1fr; gap: 10px; }
}
/* short laptop screens: keep the form in one view */
@media (min-width: 901px) and (max-height: 700px) {
  .reach { padding-top: 84px; }
  .reach__form { padding-top: 18px; padding-bottom: 18px; }
  .reach__form .script__slug { display: none; }
  .reach__form .script__field { margin-bottom: 2px; }
  .reach__form textarea { height: 46px; }
  .people .person__links { display: none; }
  .reach h1 { font-size: clamp(40px, 10svh, 84px); }
  .reach__lede { margin-bottom: 14px; }
}

/* ---------- About page ---------- */
.story { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: clamp(96px, 14svh, 132px); padding-bottom: clamp(24px, 4svh, 48px); }
.story__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.story h1 { font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: var(--display-wght); font-size: clamp(42px, min(4.8vw, 8.6svh), 92px); line-height: .94; letter-spacing: -.015em; margin: 0 0 clamp(12px, 2.4svh, 22px); }
.story h1 em { font-style: normal; color: var(--text-dim); }
.story__lede { margin: 0 0 clamp(18px, 3.6svh, 32px); max-width: 540px; color: var(--text-dim); font-size: clamp(16px, 1.4vw, 18px); }
.story__lede strong { color: var(--text); font-weight: 500; }
.story__actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* the still: a framed photo with a slate-style caption strip */
.story__still { margin: 0; position: relative; border-radius: 6px; overflow: hidden; background: #121211; box-shadow: 0 30px 60px -34px rgba(var(--shadow-rgb), .45); aspect-ratio: 4 / 3; max-height: 58svh; justify-self: end; width: 100%; }
.story__still img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.story__still figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #f3f1ec;
  background: linear-gradient(transparent, rgba(0, 0, 0, .6));
}
.story__numbers { max-width: none; padding: 0; margin: clamp(20px, 4svh, 44px) 0 0; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.story__numbers .numbers__item { padding-top: clamp(12px, 2svh, 20px); padding-bottom: clamp(12px, 2svh, 20px); }
.story__numbers .numbers__n { font-size: clamp(42px, min(5vw, 9svh), 84px); }

/* the director's notes: script-paper cards along a path that draws itself as the page scrolls
   (wide screens zig-zag with cards on alternate sides; phones run a straight line down the left) */
.trail { position: relative; }
.trail__svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.trail__base { fill: none; stroke: rgba(var(--ink-rgb), .14); stroke-width: 2; stroke-dasharray: 6 8; }
.trail__line { fill: none; stroke: var(--sun); stroke-width: 3; stroke-linecap: round; }
.trail__dot circle { fill: var(--sun); }
.trail__dot .trail__halo { opacity: .18; }
.trail__list { list-style: none; margin: 0; padding: 0; }
.trail__node {
  position: absolute; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  border: 2px solid rgba(var(--ink-rgb), .15); background: var(--bg); color: rgba(var(--ink-rgb), .45);
  font-family: var(--f-mono); font-size: 13px; font-weight: 600; transform: translate(-50%, -50%);
  transition: background .5s, border-color .5s, color .5s, transform .5s var(--ease);
}
.trail__step.is-lit .trail__node { background: var(--sun); border-color: var(--sun); color: var(--on-sun); transform: translate(-50%, -50%) scale(1.08); }
.trail .note { transform: translateY(16px); transition: transform .7s var(--ease), border-color .7s; }
.trail__step.is-lit .note { transform: none; border-color: var(--sun); }
@media (prefers-reduced-motion: reduce) { .trail .note, .trail__node { transition: none; } }
.note {
  position: relative; padding: clamp(18px, 3svh, 30px) clamp(18px, 2vw, 28px); background: var(--surface); border: 1px solid var(--line); border-radius: 4px;
  background-image: linear-gradient(rgba(var(--ink-rgb), .04) 1px, transparent 1px); background-size: 100% 30px;
  box-shadow: 0 24px 48px -34px rgba(var(--shadow-rgb), .35); transition: transform .4s var(--ease);
}
.note__no { font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--sun); }
.note h3 { margin: clamp(8px, 1.6svh, 14px) 0 clamp(6px, 1.2svh, 10px); font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: var(--display-wght); font-size: clamp(26px, min(2.6vw, 4.6svh), 38px); line-height: 1; }
.note p { margin: 0; color: var(--text-dim); font-size: 15px; line-height: 1.55; }
.notes { padding-bottom: clamp(20px, 4svh, 40px); }

/* the producers: "Two producers. One unit.": two frames on one strip of film, on the sky band */
.producers { padding-bottom: clamp(48px, 8svh, 96px); isolation: isolate; }
.producers::before { content: ""; position: absolute; inset: 0 50%; margin: 0 -50vw; background: var(--sky); z-index: -1; }
.producers__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; filter: drop-shadow(0 26px 34px rgba(var(--shadow-rgb), .28)); }
/* inside the strip the page's colours flip to light on dark */
.producer {
  --text: var(--on-dark); --text-dim: var(--on-dark-dim); --film-line: rgba(255, 255, 255, .16); --film-accent: color-mix(in srgb, var(--sun) 50%, #fff);
  position: relative; display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); padding: 36px 0;
  background: var(--prop); color: var(--text); scroll-margin-top: 90px;
}
.producer + .producer { border-left: 1px solid var(--film-line); }
/* the sprocket holes, top and bottom, cut through to the band behind; they roll while the pointer is on the frame */
.producer::before, .producer::after {
  content: ""; position: absolute; left: 0; right: 0; height: 12px; background: var(--sky); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='12'%3E%3Crect x='7' width='14' height='12' rx='2.5'/%3E%3C/svg%3E") 0 0 / 28px 12px repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='12'%3E%3Crect x='7' width='14' height='12' rx='2.5'/%3E%3C/svg%3E") 0 0 / 28px 12px repeat-x;
}
.producer::before { top: 6px; }
.producer::after { bottom: 6px; }
.producer:hover::before, .producer:hover::after { animation: filmRoll 1.2s linear infinite; }
@keyframes filmRoll { to { -webkit-mask-position: 28px 0; mask-position: 28px 0; } }
/* the maker's print along the film's edge */
.producer__info::before { position: absolute; left: 14px; top: 21px; font: 500 9px/1 var(--f-mono); letter-spacing: .2em; color: var(--film-accent); opacity: .8; }
.producer:nth-child(1) .producer__info::before { content: "SKYORA 5219  \25B8  01A"; }
.producer:nth-child(2) .producer__info::before { content: "SKYORA 5219  \25B8  02A"; }
/* the portrait dissolves into the film, with a viewfinder's corners over it */
.producer__photo { position: relative; margin: 0; min-height: clamp(300px, 54svh, 480px); overflow: hidden; }
.producer__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; -webkit-mask-image: linear-gradient(to right, #000 62%, transparent); mask-image: linear-gradient(to right, #000 62%, transparent); transition: transform 1.4s var(--ease); }
.producer:hover .producer__photo img { transform: scale(1.04); }
.producer__photo::before, .producer__photo::after { content: ""; position: absolute; z-index: 1; width: 18px; height: 18px; border: 0 solid var(--film-accent); }
.producer__photo::before { left: 12px; top: 12px; border-width: 1.5px 0 0 1.5px; }
.producer__photo::after { left: 12px; bottom: 12px; border-width: 0 0 1.5px 1.5px; }
.producer__info { position: static; display: flex; flex-direction: column; gap: clamp(8px, 1.5svh, 14px); min-width: 0; padding: clamp(10px, 2svh, 22px) clamp(16px, 2vw, 28px) clamp(10px, 2svh, 22px) 0; }
.producer__role { margin: 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--film-accent); }
/* the name runs out over the portrait's edge */
.producer__name { position: relative; z-index: 2; margin: 0 0 0 -44px; font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: var(--display-wght); font-size: clamp(42px, min(4.6vw, 9svh), 72px); line-height: .92; letter-spacing: -.02em; color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .55); }
/* skills read like a credit line, not buttons */
.producer__tags { display: flex; flex-wrap: wrap; gap: 3px 0; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--text); }
.producer__tags li:not(:last-child)::after { content: "/"; margin: 0 8px; color: var(--film-accent); }
.producer__facts { margin: 0; display: grid; border-top: 1px solid var(--film-line); }
.producer__facts div { display: grid; grid-template-columns: 1fr; gap: 3px; padding: clamp(7px, 1.2svh, 11px) 0; border-bottom: 1px solid var(--film-line); }
.producer__facts dt { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); padding-top: 2px; }
.producer__facts dd { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text); }
.producer__links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: auto 0 0; }
.producer__links a { padding: 4px 0; font: 500 11px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text); text-decoration: underline; text-decoration-color: var(--film-accent); text-underline-offset: 4px; transition: color .2s; }
.producer__links a:hover, .producer__links a:focus-visible { color: var(--film-accent); }
@media (prefers-reduced-motion: reduce) { .producer:hover::before, .producer:hover::after { animation: none; } }
@media (min-width: 761px) and (max-height: 820px) {
  .producers { padding-bottom: 16px; }
  .producers .section__head { margin-bottom: 14px; }
  .producers .section__head h2 br { display: none; }
  .producer__tags li:nth-child(n+5) { display: none; }
  .producer__tags li:nth-child(4)::after { display: none; }
}
@media (min-width: 761px) and (max-height: 660px) {
  .producers { padding-top: 44px; padding-bottom: 12px; }
  .producers .section__head { margin-bottom: 12px; }
  .producer__photo { min-height: 58svh; }
  .producer__tags li:nth-child(n+5) { display: none; }
  .producer__facts div { padding: 5px 0; }
  .producer__facts div:last-child { display: none; }
}
/* small tablets: the frames stack */
@media (min-width: 761px) and (max-width: 900px) {
  .producers__grid { grid-template-columns: 1fr; }
  .producer + .producer { border-left: 0; border-top: 1px solid var(--film-line); }
}
/* phones: the strip swipes sideways, a frame at a time, with the next frame showing at the edge */
@media (max-width: 760px) {
  .producers .section__head p { display: none; }
  .producers__grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 88%; filter: none;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); scroll-padding: 0 var(--gutter);
  }
  .producers__grid::-webkit-scrollbar { display: none; }
  .producer { grid-template-columns: 1fr; align-content: start; scroll-snap-align: start; }
  .producer.reveal { opacity: 1; transform: none; }
  .producer__photo { min-height: 0; height: 210px; }
  .producer__photo img { object-position: 50% 18%; -webkit-mask-image: linear-gradient(to bottom, #000 66%, transparent); mask-image: linear-gradient(to bottom, #000 66%, transparent); }
  .producer__photo::after { left: auto; right: 12px; top: 12px; bottom: auto; border-width: 1.5px 1.5px 0 0; }
  .producer__info { padding: 0 16px 8px; gap: 9px; }
  .producer__name { margin: -44px 0 0; font-size: 44px; }
  .producer__role { order: 1; }
  .producer__name { order: 0; }
  .producer__tags { order: 2; }
  .producer__facts { order: 3; }
  .producer__links { order: 4; margin-top: 2px; }
  .producer__tags { font-size: 12.5px; }
  .producer__tags li:nth-child(n+5) { display: none; }
  .producer__tags li:nth-child(4)::after { display: none; }
  .producer__facts div { padding: 6px 0; }
  .producer__facts dd { font-size: 13.5px; line-height: 1.4; }
  .producer__facts div:last-child { display: none; }   /* the credits are on the filmography just below */
}

/* in their own words: the founders' own profiles. Names as tabs, the text in columns opening with a larger first paragraph */
.voice { padding-bottom: clamp(40px, 7svh, 88px); }
.voice__tabs { display: flex; gap: clamp(20px, 4vw, 56px); border-bottom: 1px solid var(--line); margin-bottom: clamp(18px, 3.4svh, 36px); }
.voice__tabs button {
  display: flex; align-items: baseline; gap: 12px; padding: 0 0 clamp(10px, 1.8svh, 16px); margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent; background: none; cursor: pointer;
  font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: var(--display-wght); font-size: clamp(22px, min(2.6vw, 4.4svh), 38px); line-height: 1; letter-spacing: -.01em;
  color: var(--text-dim); transition: color .25s, border-color .25s;
}
.voice__tabs button span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; font-weight: 400; color: var(--text-dim); }
.voice__tabs button:hover { color: var(--text); }
.voice__tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--sun); }
.voice__tabs button[aria-selected="true"] span { color: var(--sun); }
.voice__tabs button:focus-visible { outline: 2px solid var(--sun); outline-offset: 4px; }
.voice__notes { display: grid; }
.voice__note { grid-area: 1 / 1; }
.voice__role { margin: 0 0 clamp(8px, 1.4svh, 14px); font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--sun); }
.voice__text { columns: 3 240px; column-gap: clamp(24px, 3vw, 48px); }
.voice__text p { margin: 0 0 .9em; font-size: clamp(13.5px, min(1.1vw, 2.1svh), 16px); line-height: 1.6; color: var(--text-muted); }
.voice__text p:first-child { font-size: clamp(17px, min(1.6vw, 2.8svh), 22px); line-height: 1.4; letter-spacing: -.01em; color: var(--text); text-wrap: pretty; }
.voice__text em { font-style: italic; color: var(--text); }
.voice__more { display: none; }
/* the switch: the old profile fades out, the new one rises */
.voice__note[hidden] { display: block; visibility: hidden; opacity: 0; pointer-events: none; }
.voice__note > * { transition: opacity .5s, transform .6s cubic-bezier(.2,.7,.2,1); }
.voice__note[hidden] > * { opacity: 0; transform: translateY(12px); transition-duration: .2s; transition-delay: 0s !important; }
.voice__note > .voice__text { transition-delay: .06s; }
@media (max-width: 900px) { .voice__text { columns: 2 220px; } }
@media (min-width: 761px) and (max-height: 620px) { .voice { padding-bottom: 20px; } .voice .section__head h2 br { display: none; } }   /* short laptops: one-line heading */
/* phones: one column, the opening and a little more, then Read more */
@media (max-width: 760px) {
  .voice__tabs { gap: 8px; border: 0; }
  .voice__tabs button { flex: 1; justify-content: center; padding: 12px; margin: 0; border: 1px solid var(--line); border-radius: 99px; font-size: 18px; }
  .voice__tabs button[aria-selected="true"] { background: var(--text); color: var(--surface); border-color: var(--text); }
  .voice__tabs button span { display: none; }
  .voice__text { columns: auto; max-height: 16em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
  .voice__text p { font-size: 15px; }
  .voice__text p:first-child { font-size: 20px; }
  .voice__note.is-open .voice__text { max-height: none; -webkit-mask-image: none; mask-image: none; }
  .voice__more { display: inline-block; margin-top: 10px; padding: 9px 18px; border: 1px solid rgba(var(--ink-rgb), .3); border-radius: 99px; background: none; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
}
@media (prefers-reduced-motion: reduce) { .voice__note > *, .voice__tabs button { transition: none; } }

/* the filmography: a call-sheet style table */
.films__side { display: grid; gap: clamp(12px, 2svh, 18px); }
.films__side p { margin: 0; color: var(--text-dim); max-width: 440px; }
/* two columns of eight, each with its own heading row; 1px gaps over the line colour draw the grid */
.films__table { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(9, auto); grid-auto-flow: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.films__row { display: grid; grid-template-columns: 30px minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: baseline; padding: clamp(5px, .95svh, 9px) 18px; background: var(--surface); transition: background .25s; }
.films__row:not(.films__row--head):hover { background: color-mix(in srgb, var(--surface) 94%, var(--sun)); }
.films__row--head { font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-dim); }
.films__row > span:first-child { font-family: var(--f-mono); font-size: 12px; color: var(--sun); }
.films__row--head > span:first-child { font-size: 11px; color: var(--text-dim); }
.films__row b { font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: var(--display-wght); font-size: clamp(17px, min(1.5vw, 2.6svh), 21px); line-height: 1.1; }
.films__row b small { display: block; margin-top: 1px; font-family: var(--f-body); font-stretch: 100%; font-weight: 400; font-size: 12px; color: var(--text-dim); }
.films__row > span:nth-child(3) { font-size: 13px; color: var(--text-dim); line-height: 1.4; }
.films__row--head > span:nth-child(n) { font-size: 11px; }
.films { padding-bottom: clamp(14px, 2.6svh, 40px); }
.films .section__head { margin-bottom: clamp(10px, 1.6svh, 18px); }   /* the table is tall: keeps the section to one screen */

/* closing cue */
.cue { padding-bottom: clamp(56px, 10svh, 120px); }
.cue__box { text-align: center; padding: clamp(40px, 8svh, 90px) var(--gutter); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cue__kicker { margin: 0 0 12px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--sun); }
.cue h2 { margin: 0 0 clamp(12px, 2svh, 18px); font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: var(--display-wght); font-size: clamp(40px, min(6vw, 10svh), 96px); line-height: .95; letter-spacing: -.015em; }
.cue h2 em { font-style: normal; color: var(--text-dim); }
.cue p { margin: 0 auto clamp(20px, 3.6svh, 32px); max-width: 480px; color: var(--text-dim); }
.cue__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }

@media (max-width: 900px) {
  .story__grid { grid-template-columns: 1fr; }
  .story__still { aspect-ratio: 16 / 9; max-height: 32svh; justify-self: stretch; }
  .note { padding: 14px 16px; }
  .note h3 { font-size: 24px; margin: 6px 0 4px; }
  .note p { font-size: 14px; line-height: 1.45; }
}
@media (max-width: 760px) {
  .story { min-height: 0; padding-top: 100px; }
  .story__still { max-height: 15svh; }
  .story__numbers { grid-template-columns: repeat(4, 1fr); margin-top: 18px; }
  .story__numbers .numbers__item { padding: 10px 0 10px 8px; border-left: 1px solid var(--line); border-top: 0; }
  .story__numbers .numbers__item:first-child { border-left: 0; padding-left: 0; }
  .story__numbers .numbers__item .ico { display: none; }
  .story__numbers .numbers__n { font-size: 30px; }
  .story__numbers .numbers__l { font-size: 9px; letter-spacing: .04em; }
  .story__numbers .numbers__l::before { display: none; }
  /* phones: the sixteen titles as a two-column grid of number, title and platform; no heading rows */
  .films__table { grid-template-rows: none; grid-auto-flow: row; }
  .films__row.films__row--head, .films__side p { display: none; }
  .films__row { display: flex; flex-direction: column; gap: 0; padding: 6px 10px; }
  .films__row > span:first-child { font-size: 10.5px; }
  .films__row > span:nth-child(3) { font-size: 11.5px; line-height: 1.3; }
  .films__row b small { display: inline; margin-left: 5px; font-size: 11px; }
  .films__row b { font-size: 17px; }
}
/* short laptop screens */
@media (min-width: 901px) and (max-height: 700px) {
  .story { padding-top: 76px; }
  .story h1 { font-size: 52px; }
  .story__lede { font-size: 15px; margin-bottom: 14px; }
  .films .section__head { margin-bottom: 12px; }
  .films__side p { display: none; }
  .films__row { padding-top: 4px; padding-bottom: 4px; }
  .story__numbers .numbers__n { font-size: 40px; }
}

/* ---------- Pitch ---------- */
.pitch { padding-bottom: clamp(64px, 10svh, 120px); }
.pitch__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(30px, 5vw, 80px); align-items: start; }
.pitch h2 { font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: var(--display-wght); font-size: clamp(42px, min(6.6vw, 11svh), 100px); line-height: .95; margin: 0 0 clamp(10px, 2svh, 20px); letter-spacing: -.015em; }
.pitch h2 em { font-style: normal; color: var(--text-dim); }
.pitch__lede { color: var(--text-dim); margin: 0 0 clamp(18px, 4svh, 36px); font-size: 18px; }
.contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 520px) { .contacts { grid-template-columns: 1fr; } }
.contact { border-top: 1px solid var(--line); padding-top: 16px; display: grid; gap: 4px; }
.contact h3 { font-family: var(--f-mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--sun); margin: 0 0 6px; font-weight: 700; }
.contact a { text-decoration: none; color: var(--text); font-size: 15.5px; word-break: break-word; width: fit-content; background: linear-gradient(var(--sun), var(--sun)) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--ease); }
.contact a:hover { background-size: 100% 1px; }

.script {
  min-width: 0;
  background: var(--surface); color: var(--text); padding: clamp(26px, 4vw, 50px); border-radius: 3px;
  font-family: var(--f-mono); box-shadow: 0 30px 60px -34px rgba(var(--shadow-rgb), .35), 0 0 0 1px var(--line);
  position: relative; transform: rotate(.6deg);
  background-image: linear-gradient(rgba(11,10,9,.04) 1px, transparent 1px); background-size: 100% 30px;
}
.script::before { content: ""; position: absolute; left: 22px; top: 30px; bottom: 30px; width: 0; border-left: 10px dotted rgba(var(--ink-rgb), .18); }
.script__slug { font-weight: 700; letter-spacing: .1em; margin: 0 0 clamp(6px, 1.6svh, 18px); }
.script__slug--end { text-align: right; margin: clamp(6px, 1.6svh, 20px) 0 0; }
.script__field { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: baseline; margin-bottom: clamp(4px, 1.2svh, 14px); }
.script__field span { font-size: 12px; text-transform: uppercase; letter-spacing: .16em; color: var(--text-muted); }
.script__field--block { grid-template-columns: 1fr; gap: 6px; }
.script input, .script select, .script textarea {
  width: 100%; min-width: 0; background: transparent; border: 0; border-bottom: 1px solid rgba(var(--ink-rgb), .3);
  color: var(--text); font-family: var(--f-mono); font-size: 16px; padding: 6px 0; outline: none; border-radius: 0; resize: vertical;
}
.script input:focus, .script select:focus, .script textarea:focus { border-bottom-color: var(--text); }
/* hints stay small and quiet; what people type stays at 16px (phones zoom in on smaller inputs) */
.script input::placeholder, .script textarea::placeholder { color: rgba(var(--ink-rgb), .38); font-size: 13px; letter-spacing: .02em; }
.script select option { color: var(--text); background: var(--surface); }
/* styled dropdown (the native select stays underneath for the form) */
.dd { position: relative; }
.dd__native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dd__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-bottom: 1px solid rgba(var(--ink-rgb), .3); border-radius: 0;
  padding: 6px 0; font-family: var(--f-mono); font-size: 16px; color: var(--text);
}
.dd__btn:hover, .dd.is-open .dd__btn { border-bottom-color: var(--text); }
.dd__btn:focus-visible { outline: 2px solid var(--sun); outline-offset: 4px; }
.script__field .dd__val { font-size: inherit; text-transform: none; letter-spacing: 0; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* not the field-label style */
.dd__chev { width: 12px; height: 8px; flex: none; color: var(--text-dim); transition: transform .2s var(--ease); }
.dd.is-open .dd__chev { transform: rotate(180deg); color: var(--text); }
/* the list unrolls from the field like a strip of the same script paper */
.dd__list {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin: 0; padding: 0; list-style: none;
  background: var(--surface); border: 1px solid var(--text); border-top: 0; border-radius: 0;
  background-image: linear-gradient(rgba(var(--ink-rgb), .05) 1px, transparent 1px); background-size: 100% 34px;
  box-shadow: 5px 5px 0 rgba(var(--shadow-rgb), .1);
  max-height: 260px; overflow: auto; transform-origin: top; animation: ddIn .2s var(--ease);
}
.dd--up .dd__list { top: auto; bottom: 100%; border-top: 1px solid var(--text); border-bottom: 0; transform-origin: bottom; box-shadow: 5px -5px 0 rgba(var(--shadow-rgb), .1); }
@keyframes ddIn { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.dd--up .dd__list { animation-name: ddUp; }
@keyframes ddUp { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
.dd__list li {
  padding: 8px 12px; border-bottom: 1px dashed rgba(var(--ink-rgb), .18); cursor: pointer;
  font-family: var(--f-mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--text);
}
.dd__list li:last-child { border-bottom: 0; }
.dd__list li[aria-selected="true"] span, .dd__list li[aria-selected="true"] { text-decoration: underline; text-decoration-color: var(--sun); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.dd__list li.is-active { background: var(--text); color: var(--surface); text-decoration-color: var(--surface); }
@media (max-height: 760px) { .dd__btn { padding: 3px 0; } .dd__list li { padding-top: 7px; padding-bottom: 7px; } }
/* a field left empty or wrong on send: red label, red line and a "!" mark, until it's typed in again */
.script { --alert: #d92d20; }
.script .is-invalid, .script .is-invalid:focus { border-bottom: 2px solid var(--alert); padding-bottom: 5px; padding-right: 28px; }
.script__field:has(.is-invalid) { position: relative; }
.script__field:has(.is-invalid) > span { color: var(--alert); }
.script__field:has(.is-invalid)::after { content: "!"; position: absolute; right: 0; bottom: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--alert); color: #fff; font: 700 12px/18px var(--f-body); text-align: center; pointer-events: none; }
/* the mark sits level with the label where the bottom right is taken: the textarea's resize handle, the date picker's icon */
.script__field--block:has(.is-invalid)::after, .order__dates .script__field:has(.is-invalid)::after { top: 0; bottom: auto; }
.script__foot { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: clamp(10px, 2svh, 24px); }
.script .btn--sun { background: var(--text); color: var(--surface); box-shadow: none; }
.script .btn--sun:hover { background: #262624; }
.script .btn--ghost { color: var(--text); border-color: rgba(var(--ink-rgb), .3); }
.script .btn--ghost:hover { border-color: var(--text); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* honeypot */
.cf-turnstile:has(iframe) { margin-top: 8px; }   /* only when Cloudflare actually shows a check */
.script__note[data-state="sent"] { color: #1f7a3a; font-weight: 700; }
.script__note[data-state="error"] { color: var(--alert); font-weight: 600; }
.script__note a { color: inherit; font-weight: 700; }
.script .btn--sun:disabled { opacity: .7; cursor: default; }
.script__note { font-size: 12px; color: var(--text-muted); margin: clamp(6px, 1.2svh, 14px) 0 0; }
/* the logline box and the sheet's padding give way on short screens so the whole form fits one view */
.script textarea { height: clamp(46px, 9svh, 84px); }
@media (max-height: 620px) and (min-width: 901px) {
  .script__slug { display: none; }   /* FADE IN / CUT TO are decoration; drop them on very short laptop screens */
  .script__field { margin-bottom: 3px; }
  .script textarea { height: 42px; }
}   /* very short laptop screens: keep the form in one view */
.script { padding: clamp(18px, 3.6svh, 50px) clamp(22px, 4vw, 50px) clamp(18px, 3.6svh, 50px) clamp(40px, 4vw, 50px); }
@media (max-height: 760px) { .script input, .script select, .script textarea { padding: 3px 0; } .script__foot .btn { padding-top: 10px; padding-bottom: 10px; } }
@media (max-width: 900px) {
  .pitch__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }   /* minmax: the form may shrink below its fields' natural width */
  .pitch h2 { font-size: 42px; margin-bottom: 8px; }
  .pitch__lede { font-size: 16px; margin-bottom: 0; }
  /* heading + form make one screen; the direct contacts follow as the next one */
  .pitch__grid > div { display: contents; }
  .pitch__grid .contacts { order: 2; margin-top: 24px; }
  .script { padding: 20px 18px 18px 34px; transform: none; background-size: 100% 26px; }
  .script::before { left: 12px; }
  .script__slug { margin-bottom: 8px; }
  .script__slug--end { margin-top: 6px; }
  .script__field { grid-template-columns: 84px minmax(0, 1fr); margin-bottom: 6px; }
  .script__field--block { grid-template-columns: minmax(0, 1fr); }   /* logline: label above, full-width box */
  .script__field span { font-size: 11px; letter-spacing: .08em; }
  .script textarea { padding: 4px 0; }
  .script__foot { margin-top: 12px; flex-wrap: wrap; }
  .script__foot .btn { padding: 11px 14px; font-size: 14px; white-space: nowrap; }
  .script__note { margin-top: 8px; }
}

/* ---------- Credits footer ---------- */
.credits { border-top: 1px solid var(--line); padding: clamp(56px, 9svh, 110px) var(--gutter) 24px; background: var(--surface); }
.credits__inner { max-width: var(--max); margin: 0 auto; }
.credits__top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.credits__kicker { margin: 0 0 14px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--sun); }
.credits__title {
  margin: 0; font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: var(--display-wght);
  font-size: clamp(56px, min(10vw, 15svh), 160px); line-height: .9; letter-spacing: -.015em;
}
.credits__title em { font-style: normal; color: var(--text-dim); }
.credits__line { margin: 18px 0 26px; font-size: clamp(16px, 1.4vw, 19px); color: var(--text-dim); }
.credits__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.credits__mail { color: var(--text); text-decoration: none; font-weight: 500; background: linear-gradient(var(--sun), var(--sun)) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; }
.credits__mail:hover { color: var(--sun); }

/* the roll: white-on-black credits scrolling up, fading at top and bottom */
.roll {
  position: relative; height: clamp(260px, 42svh, 380px); overflow: hidden; border-radius: 14px;
  background: #0d0d0c; color: #f3f1ec; text-align: center;
  box-shadow: inset 0 0 0 1px rgba(243, 241, 236, .06), 0 30px 60px -36px rgba(var(--shadow-rgb), .5);
}
/* the screen stays crisp; only the credits fade in at the bottom and out at the top */
.roll::before, .roll::after { content: ""; position: absolute; left: 0; right: 0; height: 30%; z-index: 1; pointer-events: none; }
.roll::before { top: 0; background: linear-gradient(#0d0d0c, rgba(13, 13, 12, 0)); }
.roll::after { bottom: 0; background: linear-gradient(rgba(13, 13, 12, 0), #0d0d0c); }
.roll__label { position: absolute; z-index: 2; left: 0; right: 0; top: 0; margin: 0; padding: 12px 14px; text-align: center; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--sun); background: linear-gradient(#0d0d0c 60%, rgba(13, 13, 12, 0)); pointer-events: none; }
.roll__track { animation: roll 34s linear infinite; }
.roll:hover .roll__track { animation-play-state: paused; }
@keyframes roll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.roll__list { margin: 0; padding: 40px 24px; display: grid; gap: 34px; }
.roll__list dt { font-family: var(--f-mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: rgba(243, 241, 236, .55); margin-bottom: 8px; }
.roll__list dd { margin: 0; font-family: var(--f-display); font-stretch: var(--display-wdth); font-weight: var(--display-wght); font-size: clamp(22px, 2vw, 28px); line-height: 1.2; }

/* the practical footer */
.credits__grid {
  display: grid; grid-template-columns: 1.25fr .7fr 1fr 1.25fr; gap: 28px;
  margin-top: clamp(40px, 7svh, 80px); padding-top: clamp(28px, 4svh, 40px); border-top: 1px solid var(--line);
}
.credits__brand .credits__follow { max-width: 280px; text-align: center; margin: 16px 0 0; font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); }   /* same as the footer's column headings */
.credits__social { display: flex; justify-content: center; max-width: 280px; gap: 8px; list-style: none; margin: 8px 0 0; padding: 0; }
@media (max-width: 760px) { .credits__brand .credits__follow, .credits__social { max-width: none; } }
.credits__social a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(var(--ink-rgb), .2); color: var(--text); transition: background .2s, color .2s, border-color .2s; }
.credits__social svg { display: block; width: 15px; height: 15px; }
.credits__social a:hover, .credits__social a:focus-visible { background: var(--sun); border-color: var(--sun); color: var(--on-sun); }
.credits__brand p { margin: 12px 0 0; max-width: 280px; font-size: 14px; color: var(--text-dim); }
.credits__col { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.credits__col h3 { margin: 0 0 6px; font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); }
.credits__col a { color: var(--text); text-decoration: none; max-width: 100%; overflow-wrap: anywhere; }
.credits__col a:hover { color: var(--sun); }
.credits__links { display: flex; gap: 14px; margin-top: 4px; }
/* stay in the loop: one email field and a button on a single line */
.credits__news p { margin: 0 0 4px; font-size: 14px; line-height: 1.5; color: var(--text-dim); }
.news__row { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(var(--ink-rgb), .3); padding: 2px 0 6px; transition: border-color .2s; }
.news__row:focus-within { border-bottom-color: var(--text); }
.news.is-invalid .news__row { border-bottom: 2px solid #d92d20; padding-bottom: 5px; }
.news input[type="email"] { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: 15px var(--f-body); padding: 6px 0; outline: none; }
.news input::placeholder { color: rgba(var(--ink-rgb), .42); }
.news button { flex: none; border: 0; border-radius: 99px; padding: 8px 15px; background: var(--text); color: var(--surface); font: 600 13px var(--f-body); cursor: pointer; transition: background .2s, color .2s; }
.news button:hover { background: var(--sun); color: var(--on-sun); }
.news button:disabled { opacity: .6; cursor: default; }
.news__note { min-height: 1.4em; margin: 6px 0 0 !important; font-size: 12.5px !important; color: var(--text-dim); }
.news__note[data-state="sent"] { color: #1f7a3a; font-weight: 600; }
.news__note[data-state="error"] { color: #d92d20; font-weight: 600; }
.credits__news .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.credits__links a { font-size: 13px; color: var(--text-dim); }

.credits__base {
  display: flex; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap;
  margin-top: clamp(28px, 5svh, 48px); padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-dim);
}
.credits__base a { text-decoration: none; color: var(--text); }

@media (max-width: 860px) {
  .credits__top { grid-template-columns: 1fr; }
  .roll { height: 240px; }
  .credits__grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .credits__brand { grid-column: 1 / -1; }
  .credits__news { grid-column: 1 / -1; max-width: 460px; }
}
@media (max-width: 520px) {
  /* phone: the top nav already has the page links, so the contact column stands alone */
  .credits { padding-top: 48px; }
  .credits__line { margin: 12px 0 18px; }
  .roll { height: 190px; }
  .roll__list { gap: 26px; padding: 28px 16px; }
  .credits__grid { grid-template-columns: minmax(0, 1fr); gap: 20px 14px; margin-top: 32px; padding-top: 24px; }
  .credits__grid > nav.credits__col { display: none; }
  .credits__col { font-size: 12.5px; }
  .credits__brand p { font-size: 13px; margin-top: 8px; }
  .credits__base { flex-direction: column; gap: 6px; margin-top: 24px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .roll__track { animation: none; } .roll { overflow-y: auto; } }


/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .grain { display: none; }
}

/* ---------- TEMPORARY: font switcher (remove once a font is picked) ---------- */
html.font-b { --f-display: "Big Shoulders Display", sans-serif; --display-wdth: 100%; --display-wght: 800; --f-body: "Hanken Grotesk", system-ui, sans-serif; }
html.font-c { --f-display: "Gloock", Georgia, serif; --display-wdth: 100%; --display-wght: 400; --f-body: "Hanken Grotesk", system-ui, sans-serif; }
html.font-d { --f-display: "Hanken Grotesk", system-ui, sans-serif; --display-wdth: 100%; --display-wght: 800; --f-body: "Hanken Grotesk", system-ui, sans-serif; }
html.font-d .hero__title, html.font-d .section__head h2 { letter-spacing: -.04em; }
html.font-c .hero__title { line-height: 1; }
.fontpick {
  position: fixed; left: 16px; bottom: 16px; z-index: 300; display: flex; align-items: center; gap: 4px;
  padding: 5px 12px 5px 5px; border-radius: 99px; background: #141413; color: #f3f1ec; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .5);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em;
}
html[data-stage] .fontpick { display: none; }
.fontpick__label { padding: 0 6px 0 8px; text-transform: uppercase; color: rgba(243, 241, 236, .55); }
.fontpick button { width: 30px; height: 30px; border: 0; border-radius: 50%; cursor: pointer; background: rgba(243, 241, 236, .1); color: #f3f1ec; font: 600 12px var(--f-mono); }
.fontpick button.is-on { background: var(--sun); }
.fontpick__name { margin-left: 6px; white-space: nowrap; }