@font-face{font-family:'PP Mori';src:url('assets/fonts/mori-semibold.otf') format('opentype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'PP Mori';src:url('assets/fonts/mori-regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'PP Mori';src:url('assets/fonts/mori-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
body,.nav .brand,.nav nav a,.menu-toggle,.case-meta>div{font-family:'PP Mori',Arial,sans-serif}
h1,h2,h3{font-weight:700}
h1{font-size:clamp(62px,7.1vw,128px);line-height:1.04;letter-spacing:-.05em}
.title-line{padding-bottom:.12em;margin-bottom:-.12em}
.nav .brand{width:208px;padding:5px 12px;background:transparent;backdrop-filter:none}
.nav .brand img{width:184px;height:auto;max-height:30px;object-fit:contain}
.nav nav a{font-size:19px;height:44px;width:156px;white-space:nowrap;padding:0 10px;line-height:1}
.nav{align-items:center}.nav .contact span{margin:0}
.hero-bottom{font-size:15px;line-height:1.4}
.intro>p{line-height:1.2;font-weight:400;font-size:clamp(30px,3.2vw,53px)}
.intro-bottom p{font-size:20px;line-height:1.5}
.about h2{font-size:clamp(48px,4.6vw,80px);line-height:1.1;letter-spacing:-.045em}
.about-copy{font-size:clamp(23px,2.05vw,31px);line-height:1.35}
.about-copy p+p{font-size:clamp(20px,1.65vw,25px);line-height:1.45}
.research-copy h2,.sprint-intro h2{font-size:clamp(43px,4.6vw,76px);line-height:1.1;letter-spacing:-.045em}
.research-copy p,.sprint-intro p{font-size:clamp(22px,1.9vw,28px);line-height:1.4}
.sprint-intro p+p{font-size:22px;line-height:1.45}
.working h3{font-size:30px;line-height:1.2}.working-grid p{font-size:20px;line-height:1.45}
.case-title{display:inline-flex;align-items:center;gap:20px;max-width:100%}
.case-title::after{content:'↗';font-weight:400;font-size:.7em;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.case-title:hover{opacity:1}.case-title:hover::after{transform:translate(4px,-4px)}
.case-meta h2{font-size:clamp(29px,3vw,46px);line-height:1.2;letter-spacing:-.035em}
.case-meta>div{font-size:17px;line-height:1.4;flex-shrink:0}
.case-meta{align-items:start}.loop-case .case-meta{padding-bottom:22px}
.case-summary{max-width:700px;font-size:23px;line-height:1.4;color:var(--grey);padding-bottom:80px}
mux-player{display:block;width:100%;height:100%;--controls:none;--media-object-fit:contain;--media-object-position:center;--media-background-color:#000;pointer-events:none}
#essie-film{pointer-events:none}#essie-film::-webkit-media-controls{display:none!important}
.hover-title{display:block;position:relative;overflow:hidden;padding:.08em 0;line-height:inherit;text-align:left}
.hover-title>span{display:block;transition:transform .6s cubic-bezier(.16,1,.3,1);will-change:transform}
.hover-title .hover-copy{position:absolute;inset:.08em 0 auto;transform:translateY(130%)}
@media(hover:hover){
 .case-title:hover .hover-title>span:first-child,.text-link:hover .hover-title>span:first-child{transform:translateY(-130%)}
 .case-title:hover .hover-title .hover-copy,.text-link:hover .hover-title .hover-copy{transform:translateY(0)}
 .text-link:hover{opacity:1}
}
.case-title:focus-visible .hover-title>span:first-child,.text-link:focus-visible .hover-title>span:first-child{transform:translateY(-130%)}
.case-title:focus-visible .hover-title .hover-copy,.text-link:focus-visible .hover-title .hover-copy{transform:translateY(0)}
.footer-cta{font-weight:700;font-size:clamp(56px,6.6vw,110px);line-height:1.1;letter-spacing:-.045em}
.footer-bottom>img{width:250px;height:auto}.footer-bottom>div{font-size:16px}
@media(max-width:900px){
 .nav nav{display:none}.menu-toggle{display:flex;width:110px;height:44px;padding:0 12px;font-size:19px;line-height:1}
 .nav .brand{width:174px;height:44px;padding:0}.nav .brand img{width:174px;height:auto;max-height:30px}
 .mobile-menu{inset:68px 20px auto}.mobile-menu a{font-size:32px}
}
@media(max-width:760px){
 h1{font-size:clamp(37px,9.2vw,66px);line-height:1.1;letter-spacing:-.05em}
 .hero-bottom{font-size:12px}.hero-bottom>span{max-width:180px}.hero-bottom a{gap:8px}
 .intro>p{font-size:30px}.intro-bottom p{font-size:19px}
 .about h2{font-size:clamp(40px,10.6vw,59px);line-height:1.1}
 .about-copy{font-size:23px}.about-copy p+p{font-size:20px}
 .research-copy h2,.sprint-intro h2{font-size:clamp(35px,9.4vw,48px);line-height:1.1}
 .research-copy p,.sprint-intro p{font-size:22px}.sprint-intro p+p{font-size:20px}
 .case-meta h2{font-size:29px}.case-title{gap:12px}.case-meta>div{font-size:15px}
 .case-summary{font-size:20px;padding-bottom:56px}.working h3{font-size:26px}.working-grid p{font-size:19px}
 .footer-cta{font-size:43px;line-height:1.1}.footer-bottom>img{width:210px}
 .text-link{font-size:21px}
}
@media(prefers-reduced-motion:reduce){.hover-title>span{transition:none;will-change:auto}.hover-title .hover-copy{display:none}.hover-title>span:first-child{transform:none!important}}

@media(hover:hover){
 .footer-cta:hover .hover-title>span:first-child{transform:translateY(-130%)}
 .footer-cta:hover .hover-title .hover-copy{transform:translateY(0)}
}
@media(max-width:360px){.nav .brand,.nav .brand img{width:150px}.menu-toggle{width:100px;font-size:18px}.hero-bottom{font-size:11px}}

/* Hero film and aligned navigation frames. */
mux-player.hero-video{position:absolute;inset:-4% 0 auto;width:100%;height:108%;--controls:none;--media-object-fit:cover;--media-object-position:center;--media-background-color:#080808}
.nav .brand{width:156px;height:44px;padding:0 12px;background:#333c;backdrop-filter:blur(12px);border-radius:2px;display:flex;align-items:center;justify-content:center}
.nav .brand img{width:132px;height:auto;max-height:28px;object-fit:contain}
.about-copy p,.about-copy p+p{font-size:inherit;line-height:inherit}
@media(max-width:900px){.nav .brand,.menu-toggle{width:140px;height:44px}.nav .brand img{width:116px}}
@media(max-width:360px){.nav .brand,.menu-toggle{width:124px}.nav .brand img{width:100px}}
/* Compact navigation and stronger introductory statement. */
.intro>p{font-size:clamp(34.5px,3.68vw,60.95px);font-weight:700}
.nav .brand,.nav nav a{width:132.6px;height:37.4px;padding:0 8px}
.nav .brand img{width:112.2px;max-height:23.8px}
.nav nav a{font-size:16.15px}.nav nav .contact{gap:6px}.nav .contact .arrow-icon{width:14px;height:14px}
@media(max-width:900px){.nav .brand,.menu-toggle{width:119px;height:37.4px;padding:0 8px}.nav .brand img{width:98.6px}.menu-toggle{font-size:16.15px}.mobile-menu{top:61px}}
@media(max-width:760px){.intro>p{font-size:34.5px}}
@media(max-width:360px){.nav .brand,.menu-toggle{width:105.4px}.nav .brand img{width:85px}.menu-toggle{font-size:15.3px}}

/* Editorial spacing and deliberately slower, restrained transitions. */
.hero-bottom{justify-content:flex-end}
.about-copy .text-link,.sprint-intro .text-link{display:inline-flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:14px;padding:14px 18px;background:#333;border-radius:3px;line-height:1.2;font-size:20px;white-space:nowrap;max-width:100%;vertical-align:middle}
.about-copy .text-link .hover-title,.sprint-intro .text-link .hover-title{flex:0 1 auto;white-space:nowrap}
.about-copy .text-link>.arrow-icon,.sprint-intro .text-link>.arrow-icon{display:block;width:18px;height:18px;flex:0 0 18px;vertical-align:initial}
.about-copy .text-link:hover,.sprint-intro .text-link:hover{background:#414141}
.intro{padding-top:64px;padding-bottom:clamp(130px,14vw,220px)}
.intro-bottom{margin-top:48px}
.case-meta{padding-top:28px;padding-bottom:96px}
.loop-case .case-meta{padding-bottom:28px}
.case-summary{padding-bottom:104px}
.about{padding-top:112px;padding-bottom:88px}
.about-copy p+p{margin-top:36px}.about-copy .text-link{margin-top:40px}
.research{padding-top:160px;padding-bottom:176px}
.research-copy h2,.sprint-intro h2{margin-bottom:40px}
.sprint-intro .text-link{margin-top:40px}
.working-grid{margin-top:104px;row-gap:64px}.working{padding-bottom:144px}
.title-line>span{animation-duration:1.7s;animation-timing-function:cubic-bezier(.2,.75,.25,1)}
.title-line:nth-child(2)>span{animation-delay:.2s}
.reveal{transition-duration:1.35s,1.6s;transition-timing-function:cubic-bezier(.2,.75,.25,1)}
.reveal.is-waiting{transform:translate3d(0,22px,0)}
.image-frame.reveal,.research-visual.reveal{transition-duration:1.5s,1.7s}
.image-frame.reveal.is-waiting,.research-visual.reveal.is-waiting{transform:translate3d(0,22px,0)}
.hover-title>span{transition-duration:.95s;transition-timing-function:cubic-bezier(.2,.75,.25,1)}
.text-link,.case-title::after,.text-link .arrow-icon{transition-duration:.65s}
@media(max-width:760px){
 .intro{padding-top:48px;padding-bottom:104px}.intro-bottom{margin-top:36px}
 .case-meta{padding-top:24px;padding-bottom:68px}.case-summary{padding-bottom:72px}
 .about{padding-top:80px;padding-bottom:72px}.about-copy p+p{margin-top:28px}
 .about-copy .text-link,.sprint-intro .text-link{font-size:18px;padding:13px 16px;gap:12px;margin-top:32px}
 .research{padding-top:104px;padding-bottom:112px}.research-grid{gap:48px}
 .research-copy h2,.sprint-intro h2{margin-bottom:28px}
 .working-grid{margin-top:72px;row-gap:44px}.working{padding-bottom:104px}
}
@media(prefers-reduced-motion:reduce){.title-line>span{animation:none}.reveal,.image-frame.reveal,.research-visual.reveal,.hover-title>span,.text-link,.case-title::after,.text-link .arrow-icon{transition:none}.reveal.is-waiting,.image-frame.reveal.is-waiting,.research-visual.reveal.is-waiting{transform:none}}

/* Crisp square navigation frames and a stronger typographic weight. */
.nav .brand,.nav nav a,.nav nav .contact,.menu-toggle{border-radius:0}
.nav nav a,.menu-toggle,.mobile-menu a{font-weight:600}

/* Pricing navigation breakpoint keeps every frame comfortably spaced. */
@media(max-width:1000px){.nav nav{display:none}.menu-toggle{display:flex;align-items:center;justify-content:space-between;width:119px;height:37.4px;padding:0 8px;font-size:16.15px}.mobile-menu{inset:61px 20px auto;max-height:calc(100svh - 80px);overflow:auto;background:#222}.mobile-menu a{display:flex;justify-content:space-between;padding:17px 0}}

/* Centre the original lettering, excluding the raised macron from optical alignment. */
.nav .brand img,.footer-bottom>img{transform:translateY(-7.362%)}