/* SDS · site.css
   Direction: a screening room. A black stage, white type, and the films as the only colour on the page.
   One system on every page: Geist for titles and text, Geist Mono for slate metadata (category and labels;
   no film shows a runtime), and Bodoni Moda italic reserved for one word, "standard", in the studio's proposition.
   Signature: every film appears in its true frame (16:9, matted widescreen or 9:16). Work rows are
   justified so different shapes share a height; elsewhere frames sit on a shared baseline instead of
   inside letterbox boxes. Layout: one column on phones, a 12-column rhythm from 1024px. Single dark theme. */

/* Official Google Fonts Latin subsets, hosted with the site. Licenses: assets/fonts/*-OFL.txt. */
@font-face{
  font-family:"Geist";font-style:normal;font-weight:300 600;font-display:swap;
  src:url("../fonts/geist-latin-variable.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:"Geist Mono";font-style:normal;font-weight:400 500;font-display:swap;
  src:url("../fonts/geist-mono-latin-variable.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:"Bodoni Moda";font-style:italic;font-weight:400;font-display:swap;
  src:url("../fonts/bodoni-moda-latin-italic-opsz.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;
}

/* ---------- Tokens ----------
   Text tones keep at least 6:1 contrast on the stage; hairlines are decorative, control borders >= 3:1. */
:root{
  --bg:#050505;          /* screen black */
  --stage:#0b0b0b;       /* behind frames and raised panels */
  --text:#f5f5f2;        /* titles, 18.7:1 */
  --text-2:#d6d6d1;      /* body copy, 14:1 */
  --text-3:#b4b4b0;      /* slate labels and metadata, 9.8:1 */
  --text-4:#8f8f8a;      /* quiet numbers and legal, 6.3:1 */
  --line:#232323;        /* hairline */
  --line-2:#3a3a3a;      /* list rule */
  --line-3:#6b6b67;      /* control border */
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --serif:"Bodoni Moda","Bodoni 72","Didot",Georgia,serif;
  --max:1440px;
  --gutter:clamp(16px,4.4vw,64px);
  --gap:clamp(16px,1.8vw,24px);
  --section:clamp(48px,4.2vw,72px);
  --section-inner:clamp(24px,2.4vw,36px);
  --process-row:22px;
  --header-h:64px;
  --radius:2px;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
@media (max-width:639px){:root{--section:32px;--section-inner:24px;--process-row:16px}}
@media (min-width:640px){:root{--header-h:88px}}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg);scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;font-kerning:normal}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
p{margin:0;text-wrap:pretty}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
ul,ol{margin:0;padding:0;list-style:none}
dl,dd,figure{margin:0}
em.s{font-style:normal}
::selection{background:var(--text);color:var(--bg)}
:focus-visible{outline:2px solid var(--text);outline-offset:4px;border-radius:var(--radius)}
.skip{position:absolute;left:16px;top:-100px;z-index:200;padding:12px 18px;border-radius:var(--radius);background:var(--text);color:var(--bg);font-weight:500;text-decoration:none}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.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}
.ambient{display:none}

/* ---------- Type ---------- */
.eyebrow{font:400 12px/1.5 var(--mono);letter-spacing:.02em;color:var(--text-3)}
.display{font-weight:400}
.h1{font-size:clamp(40px,6.2vw,88px);line-height:.98;letter-spacing:-.048em}
.h2{font-size:clamp(30px,4.6vw,68px);line-height:1.02;letter-spacing:-.042em}
.h3{font-size:clamp(21px,1.9vw,28px);line-height:1.2;letter-spacing:-.022em}
.lede{font-size:clamp(17px,1.4vw,21px);line-height:1.55;color:var(--text-2);max-width:46ch}
.muted{color:var(--text-3)}
.note{font-size:14px;line-height:1.65;color:var(--text-3);max-width:64ch}
.num{font-variant-numeric:tabular-nums}

/* ---------- Actions ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border:1px solid transparent;
  border-radius:var(--radius);font:500 15px/1.1 var(--sans);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.btn-light{background:var(--text);color:var(--bg)}
.btn-light:hover{background:#fff}
.btn-glass{background:transparent;color:var(--text);border-color:var(--line-3)}
.btn-glass:hover{border-color:var(--text)}
.btn-sm{min-height:44px;padding:0 16px;font-size:14px}
.btn .ext{font:400 12px/1 var(--mono);opacity:.7}
.actions,.chips{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.link-arrow{display:inline-flex;align-items:center;gap:10px;min-width:44px;min-height:44px;font-size:15px;line-height:1.4;text-decoration:none;color:var(--text)}
.link-arrow::after{content:"→";font-family:var(--mono);transition:transform .25s var(--ease)}
.link-arrow:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.link-arrow:hover::after{transform:translateX(3px)}
.inquiry-note,.hero-inquiry-note{font:400 12px/1.5 var(--mono);color:var(--text-3)}

/* ---------- Frames ----------
   A frame is the film's picture on the stage. .true-frame sizes itself from --ar (width / height) inside a stage
   whose height is --stage of its width (16:9 by default): wider frames fill the width, narrower ones the height. */
.true-frame{position:relative;display:block;width:min(100%,calc(100% * var(--ar) * var(--stage,.5625)));aspect-ratio:var(--ar);
  overflow:hidden;border-radius:var(--radius);background:var(--stage)}
.true-frame picture,.true-frame img{display:block;width:100%;height:100%}
.true-frame img{object-fit:cover}
/* Every real frame gets a fine screen edge, so dark pictures keep their shape on the black stage. */
.film-card__media::after,.hero-film__link::after,.feature::after,.ref-card__frame::after,.true-frame::after,.screen::after{
  content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(245,245,242,.09);pointer-events:none}
/* One watch system. A film's frame is itself the control that plays it, so at rest it shows only the film: no play
   buttons. Pointer hover and keyboard focus reveal a short label over a soft scrim; titles with an arrow open the
   film's page. */
.frame-cue{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;align-items:flex-end;min-height:72px;
  padding:0 clamp(12px,1.4vw,20px) clamp(10px,1.2vw,16px);background:linear-gradient(to top,rgba(5,5,5,.78),rgba(5,5,5,0));
  color:var(--text);font:500 14px/1.2 var(--sans);letter-spacing:-.005em;white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .2s var(--ease)}
.frame-cue::after{content:"→";margin-left:8px;transition:transform .25s var(--ease)}
a:hover>.frame-cue,a:focus-visible>.frame-cue,.poster-btn:hover>.frame-cue,.poster-btn:focus-visible>.frame-cue{opacity:1}
a:hover>.frame-cue::after,a:focus-visible>.frame-cue::after,.poster-btn:hover>.frame-cue::after,.poster-btn:focus-visible>.frame-cue::after{transform:translateX(3px)}

/* ---------- Sections ---------- */
main{display:block}
.section{padding-block:var(--section)}
.section.tight{padding-block:var(--section)}
/* Section rules are inset to the content width, so the stage reads as one dark space. */
.rule{position:relative}
.rule::before{content:"";position:absolute;top:0;left:50%;width:calc(min(100%,var(--max)) - 2 * var(--gutter));height:1px;
  transform:translateX(-50%);background:var(--line);pointer-events:none}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-bottom:clamp(32px,4vw,64px)}
