/* ================= BRAND TOKENS =================
   Colours and type match the current studiopropel.ca.
   FONT: the site uses a Helvetica-style neo-grotesk. If you have a licensed
   webfont (e.g. Neue Haas Grotesk / Helvetica Now), add its @font-face and
   put its name first in --font. */
:root {
  --bg: #f9f8f6;
  --fg: #000000;
  --logo-black: #0d0d0d;
  --logo-white: #f3efe9;
  --muted: #6b6a67;
  --line: rgba(0, 0, 0, 0.12);
  --font: Helvetica, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(20px, 2.2vw, 44px);
  --header-h: 90px;
  --header-top: 22px;
  --header-pad: clamp(24px, 3.2vw, 60px);
  --ease: cubic-bezier(.19, 1, .22, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font); font-weight: 400; line-height: 1.4;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 999; background: var(--fg); color: var(--bg); padding: 8px 12px; }

/* ---------- Intro: logo on white, then the white wipes up ---------- */
.intro {
  position: fixed; inset: 0; z-index: 200; background: var(--bg);
  display: grid; place-items: center;
  clip-path: inset(0 0 0 0); transition: clip-path 1.1s cubic-bezier(.77, 0, .18, 1);
}
.intro.done { clip-path: inset(0 0 100% 0); }
.intro-mark { width: 56px; height: 75px; color: var(--logo-black); }
body.intro-lock { overflow: hidden; }

/* ---------- Scroll progress ---------- */
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; background: var(--fg); transform-origin: 0 50%; transform: scaleX(0); z-index: 100; }

/* ---------- Header: menu left, logo centre ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 80; height: var(--header-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: var(--header-top) var(--header-pad) 0; background: var(--bg);
  transition: transform .6s var(--ease), box-shadow .4s;
}
.header.scrolled { box-shadow: 0 1px 0 var(--line); }
.header.hidden { transform: translateY(-100%); }

.burger { width: 24px; height: 24px; position: relative; z-index: 90; }
.burger span { position: absolute; left: 3px; right: 3px; height: 1.4px; background: var(--fg); transition: transform .5s var(--ease), top .5s var(--ease); }
.burger span:nth-child(1) { top: 9px; } .burger span:nth-child(2) { top: 14px; }
body.menu-open .burger span:nth-child(1) { top: 11.5px; transform: rotate(45deg); }
body.menu-open .burger span:nth-child(2) { top: 11.5px; transform: rotate(-45deg); }

/* LOGO PLACEHOLDER: swap the inline SVG for <img src="/assets/studio-propel-logo-black.png" alt="Studio Propel" height="38"> */
.logo { display: block; width: 36px; height: 48px; color: var(--logo-black); transition: transform .6s var(--ease); }
.logo:hover { transform: translateX(4px); }
.logo svg { width: 100%; height: 100%; }

/* ---------- Menu overlay ---------- */
.menu {
  position: fixed; inset: 0; z-index: 75; background: var(--bg);
  display: flex; flex-direction: column; justify-content: flex-start; padding: calc(var(--header-h) + clamp(28px, 6vh, 72px)) var(--gutter) 40px;
  clip-path: inset(0 0 100% 0); transition: clip-path .9s var(--ease);
}
body.menu-open .menu { clip-path: inset(0 0 0 0); }
.menu nav a { display: block; overflow: hidden; font-size: clamp(28px, 3vw, 50px); line-height: 1.1; letter-spacing: -.035em; }
.menu nav a span { display: inline-block; transform: translateY(105%); transition: transform .9s var(--ease); }
body.menu-open .menu nav a span { transform: none; }
.menu nav a:hover span { font-style: italic; font-weight: 700; }
.menu nav a.sub { font-size: clamp(16px, 1.3vw, 20px); letter-spacing: -.01em; color: var(--muted); padding-left: .2em; line-height: 1.5; }
.menu-foot { margin-top: 56px; display: flex; gap: 28px; font-size: 15px; color: var(--muted); }
.menu-foot a:hover { color: var(--fg); }

