:root{
  --ink:#14191B; --slate:#40494D; --stone:#C7C0B6; --cream:#F7F4ED; --orange:#DF562E; --white:#FFFFFF;
  --paper:#F7F4ED; --on-paper:#14191B; --on-paper-soft:#5A6266; --rule-paper:rgba(20,25,27,.14);
  --on-ink:#F7F4ED; --on-ink-soft:#9AA1A3; --rule-ink:rgba(247,244,237,.14);
  --font:"Noto Sans Display","Helvetica Neue",Arial,sans-serif;
  --gut:clamp(20px,4.2vw,72px);
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#1B2124; --on-paper:#F7F4ED; --on-paper-soft:#A3A9AB; --rule-paper:rgba(247,244,237,.13);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#1B2124; --on-paper:#F7F4ED; --on-paper-soft:#A3A9AB; --rule-paper:rgba(247,244,237,.13);
}
*,*::before,*::after{box-sizing:inherit;margin:0;padding:0}
html{background:var(--ink);scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px);-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--on-ink);font-family:var(--font);font-stretch:100%;font-weight:400;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--ink)}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:2px}
.wrap{padding-inline:var(--gut);max-width:1600px;margin-inline:auto}

/* Display type: the brand’s condensed voice */
.display{font-stretch:62.5%;font-weight:900;line-height:.86;letter-spacing:-.01em}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:background .5s ease,border-color .5s ease;border-bottom:1px solid transparent}
.nav.solid{background:rgba(20,25,27,.82);-webkit-backdrop-filter:saturate(1.4) blur(18px);backdrop-filter:saturate(1.4) blur(18px);border-bottom-color:var(--rule-ink)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.nav .brand img{height:46px;width:auto}
.nav ul{display:flex;gap:clamp(18px,2.6vw,40px);list-style:none;align-items:center;font-size:14.5px;font-weight:500;letter-spacing:.01em}
.nav ul a{opacity:.78;transition:opacity .2s}
.nav ul a:hover{opacity:1}
.btn{display:inline-flex;align-items:center;gap:.6em;height:46px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:600;letter-spacing:.005em;transition:background .25s,color .25s,border-color .25s}
.btn-light{background:var(--cream);color:var(--ink)}
.btn-light:hover{background:var(--white)}
.btn-ghost{border:1px solid rgba(247,244,237,.4);color:var(--cream)}
.btn-ghost:hover{border-color:var(--cream);background:rgba(247,244,237,.06)}
.nav .btn{height:40px;padding:0 18px;font-size:14px}
.nav ul a.btn{opacity:1}
@media (max-width:820px){.nav ul li.hide-sm{display:none}.nav .brand img{height:30px}}

/* HERO */
.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;background:var(--ink)}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;transform:scale(1.07);animation:settle 2.8s cubic-bezier(.2,.7,.1,1) .1s forwards}
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(20,25,27,.55) 0%,rgba(20,25,27,0) 22%,rgba(20,25,27,0) 42%,rgba(20,25,27,.72) 72%,rgba(20,25,27,.96) 100%)}
.hero-copy{position:absolute;left:0;right:0;bottom:0;z-index:2;padding-bottom:clamp(36px,6vh,72px)}
.hero h1{font-size:clamp(60px,8.4vw,168px);color:var(--white)}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.hero h1 .ln span{display:block;transform:translateY(105%);animation:rise 1.1s cubic-bezier(.2,.8,.1,1) forwards}
.hero h1 .ln:nth-child(2) span{animation-delay:.12s}
.hero-foot{display:grid;grid-template-columns:minmax(0,46ch) auto;justify-content:space-between;align-items:end;gap:28px;margin-top:clamp(24px,3.4vh,40px);opacity:0;animation:fade 1s ease .7s forwards}
.hero-foot p{color:rgba(247,244,237,.82);font-size:clamp(16px,1.25vw,19px);line-height:1.5}
.hero-foot .ctas{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:820px){.hero h1{font-size:clamp(56px,15vw,120px)}.hero-foot{grid-template-columns:1fr}.hero-media img{object-position:42% 35%}}
@keyframes settle{to{transform:scale(1)}}
@keyframes rise{to{transform:translateY(0)}}
@keyframes fade{to{opacity:1}}

/* CAPABILITIES */
.paper{background:var(--paper);color:var(--on-paper)}
.caps{padding-block:clamp(96px,14vw,200px) clamp(80px,10vw,150px)}
.lede{font-size:clamp(28px,3.4vw,54px);line-height:1.12;font-weight:500;font-stretch:87.5%;letter-spacing:-.018em;max-width:24ch}
.lede-row{display:grid;grid-template-columns:1fr minmax(0,36ch);gap:48px;align-items:end}
.lede-row .aside{color:var(--on-paper-soft);font-size:17px}
@media (max-width:900px){.lede-row{grid-template-columns:1fr}}
.cap-list{list-style:none;margin-top:clamp(64px,8vw,120px);border-top:1px solid var(--rule-paper)}
.cap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px;align-items:center;padding-block:clamp(22px,2.6vw,36px);border-bottom:1px solid var(--rule-paper)}
.cap h3{font-size:clamp(56px,8.4vw,148px);font-weight:900;font-stretch:62.5%;line-height:.9;letter-spacing:-.005em;transition:font-stretch .7s cubic-bezier(.2,.8,.1,1),letter-spacing .7s;white-space:nowrap}
.cap:hover h3,.cap:focus-within h3{font-stretch:78%;letter-spacing:-.02em}
.cap p{max-width:40ch;color:var(--on-paper-soft);font-size:17px}
.cap p strong{display:block;color:var(--on-paper);font-weight:600;margin-bottom:6px;font-size:18px}
@media (max-width:760px){.cap{grid-template-columns:1fr;gap:10px}.cap h3{white-space:normal}}