.section-head>div{display:grid;gap:14px}
.split{display:grid;gap:28px}
.split-head{display:grid;gap:14px;align-content:start}
.split-body{min-width:0}
.prose{display:grid;gap:18px;align-content:start}
.prose p{color:var(--text-2);max-width:60ch}
.prose h3{margin-top:10px;font-size:20px;line-height:1.3;letter-spacing:-.015em}
.prose a:not(.link-arrow),.page-head__location a,.note a{color:var(--text);text-decoration-thickness:1px;text-underline-offset:3px}
.page-head{display:grid;gap:20px;padding-top:calc(var(--header-h) + env(safe-area-inset-top,0px) + clamp(32px,5vw,88px));padding-bottom:clamp(36px,4.4vw,72px)}
.page-head .h1{max-width:15ch}
.page-head .lede{max-width:48ch}
.page-head__location{max-width:64ch;font-size:14px;line-height:1.65;color:var(--text-3)}
.page-head--404{min-height:72vh;align-content:center}
@media (min-width:1024px){
  .split{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(32px,3vw,48px)}
  .split>.split-head{grid-column:1/6;position:sticky;top:calc(var(--header-h) + 32px);align-self:start}
  .split>.split-body{grid-column:7/13}
}

/* ---------- Header ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:60;padding-top:env(safe-area-inset-top,0px);background:var(--bg);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.site-header.is-scrolled{border-bottom-color:var(--line)}
.bar{height:var(--header-h);display:flex;align-items:center;gap:10px}
.brand{display:inline-flex;align-items:center;margin-right:auto;min-width:44px;min-height:44px;text-decoration:none;border-radius:var(--radius)}
.brand img{width:48px;height:48px}
.nav{display:none}
.header-cta{flex:none}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:44px;min-height:44px;padding:0 14px;
  border:1px solid var(--line-3);border-radius:var(--radius);background:transparent;cursor:pointer;font:500 13px/1 var(--sans)}
.menu-btn:hover{border-color:var(--text)}
.menu-btn .lines{display:block;width:16px;height:1.5px;background:currentColor;box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor}
@media (max-width:379px){
  .bar{gap:8px}
  .header-cta{padding-inline:12px;font-size:13px}
  .site-header .menu-btn{width:44px;padding:0}
  .site-header .menu-btn>span:last-child{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}
@media (min-width:640px){.brand img{width:72px;height:72px}}
@media (min-width:1024px){
  .nav{display:flex;align-items:center;gap:2px;margin-right:12px}
  .nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;text-decoration:none;font-size:15px;color:var(--text-3);transition:color .2s var(--ease)}
  .nav a:hover,.nav a[aria-current="page"]{color:var(--text)}
  .nav a[aria-current="page"]::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:1px;background:currentColor}
  .site-header .menu-btn{display:none}
}

/* ---------- Menu ---------- */
.menu{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;overflow-y:auto;padding:env(safe-area-inset-top,0px) 0 calc(24px + env(safe-area-inset-bottom,0px));background:var(--bg)}
.menu-body{flex:1;display:flex;flex-direction:column}
.menu-links{margin-top:12px;border-top:1px solid var(--line)}
.menu-links a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;padding:12px 0;border-bottom:1px solid var(--line);
  text-decoration:none;font:400 clamp(32px,10vw,48px)/1 var(--sans);letter-spacing:-.045em}
.menu-links a::after{content:"→";font:400 18px/1 var(--mono);color:var(--text-4)}
.menu-links a[aria-current="page"]{color:var(--text-3)}
.menu-foot{margin-top:auto;padding-top:32px;display:grid;gap:6px}
.menu-foot .btn{width:100%;min-height:54px;margin-bottom:8px;font-size:16px}
.menu-email{display:inline-flex;align-items:center;justify-self:start;min-height:44px;font-size:15px;text-underline-offset:4px;overflow-wrap:anywhere}
@media (prefers-reduced-motion:no-preference){
  .menu:not([hidden]) .menu-links li{animation:menu-rise .45s var(--ease) both}
  .menu-links li:nth-child(2){animation-delay:.04s}.menu-links li:nth-child(3){animation-delay:.08s}.menu-links li:nth-child(4){animation-delay:.12s}
}
@keyframes menu-rise{from{transform:translateY(8px)}to{transform:none}}

/* ---------- Footer ---------- */
.site-footer{position:relative;padding-block:clamp(64px,8vw,120px) calc(28px + env(safe-area-inset-bottom,0px))}
.site-footer::before{content:"";position:absolute;top:0;left:50%;width:calc(min(100%,var(--max)) - 2 * var(--gutter));height:1px;transform:translateX(-50%);background:var(--line)}
.foot{display:grid;gap:48px}
.foot-brand{display:grid;gap:18px;align-content:start}
.foot-brand img{width:72px;height:72px}
.foot-thesis{max-width:none;font:400 clamp(34px,4.4vw,64px)/1 var(--sans);letter-spacing:-.045em}
.foot-thesis .s,.hero-thesis .s{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
.foot-brand .muted{font-size:14px;line-height:1.7;max-width:38ch}
.foot-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
.foot-cols h2{margin-bottom:10px;font:400 12px/1.5 var(--mono);letter-spacing:.02em;color:var(--text-3)}
.foot-cols a{display:inline-flex;align-items:center;gap:6px;min-width:44px;min-height:44px;text-decoration:none;font-size:15px;color:var(--text)}
.foot-cols a:hover{text-decoration:underline;text-underline-offset:5px}
.foot-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:56px;padding-top:20px;border-top:1px solid var(--line);font:400 12px/1.6 var(--mono);color:var(--text-4)}
@media (max-width:639px){
  .site-footer{padding-top:44px}
  .foot{gap:26px}
  .foot-brand{grid-template-columns:48px minmax(0,1fr);align-items:center;gap:14px}
  .foot-brand img{width:48px;height:48px}
  .foot-thesis{display:none}
  .foot-cols{gap:18px 16px}
  .foot-cols>div:first-child{grid-column:1/-1}
  .foot-cols>div:first-child ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
  .foot-cols h2{margin-bottom:2px}
  .foot-legal{margin-top:26px}
}
@media (min-width:640px){.foot-cols{grid-template-columns:repeat(3,minmax(0,1fr))}.foot-brand img{width:88px;height:88px}}
@media (min-width:1024px){.foot{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:48px;align-items:start}.foot-cols{padding-top:8px}}

/* ---------- Starting a project ----------
   One invitation closes every page: its own heading and lead, the inquiry and Contact. Where the page has not already
   shown the process, it follows as one quiet line that starts with the first conversation. */
.inquiry__in{display:grid;gap:28px;padding-block:clamp(56px,7vw,112px)}
.inquiry__head{display:grid;gap:16px;align-content:start}
.inquiry__title{max-width:15ch;font-size:clamp(34px,4.4vw,64px);line-height:1.02;letter-spacing:-.045em}
.inquiry__lead{font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--text-2);max-width:40ch}
.inquiry__body{display:grid;gap:28px;justify-items:start;align-content:end;min-width:0}
.inquiry__body>.actions .btn-light{min-height:52px;padding-inline:24px}
.inquiry__next{display:grid;gap:10px;width:100%;max-width:640px;padding-top:18px;border-top:1px solid var(--line)}
.steps-inline{display:flex;flex-wrap:wrap;align-items:baseline;row-gap:6px;counter-reset:inline-step}
.steps-inline li{display:inline-flex;align-items:baseline;gap:8px;font-size:15px;line-height:1.5;color:var(--text-2)}
.steps-inline li::before{counter-increment:inline-step;content:"0" counter(inline-step);font:400 11px/1 var(--mono);color:var(--text-4)}
.steps-inline li:not(:last-child)::after{content:"→";margin:0 14px 0 6px;font:400 13px/1 var(--mono);color:var(--text-4)}
@media (min-width:1024px){.inquiry__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(48px,6vw,96px);align-items:end}}