/* ---------- Hero ---------- */
.hero { padding: calc(var(--header-h) + clamp(32px, 5vw, 96px)) var(--gutter) clamp(28px, 3vw, 52px); }
.hero h1 {
  margin: 0; font-weight: 400; font-size: clamp(30px, 4.2vw, 84px);
  line-height: 1.04; letter-spacing: -.035em;
}
.hero h1 .line { display: block; overflow: hidden; padding-bottom: .08em; }
.hero h1 .word { display: inline-block; transform: translateY(110%); transition: transform 1.3s var(--ease); }
.hero.in h1 .word { transform: none; }
.hero h1 b { font-weight: 700; }
.hero h1 .bi { font-weight: 700; font-style: italic; letter-spacing: -.04em; }
/* The long dash in the headline, drawn as a rule so it animates in */
.hero h1 .dash { display: inline-block; width: .9em; height: .075em; background: currentColor; vertical-align: .3em; margin-right: .25em; transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease) .5s; }
.hero.in h1 .dash { transform: scaleX(1); }
.hero-sub { margin-top: 20px; font-size: clamp(14px, 1.15vw, 20px); letter-spacing: -.01em; opacity: 0; transform: translateY(12px); transition: all 1s var(--ease) .9s; }
.hero.in .hero-sub { opacity: 1; transform: none; }
.hero-sub a { position: relative; }
.hero-sub a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.hero-sub a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Showreel: grows from inset to full bleed on scroll ---------- */
.reel-wrap { position: relative; height: 150vh; }
.reel {
  position: sticky; top: calc(var(--header-h) + var(--gutter)); height: min(calc(100svh - var(--header-h) - 2 * var(--gutter)), calc((100vw - 2 * var(--gutter)) * .5625)); overflow: hidden;
  /* settles aligned with the page margins, 16:9, rather than edge to edge */
  clip-path: inset(0 calc(var(--gutter) + var(--inset-x, 6%)) var(--inset-y, 5%));
  will-change: clip-path;
}
.reel-media { position: absolute; inset: 0; transform: scale(var(--reel-scale, 1.15)); will-change: transform; }
.reel-media video { width: 100%; height: 100%; object-fit: cover; }
/* SHOWREEL PLACEHOLDER: slow-moving monochrome gradient until the real video goes in */
.reel-ph {
  position: absolute; inset: 0; background:
    linear-gradient(100deg, #1a1a1a 0%, #5a5a5a 22%, #262626 40%, #8d8d8d 58%, #1e1e1e 76%, #4a4a4a 100%);
  background-size: 300% 100%; animation: streak 9s linear infinite; filter: blur(8px);
}
@keyframes streak { to { background-position: -300% 0; } }
.reel-label { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 2; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(248,247,245,.6); border: 1px dashed rgba(248,247,245,.35); padding: 8px 14px; white-space: nowrap; }

/* ---------- Film rows: alternating image / title ---------- */
.films { padding: clamp(40px, 6vw, 90px) 0 clamp(48px, 6vw, 96px); }
.film {
  display: grid; align-items: center; gap: clamp(20px, 2.8vw, 56px);
  grid-template-columns: 58fr 42fr; margin-bottom: clamp(56px, 6.5vw, 130px);
}
.film:last-child { margin-bottom: 0; }
.film.flip { grid-template-columns: 48fr 52fr; }
.film.flip .film-media { order: 2; }
.film.flip .film-text { order: 1; text-align: right; padding-left: var(--gutter); padding-right: 0; }
.film-text { padding-right: var(--gutter); }

.film-media {
  position: relative; aspect-ratio: 2.05 / 1; overflow: hidden; display: block;
  clip-path: inset(0 100% 0 0); transition: clip-path 1.5s var(--ease);
}
.film.flip .film-media { clip-path: inset(0 0 0 100%); }
.film.in .film-media { clip-path: inset(0 0 0 0); }
.film-inner { position: absolute; inset: -8% 0; will-change: transform; }
.film-inner > * { transition: transform 1.4s var(--ease); }
.film:hover .film-inner > * { transform: scale(1.04); }
.film-inner img, .film-inner video { width: 100%; height: 100%; object-fit: cover; }
/* COVER PLACEHOLDER: swap .ph for <img src="/assets/covers/....jpg" alt=""> or a muted looping <video> */
.ph { position: absolute; inset: 0; background: var(--ph, #cfccc6); }
.ph::before { content: attr(data-label); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(0,0,0,.45); border: 1px dashed rgba(0,0,0,.25); padding: 8px 14px; white-space: nowrap; }
.ph.dark::before { color: rgba(255,255,255,.6); border-color: rgba(255,255,255,.3); }

.film-kicker { font-size: clamp(14px, 1.1vw, 20px); letter-spacing: -.01em; margin-bottom: .35em; opacity: 0; transform: translateY(14px); transition: all 1s var(--ease) .35s; }
.film-kicker b { font-weight: 700; }
.film-title { margin: 0; font-weight: 400; text-transform: uppercase; font-size: clamp(34px, 5vw, 100px); line-height: .92; letter-spacing: -.035em; }
.film-title .l { display: block; overflow: hidden; padding-bottom: .04em; }
.film-title .l > span { display: inline-block; transform: translateY(105%); transition: transform 1.2s var(--ease); }
.film.in .film-kicker { opacity: 1; transform: none; }
.film.in .film-title .l > span { transform: none; }
.film.in .film-title .l:nth-child(1) > span { transition-delay: .2s; }
.film.in .film-title .l:nth-child(2) > span { transition-delay: .3s; }
.film-cta { display: inline-block; margin-top: 1.1em; font-size: clamp(12px, .9vw, 16px); position: relative; opacity: 0; transition: opacity 1s var(--ease) .6s; }
.film.in .film-cta { opacity: 1; }
.film-cta::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.film:hover .film-cta::after, .film-cta:hover::after { transform: scaleX(1); transform-origin: left; }

/* ================= ADDITIONS (backup of the previous version: backups/index-before-additions.html) ================= */

/* Shared small label, e.g. (The studio) */
.eyebrow { font-size: clamp(14px, 1.1vw, 20px); letter-spacing: -.01em; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 0 var(--gutter) 18px; border-bottom: 1px solid var(--line); margin: 0 0 clamp(40px, 5vw, 80px); }
.section-head .count { font-variant-numeric: tabular-nums; }

/* Studio statement: words light up as you scroll */
.statement { display: grid; grid-template-columns: 1fr 3fr; gap: 24px; padding: clamp(80px, 11vw, 180px) var(--gutter); }
.statement p { margin: 0; font-size: clamp(24px, 2.9vw, 52px); line-height: 1.12; letter-spacing: -.03em; }
.statement p .w { opacity: .14; transition: opacity .35s; }
.statement p .w.lit { opacity: 1; }
.statement p b { font-weight: 700; }
.statement p i { font-weight: 700; }

/* Capabilities list */
.caps { padding: clamp(40px, 6vw, 100px) 0 clamp(64px, 8vw, 140px); }
.cap { display: grid; grid-template-columns: 80px 1fr 1fr 40px; align-items: center; gap: 24px; padding: clamp(18px, 2vw, 30px) var(--gutter); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.cap::before { content: ""; position: absolute; inset: 0; background: var(--fg); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease); z-index: 0; }
.cap > * { position: relative; z-index: 1; transition: color .4s var(--ease), transform .6s var(--ease); }
.cap:hover::before { transform: scaleY(1); transform-origin: top; }
.cap:hover > * { color: var(--bg); }
.cap:hover .cap-name { transform: translateX(12px); font-style: italic; font-weight: 700; }
.cap-num { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--muted); }
.cap-name { font-size: clamp(28px, 3.4vw, 64px); letter-spacing: -.035em; line-height: 1; }
.cap-desc { font-size: clamp(14px, 1.1vw, 19px); color: var(--muted); max-width: 36ch; }
.cap-arrow { font-size: 22px; justify-self: end; transform: rotate(-45deg); }
.cap:hover .cap-arrow { transform: rotate(0); }

/* Field Notes */
.notes { padding: 0 0 clamp(64px, 8vw, 140px); }
.notes .section-head a { position: relative; }
.notes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 32px); padding: 0 var(--gutter); }
.note { display: block; }
.note-img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 16px; }
.note-img .ph { transition: transform 1.2s var(--ease); }
.note:hover .note-img .ph { transform: scale(1.04); }
.note-meta { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.note-title { margin: 0; font-weight: 400; font-size: clamp(18px, 1.6vw, 28px); line-height: 1.15; letter-spacing: -.02em; max-width: 24ch; }
.note:hover .note-title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* Generic reveal for the new sections */
.rv { opacity: 0; transform: translateY(30px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.notes-grid .note:nth-child(2) { transition-delay: .1s; }
.notes-grid .note:nth-child(3) { transition-delay: .2s; }

@media (max-width: 800px) {
  .statement { grid-template-columns: 1fr; }
  .cap { grid-template-columns: 44px 1fr 24px; }
  .cap-desc { display: none; }
  .notes-grid { grid-template-columns: 1fr; }
  .note-img { aspect-ratio: 16 / 10; }
}

/* ---------- Contact ---------- */
.contact { padding: clamp(48px, 6vw, 96px) var(--gutter) clamp(32px, 3vw, 48px); border-top: 1px solid var(--line); }
.contact-label { display: block; font-size: clamp(14px, 1.1vw, 20px); letter-spacing: -.01em; margin-bottom: .6em; }
.contact-big {
  display: inline-block; font-size: clamp(30px, 4.2vw, 84px); line-height: 1.04; letter-spacing: -.035em; font-weight: 400;
}
.contact-big .l { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .1em .18em 0; margin-bottom: -.18em; }
.contact-big .l > span { display: inline-block; transform: translateY(105%); transition: transform 1.3s var(--ease); }
.contact-big .bi { font-weight: 700; font-style: italic; }
.contact-big .arrow { display: inline-block; font-weight: 300; transition: transform .7s var(--ease); }
.contact-big:hover .arrow { transform: translate(.08em, -.08em) rotate(45deg); }
.contact.in .contact-big .l > span { transform: none; }
.contact.in .contact-big .l:nth-child(2) > span { transition-delay: .1s; }
.contact.in .contact-big .l:nth-child(3) > span { transition-delay: .2s; }
.contact-label, .contact-row { opacity: 0; transform: translateY(12px); transition: all 1s var(--ease) .4s; }
.contact.in .contact-label, .contact.in .contact-row { opacity: 1; transform: none; }
.contact-row { margin-top: clamp(24px, 2.6vw, 40px); display: flex; gap: 24px; flex-wrap: wrap; justify-content: space-between; font-size: clamp(14px, 1.05vw, 18px); }
.contact-row a { position: relative; }
.contact-row a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.contact-row a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Footer ---------- */
footer { padding: 28px var(--gutter) 36px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; }
footer nav { display: flex; gap: 24px; }
footer a { transition: opacity .3s; }
footer a:hover { opacity: .55; }

/* ---------- Cursor (desktop) ---------- */
/* Small dot everywhere; over playable media it morphs into the > logo */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 95; pointer-events: none;
  width: 11px; height: 15px; mix-blend-mode: difference; color: #fff;
}
.cursor .dot {
  position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: currentColor;
  transition: transform .45s var(--ease), opacity .3s;
}
.cursor svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transform: scale(.3) translateX(-30%); transition: transform .5s var(--ease), opacity .3s;
}
.cursor.play .dot { transform: scale(0); opacity: 0; }
.cursor.play svg { opacity: 1; transform: none; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 800px) {
  :root { --header-h: 74px; --header-top: 14px; }
  .logo { width: 30px; height: 40px; }
  .hero { padding-top: calc(var(--header-h) + 32px); }
  .reel { top: calc(var(--header-h) + var(--gutter)); height: calc((100vw - 2 * var(--gutter)) * 1.1); max-height: calc(100svh - var(--header-h) - 2 * var(--gutter)); }
  .film, .film.flip { grid-template-columns: 1fr; gap: 18px; }
  .film.flip .film-media { order: 1; }
  .film.flip .film-text { order: 2; text-align: left; padding-left: var(--gutter); }
  .film-text { padding-left: var(--gutter); }
  .film-media { aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1 !important; transform: none !important; }
  .statement p .w { opacity: 1 !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero h1 .word, .hero-sub, .film-kicker, .film-cta, .film-title .l > span, .contact-big .l > span, .contact-label, .contact-row { transform: none !important; opacity: 1 !important; }
  .hero h1 .dash { transform: none !important; }
  .film-media { clip-path: none !important; }
  .intro { display: none; }
  .reel { clip-path: none !important; }
  .reel-wrap { height: auto; }
  .reel { position: relative; top: 0; }
}

/* ================= INNER PAGES: page head ================= */
.page-head { padding: calc(var(--header-h) + clamp(48px, 7vw, 130px)) var(--gutter) clamp(44px, 5.5vw, 100px); }
.page-title { margin: 0; font-weight: 700; text-transform: uppercase; font-size: clamp(40px, 5.6vw, 108px); line-height: .95; letter-spacing: -.035em; }
.page-title .l { display: block; overflow: hidden; padding-bottom: .05em; }
.page-title .l > span { display: inline-block; transform: translateY(105%); transition: transform 1.3s var(--ease) .1s; }
.page-head.in .page-title .l > span { transform: none; }
.page-intro { margin: 18px 0 0; max-width: 62ch; font-size: clamp(15px, 1.25vw, 22px); line-height: 1.4; letter-spacing: -.005em; opacity: 0; transform: translateY(12px); transition: all 1s var(--ease) .45s; }
.page-head.in .page-intro { opacity: 1; transform: none; }

/* ================= BRAND FILMS: two-up grid ================= */
.bf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, .9vw, 16px); padding: 0 var(--gutter) clamp(64px, 8vw, 140px); }
.bf-card { position: relative; display: block; aspect-ratio: 1.44 / 1; color: #fff; }
/* The frame wipes up when the card scrolls into view (clip lives on the frame so the card can still be observed) */
.bf-frame { position: absolute; inset: 0; overflow: hidden; clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--ease); }
.bf-card:nth-child(even) .bf-frame { transition-delay: .12s; }
.bf-card.in .bf-frame { clip-path: inset(0 0 0 0); }
.bf-inner { position: absolute; inset: -8% 0; will-change: transform; }
.bf-inner > * { transition: transform 1.4s var(--ease); }
.bf-card:hover .bf-inner > * { transform: scale(1.04); }
.bf-inner img, .bf-inner video { width: 100%; height: 100%; object-fit: cover; }
/* COVER PLACEHOLDER: swap .ph for <img src="/assets/covers/....jpg" alt=""> or a muted looping <video> */
.bf-card .ph::before { top: 18px; right: 18px; left: auto; transform: none; color: rgba(255,255,255,.6); border-color: rgba(255,255,255,.3); }
.bf-frame::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.28); transition: background .6s var(--ease); pointer-events: none; }
.bf-card:hover .bf-frame::after { background: rgba(0,0,0,.12); }
/* BRAND LOGO PLACEHOLDER: swap .bf-logo text for <img src="/assets/logos/....svg" alt="Brand"> (white logo, ~64px tall) */
.bf-logo {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  font-size: clamp(16px, 1.6vw, 28px); font-weight: 700; letter-spacing: -.02em; white-space: nowrap;
  padding: .5em .9em; border: 1px dashed rgba(255,255,255,.45);
}
.bf-logo img { display: block; height: clamp(36px, 4vw, 72px); width: auto; }
.bf-card:has(.bf-logo img) .bf-logo { border: 0; padding: 0; }
.bf-caption {
  position: absolute; left: 0; right: 0; bottom: 8%; z-index: 2; text-align: center;
  font-style: italic; font-size: clamp(13px, 1.05vw, 18px); letter-spacing: .01em; padding: 0 16px;
  transform: translateY(6px); opacity: .92; transition: transform .6s var(--ease), opacity .6s;
}
.bf-caption b { font-weight: 700; }
.bf-caption .sep { display: inline-block; width: .9em; height: 1px; background: currentColor; vertical-align: .32em; margin: 0 .5em; }
.bf-card:hover .bf-caption { transform: none; opacity: 1; }

