html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#0E0E0D;color:#F2F0EC}
.d{font-family:'Inter Tight','Helvetica Neue',Arial,sans-serif;font-weight:500;text-transform:uppercase;margin:0}
.m{font-family:'Geist Mono',ui-monospace,Menlo,monospace;font-weight:500;font-size:11px;line-height:16px;letter-spacing:.08em;text-transform:uppercase}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid #F2F0EC;outline-offset:3px}
.page{width:100%!important;height:auto!important;min-height:100vh;overflow:hidden}
.page>*{flex-shrink:0}
header{padding-top:max(20px,env(safe-area-inset-top))!important}
.menu-btn,.menu-close{background:none;border:0;padding:8px;margin:-8px;cursor:pointer;color:#8F8B85}
.menu-btn:hover,.menu-close:hover{color:#F2F0EC}

/* home: separate mobile and desktop designs */
.home-d{display:none}
@media (min-width:1024px){
  .home-m{display:none}
  .home-d{display:block}
  .home-d .page{max-width:1440px;margin:0 auto}
}

/* case studies: content column on wide screens, full-bleed backgrounds */
@media (min-width:760px){
  .case .page>header,.case .page>section:not(.type),.case .page>a,.case .page>footer{
    padding-left:max(16px,calc((100% - 720px)/2))!important;
    padding-right:max(16px,calc((100% - 720px)/2))!important}
  .case .page>header{padding-left:32px!important;padding-right:32px!important}
  .case h1.d{font-size:clamp(44px,7.5vw,96px)!important}
  .case h2.d{font-size:clamp(36px,4.5vw,56px)!important}
  .case .type .d{font-size:clamp(132px,17vw,260px)!important}
  .case .type>div:first-child{padding-left:max(12px,calc((100% - 760px)/2))!important}
  .case .type>div:nth-child(2){padding-left:max(64px,calc((100% - 760px)/2 + 120px))!important}
  .case .type>.m{padding-left:max(16px,calc((100% - 720px)/2))!important}
}

/* menu overlay */
.menu{position:fixed;inset:0;z-index:50;background:#0E0E0D;display:flex;flex-direction:column;padding:max(24px,env(safe-area-inset-top)) 16px 32px}
.menu[hidden]{display:none}
.menu-close{align-self:flex-end}
.menu nav{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.menu nav a{text-decoration:none;font-size:clamp(48px,14vw,96px);line-height:.95;letter-spacing:-.035em}
.menu nav a:nth-child(2){padding-left:44px}
body.menu-open{overflow:hidden}

/* motion */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.stmt span,.stmt font{transition:color .7s ease}
.stmt.lit span,.stmt.lit font{color:#F2F0EC!important}
.stmt.lit span:nth-of-type(2),.stmt.lit font{transition-delay:.15s}
.stmt.lit span:nth-of-type(3){transition-delay:.3s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .stmt span,.stmt font{transition:none}
}

/* desktop home between 1024 and 1440: keep headline clear of the portrait */
@media (min-width:1024px) and (max-width:1439px){
  .home-d h1.d{font-size:clamp(56px,6.2vw,96px)!important}
  .home-d .page>section:first-of-type>div[style*="width: 440px"]{width:28vw!important;height:38vw!important}
}

/* one footer, same everywhere */
.page>footer{
  height:auto!important;flex-grow:0!important;display:flex!important;flex-direction:row!important;
  align-items:center!important;justify-content:flex-start!important;
  padding:28px 16px calc(28px + env(safe-area-inset-bottom))!important;
  border-top:1px solid #34332F!important;background:#0E0E0D}
.page>footer .m{color:#6B6863!important}
.home-d .page>footer{padding-left:80px!important;padding-right:80px!important}
@media (min-width:760px){.page>footer br{display:none}}
.page>footer{width:auto!important}
@media (min-width:760px){.case .page>footer,.case .page>header{padding-left:32px!important;padding-right:32px!important}}
@media (min-width:1024px){.case .page>footer,.case .page>header{padding-left:80px!important;padding-right:80px!important}}

/* sections size to their content, so spacing stays equal on every case study */
.case .page>section{height:auto!important}