/* ---------- Lists, facts and questions ---------- */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;border-top:1px solid var(--line-2)}
.facts div{display:grid;gap:6px;align-content:start;min-width:0;padding:16px 0;border-bottom:1px solid var(--line)}
.facts dt{font:400 12px/1.5 var(--mono);color:var(--text-3)}
.facts dd{min-width:0;font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.steps{display:grid;border-top:1px solid var(--line-2);counter-reset:step}
.steps li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:6px 16px;padding:20px 0;border-bottom:1px solid var(--line)}
.steps li::before{counter-increment:step;content:"0" counter(step);grid-row:1/3;padding-top:5px;font:400 12px/1.4 var(--mono);color:var(--text-3)}
.steps li>*{min-width:0}
.steps .h3{font-size:20px;line-height:1.3;letter-spacing:-.018em}
.steps p{font-size:15px;line-height:1.65;color:var(--text-3)}
.faq{border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary{min-height:64px;padding:14px 0;font-size:18px;line-height:1.35;letter-spacing:-.015em}
.faq summary:focus-visible{outline-offset:-2px}
.faq .a{padding:0 0 22px}
.faq .a p{font-size:16px;line-height:1.65;color:var(--text-2);max-width:62ch}
.plus{position:relative;flex:none;width:14px;height:14px;color:var(--text-3);transition:transform .3s var(--ease)}
.plus::before,.plus::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background:currentColor}
.plus::after{transform:rotate(90deg)}
details[open]>summary .plus{transform:rotate(45deg);color:var(--text)}
summary:hover .plus{color:var(--text)}

/* ---------- Home: hero ----------
   The film leads. Phone: the film, its credit, the thesis, then the inquiry. Desktop: a modest thesis line above the
   film; beside it one column from the top: film credit, the business in a sentence, the inquiry and the email
   alternative. The poster stays beneath the one-pass silent preview. */
.real-work-hero{position:relative;background:var(--bg)}
.real-work-hero .hero-in{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:'film' 'caption' 'title' 'summary';gap:14px;
  padding-top:calc(var(--header-h) + 12px + env(safe-area-inset-top,0px));padding-bottom:clamp(48px,6vw,80px)}
.real-work-hero .hero-in>*{min-width:0;margin:0}
.real-work-hero .hero-thesis{grid-area:title;margin-top:12px;font-size:clamp(40px,12.5vw,56px);line-height:.94;letter-spacing:-.052em}
.hero-title-line{display:block}
.hero-film{grid-area:film}
.hero-film__link{position:relative;isolation:isolate;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000;border-radius:var(--radius);text-decoration:none}
.hero-film__link:focus-visible{outline-offset:4px}
.hero-media{position:absolute;inset:0;z-index:0;background:#000}
.hero-media picture{display:block;width:100%;height:100%}
.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}
.hero-media video{opacity:0;transition:opacity .3s var(--ease)}
.hero-media video.is-playing{opacity:1}
.hero-film__caption{grid-area:caption;display:grid;gap:2px;align-content:start}
.hero-film__caption .eyebrow{display:none}
.hero-film__name{font-size:15px;line-height:1.4}
.hero-film__name a{display:inline-flex;align-items:center;min-width:44px;min-height:44px;text-decoration:none}
.hero-film__category{display:flex;flex-wrap:wrap;gap:4px 14px;font:400 12px/1.5 var(--mono);color:var(--text-3)}
.hero-summary{grid-area:summary;display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-top:4px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.real-work-hero .lede{font-size:16px;line-height:1.6;max-width:42ch}
.hero-work-link{align-self:flex-start}
.hero-email{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px 8px;min-height:44px;font-size:14px;line-height:1.4;color:var(--text-3);text-decoration:none;overflow-wrap:anywhere}
.hero-email span{color:var(--text);text-decoration:underline;text-decoration-color:var(--line-3);text-decoration-thickness:1px;text-underline-offset:4px}
.hero-email:hover span{text-decoration-color:var(--text)}
@media (min-width:640px){
  .real-work-hero .hero-in{gap:18px;padding-top:calc(var(--header-h) + 24px + env(safe-area-inset-top,0px))}
  .real-work-hero .hero-thesis{font-size:clamp(52px,8vw,76px)}
  .hero-film__name{font-size:17px}
  .real-work-hero .lede{font-size:17px;max-width:48ch}
  .hero-summary{max-width:700px}
}
@media (min-width:1024px){
  .real-work-hero .hero-in{grid-template-columns:minmax(0,13fr) minmax(0,7fr);grid-template-rows:auto auto auto 1fr;
    grid-template-areas:'title title' 'film caption' 'film summary' 'film .';column-gap:clamp(32px,3vw,48px);row-gap:0;align-items:start;
    padding-top:calc(var(--header-h) + 20px + env(safe-area-inset-top,0px));padding-bottom:clamp(56px,6vw,96px)}
  .real-work-hero .hero-thesis{margin:0 0 clamp(18px,1.8vw,28px);font-size:clamp(52px,4.8vw,76px);line-height:.95;letter-spacing:-.05em;white-space:nowrap}
  .hero-title-line{display:inline}
  .hero-film__caption{gap:4px;padding:16px 0 24px;border-top:1px solid var(--line-2)}
  .hero-film__caption .eyebrow{display:block;margin-bottom:6px}
  .hero-film__name{font-size:clamp(20px,1.7vw,24px);line-height:1.2;letter-spacing:-.02em}
  .real-work-hero .hero-summary{display:grid;gap:16px;justify-items:start;max-width:none;padding:24px 0 0;border-top:1px solid var(--line)}
  .hero-summary>.hero-actions{margin-top:4px}
  .real-work-hero .lede{font-size:clamp(17px,1.3vw,19px);line-height:1.55;max-width:34ch}
  .hero-actions .btn{min-height:52px;padding-inline:24px}
}
@media (min-width:1280px){.real-work-hero .hero-in{grid-template-columns:minmax(0,7fr) minmax(0,3fr)}}
/* Short desktop screens: keep the whole opening in view. */
@media (min-width:1024px) and (max-height:820px){
  .real-work-hero .hero-in{padding-top:calc(var(--header-h) + 12px + env(safe-area-inset-top,0px));padding-bottom:32px}
  .real-work-hero .hero-thesis{font-size:clamp(48px,4.4vw,64px);margin-bottom:14px}
  .hero-film__link{max-width:min(100%,max(320px,calc((100svh - 230px) * 16 / 9)))}
}

/* ---------- Home: motion hero (the default) ----------
   The opening is the work. A silent montage of real SDS film shots fills the first screen edge to edge, beneath the
   fixed header, and the proposition is set over its lower edge like an opening title. Wide screens (and tablets held
   sideways) carry the whole introduction over the film; phones and upright tablets set the headline over the film and
   the positioning and actions directly beneath it. Phones held upright play the 4:5 framing of the same edit. */
.motion-hero{--edge:max(var(--gutter),calc((100% - var(--max)) / 2 + var(--gutter)))}
.motion-hero__in{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:'film' 'pitch';
  padding-top:calc(var(--header-h) + env(safe-area-inset-top,0px))}
.motion-hero__in>*{min-width:0}
.motion-hero__intro{display:contents}
.motion-hero__frame{grid-area:film;position:relative;height:max(300px,min(125vw,calc(100vh - var(--header-h) - 200px)))}
.motion-hero__link{position:absolute;inset:0;display:block;overflow:hidden;background:#000;text-decoration:none}
.motion-hero__link:focus-visible{outline-offset:-4px}
.motion-hero .hero-media img,.motion-hero .hero-media video{object-fit:cover;object-position:50% 30%}
/* A fall to black beneath the type, dense enough for the headline over the brightest shot (the white yacht) and
   clear of the upper half of the picture. */
.motion-hero .hero-media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(5,5,5,.9) 0%,rgba(5,5,5,.66) 28%,rgba(5,5,5,.34) 44%,rgba(5,5,5,0) 62%)}
.motion-hero .frame-cue{top:0;bottom:auto;align-items:flex-start;justify-content:flex-end;min-height:0;padding:16px var(--edge) 48px;
  background:linear-gradient(to bottom,rgba(5,5,5,.6),rgba(5,5,5,0))}