@media (max-width: 800px) {
  .bf-grid { grid-template-columns: 1fr; }
  .bf-card:nth-child(even) .bf-frame { transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) {
  .bf-frame { clip-path: none !important; }
  .page-title .l > span, .page-intro { transform: none !important; opacity: 1 !important; }
}

/* ================= FILM PAGE (template: /originals/first-day) ================= */
/* Player is framed, not full-bleed: capped width, and never taller than ~72% of the screen */
.fp-hero { padding: calc(var(--header-h) + clamp(12px, 1.6vw, 28px)) var(--gutter) 0; }
.fp-player { width: min(100%, 1320px, calc(72svh * 16 / 9)); margin: 0 auto; }
.fp-player {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #111; color: #fff; cursor: pointer;
  clip-path: inset(6% 6% 6% 6%); transition: clip-path 1.4s var(--ease);
}
.fp-hero.in .fp-player { clip-path: inset(0 0 0 0); }
.fp-poster { position: absolute; inset: 0; transition: transform 1.6s var(--ease), opacity .5s; transform: scale(1.08); }
.fp-hero.in .fp-poster { transform: scale(1); }
.fp-player:hover .fp-poster { transform: scale(1.02); }
.fp-poster img { width: 100%; height: 100%; object-fit: cover; }
.fp-player::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 65%, rgba(0,0,0,.35)); pointer-events: none; transition: opacity .5s; }
.fp-runtime { position: absolute; left: clamp(16px, 2vw, 28px); bottom: clamp(14px, 1.8vw, 24px); z-index: 2; font-size: 13px; letter-spacing: .02em; opacity: .9; }
.fp-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.fp-player.playing { cursor: auto; }
.fp-player.playing::after, .fp-player.playing .fp-runtime { opacity: 0; pointer-events: none; }

.fp-info { padding: clamp(18px, 1.8vw, 28px) var(--gutter) clamp(56px, 7vw, 120px); }
.fp-info > * { max-width: min(100%, 1320px, calc(72svh * 16 / 9)); margin-left: auto !important; margin-right: auto !important; }
.fp-kicker { font-size: clamp(14px, 1.1vw, 20px); margin-bottom: .5em; }
.fp-kicker b { font-weight: 700; }
.fp-title { margin: 0; font-weight: 400; text-transform: uppercase; font-size: clamp(44px, 7vw, 140px); line-height: .9; letter-spacing: -.04em; }
.fp-title .l { display: block; overflow: hidden; padding-bottom: .04em; }
.fp-title .l > span { display: inline-block; transform: translateY(105%); transition: transform 1.3s var(--ease); }
.fp-info.in .fp-title .l > span { transform: none; }
.fp-rule { height: 1px; background: var(--line); margin: clamp(28px, 3.5vw, 56px) 0; transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease) .3s; }
.fp-info.in .fp-rule { transform: scaleX(1); }
.fp-body { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(28px, 5vw, 96px); }
.fp-meta { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 24px; align-content: start; font-size: clamp(13px, 1vw, 16px); }
.fp-meta dt { color: var(--muted); }
.fp-meta dd { margin: 0; }
.fp-synopsis p { margin: 0 0 1.1em; font-size: clamp(17px, 1.55vw, 27px); line-height: 1.38; letter-spacing: -.012em; max-width: 44ch; }
.fp-synopsis p.closer { font-weight: 700; font-style: italic; }
.fp-meta, .fp-synopsis { opacity: 0; transform: translateY(16px); transition: all 1.1s var(--ease) .45s; }
.fp-info.in .fp-meta, .fp-info.in .fp-synopsis { opacity: 1; transform: none; }

/* Frames (grabs from the film) */
.fp-stills { padding: 0 var(--gutter) clamp(64px, 8vw, 140px); }
.fp-stills .section-head { padding-left: 0; padding-right: 0; }
.stills-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1vw, 20px); }
.still { position: relative; display: block; aspect-ratio: 1.18 / 1; overflow: hidden; padding: 0; border: 0; cursor: zoom-in; }
.still .frame { position: absolute; inset: 0; clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease); }
.still.in .frame { clip-path: inset(0 0 0 0); }
.stills-grid .still:nth-child(3n+2) .frame { transition-delay: .1s; }
.stills-grid .still:nth-child(3n+3) .frame { transition-delay: .2s; }
.still .ph, .still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.still:hover .ph, .still:hover img { transform: scale(1.04); }
/* FRAME PLACEHOLDER: swap .ph for <img src="/assets/frames/first-day/studio-propel-first-day-01.jpg" alt=""> */

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 150; background: rgba(12,12,12,.96); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s; color: #f3efe9; }
.lightbox.open { opacity: 1; visibility: visible; }
.lb-stage { width: min(88vw, calc(80vh * 1.6)); aspect-ratio: 1.6 / 1; position: relative; transform: scale(.96); transition: transform .6s var(--ease); }
.lightbox.open .lb-stage { transform: none; }
.lb-stage > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.lb-stage .ph::before { color: rgba(255,255,255,.6); border-color: rgba(255,255,255,.3); }
.lb-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; display: grid; place-items: center; font-size: 22px; color: inherit; opacity: .7; transition: opacity .3s; }
.lb-btn:hover { opacity: 1; }
.lb-prev { left: clamp(8px, 2vw, 32px); }
.lb-next { right: clamp(8px, 2vw, 32px); }
.lb-close { position: absolute; top: 20px; right: clamp(12px, 2vw, 32px); font-size: 14px; letter-spacing: .04em; opacity: .75; }
.lb-close:hover { opacity: 1; }
.lb-count { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); font-size: 13px; font-variant-numeric: tabular-nums; opacity: .7; }

/* Next film (superseded below by the image banner version) */
.fp-next { display: block; padding: clamp(56px, 7vw, 120px) var(--gutter); border-top: 1px solid var(--line); position: relative; overflow: hidden; }
.fp-next .eyebrow { display: block; margin-bottom: .6em; }
.fp-next-title { font-size: clamp(40px, 6vw, 120px); text-transform: uppercase; letter-spacing: -.04em; line-height: .9; display: inline-flex; align-items: center; gap: .25em; transition: transform .7s var(--ease); }
.fp-next-title .arrow { display: inline-block; width: .42em; height: .56em; color: currentColor; transition: transform .7s var(--ease); }
.fp-next:hover .fp-next-title { transform: translateX(.2em); }
.fp-next:hover .fp-next-title .arrow { transform: translateX(.25em); }
.fp-next-sub { display: block; margin-top: 1em; font-size: clamp(13px, 1vw, 16px); color: var(--muted); }

