:root{--bg:#0a0a0a;--fg:#f2efe9;--mute:#9a968e;--line:#2a2927;--accent:#e8d23a}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:"Darker Grotesque","Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{padding-left:clamp(16px,3vw,40px);padding-right:clamp(16px,3vw,40px)}
.label{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.muted{color:var(--mute)}
.sr{position:absolute;left:-9999px}
.mockflag{position:fixed;left:12px;bottom:12px;z-index:60;background:var(--accent);color:#000;padding:6px 10px;font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}

/* header */
header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;height:68px;transition:background .3s}
header.solid,body:not(.has-hero) header{background:rgba(10,10,10,.92);backdrop-filter:blur(8px)}
.logo{display:flex;align-items:center;gap:12px}
.logo img{height:21px;width:auto}
.logo span{font-weight:500;font-size:16px;letter-spacing:.18em}
nav ul{display:flex;gap:28px;list-style:none}
nav a{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
nav a:hover{opacity:1}
.menu-btn{display:none;width:44px;height:44px}
@media(max-width:760px){nav ul{display:none}.menu-btn{display:grid;place-items:center}
 nav.open ul{display:flex;flex-direction:column;position:fixed;inset:68px 0 0 0;background:var(--bg);padding:32px 16px;gap:22px}
 nav.open a{font-size:34px;font-weight:500;letter-spacing:0;text-transform:none}}

/* hero */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#000;padding:0}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;pointer-events:none}
.slide.on{opacity:1;pointer-events:auto}
.slide img.bg{position:absolute;inset:0;transform:scale(1.05);transition:transform 8s linear}
.slide.on img.bg{transform:scale(1)}
.vid{position:absolute;inset:0;overflow:hidden;container-type:size;opacity:0;transition:opacity 1s}
.vid.ready{opacity:1}
.vid iframe{position:absolute;top:50%;left:50%;width:max(100cqw,177.78cqh);height:max(56.25cqw,100cqh);transform:translate(-50%,-50%);border:0;pointer-events:none}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,0) 55%),linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0) 22%);pointer-events:none}
.copy{position:absolute;left:0;right:0;bottom:clamp(90px,14vh,140px);z-index:2}
.hero h1{font-size:clamp(48px,9vw,136px);font-weight:500;line-height:.9;letter-spacing:-.05em;max-width:12ch}
.kicker{margin-bottom:18px}.kicker img{width:auto;height:34px;object-fit:contain}
.news{font-family:"Instrument Serif",serif;font-size:clamp(20px,2.2vw,28px);max-width:30ch;margin-top:16px;color:#e9e5dc}
.cta{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:13px 20px;border:1px solid var(--fg);font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;transition:background .2s,color .2s}
.cta:hover,.cta.solid{background:var(--fg);color:#000}
.cta.solid:hover{background:transparent;color:var(--fg)}
.hero-ctrl{position:absolute;right:0;bottom:clamp(28px,6vh,56px);z-index:3;display:flex;align-items:center;gap:16px}
.count{font-variant-numeric:tabular-nums;font-size:14px;font-weight:500}
.arrow{width:44px;height:44px;display:grid;place-items:center;opacity:.75;transition:opacity .2s,transform .2s}
.arrow:hover,.arrow:focus-visible{opacity:1}
.arrow[data-go="-1"]:hover{transform:translateX(-3px)}.arrow[data-go="1"]:hover{transform:translateX(3px)}
.progress{position:absolute;left:0;bottom:0;height:3px;background:var(--fg);z-index:3;width:0}

/* sections */
section{padding-top:clamp(72px,10vw,140px)}
.page{padding-top:68px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px;margin-bottom:28px}
.sec-head h2{font-size:clamp(34px,5vw,64px);font-weight:500;letter-spacing:-.04em;line-height:1}
.sec-head h2 a:hover{text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:3px}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters button{padding:10px 14px;border:1px solid var(--line);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);min-height:44px}
.filters button.on,.filters button:hover{color:var(--fg);border-color:var(--fg)}

.grid.films{display:grid;align-items:start;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px) clamp(12px,1.4vw,20px)}
@media(max-width:1000px){.grid.films{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.grid.films{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{display:block}
.card .frame{overflow:hidden;background:#151515;position:relative}
.card .frame img{height:auto;object-fit:contain}
.card .frame img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.card:hover .frame img{transform:scale(1.045)}
.card .logline{position:absolute;inset:auto 0 0 0;padding:16px;font-size:14px;line-height:1.4;background:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,0));opacity:0;transform:translateY(8px);transition:.35s}
.card:hover .logline{opacity:1;transform:none}
@media(hover:none){.card .logline{display:none}}
.card .meta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:12px}
.card h3{font-size:clamp(17px,1.6vw,22px);font-weight:500;letter-spacing:-.02em;line-height:1.1}
.card .yr{font-family:"Instrument Serif",serif;font-style:italic;font-size:18px;color:var(--mute);white-space:nowrap}
.card .status{margin-top:6px;color:var(--mute)}
.card .status.cs{color:var(--accent)}
.card.hide{display:none}

.feed{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.post{grid-column:span 4;display:block}.post.wide{grid-column:span 8}
@media(max-width:900px){.post,.post.wide{grid-column:span 12}}
.post .frame{overflow:hidden;aspect-ratio:4/5;background:#151515}.post.wide .frame{aspect-ratio:16/10}
.post .frame img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}.post:hover .frame img{transform:scale(1.035)}
.post .tag{margin-top:14px;color:var(--mute)}
.post h3{font-size:clamp(20px,2vw,28px);font-weight:500;letter-spacing:-.025em;line-height:1.12;margin-top:6px;max-width:26ch}
.post .go{display:inline-block;margin-top:10px;font-size:13px;font-weight:500;border-bottom:1px solid currentColor;padding-bottom:2px}

.clients{list-style:none}
.clients li a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.clients .name{font-size:clamp(40px,7.5vw,110px);font-weight:500;letter-spacing:-.05em;line-height:.95;transition:color .25s,transform .4s}
.clients .what{color:var(--mute);text-align:right;max-width:28ch;font-size:14px}
.clients:hover .name{color:#3a3936}
.clients li a:hover .name{color:var(--fg);transform:translateX(12px)}
.peek{position:fixed;width:min(600px,45vw);aspect-ratio:16/10;pointer-events:none;z-index:40;opacity:0;transform:translate(-50%,-50%) scale(.92);transition:opacity .2s,transform .25s;overflow:hidden}
.peek.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media(hover:none){.peek{display:none}}
.feature{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(20px,3vw,48px);align-items:end;margin-top:56px}
@media(max-width:800px){.feature{grid-template-columns:1fr}}
.feature .frame{aspect-ratio:16/10;overflow:hidden;display:block}
.feature h3{font-size:clamp(28px,3.4vw,48px);font-weight:500;letter-spacing:-.035em;line-height:1;margin-top:10px}

.statement{font-family:"Instrument Serif",serif;font-size:clamp(34px,5.4vw,84px);line-height:1.02;letter-spacing:-.015em;max-width:34ch;margin-top:16px}
.statement em{color:var(--accent)}
.intro{padding-top:clamp(56px,8vw,110px)}
.about-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px;border-top:1px solid var(--line);padding-top:24px}
@media(max-width:700px){.about-row{grid-template-columns:1fr}}
.about-row p{color:#cfcac0;line-height:1.5;margin-top:8px}

/* film page */
.film-head{padding-top:clamp(40px,6vw,80px)}
.film-head h1{font-size:clamp(52px,10vw,160px);font-weight:500;letter-spacing:-.05em;line-height:.88;margin-top:18px}
.back:hover{color:var(--fg)}
.news-line{font-family:"Instrument Serif",serif;font-size:clamp(20px,2.2vw,28px);color:#e9e5dc;margin-top:16px}
.film section,.film .wrap+.wrap{padding-top:clamp(32px,5vw,64px)}
.player{position:relative;aspect-ratio:16/9;background:#111;overflow:hidden}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player.still img{position:absolute;inset:0}
.film-body{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(24px,5vw,80px)}
@media(max-width:800px){.film-body{grid-template-columns:1fr}}
.log{font-family:"Instrument Serif",serif;font-size:clamp(24px,2.6vw,36px);line-height:1.2}
.pull{margin-top:40px;border-left:2px solid var(--accent);padding-left:20px}
.pull p{font-size:clamp(18px,1.6vw,22px);line-height:1.4;font-style:italic;color:#e3ded5}
.pull cite{display:block;margin-top:10px;font-style:normal;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.btns .cta{margin-top:0}
.poster img{height:auto;object-fit:contain;width:auto;max-width:min(300px,100%);max-height:440px}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px;border-top:1px solid var(--line);padding-top:18px}
.facts p{margin-top:6px;line-height:1.35}
.stills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
@media(max-width:640px){.stills{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stills .still{aspect-ratio:16/9;overflow:hidden;display:block}
.stills .still img{transition:transform .6s}.stills .still:hover img{transform:scale(1.04)}
.grid.films.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:800px){.grid.films.four{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* newsletter + footer */
.letter{margin-top:clamp(80px,10vw,140px);background:var(--fg);color:#0a0a0a;padding:clamp(40px,6vw,80px) clamp(16px,3vw,40px);display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end}
@media(max-width:800px){.letter{grid-template-columns:1fr}}
.letter h2{font-size:clamp(40px,6vw,88px);font-weight:500;letter-spacing:-.05em;line-height:.9}
.letter h2 b{font-family:"Instrument Serif",serif;font-weight:400}
.letter p{margin-top:16px;max-width:36ch;line-height:1.45}
.subscribe .row{display:flex;border-bottom:2px solid #0a0a0a}
.subscribe input{flex:1;min-width:0;background:none;border:0;font:inherit;font-size:20px;padding:14px 0;outline:none;color:#0a0a0a}
.subscribe button{font-weight:500;letter-spacing:.1em;text-transform:uppercase;font-size:13px;padding:0 6px;min-height:44px;color:#0a0a0a}
.subscribe .ok{margin-top:10px;font-size:14px;min-height:20px}
footer{padding-top:48px;padding-bottom:32px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
@media(max-width:800px){footer{grid-template-columns:repeat(2,minmax(0,1fr))}}
footer h4{color:var(--mute);margin-bottom:10px}
footer p,footer a{font-size:14px;line-height:1.6}
footer a:hover{text-decoration:underline}
.fine{border-top:1px solid var(--line);padding-top:18px;padding-bottom:28px;display:flex;justify-content:space-between;color:var(--mute);font-size:12px;flex-wrap:wrap;gap:8px}

/* home: a single row of posters */
.seeall:hover{color:var(--fg)}
@media(max-width:1000px){.grid.films.row .card:nth-child(n+4){display:none}}
@media(max-width:640px){.grid.films.row .card:nth-child(n+3){display:none}}

/* play button: thin outlined triangle over a full-frame still */
.play-cover{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer;display:block}
.play-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter .4s}
.play-cover::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.12);transition:background .3s}
.play-icon{position:absolute;left:50%;top:50%;z-index:1;width:clamp(36px,3.6vw,56px);transform:translate(-40%,-50%);color:#fff;transition:transform .35s ease,opacity .3s;filter:drop-shadow(0 1px 8px rgba(0,0,0,.35))}
.play-icon svg{display:block;width:100%;height:auto;overflow:visible}
.play-cover:hover img{transform:scale(1.02)}
.play-cover:hover::after{background:rgba(0,0,0,.25)}
.play-cover:hover .play-icon{transform:translate(-40%,-50%) scale(1.08)}
.play-cover:focus-visible{outline:2px solid #fff;outline-offset:-6px}

/* footnotes: four Instagram posts */
.feed.ig4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
@media(max-width:800px){.feed.ig4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ig{display:block}
.ig .frame{aspect-ratio:1/1;overflow:hidden;background:#151515}
.ig .frame img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.ig:hover .frame img{transform:scale(1.04)}
.ig p{margin-top:12px;font-size:15px;line-height:1.35;color:#cfcac0}

/* brand project page */
.brand .bhero{position:relative;min-height:min(88vh,860px);display:flex;align-items:flex-end;overflow:hidden;margin-top:-68px}
.bhero img.bg{position:absolute;inset:0}
.bhero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,1) 0%,rgba(10,10,10,.55) 35%,rgba(10,10,10,0) 70%),linear-gradient(to bottom,rgba(0,0,0,.45),rgba(0,0,0,0) 20%)}
.bhero-copy{position:relative;z-index:1;padding-bottom:clamp(32px,5vw,64px);width:100%}
.bhero h1{font-size:clamp(64px,13vw,220px);font-weight:500;letter-spacing:-.055em;line-height:.82;margin-top:18px}
.campaign{font-family:"Instrument Serif",serif;font-style:italic;font-size:clamp(26px,3.4vw,48px);margin-top:14px;color:#e9e5dc}
.factline{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;color:#cfcac0}
.factline span+span::before{content:"·";margin-right:22px;color:var(--mute)}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px}
.actions .cta{margin-top:0}
.shared{font-size:13px}
.vcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:16px}
.vcard{display:flex;flex-direction:column;text-align:left;font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.vthumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#151515}
.vthumb img{position:absolute;inset:0;transition:transform .6s,opacity .3s;opacity:.75}
.vthumb .play-icon{width:22px}
.vcard:hover .vthumb img,.vcard.on .vthumb img{opacity:1}
.vcard:hover .vthumb img{transform:scale(1.03)}
.vcard.on .vthumb{outline:2px solid var(--accent);outline-offset:3px}
.vcard:focus-visible .vthumb{outline:2px solid var(--fg);outline-offset:3px}
.vmeta{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:14px;line-height:1.3}
.vdur{color:var(--mute);font-variant-numeric:tabular-nums}
.details{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(24px,5vw,80px)}
@media(max-width:800px){.details{grid-template-columns:1fr}}
.dtext p{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:#e3ded5;max-width:62ch}
.dtext p+p{margin-top:1em}
.details .facts{margin-top:0;border-top:0;padding-top:0;align-content:start}
.mcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
@media(max-width:800px){.mcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mcard .frame{aspect-ratio:4/3;overflow:hidden;background:#151515}
.mcard .frame img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.mcard:hover .frame img{transform:scale(1.04)}
.mcard h3{margin-top:12px;font-size:20px;font-weight:500;letter-spacing:-.02em}
.mcard span{font-size:14px}

/* darker grotesque sizing: it sets small, so nudge text sizes up for legibility */
body{font-size:18px}
.card .logline,.ig p,.vmeta,footer p,footer a,.clients .what{font-size:17px}
.dtext p{font-size:clamp(20px,1.7vw,23px)}
.label{font-size:12px}

/* section titles in caps */
.sec-head h2{text-transform:uppercase;letter-spacing:.01em;font-weight:800}

/* brand pages: white page, black "Discover more" band (A24 style) */
main.brand{--bg:#fff;--fg:#0a0a0a;--mute:#6b675f;--line:#dcd9d3;--accent:#c9ad00;background:var(--bg);color:var(--fg)}
main.brand .bhero{--bg:#0a0a0a;--fg:#f2efe9;--mute:#c9c5bd;--line:#2a2927;color:var(--fg)}
main.brand .bhero::after{background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.4) 40%,rgba(0,0,0,0) 72%),linear-gradient(to bottom,rgba(0,0,0,.45),rgba(0,0,0,0) 20%)}
main.brand .more-dark{--bg:#0a0a0a;--fg:#f2efe9;--mute:#9a968e;--line:#2a2927;background:var(--bg);color:var(--fg);margin-top:clamp(64px,8vw,120px);padding-top:clamp(32px,4vw,56px);padding-bottom:clamp(24px,3vw,40px)}
main.brand + .letter{margin-top:0}
main.brand .dtext p,main.brand .pull p{color:#1f1e1c}
main.brand .vthumb{background:#ececea}
/* pages without the newsletter banner */
.no-letter{margin-top:clamp(80px,10vw,140px);border-top:1px solid var(--line)}

/* Home: page fades to white while the Branded section is in view */
body.has-hero{transition:background-color .9s cubic-bezier(.4,0,.2,1),color .9s cubic-bezier(.4,0,.2,1)}
body.has-hero .sec-head,body.has-hero .clients li a,body.has-hero .clients .what,body.has-hero .label,body.has-hero .muted,body.has-hero .feature .cta{transition:color .9s,border-color .9s,background-color .9s}
body.lightzone{--bg:#ffffff;--fg:#0a0a0a;--mute:#6b675f;--line:#dcd9d3}
body.lightzone .clients:hover .name{color:#cfccc6}
body.lightzone .clients li a:hover .name{color:var(--fg)}
body.lightzone .cta.solid:hover{color:var(--fg)}
body.lightzone .cta:hover,body.lightzone .cta.solid{color:#fff}
body.has-hero header{transition:background .9s,color .9s}
body.lightzone header.solid{background:rgba(255,255,255,.92)}
body.lightzone header .logo img{filter:invert(1)}
body.has-hero header .logo img{transition:filter .9s}

/* Home: section titles at half size */
body.has-hero .sec-head h2{font-size:clamp(17px,2.5vw,32px)}
body.has-hero .sec-head h2 a:hover{text-underline-offset:5px;text-decoration-thickness:2px}
/* Film pages (and Film & TV index): section titles at the same half size */
main.film .sec-head h2,main.page:not(.brand) .sec-head h2{font-size:clamp(17px,2.5vw,32px)}

/* Home hero: festival/award graphics twice as big */
.hero .kicker img{height:68px}
@media(max-width:760px){.hero .kicker img{height:52px}}

/* "View film" cursor over film posters (same style as View project) */
.vcursor{position:fixed;left:0;top:0;z-index:120;pointer-events:none;color:#0e9fae;font-size:clamp(15px,1.6vw,26px);font-weight:800;letter-spacing:.02em;line-height:1;text-transform:uppercase;white-space:nowrap;transform:translate(-50%,-50%) scale(.4);opacity:0;transition:opacity .25s ease,transform .35s cubic-bezier(.16,1,.3,1)}
.vcursor.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media(hover:hover) and (pointer:fine){.card[data-cursor] .frame{cursor:none}}
img[src*="/img/the-chosen.jpg"]{object-position:28% 50%}

/* Home: About statement leads, no title */
.about-top{padding-top:clamp(72px,10vw,140px)}
.about-top .statement{margin-top:0}
.about-top .cta{margin-top:32px}
/* Home: posters only, no title/year underneath */
#film .card .meta{display:none}
img[src*="/img/banfield-overhead.jpg"]{object-position:22% 50%}
.letter h2 .op{font-weight:800;font-size:1.24em;letter-spacing:-.01em}
.letter h2{white-space:nowrap;font-size:clamp(30px,5.1vw,80px)}
.vcursor{color:#fff;text-align:center;line-height:.92;font-size:clamp(16px,1.5vw,24px);letter-spacing:.04em;text-shadow:0 1px 18px rgba(0,0,0,.35)} .vcursor span{display:block}
img[src*="Nike_v2.jpg"]{object-position:36% 22%!important}

/* Site cursor: inverting circle */
.cdot{position:fixed;left:0;top:0;z-index:2147483646;width:0;height:0;pointer-events:none;opacity:0;transition:opacity .25s ease}
.cdot::before{content:"";position:absolute;left:0;top:0;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:#f1f1f1;mix-blend-mode:difference;transform:scale(1);transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .25s ease}
.cdot{mix-blend-mode:difference}
.cdot.on{opacity:1}
.cdot.big::before{transform:scale(1.7)}
.cdot.press::before{transform:scale(.8)}
.cdot.text::before{transform:scale(.35)}
.cdot.hide::before{transform:scale(0)}
@media(hover:hover) and (pointer:fine){html.has-cdot,html.has-cdot a,html.has-cdot button,html.has-cdot label{cursor:none}}
/* brand list thumbnail: anchored by its corner to the cursor */
.peek{transform:scale(.92)}
.peek.on{transform:scale(1)}

/* Stills galleries: keep every image at its own shape (no cropping) */
.stills{display:block;columns:3;column-gap:4px}
@media(max-width:900px){.stills{columns:2}}
@media(max-width:520px){.stills{columns:1}}
.stills .still{aspect-ratio:auto;display:block;break-inside:avoid;margin:0 0 4px;overflow:hidden}
.stills .still img{width:100%;height:auto;object-fit:initial;position:static;display:block}

/* Stills galleries: an even grid — every frame the same 2.39:1 shape, whole image shown inside it */
.stills{display:grid;columns:auto;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
@media(max-width:900px){.stills{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.stills{grid-template-columns:1fr}}
.stills .still{aspect-ratio:2.39/1;margin:0;background:#0a0a0a;position:relative;overflow:hidden}
.stills .still img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Cursor over films and projects: open white ring with a play triangle (replaces the VIEW FILM / VIEW PROJECT text) */
.vcursor{display:none!important}
.cdot.play{mix-blend-mode:normal}
.cdot.play::before{background:transparent;border:1.5px solid #fff;mix-blend-mode:normal;transform:scale(1.6);box-shadow:0 0 18px rgba(0,0,0,.25)}
.cdot::after{content:"";position:absolute;left:0;top:0;width:22px;height:26px;margin:-13px 0 0 -8px;background:#fff;clip-path:polygon(0 0,100% 50%,0 100%);opacity:0;transform:scale(.4);transition:opacity .25s ease,transform .45s cubic-bezier(.16,1,.3,1);filter:drop-shadow(0 0 8px rgba(0,0,0,.3))}
.cdot.play::after{opacity:1;transform:scale(1)}
.stills .still:hover img{transform:none}.stills .still img{transition:none}

/* no thin horizontal divider lines */
.sec-head,.about-row,.facts,.fine,.no-letter{border-top:0!important}

/* film pages: breathing room between stills and More films */
.more-films{margin-top:clamp(120px,14vw,240px)}

/* mobile menu: full-screen dark panel under a solid header */
@media(max-width:800px){
  html.menu-open{overflow:hidden}
  html.menu-open body header#hdr{background:#0a0a0a!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;mix-blend-mode:normal!important;color:#f2efe9!important;transition:none}
  html.menu-open body header#hdr .logo img{filter:none!important}
  html.menu-open #nav.open ul{display:flex;flex-direction:column;position:fixed;inset:68px 0 0 0;height:calc(100dvh - 68px);margin:0;list-style:none;background:#0a0a0a;padding:28px clamp(16px,3vw,40px) 40px;gap:6px;z-index:49;overflow-y:auto;animation:menuIn .35s cubic-bezier(.16,1,.3,1)}
  html.menu-open #nav.open a{display:block;color:#f2efe9;font-size:clamp(34px,10vw,48px);font-weight:500;letter-spacing:0;text-transform:none;line-height:1.15;padding:10px 0;opacity:1}
  @keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
}

.award-badge{display:inline-flex;align-items:center;justify-content:center;background:#000;padding:22px 30px;margin-top:36px}
.award-badge img{height:84px;width:auto;display:block;filter:brightness(0) invert(1)}

/* rollover over any image that links to another page: the usual pixel-inverting ball, with an arrow cut out of it that draws itself in */
.cdot.play.go{mix-blend-mode:difference}
.cdot.play.go::before{box-sizing:border-box;background:#f1f1f1;border:0;mix-blend-mode:normal;box-shadow:none;transform:scale(1.3);opacity:1;transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .15s ease}
.cdot.play.go::after{opacity:0!important;transform:none}
.cdot .cgo{position:absolute;left:-32.5px;top:-32.5px;width:65px;height:65px;overflow:visible;opacity:0;fill:none;stroke:#000;stroke-width:1.3;stroke-linecap:butt;transition:opacity .1s ease}
.cdot.play.go .cgo{opacity:1}
.cdot .cgo path{stroke-dasharray:14;stroke-dashoffset:14;transition:stroke-dashoffset .12s ease}
.cdot.play.go.on .cgo .sh{stroke-dashoffset:0;transition:stroke-dashoffset .24s cubic-bezier(.3,.7,.2,1) .12s}
.cdot.play.go.on .cgo .hd{stroke-dashoffset:0;transition:stroke-dashoffset .2s cubic-bezier(.3,.7,.2,1) .28s}

/* More films: drifting marquee like More projects */
.marquee{overflow:hidden;touch-action:pan-y;cursor:default}
.mq-track{display:flex;align-items:flex-start;gap:clamp(14px,1.6vw,24px);width:max-content;will-change:transform}
.mq-films{margin-top:8px}
.mq-films .mq-track{padding:0 0 12px}
.mq-films .card{flex:0 0 clamp(200px,19vw,300px)}
@media(prefers-reduced-motion:reduce){.marquee{overflow-x:auto;touch-action:auto}}
a.card[href$="flourish.html"] .frame{aspect-ratio:2/3}
a.card[href$="flourish.html"] .frame img{width:100%;height:100%;object-fit:cover}
a[href$="flourish.html"] img{object-position:52% 50%}
.film-main .log-body{margin-top:clamp(20px,3vw,36px)}.film-main .log-body p{font-size:clamp(16px,1.25vw,19px);line-height:1.6;color:#b8b5af;max-width:62ch;margin:0 0 1.1em}
.side-btns{margin-top:28px}
@media(max-width:800px){.poster img{max-width:min(170px,46vw);max-height:260px}}
.cta.solid.watch{background:#0d5a62;border-color:#0d5a62;color:#fff}.cta.solid.watch:hover{background:#13777f;border-color:#13777f;color:#fff}body.lightzone .cta.solid.watch,body.lightzone .cta.solid.watch:hover{color:#fff}