.motion-hero__title{grid-area:film;align-self:end;z-index:2;padding:0 var(--edge) clamp(18px,4.6vw,30px);pointer-events:none;
  font-size:clamp(34px,10.4vw,48px);line-height:.98;letter-spacing:-.05em}
.motion-hero__title .s{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
.motion-hero__pitch{grid-area:pitch;display:grid;gap:18px;justify-items:start;padding:20px var(--edge) clamp(36px,6vw,64px)}
.motion-hero__pitch .lede{font-size:16px;line-height:1.6;max-width:46ch}
.motion-hero .hero-actions{gap:6px 24px}
/* The preview's pause control has no resting chrome. It is the film's first keyboard stop and appears in the film's
   corner only while it has keyboard focus; screen readers announce it by its text. The preview never starts under
   reduced motion or Save-Data, and it pauses off screen, in a background tab and under the menu or a film. */
.motion-toggle{position:absolute;z-index:3;top:16px;left:var(--edge);width:1px;height:1px;margin:0;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;border-radius:999px;background:var(--bg);color:var(--text);
  font:500 13px/1 var(--sans);cursor:pointer}
.motion-toggle:focus-visible{width:auto;height:auto;min-height:44px;padding:0 16px;overflow:visible;clip-path:none;border:1px solid var(--text)}
@media (min-width:600px){
  .motion-hero__frame{height:max(320px,min(75vw,calc(100vh - var(--header-h) - 220px)))}
  .motion-hero__title{font-size:clamp(46px,7.6vw,72px);max-width:13em}
  .motion-hero__pitch .lede{font-size:17px;max-width:52ch}
}
@supports (height:100svh){
  .motion-hero__frame{height:max(300px,min(125vw,calc(100svh - var(--header-h) - 200px)))}
  @media (min-width:600px){.motion-hero__frame{height:max(320px,min(75vw,calc(100svh - var(--header-h) - 220px)))}}
}
/* Wide screens: the whole introduction sits over the film. The film fills the first screen at the window's shape
   (never wider than 2.4:1), so its lower edge, and the title on it, stay in view. */
@media (min-width:1024px) and (min-height:501px),(min-width:768px) and (orientation:landscape) and (min-height:501px){
  .motion-hero__in{grid-template-areas:'film'}
  .motion-hero__frame{height:max(41.667vw,min(56.25vw,calc(100vh - var(--header-h))))}
  .motion-hero__intro{grid-area:film;align-self:end;z-index:2;display:grid;gap:clamp(14px,1.8vw,26px);justify-items:start;
    padding:0 var(--edge) clamp(32px,6vh,72px);pointer-events:none}
  .motion-hero__intro a,.motion-hero__intro button{pointer-events:auto}
  .motion-hero__title{grid-area:auto;padding:0;max-width:12em;font-size:clamp(48px,5.4vw,96px)}
  .motion-hero__pitch{grid-area:auto;padding:0;gap:22px}
  .motion-hero__pitch .lede{font-size:clamp(17px,1.35vw,20px);line-height:1.5;max-width:44ch}
  .motion-hero .hero-actions .btn{min-height:52px;padding-inline:24px}
  .motion-hero .hero-media::after{background:linear-gradient(to top,rgba(5,5,5,.9) 0%,rgba(5,5,5,.72) 28%,rgba(5,5,5,.5) 52%,rgba(5,5,5,.18) 72%,rgba(5,5,5,0) 90%),
    linear-gradient(to right,rgba(5,5,5,.5) 0%,rgba(5,5,5,.22) 45%,rgba(5,5,5,0) 72%)}
}
@supports (height:100svh){
  @media (min-width:1024px) and (min-height:501px),(min-width:768px) and (orientation:landscape) and (min-height:501px){
    .motion-hero__frame{height:max(41.667vw,min(56.25vw,calc(100svh - var(--header-h))))}
    .motion-hero__title{font-size:min(clamp(48px,5.4vw,96px),10svh)}
  }
}
/* Phones held sideways: the film fills the screen beneath the header with the headline on it; the positioning and the
   actions follow beneath, on the page. */
@media (orientation:landscape) and (max-height:500px){
  .motion-hero__frame{height:max(240px,calc(100vh - var(--header-h)))}
  .motion-hero__title{max-width:16em;font-size:clamp(28px,4.4vw,38px)}
  .motion-hero__pitch .lede{font-size:15px;max-width:60ch}
}
@supports (height:100svh){@media (orientation:landscape) and (max-height:500px){.motion-hero__frame{height:max(240px,calc(100svh - var(--header-h)))}}}

/* ---------- Home: selected work ---------- */
.home-work-layout{display:grid;gap:48px;align-items:start;min-width:0}
.home-lead-film .film-card{display:grid;gap:18px}
.home-lead-film .film-card__media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius);background:#000;text-decoration:none}
.home-lead-film .film-card__media picture{display:block;width:100%;height:100%}
.home-lead-film .film-card__media img{width:100%;height:100%;object-fit:contain}
.home-lead-film .film-card__text{display:grid;gap:4px}
.home-lead-film .film-card__title{font-size:clamp(30px,3.4vw,48px);line-height:1.05;letter-spacing:-.04em}
.home-lead-film .film-card__sub{font-size:16px}
.home-index__heading{margin-bottom:14px}
.home-film-index{display:grid;border-top:1px solid var(--line-2)}
.home-film-index li{min-width:0;border-bottom:1px solid var(--line)}
.project-index__row{display:grid;grid-template-columns:84px minmax(0,1fr) auto;align-items:center;gap:14px;min-height:88px;padding:14px 0;text-decoration:none}
.project-index__row:focus-visible{outline-offset:-2px}
.project-index__thumb{--stage:.75;display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:4/3}
.project-index__copy{display:grid;gap:5px;min-width:0}
.project-index__title{font-size:17px;line-height:1.25;letter-spacing:-.02em}
@media (min-width:640px){.project-index__title{font-size:18px}}
.project-index__category{font:400 12px/1.5 var(--mono);color:var(--text-3)}
.project-index__end{display:grid;justify-items:end;gap:6px;font:400 12px/1.5 var(--mono);color:var(--text-3)}
.project-index__arrow{font:400 16px/1 var(--mono);color:var(--text-4);transition:transform .25s var(--ease),color .2s}
.project-index__row:hover .project-index__title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.project-index__row:hover .project-index__arrow{color:var(--text);transform:translateX(3px)}
@media (min-width:640px){
  .home-film-index{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
  .project-index__row{grid-template-columns:128px minmax(0,1fr) auto;gap:18px;min-height:104px}
}
@media (min-width:1200px){.project-index__row{grid-template-columns:128px minmax(0,1fr) auto;min-height:96px}}
@media (min-width:1200px){
  .home-work-layout{grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:56px}
  .home-film-index{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Home: the studio ---------- */
.about-preview{display:grid;gap:32px;align-items:start}
.about-preview__photo{display:block;width:min(100%,420px);aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius);background:var(--stage)}
.portrait-picture{display:block;width:100%;height:100%}
.portrait-picture img{width:100%;height:100%;object-fit:cover}
.about-preview__copy{display:grid;gap:22px;align-content:start;min-width:0}
.about-preview__copy .lede{font-size:17px;line-height:1.65;max-width:52ch}
.about-preview__copy .link-arrow{justify-self:start}
.home-process{display:grid;border-top:1px solid var(--line-2)}
.home-process li{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:baseline;gap:16px;min-width:0;padding:14px 0;border-bottom:1px solid var(--line)}
.home-process__number{font:400 12px/1.5 var(--mono);color:var(--text-3)}
.home-process__label{font-size:17px;line-height:1.35;letter-spacing:-.015em}
@media (max-width:639px){
  .home-studio .about-preview{grid-template-columns:88px minmax(0,1fr);gap:12px 18px;align-items:center}
  .home-studio .about-preview__photo{grid-column:1;grid-row:1/span 2;width:88px}
  .home-studio .about-preview__copy{display:contents}
  .home-studio .about-preview__copy>.eyebrow{grid-column:2;grid-row:1;align-self:end}
  .home-studio .about-preview__copy>.h2{grid-column:2;grid-row:2;align-self:start;font-size:32px}
  .home-studio .about-preview__copy>.lede,.home-studio .home-process,.home-studio .about-preview__copy>.link-arrow{grid-column:1/-1}
  .home-studio .about-preview__copy>.lede{font-size:16px;margin-top:6px}
  .home-process{display:flex;flex-wrap:wrap;gap:8px 12px;padding-top:14px}
  .home-process li{display:inline-flex;align-items:baseline;gap:6px;padding:0;border:0}
  .home-process li:not(:last-child)::after{content:"→";margin-left:6px;font:400 13px/1 var(--mono);color:var(--text-4)}
  .home-process__label{font-size:15px}
}
@media (min-width:1024px){
  .home-studio .about-preview{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(48px,6vw,96px);align-items:center}
  .about-preview__photo{width:min(100%,520px)}
  .home-process{grid-template-columns:repeat(5,minmax(0,1fr));border-top:0}
  .home-process li{grid-template-columns:minmax(0,1fr);gap:10px;padding:16px 16px 0 0;border-top:1px solid var(--line-2);border-bottom:0}
}


/* ---------- Work: the reel and the screening wall ---------- */
.work-feature{display:grid;gap:24px}
.feature{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius);background:var(--stage);text-decoration:none}
.feature picture{display:block;width:100%;height:100%}
.feature img{width:100%;height:100%;object-fit:cover}
.work-feature__text{display:grid;gap:18px}
.work-feature__title{display:grid;gap:10px}
.work-feature__aside{display:grid;gap:6px;align-content:start}
.work-feature__aside p{color:var(--text-2);max-width:40ch}
.work-feature__aside .link-arrow{justify-self:start}
.film-wall{display:grid;gap:clamp(56px,6vw,96px)}
.wall-row{display:grid;gap:48px}
.film-card{display:grid;gap:16px;align-content:start;min-width:0}
.film-card__media{position:relative;display:block;aspect-ratio:var(--ar,16/9);overflow:hidden;border-radius:var(--radius);background:var(--stage);text-decoration:none}
.film-card__media picture{display:block;width:100%;height:100%}
.film-card__media img{width:100%;height:100%;object-fit:cover}
.film-card__media:focus-visible{outline-offset:4px}
.film-card__text{display:grid;gap:4px;min-width:0}
.film-card__meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 16px;font:400 12px/1.5 var(--mono);color:var(--text-3)}
.film-card__title{font-size:clamp(22px,2vw,28px);line-height:1.15;letter-spacing:-.03em}
.film-card__title a{display:inline-flex;align-items:center;min-width:44px;min-height:44px;padding-block:6px;text-decoration:none}
.film-card__arrow{display:inline-block;margin-left:.4em;font:400 .66em/1 var(--mono);vertical-align:.12em;color:var(--text-3);transition:transform .25s var(--ease),color .2s var(--ease)}
.film-card__title a:hover .film-card__arrow,.film-card__title a:focus-visible .film-card__arrow{color:var(--text);transform:translateX(4px)}
.film-card__sub{font-size:15px;color:var(--text-3)}
.film-card--portrait{width:75%}
@media (min-width:768px){
  .work-feature__text{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:32px}
  /* Justified rows: widths follow each frame's shape, so every frame in a row shares one height. */
  .wall-row{display:flex;align-items:flex-start;gap:var(--gap)}
  .wall-row>li{flex:var(--ar) 1 0%;min-width:0}
  .film-card--portrait{width:auto}
  /* The vertical film stands beside the final pair at its full height. */
  .wall-row--split{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);column-gap:var(--gap);row-gap:48px;align-items:start}
  .wall-row--split>li:nth-child(3){grid-column:2;grid-row:1/span 2}
}

