:root{
  --ink:#000;--quiet:#555;--paper:#fff;--wash:#e6e6e6;--line:#d1d1d1;
  --pad:clamp(10px,1.65vw,28px);--space:clamp(96px,13vw,200px);
  --nav-orange:#FA471F;--layout-max:1920px;--grid-gap:clamp(8px,1.25vw,20px);
  --grid:repeat(12,minmax(0,1fr));
  --layout-edge:max(var(--pad),calc((100% - var(--layout-max))/2 + var(--pad)));
  font:400 15px/1.35 Switzer,Arial,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none
}
*{box-sizing:border-box}
body,h1,h2,p,figure{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img{display:block;width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid #5785fa;outline-offset:4px}
.skip{position:fixed;left:12px;top:12px;z-index:20;background:#fff;color:#000;padding:12px;transform:translateY(-180%)}
.skip:focus{transform:none}
.nav{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  padding:16px var(--layout-edge);position:sticky;top:0;z-index:8;
  color:#181818;
  transition:transform .42s cubic-bezier(.22,1,.36,1),opacity .28s ease,color .3s ease
}
.home .nav{position:fixed;inset:0 0 auto}
.nav.is-hidden:not(:has(:focus-visible)){transform:translateY(-110%);opacity:0}
.brand{width:clamp(84px,8vw,108px);justify-self:start}
.brand img{height:auto}
.nav.is-on-dark,.home.has-dark-background .nav{color:#fff}
.nav.is-on-dark .brand img,.home.has-dark-background .nav .brand img{filter:invert(1)}
.nav-time,.pill{font:500 13px/1.2 Archivo,Arial,sans-serif}
.nav-time{display:flex;gap:7px;white-space:nowrap;font-variant-numeric:tabular-nums}
.nav nav{display:flex;justify-content:flex-end;align-items:center;gap:6px}
.nav nav a,.nav-menu summary{
  display:grid;place-items:center;min-height:44px;padding:0 clamp(9px,1.2vw,18px);
  border-radius:2px;background:#eaeae7;color:#181818;
  font:500 11px/1.2 Archivo,Arial,sans-serif;text-transform:uppercase;white-space:nowrap;
  transition:background-color .2s ease
}
.nav nav a:is(:hover,[aria-current]){background:#ddd}
.nav-menu{position:relative}
@media(min-width:541px){
  #primary-nav:has(.nav-menu[open]) > a{transform:translateX(calc(-1 * var(--nav-links-width,0px)))}
  @media(prefers-reduced-motion:no-preference){
    #primary-nav > a{transition:transform .3s cubic-bezier(.22,1,.36,1),background-color .2s ease}
  }
}
.nav-menu summary{background:var(--nav-orange);cursor:pointer;list-style:none}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu-links{
  position:absolute;inset:0 100% auto auto;display:flex;gap:6px;padding-right:6px;
  width:max-content
}
.nav-menu[open] .nav-menu-links{animation:nav-menu-open .3s cubic-bezier(.22,1,.36,1) both}
@keyframes nav-menu-open{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@media(max-width:540px){
  .nav-menu-links{inset:100% 0 auto auto;display:grid;grid-template-columns:repeat(2,max-content);padding:6px 0 0}
}
@media(prefers-reduced-motion:reduce){
  .nav,.nav nav a{transition:none}
  .nav-menu[open] .nav-menu-links{animation:none}
}
.pill{display:inline-flex;align-items:center;gap:8px}
.pill:hover{text-decoration:underline;text-underline-offset:3px}
.icon-arrow{display:inline-block;width:1em;height:1em;vertical-align:-.12em;background:currentColor;mask:url("/icons/arrow-up-right.svg") center / contain no-repeat}
main{max-width:var(--layout-max);margin:auto;padding:0 var(--pad)}
.case-copy{display:grid;grid-template-columns:var(--grid);gap:var(--grid-gap);margin:var(--space) 0}
.case-copy>div{grid-column:5/11}
.case-copy>.label{grid-column:1/4}
.label,.caption span{font:500 13px/1.35 Archivo,Arial,sans-serif;color:var(--quiet)}
.case-copy h2{font-size:clamp(26px,3.25vw,55px);font-weight:500;line-height:1.03;letter-spacing:-.052em}
.section{margin:var(--space) 0}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:24px}
.section-head h2{font:500 clamp(29px,4.4vw,76px)/.95 Switzer,Arial,sans-serif;letter-spacing:-.06em}
.project-grid,.journal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:38px var(--grid-gap)}
.journal-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px var(--grid-gap)}
.project-card{display:grid;align-content:start;gap:7px;min-width:0}
.card-media{position:relative;overflow:hidden;background:var(--wash);aspect-ratio:1.62}
.card-media img{height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.68,.2,1)}
.project-card:hover img,.project-card:focus-visible img{transform:scale(1.035)}
.arrow{position:absolute;right:12px;bottom:12px;background:white;display:grid;place-items:center;width:32px;height:32px;opacity:0;transition:opacity .2s}
.project-card:hover .arrow,.project-card:focus-visible .arrow{opacity:1}
.caption{display:grid;gap:2px;padding:0 4px}
.caption strong{font-size:16px;font-weight:500;letter-spacing:-.02em}
.journal-grid .caption{min-height:62px;padding:0 4px}
.journal-grid .card-media{width:100%;aspect-ratio:3/2}
.journal-grid .caption strong{font-size:clamp(17px,1.65vw,25px);line-height:1.12}
.case-copy p:not(.label),.intro-copy{font-size:clamp(16px,1.55vw,23px);line-height:1.42;max-width:60ch}
.page-head{padding:clamp(85px,12vw,190px) 0 34px;display:grid;grid-template-columns:var(--grid);gap:var(--grid-gap);align-items:start}
.page-head .label{grid-column:1/4}
.page-head h1,.page-head .intro-copy{grid-column:4/-1}
.page-head h1{font-size:clamp(44px,8.3vw,134px);line-height:.94;letter-spacing:-.07em;font-weight:500;overflow-wrap:break-word}
.page-head .intro-copy{margin-top:5px;color:var(--quiet)}
.detail-cover,.studio-image{overflow:hidden;background:var(--wash)}
.detail-cover img,.studio-image img{max-height:84svh;object-fit:cover}
.detail-cover video,.case-gallery video{display:block;width:100%;height:auto;background:#141414}
.detail-cover video{max-height:84svh}
.case-copy h2{margin-bottom:18px}
.case-copy p+p{margin-top:16px}
.case-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:var(--grid-gap)}
.case-gallery video,.case-gallery img:nth-child(3n+1){grid-column:1/-1}
.team img{aspect-ratio:1;object-fit:cover;object-position:center 35%;margin-bottom:6px}
.contact-panel{display:flex;gap:20px;flex-wrap:wrap;margin:25px 0 110px}
.article{max-width:720px;margin:70px auto var(--space);font-size:clamp(17px,1.7vw,23px);line-height:1.48;overflow-wrap:anywhere}
.article>*{margin:0 0 22px}
.article h2,.article h3{line-height:1.1;letter-spacing:-.04em}
@media(max-width:900px){
  .case-copy>div{grid-column:3/-1}
  .journal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .nav{padding-top:16px;padding-bottom:16px}
  .case-copy,.page-head{grid-template-columns:1fr;gap:14px}
  .case-copy>*,.page-head>*{grid-column:1!important}
  .project-grid,.journal-grid,.case-gallery{grid-template-columns:1fr}
  .project-grid,.journal-grid{gap:29px var(--grid-gap)}
  .journal-grid .caption{min-height:auto}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.card-media .work-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .35s ease,transform .65s cubic-bezier(.2,.68,.2,1)}
.card-media .work-preview.is-playing{opacity:1}
.project-card:hover .work-preview,.project-card:focus-visible .work-preview{transform:scale(1.035)}

.lab-grid video{display:block;width:100%;height:auto;background:#141414}
.lab-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 8px}
.lab-grid img,.lab-grid video{width:100%;height:auto}
.lab-grid figcaption{margin-top:6px}
@media(max-width:900px){.lab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.lab-grid{grid-template-columns:1fr}}


.home{
  background-color:#fff;
  transition:background-color .6s ease,color .6s ease
}
.home.has-dark-background{background-color:#000;color:#fff;--quiet:#c6c6c6}
.home .focus-card{transition:background-color .6s ease}
.home.has-dark-background .focus-card{background-color:#000}
.home .featured-journal{
  margin-block:0;
  padding-block:clamp(72px,9vw,140px) clamp(88px,11vw,168px)
}
.home .featured-journal .arrow{color:#000}
.featured-journal .journal-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap)
}
.featured-journal .project-card{gap:12px}
.featured-journal .caption{min-height:0;padding:0;margin:0}
.featured-journal .caption strong{font-size:clamp(16px,1.45vw,22px)}
@media(max-width:600px){
  .featured-journal .journal-grid{
    grid-template-columns:repeat(3,minmax(0,65%));overflow-x:auto;
    padding:4px 4px 8px;margin-inline:-4px;scroll-padding-inline:4px;
    scroll-snap-type:x proximity
  }
  .featured-journal .project-card{scroll-snap-align:start}
}

@media(max-width:760px){
  .nav{grid-template-columns:auto 1fr;gap:6px;padding-block:10px}
  .nav-time{display:none}
}

.site-footer{height:300svh;margin-top:var(--space);background:#fff;color:#111}
.footer-stage{
  position:sticky;top:0;isolation:isolate;display:grid;
  grid-template-rows:1fr auto;min-height:100svh;
  padding:var(--pad) var(--layout-edge);background-color:#fff;overflow:hidden;
  transition:background-color .6s ease,color .3s ease
}
.site-footer.is-dark .footer-stage{background-color:#000;color:#fff}
.home .site-footer{margin-top:0;background:transparent;color:inherit}
.home .site-footer .footer-stage{background-color:transparent;color:inherit}
.footer-film{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .7s ease}
.site-footer.is-dark .footer-film{opacity:1}
.footer-film img,.footer-film canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.footer-film img,.footer-film canvas{filter:grayscale(1)}
.footer-film canvas{opacity:0}
.footer-film canvas.has-frame{opacity:1}
.footer-film::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,#000a 0%,#0005 38%,#0006 62%,#000c 100%)
}
.footer-center{
  position:absolute;inset:50% var(--layout-edge) auto;transform:translateY(-50%);
  text-align:center;font:500 clamp(20px,2.35vw,34px)/1.02 Switzer,Arial,sans-serif;
  letter-spacing:-.05em
}
.footer-center h2{font:inherit;margin:0}
.footer-center a,.footer-directory a{overflow-wrap:anywhere}
.footer-center a:hover,.footer-directory a:hover{text-decoration:underline;text-underline-offset:.15em}
.footer-directory{
  grid-row:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--grid-gap);
  font:400 13px/1.28 Switzer,Arial,sans-serif
}
.footer-directory>div{display:grid;align-content:start;justify-items:start;gap:4px}
.footer-heading{font:500 11px/1.25 Archivo,Arial,sans-serif;text-transform:uppercase;letter-spacing:.03em;margin:0 0 10px}
.footer-brand{display:block;width:76px;margin-bottom:3px}
.footer-brand img{height:auto}
.home.has-dark-background .site-footer .footer-brand img,.site-footer.is-dark .footer-brand img{filter:invert(1)}
@media(max-width:620px){
  .footer-directory{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
  .footer-heading{margin-bottom:3px}
  .footer-center{inset-block-start:40%}
}
@media(prefers-reduced-motion:reduce){
  .home,.home .focus-card{transition:none}
  .site-footer{height:auto}
  .footer-stage{position:relative;min-height:460px;gap:44px}
  .footer-center{position:relative;inset:auto;transform:none;align-self:center;padding:55px 0 0}
}

@media(max-width:365px){
  .nav .brand{width:72px}
  .nav nav{gap:3px}
  .nav nav a{padding-inline:7px}
}