
:root{
  --paper:#f1f0eb;
  --ink:#11110f;
  --muted:#716f68;
  --line:rgba(17,17,15,.22);
  --pad:clamp(18px,2.4vw,42px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Arial,sans-serif;line-height:1.25;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.loading{overflow:hidden}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:auto}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.skip-link{position:fixed;z-index:300;top:12px;left:var(--pad);padding:10px 14px;background:var(--ink);color:var(--paper);font-size:13px;transform:translateY(-160%);transition:transform .3s var(--ease)}
.skip-link:focus{transform:none}
.loader{position:fixed;z-index:200;inset:0;background:#111;color:#fff;padding:var(--pad);display:grid;grid-template-columns:1fr auto;grid-template-rows:1fr auto;transition:clip-path 1.15s var(--ease);clip-path:inset(0 0 0 0)}
.loader.done{clip-path:inset(0 0 100% 0);pointer-events:none}
.loader-name{font-size:clamp(36px,7vw,110px);letter-spacing:-.06em}
.loader-count{font-size:clamp(36px,7vw,110px);letter-spacing:-.06em}
.loader-line{grid-column:1/-1;height:1px;background:#333;align-self:end}
.loader-line i{display:block;width:0;height:100%;background:#fff}
.scroll-progress{position:fixed;z-index:90;left:0;right:0;top:0;height:2px;pointer-events:none}
.scroll-progress i{display:block;width:100%;height:100%;background:currentColor;transform-origin:left;transform:scaleX(0)}
.site-header{position:fixed;z-index:80;top:0;left:0;right:0;display:grid;grid-template-columns:1fr 1fr auto;align-items:start;padding:16px var(--pad);mix-blend-mode:difference;color:white}
.brand{font-size:22px;font-weight:500}
.header-role{font-size:12px;line-height:1.2}
.site-header nav{display:flex;gap:18px;font-size:14px}
.site-header nav a{position:relative}
.site-header nav a:after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.site-header nav a:hover:after,.site-header nav a:focus-visible:after{transform:scaleX(1);transform-origin:left}
.menu-toggle{display:none;border:0;background:none;padding:0}
.arrow-icon{position:relative;display:inline-block;flex:0 0 auto;width:.9em;height:.9em;margin-left:.12em;vertical-align:-.04em;transform-origin:center}
.arrow-icon:before{content:"";position:absolute;left:.1em;top:50%;width:.72em;height:1.5px;background:currentColor;transform:translateY(-50%) rotate(-45deg);transform-origin:center}
.arrow-icon:after{content:"";position:absolute;right:.02em;top:.02em;width:.34em;height:.34em;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor}
.arrow-down{transform:rotate(135deg)}
.arrow-up{transform:rotate(-45deg)}
.hero{min-height:100svh;padding:90px var(--pad) 22px;display:flex;flex-direction:column;justify-content:space-between;border-bottom:1px solid var(--line)}
.hero-stage{position:relative}
.hero-label{text-transform:uppercase;letter-spacing:.07em;font-size:11px;margin:0 0 8vh}
.hero h1{margin:0;font-size:clamp(78px,17.4vw,310px);line-height:.72;letter-spacing:-.09em;font-weight:400}
.hero h1 span{display:block}
.hero h1 .serif{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;margin-left:9vw}
.hero-side{position:absolute;right:0;top:12vh;width:min(30vw,500px);font-size:clamp(16px,1.5vw,24px);letter-spacing:-.02em}
.hero-side p{margin:0}
.hero-reel{position:relative;left:50%;width:100vw;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;white-space:nowrap;margin:8vh 0 0;padding:8px 0;text-transform:uppercase;font-size:12px;letter-spacing:.06em;transform:translateX(-50vw)}
.hero-reel div{animation:marquee 24s linear infinite;padding-right:20px}
.hero-foot{display:flex;justify-content:flex-end;padding-top:18px;font-size:13px}
.hero-foot a{transition:opacity .3s ease,transform .4s var(--ease)}
.hero-foot a:hover,.hero-foot a:focus-visible{opacity:.6;transform:translateY(2px)}
@keyframes marquee{to{transform:translateX(-100%)}}
.selected{padding:14vh var(--pad) 20vh}
.section-head{display:flex;justify-content:space-between;align-items:end;border-bottom:1px solid var(--line);padding-bottom:12px}
.section-head h2{font-size:clamp(42px,7vw,112px);font-weight:400;letter-spacing:-.06em;margin:0}
.section-head p{margin:0 0 8px}
.project-row{position:relative;display:grid;grid-template-columns:70px minmax(0,1.1fr) minmax(0,1fr) 90px 30px;align-items:center;gap:18px;padding:25px 0;border-bottom:1px solid var(--line);transition:padding .45s var(--ease)}
.project-row:before{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease);z-index:-1}
.project-row:hover,.project-row:focus-visible{padding-left:18px;padding-right:18px;outline-offset:2px}
.project-row:hover:before,.project-row:focus-visible:before{transform:scaleY(1)}
.project-row[data-project="nova"]:before{background:#fff}
.project-name{font-family:Inter,Arial,sans-serif;font-size:clamp(28px,4vw,62px);font-weight:400;line-height:1.25;letter-spacing:-.055em;text-transform:none}
.project-role{font-size:13px;color:var(--muted)}
.project-row:hover .project-role{color:inherit}
.project-year,.project-no{font-size:12px}
.project-arrow{position:relative;display:block;width:22px;height:22px;font-size:0;transition:transform .45s var(--ease)}
.project-arrow:before,.next-project>span:last-child:before{content:"";position:absolute;right:2px;bottom:2px;width:10px;height:10px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor}
.project-arrow:after,.next-project>span:last-child:after{content:"";position:absolute;left:2px;top:10px;width:17px;height:1.5px;background:currentColor;transform:rotate(45deg);transform-origin:center}
.project-row:hover .project-arrow,.project-row:focus-visible .project-arrow{transform:translate(4px,4px)}
.project-preview{position:fixed;z-index:50;width:min(42vw,680px);right:3vw;top:50%;transform:translateY(-50%) scale(.92);opacity:0;pointer-events:none;overflow:hidden;transition:opacity .25s ease,transform .35s var(--ease)}
.project-preview img{width:100%;height:auto;max-height:78vh;object-fit:contain}
.project-row:hover .project-preview{opacity:1;transform:translateY(-50%) scale(1)}
.case{padding:15vh var(--pad) 20vh;border-top:1px solid var(--line);scroll-margin-top:0}
.case-intro{display:grid;grid-template-columns:70px 1.15fr 1fr;gap:24px;align-items:start;margin-bottom:10vh}
.case-index,.case-kicker,.case-role{font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.case-title-wrap h2{font-family:Inter,Arial,sans-serif;font-size:clamp(70px,12vw,200px);line-height:.75;letter-spacing:-.075em;font-weight:400;text-transform:none;margin:12px 0 0}
.case-description{font-size:clamp(20px,2.3vw,38px);letter-spacing:-.035em;max-width:750px}
.case-description p{margin:0 0 30px}
.case-description .case-role{color:var(--muted);font-size:12px;line-height:1.45}
.case-link{display:inline-flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid currentColor;font-size:12px;text-transform:uppercase;letter-spacing:.06em;transition:opacity .3s ease,gap .4s var(--ease)}
.case-link:hover,.case-link:focus-visible{gap:12px;opacity:.62}
.case-gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--pad);align-items:start}
.media{margin:0;overflow:hidden;background:#ddd;grid-column:1/-1}
.media img{transition:transform 1.4s var(--ease)}
.media.in-view img{transform:scale(1)}
.media:not(.in-view) img{transform:scale(1.055)}
.media.split-left{grid-column:1/8}
.media.split-right{grid-column:7/-1}
.media.portrait-left{grid-column:1/6}
.media.portrait-right{grid-column:8/-1}
.motion-slider{margin-top:var(--pad)}
.motion-viewport{position:relative;aspect-ratio:2/1;overflow:hidden;background:#111}
.motion-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;visibility:hidden;transition:opacity .65s ease,visibility 0s linear .65s}
.motion-slide.is-active{opacity:1;visibility:visible;transition-delay:0s}
.motion-controls{display:flex;justify-content:space-between;align-items:center;padding-top:14px;border-top:1px solid var(--line)}
.motion-controls h3{margin:0;font-size:12px;font-weight:400;text-transform:uppercase;letter-spacing:.06em}
.motion-navigation{display:flex;align-items:center;gap:14px}
.motion-counter{min-width:52px;text-align:center;font-size:11px;font-variant-numeric:tabular-nums}
.motion-button{position:relative;width:44px;height:44px;border:0;background:transparent;padding:0}
.motion-button span:before,.motion-button span:after{content:"";position:absolute;top:50%;left:50%;background:currentColor}
.motion-button span:before{width:18px;height:1px;transform:translate(-50%,-50%)}
.motion-button span:after{width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;background:transparent;transform:translate(1px,-50%) rotate(45deg)}
.motion-prev{transform:scaleX(-1)}
.motion-button:hover span:before,.motion-button:focus-visible span:before{width:23px}
.motion-button span:before{transition:width .35s var(--ease)}
.case-video-frame{position:relative;left:50%;grid-column:1/-1;width:100vw;margin:0;overflow:hidden;background:var(--paper);transform:translateX(-50vw)}
.case-video{display:block;width:100%;height:auto;max-height:100vh;object-fit:contain}
.next-project{margin-top:16vh;padding:20px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr minmax(0,auto) 32px;align-items:end;gap:18px;position:relative;isolation:isolate;overflow:hidden;transition:padding .5s var(--ease)}
.next-project:before{content:"";position:absolute;inset:0;background:var(--next);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);z-index:-1}
.next-project:hover,.next-project:focus-visible{padding-left:18px;padding-right:18px;outline-offset:2px}
.next-project:hover:before,.next-project:focus-visible:before{transform:scaleY(1)}
.next-project strong{font-size:clamp(52px,10vw,170px);font-weight:400;letter-spacing:-.07em;line-height:.8}
.next-project>span:last-child{position:relative;display:block;width:24px;height:24px;font-size:0;transition:transform .5s var(--ease)}
.next-project:hover span:last-child,.next-project:focus-visible span:last-child{transform:translate(5px,5px)}
.about{padding:16vh var(--pad);display:grid;grid-template-columns:minmax(280px,.72fr) 1.28fr;gap:var(--pad);background:#111;color:#f5f4ee}
.about-photo{min-height:70vh;overflow:hidden;background:#111;line-height:0}
.about-photo img{height:100%;object-fit:cover}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin:0}
.about h2{font-size:clamp(52px,7vw,118px);font-weight:400;line-height:.88;letter-spacing:-.065em;margin:20px 0 60px}
.about h2 em{font-family:"Instrument Serif",Georgia,serif;font-weight:400}
.about-lead{font-size:clamp(22px,2.6vw,42px);letter-spacing:-.035em;max-width:850px}
.about-columns{display:grid;grid-template-columns:1fr 1fr;gap:var(--pad);font-size:16px;color:#c8c6be;margin-top:50px}
.contact-links{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:70px;font-size:clamp(28px,4vw,62px);font-style:normal;letter-spacing:-.04em}
.contact-links a{max-width:100%;overflow-wrap:anywhere;border-bottom:1px solid transparent;transition:opacity .3s ease,border-color .3s ease}
.contact-links a:hover,.contact-links a:focus-visible{opacity:.62;border-color:currentColor}
footer{padding:24px var(--pad);display:flex;justify-content:space-between;border-top:1px solid var(--line)}
footer .footer-meta{display:flex;align-items:center;gap:50px}
.legal-links{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}
.legal-links a{transition:color .3s ease}
.legal-links a:hover,.legal-links a:focus-visible{color:var(--ink)}
.legal-page .site-header{position:absolute;mix-blend-mode:normal;color:var(--ink)}
.legal-header-back{justify-self:end;font-size:14px}
.legal-main{min-height:100svh;padding:clamp(130px,16vh,190px) var(--pad) 14vh}
.legal-hero{display:grid;grid-template-columns:70px minmax(0,1fr);gap:24px;align-items:end;padding-bottom:30px;border-bottom:1px solid var(--line)}
.legal-kicker{margin:0 0 12px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.legal-hero h1{grid-column:2;margin:0;font-size:clamp(68px,12vw,190px);line-height:.78;letter-spacing:-.075em;font-weight:400;overflow-wrap:anywhere}
.legal-hero h1 em{font-family:"Instrument Serif",Georgia,serif;font-weight:400}
.legal-content{max-width:900px;margin:clamp(64px,9vh,120px) 0 0 94px}
.legal-section+.legal-section{margin-top:52px}
.legal-content h2{margin:0 0 22px;font-size:clamp(27px,3vw,44px);line-height:1;letter-spacing:-.04em;font-weight:400}
.legal-content h3{margin:32px 0 12px;font-size:18px;font-weight:500;letter-spacing:-.02em}
.legal-content p,.legal-content address,.legal-content li{font-size:15px;line-height:1.65}
.legal-content p,.legal-content address{margin:0 0 18px}
.legal-content address{font-style:normal}
.legal-content ul{margin:0 0 20px;padding-left:1.2em}
.legal-content a{border-bottom:1px solid var(--line);transition:border-color .3s ease}
.legal-content a:hover,.legal-content a:focus-visible{border-color:currentColor}
.legal-page footer{margin-top:0}
.cursor{position:fixed;z-index:120;width:82px;height:82px;border-radius:50%;background:#fff;color:#111;mix-blend-mode:difference;pointer-events:none;display:grid;place-items:center;transform:translate(-50%,-50%) scale(0);transition:transform .22s var(--ease)}
.cursor.visible{transform:translate(-50%,-50%) scale(1)}
.cursor span{font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.js .reveal-media,.js .reveal-content{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--delay,0ms)}
.js .reveal-media.in-view,.js .reveal-content.in-view{opacity:1;transform:none}

@media(max-width:900px){
  .site-header{grid-template-columns:1fr auto;align-items:center;padding-top:max(14px,env(safe-area-inset-top))}
  .header-role{display:none}
  .site-header .brand,.menu-toggle{position:relative;z-index:2}
  .menu-toggle{display:block;min-width:48px;min-height:48px;margin:-10px -8px -10px 0;border:0;background:none;padding:8px}
  .site-header nav{position:fixed;inset:0;width:100%;height:100dvh;min-height:100svh;padding:max(72px,env(safe-area-inset-top)) var(--pad) max(32px,env(safe-area-inset-bottom));background:#000;color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:12vw;gap:1vh;transform:translateY(-100%);visibility:hidden;transition:transform .7s var(--ease),visibility 0s linear .7s;z-index:1;overscroll-behavior:contain}
  .site-header nav.open{visibility:visible;transform:none;transition-delay:0s}
  .menu-open .site-header{mix-blend-mode:normal;color:#fff}
  .site-header nav a{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:56px}
  .site-header nav a:after{display:none}
  .hero-label{margin-bottom:11vh}
  .hero h1{font-size:21vw}
  .hero h1 .serif{margin-left:0}
  .hero-side{position:static;width:85%;margin-top:8vh}
  .project-row{grid-template-columns:42px minmax(0,1fr) auto 22px;min-height:74px}
  .project-role{grid-column:2/4;color:var(--muted)}
  .project-year{grid-column:3;grid-row:1}
  .project-arrow{grid-column:4;grid-row:1;width:18px;height:18px}
  .project-arrow:before,.next-project>span:last-child:before{right:1px;bottom:1px;width:8px;height:8px;border-width:0 1.5px 1.5px 0}
  .project-arrow:after,.next-project>span:last-child:after{left:2px;top:8px;width:14px}
  .project-preview{display:none}
  .project-row:hover,.project-row:focus-visible{padding-left:0;padding-right:0}
  .project-row:hover:before,.project-row:focus-visible:before{transform:scaleY(0)}
  .case-intro{grid-template-columns:42px 1fr}
  .case-description{grid-column:2}
  .case-gallery{gap:18px}
  .media.split-left,.media.split-right,.media.portrait-left,.media.portrait-right{grid-column:1/-1}
  #port-emm .case-video-frame{left:auto;width:100%;transform:none}
  .next-project{grid-template-columns:1fr 25px}
  .next-project span:first-child{display:none}
  .next-project:hover,.next-project:focus-visible{padding-left:0;padding-right:0}
  .about{grid-template-columns:1fr}
  .about-photo{min-height:0;aspect-ratio:auto;margin:0;border:0}
  .about-photo img{height:auto;margin-bottom:-3px;object-fit:contain}
  .cursor{display:none}
  .legal-page .site-header{grid-template-columns:1fr auto}
  .legal-page .header-role{display:none}
}
@media(max-width:520px){
  :root{--pad:16px}
  .hero{min-height:100svh;padding-top:88px;padding-bottom:max(20px,env(safe-area-inset-bottom))}
  .hero-label{margin-bottom:12vh}
  .hero h1{font-size:22vw;line-height:.76}
  .hero-side{font-size:18px;width:100%}
  .hero-foot{align-items:flex-end;gap:18px;font-size:11px}
  .hero-foot a{text-align:right}
  .selected{padding-top:11vh;padding-bottom:14vh}
  .section-head{align-items:flex-end;gap:16px}
  .section-head p{flex:none}
  .project-row{grid-template-columns:34px 1fr auto 20px;gap:9px;padding:19px 0}
  .project-name{min-width:0;font-size:clamp(27px,8.2vw,34px);overflow-wrap:anywhere}
  .project-role{font-size:10px;line-height:1.4}
  .case{padding-top:11vh;padding-bottom:15vh}
  .case-intro{grid-template-columns:34px 1fr;gap:10px}
  .case-title-wrap,.case-description{min-width:0}
  .case-title-wrap h2{font-size:clamp(54px,19vw,92px);overflow-wrap:anywhere}
  .case-description{font-size:19px;line-height:1.35}
  .case-gallery{gap:12px}
  .media img{aspect-ratio:16/9;object-fit:cover}
  .motion-slider{margin-top:12px}
  .motion-controls{padding-top:8px}
  .motion-navigation{gap:4px}
  .next-project{margin-top:11vh;min-height:84px}
  .next-project strong{font-size:clamp(44px,14vw,72px);overflow-wrap:anywhere}
  .about{padding-top:12vh;padding-bottom:12vh}
  .about-columns{grid-template-columns:1fr}
  .about h2{font-size:16vw}
  .contact-links{gap:18px 24px;margin-top:48px;font-size:clamp(23px,8vw,38px)}
  .contact-links a{min-height:44px}
  footer{align-items:flex-end;gap:18px;font-size:12px}
  footer .footer-meta{flex-wrap:wrap;gap:8px 18px}
  .footer-location{display:none}
  .legal-links{flex-basis:100%}
  .legal-page .site-header{padding-right:var(--pad)}
  .legal-main{padding-top:120px;padding-bottom:11vh}
  .legal-hero{grid-template-columns:1fr;gap:8px;padding-bottom:22px}
  .legal-hero h1{grid-column:1;font-size:clamp(58px,18vw,88px)}
  .legal-content{margin:52px 0 0}
  .legal-section+.legal-section{margin-top:44px}
  .legal-content h2{font-size:28px}
}
@media(pointer:coarse){.project-preview,.cursor{display:none}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
  .loader{display:none}
  .js .reveal-media,.js .reveal-content{opacity:1;transform:none}
}