/* ---------- Commercials ----------
   One core commercial beside how it is quoted: the inclusions read as what the film involves, and the terms column
   carries the custom quote and what is priced separately. No prices, tiers or quantities are shown. */
.commercials-head .h1{max-width:17ch}
.commercials-head .lede{max-width:56ch}
.commercial-offer{padding-bottom:clamp(56px,7vw,112px)}
.offer{display:grid;gap:clamp(16px,2vw,24px);align-items:stretch}
.offer__core{display:grid;gap:16px;align-content:start;min-width:0;padding:clamp(22px,2.6vw,36px);border:1px solid rgba(245,245,242,.3);
  border-radius:var(--radius);background:linear-gradient(180deg,rgba(245,245,242,.07),rgba(245,245,242,.015) 72%)}
.offer__title{font-size:clamp(28px,3vw,44px);line-height:1.05;letter-spacing:-.04em;max-width:18ch}
.offer__intro{font-size:16px;line-height:1.6;color:var(--text-2);max-width:46ch}
.offer__rows{display:grid;margin-top:12px;border-top:1px solid var(--line-2)}
.offer__row{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr);gap:4px 24px;padding:16px 0;border-bottom:1px solid var(--line)}
.offer__row dt{font:400 12px/1.75 var(--mono);color:var(--text-3)}
.offer__row dd{margin:0;font-size:15.5px;line-height:1.55;color:var(--text)}
.offer__quote,.offer__extras{display:grid;gap:12px;align-content:start;min-width:0;padding:clamp(22px,2.6vw,36px);border:1px solid var(--line-2);border-radius:var(--radius)}
.offer__quote-title{font-size:clamp(36px,3.6vw,56px);line-height:1;letter-spacing:-.045em}
.offer__quote-copy{font-size:15.5px;line-height:1.6;color:var(--text-2);max-width:44ch}
.offer__list-title{margin-top:8px;font:400 12px/1.5 var(--mono);color:var(--text-3)}
.offer__list{display:grid;border-top:1px solid var(--line)}
.offer__list li{display:grid;gap:2px;align-content:start;min-width:0;padding:12px 0;border-bottom:1px solid var(--line)}
.offer__item{font-size:16px;line-height:1.4;letter-spacing:-.01em}
.offer__item-line{font-size:14.5px;line-height:1.55;color:var(--text-3)}
.offer__extras-head{display:grid;gap:6px;align-content:start}
.offer__note{font-size:14px;line-height:1.6;color:var(--text-3)}
@media (max-width:639px){.offer__row{grid-template-columns:minmax(0,1fr)}}
@media (min-width:1024px){
  .offer{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:'core quote' 'extras extras'}
  .offer__core{grid-area:core}
  .offer__quote{grid-area:quote}
  .offer__extras{grid-area:extras;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:clamp(24px,3vw,48px)}
  .offer__extras .offer__list{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(20px,2.4vw,36px);border-top:0}
  .offer__extras .offer__list li{padding:14px 0 4px;border-top:1px solid var(--line);border-bottom:0}
}

