@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/space-grotesk-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/space-grotesk-latin-500-normal.woff2) format("woff2")}
:root{
  --black:#000;
  --white:#fff;
  --grey-text:#e8e8e8;
  --rule:rgba(255,255,255,.28);
  --serif:"Instrument Serif","Times New Roman",Georgia,serif;
  --sans:"Space Grotesk",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(1.25rem,3.2vw,3rem);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--white);font-family:var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--white);outline-offset:4px}

/* Header */
.site-header{position:fixed;inset:0 auto auto 0;z-index:50;display:flex;align-items:center;padding:calc(var(--gutter) + .6rem) var(--gutter);pointer-events:none;mix-blend-mode:difference}
.site-header>*{pointer-events:auto}
.brand{display:block;line-height:0}
.brand svg{width:clamp(44px,4vw,60px);height:auto;fill:var(--white)}

/* Hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:8rem var(--gutter) 10rem;background:linear-gradient(35deg,#1c1c1c 0%,#0a0a0a 45%,#000 75%)}
.hero-text{margin:0;max-width:15em;text-align:center;font-family:var(--serif);font-weight:400;font-size:clamp(2.1rem,4.1vw,4.4rem);line-height:1.02;letter-spacing:-.035em}
.hero-line{--p:0;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 94%;background-size:calc(var(--p)*100%) 2px;-webkit-box-decoration-break:slice;box-decoration-break:slice;padding-bottom:.02em}
.scroll-cue{position:absolute;left:50%;bottom:clamp(4rem,9vh,7rem);transform:translateX(-50%);width:24px;height:44px;border:1.5px solid var(--white);border-radius:14px}
.scroll-cue span{position:absolute;left:50%;top:8px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--white);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* Logos */
.logos{background:var(--white);padding:clamp(2.5rem,4.4vw,4rem) 0;overflow:hidden}
.marquee-track{list-style:none;margin:0;padding:0;display:flex;align-items:center;width:max-content;animation:marquee 70s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track li{flex:none;padding:0 clamp(1.5rem,3.1vw,3rem)}
.marquee-track img{height:clamp(38px,3.6vw,54px);width:auto;filter:grayscale(1) contrast(.9);opacity:.72;mix-blend-mode:multiply}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Work grid */
.work{display:grid;grid-template-columns:26.5fr 23.5fr 23.5fr 26.5fr;grid-auto-rows:16.1vw;background:var(--black)}
.tile{position:relative;overflow:hidden;display:block}
.tile img{width:100%;height:100%;object-fit:cover;filter:grayscale(0);transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .6s ease}
.tile:hover img{transform:scale(1.07);filter:grayscale(1)}

/* Services */
.services{background:var(--black);padding:clamp(5rem,10vw,9rem) var(--gutter) 0}
.services-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,9vw,9rem);max-width:1180px;margin:0 auto}
.svc-media{position:relative}
.svc-shape{position:sticky;top:12vh;height:76vh;max-height:760px;clip-path:polygon(18% 2%,98% 5%,82% 100%,0% 100%,4% 50%)}
.svc-shape img{width:100%;height:100%;object-fit:cover}
.svc-list{padding-bottom:clamp(3rem,6vw,5rem)}
.u-line{display:inline-block;margin:0 0 clamp(2.5rem,4vw,3.75rem);font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,3.4vw,3.4rem);letter-spacing:-.035em;line-height:1.1;padding:0 .12em 0 0;margin-left:-.15em;padding-left:.15em;border-bottom:1.5px solid var(--white)}
.svc-list ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.svc{border-bottom:1px solid var(--rule)}
.svc h3{margin:0;font-weight:400}
.svc-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:clamp(1.3rem,2vw,1.8rem) 0;background:none;border:0;color:var(--white);cursor:pointer;text-align:left;font-family:var(--serif);font-size:clamp(1.75rem,2.5vw,2.45rem);letter-spacing:-.035em;line-height:1.1}
.svc-icon{position:relative;flex:none;width:15px;height:15px}
.svc-icon::before,.svc-icon::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1.5px;margin-top:-.75px;background:var(--white);transition:transform .3s ease}
.svc-icon::after{transform:rotate(90deg)}
.svc-toggle[aria-expanded="true"] .svc-icon::after{transform:rotate(0)}
.svc-body p{margin:0;padding:0 0 clamp(1.6rem,2.4vw,2.2rem);max-width:19em;color:var(--grey-text);font-size:clamp(1rem,1.2vw,1.15rem);line-height:2}

.fade-rule{border:0;height:1px;margin:0 auto;width:min(100%,1380px);background:linear-gradient(90deg,transparent,rgba(255,255,255,.55) 30%,rgba(255,255,255,.55) 70%,transparent)}
.services>.fade-rule{margin-top:clamp(2rem,4vw,4rem)}

/* Contact */
.contact{margin-top:clamp(5rem,9vw,8rem);padding:clamp(5rem,8vw,7.5rem) var(--gutter) clamp(2.5rem,4vw,3.5rem);text-align:center;background:linear-gradient(30deg,#1a1a1a 0%,#0b0b0b 45%,#000 80%)}
.contact .fade-rule{width:min(100%,1040px);background:linear-gradient(90deg,transparent,rgba(255,255,255,.35) 25%,rgba(255,255,255,.35) 75%,transparent)}
.contact h2{margin:0 0 clamp(2rem,3.5vw,2.75rem);font-family:var(--serif);font-weight:400;font-size:clamp(3rem,5.3vw,5.4rem);letter-spacing:-.035em;line-height:1.05}
.status{margin:clamp(2.5rem,4vw,3.6rem) 0;font-size:clamp(1rem,1.3vw,1.2rem);display:flex;align-items:center;justify-content:center;gap:.5em}
.dot{width:1em;height:1em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8ff06a,#3cb82a 55%,#248a19)}
.meta{margin:0 0 clamp(1.4rem,2vw,1.9rem);font-size:clamp(1rem,1.3vw,1.2rem)}
.meta-first{margin-top:clamp(2.5rem,4vw,3.6rem)}
.meta-last{margin-bottom:clamp(2.5rem,4vw,3.6rem)}
.meta a{text-decoration:none}
.meta a:hover{text-decoration:underline;text-underline-offset:.2em}
.ack{margin:clamp(1.75rem,3vw,2.5rem) auto 0;max-width:62em;font-size:clamp(.8rem,.85vw,.9rem);line-height:1.6;color:var(--grey-text)}

/* Responsive */
@media (max-width:900px){
  .work{grid-template-columns:1fr 1fr;grid-auto-rows:34vw}
  .services-inner{grid-template-columns:1fr}
  .svc-shape{position:relative;top:0;height:60vw}
  .hero-text{max-width:13em}
}
@media (max-width:520px){
  .work{grid-auto-rows:42vw}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .marquee{overflow-x:auto}
  .hero-line{--p:1!important}
}