:root{--paper:#f7f8fa;--ink:#17191b;--secondary:#777b81;--line:#e0e2e5;--gutter:clamp(22px,5vw,96px);--ease:cubic-bezier(.22,.8,.24,1);font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;color-scheme:light dark}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}body.modal-open{overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;color:inherit;border:0}a,button{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid #0766d2;outline-offset:6px}img{display:block;width:100%;height:100%;object-fit:cover}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip-link{position:fixed;left:20px;top:-80px;padding:12px;background:#fff;z-index:40}.skip-link:focus{top:20px}.site-header{height:87px;padding:0 var(--gutter);position:fixed;inset:0 0 auto;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:24px;transition:height .4s var(--ease),background .4s,box-shadow .4s,backdrop-filter .4s}.site-header.scrolled{height:72px;background:rgba(247,248,250,.78);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);box-shadow:0 1px 0 #11111109}.wordmark{font-size:19px;font-weight:600;letter-spacing:-.055em;white-space:nowrap}.wordmark-dot{padding-left:1px}.site-nav{display:flex;gap:31px;align-items:center;font-size:14px}.site-nav>a{display:inline-flex;align-items:center;min-height:44px;padding:10px 0;font-weight:500;letter-spacing:.015em;text-underline-offset:6px;text-decoration-thickness:1px}.site-nav>a:hover,.site-nav>a:focus-visible{text-decoration:underline}.site-nav .nav-contact{border-radius:99px;padding:10px 19px;background:var(--ink);color:#fff}.opening{height:calc(100svh + 180px);min-height:920px;padding-top:122px;position:relative}.hero-intro{text-align:center;padding:0 24px;will-change:transform,opacity}.eyebrow{font-size:12px;font-weight:500;letter-spacing:.12em;line-height:1.6;margin:0 0 17px;color:var(--secondary)}.hero-intro h1{font-size:clamp(55px,7vw,116px);font-weight:600;line-height:1.02;letter-spacing:-.06em;margin:0}.title-stop{color:#898d91}.hero-stage{position:sticky;top:94px;display:flex;flex-direction:column;gap:20px;height:auto;min-height:0;max-height:none;margin-top:34px;perspective:1500px}.hero-frame{position:relative;flex:0 0 auto;height:clamp(398px,calc(100svh - 360px),820px);width:calc(100% - var(--gutter)*2);max-width:1800px;margin:0 auto;border-radius:32px;overflow:hidden;isolation:isolate;background:#242827;transform-origin:50% 45%;will-change:transform,border-radius;box-shadow:0 25px 60px -45px #121b29a0}.hero-images,.hero-shade{position:absolute;inset:0}.hero-images{overflow:hidden}.hero-image{position:absolute;inset:0;object-position:center 40%;opacity:0;transform:scale(1.09);transition:opacity 900ms ease,transform 1.7s var(--ease)}.hero-image.is-active{opacity:1;transform:scale(1)}.hero-shade{background:linear-gradient(180deg,transparent 50%,#03060b0a 58%,#03060b65 100%);pointer-events:none}.feature-caption{position:absolute;bottom:33px;left:36px;color:#fff;max-width:calc(100% - 280px)}.feature-kicker{font-size:12px;font-weight:500;letter-spacing:.12em;opacity:.8}.feature-caption p{font-size:clamp(23px,2.2vw,38px);font-weight:500;letter-spacing:-.035em;margin:9px 0 0;line-height:1.15}.hero-play{position:absolute;right:32px;bottom:31px;display:flex;align-items:center;gap:12px;padding:15px 22px;border:1px solid #ffffff38;border-radius:99px;background:#ffffffeb;color:#111316;font-size:14px;font-weight:500;backdrop-filter:blur(20px);transition:background .25s,transform .4s var(--ease);box-shadow:0 5px 25px #0001}.hero-play:hover{background:white;transform:scale(1.04)}.small-play{display:flex;width:14px;height:14px}.small-play svg{width:14px;height:14px;fill:currentColor}.stage-controls{margin:0 auto;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;width:calc(100% - var(--gutter)*2);max-width:1800px}.hero-switcher{display:flex;gap:2px;padding:4px;border-radius:99px;background:#e8eaed;position:relative}.switcher-active{position:absolute;left:4px;top:4px;width:44px;height:33px;border-radius:99px;background:#fff;box-shadow:0 2px 6px #0c142516;transition:transform .5s var(--ease)}.hero-choice{position:relative;z-index:1;width:44px;height:33px;border-radius:99px;background:transparent;font-size:12px;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--secondary)}.hero-choice[aria-pressed=true]{color:var(--ink)}.scroll-cue{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--secondary)}.scroll-line{display:block;width:23px;height:1px;background:#a1a6ad}.work-section{padding:110px var(--gutter) 112px;max-width:1840px;margin:auto}.section-heading-row{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:49px}.section-heading-row .eyebrow{margin-bottom:14px}.section-heading-row h2{font-size:clamp(42px,5vw,77px);font-weight:600;letter-spacing:-.055em;line-height:1.05;margin:0}.filters{display:flex;gap:3px;align-items:center;flex-shrink:0;padding:5px;border-radius:99px;background:#e9ebee}.filter{background:transparent;padding:11px 19px;border-radius:99px;font-size:14px;color:#686d73;transition:background .25s,color .25s,box-shadow .25s}.filter[aria-pressed=true]{background:#fff;box-shadow:0 2px 8px #0c14250b;color:var(--ink)}.film-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:55px 30px}.film-card[hidden]{display:none}.film-wide{grid-column:1/-1}.film-button{width:100%;display:block;text-align:left;padding:0;background:none}.film-visual{display:block;position:relative;aspect-ratio:1.48;background:#ddd;overflow:hidden;border-radius:28px;isolation:isolate;transition:border-radius .6s var(--ease),transform .6s var(--ease)}.film-wide .film-visual{aspect-ratio:2.1}.film-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(#0003,transparent 28%,transparent 60%,#0002);pointer-events:none}.film-visual img{transition:transform 1s var(--ease);will-change:transform}.film-button:hover .film-visual img{transform:scale(1.035)}.film-button:hover .film-visual{border-radius:36px}.film-client-tag{position:absolute;left:27px;top:25px;color:white;font-size:14px;z-index:1;text-shadow:0 1px 15px #0008}.play-disc{position:absolute;bottom:25px;right:26px;border-radius:99px;width:48px;height:48px;display:grid;place-items:center;background:#ffffffd9;color:#202428;z-index:1;backdrop-filter:blur(15px);transition:transform .35s var(--ease),background .35s}.play-disc svg{width:17px;height:17px;fill:currentColor;margin-left:2px}.film-button:hover .play-disc{transform:scale(1.1);background:#fff}.film-meta{display:flex;justify-content:space-between;align-items:baseline;gap:15px;margin-top:18px;padding:0 4px}.film-title{font-size:clamp(22px,2vw,31px);letter-spacing:-.035em;font-weight:500;line-height:1.2}.film-number{font-size:12px;color:#8e949b;font-variant-numeric:tabular-nums}.film-grid.is-filtered .film-card{grid-column:auto}.film-grid.is-filtered .film-visual{aspect-ratio:1.48}.work-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:53px;font-size:13px;color:var(--secondary)}.work-bottom a{color:#35393e;border-bottom:1px solid #bdc1c6;padding-bottom:4px}.about{background:#151719;color:#f5f6f7;border-radius:44px 44px 0 0;padding:125px var(--gutter) 100px;text-align:center;position:relative}.about-inner{max-width:1100px;margin:auto}.about .eyebrow{color:#8a8f95;margin-bottom:37px}.about-statement{font-size:clamp(53px,7.5vw,110px);line-height:1.02;font-weight:600;letter-spacing:-.055em;margin:0}.statement-line{display:block;color:#f5f6f7;transition:color .65s ease}.motion-ready .statement-line{color:#54585d}.motion-ready .statement-line.lit{color:#f5f6f7}.about-copy{max-width:610px;margin:43px auto 0;font-size:19px;line-height:1.6;color:#b3b7bd;letter-spacing:-.018em}.about-copy p{margin:0 0 10px}.about-copy p:first-child{color:#e1e4e8}.collaborators{font-size:13px;line-height:2;color:#91979e;margin-top:52px}.contact{padding:100px var(--gutter) 30px;background:#fff}.contact-main{text-align:center}.contact-main h2{font-size:clamp(59px,7.5vw,110px);line-height:.99;font-weight:600;letter-spacing:-.055em;margin:22px 0 31px}.contact-pill{display:inline-flex;align-items:center;gap:27px;padding:17px 23px 17px 29px;background:var(--ink);color:#fff;border-radius:99px;font-size:16px;transition:transform .4s var(--ease),background .4s}.contact-pill svg{height:20px;width:20px}.contact-pill:hover{transform:scale(1.04);background:#333940}.footer-links{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:70px 0 30px;font-size:14px;letter-spacing:-.02em}.footer-links a:hover{text-decoration:underline;text-underline-offset:5px}.footer-bottom{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;gap:20px;font-size:12px;color:var(--secondary)}.motion-ready .reveal{opacity:0;transform:translateY(42px);transition:opacity .9s var(--ease),transform 1s var(--ease)}.motion-ready .reveal.in-view{opacity:1;transform:translateY(0)}.film-dialog{border:0;padding:0;width:100%;height:100dvh;max-width:none;max-height:none;inset:0;margin:0;background:#0d0f11;color:#fff;overflow-y:auto}.film-dialog::backdrop{background:#000d}.dialog-inner{min-height:100%;display:flex;flex-direction:column;justify-content:center;max-width:1550px;margin:auto;padding:88px 4vw 35px;animation:dialog-in .5s var(--ease)}.dialog-close{position:fixed;top:23px;right:4vw;background:#2d3035;border:1px solid #ffffff20;color:#fff;border-radius:99px;padding:12px 18px;font-size:14px;z-index:2;display:flex;gap:18px;align-items:center}.dialog-close span{font-size:20px;line-height:14px}.video-container{width:100%;aspect-ratio:16/9;position:relative;background:#000;border-radius:15px;overflow:hidden}.video-container iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.dialog-footer{display:flex;justify-content:space-between;gap:20px;align-items:center;padding-top:23px}.dialog-footer h2{font-size:27px;font-weight:500;letter-spacing:-.03em;margin:0 0 7px}.dialog-footer p{font-size:14px;color:#999fa8;margin:0}.dialog-footer a{font-size:14px;border-bottom:1px solid #646a72;padding:6px 0;white-space:nowrap}.dialog-note{font-size:12px;color:#8c929a;line-height:1.5;margin-top:23px}.noscript-note{padding:24px;text-align:center}@keyframes dialog-in{from{opacity:0;transform:translateY(25px) scale(.98)}to{opacity:1;transform:none}}@media(min-width:1900px){.site-header{padding-left:max(var(--gutter),calc((100vw - 1760px)/2));padding-right:max(var(--gutter),calc((100vw - 1760px)/2))}}@media(max-width:900px){.opening{padding-top:129px;height:calc(100svh + 130px);min-height:830px}.hero-stage{margin-top:38px}.hero-frame{height:clamp(375px,calc(100svh - 290px),820px)}.hero-intro h1{font-size:clamp(60px,8.7vw,85px)}.feature-kicker{display:none}.feature-caption{left:26px;bottom:28px}.hero-play{right:24px;bottom:24px}.hero-frame{border-radius:25px}.section-heading-row{display:block}.filters{margin-top:25px;width:max-content}.film-grid{gap:40px 22px}.film-visual{border-radius:22px}.film-title{font-size:24px}.work-section{padding-top:72px;padding-bottom:80px}.about{padding-top:90px;padding-bottom:80px}.contact{padding-top:80px}.site-nav{gap:23px}}@media(max-width:600px){:root{--gutter:20px}.site-header{height:76px;gap:13px}.site-header.scrolled{height:66px}.wordmark{font-size:clamp(14px,4vw,16px);letter-spacing:-.055em}.site-nav{gap:16px;font-size:13px}.site-nav .nav-contact{padding:9px 13px}.site-nav>a[href="#about"]{display:none}.opening{height:auto;min-height:0;padding-top:122px;padding-bottom:44px}.hero-intro .eyebrow{font-size:12px;letter-spacing:.1em;margin-bottom:20px}.hero-intro h1{font-size:clamp(45px,11.4vw,67px);letter-spacing:-.06em}.hero-stage{position:relative;top:auto;gap:19px;margin-top:37px}.hero-frame{height:clamp(380px,54svh,600px);width:calc(100% - 28px);border-radius:24px}.hero-image{object-position:58% center}.feature-caption{left:22px;bottom:88px;max-width:calc(100% - 44px)}.feature-caption p{font-size:27px}.hero-play{bottom:24px;left:21px;right:auto;padding:12px 18px;font-size:13px;gap:9px}.stage-controls{margin:0 auto;width:calc(100% - 40px)}.hero-switcher{padding:5px}.switcher-active{left:5px;top:5px;height:44px}.hero-choice{height:44px}.scroll-cue{font-size:12px;gap:7px}.scroll-line{width:16px}.work-section{padding-top:45px;padding-bottom:65px}.section-heading-row .eyebrow{font-size:12px;letter-spacing:.08em}.section-heading-row h2{font-size:43px}.section-heading-row{margin-bottom:30px}.filters{margin-top:23px}.filter{padding:11px 17px;font-size:13px}.film-grid{grid-template-columns:1fr;gap:30px}.film-wide{grid-column:auto}.film-visual,.film-wide .film-visual,.film-grid.is-filtered .film-visual{aspect-ratio:1.25;border-radius:23px}.film-client-tag{left:21px;top:20px;font-size:13px}.play-disc{width:44px;height:44px;bottom:20px;right:20px}.film-meta{margin-top:15px}.film-title{font-size:23px}.work-bottom{margin-top:34px;font-size:12px}.about{border-radius:28px 28px 0 0;padding-top:70px;padding-bottom:65px}.about .eyebrow{font-size:12px;margin-bottom:29px}.about-statement{font-size:clamp(43px,10.6vw,63px)}.about-copy{font-size:17px;line-height:1.55;margin-top:31px;max-width:440px}.collaborators{font-size:12px;margin-top:35px;max-width:350px;margin-left:auto;margin-right:auto}.contact{padding-top:64px;padding-bottom:26px}.contact-main h2{font-size:63px}.contact-main .eyebrow{font-size:12px}.contact-pill{padding:15px 21px 15px 25px;font-size:15px}.footer-links{padding-top:56px;padding-bottom:25px;flex-wrap:wrap;gap:19px;font-size:13px}.footer-bottom{font-size:12px;line-height:1.5;gap:25px}.dialog-inner{padding:88px 15px 30px}.dialog-close{right:16px}.dialog-footer{align-items:flex-start;flex-direction:column;gap:16px}.dialog-footer h2{font-size:24px}.video-container{border-radius:6px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.hero-stage{position:relative;top:auto}.hero-frame{transform:none!important}.hero-intro{transform:none!important;opacity:1!important}.motion-ready .reveal{opacity:1;transform:none}.motion-ready .statement-line{color:#f5f6f7}}

/* The full Vimeo collection. */
.film-collection[hidden]{display:none}
.film-collection+.film-collection{margin-top:88px}
.collection-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:27px;padding-bottom:19px;border-bottom:1px solid var(--line)}
.collection-heading h3{font-size:clamp(27px,3vw,39px);letter-spacing:-.04em;font-weight:500;line-height:1.2;margin:0}
.collection-heading>span{font-size:14px;color:var(--secondary);white-space:nowrap}
.section-heading-row{align-items:flex-start;flex-wrap:wrap}
.section-heading-row h2{font-size:clamp(42px,4.6vw,72px);max-width:100%;overflow-wrap:normal}
.filters{max-width:100%;flex-wrap:wrap;flex-shrink:1;gap:3px;border-radius:25px}
.filter{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 15px;font-size:14px;white-space:nowrap}
.filter-count{font-size:12px;opacity:.65;font-variant-numeric:tabular-nums}
.film-visual{aspect-ratio:16/9}
.film-meta{align-items:flex-start;gap:18px}
.film-title{min-width:0;overflow-wrap:anywhere;font-size:clamp(1.125rem,1.5vw,1.375rem);font-weight:700;letter-spacing:.025em;line-height:1.35}
.film-duration{flex:0 0 auto;padding-top:5px;font-size:14px;line-height:1.5;color:var(--secondary);font-variant-numeric:tabular-nums}
.feature-caption p{overflow-wrap:anywhere}
.dialog-footer>div{min-width:0}
.dialog-footer h2{overflow-wrap:anywhere;line-height:1.25}
@media(max-width:600px){
 .film-collection+.film-collection{margin-top:57px}
 .collection-heading{margin-bottom:23px;padding-bottom:16px}
 .collection-heading h3{font-size:28px}
 .section-heading-row{margin-bottom:36px}
 .section-heading-row h2{font-size:43px;line-height:1.08}
 .filter{padding:10px 12px}
 .film-visual,.film-wide .film-visual,.film-grid.is-filtered .film-visual{aspect-ratio:16/9}
 .film-title{font-size:1.125rem}
 .film-duration{font-size:14px;padding-top:3px}
 .feature-caption p{font-size:clamp(24px,6.7vw,29px);line-height:1.18}
 .work-bottom{font-size:14px;flex-wrap:wrap}
}

