@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{color-scheme:dark;--ink:#141413;--paper:#f0eee7;--mute:#aaa69e;--rule:#3c3a35;--accent:#f8a66f;--gutter:clamp(18px,4vw,72px);font-family:"Instrument Sans",Arial,sans-serif;background:var(--ink);color:var(--paper)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
[hidden]{display:none!important}
.skip{position:fixed;top:8px;left:8px;z-index:5;padding:12px;background:var(--ink);transform:translateY(-160%)}
.skip:focus{transform:none}
.wrap,.bar{width:min(100%,1720px);margin-inline:auto;padding-inline:var(--gutter)}
.bar{min-height:68px;display:flex;justify-content:space-between;align-items:center;gap:15px;border-bottom:1px solid var(--rule)}
.brand{font-size:13px;font-weight:700;letter-spacing:.075em;white-space:nowrap}
nav{display:flex;gap:clamp(14px,3vw,38px);font-size:14px;align-items:center}
nav [aria-current]{color:var(--accent)}
.meta{font:500 11px/1.5 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.mast{padding-block:clamp(28px,4vw,65px) clamp(18px,2.4vw,42px)}
.mast-label{display:flex;justify-content:space-between;align-items:center;color:var(--accent)}
.mast-label a{color:var(--mute)}
h1,h2,h3,p{margin:0}
h1{font-size:clamp(44px,10.15vw,172px);font-weight:600;letter-spacing:-.085em;line-height:.97}
.mast h1{margin-top:12px;white-space:nowrap}
.screen,.player,.thumb{background:#23221f;overflow:hidden}
.slide{position:relative;isolation:isolate;min-height:310px;height:clamp(340px,42vw,695px);display:flex;align-items:flex-end}
.slide img,.player img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide img{z-index:-2;object-position:center 47%}
.slide::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#090807e8,transparent 76%),linear-gradient(90deg,#09080770,transparent 62%)}
.slide-copy{padding:clamp(20px,4vw,68px)}
.slide-copy .meta{color:#f6c8a8}
.slide-copy h2{font-size:clamp(34px,5.5vw,94px);font-weight:500;letter-spacing:-.06em;line-height:1.02;margin:5px 0 18px}
.cta{display:inline-flex;gap:14px;align-items:center;border:1px solid #f0eee77d;padding:10px 14px;font-size:13px;min-height:44px}
.cta:hover,.play:hover{background:var(--paper);color:var(--ink)}
.feature-nav{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--rule)}
.selectors,.filters{display:flex;align-items:center;gap:4px}
.selectors button,.filters button{border:0;background:none;color:var(--mute);min-height:44px;padding:0 12px;font-size:13px}
.selectors button{font-family:"IBM Plex Mono",monospace;border-bottom:2px solid transparent}
.selectors button[aria-pressed=true],.filters button[aria-pressed=true]{color:var(--accent);border-bottom:2px solid var(--accent)}
.selectors button:hover,.filters button:hover{color:var(--paper)}
.film-list{padding-block:clamp(44px,7vw,110px)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.section-head h2{font-size:clamp(32px,5vw,68px);letter-spacing:-.06em;font-weight:500;line-height:1}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 16px}
.thumb{aspect-ratio:16/9}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.card:hover img,.card:focus-visible img{transform:scale(1.045)}
.card{display:flex;flex-direction:column}
.caption{flex:1;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--rule)}
.caption h3{font-size:clamp(15px,1.35vw,19px);letter-spacing:normal;font-weight:500;line-height:1.25}
.footer{min-height:80px;border-top:1px solid var(--rule);border-bottom:0;font-size:13px;color:var(--mute)}
.project,.interior{padding-block:clamp(32px,6vw,95px)}
.back{display:inline-block;padding-block:10px}
.project-title{padding:20px 0 25px}
.project-title h1,.interior h1{font-size:clamp(46px,7.5vw,118px);letter-spacing:-.025em;font-weight:500;margin-top:10px}
.player{position:relative;display:grid;place-items:center;aspect-ratio:16/9;max-height:77vh}
.player iframe{position:absolute;inset:0;border:0;width:100%;height:100%}
.play{position:relative;border:1px solid #ffffff9c;background:#10100edf;padding:12px 18px;display:flex;align-items:center;gap:10px;min-height:46px}
.play span{color:var(--accent)}
.project-info{display:grid;grid-template-columns:minmax(0,720px) auto;justify-content:space-between;gap:20px;padding-block:24px 50px}
.project-info a,.contact a{width:fit-content;text-decoration:underline;text-underline-offset:.26em}
.synopsis{font-size:clamp(21px,3vw,33px);line-height:1.25;letter-spacing:-.025em}
.credit{margin:15px 0;color:var(--mute);line-height:1.5}
.credit:empty{display:none}
.next{display:grid;gap:5px;border-top:1px solid var(--rule);padding-top:20px;font-size:clamp(23px,4vw,45px);letter-spacing:-.04em}
.about{max-width:920px;padding-block:clamp(24px,5vw,64px)}
.about>img{display:block;width:100%;height:auto;max-height:min(68svh,720px);object-fit:cover;object-position:center 35%}
.about-copy{max-width:640px;margin:clamp(28px,5vw,54px) auto 0;font-size:19px;font-weight:400;line-height:1.65}
.about-copy h1{font:inherit;letter-spacing:normal;margin:0 0 1em}
.about-copy p{margin:0 0 1em}
.about-copy a{text-decoration:underline;text-underline-offset:.22em}
.contact{min-height:65vh}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:40px;padding-top:24px;border-top:1px solid var(--rule)}
.contact-grid h2{margin-bottom:12px}
.contact-grid a{display:block;margin-bottom:9px;overflow-wrap:anywhere}
.contact-grid p{margin-bottom:9px}
@media(max-width:850px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){
 .bar{min-height:60px}.brand{font-size:10px}nav{font-size:13px;gap:12px}
 .mast h1{font-size:10.25vw}.slide{height:440px;height:clamp(330px,109vw,470px)}
 .slide img{object-position:39% center}
 .grid,.contact-grid,.project-info{grid-template-columns:1fr}
 .filters button:first-child{padding-left:0}
 .about-copy{font-size:17px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}
@media(min-width:851px) and (min-height:650px){
 .slide{height:clamp(340px,calc(100svh - 350px),695px)}
 .slide-copy{padding-block:clamp(24px,3vw,55px)}
}

/* Full-screen featured reel */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.bar .brand span{font-weight:400}
.home .bar:not(.footer){position:absolute;inset:0 0 auto;z-index:2;border:0;min-height:85px}
.home .brand{font-family:"Instrument Sans",Arial,sans-serif;font-weight:500;letter-spacing:-.025em;font-size:clamp(14px,1.65vw,22px)}
.home .bar nav a{color:var(--paper);text-shadow:0 1px 10px #000}
.home .bar nav a:hover{color:var(--accent)}
.home .feature{height:100svh;min-height:440px;position:relative;background:#101010}
.home .screen,.home .slide{height:100%;width:100%}
.home .slide{align-items:center}
.home .slide::after{background:linear-gradient(90deg,#000a,transparent 78%),linear-gradient(180deg,#000a,transparent 26%,transparent 67%,#000b)}
.home .slide-copy{padding-inline:var(--gutter);padding-right:max(54px,var(--gutter));width:min(100%,1200px)}
.home .slide-copy .meta{color:#f0eee7}
.home .slide-copy h2{font-family:"Instrument Sans",Arial,sans-serif;font-size:clamp(38px,6vw,94px);font-weight:600;line-height:.98;letter-spacing:-.055em;margin:8px 0 12px}
.film-link{display:inline-flex;align-items:center;gap:11px;min-height:44px;font-size:clamp(16px,1.65vw,22px)}
.home .selectors{position:absolute;right:calc(var(--gutter) - 14px);top:50%;transform:translateY(-50%);flex-direction:column;gap:0}
.home .selectors button{display:grid;place-items:center;border:0;width:40px;height:36px;min-height:36px;padding:0}
.home .selectors button::before{content:"";width:9px;height:9px;border-radius:50%;border:1px solid white;background:#0005}
.home .selectors button[aria-pressed=true]::before{background:white}
.reel-footer{position:absolute;bottom:0;width:100%;padding:14px var(--gutter);display:flex;justify-content:space-between;align-items:center;font-size:13px}
.reel-footer button{border:0;background:none;padding:0;min-height:44px}
.reel-footer a{display:grid;align-items:center;min-height:44px}
@media(max-width:560px){
 .home .bar:not(.footer){min-height:66px;gap:8px}
 .home .bar .brand span{display:none}
}
.reel-video{position:absolute;inset:0;z-index:-2;overflow:hidden}
.reel-video img{z-index:auto;object-position:center}
.reel-video iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:max(100vw,177.78svh);height:max(100svh,56.25vw);border:0;opacity:0;pointer-events:none}
.reel-video iframe.playing{opacity:1}

[data-vimeo="260078174"] iframe{transform:translate(-50%,-50%) scale(1.35)}
[data-vimeo="1157262471"] iframe{transform:translate(-50%,-50%) scale(1.34)}

/* The homepage is a single, fixed viewport. */
.home{overflow:hidden;overscroll-behavior:none;--gutter:32px;background:#080808;color:#fff}
.home .bar{width:100%;max-width:none}
.home .bar:not(.footer){min-height:0;padding-block:28px;align-items:center}
.home .brand{font-size:23px;font-weight:500;letter-spacing:0}
.home .bar nav{font-size:16px;font-weight:400;gap:24px}
.home .feature{min-height:0}
.home .slide{min-height:0}
.home .slide::after{background:linear-gradient(90deg,#0007,transparent 70%),linear-gradient(180deg,#0006,transparent 22%,transparent 75%,#0006)}
.home .slide-copy{padding-block:0;transform:translateY(28px)}
.home .slide-copy .meta{font:400 18px/1.4 "Instrument Sans",Arial,sans-serif;letter-spacing:.035em;text-transform:none;color:#eee}
.home .slide-copy h2{font-size:clamp(32px,4.2vw,54px);font-weight:500;line-height:1.04;letter-spacing:-.015em;margin:4px 0 2px}
.home .film-link{font-size:20px;font-weight:400;color:#dedbd6;gap:8px;min-height:34px}
.home .film-link:hover{color:#fff}
.home .selectors{right:12px}
.home .selectors button{width:26px;height:26px;min-height:26px}
.home .selectors button::before{width:10px;height:10px}
.home .footer{position:absolute;inset:auto 0 0;z-index:2;border:0;min-height:0;padding-block:24px;color:#eee;font-size:14px;letter-spacing:.02em}
.home .footer nav{font-size:14px;gap:16px}
@media(max-width:560px){
 .home{--gutter:20px}
 .home .bar:not(.footer){padding-block:20px}
 .home .brand{font-size:16px}
 .home .bar nav{font-size:13px;gap:12px}
 .home .slide-copy{transform:none}
 .home .slide-copy .meta{font-size:15px}
 .home .film-link{font-size:17px}
 .home .selectors{right:7px}
 .home .footer{padding-block:18px;font-size:11px}
 .home .footer nav{font-size:11px;gap:9px}
}

/* Keep incoming players in the render tree while their first frames load. */
.home .screen{position:relative}
.home .slide{position:absolute;inset:0}
.home .slide[hidden]{display:flex!important;visibility:hidden;pointer-events:none}
.home .slide[hidden] .slide-copy{display:none}
.home .slide[hidden] .reel-video{visibility:visible;opacity:0}

.commercial-heading{font-size:clamp(36px,5vw,68px);letter-spacing:normal;font-weight:500}
.commercial-more{margin-top:28px}
.home .footer nav{gap:12px}
@media(max-width:420px){
 .home .bar:not(.footer){gap:6px}
 .home .brand{font-size:14px}
 .home .bar nav{font-size:12px;gap:9px}
 .home .footer nav{gap:7px}
}


.project-info{grid-template-columns:minmax(0,720px)}
.project-stills{border-top:1px solid var(--rule);padding-top:22px}
.project-stills h2{margin-bottom:18px}
.still-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.still-grid img{display:block;width:100%;height:auto}
.still-grid img:not(:first-child):not(:last-child:nth-child(even)){aspect-ratio:16/9;object-fit:cover}
.still-grid img:first-child,.still-grid img:last-child:nth-child(even){grid-column:1/-1}
@media(max-width:600px){
 .still-grid{grid-template-columns:1fr}
 .still-grid img:not(:first-child):not(:last-child:nth-child(even)){aspect-ratio:auto}
}

body,.home .screen{background:#141414 url("images/film-grain.png") repeat}
.reel-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}