@media (max-width: 800px) {
  .fp-body { grid-template-columns: 1fr; }
  .stills-grid { grid-template-columns: 1fr 1fr; }
  .fp-player { clip-path: none; width: 100%; }
  .fp-info > * { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .fp-player, .still .frame { clip-path: none !important; }
  .fp-title .l > span, .fp-meta, .fp-synopsis { transform: none !important; opacity: 1 !important; }
  .fp-rule { transform: none !important; }
}
.fp-poster .ph::before { top: clamp(16px, 2vw, 28px); right: clamp(16px, 2vw, 28px); left: auto; transform: none; }

/* ================= SERIES PAGE (All Creatives) ================= */
.page-head.right { text-align: right; }
.page-head.right .page-intro { margin-left: auto; max-width: 60ch; text-wrap: balance; }
.page-note { margin: 12px 0 0; font-size: 12px; font-style: italic; color: var(--muted); opacity: 0; transition: opacity 1s var(--ease) .6s; }
.page-head.in .page-note { opacity: 1; }
/* Episode cards reuse .bf-card; the title sits large over the image */
.ep-title { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-38%); z-index: 2; text-align: center; padding: 0 20px; transition: transform .8s var(--ease); }
.ep-title strong { display: block; font-size: clamp(30px, 3.9vw, 72px); font-weight: 700; letter-spacing: -.045em; line-height: 1; text-transform: lowercase; }
.ep-title span { display: block; margin-top: .35em; font-size: clamp(15px, 1.5vw, 28px); letter-spacing: -.03em; text-transform: lowercase; }
.ep-title span b { font-weight: 700; }
.ep-title .sep { display: inline-block; width: .9em; height: 1.5px; background: currentColor; vertical-align: .3em; margin: 0 .35em; }
.bf-card:hover .ep-title { transform: translateY(-44%); }

/* ================= NEXT FILM: image banner, so it reads differently from the typographic "Say hello" ================= */
.fp-next {
  display: block; position: relative; overflow: hidden; color: #fff; border-top: 0;
  margin: 0 var(--gutter) clamp(32px, 4vw, 64px); padding: 0; height: clamp(200px, 28vh, 320px);
}
.fp-next-media { position: absolute; inset: 0; transition: transform 1.4s var(--ease); }
.fp-next-media .ph { position: absolute; inset: 0; }
.fp-next-media .ph::before { top: 18px; right: 18px; left: auto; transform: none; color: rgba(255,255,255,.6); border-color: rgba(255,255,255,.3); }
.fp-next-media img, .fp-next-media video { width: 100%; height: 100%; object-fit: cover; }
.fp-next::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.55)); transition: background .6s var(--ease); pointer-events: none; }
.fp-next:hover .fp-next-media { transform: scale(1.04); }
.fp-next-text { position: absolute; left: clamp(20px, 3vw, 48px); right: clamp(20px, 3vw, 48px); bottom: clamp(20px, 3vw, 44px); z-index: 2; }
.fp-next .eyebrow { display: block; margin-bottom: .5em; opacity: .85; }
.fp-next-title { font-size: clamp(32px, 4vw, 72px); }
.fp-next-sub { color: rgba(255,255,255,.8); margin-top: .8em; }
/* Contact after a Next-film banner doesn't need its own top rule */
.fp-next + .contact { border-top: 0; padding-top: clamp(24px, 3vw, 48px); }

/* Film page: closing fact + concept-film disclaimer */
.fp-synopsis p.fp-fact { font-size: clamp(15px, 1.15vw, 19px); color: var(--muted); max-width: 52ch; }
.fp-synopsis p.fp-note { margin-top: 2em; font-size: 13px; line-height: 1.5; color: var(--muted); letter-spacing: 0; }
.fp-synopsis p.fp-note b { color: var(--fg); font-weight: 700; }

/* ================= NEXT FILM: slim text row (overrides the banner version above) ================= */
.fp-next {
  height: auto; overflow: visible; color: var(--fg);
  margin: 0 var(--gutter); padding: clamp(22px, 2.4vw, 36px) 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
}
.fp-next::after { content: none; }
.fp-next .eyebrow { display: inline; margin: 0; opacity: 1; color: var(--muted); }
.fp-next-right { display: flex; align-items: baseline; gap: 16px; text-align: right; }
.fp-next-title { font-size: clamp(22px, 2.2vw, 38px); line-height: 1.1; letter-spacing: -.025em; text-transform: none; position: relative; transition: transform .6s var(--ease); }
.fp-next-title::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease); }
.fp-next:hover .fp-next-title { transform: translateX(-6px); }
.fp-next:hover .fp-next-title::after { transform: scaleX(1); transform-origin: left; }
.fp-next-sub { display: inline; margin: 0; color: var(--muted); font-size: clamp(13px, 1vw, 16px); white-space: nowrap; }
.fp-next + .contact { border-top: 0; padding-top: clamp(56px, 7vw, 120px); }
@media (max-width: 600px) {
  .fp-next { flex-direction: column; gap: 10px; }
  .fp-next-right { flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; }
}

/* No focus ring after a mouse click on the menu button (keyboard focus still shows one) */
.burger:focus:not(:focus-visible) { outline: none; }

/* Bigger menu links on phones (menu links on phones) */
@media (max-width: 800px) {
  .menu nav a { font-size: clamp(36px, 10vw, 56px); }
  .menu nav a.sub { font-size: 20px; }
}

/* Short pages: footer always sits at the bottom of the screen, never floating mid-page */
body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; display: flex; flex-direction: column; }
main > .contact:last-child { margin-top: auto; }
footer { flex-shrink: 0; }

/* Social icons (footer + menu) */
.soc-link { display: inline-grid; place-items: center; width: 28px; height: 28px; transition: opacity .3s, transform .4s var(--ease); }
.soc { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.soc .fill { fill: currentColor; stroke: none; }
.soc-link:hover { transform: translateY(-2px); }
footer nav { gap: 14px; align-items: center; }
footer { align-items: center; }
.menu-foot { gap: 14px; }
.menu-foot .soc-link { color: var(--fg); }
.menu-foot .soc { width: 22px; height: 22px; }

/* ================= HOME: Field Notes two-up ================= */
.notes-grid.two { grid-template-columns: repeat(2, 1fr); }
.notes-grid.two .note-img { aspect-ratio: 16 / 10; }

/* ================= FIELD NOTES index ================= */
.fn-list { padding: 0 var(--gutter) clamp(64px, 8vw, 140px); border-top: 0; }
.fn-row { display: grid; grid-template-columns: 1fr 2.4fr 1.1fr; gap: clamp(20px, 3vw, 56px); align-items: start; padding: clamp(28px, 3.2vw, 52px) 0; border-top: 1px solid var(--line); }
.fn-row:last-child { border-bottom: 1px solid var(--line); }
.fn-date { font-size: clamp(13px, 1vw, 16px); line-height: 1.6; }
.fn-by { color: var(--muted); }
.fn-main { display: block; }
.fn-title { display: block; font-size: clamp(24px, 2.6vw, 46px); line-height: 1.08; letter-spacing: -.03em; transition: transform .6s var(--ease); }
.fn-ex { display: block; margin-top: .9em; font-size: clamp(14px, 1.1vw, 18px); line-height: 1.5; color: var(--muted); max-width: 58ch; }
.fn-img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.fn-img .ph { transition: transform 1.2s var(--ease); }
.fn-img .ph::before { font-size: 10px; }
.fn-row:hover .fn-title { transform: translateX(8px); }
.fn-row:hover .fn-img .ph { transform: scale(1.05); }
@media (max-width: 800px) {
  .fn-row { grid-template-columns: 1fr; gap: 14px; }
  .fn-img { order: -1; aspect-ratio: 16 / 10; }
  .notes-grid.two { grid-template-columns: 1fr; }
}

/* ================= CONTACT ================= */
.ct { display: grid; grid-template-columns: 1fr 1.8fr; gap: clamp(32px, 6vw, 120px); padding: 0 var(--gutter) clamp(72px, 9vw, 160px); }
.ct-side { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ct-side .eyebrow { color: var(--muted); margin-top: 18px; }
.ct-side .eyebrow:first-child { margin-top: 0; }
.ct-email { font-size: clamp(20px, 1.9vw, 32px); letter-spacing: -.02em; position: relative; }
.ct-email::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease); }
.ct-email:hover::after { transform: scaleX(1); transform-origin: left; }
.ct-soc { display: flex; gap: 14px; margin-left: -4px; }
.ct-form { display: flex; flex-direction: column; gap: clamp(20px, 2.2vw, 32px); }
.ct-chips { border: 0; padding: 0; margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 10px; }
.ct-chips legend { padding: 0; margin-bottom: 14px; color: var(--muted); }
.ct-chips label { cursor: pointer; }
.ct-chips input { position: absolute; opacity: 0; pointer-events: none; }
.ct-chips span { display: inline-block; padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; font-size: 15px; transition: all .3s var(--ease); }
.ct-chips label:hover span { border-color: var(--fg); }
.ct-chips input:checked + span { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.ct-chips input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 2px; }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.2vw, 32px); }
.ct-field { display: flex; flex-direction: column; gap: 8px; }
.ct-field span { font-size: 13px; color: var(--muted); }
.ct-field input, .ct-field textarea {
  font: inherit; font-size: clamp(17px, 1.4vw, 22px); color: var(--fg); background: transparent;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 8px 0 12px; outline: none; resize: vertical;
  transition: border-color .3s;
}
.ct-field input:focus, .ct-field textarea:focus { border-bottom-color: var(--fg); }
.ct-field.err input, .ct-field.err textarea { border-bottom-color: #b3261e; }
.ct-send {
  align-self: flex-start; margin-top: 8px; padding: 16px 30px; border-radius: 999px; background: var(--fg); color: var(--bg);
  font-size: 16px; display: inline-flex; gap: 10px; align-items: center; transition: transform .4s var(--ease), opacity .3s;
}
.ct-send:hover { transform: translateY(-2px); }
.ct-send span { display: inline-block; transition: transform .5s var(--ease); }
.ct-send:hover span { transform: translate(3px, -3px); }
.ct-msg { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--muted); }
@media (max-width: 800px) {
  .ct, .ct-row { grid-template-columns: 1fr; }
}