/* Start with the goal: each goal beside the real film that shows it, in a justified row (frames share a height). */
.commercial-approach__lede{max-width:44ch;font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:var(--text-2)}
.approach-film{display:grid;gap:10px;align-content:start;min-width:0}
.approach-film__frame{position:relative;display:block;aspect-ratio:var(--ar);margin-bottom:6px;overflow:hidden;border-radius:var(--radius);background:var(--stage)}
.approach-film__frame picture,.approach-film__frame img{display:block;width:100%;height:100%}
.approach-film__frame img{object-fit:cover}
.approach-film__frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(245,245,242,.09);pointer-events:none}
.approach-film__goal{font-size:clamp(20px,1.8vw,26px);line-height:1.2;letter-spacing:-.025em}
.approach-film__copy{font-size:15px;line-height:1.6;color:var(--text-2);max-width:40ch}
.approach-film__link{justify-self:start;color:var(--text-2)}

/* ---------- About ----------
   The director first (portrait and the studio's standard), then how working with SDS works at a glance, the approach,
   and the process beside Tyler at work. */
.about-intro{gap:40px}
.about-intro__copy{display:grid;gap:20px;align-content:center}
.about-intro__copy .h1{max-width:none}
.about-standard{max-width:30ch;margin-top:6px;padding-top:20px;border-top:1px solid var(--line-2);
  font-size:clamp(21px,2vw,28px);line-height:1.3;letter-spacing:-.02em;color:var(--text)}
.about-standard .s{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.about-facts-band{padding-bottom:clamp(40px,5vw,72px)}
.about-facts{display:grid;border-top:1px solid var(--line-2)}
.about-facts div{display:grid;gap:8px;align-content:start;min-width:0;padding:18px 0;border-bottom:1px solid var(--line)}
.about-facts dt{font:400 12px/1.6 var(--mono);color:var(--text-3)}
.about-facts dd{margin:0;font-size:15px;line-height:1.6;color:var(--text-2)}
.about-facts a{color:var(--text)}
@media (min-width:640px){.about-facts{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}}
@media (min-width:1100px){.about-facts{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(24px,3vw,48px)}.about-facts div{border-bottom:0}}
.about-shot{display:block;width:min(100%,440px)}
.about-portrait picture{display:block;overflow:hidden;border-radius:var(--radius);background:var(--stage)}
.about-portrait img{width:100%;aspect-ratio:4/5;object-fit:cover}
@media (min-width:1024px){
  .about-intro{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(48px,6vw,96px);align-items:center}
  .about-shot{width:min(100%,460px);justify-self:end}
}
.purpose-story{min-width:0}
.purpose-story__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:24px;border-bottom:1px solid var(--line-2)}
.purpose-story__steps button{position:relative;display:flex;align-items:baseline;gap:8px;min-width:0;min-height:60px;padding:16px 0;border:0;
  background:transparent;color:var(--text-3);font-size:clamp(16px,1.6vw,19px);line-height:1.3;letter-spacing:-.015em;text-align:left;cursor:pointer;transition:color .2s var(--ease)}
.purpose-story__steps button:hover,.purpose-story__steps button[aria-selected="true"]{color:var(--text)}
.purpose-story__steps button[aria-selected="true"]::after{content:"";position:absolute;left:0;right:16px;bottom:-1px;height:1px;background:var(--text)}
.purpose-story__number{font:400 11px/1.4 var(--mono);color:var(--text-4)}
.purpose-story__panels{display:grid;gap:48px}
.purpose-story__panel{min-width:0}
.purpose-story__image{aspect-ratio:2/1;overflow:hidden;border-radius:var(--radius);background:var(--stage)}
.purpose-story__image picture,.purpose-story__image img{display:block;width:100%;height:100%}
.purpose-story__image img{object-fit:cover}
.purpose-story__copy{display:grid;gap:12px;padding-top:24px;align-content:start}
.purpose-story__copy h3{max-width:24ch;font-size:clamp(24px,2.4vw,32px);line-height:1.15;letter-spacing:-.03em}
.purpose-story__copy>p:not(.eyebrow){font-size:16px;line-height:1.65;color:var(--text-2);max-width:46ch}
.purpose-story__copy .link-arrow{justify-self:start}
.project-journey{display:grid;gap:clamp(32px,4vw,56px)}
.project-journey__head{display:grid;gap:14px;align-content:start}
.project-journey__image{display:none}
.project-journey__steps{display:grid;border-top:1px solid var(--line-2)}
.project-journey__steps li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px 16px;min-width:0;padding:26px 0;border-bottom:1px solid var(--line)}
.project-journey__number{grid-row:1/4;font:400 12px/2 var(--mono);color:var(--text-3)}
.project-journey__steps h3{font-size:clamp(22px,2vw,28px);line-height:1.2;letter-spacing:-.025em}
.project-journey__steps p{font-size:15px;line-height:1.65;color:var(--text-2);max-width:56ch}
.project-journey__outcome{font:400 12px/1.6 var(--mono);color:var(--text)}
.project-journey__outcome::before{content:"→";margin-right:8px;color:var(--text-4)}
@media (min-width:1024px){
  .project-journey{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(48px,6vw,96px);align-items:start}
  .project-journey__head{position:sticky;top:calc(var(--header-h) + 32px)}
  .project-journey__image{display:block;width:min(100%,380px);margin-top:28px}
  .project-journey__image picture{display:block;overflow:hidden;border-radius:var(--radius);background:var(--stage)}
  .project-journey__image img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 62%}
  .project-journey__steps li{grid-template-columns:56px minmax(0,1fr);padding:28px 0}
}

