:root{--motion-ease:cubic-bezier(.2,.7,.3,1)}
main.reveal{animation:none}
.motion-enabled .motion-reveal{opacity:.08;transform:translateY(18px);transition:opacity .7s var(--motion-ease),transform .7s var(--motion-ease)}
.motion-enabled .motion-reveal.is-visible,.motion-enabled .motion-reveal:focus-within{opacity:1;transform:none}
header{transition:background .3s}
header.is-scrolled{background:#efeee9f5;backdrop-filter:blur(12px)}
.scroll-progress{position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left}
.hero-scroll-stage{position:relative;height:calc(145svh - 88px);background:#141414}
.hero-scroll-stage .hero{position:sticky;top:88px;height:calc(100svh - 88px);min-height:560px;clip-path:none}
.hero-scroll-stage .hero-crossfade{position:absolute;inset:0 var(--gutter);margin:0;display:grid;align-items:center;text-align:center;pointer-events:none;line-height:.88;translate:none}
.hero-crossfade>span{grid-area:1/1;display:block;width:100%;text-align:center}
.hero-brand-layer{opacity:var(--brand-opacity,1);font-size:clamp(60px,12.4vw,200px);letter-spacing:-.065em;white-space:nowrap}
.hero-slogan-layer{opacity:var(--slogan-opacity,0)}
.hero-video{opacity:var(--video-opacity,1)}
.text-link,.reel-trigger{transition:color .25s,background .25s,border-color .25s}
.text-link:hover{color:#ed3947}.reel-trigger:hover{background:var(--paper);color:var(--ink)}
.art-arrow{transition:background .25s,color .25s}a:hover .art-arrow{background:var(--paper);color:var(--ink)}
@media(max-width:760px){.hero-scroll-stage{height:calc(135svh - 74px)}.hero-scroll-stage .hero{top:74px;height:calc(100svh - 74px);min-height:540px}.hero-brand-layer{font-size:11.5vw}}
.motion-reduced .hero-scroll-stage{height:auto}.motion-reduced .hero-scroll-stage .hero{position:relative;top:0}
.motion-reduced .hero-crossfade{display:flex;flex-direction:column;justify-content:center;gap:24px}
.motion-reduced .hero-slogan-layer{font-size:.32em}
.motion-reduced .motion-reveal{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.scroll-progress{display:none}}
.motion-reduced .hero-slogan-layer{letter-spacing:-.04em;line-height:1.1;font-weight:700}

.motion-enabled .footer-logo.motion-reveal{transition:opacity 1.1s var(--motion-ease),transform 1.2s var(--motion-ease)}

/* Who we are and The works: upward word pop, then stable reading. */
.intro-pop-word{display:inline-block}
.motion-enabled .intro-pop:not(.pop-visible) .intro-pop-word{opacity:0;transform:translateY(42px) scale(.96)}
.motion-enabled .intro-pop.pop-visible .intro-pop-word{animation:intro-word-pop .62s cubic-bezier(.2,.75,.25,1) both;animation-delay:var(--pop-delay,0ms)}
.motion-enabled .brand-story-detail.intro-pop:not(.pop-visible){opacity:0;transform:translateY(26px)}
.motion-enabled .brand-story-detail.intro-pop.pop-visible{animation:intro-detail-pop .55s .12s both}
.brand-story-detail.intro-pop:focus-within{opacity:1!important;transform:none!important}
@keyframes intro-word-pop{0%{opacity:0;transform:translateY(42px) scale(.96)}65%{opacity:1;transform:translateY(-5px) scale(1.015)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes intro-detail-pop{0%{opacity:0;transform:translateY(26px)}75%{opacity:1;transform:translateY(-2px)}100%{opacity:1;transform:none}}
.motion-reduced .intro-pop,.motion-reduced .intro-pop-word{animation:none!important;opacity:1!important;transform:none!important}

/* Centered brand, transparent home masthead and direction-aware navigation. */
header{position:fixed;inset:0 0 auto;height:88px;display:grid;grid-template-columns:1fr auto 1fr;gap:0;transition:transform .35s ease,background .3s,color .3s;transform:translateY(0)}
header>a{grid-column:2;grid-row:1;justify-self:center}
header .nav{display:contents}
header .nav>a{grid-row:1;width:max-content}
header .nav>a:nth-child(1){grid-column:1;justify-self:start}
header .nav>a:nth-child(2){grid-column:1;justify-self:start;margin-left:75px}
header .nav>.contact-link{grid-column:3;justify-self:end}
header.nav-hidden:not(:focus-within){transform:translateY(-105%);pointer-events:none}
body:not(.is-home) main{padding-top:88px}
.is-home header:not(.is-scrolled){background:transparent;color:#fff;border-color:transparent;backdrop-filter:none}
.is-home header:not(.is-scrolled) .brand img{filter:invert(1)}
.is-home header:not(.is-scrolled) .contact-link{border-color:#ffffff65}
.is-home header:not(.is-scrolled) .scroll-progress{opacity:0}
.hero-scroll-stage{height:145svh}
.hero-scroll-stage .hero{top:0;height:100svh}
@media(max-width:760px){header{height:74px;padding-inline:20px}.nav>a{font-size:10px}header .nav>a:nth-child(2){margin-left:39px}header .brand{width:110px;height:23px}header .brand img{width:139px;left:-14px;top:-55px}.nav .contact-link span{padding-left:2px}body:not(.is-home) main{padding-top:74px}.hero-scroll-stage{height:135svh}.hero-scroll-stage .hero{top:0;height:100svh}}
@media(prefers-reduced-motion:reduce){header{transition:none}}

/* Use the supplied white/black combined logos without recoloring the ring. */
header .brand.brand-combined{width:150px;height:69px;overflow:visible;position:relative}
.nav-logo{position:absolute;inset:0;width:100%;height:100%;transition:opacity .25s ease}
.nav-logo-black{opacity:1}.nav-logo-white{opacity:0}
.is-home header:not(.is-scrolled) .nav-logo-black{opacity:0}
.is-home header:not(.is-scrolled) .nav-logo-white{opacity:1}
@media(max-width:760px){header .brand.brand-combined{width:112px;height:52px}}

/* Studio: word-by-word entrance, with the original brand mark kept intact. */
.studio-hero-layout{display:grid;grid-template-columns:minmax(0,1fr) 27%;align-items:center;gap:5vw}
.studio-title .studio-hero-layout h1{font-size:clamp(58px,8vw,132px)}
.studio-logo-motion{position:relative;aspect-ratio:1;display:grid;place-items:center;isolation:isolate}
.studio-logo-motion svg{width:88%;height:auto;overflow:visible}
.studio-logo-frame{position:absolute;inset:3%;border:1px solid #17171745;border-radius:30%;z-index:-1}
.motion-enabled .studio-logo-motion svg{animation:studio-logo-arrive 1s cubic-bezier(.2,.7,.3,1) both,studio-logo-breathe 7s 1s ease-in-out infinite alternate}
.motion-enabled .studio-logo-frame{animation:studio-frame-turn 14s ease-in-out infinite alternate}
.motion-enabled .studio-text-pop.pop-visible .intro-pop-word{animation-duration:.65s}
@keyframes studio-logo-arrive{from{opacity:0;transform:translateY(28px) scale(.88) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes studio-logo-breathe{from{transform:translateY(-4px) rotate(-3deg)}to{transform:translateY(4px) rotate(3deg)}}
@keyframes studio-frame-turn{from{transform:rotate(-12deg);border-radius:30%}to{transform:rotate(12deg);border-radius:44%}}
@media(max-width:760px){.studio-hero-layout{grid-template-columns:1fr;gap:18px}.studio-title .studio-hero-layout h1{font-size:12vw}.studio-logo-motion{width:170px;justify-self:center;margin-bottom:24px}}
.motion-reduced .studio-logo-motion svg,.motion-reduced .studio-logo-frame{animation:none!important}

/* Animated logo replaces the original intro image. */
.studio-hero-layout{display:block}
.studio-mark.studio-mark-animated{background:transparent;display:grid;place-items:center;overflow:visible}
.studio-mark-animated .studio-logo-motion{width:78%;max-width:360px;margin:0}
@media(max-width:760px){.studio-mark-animated .studio-logo-motion{width:75%;max-width:280px}}

header .nav>.shop-link{grid-column:3;justify-self:end;margin-right:140px}
@media(max-width:760px){header .nav>.shop-link{margin-right:62px}header .brand.brand-combined{width:90px;height:44px}}

body.is-work header{background:#141414e8;color:var(--paper);border-color:#ffffff20;backdrop-filter:blur(12px)}
body.is-work header .nav-logo-black{opacity:0}body.is-work header .nav-logo-white{opacity:1}
body.is-work header .contact-link{border-color:#ffffff65}

body.is-careers header{background:#181818ed;color:var(--paper);border-color:#ffffff20;backdrop-filter:blur(12px)}
body.is-careers header .nav-logo-black{opacity:0}body.is-careers header .nav-logo-white{opacity:1}body.is-careers header .contact-link{border-color:#ffffff65}

/* Careers remains accessible in the main navigation. */
header .nav>.careers-link{grid-column:1;justify-self:start;margin-left:155px}
@media(max-width:760px){header .nav>.careers-link{margin-left:81px}header .brand.brand-combined{width:76px;height:37px}header{padding-inline:12px}header .nav>.shop-link{margin-right:57px}}
@media(max-width:360px){header .nav>a{font-size:9px}header .nav>a:nth-child(2){margin-left:31px}header .nav>.careers-link{margin-left:65px}header .brand.brand-combined{width:62px;height:31px}header .nav>.shop-link{margin-right:51px}}

/* Keep all browsing links on the left; Contact is the sole right-hand action. */
header .nav>.shop-link{grid-column:1;justify-self:start;margin-left:245px;margin-right:0}
@media(max-width:760px){
 header{height:100px;grid-template-rows:48px 42px;padding-bottom:10px}
 header>a{grid-row:1}
 header .nav>a{grid-row:2;font-size:11px}
 header .nav>a:nth-child(2){margin-left:47px}
 header .nav>.careers-link{margin-left:101px}
 header .nav>.shop-link{margin-left:165px;margin-right:0}
 header .brand.brand-combined{width:90px;height:44px}
 body:not(.is-home) main{padding-top:100px}
 html{scroll-padding-top:110px}
}
header{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}

body.is-studio header{background:#141414e8;color:var(--paper);border-color:#ffffff20;backdrop-filter:blur(12px)}
body.is-studio header .nav-logo-black{opacity:0}body.is-studio header .nav-logo-white{opacity:1}
body.is-studio header .contact-link{border-color:#ffffff65}