/* Brand chevron tilted slightly up, used in place of the ↗ arrow */
.up-chev { display: inline-block; width: .42em; height: .56em; vertical-align: 0; transform: rotate(-14deg); transition: transform .6s var(--ease); }
.contact-big .arrow { margin-left: .12em; transform: none !important; }
.contact-big:hover .up-chev { transform: rotate(-14deg) translate(.12em, -.04em); }
.ct-send .up-chev { width: 10px; height: 14px; vertical-align: -1px; }
.ct-send:hover span { transform: none; }
.ct-send:hover .up-chev { transform: rotate(-14deg) translate(3px, -1px); }

/* Keep "Studio Propel" together in the hero headline */
.hero h1 .nw { white-space: nowrap; }
/* "What we create" rows: tilted logo chevron instead of an arrow */
.cap-arrow { font-size: 26px; line-height: 1; transform: none !important; }
.cap:hover .cap-arrow .up-chev { transform: rotate(-14deg) translate(4px, -2px); }

/* ================= SHOWREEL sizing (overrides above) =================
   The wrapper is only as tall as the reel plus its margin, so there is never blank space under it.
   The "pinned while it opens" moment is kept only where the reel fills the screen (wide, landscape windows). */
:root { --reel-h: min(calc(100svh - var(--header-h) - 2 * var(--gutter)), calc((100vw - 2 * var(--gutter)) * .5625)); }
.reel-wrap { height: calc(var(--reel-h) + var(--gutter)); }
.reel { height: var(--reel-h); }
@media (min-aspect-ratio: 16/10) and (min-width: 801px) {
  .reel-wrap { height: calc(var(--reel-h) + var(--gutter) + 30vh); }
}
@media (max-width: 800px) {
  :root { --reel-h: min(calc((100vw - 2 * var(--gutter)) * 1.1), calc(100svh - var(--header-h) - 2 * var(--gutter))); }
  .reel { height: var(--reel-h); max-height: none; position: relative; top: 0; }
}

/* Over videos the cursor is a solid white logo (with a soft shadow so it still reads on bright footage) */
.cursor.play { mix-blend-mode: normal; color: #fff; filter: drop-shadow(0 0 3px rgba(0,0,0,.35)); }

/* Social icons drawn in the logo's language: square corners, mitred joins, square ends */
.soc { stroke-width: 1.7; stroke-linecap: square; stroke-linejoin: miter; }

/* Social icons: solid filled style (final) */
.soc.solid { fill: currentColor; stroke: none; width: 20px; height: 20px; }
.menu-foot .soc.solid { width: 22px; height: 22px; }

/* ================= FIELD NOTES: article ================= */
.ar-head { padding: calc(var(--header-h) + clamp(40px, 6vw, 110px)) var(--gutter) clamp(28px, 3vw, 48px); width: 100%; max-width: calc(1120px + 2 * var(--gutter)); margin: 0 auto; box-sizing: border-box; align-self: center; }
.ar-back { display: inline-flex; gap: 8px; align-items: center; font-size: clamp(13px, 1vw, 16px); color: var(--muted); margin-bottom: clamp(18px, 2vw, 28px); transition: color .3s; }
.ar-back:hover { color: var(--fg); }
.ar-back .up-chev { transform: rotate(180deg); width: .55em; height: .75em; }
.ar-title { margin: 0; font-weight: 400; font-size: clamp(34px, 4.6vw, 84px); line-height: 1.02; letter-spacing: -.035em; max-width: 20ch; text-wrap: balance; }
.ar-title .l { display: block; overflow: hidden; padding-bottom: .06em; }
.ar-title .l > span { display: inline-block; transform: translateY(105%); transition: transform 1.3s var(--ease) .1s; }
.ar-head.in .ar-title .l > span { transform: none; }
.ar-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: clamp(18px, 2vw, 28px); font-size: clamp(13px, 1vw, 16px); color: var(--muted); opacity: 0; transition: opacity 1s var(--ease) .5s; }
.ar-meta b { color: var(--fg); font-weight: 400; }
.ar-head.in .ar-meta { opacity: 1; }

.ar-hero { padding: 0 var(--gutter); }
.ar-hero-in { position: relative; max-width: 1120px; margin: 0 auto; aspect-ratio: 16 / 8; overflow: hidden; clip-path: inset(0 0 100% 0); transition: clip-path 1.4s var(--ease) .3s; }
.ar-head.in + .ar-hero .ar-hero-in { clip-path: inset(0 0 0 0); }
.ar-hero-in img { width: 100%; height: 100%; object-fit: cover; }

.ar-body { padding: clamp(48px, 6vw, 100px) var(--gutter) clamp(56px, 7vw, 120px); }
.ar-body > * { max-width: 680px; margin-left: auto; margin-right: auto; }
.ar-body p, .ar-body li { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.62; letter-spacing: -.005em; }
.ar-body p { margin-top: 0; margin-bottom: 1.25em; }
.ar-body p.lede { font-size: clamp(21px, 1.8vw, 28px); line-height: 1.4; letter-spacing: -.015em; margin-bottom: 1.4em; }
.ar-body h2 { font-size: clamp(24px, 2.2vw, 36px); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; margin-top: 2.2em; margin-bottom: .8em; }
.ar-body h3 { font-size: clamp(19px, 1.5vw, 23px); font-weight: 700; letter-spacing: -.015em; margin: 1.8em auto .6em; }
.ar-body ul, .ar-body ol { padding-left: 1.2em; margin-bottom: 1.6em; }
.ar-body li { margin-bottom: .7em; }
.ar-body li::marker { color: var(--muted); }
.ar-body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ar-body blockquote { margin: 2em auto; padding: 0; max-width: 820px; }
.ar-body blockquote p { font-size: clamp(26px, 2.8vw, 46px); line-height: 1.12; letter-spacing: -.03em; font-weight: 700; font-style: italic; margin: 0; }
.ar-body .ar-end { font-size: clamp(22px, 2vw, 32px); line-height: 1.25; letter-spacing: -.02em; margin-top: 1.6em; }
.ar-body .ar-end b { font-style: italic; }

/* Film embed inside an article */
.ar-film { display: block; position: relative; max-width: 900px !important; margin: 2.4em auto; aspect-ratio: 16 / 9; overflow: hidden; color: #fff; }
.ar-film .ph, .ar-film img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.ar-film:hover .ph, .ar-film:hover img { transform: scale(1.03); }
.ar-film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.6)); pointer-events: none; }
.ar-film-cap { position: absolute; left: clamp(16px, 2.4vw, 32px); bottom: clamp(14px, 2vw, 26px); z-index: 2; font-size: clamp(13px, 1vw, 16px); }
.ar-film-cap b { display: block; font-size: clamp(20px, 2vw, 32px); letter-spacing: -.02em; font-weight: 700; margin-top: 2px; }
.ar-body .ar-film { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .ar-title .l > span { transform: none !important; }
  .ar-meta { opacity: 1 !important; }
  .ar-hero-in { clip-path: none !important; }
}

/* Articles: no oversized text. Opening, quotes and closing lines stay at body size */
.ar-body p.lede { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.62; letter-spacing: -.005em; margin-bottom: 1.25em; }
.ar-body .ar-end { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.62; letter-spacing: -.005em; margin-top: 0; }
.ar-body .ar-end b { font-style: normal; }
.ar-body blockquote { max-width: 680px; margin: 0 auto 1.25em; }
.ar-body blockquote p { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.62; font-weight: 400; font-style: normal; letter-spacing: -.005em; }

/* All Creatives: link out to the series site */
.ac-site { display: inline-flex; align-items: baseline; gap: .35em; margin-top: 22px; font-size: clamp(15px, 1.2vw, 20px); padding: 12px 22px; border: 1px solid var(--fg); border-radius: 999px; transition: background .3s, color .3s; opacity: 0; transition: opacity 1s var(--ease) .55s, background .3s, color .3s; }
.page-head.in .ac-site { opacity: 1; }
.ac-site:hover { background: var(--fg); color: var(--bg); }
.ac-site .up-chev { width: .5em; height: .68em; }
.ac-site:hover .up-chev { transform: rotate(-14deg) translate(2px, -1px); }
@media (prefers-reduced-motion: reduce) { .ac-site { opacity: 1 !important; } }

