.home-positioning{position:absolute;inset:0 28px 115px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:clamp(120px,16vh,190px);text-align:center;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .8s ease}
.intro-complete .home-positioning{visibility:visible;opacity:1;pointer-events:auto}
.home-center-tagline{display:block;color:inherit;text-decoration:none;transition:opacity .2s ease}
.home-center-tagline:hover{opacity:.82}
.home-center-tagline:focus-visible{outline:2px solid #fff;outline-offset:8px}
.home-cover .hero .home-center-tagline{max-width:min(90vw,570px);margin:0;font-size:clamp(17px,2.1vw,30px);line-height:1.16;letter-spacing:-.025em;text-align:center;text-wrap:balance;text-transform:uppercase;font-weight:400;text-shadow:0 2px 18px #0005}
.home-cover .video-hero.intro-complete .hero-shade{background:linear-gradient(180deg,#0003,#0006 40%,#0006 65%,#0003)}
.home-cover .hero-project h2{font-size:16px;font-weight:500;line-height:1.35;letter-spacing:-.015em;text-transform:uppercase;margin:0}
.home-cover .hero-project:hover h2{text-decoration:underline;text-underline-offset:5px}
@media(max-width:600px){.home-positioning{inset:0 24px 125px;padding-top:clamp(165px,25vh,220px)}.home-cover .hero .home-center-tagline{max-width:350px;margin-top:0;font-size:clamp(17px,4.7vw,23px);line-height:1.16}.home-cover .hero-project h2{font-size:14px;max-width:45%}}
@media(max-height:520px) and (min-width:601px){.home-positioning{padding-top:110px}.home-cover .hero .home-center-tagline{margin-top:14px;font-size:22px}}
@media(prefers-reduced-motion:reduce){.home-positioning{transition:none}}

/* One inline video hero, with navigation and scrolling available from arrival. */
.inline-video-hero .home-positioning{visibility:visible;opacity:1;pointer-events:none}
.inline-video-hero .home-center-tagline{pointer-events:auto}
.inline-video-hero.is-video-playing .home-positioning{opacity:0;visibility:hidden}
.inline-video-hero.has-video-frame video{opacity:1}
.inline-video-hero.has-video-frame .hero-video-poster{opacity:0}
.inline-video-hero .intro-play{width:64px;height:64px;border:1px solid #ffffff66;background:#6e6e6e47;backdrop-filter:blur(12px)}
.inline-video-hero .intro-play span{border-top-width:12px;border-bottom-width:12px;border-left-width:18px;margin-left:4px}
.inline-video-hero.is-video-playing .intro-play{top:auto;left:var(--gutter);bottom:28px;transform:none;width:52px;height:52px}
.inline-video-hero.is-video-playing .intro-play span{width:14px;height:18px;margin:0;border:0;border-left:4px solid;border-right:4px solid}
.inline-video-hero .hero-bottom{visibility:visible;opacity:1}

.inline-video-hero:not(.has-video-frame) video{opacity:0}
.inline-video-hero:not(.has-video-frame) .hero-video-poster{opacity:1}

.cinematic-white{position:absolute;inset:0;z-index:6;background:#fff;pointer-events:none;transition:opacity 1s ease}
.cinematic-logo{position:absolute;z-index:7;left:50%;top:45%;transform:translate(-50%,-50%);width:min(80vw,720px);height:auto;filter:brightness(0);opacity:0;animation:cinematic-logo-in .9s .15s ease forwards;pointer-events:none;transition:filter 1s ease,opacity 1.2s ease}
@keyframes cinematic-logo-in{to{opacity:1}}
.cinematic-hero.film-revealed .cinematic-white{opacity:0}
.cinematic-hero.film-revealed .cinematic-logo{filter:brightness(0) invert(1)}
.cinematic-hero.logo-faded .cinematic-logo{animation:none;opacity:0}
body:has(.cinematic-hero:not(.film-revealed))>header{opacity:0;pointer-events:none}
.cinematic-hero .music-toggle,.cinematic-hero .hero-bottom{transition:opacity .7s ease}
.cinematic-hero:not(.film-revealed) .music-toggle,.cinematic-hero:not(.film-revealed) .hero-bottom{opacity:0;pointer-events:none}
.cinematic-hero .hero-shade{background:linear-gradient(180deg,#0003,transparent 25%,transparent 80%,#0002)}
@media(prefers-reduced-motion:reduce){.cinematic-logo{animation:none;opacity:1}.cinematic-white,.cinematic-logo{transition:none}}

/* Fixed white navigation above the homepage film. */
body.pinned-white-header{--home-header-height:var(--masthead-height,90px)}
body.pinned-white-header>header{position:fixed!important;inset:0 0 auto!important;height:var(--home-header-height);box-sizing:border-box;padding:0 var(--masthead-gutter,4vw)!important;background:#fff!important;color:#111!important;opacity:1!important;visibility:visible!important;transform:none!important;pointer-events:auto!important;z-index:40}
body.pinned-white-header>header .brand img{filter:brightness(0)!important}
body.pinned-white-header>main{padding-top:var(--home-header-height)}
body.pinned-white-header .cinematic-hero{height:calc(100svh - var(--home-header-height));min-height:420px}

/* Compact opening logo with generous margins on every screen. */
.cinematic-hero>img.cinematic-logo{width:min(62vw,440px);max-width:calc(100% - 64px);height:auto;max-height:22vh;object-fit:contain}

/* Two slow, separate letter sequences using the original vector lettering. */
.cinematic-letter-logo{position:absolute;z-index:7;left:50%;top:45%;transform:translate(-50%,-50%);width:min(86vw,760px);max-width:calc(100% - 40px);pointer-events:none;transition:opacity 1.2s ease}
.cinematic-wordmark{display:block;width:100%;height:auto;overflow:visible}
.logo-black{filter:brightness(0)}
.logo-white{filter:brightness(0) invert(1);opacity:0}
.wordmark-letter{opacity:0}
.letters-started .logo-black .wordmark-letter,.white-letters-started .logo-white .wordmark-letter{animation:wordmark-letter-in .533333333s var(--letter-delay) ease forwards}
@keyframes wordmark-letter-in{to{opacity:1}}
.film-revealed .logo-black{opacity:0}
.film-revealed .logo-white{opacity:1}
.logo-faded .logo-white{opacity:0}
body.pinned-white-header:has(.cinematic-hero:not(.film-revealed))>header{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
@media(prefers-reduced-motion:reduce){.wordmark-letter{animation-duration:.01s!important}}

.featured-project>.featured-image{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.featured-project-photo::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,#0004,transparent 40%,#0002);pointer-events:none}
.featured-project-photo .featured-copy h2{max-width:100%;overflow-wrap:normal;font-size:clamp(40px,8vw,112px)}
@media(max-width:600px){.featured-project-photo .featured-copy h2{font-size:clamp(36px,9vw,56px)}}

/* Project catalogue action in place of the down arrow. */
.home-cover .hero .home-projects-button{position:absolute;z-index:5;left:50%;top:auto;bottom:0;transform:translateX(-50%);display:inline-flex;justify-content:center;width:max-content;max-width:calc(100vw - 40px);box-sizing:border-box;background:#dededc;color:#151515;border-radius:100px;padding:14px 22px;font-size:18px;line-height:1.2;text-transform:uppercase;text-decoration:none;text-shadow:none;pointer-events:auto}
.home-cover .hero .home-projects-button:hover{font-weight:700}
.home-cover .hero .home-projects-button:focus-visible{outline:2px solid #fff;outline-offset:4px}
.cinematic-hero:not(.film-revealed) .home-projects-button{visibility:hidden;pointer-events:none}

.cinematic-studio-title{top:19.456%;filter:none;color:#fff;font-family:inherit;font-size:clamp(28px,6.8vw,80px);font-weight:700;line-height:1.06;letter-spacing:-.025em;text-align:center;text-transform:uppercase;text-shadow:0 1px 8px #0006}
.cinematic-studio-title .studio-word{display:inline-block;white-space:nowrap}

/* Original client artwork, monochrome on the site's paper background. */
.home-clients{background:var(--paper)}
.home-client-link img.client-logo{width:100%;height:100%;margin:0;border:0;box-shadow:none;background:transparent;filter:none;mix-blend-mode:normal}
.home-client-link img.client-logo-original{filter:none}
.home-client-link.client-link-tall{height:clamp(108px,10vw,132px)}
/* Faster character reveal for the studio title over video. */
.white-letters-started .cinematic-studio-title .wordmark-letter{animation-duration:.266666667s}