/* WORK */
.work{padding-block:clamp(96px,12vw,180px)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,72px)}
.sec-head h2{font-size:clamp(56px,8vw,140px)}
.sec-head p{max-width:38ch;color:var(--on-ink-soft)}
.paper .sec-head p{color:var(--on-paper-soft)}
.work-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(16px,1.6vw,24px)}
.work-grid .col{display:grid;gap:clamp(16px,1.6vw,24px);grid-template-rows:1.15fr 1fr}
figure{margin:0}
.tile{position:relative;overflow:hidden;border-radius:6px;background:#1E2427}
.tile img,.tile video{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.1,1)}
.tile:hover img{transform:scale(1.03)}
.reel{aspect-ratio:9/16}
figcaption{display:flex;justify-content:space-between;gap:20px;padding-top:14px;font-size:15px}
figcaption b{font-weight:600}
figcaption span{color:var(--on-ink-soft);text-align:right}
.sound{position:absolute;right:16px;bottom:16px;z-index:2;height:40px;padding:0 16px 0 12px;border-radius:999px;border:0;background:rgba(20,25,27,.62);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--cream);font:600 13.5px/1 var(--font);display:flex;align-items:center;gap:8px;cursor:pointer}
.sound:hover{background:rgba(20,25,27,.85)}
.sound svg{width:18px;height:18px}
.identity{display:grid;place-items:center;background:var(--cream);padding:clamp(28px,4vw,64px);position:relative}
.identity img{width:min(100%,520px);height:auto;object-fit:contain;transform:none!important}
.swatches{position:absolute;left:clamp(20px,2.4vw,32px);bottom:clamp(20px,2.4vw,32px);display:flex;gap:8px}
.swatches i{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(20,25,27,.12)}
.figwrap{display:flex;flex-direction:column;min-height:0}
.figwrap .tile{flex:1;min-height:0}
@media (max-width:860px){.work-grid{grid-template-columns:1fr}.work-grid .col{grid-template-rows:auto}.figwrap .tile.photo{aspect-ratio:4/3}.figwrap .tile.identity{aspect-ratio:4/3}.reel{max-height:none}}

/* PARTNERS */
.partners{padding-block:clamp(96px,12vw,170px)}
.logo-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule-paper);border-left:1px solid var(--rule-paper)}
.logo-grid div{aspect-ratio:16/9;display:grid;place-items:center;border-right:1px solid var(--rule-paper);border-bottom:1px solid var(--rule-paper);padding:18px;text-align:center;font-stretch:75%;font-weight:700;font-size:clamp(16px,1.6vw,22px);letter-spacing:.01em;color:var(--on-paper-soft);transition:color .3s}
.logo-grid div:hover{color:var(--on-paper)}
@media (max-width:760px){.logo-grid{grid-template-columns:repeat(2,1fr)}}

/* CONTACT */
.contact{padding-block:clamp(110px,14vw,220px) clamp(48px,6vw,80px)}
.contact h2{font-size:clamp(68px,12.5vw,236px);max-width:11ch;color:var(--white)}
.contact-row{display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:end;margin-top:clamp(40px,5vw,72px)}
.contact-row .mail{font-size:clamp(22px,2.4vw,36px);font-weight:500;font-stretch:87.5%;letter-spacing:-.01em;border-bottom:1px solid rgba(247,244,237,.35);padding-bottom:4px;transition:border-color .25s}
.contact-row .mail:hover{border-color:var(--orange)}
.contact-row .where{color:var(--on-ink-soft);font-size:15.5px;line-height:1.6;text-align:right}
@media (max-width:820px){.contact-row{grid-template-columns:1fr;gap:24px}.contact-row .where{text-align:left}}
footer{border-top:1px solid var(--rule-ink);margin-top:clamp(80px,10vw,150px);padding-top:28px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;color:var(--on-ink-soft);font-size:14px}
footer img{height:44px;width:auto}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-delay:0s!important;transition:none!important;scroll-behavior:auto!important}
  .hero-media img{transform:none}
}

/* footer links */
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
.foot-links a{color:var(--on-ink-soft);transition:color .2s}
.foot-links a:hover{color:var(--cream)}
/* inner pages */
.page{padding-block:calc(76px + clamp(72px,10vw,140px)) clamp(80px,10vw,140px);min-height:70vh}
.page h1{font-size:clamp(60px,9vw,150px);margin-bottom:clamp(32px,4vw,56px)}
.prose{max-width:66ch;font-size:18px;line-height:1.65}
.prose h2{font-size:24px;font-weight:700;font-stretch:87.5%;margin:2.2em 0 .5em}
.prose p,.prose ul{margin-bottom:1em;color:var(--on-paper-soft)}
.prose ul{padding-left:1.2em}
.prose strong{color:var(--on-paper);font-weight:600}
.prose a{color:var(--on-paper);border-bottom:1px solid var(--rule-paper)}
.prose a:hover{border-color:var(--orange)}
.site-foot{padding-block:28px}
.site-foot footer{margin-top:0}