/* All Creatives: website button sits under the episode cards */
.ac-cta { display: flex; justify-content: flex-end; padding: 0 var(--gutter) clamp(64px, 8vw, 140px); margin-top: calc(-1 * clamp(64px, 8vw, 140px) + clamp(20px, 2vw, 32px)); }
.ac-cta .ac-site { opacity: 1; margin-top: 0; }

/* All Creatives: quiet centred text link under the episodes (final) */
.ac-cta { justify-content: center; }
.ac-cta .ac-site { padding: 0; border: 0; border-radius: 0; background: none !important; color: var(--fg) !important; font-size: clamp(16px, 1.3vw, 20px); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.ac-cta .ac-site:hover { text-decoration-thickness: 2px; }

/* Film page: quote from the subject, at body size */
.fp-synopsis p.fp-quote { font-style: italic; }
.fp-synopsis p.fp-quote span { display: block; margin-top: .4em; font-style: normal; font-size: clamp(13px, 1vw, 16px); color: var(--muted); }
.fp-synopsis p.fp-note a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

/* ================= INTRO, smoothed (overrides the wipe above) =================
   Logo settles in, lifts away, then the panel glides up as one surface while the page rises into place. */
.intro { clip-path: none !important; transform: translate3d(0, 0, 0); transition: transform 1.3s cubic-bezier(.76, 0, .24, 1); will-change: transform; }
.intro.done { transform: translate3d(0, -100%, 0); }
.intro-mark { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .8s cubic-bezier(.4, 0, .2, 1), transform 1s cubic-bezier(.22, 1, .36, 1); }
.intro.ready .intro-mark { opacity: 1; transform: none; }
.intro.leaving .intro-mark { opacity: 0; transform: translate3d(0, -28px, 0); transition-duration: .55s, .9s; transition-timing-function: cubic-bezier(.4, 0, 1, 1), cubic-bezier(.76, 0, .24, 1); }
#main { transition: transform 1.5s cubic-bezier(.22, 1, .36, 1); }
body.intro-lock #main { transform: translate3d(0, 7vh, 0); }
#main.no-anim { transition: none !important; }

/* Showreel video */
.reel-video { width: 100%; height: 100%; object-fit: cover; display: block; background: #111; }

/* White logo centred over the showreel */
.reel-logo { position: absolute; top: 50%; left: 50%; z-index: 2; width: clamp(34px, 3.4vw, 54px); height: auto; aspect-ratio: 266 / 358; transform: translate(-50%, -50%); color: #fff; filter: drop-shadow(0 0 12px rgba(0,0,0,.25)); pointer-events: none; }

/* ================= INTRO, v3: lighter and smoother (overrides above) =================
   - scrollbar space is reserved, so nothing jumps sideways when the page unlocks
   - only the panel and the hero move (not the whole page)
   - one soft ease-in-out curve; the logo drifts and fades while riding the panel up */
html { scrollbar-gutter: stable; }
.intro { transition: transform 1.45s cubic-bezier(.65, 0, .35, 1); contain: strict; backface-visibility: hidden; }
.intro.leaving .intro-mark { opacity: 0; transform: translate3d(0, -14px, 0); transition: opacity 1s cubic-bezier(.4, 0, .2, 1), transform 1.2s cubic-bezier(.65, 0, .35, 1); }
#main, body.intro-lock #main { transform: none !important; transition: none !important; }
.hero { transition: transform 1.7s cubic-bezier(.22, 1, .36, 1); }
body.intro-lock .hero { transform: translate3d(0, 48px, 0); }
.hero.no-anim { transition: none !important; }

/* ================= FILM PLAYER v2: one click, plays in place ================= */
/* The YouTube frame sits underneath the cover, ready to go; the cover fades away once the film is playing */
.fp-player iframe { z-index: 1; }
.fp-poster { z-index: 2; }
.fp-runtime { pointer-events: none; transition: opacity .5s; }
.fp-player.through .fp-poster { pointer-events: none; }          /* Safari + phones: the tap goes straight to the film */
.fp-player.playing .fp-poster { opacity: 0; pointer-events: none; transition: opacity .7s var(--ease), transform 1.6s var(--ease); }
.fp-player.waiting .fp-runtime { animation: fp-pulse 1.2s ease-in-out infinite; }
@keyframes fp-pulse { 50% { opacity: .35; } }
.cursor { transition: opacity .3s; }
.cursor.off { opacity: 0; }

/* Showreel: soft black wash so the white logo stands out */
.reel::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .28); pointer-events: none; }

/* Menu: room for descenders (g, y, p) inside the reveal mask, without changing the spacing */
.menu nav a { padding-bottom: .16em; margin-bottom: -.16em; }
.menu nav a span { transform: translateY(125%); }
body.menu-open .menu nav a span { transform: none; }

/* Header: equal space above and below the logo (keeps the original top gap, adds the same below) */
:root { --header-h: 112px; --header-top: 0px; }
@media (max-width: 800px) { :root { --header-h: 88px; --header-top: 0px; } }

/* Intro: the nav bar fades in as the panel starts to lift, rather than being uncovered last */
body.intro-on .header { z-index: 210; opacity: 0; }
body.intro-on.intro-nav .header { opacity: 1; transition: opacity .9s cubic-bezier(.4, 0, .2, 1) .25s; }
/* Safari draws each animated word as its own layer cut to its box; give the italic hover lean room on both sides without shifting the text */
.menu nav a span { padding: 0 .14em; margin: 0 -.14em; }

/* Text reveal masks: room for descenders (g, y) and the italic lean (r, e).
   Safari clips each animated word to its own box, so every word gets invisible padding,
   cancelled by negative margins so nothing moves. */
.hero h1 .word, .film-title .l > span, .contact-big .l > span, .page-title .l > span, .fp-title .l > span, .ar-title .l > span {
  padding: 0 .12em .18em; margin: 0 -.12em -.18em;
}
.hero h1 .line { padding-bottom: .24em; margin-bottom: -.16em; }
.film-title .l, .fp-title .l { padding-bottom: .24em; margin-bottom: -.2em; }
.page-title .l { padding-bottom: .24em; margin-bottom: -.19em; }
.ar-title .l { padding-bottom: .24em; margin-bottom: -.18em; }
/* hidden state sits fully below the taller masks */
.hero h1 .word, .film-title .l > span, .contact-big .l > span, .page-title .l > span, .fp-title .l > span, .ar-title .l > span { transform: translateY(135%); }
.hero.in h1 .word, .film.in .film-title .l > span, .contact.in .contact-big .l > span, .page-head.in .page-title .l > span, .fp-info.in .fp-title .l > span, .ar-head.in .ar-title .l > span { transform: none; }
.contact-big .l > span { padding: 0 .1em .18em 0; margin: 0 0 -.18em 0; }
.contact-big .l { padding-right: 0; }
.contact-big .l > .arrow { margin-left: .12em; }

/* ================= SEARCH (icon on the right of the nav bar) ================= */
.header .right { display: flex; justify-content: flex-end; align-items: center; }
.search-btn { width: 26px; height: 26px; display: grid; place-items: center; color: var(--fg); position: relative; z-index: 90; }
.search-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; transition: transform .5s var(--ease); }
.search-btn:hover svg { transform: scale(1.08); }
body.search-open { overflow: hidden; }

.search {
  position: fixed; inset: 0; z-index: 76; background: var(--bg); overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--header-h) + clamp(28px, 6vh, 72px)) var(--gutter) 48px;
  opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility .45s;
}
body.search-open .search { opacity: 1; visibility: visible; }
body.search-open .header { transform: none !important; }
.search-inner { max-width: 1100px; transform: translateY(14px); transition: transform .7s var(--ease); }
body.search-open .search-inner { transform: none; }
.search-bar { display: flex; align-items: baseline; gap: 20px; border-bottom: 1px solid var(--fg); }
.search-input {
  flex: 1; min-width: 0; border: 0; border-radius: 0; background: transparent; color: var(--fg); outline: none; -webkit-appearance: none; appearance: none;
  font: inherit; font-size: clamp(28px, 3vw, 50px); line-height: 1.2; letter-spacing: -.035em; padding: 0 0 .18em;
}
.search-input::placeholder { color: var(--muted); opacity: 1; }
.search-input::-webkit-search-cancel-button, .search-input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.search-close { font-size: 14px; color: var(--muted); padding: 6px 0; }
.search-close:hover { color: var(--fg); }

