@font-face{font-family:Inter;src:url('assets/InterVariable.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--section-gap:200px;--link-line:1.68px}
/* Native scrolling, with a narrow square-edged graphic treatment. */
html{scrollbar-color:#080808 #f6f6f6;scrollbar-width:thin;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@supports selector(::-webkit-scrollbar){
  html{scrollbar-width:auto;scrollbar-color:auto}
  ::-webkit-scrollbar{width:6px;height:6px}
  ::-webkit-scrollbar-track{background:#f6f6f6}
  ::-webkit-scrollbar-thumb{background:#080808;border-radius:0}
  ::-webkit-scrollbar-thumb:hover{background:#333}
  ::-webkit-scrollbar-button{display:none;width:0;height:0}
  ::-webkit-scrollbar-corner{background:#f6f6f6}
}
.site-header{position:fixed;inset:0 0 auto;height:50px;z-index:20;display:block;padding:0;background:#f6f6f6;font-family:Inter,Arial,sans-serif;font-size:14px;font-weight:600;letter-spacing:0}
.site-header .brand{position:absolute;left:20px;top:16px;font-weight:900;line-height:17px}
.site-header .tagline{position:absolute;left:12.986111%;top:17.75px;font-size:14px;line-height:13.5px}
.site-header .work-link{position:absolute;top:16px;left:50%;transform:translateX(-50%);display:block;width:177px;text-align:center;padding-bottom:17px;line-height:17px}
.work-preview{position:absolute;top:34px;left:50%;transform:translateX(-50%);width:177px;height:146px;overflow:hidden;background:#dedede;opacity:0;visibility:hidden;transition:width 560ms cubic-bezier(.4,0,.2,1)}
.work-link:hover .work-preview,.work-link:focus-visible .work-preview{width:193px}
.preview-ready .work-preview{opacity:1;visibility:visible}
.preview-track{position:absolute;left:-2px;top:73px;width:calc(100% + 4px);height:auto;aspect-ratio:177/146;transform:translateY(-50%)}
.site-header .work-link img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;visibility:hidden;pointer-events:none}
.site-header .work-link img.is-active{visibility:visible;z-index:1}
.site-header .work-link img.tall-image{height:121.23%;top:-10.27%}
.site-header nav{position:absolute;left:66.80556%;top:16px;display:flex;gap:24px;line-height:17px}
.site-header .hello{position:absolute;right:20px;top:16px;line-height:17px;text-decoration:none}
/* Shared underline for navigation and future text buttons. */
.text-link,.site-header nav a,.site-header .hello{padding-bottom:2px;text-decoration:none;background:linear-gradient(currentColor,currentColor) left bottom/100% var(--link-line) no-repeat}
.site-header nav a{background-size:0% var(--link-line);transition:background-size 200ms ease}
.site-header nav a:hover,.site-header nav a:focus-visible{background-size:100% var(--link-line)}
.text-link:hover,.text-link:focus-visible,.site-header .hello:hover,.site-header .hello:focus-visible{animation:underline-redraw 400ms ease both}
@keyframes underline-redraw{0%{background-size:100% var(--link-line);background-position:right bottom}49%{background-size:0% var(--link-line);background-position:right bottom}50%{background-position:left bottom}100%{background-size:100% var(--link-line);background-position:left bottom}}
.site-header a:focus-visible{outline:2px solid #080808;outline-offset:5px}
.hero{height:100svh;min-height:450px;padding:220px 0 20px;display:flex;align-items:flex-end;font-family:Inter,Arial,sans-serif}
.hero h1{margin:0;width:min(1091px,100%);font-size:min(92px,calc((100svh - 260px)/5),calc((100vw - 40px)/12));line-height:1;font-weight:900;letter-spacing:-.02em;color:#030303}
.hero .line{display:block;overflow:hidden;padding-bottom:10px;margin-bottom:-10px}
.hero .line>span{display:block;white-space:nowrap;transform:translate3d(0,0,0);will-change:transform;backface-visibility:hidden}
.hero .line:last-child{padding-bottom:.18em;margin-bottom:-.18em}
.motion-pending .hero .line>span{visibility:hidden}
.first-screen-only{min-height:calc(100vh + 240px)}
.motion-ready .hero .line>span{animation:line-reveal 660ms cubic-bezier(.22,1,.36,1) both;animation-delay:calc(100ms + var(--line-index)*75ms)}
@keyframes line-reveal{from{transform:translate3d(0,110%,0)}to{transform:translate3d(0,0,0)}}
#work,#services,#about,#contact{scroll-margin-top:100px}
@media(prefers-reduced-motion:reduce){.motion-ready .hero .line>span{animation:none}.site-header .work-link img,.work-preview,.site-header nav a:after{transition:none}.site-header .hello:hover{animation:none}}


/* Typographic studio signature: no imagery. */
.site-preloader{display:none}
.motion-pending .site-preloader{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#f6f6f6;pointer-events:auto}
.preloader-mask{overflow:hidden;padding:.22em .1em;font-family:Inter,Arial,sans-serif;font-size:clamp(24px,3.2vw,46px);font-weight:900;line-height:1.2;letter-spacing:-.035em;color:#030303}
.preloader-wordmark{position:relative;display:flex;align-items:center;gap:0;transform:translateY(0);visibility:hidden}
.preloader-name{display:block;clip-path:inset(0 100% 0 0)}
.preloader-colon{display:block;flex:none;letter-spacing:0;line-height:inherit;transform:translateX(0)}
@media(prefers-reduced-motion:reduce){.site-preloader{display:none!important}}

/* Exact image-fill crops from the replacement Figma thumbnails. */
.preview-track img[data-node-id="16:120"]{object-position:center bottom}
.preview-track img[data-node-id="14:107"]{width:100.34%;height:101.37%;left:-.17%;top:-1.37%}
.preview-track img[data-node-id="12:93"]{width:100.34%;height:101.37%;left:-.17%;top:0}
.preview-track img[data-node-id="16:116"]{width:273.88%;height:272.55%;left:-71.71%;top:-81.77%;object-fit:fill}

/* Text selection matches the orange press ribbon. */
::selection{background:#f3664b;color:#030303;text-shadow:none}

/* Release reveal masks so selection never clips letter descenders. */
.hero .line.reveal-finished,.intro-line.reveal-finished{overflow:visible}
@media(prefers-reduced-motion:reduce){.hero .line,.intro-line{overflow:visible}}

/* Finished text must leave its animation compositing layer: otherwise the
   following line's selection background paints over its descenders. */
.motion-ready .hero .line.reveal-finished>span,
.intro-motion .intro-line.reveal-finished>span{animation:none!important;transform:none!important;will-change:auto;backface-visibility:visible}

/* Upper lines paint above subsequent selection backgrounds. */
.hero .line.reveal-finished,.intro-line.reveal-finished{position:relative;z-index:1}
.hero .line.reveal-finished:nth-child(1),.intro-line.reveal-finished:nth-child(1){z-index:6}
.hero .line.reveal-finished:nth-child(2),.intro-line.reveal-finished:nth-child(2){z-index:5}
.hero .line.reveal-finished:nth-child(3),.intro-line.reveal-finished:nth-child(3){z-index:4}
.hero .line.reveal-finished:nth-child(4),.intro-line.reveal-finished:nth-child(4){z-index:3}
.hero .line.reveal-finished:nth-child(5){z-index:2}

.preloader-name{white-space:pre}

.site-header .tagline{white-space:nowrap;width:max-content;max-width:none}
@media(min-width:901px) and (max-width:1100px){.site-header .tagline{display:none}}