
.film-home{background:#111210}.film-home header{z-index:10}.film-sequence{height:290svh;position:relative;background:#9e9d95}.film-stage{height:100svh;position:sticky;top:0;overflow:hidden;background:radial-gradient(ellipse at center,#b8b7af,#777970)}.film-roll{position:absolute;width:min(860px,90vw);left:50%;top:50%;transform-origin:50% 0;will-change:transform;background:#14130f;box-shadow:0 0 50px #0005}.film-cell{position:relative;width:100%;aspect-ratio:1.35;background:#15140f;padding:6% 12%;border-bottom:1px solid #6e604744}.film-cell .hero-screen,.film-cell>img{position:relative;display:block;width:100%;height:100%;object-fit:cover;overflow:hidden;background:#050505}.film-cell .hero-screen{border-radius:3px}.film-rail{position:absolute;top:0;bottom:0;width:6%;display:grid;grid-template-rows:repeat(4,1fr);align-items:center}.rail-left{left:2.5%}.rail-right{right:2.5%}.film-rail i{display:block;width:100%;aspect-ratio:1.35;background:#a6a69d;border-radius:14%;box-shadow:inset 0 1px 3px #0008}.edge-code{position:absolute;left:9%;top:50%;writing-mode:vertical-rl;transform:translate(-50%,-50%) rotate(180deg);font:9px monospace;letter-spacing:1.5px;color:#b8a778}.film-cell .hero-title{left:6%;right:6%;bottom:16%}.film-cell .hero-title h1{font-size:clamp(22px,3vw,42px);line-height:1.08;margin:10px 0 18px}.film-cell .hero-title .label{font-size:9px}.film-cell .hero-bottom{left:6%;right:6%;bottom:6%;padding-top:10px}.film-cell .hero-bottom .label{font-size:7px}.film-cell .hero-bottom a{font-size:8px}.film-cell .reel-play{font-size:12px;gap:9px}.film-cell .play-icon{width:30px;height:30px;font-size:9px}.film-caption{position:absolute;left:4.5%;right:4.5%;bottom:24px;display:flex;justify-content:space-between;gap:20px;font:11px monospace;letter-spacing:1px;color:#151510;opacity:0}.film-cell .hero-screen iframe{inset:0;width:100%;height:100%}.film-cell .reel-close{top:12px;right:12px;font-size:12px}.film-home .intro-strip{padding-top:80px;padding-bottom:80px}.film-home .project-grid{grid-template-columns:1fr;gap:70px;max-width:1100px;margin:auto}.film-home .project .screen{aspect-ratio:1.6;background:#15140f;padding:3% 9%;height:auto}.film-home .project .screen:before,.film-home .project .screen:after{content:'';position:absolute;top:0;bottom:0;width:4.5%;background:radial-gradient(ellipse at center,#aaa99f 0 43%,transparent 46%) center/100% 25% repeat-y}.film-home .project .screen:before{left:2%}.film-home .project .screen:after{right:2%}.film-home .home-project-link{overflow:hidden}.film-home .project-caption{display:flex;justify-content:space-between;gap:20px}.film-home .project-caption h3{font-size:clamp(25px,3vw,42px)}.film-home .project-caption .label{font-size:12px}.film-home .project-source{font-size:14px}.film-home .play-label{font-size:12px}.film-home .work{padding-top:55px}.film-home .section-heading{margin-bottom:50px}.film-home .section-heading h2{font-size:clamp(40px,6vw,80px)}
@media(max-width:620px){.film-roll{width:94vw}.film-cell .hero-title h1{font-size:21px}.film-cell .hero-title .label{font-size:6px;letter-spacing:.7px}.film-cell .hero-bottom{display:none}.film-cell .hero-title{bottom:10%}.film-cell .reel-play{font-size:10px}.film-cell .play-icon{width:22px;height:22px}.film-caption{font-size:9px}.film-caption span:last-child{display:none}.edge-code{font-size:6px;letter-spacing:.5px}.film-home .project-grid{gap:40px}.film-home .project .screen{aspect-ratio:1.35}.film-home .project-caption{display:block}.film-home .play-label{font-size:10px}.film-home .intro-strip{padding-top:45px;padding-bottom:45px}}
@media(prefers-reduced-motion:reduce){.film-sequence{height:auto}.film-stage{position:relative;height:95svh}.film-roll{will-change:auto}.continuation{display:none}}

.film-home .project .screen:before,.film-home .project .screen:after{display:none}.film-home .project .film-rail{width:4.5%}.film-home .project .rail-left{left:2%}.film-home .project .rail-right{right:2%}

.film-aperture{position:relative;display:block;width:100%;height:100%;overflow:hidden;background:#050505}.film-aperture>img{width:100%;height:100%;object-fit:cover}.film-project-overlay{position:absolute;inset:0;background:linear-gradient(transparent 35%,#000b);display:flex;flex-direction:column;justify-content:flex-end;padding:6%;gap:12px}.film-project-overlay h2{font-size:clamp(20px,2.7vw,36px);margin:0;max-width:90%}.film-project-overlay>span{font:10px monospace;letter-spacing:1px}.film-aperture:hover .film-project-overlay>span:last-child{color:#ff7774}.film-home header{position:fixed;mix-blend-mode:difference}.film-home .film-stage{background:#7f807a}.film-home .film-sequence{background:#7f807a}@media(max-width:620px){.film-project-overlay h2{font-size:17px}.film-project-overlay>span{font-size:7px}.film-project-overlay{padding:8% 20%;gap:6px}}@media(prefers-reduced-motion:reduce){.film-home .film-stage{height:auto;overflow:visible}.film-home .film-roll{position:relative;top:auto;left:auto;margin:auto;transform:none!important}.film-home .film-caption{display:none}.film-home .film-sequence{padding-top:130px}.film-cell{margin-bottom:0}}
@media (prefers-reduced-motion: no-preference){.film-sequence{height:100svh}.film-stage{position:relative;touch-action:pan-x}.film-cell .film-project-overlay h2{font-size:clamp(20px,2.7vw,36px)}}
.film-home{height:100svh;overflow:hidden}.film-home main,.film-home .film-sequence,.film-home .film-stage{height:100svh}.film-home .film-stage{position:relative;touch-action:pan-x}.film-home .film-roll{position:absolute;left:50%;top:50%;margin:0;transform-origin:50% 0}.film-home header{mix-blend-mode:normal;align-items:flex-start;pointer-events:none}.film-home header>*{pointer-events:auto}.menu-toggle,.menu-close{background:#111b;border:1px solid #ffffff66;color:white;padding:12px 16px;font-size:14px}.menu-toggle:hover,.menu-close:hover{background:#ef3936}.site-menu{position:fixed;inset:0 auto 0 0;margin:0;width:min(420px,90vw);height:100%;max-height:none;max-width:none;border:0;background:#151513;color:#f4f3ed;padding:35px;box-shadow:0 0 40px #0009}.site-menu::backdrop{background:#000a}.menu-top{display:flex;align-items:center;justify-content:space-between}.site-menu nav{display:flex;flex-direction:column;gap:0;margin-top:65px}.site-menu nav a{font:500 clamp(30px,4vw,48px)/1.25 Manrope,sans-serif;letter-spacing:-.04em;padding:14px 0;border-bottom:1px solid #41413b}.menu-footer{position:absolute;bottom:36px;font:12px/2 monospace;letter-spacing:.8px;color:#aaa}.carousel-controls{position:absolute;right:4.5%;bottom:30px;z-index:8;display:flex;align-items:center;gap:15px}.carousel-controls button{width:44px;height:44px;border:1px solid #ffffffaa;border-radius:50%;background:#111b;color:white;font-size:22px}.carousel-controls button:hover{background:#f13936}.carousel-count{font:12px monospace;color:white;text-shadow:0 1px 5px #000}.scroll-hint{position:absolute;left:4.5%;bottom:30px;z-index:5;font:11px monospace;color:white;text-shadow:0 1px 5px #000;letter-spacing:1px;margin:0;pointer-events:none}.film-home .hero-bottom{display:none}@media(max-width:620px){.menu-toggle{padding:10px}.carousel-controls{bottom:18px}.scroll-hint{font-size:9px;bottom:30px}.site-menu{padding:24px}}@media(prefers-reduced-motion:reduce){.film-home .film-stage{height:100svh;overflow:hidden}.film-home .film-roll{position:absolute;left:50%;top:50%;margin:0;transform-origin:50% 0}.film-home .film-sequence{height:100svh;padding:0}}

.film-home .film-sequence,.film-home .film-stage{background:#000}

.film-cell .hero-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}.film-cell .hero-shade,.film-cell .hero-title,.film-cell .hero-bottom{z-index:2}.film-cell .hero-screen.reel-open>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}.film-cell .hero-screen .reel-close{z-index:4}

/* Reference-inspired typography and framing */
.film-cell{aspect-ratio:1.72;padding:1% 3.5%}.film-rail{width:2.2%}.rail-left{left:.65%}.rail-right{right:.65%}.film-rail i{aspect-ratio:1.4}.edge-code{display:none}.film-home .hero-title,.film-home .film-project-overlay{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;align-content:center;align-items:center;gap:0;padding:0 5%;background:linear-gradient(90deg,#0006,transparent 35%,transparent 65%,#0006);font-family:Arial,sans-serif}.film-home .hero-title .label,.film-home .film-project-overlay .project-client{font:600 clamp(11px,1.05vw,16px)/1.2 Arial,sans-serif;letter-spacing:0;margin:0;color:white;text-transform:uppercase}.film-home .hero-title h1,.film-home .film-project-overlay h2{font:600 clamp(12px,1.1vw,17px)/1.2 Arial,sans-serif;letter-spacing:0;margin:0;text-align:right;text-transform:uppercase;max-width:none;color:white}.film-home .reel-play{grid-column:2;justify-self:end;margin-top:14px;font:600 10px Arial,sans-serif}.film-home .play-icon{width:24px;height:24px}.film-home .film-project-overlay .project-link{position:absolute;right:5%;top:calc(50% + 30px);font:600 10px Arial,sans-serif}.film-home .hero-shade{background:linear-gradient(90deg,#0004,transparent 40%,#0003)}.film-home .carousel-header{justify-content:flex-end}.direct-nav{position:fixed;z-index:15;bottom:30px;left:4.5%;display:flex;flex-direction:column;gap:5px;font:600 13px/1 Arial,sans-serif;text-transform:uppercase;text-shadow:0 1px 5px #000}.direct-nav a:hover,.direct-nav a[aria-current]{color:#f5ada7}.film-home .scroll-hint{display:none}.film-home .carousel-controls{bottom:30px}.film-home .film-caption{display:none}@media(max-width:620px){.film-home .film-cell{aspect-ratio:1.72;padding:1% 3.5%}.film-home .hero-title,.film-home .film-project-overlay{padding:0 4%;gap:8px}.film-home .hero-title .label,.film-home .film-project-overlay .project-client{font-size:8px}.film-home .hero-title h1,.film-home .film-project-overlay h2{font-size:9px}.film-home .reel-play{font-size:8px}.direct-nav{bottom:20px;left:15px;font-size:12px}.film-home .carousel-controls{bottom:20px;right:15px;gap:7px}.carousel-controls button{width:34px;height:34px}.film-home .film-project-overlay .project-link{font-size:7px;top:calc(50% + 16px)}}

/* Fill the viewport while retaining a narrow strip at each side. */
.film-home .film-roll{width:calc(100vw - 20px);max-width:none}.film-home .film-cell{height:calc(100svh - 20px);aspect-ratio:auto;padding:0 11px}.film-home .film-rail{width:7px;top:0;bottom:0}.film-home .rail-left{left:2px}.film-home .rail-right{right:2px}.film-home .film-rail i{width:7px;aspect-ratio:1.3}.film-home .hero-screen,.film-home .film-aperture{border-radius:3px}.film-home .hero-preview,.film-home .hero-still,.film-home .film-aperture img{object-fit:cover}@media(max-width:620px){.film-home .film-roll{width:calc(100vw - 12px)}.film-home .film-cell{height:calc(100svh - 12px);aspect-ratio:auto;padding:0 7px}.film-home .film-rail{width:4px}.film-home .film-rail i{width:4px}.film-home .rail-left{left:1px}.film-home .rail-right{right:1px}}

/* Perforations appear beside the footage during transitions only. */
.film-home .film-roll{--perf-visibility:0}.film-home .film-cell>.film-rail{opacity:var(--perf-visibility);width:clamp(18px,2.5vw,38px);background:#15140f;justify-items:center;pointer-events:none}.film-home .film-cell>.rail-left{left:auto;right:100%}.film-home .film-cell>.rail-right{right:auto;left:100%}.film-home .film-cell>.film-rail i{width:65%;aspect-ratio:1.35}@media(max-width:620px){.film-home .film-cell>.film-rail{width:18px}}

.film-home .film-cell>.film-rail{width:clamp(32px,4vw,64px)}.film-home .film-cell>.film-rail i{width:72%}@media(max-width:620px){.film-home .film-cell>.film-rail{width:30px}}
/* The film stock fills the space behind the moving frames. */
.film-home .film-stage,.film-home .film-sequence{background:#15140f}.film-home .film-cell>.film-rail{width:9.6vw}.film-home .film-cell>.film-rail i{width:68%}@media(max-width:620px){.film-home .film-cell>.film-rail{width:9.6vw}}

.film-aperture .campaign-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}.film-aperture .film-project-overlay{z-index:2}.campaign-player video{position:absolute;inset:0;width:100%;height:100%;background:#050505;object-fit:contain}

/* Fill the carousel with the picture inside this letterboxed source. */
.film-aperture .letterboxed-preview{transform:scale(1.35)}

/* Opening animation */
.studio-intro{position:fixed;inset:0;z-index:100;background:#000;overflow:hidden;transition:transform 850ms cubic-bezier(.4,0,.2,1);will-change:transform}.studio-intro.is-leaving{transform:translateY(-100%);pointer-events:none}.studio-intro-video{display:block;width:100%;height:100%;object-fit:contain;background:#000}.studio-intro-controls{position:absolute;right:4.5%;bottom:30px;display:flex;gap:18px}.studio-intro-controls button{background:transparent;border:0;color:#fff;font:600 11px/1.2 Arial,sans-serif;text-transform:uppercase;cursor:pointer;padding:10px;text-shadow:0 1px 5px #000}.studio-intro-controls button:hover{text-decoration:underline;text-underline-offset:4px}@media(prefers-reduced-motion:reduce){.studio-intro{transition:none}}