.search-results { list-style: none; margin: clamp(16px, 2.4vh, 28px) 0 0; padding: 0; }
.search-results a { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sr-thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #ecebe7; }
.sr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.sr-none { display: grid; place-items: center; }
.sr-none svg { width: 14px; height: 19px; color: var(--muted); }
.sr-title { display: block; font-size: clamp(18px, 1.6vw, 26px); line-height: 1.2; letter-spacing: -.02em; padding-right: .15em; }
.sr-meta { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.search-results a:hover .sr-title, .search-results a.on .sr-title { font-style: italic; font-weight: 700; }
.search-results a:hover .sr-thumb img, .search-results a.on .sr-thumb img { transform: scale(1.05); }
.sr-empty { padding: 18px 0; color: var(--muted); }
@media (max-width: 800px) {
  .search-results a { grid-template-columns: 72px 1fr; gap: 14px; }
  .search-bar { gap: 12px; }
}

/* Headline: always exactly three lines. Each line stays on one row, and the size is capped so the
   longest line ("— a creative studio behind stories", about 14em wide, plus a safety margin) fits the screen */
.hero h1 { font-size: min(clamp(30px, 4.2vw, 84px), calc((100vw - 2 * var(--gutter) - 24px) / 15)); }
.hero h1 .line { white-space: nowrap; }

/* Header logo: clapperboard snap on hover (animated in site.js; the point stays fixed) */
.logo:hover { transform: none; }

/* Cursor: normal pointer everywhere; over playable media it is replaced by the white > (no dot) */
.cursor .dot { display: none; }
html.has-cursor .film-media, html.has-cursor .bf-card,
html.has-cursor .fp-player:not(.playing):not(.through), html.has-cursor .ar-film { cursor: none; }

/* Episode pages: "Visit All Creatives website" sits under Featuring, across both columns */
.fp-meta .fp-meta-link { grid-column: 1 / -1; margin-top: 6px; }
.fp-meta-link a { display: inline-flex; align-items: baseline; gap: .4em; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.fp-meta-link .up-chev { width: .5em; height: .68em; }
.fp-meta-link a:hover .up-chev { transform: rotate(-14deg) translate(.12em, -.04em); }

/* Frames on phones: one per row (nine frames don't split evenly into two columns) */
@media (max-width: 800px) {
  .stills-grid { grid-template-columns: 1fr; }
  .stills-grid .still:nth-child(n) .frame { transition-delay: 0s; }
}
@media (max-width: 800px) {
  .stills-grid { gap: 8px; }
  .still { aspect-ratio: 16 / 9; }   /* shorter, cinematic strips so nine frames take far less scrolling */
}

/* ================= PLAYBOOK ================= */
footer .foot-links { gap: 20px; }
footer .foot-links a { font-size: 14px; }
@media (max-width: 600px) { footer { row-gap: 14px; } footer .foot-links { order: 3; width: 100%; } }

.pb-crumbs { font-size: clamp(13px, 1vw, 15px); color: var(--muted); margin-bottom: clamp(18px, 2vw, 28px); display: flex; flex-wrap: wrap; gap: 8px; }
.pb-crumbs a:hover { color: var(--fg); }
.pb-crumbs [aria-current] { color: var(--fg); }
.pb-head .ar-title { max-width: 22ch; }
.pb-body { padding-top: clamp(28px, 3vw, 48px); }

/* The short answer: first thing on every article, set apart */
.pb-answer { border: 1px solid var(--fg); padding: clamp(20px, 2.4vw, 34px); margin-bottom: clamp(36px, 4vw, 64px) !important; }
.pb-answer .eyebrow { display: block; font-size: 13px; color: var(--muted); margin-bottom: .8em; }
.ar-body .pb-answer p { font-size: clamp(18px, 1.5vw, 23px); line-height: 1.5; letter-spacing: -.012em; margin: 0; }
.ar-body .pb-answer ul { margin: 0; }
.ar-body .pb-answer li { margin-bottom: .4em; }

/* Tables: scroll sideways on phones instead of squashing */
.pb-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; border-collapse: collapse; max-width: 900px !important; width: 100%; margin: 1.6em auto 2em; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.45; }
.pb-body th, .pb-body td { text-align: left; vertical-align: top; padding: 12px 18px 12px 0; border-top: 1px solid var(--line); min-width: 130px; }
.pb-body thead th { border-top: 0; border-bottom: 1px solid var(--fg); font-weight: 700; padding-top: 0; }
.pb-body td strong { font-weight: 700; }

/* FAQ: plain visible text, so every answer is readable without clicking */
.pb-faq { margin-top: clamp(48px, 5vw, 80px) !important; border-top: 1px solid var(--line); padding-top: 8px; }
.pb-faq .pb-q { padding: 4px 0 2px; }
.pb-faq h3 { margin-top: 1.4em !important; margin-bottom: .4em !important; }

/* Budget guide call-to-action */
.pb-cta { margin: clamp(48px, 5vw, 80px) auto 0 !important; padding: clamp(24px, 3vw, 44px); background: #efede8; }
.pb-cta .eyebrow { display: block; font-size: 13px; color: var(--muted); margin-bottom: .5em; }
.ar-body .pb-cta p, .pb-cta p { margin: 0 0 1em; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.55; max-width: 52ch; }
.ar-body .pb-cta .pb-cta-title, .pb-cta .pb-cta-title { font-size: clamp(22px, 2vw, 32px); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; margin-bottom: .4em; }
.pb-btn { display: inline-flex; align-items: baseline; gap: .45em; padding: 12px 22px; border: 1px solid var(--fg); border-radius: 999px; font-size: 15px; text-decoration: none !important; transition: background .3s, color .3s; }
.pb-btn:hover { background: var(--fg); color: var(--bg); }
.pb-btn .up-chev { width: .5em; height: .68em; }
.pb-hub-cta { padding: 0 var(--gutter) clamp(64px, 8vw, 140px); }
.pb-hub-cta .pb-cta { max-width: 1120px; margin: 0 auto !important; }

/* Hub list */
.pb-filter { margin-top: clamp(22px, 2.4vw, 36px); }
.pb-list { padding: 0 var(--gutter) clamp(48px, 6vw, 100px); }
.pb-row { display: grid; grid-template-columns: 1fr 2.6fr 40px; gap: clamp(20px, 3vw, 56px); align-items: start; padding: clamp(26px, 3vw, 48px) 0; border-top: 1px solid var(--line); }
.pb-row:last-child { border-bottom: 1px solid var(--line); }
.pb-row[hidden] { display: none; }
.pb-row-meta { font-size: clamp(13px, 1vw, 16px); line-height: 1.6; color: var(--muted); }
.pb-cat { color: var(--fg); }
.pb-row-title { display: block; font-size: clamp(24px, 2.6vw, 46px); line-height: 1.08; letter-spacing: -.03em; transition: transform .6s var(--ease); }
.pb-row-ex { display: block; margin-top: .9em; font-size: clamp(14px, 1.1vw, 18px); line-height: 1.5; color: var(--muted); max-width: 62ch; }
.pb-row-go .up-chev { width: 18px; height: 24px; transform: rotate(-14deg); transition: transform .6s var(--ease); }
.pb-row:hover .pb-row-title { transform: translateX(6px); }
.pb-row:hover .pb-row-go .up-chev { transform: rotate(-14deg) translate(4px, -2px); }
@media (max-width: 800px) { .pb-row { grid-template-columns: 1fr; gap: 10px; } .pb-row-go { display: none; } }

/* Related */
.pb-related { padding: 0 var(--gutter) clamp(56px, 7vw, 110px); max-width: calc(680px + 2 * var(--gutter)); margin: 0 auto; box-sizing: border-box; width: 100%; }
.pb-related .eyebrow { display: block; color: var(--muted); margin-bottom: 12px; }
.pb-related a { display: block; padding: 16px 0; border-top: 1px solid var(--line); }
.pb-related .pb-cat { display: block; font-size: 13px; color: var(--muted); }
.pb-rel-title { font-size: clamp(19px, 1.6vw, 26px); letter-spacing: -.02em; }

/* Budget guide form */
.pb-guide .pb-form { max-width: 680px; margin: 2em auto 1.4em; }
.ar-body .pb-small { font-size: 14px; color: var(--muted); }

/* Playbook FAQ: dropdowns */
.pb-faq .pb-q { border-bottom: 1px solid var(--line); padding: 0; }
.pb-faq .pb-q summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; }
.pb-faq .pb-q summary::-webkit-details-marker { display: none; }
.pb-faq .pb-q summary h3 { margin: 0 !important; font-size: clamp(17px, 1.35vw, 21px); }
.pb-faq .pb-q summary:hover h3 { opacity: .65; }
.pb-q-icon { position: relative; flex: 0 0 14px; width: 14px; height: 14px; }
.pb-q-icon::before, .pb-q-icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; transition: transform .4s var(--ease); }
.pb-q-icon::after { transform: rotate(90deg); }
.pb-q[open] .pb-q-icon::after { transform: rotate(0deg); }
.pb-q-a { overflow: hidden; }
.ar-body .pb-q-a p { margin: 0 0 20px; }
.pb-q[open] .pb-q-a { animation: pb-open .45s var(--ease); }
@keyframes pb-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.pb-faq h2 { margin-bottom: .4em !important; }

/* Footer: page links */
footer .foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
@media (max-width: 800px) { footer .foot-links { order: 3; width: 100%; } }

/* Playbook: one column, same left and right edge for everything (like the film pages) */
:root { --pb-w: min(100%, 900px); }
.pb-head { max-width: calc(900px + 2 * var(--gutter)); }
.pb-head .ar-title { max-width: none; }
.pb-body > *, .pb-body table, .pb-guide .pb-form { max-width: var(--pb-w) !important; margin-left: auto !important; margin-right: auto !important; }
.pb-body table { width: 100%; }
.pb-body th:last-child, .pb-body td:last-child { padding-right: 0; }
.pb-cta { box-sizing: border-box; }
.pb-related { max-width: calc(900px + 2 * var(--gutter)); }
.pb-hub-cta .pb-cta { max-width: none; }
/* Playbook: tighter gap between the byline and the short answer */
.pb-head { padding-bottom: 0; }
.pb-body { padding-top: clamp(22px, 2.2vw, 34px); }
.pb-answer .eyebrow { font-style: italic; font-size: 14px; color: var(--fg); }
/* Playbook: tighter space around the line before the FAQ */
.pb-faq { margin-top: clamp(24px, 2.4vw, 36px) !important; padding-top: 0; }
.pb-body .pb-faq h2 { margin-top: clamp(24px, 2.4vw, 36px) !important; }

/* Playbook: tighter spacing between sections */
.pb-body h2 { margin-top: 1.5em !important; margin-bottom: .55em !important; }
.pb-body h2 + p { margin-top: 0; }
.pb-body table { margin: 1.2em auto 1.4em !important; }
.pb-body ul { margin-bottom: 1.2em; }

/* Playbook tables on phones: each row becomes a card, every value labelled with its column */
@media (max-width: 700px) {
  .pb-body table { display: block; overflow: visible; border: 0; }
  .pb-body thead { display: none; }
  .pb-body tbody { display: block; }
  .pb-body tr { display: block; border-top: 1px solid var(--fg); padding: 14px 0 6px; }
  .pb-body tr:last-child { border-bottom: 1px solid var(--line); }
  .pb-body td { display: grid; grid-template-columns: 38% 1fr; gap: 12px; min-width: 0; border: 0; padding: 0 0 10px; }
  .pb-body td::before { content: attr(data-label); color: var(--muted); font-size: 13px; line-height: 1.5; }
  .pb-body td:first-child { display: block; font-size: 17px; padding-bottom: 10px; }
  .pb-body td:first-child::before { content: none; }
}

/* Footer on phones: page links stacked as a tidy column, then copyright and socials on one line */
@media (max-width: 700px) {
  footer { display: grid; grid-template-columns: 1fr auto; row-gap: 22px; align-items: center; }
  footer .foot-links { order: -1; grid-column: 1 / -1; width: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
  footer .foot-links a { font-size: 15px; }
}
@media (max-width: 700px) { footer .foot-links { grid-template-columns: 1fr; gap: 10px; } }

/* Playbook: the opening answer as an editorial lead paragraph (no label, no box) */
.ar-body p.pb-lede { font-size: clamp(22px, 2.1vw, 32px); line-height: 1.32; letter-spacing: -.02em; margin: 0 auto clamp(30px, 3vw, 48px) !important; padding-bottom: clamp(30px, 3vw, 48px); border-bottom: 1px solid var(--line); text-wrap: pretty; }

/* Field Notes articles: one column, same left and right edge for everything (matches the Playbook) */
.ar-head { max-width: calc(900px + 2 * var(--gutter)); }
.ar-head .ar-title { max-width: none; }
.ar-hero-in { max-width: 900px; }
.ar-body > *, .ar-body .ar-film { max-width: min(100%, 900px) !important; margin-left: auto !important; margin-right: auto !important; }

/* Episodes not yet public: poster only, no play, a quiet note in place of the runtime */
html.has-cursor .fp-player.fp-soon, .fp-player.fp-soon { cursor: default; }
.fp-player.fp-soon:hover .fp-poster { transform: scale(1); }
.ep-soon { position: absolute; top: clamp(12px, 1.4vw, 20px); left: clamp(12px, 1.4vw, 20px); z-index: 3; font-size: 12px; letter-spacing: .04em; text-transform: lowercase; padding: 6px 10px; border: 1px solid rgba(255,255,255,.6); border-radius: 999px; background: rgba(0,0,0,.18); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }


/* Playbook filter: one row that scrolls sideways on small screens instead of wrapping */
@media (max-width: 800px) {
  .pb-filter { min-width: 0; max-width: 100vw; box-sizing: border-box; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 2px; scroll-padding: 0 var(--gutter); }
  .pb-filter::-webkit-scrollbar { display: none; }
  .pb-filter label { flex: 0 0 auto; }
  .pb-filter span { white-space: nowrap; }
}

/* Images carry width/height (prevents layout shift); keep them fluid. Zero specificity so component rules win. */
:where(img) { max-width: 100%; }
:where(img[width][height]) { height: auto; }

/* Real post images in Field Notes lists and homepage notes */
.fn-img img, .note-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.fn-row:hover .fn-img img { transform: scale(1.05); }
.note:hover .note-img img { transform: scale(1.04); }

/* Homepage Field Notes cards: shorter images */
.notes-grid.two .note-img { aspect-ratio: 2 / 1; }
@media (max-width: 800px) { .notes-grid.two .note-img { aspect-ratio: 16 / 9; } }

/* Forms: hidden spam trap, and a quiet state while sending */
.ct-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.ct-form.sending .ct-send { opacity: .5; pointer-events: none; }

/* Originals page: Series and Short Films sections, stacked with a tight gap so Short Films shows early */
.orig-group { scroll-margin-top: 110px; }
.orig-group .bf-grid { padding-bottom: 0; }
.orig-group .section-head { margin-bottom: clamp(20px, 2vw, 32px); }
.orig-group + .orig-group { margin-top: clamp(20px, 2vw, 32px); }
.orig-group:last-of-type .bf-grid { padding-bottom: clamp(64px, 8vw, 115px); }

/* Count heading above the Brand Films and All Creatives grids (same style as Originals) */
.grid-head { margin-bottom: clamp(20px, 2vw, 32px); }
/* Field Notes and Playbook lists: the count heading's rule replaces the first row's top border */
.grid-head + .fn-list > .fn-row:first-child, .grid-head + .pb-list > .pb-row:first-of-type { border-top: 0; padding-top: 0; }

/* Intro: the > is the same size as the header logo, then flies up and lands on it */
.intro-mark { width: 36px; height: 48px; }
@media (max-width: 800px) { .intro-mark { width: 30px; height: 40px; } }
.intro-mark.intro-fly { position: fixed; z-index: 230; margin: 0; opacity: 1 !important; transform-origin: 0 0; transform: translate3d(0, 0, 0); transition: transform 1.25s cubic-bezier(.65, 0, .35, 1) !important; pointer-events: none; }
body.intro-logo-pending .header .logo { opacity: 0; }

/* Frames: no entrance animation, they're simply there; only the hover zoom remains */
.still .frame { clip-path: none !important; transform: none !important; transition: none !important; }
.still img { transform: none; transition: transform 1.2s var(--ease); }
.still:hover img { transform: scale(1.04); }

/* Homepage headline on phones: as large as the longest line allows while staying on three lines */
@media (max-width: 800px) {
  .hero h1 { font-size: min(calc((100vw - 2 * var(--gutter) - 15px) / 14.2), 34px); }
}

/* Menu on phones: slightly smaller links */
@media (max-width: 800px) {
  .menu nav a { font-size: clamp(30px, 8.6vw, 46px); }
  .menu nav a.sub { font-size: 17px; }
}

/* Field Notes quotes: set apart with a rule and larger bold italic type */
.ar-body blockquote { margin: 2em auto !important; padding: .1em 0 .1em clamp(16px, 1.6vw, 24px) !important; border-left: 2px solid var(--fg); }
.ar-body blockquote p { font-size: clamp(21px, 1.9vw, 28px); line-height: 1.3; font-weight: 700; font-style: italic; letter-spacing: -.02em; margin: 0; }
.ar-body blockquote.ar-pull p { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.45; }

/* "Coming soon": plain text like "Watch the film", in the top-right corner (episode cards and episode player) */
.ep-soon { left: auto; right: clamp(16px, 2vw, 28px); top: clamp(14px, 1.8vw, 24px); padding: 0; border: 0; border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; font-size: 13px; letter-spacing: .02em; text-transform: none; opacity: .9; color: #fff; }
.fp-player.fp-soon .fp-runtime { left: auto; right: clamp(16px, 2vw, 28px); bottom: auto; top: clamp(14px, 1.8vw, 24px); }

/* Film players: a 16:9 banner until the film starts, then the frame opens to 4:3 to match the films
   (no black bars). Height capped so the whole frame fits on screen with the title peeking below. */
.fp-player.open { aspect-ratio: 4 / 3; width: min(100%, 1320px, calc((100svh - var(--header-h) - 130px) * 4 / 3)); }
@media (max-width: 800px) { .fp-player.open { width: min(100%, calc((100svh - var(--header-h) - 110px) * 4 / 3)); } }

/* Brand: sharp edges. Every button, chip and field is square-cornered (the cursor dot stays round). */
button, input, select, textarea, .ct-chips span, .ct-send, .ac-site, .pb-btn, .ep-soon { border-radius: 0 !important; }