/* ---------- Contact ---------- */
/* ---------- Cincinnati & Newport ---------- */
.local-head .lede{max-width:62ch}
.local-glance{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;margin:12px 0 0;border-top:1px solid var(--line-2)}
.local-glance div{display:grid;gap:6px;align-content:start;min-width:0;padding:16px 0;border-bottom:1px solid var(--line)}
.local-glance dt{font:400 12px/1.5 var(--mono);color:var(--text-3)}
.local-glance dd{margin:0;font-size:15px;line-height:1.5}
.local-intro{font-size:17px;line-height:1.65;color:var(--text-2);max-width:56ch}
.local-core{display:grid;margin:24px 0 18px;border-top:1px solid var(--line-2)}
.local-core li{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr);gap:4px 20px;padding:14px 0;border-bottom:1px solid var(--line)}
.local-core__name{font:400 12px/1.75 var(--mono);color:var(--text-3)}
.local-core__line{font-size:15px;line-height:1.55;color:var(--text-2)}
@media (max-width:639px){.local-core li{grid-template-columns:minmax(0,1fr)}}
.local-more{margin-top:28px}
.local-plan{display:grid;border-top:1px solid var(--line-2)}
.local-plan li{display:grid;gap:8px;align-content:start;padding:24px 0;border-bottom:1px solid var(--line)}
.local-plan h3{font-size:clamp(19px,1.6vw,22px);line-height:1.3;letter-spacing:-.02em;max-width:36ch}
.local-plan p{font-size:15px;line-height:1.65;color:var(--text-2);max-width:60ch}
@media (min-width:900px){.local-plan{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,4vw,64px)}}
@media (min-width:1024px){.local-glance{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px}}

.contact-journey{display:grid;gap:40px;align-items:start;min-width:0}
.contact-primary{display:grid;gap:18px;align-content:start;min-width:0;padding:clamp(24px,4vw,48px);border:1px solid var(--line-2);border-radius:var(--radius);background:var(--stage)}
.contact-primary h2{font-size:clamp(32px,3.8vw,56px);line-height:1.05;letter-spacing:-.04em}
.contact-primary>p:not(.eyebrow):not(.note){font-size:16px;line-height:1.65;color:var(--text-2);max-width:52ch}
.contact-primary .btn{min-height:52px;padding-inline:24px;max-width:100%;white-space:normal;text-align:center}
.contact-primary .actions .note{font:400 12px/1.5 var(--mono);color:var(--text-3)}
.contact-expectations,.contact-email,.contact-pricing{display:grid;gap:16px;align-content:start;min-width:0}
.contact-expectations h2,.contact-options h2{font-size:clamp(26px,2.6vw,36px);line-height:1.1;letter-spacing:-.035em}
.contact-options{position:relative;display:grid;gap:40px;min-width:0;margin-top:clamp(56px,7vw,112px);padding-top:clamp(32px,4vw,48px);padding-bottom:var(--section)}
.contact-options::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;background:var(--line)}
.email-line{display:flex;flex-wrap:wrap;align-items:center;gap:12px;min-width:0;max-width:100%}
.email-line code{min-width:0;max-width:100%;font:400 clamp(18px,2vw,26px)/1.35 var(--sans);letter-spacing:-.015em;overflow-wrap:anywhere;user-select:all}
.contact-email>.link-arrow,.contact-pricing .link-arrow{justify-self:start}
.contact-pricing p:not(.eyebrow){font-size:15px;line-height:1.65;color:var(--text-2);max-width:48ch}
.page-contact .section .h2{font-size:clamp(28px,3.4vw,44px)}
@media (min-width:768px){.page-contact .section .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}.page-contact .section .split>*{grid-column:auto}}
@media (min-width:1024px){
  .contact-journey{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px}
  .contact-options{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px}
}
.inquiry-frame{width:100%;min-height:900px;border:0;border-radius:var(--radius);background:#fff}
.inquiry-frame__note{margin-top:10px}

/* ---------- Local production: reference films ---------- */
.reference-films{margin-top:clamp(48px,6vw,88px)}
.ref-card a{display:grid;gap:12px;min-width:44px;min-height:44px;text-decoration:none}
.ref-card__frame{position:relative;display:block;aspect-ratio:var(--ar);overflow:hidden;border-radius:var(--radius);background:var(--stage)}
.ref-card__frame picture,.ref-card__frame img{display:block;width:100%;height:100%}
.ref-card__frame img{object-fit:cover}
.ref-card__meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;font:400 12px/1.5 var(--mono);color:var(--text-3)}
.ref-card__title{font-size:20px;line-height:1.25;letter-spacing:-.02em}
.ref-card a:hover .ref-card__title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.ref-card a:focus-visible{outline-offset:6px}