/* CinemaScope opening, photographic navigation and translucent play marks. */
.opening{height:auto;min-height:0;padding-bottom:96px}
.hero-stage{gap:22px}
.hero-frame{height:auto;min-height:0;max-height:none;aspect-ratio:2.39/1;width:calc(100% - var(--gutter)*2);border-radius:28px;touch-action:pan-y;transition:box-shadow .6s var(--ease)}
.hero-image{object-position:center}
.hero-shade{z-index:2;background:linear-gradient(180deg,#00000003,#00000008 60%,#00000038)}
.feature-caption{position:static;bottom:auto;left:auto;width:calc(100% - var(--gutter)*2);max-width:1800px;margin:0 auto;color:var(--ink)}
.feature-kicker{display:block;font-size:12px;letter-spacing:.13em;color:var(--secondary);opacity:1}
.feature-caption p{font-size:clamp(24px,2.6vw,38px);line-height:1.2;font-weight:500;letter-spacing:-.035em;margin:8px 0 0;overflow-wrap:break-word}
#feature-meta{display:block;margin-top:9px;font-size:14px;line-height:1.5;color:var(--secondary)}
.stage-controls{flex-wrap:nowrap;gap:30px;align-items:center}
.hero-switcher{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:min(450px,100%);padding:0;border-radius:0;background:transparent}
.hero-choice{display:block;width:100%;height:auto;min-height:44px;aspect-ratio:16/9;padding:0;border:3px solid transparent;border-radius:13px;overflow:hidden;background:#e2e4e7;opacity:.64;transition:opacity .35s,transform .5s var(--ease),border-color .35s,box-shadow .35s}
.hero-choice img{object-fit:cover;transition:transform .65s var(--ease)}
.hero-choice[aria-pressed=true]{border-color:var(--ink);opacity:1;box-shadow:0 5px 15px -8px #17203170}
.hero-choice:focus-visible{opacity:1}
.scroll-cue{font-size:14px;white-space:nowrap}
.hero-play,.play-disc{position:absolute;inset:auto auto 18px 18px;display:grid;place-items:center;width:64px;height:64px;padding:0;border:0;border-radius:0;background:transparent;color:#ffffffd9;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;transform:none;transform-origin:left bottom;transition:transform .6s var(--ease),color .4s;z-index:4}
.hero-play{width:72px;height:72px}
.hero-play svg,.play-disc svg{display:block;width:56px;height:56px;margin:0;fill:currentColor;filter:drop-shadow(0 3px 7px #00000070)}
.hero-play svg{width:64px;height:64px}
.hero-play:hover,.film-button:hover .play-disc{background:transparent;transform:none}
.film-visual{transition:border-radius .6s var(--ease),transform .6s var(--ease),box-shadow .6s var(--ease)}
.film-visual:after{z-index:2}
.film-client-tag{z-index:3}
.hover-preview{position:absolute;inset:0;overflow:hidden;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s ease}
.hover-preview iframe{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:0;max-width:none;pointer-events:none}
.is-previewing .hover-preview{opacity:1}
.film-button:focus-visible .play-disc,.hero-play:focus-visible{transform:scale(1.2);color:#fff;background:transparent}
@media(hover:hover) and (pointer:fine){
 .hero-frame:hover{box-shadow:0 32px 70px -30px #121b2970}
 .hero-frame:hover .hero-image.is-active{transform:scale(1.065)}
 .hero-frame:hover .hero-play,.film-button:hover .play-disc{transform:scale(1.25);color:#fff;background:transparent;box-shadow:none}
 .film-button:hover .film-visual{transform:translateY(-6px);border-radius:32px;box-shadow:0 24px 42px -22px #121b2970}
 .film-button:hover .film-visual>img{transform:scale(1.075)}
 .hero-choice:hover{opacity:1;transform:translateY(-3px)}
 .hero-choice:hover img{transform:scale(1.08)}
}
@media(max-width:900px){
 .opening{height:auto;min-height:0;padding-bottom:70px}
 .hero-frame{height:auto;border-radius:24px}
 .hero-play{width:64px;height:64px}
 .play-disc{width:60px;height:60px}
 .hero-play svg,.play-disc svg{width:52px;height:52px}
 .stage-controls{gap:22px}
 .hero-switcher{max-width:390px}
}
@media(max-width:600px){
 .opening{padding-bottom:40px}
 .hero-stage{gap:18px;margin-top:30px}
 .hero-frame{height:auto;aspect-ratio:2.39/1;border-radius:15px;width:calc(100% - var(--gutter)*2)}
 .hero-play,.play-disc{inset:auto auto 9px 9px;width:48px;height:48px}
 .hero-play svg,.play-disc svg{width:44px;height:44px}
 .feature-caption{max-width:none}
 .feature-caption p{font-size:clamp(23px,6.2vw,30px);line-height:1.2}
 #feature-meta{margin-top:8px}
 .stage-controls{width:calc(100% - var(--gutter)*2);gap:0}
 .hero-switcher{width:232px;max-width:100%;gap:8px}
 .hero-choice{height:44px;min-height:44px;aspect-ratio:auto;border-width:2px;border-radius:7px}
 .scroll-cue{display:none}
}
@media(prefers-reduced-motion:reduce){
 .hero-image.is-active,.hero-frame:hover .hero-image.is-active,.film-button:hover .film-visual>img,.hero-choice:hover img{transform:none}
 .film-button:hover .film-visual,.hero-choice:hover{transform:none}
 .hero-frame:hover .hero-play,.film-button:hover .play-disc,.film-button:focus-visible .play-disc,.hero-play:focus-visible{transform:none}
}
@media(max-width:370px){
 .site-header{padding-left:16px;padding-right:16px;gap:8px}
 .site-nav{gap:10px}
 .site-nav .nav-contact{padding:9px 11px}
 .filter{gap:6px;padding-left:10px;padding-right:10px}
 .scroll-cue{font-size:12px}
}

/* Spare film showcase: title, frame and three photographic choices. */
.opening{padding-top:130px}
.hero-intro{width:calc(100% - var(--gutter)*2);max-width:1800px;margin:0 auto;padding:0;text-align:left;will-change:auto}
.hero-role{display:block;margin:0 0 24px;font-size:13px;font-weight:500;line-height:1.6;letter-spacing:.12em;text-align:center;text-transform:uppercase;color:var(--secondary)}
.hero-intro h1{max-width:44ch;font-size:clamp(1.5rem,2.6vw,2.625rem);font-weight:700;line-height:1.22;letter-spacing:.035em;text-wrap:balance;overflow-wrap:break-word}
.hero-credits{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 28px;margin-top:20px;color:var(--secondary);font-size:14px;line-height:1.5}
.hero-credits p{margin:0}
.hero-credits #feature-meta{margin:0;font-size:14px}
.hero-stage{margin-top:32px}
.about{padding-top:96px;padding-bottom:96px;text-align:left}
.about-inner{max-width:840px}
.closing-title{margin:0;font-size:clamp(44px,6vw,78px);font-weight:500;line-height:1.08;letter-spacing:-.045em}
.director-bio{margin:30px 0 0;line-height:1.6}
.director-name,.director-role{display:block}
.director-name{font-size:18px;color:#e3e6eb}
.director-role{margin-top:3px;font-size:14px;color:#a4aab2}
.contact{--contact-ink:#17191b;--contact-secondary:#646b75;--contact-line:#dfe2e6;padding-top:clamp(80px,9vw,148px);padding-bottom:max(32px,env(safe-area-inset-bottom));margin:0;border:0;border-radius:44px 44px 0 0;box-shadow:none;display:flow-root;overflow:hidden}
.contact-main,.footer-links,.footer-bottom{max-width:840px;margin-left:auto;margin-right:auto}
.contact-main{text-align:center;padding-bottom:clamp(76px,8vw,124px)}
.contact-main h2{margin:0;font-size:clamp(64px,10vw,144px);font-weight:600;line-height:1.02;letter-spacing:-.055em;color:var(--contact-ink)}
.contact-address{margin-top:32px}
.contact-email{display:inline-block;max-width:100%;min-height:44px;padding-bottom:6px;border-bottom:1px solid #b9bec5;font-size:clamp(18px,2.2vw,28px);line-height:1.4;letter-spacing:-.025em;overflow-wrap:anywhere;transition:border-color .25s}
.contact-email:hover{border-color:var(--contact-ink)}
.contact .footer-bottom{border-top:0;color:var(--contact-secondary)}
.motion-ready .contact .reveal{transition-duration:1s,1.15s}
.motion-ready .contact-address{transition-delay:.14s}
.motion-ready .contact .footer-bottom{transition-delay:.28s}
.contact-address:focus-within{opacity:1;transform:none}
/* Contact follows native scroll directly, with no timed reveal or easing. */
.contact-title-viewport{overflow:hidden;padding-block:8px;margin-block:-8px}
#contact-title{transition:none;animation:none;will-change:transform}
@media(prefers-reduced-motion:reduce){#contact-title{transform:none!important;will-change:auto}}
/* Short opposing entrances settle at the original alignment without clipping. */
.collection-heading h3{flex:1 1 0;min-width:0;overflow:visible}
.collection-heading>.collection-count-viewport{flex:0 0 auto;max-width:40%;overflow:visible}
.collection-title-text,.collection-count-text{display:block;transition:none;animation:none;will-change:transform}
.collection-title-text{overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){.collection-title-text,.collection-count-text{transform:none!important;will-change:auto}}
.footer-links{padding-top:32px;padding-bottom:32px}
@media(max-width:600px){
 .opening{padding-top:111px}
 .hero-role{margin-bottom:20px;letter-spacing:.1em}
 .hero-intro h1{font-size:clamp(1.5rem,6.1vw,1.875rem);line-height:1.25;letter-spacing:.035em}
 .hero-credits{display:block;margin-top:16px}
 .hero-credits #feature-meta{margin-top:5px}
 .hero-stage{margin-top:23px}
 .about{padding-top:62px;padding-bottom:64px}
 .director-bio{margin-top:26px}
 .contact{padding-top:78px;padding-bottom:max(28px,env(safe-area-inset-bottom));border-radius:28px 28px 0 0}
 .contact-main h2{font-size:clamp(64px,17vw,88px)}
 .contact-address{margin-top:26px}
 .footer-links{padding-top:24px;padding-bottom:26px}
}

/* Follow the browser/device appearance preference from the first paint. */
:root{
 color-scheme:light dark;
 --secondary:#646b75;
 --surface:#ffffff;
 --surface-muted:#e9ebee;
 --surface-raised:#ffffff;
 --media-background:#e2e4e7;
 --contact-paper:#ffffff;
 --button-ink:#ffffff;
 --link-ink:#35393e;
 --link-line:#a5acb5;
 --focus:#0766d2;
 --closing-background:#151719;
}
html{background:var(--paper)}
/* The main surface frames Contact's rounded top. The canvas below the page
   continues its colour; footer-surface.js also updates Safari's native tint. */
html.portfolio-page,html.portfolio-page body{background:var(--contact-paper)}
html.portfolio-page #top{background:var(--paper);display:flow-root}
button:focus-visible,a:focus-visible{outline-color:var(--focus)}
.skip-link{background:var(--surface);color:var(--ink)}
/* Solid navigation meets the top edge and fully covers scrolling films. */
.site-header,.site-header.scrolled{background:var(--paper);border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.site-nav .nav-contact{color:var(--button-ink)}
.filters{background:var(--surface-muted)}
.filter{color:var(--secondary)}
.filter[aria-pressed=true]{background:var(--surface-raised);color:var(--ink)}
.filter-count{opacity:1;color:inherit}
.film-visual,.hero-choice{background:var(--media-background)}
.film-number{color:var(--secondary)}
.work-bottom a{color:var(--link-ink);border-color:var(--link-line)}
.scroll-line{background:var(--link-line)}
.about{background:var(--closing-background)}
.contact{background:var(--contact-paper);color:var(--contact-ink)}
.contact-email{border-color:var(--contact-line)}
.contact-email:hover{border-color:var(--contact-ink)}
.film-dialog{color-scheme:dark}
@media(prefers-color-scheme:dark){
 :root{
  color-scheme:dark;
  --paper:#101214;
  --ink:#eef1f5;
  --secondary:#aeb5bf;
  --line:#32383f;
  --surface:#16191d;
  --surface-muted:#23282e;
  --surface-raised:#383f49;
  --media-background:#252a30;
  --contact-paper:#0b0c0e;
  --button-ink:#101214;
  --link-ink:#e4e7eb;
  --link-line:#56606e;
  --focus:#8ebcff;
  --closing-background:#1b1f24;
 }
 .contact{--contact-ink:#f5f6f7;--contact-secondary:#aeb5bf;--contact-line:#343a42}
}

/* Approved frame bounce and center focus. Native page scrolling stays untouched. */
.film-motion-enabled .film-card.reveal{opacity:1;transform:none;transition:none}
.film-motion-enabled .film-button{transform-origin:50% 50%;touch-action:pan-y pinch-zoom}
.film-motion-enabled .film-wide .film-meta{margin-top:clamp(20px,2vw,36px)}
.film-motion-enabled .film-visual,.film-motion-enabled .hero-frame{transform-origin:50% 50%;transition:box-shadow .35s var(--ease);will-change:auto}
.film-motion-enabled .film-visual,.film-motion-enabled .film-button:hover .film-visual{border-radius:28px}
.film-motion-enabled .film-visual>img,.film-motion-enabled .film-button:hover .film-visual>img,.film-motion-enabled .hero-frame:hover .hero-image.is-active{transform:none}
.film-motion-enabled .is-motion-visible{will-change:transform}
@media(max-width:900px){.film-motion-enabled .film-visual,.film-motion-enabled .film-button:hover .film-visual{border-radius:22px}}
@media(max-width:600px){.film-motion-enabled .film-visual,.film-motion-enabled .film-button:hover .film-visual{border-radius:23px}}
@media(prefers-reduced-motion:reduce){.film-button,.film-visual,.hero-frame{transform:none!important;will-change:auto!important}}

/* One inherited typeface across navigation, titles and the film viewer. */
:root{--site-font:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;font-family:var(--site-font)}
body,button,input,select,textarea,dialog{font-family:var(--site-font)}
h1,h2,h3,h4,h5,h6,.wordmark,.film-title{font-family:inherit}
#feature-title{display:inline-block;vertical-align:top;transform-origin:left center}
.hero-intro h1{overflow:hidden;padding-block:3px}
@media(max-width:600px){
 .hero-intro h1{max-width:none;font-size:clamp(.875rem,3.8vw,1rem);line-height:1.5;letter-spacing:.025em;white-space:nowrap;text-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
 .hero-intro h1::-webkit-scrollbar{display:none}
 #feature-title{width:max-content;max-width:none;white-space:nowrap}
}

/* The player is a sheet over the original scroll position. */
/* Keep the entire film at its native ratio, with an opaque player backdrop. */
.film-visual,.hero-frame,.hover-preview,.video-container,.watch-player{background-color:#000}
.video-container,.watch-player{isolation:isolate}
iframe.film-embed{display:block;border:0;outline:0;box-shadow:none;background:#000;color-scheme:normal}
.video-container .film-embed,.watch-player .film-embed{inset:0;width:100%;height:100%;max-width:none}
.film-dialog{background:transparent;overflow:hidden;overscroll-behavior:contain}
.film-dialog::backdrop{background:rgb(0 0 0 / var(--viewer-backdrop,.82));transition:background .25s}
.film-dialog.is-dismissing::backdrop{background:transparent}
.dialog-inner{position:relative;height:100dvh;min-height:0;max-width:none;justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain;background:#0d0f11;padding:70px max(4vw,calc((100vw - 1430px)/2)) 30px;animation:none;transform-origin:50% 50%;outline:none}
.viewer-handle{position:absolute;top:max(20px,env(safe-area-inset-top));left:50%;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:#ffffff50;pointer-events:none}
.film-dialog .video-container{--player-max-height:max(160px,calc(100dvh - 220px));flex-shrink:0;width:min(100%,calc(var(--player-max-height) * var(--film-ratio,1.777777778)));height:auto;max-height:none;margin-top:auto;margin-inline:auto;align-self:center}
.viewer-hint{margin:26px 0 0;font-size:.875rem;line-height:1.5;color:#b4bac3;text-align:center}
.viewer-accessible-close:focus-visible{position:fixed;top:20px;right:20px;clip:auto;width:auto;height:auto;padding:12px 18px;overflow:visible;background:#2d3035;color:#fff;border-radius:20px;z-index:5}
.film-dialog .dialog-note{text-align:center;margin-top:10px;margin-bottom:auto}
.film-dialog .dialog-footer h2{font-size:clamp(1.125rem,2vw,1.625rem);font-weight:700;letter-spacing:.025em}
@media(max-width:600px){
 .dialog-inner{padding:64px 20px max(28px,env(safe-area-inset-bottom));}
 .viewer-hint{margin-top:22px}
}
@media(prefers-reduced-motion:reduce){#feature-title{transform:none!important}}

/* Pointer and touch interaction never leave a selection box around a clip. */
.play-press-enabled{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.hero-play svg,.play-disc svg{transform-origin:50% 50%;transform-box:view-box;transition:none;-webkit-user-select:none;user-select:none}
svg.is-play-pressing{will-change:transform}
@media(prefers-reduced-motion:reduce){.hero-play svg,.play-disc svg{transform:none!important;will-change:auto}}
.film-button:focus,.hero-play:focus,.hero-choice:focus{outline:none}
html[data-input-mode=keyboard] .film-button:focus-visible,
html[data-input-mode=keyboard] .hero-play:focus-visible,
html[data-input-mode=keyboard] .hero-choice:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
@media(prefers-reduced-motion:no-preference){.hero-intro h1{overflow-x:hidden}}

/* Small, single-line film labels share the centre-focus dissolve. */
:root{--film-title-size:clamp(.875rem,1.1vw,1rem)}
.film-title,.hero-intro h1{font-size:var(--film-title-size);font-weight:700;letter-spacing:.025em;line-height:1.5}
.film-title{flex:1 1 0;min-width:0;max-width:100%}
.film-meta{align-items:baseline;gap:16px}
.film-grid,.film-card,.film-button,.film-meta{min-width:0;max-width:100%}
/* A long marquee must never widen the mobile grid beyond its side gutters. */
@media(max-width:600px){.film-grid{grid-template-columns:minmax(0,1fr)}}
.film-duration{font-size:.8125rem;padding-top:0;line-height:1.6}
.hero-intro h1{max-width:none;white-space:nowrap;text-wrap:nowrap;overflow-wrap:normal}
#feature-title{width:max-content;max-width:none;white-space:nowrap}
.title-marquee-ready{overflow:hidden;white-space:nowrap;scrollbar-width:none}
.title-marquee-ready::-webkit-scrollbar{display:none}
.title-marquee-track{display:inline-flex;align-items:baseline;gap:2.5em;width:max-content;max-width:none;white-space:nowrap;vertical-align:top;direction:ltr}
.title-marquee-copy{display:block;flex:0 0 auto;white-space:nowrap}
.title-marquee-copy[aria-hidden=true]{user-select:none;-webkit-user-select:none}
@media(max-width:600px){
 .stage-controls{justify-content:center}
 .stage-controls .hero-switcher{width:208px;max-width:100%;min-width:0;flex:0 1 208px;margin-inline:auto;gap:8px}
 .stage-controls .hero-choice{display:grid;align-items:center;height:44px;min-height:44px;border:0;border-radius:0;background:transparent;overflow:visible;box-shadow:none}
 .stage-controls .hero-choice img{display:block;width:100%;height:36px;border:2px solid transparent;border-radius:7px;object-fit:cover}
 .stage-controls .hero-choice[aria-pressed=true] img{border-color:var(--ink);box-shadow:0 5px 15px -8px #17203170}
}
html[data-input-mode=keyboard] .film-button:focus-visible .film-meta{opacity:1!important}
@media(prefers-reduced-motion:reduce){
 .film-meta,.hero-intro h1{opacity:1!important}
 .title-marquee-ready{overflow-x:auto}
 .title-marquee-track{transform:none!important}
}

/* Desktop pairs keep their size and gently dim outside the viewport centre.
   The single-column phone layout and full-width opening film keep their geometry. */
.film-grid .film-button.is-desktop-pair{transform:none!important}
.film-grid .film-button.is-desktop-pair .film-visual{transition:none}
.film-grid .film-button.has-focus-dimming .film-visual:after{background:#000;opacity:var(--film-dim,0)}
html[data-input-mode=keyboard] .film-button.has-focus-dimming:focus-visible .film-visual:after{opacity:0}
@media(min-width:601px) and (hover:hover) and (pointer:fine){
 .film-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .film-grid>.film-card:not(.film-wide){grid-column:auto}
 .film-grid>.film-wide{grid-column:1/-1}
 .film-grid>.film-card:not(.film-wide) .film-visual{
  height:clamp(200px,25vw,420px);aspect-ratio:auto;transform:scale(1);
  border-radius:28px;box-shadow:none;transition:none
 }
 .film-grid>.film-card:not(.film-wide) .film-button:hover .film-visual{
  transform:scale(1);border-radius:28px;box-shadow:none
 }
 .film-grid>.film-card:not(.film-wide) .film-button:hover .film-visual>img{transform:none}
 .film-grid>.film-card:not(.film-wide) .film-button:hover .play-disc{transform:none}
}

/* Option 10: a compact rounded wordmark, slightly larger in the same header. */
@font-face{font-family:'LD Rounded';src:url('/assets/fonts/ld-rounded-900.woff') format('woff');font-style:normal;font-weight:900;font-display:swap}
.site-header .wordmark{font-family:'LD Rounded',var(--site-font);font-size:22px;font-weight:900;letter-spacing:-.045em;line-height:1.1;white-space:nowrap}
@media(max-width:600px){.site-header .wordmark{font-size:clamp(15px,4.6vw,18px)}}

/* A visual-only welcome: direct dragging, silent films and one position rail. */
#opening{padding-bottom:56px}
#work{padding-top:86px}
#opening .hero-stage{position:relative;top:auto;margin-top:0;gap:10px;perspective:none}
.showcase-shell{width:100%;margin:0;transform-origin:50% 50%}
.showcase-viewport{--showcase-gap:26px;position:relative;width:100%;height:clamp(170px,calc(32.64vw + 48px),650px);overflow:hidden;touch-action:pan-y pinch-zoom;direction:ltr;cursor:grab;isolation:isolate;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.showcase-slide{position:absolute;top:0;left:50%;width:78%;max-width:1420px;margin:0;transform:translateX(-50%);transform-origin:50% 50%;will-change:transform,opacity}
.showcase-viewport:not(.is-ready) .showcase-slide:not(.is-current){visibility:hidden}
.showcase-title{display:block;width:100%;max-width:none;height:1.5em;margin:0 0 22px;padding:0 2px;font-size:var(--film-title-size);font-weight:700;line-height:1.5;letter-spacing:.025em;white-space:nowrap;overflow:hidden;text-align:start}
.showcase-media{position:relative;aspect-ratio:2.39/1;width:100%;overflow:hidden;isolation:isolate;border-radius:28px;background:#000}
.showcase-poster{position:absolute;inset:0;object-fit:cover;object-position:center;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.showcase-media>*,.showcase-title,.showcase-title *{pointer-events:none}
.showcase-viewport.is-dragging,.showcase-viewport.is-dragging *{cursor:grabbing}
.showcase-viewport.is-dragging{user-select:none;-webkit-user-select:none}
.showcase-controls{--showcase-step:0;position:relative;display:flex;align-items:center;justify-content:center;width:132px;height:44px;margin:0 auto;border-radius:24px;background:var(--surface-muted);background:color-mix(in srgb,var(--ink) 7%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);direction:ltr}
.showcase-controls:before,.showcase-controls:after{content:'';position:absolute;top:20px;left:21px;height:4px;border-radius:4px;background:var(--ink);pointer-events:none}
.showcase-controls:before{width:90px;opacity:.16}
.showcase-controls:after{width:30px;opacity:.85;transform:translateX(calc(var(--showcase-step) * 100%));transition:transform .45s var(--ease)}
.showcase-stop{position:relative;z-index:1;width:44px;height:44px;padding:0;background:transparent;border:0;border-radius:22px;color:var(--ink)}
.showcase-stop:focus,.showcase-viewport:focus{outline:none}
html[data-input-mode=keyboard] .showcase-stop:focus-visible{outline:2px solid var(--ink);outline-offset:0}
html[data-input-mode=keyboard] .showcase-viewport:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
@media(max-width:900px){#opening{padding-bottom:44px}#work{padding-top:56px}.showcase-viewport{--showcase-gap:18px}.showcase-media{border-radius:24px}}
@media(max-width:600px){
 #opening{padding-bottom:24px}
 #work{padding-top:32px}
 #opening .hero-stage{gap:6px}
 .showcase-viewport{--showcase-gap:8px}
 .showcase-title{margin-bottom:14px}
 .showcase-media{border-radius:15px}
}

/* Phone collection: centered minimal heading and a smaller rounded selector. */
@media(max-width:600px){
 #work .section-heading-row{display:flex;flex-direction:column;align-items:center;gap:0;text-align:center;margin-bottom:36px}
 #work .work-intro{display:flex;flex-direction:column;align-items:center;width:100%;max-width:390px;margin-inline:auto}
 #work #work-title{order:-1;margin:0;font-size:clamp(1.5rem,7.2vw,1.75rem);font-weight:750;line-height:1.08;letter-spacing:-.05em;text-wrap:balance}
 #work .filters{display:grid;grid-template-columns:auto auto auto;align-self:center;width:220px;max-width:100%;gap:2px;padding:3px;margin:22px auto 0;border:0;border-radius:99px;background:var(--surface-muted)}
 #work .filter{position:relative;min-width:0;min-height:30px;padding:6px 8px;gap:4px;border-radius:99px;background:transparent;font-size:.6875rem;font-weight:550;line-height:1.2;box-shadow:none}
 #work .filter:after{content:'';position:absolute;inset:-7px 0}
 #work .filter[aria-pressed=true]{background:var(--surface-raised);color:var(--ink);box-shadow:none}
 #work .filter-count{font-size:.625rem;font-weight:450;line-height:1;opacity:.8}
}