/* ---------- Film pages ---------- */
.film-top{padding-top:calc(var(--header-h) + env(safe-area-inset-top,0px) + 12px)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0;font:400 12px/1.5 var(--mono);color:var(--text-3)}
.crumbs a{display:inline-flex;align-items:center;min-width:44px;min-height:44px;text-decoration:none}
.crumbs a:hover{color:var(--text);text-decoration:underline;text-underline-offset:4px}
.crumbs span{min-width:0;overflow-wrap:anywhere}
.case-intro{display:grid;gap:16px;min-width:0;padding-top:clamp(16px,2.4vw,32px);padding-bottom:clamp(28px,3.6vw,48px)}
.case-intro .h1{max-width:22ch;min-width:0}
.case-intro .lede{max-width:60ch}
.case-intro__credit{font:400 12px/1.5 var(--mono);color:var(--text-3)}
.case-player{min-width:0}
.screen{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000;border-radius:var(--radius)}
.screen picture{display:block;width:100%;height:100%}
.screen>picture{position:absolute;inset:0;z-index:1}
.screen img,.screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.screen video{object-fit:contain;background:#000}
.screen.is-matted video{object-fit:cover}
.screen video:fullscreen{object-fit:contain}
.screen video:-webkit-full-screen{object-fit:contain}
.screen--portrait img,.screen--portrait video{object-fit:contain}
.screen .poster-btn{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:0;border:0;background:transparent;cursor:pointer}
.screen .poster-btn:focus-visible{outline:2px solid var(--text);outline-offset:-4px;box-shadow:inset 0 0 0 4px var(--bg)}
.player-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;min-height:52px;min-width:0}
.player-note{font-size:13px;line-height:1.6;color:var(--text-3);max-width:65ch}
.case-meta{min-width:0;padding-top:12px;padding-bottom:clamp(32px,4vw,56px)}
.portrait-film{display:grid;gap:28px;align-items:start;min-width:0;padding-bottom:clamp(32px,4vw,56px)}
.portrait-film__player{width:min(100%,440px);min-width:0;margin-inline:auto}
.portrait-film__copy{display:grid;gap:20px;align-content:start;min-width:0}
.portrait-film__copy .link-arrow{justify-self:start}
@media (min-width:768px){
  .case-meta .facts{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:24px}
  .case-meta .facts div{border-bottom:0}
  .facts dd{font-size:16px}
  .portrait-film{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
  .portrait-film__copy .facts{grid-template-columns:minmax(0,1fr)}
}
.case-story{display:grid;gap:32px;min-width:0}
.case-story__intro{display:grid;gap:16px;align-content:start;min-width:0}
.case-story__intro .h2{max-width:16ch}
.case-story__intro .lede{max-width:44ch}
.case-story__detail{display:grid;gap:20px;align-content:start;min-width:0}
.case-story__detail ol{display:grid;border-top:1px solid var(--line-2)}
.case-story__detail li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:16px;min-width:0;padding:24px 0;border-bottom:1px solid var(--line)}
.case-story__number{padding-top:4px;font:400 12px/1.4 var(--mono);color:var(--text-3)}
.case-story__detail li>div{display:grid;gap:10px;min-width:0}
.case-story__detail h3{font-size:22px;line-height:1.2;letter-spacing:-.025em}
.case-story__detail p{font-size:15px;line-height:1.7;color:var(--text-2)}
.case-story__detail>.link-arrow{justify-self:start}
@media (min-width:768px){.case-story{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,96px)}}
/* Continue watching: both neighbours sit on one baseline, each in its own shape. */
.case-neighbors{display:grid;gap:48px;min-width:0}
.case-neighbor{display:grid;gap:14px;align-content:start;min-width:0;min-height:44px;text-decoration:none}
.case-neighbor>.eyebrow{padding-top:14px;border-top:1px solid var(--line-2)}
.case-neighbor__stage{display:flex;align-items:flex-end;aspect-ratio:16/9;min-width:0}
.case-neighbor__copy{display:grid;gap:6px;min-width:0}
.case-neighbor__meta{display:flex;flex-wrap:wrap;gap:2px 14px;font:400 12px/1.5 var(--mono);color:var(--text-3)}
.case-neighbor h3{font-size:clamp(25px,3vw,40px);line-height:1.1;letter-spacing:-.035em}
.case-neighbor__go{display:inline-flex;align-items:center;gap:10px;margin-top:4px;font-size:14px;color:var(--text-2)}
.case-neighbor__go span{font-family:var(--mono);transition:transform .25s var(--ease)}
.case-neighbor:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.case-neighbor:hover .case-neighbor__go span{transform:translateX(3px)}
.case-neighbor:focus-visible{outline-offset:6px}
@media (min-width:768px){.case-neighbors{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Film controls ----------
   The site's own controls replace the browser's, so no player shows a running time or a duration: play and pause, a
   seek bar (position only), sound and full screen. They fade during uninterrupted playback and return on any
   movement, tap or key; keyboard focus keeps them up. Full screen takes the whole stage, controls included. */
.film-controls{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:2px;
  padding:36px clamp(6px,1vw,12px) clamp(4px,.8vw,8px);background:linear-gradient(to top,rgba(5,5,5,.82),rgba(5,5,5,0));
  transition:opacity .25s var(--ease)}
.screen.has-controls video{cursor:pointer}
.screen.is-idle .film-controls{opacity:0}
.screen.is-idle,.screen.is-idle video{cursor:none}
.film-controls__btn{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:var(--radius);
  background:transparent;color:var(--text);cursor:pointer}
.film-controls__btn:hover{background:rgba(245,245,242,.14)}
.film-controls__btn:focus-visible,.film-controls__range:focus-visible{outline-offset:-3px}
.film-controls__range{--fill:0%;flex:1 1 auto;min-width:48px;height:44px;margin:0 6px;padding:0;background:transparent;cursor:pointer;
  -webkit-appearance:none;appearance:none}
.film-controls__volume{flex:0 0 84px}
.film-controls__range::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:linear-gradient(to right,var(--text) var(--fill),rgba(245,245,242,.3) var(--fill))}
.film-controls__range::-webkit-slider-thumb{width:14px;height:14px;margin-top:-5px;border:0;border-radius:50%;background:var(--text);
  -webkit-appearance:none;appearance:none}
.film-controls__range::-moz-range-track{height:4px;border-radius:2px;background:rgba(245,245,242,.3)}
.film-controls__range::-moz-range-progress{height:4px;border-radius:2px;background:var(--text)}
.film-controls__range::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--text)}
.screen:fullscreen{width:100%;height:100%;max-height:none;aspect-ratio:auto!important;border-radius:0}
.screen:fullscreen video{object-fit:contain!important}
.screen:-webkit-full-screen{width:100%;height:100%;max-height:none;aspect-ratio:auto!important;border-radius:0}
.screen:-webkit-full-screen video{object-fit:contain!important}

/* ---------- Player dialog ---------- */
.player{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:calc(10px + env(safe-area-inset-top,0px)) 10px calc(10px + env(safe-area-inset-bottom,0px))}
.player__scrim{position:absolute;inset:0;background:rgba(3,3,3,.92)}
.player__box{position:relative;width:min(100%,1120px,calc((100svh - 190px) * 1.7778));min-width:min(100%,560px);max-height:calc(100svh - 20px);
  overflow-y:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--stage)}
.player__box .screen{border-radius:var(--radius) var(--radius) 0 0}
.player__info{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;padding:16px 18px 18px}
.player__info>div:first-child{display:grid;gap:6px;min-width:0}
.player__info h2{font-size:clamp(20px,2.4vw,28px);line-height:1.1;letter-spacing:-.03em}
.player__info .eyebrow{text-transform:none}
.player__close{position:absolute;top:10px;right:10px;z-index:3}
.icon-btn{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid var(--line-3);border-radius:var(--radius);
  background:rgba(5,5,5,.78);color:var(--text);font-size:22px;line-height:1;cursor:pointer}
.icon-btn:hover{border-color:var(--text);background:var(--bg)}
.player-note a{color:var(--text);text-underline-offset:3px}
.player.is-portrait .player__box{width:min(100%,480px,calc((100svh - 170px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) * .5625));min-width:0}
.player.is-portrait .screen video{object-fit:contain}
.player.is-portrait .player__info{padding:14px 16px 16px}
.player.is-portrait .player__info h2{font-size:clamp(18px,4.8vw,24px)}
@media (min-width:1024px){.player__info{padding:20px 24px 22px}}
/* Keep the full landscape film and its details inside short, rotated screens. */
@media (orientation:landscape) and (max-height:500px){
  .player:not(.is-portrait) .player__box{display:flex;flex-direction:column;min-width:0;
    width:min(100%,1120px,calc((100svh - 20px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) * 1.7778));
    height:calc(100svh - 20px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
    max-height:calc(100svh - 20px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow:hidden}
  .player:not(.is-portrait) .screen{flex:1 1 0;min-height:0;aspect-ratio:auto}
  .player:not(.is-portrait) .screen video{object-fit:contain}
  .player:not(.is-portrait) .player__info{flex:0 0 auto}
}

/* ---------- Pointer hover on frames ---------- */
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  .film-card__media img,.feature img,.home-lead-film .film-card__media img,.approach-film__frame img,.ref-card__frame img,.project-index__thumb img,.case-neighbor__stage img{transition:transform .8s var(--ease)}
  .film-card__media:hover img,.feature:hover img,.approach-film__frame:hover img,.ref-card a:hover img,.case-neighbor:hover img{transform:scale(1.025)}
  .home-lead-film .film-card__media:hover img{transform:scale(1.015)}
}

/* ---------- Preferences ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media (prefers-reduced-transparency:reduce){
  .icon-btn{background:var(--bg)}
  .player__scrim{background:rgba(3,3,3,.98)}
}
@media (forced-colors:active){
  .btn,.menu-btn,.icon-btn,.motion-toggle:focus-visible{border:1px solid CanvasText}
  .frame-cue,.film-controls{background:Canvas}
  .film-controls__range{-webkit-appearance:auto;appearance:auto}
}