@font-face{font-family:"Instrument Sans";src:url(/fonts/InstrumentSans.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";src:url(/fonts/InstrumentSans-arrows.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+2191-2193}
@font-face{font-family:"Geist Mono";src:url(/fonts/GeistMono-400.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --ink:#000;
  --grey:#8c8c8c;
  --pad:clamp(24px,min(8vw,10.5svh),120px);
  --pad-t:max(var(--pad),env(safe-area-inset-top));
  --pad-b:max(var(--pad),env(safe-area-inset-bottom));
  --pad-l:max(var(--pad),env(safe-area-inset-left));
  --pad-r:max(var(--pad),env(safe-area-inset-right));
  --fs:clamp(15px,min(1.4vw,2.3svh),20px);
  --fs-name:clamp(19px,min(1.67vw,2.75svh),24px);
  --photo:clamp(96px,min(14.5vw,23svh),209px);
  --gap:clamp(18px,min(2.8vw,4.2svh),40px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-snap-type:y mandatory;scroll-behavior:smooth;overscroll-behavior-y:none;overflow-x:hidden}
body{overscroll-behavior-y:none}
body{margin:0;background:#fff;color:var(--ink);font-family:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:var(--fs);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
p{margin:0}
.mono{font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:0}
.u{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-skip-ink:none;transition:text-decoration-color .3s var(--ease)}
.u:hover{text-decoration-color:rgba(0,0,0,.35)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}

/* sections */
/* native scroll + mandatory snap; html is the single scroll container */
.section{position:relative;height:100vh;height:100svh;height:100dvh;overflow:hidden;overflow:clip;scroll-snap-align:start;scroll-snap-stop:always;
  display:grid;grid-template-rows:1fr auto;grid-template-columns:minmax(0,1fr);padding:var(--pad-t) var(--pad-r) var(--pad-b) var(--pad-l)}
.tl{max-width:min(600px,100%);min-width:0;min-height:0}
.copy{max-width:484px}
.photo{display:block;width:var(--photo);height:var(--photo);object-fit:cover;background:#eee}
.stats{width:var(--photo);height:var(--photo);display:grid;grid-template-rows:repeat(3,1fr);border-top:1px solid #000}
.stat{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid #000;gap:12px}
.stat b{font-weight:600;font-size:calc(var(--photo)*.17);line-height:1;letter-spacing:-.01em;align-self:center}
.stat span{font-size:calc(var(--fs)*.62);color:var(--grey);align-self:center}
.name{font-weight:600;font-size:var(--fs-name);line-height:1.2;margin-top:calc(var(--gap)*.8)}
.copy{margin-top:calc(var(--gap)*.65)}
.copy p+p{margin-top:1.5em}
.after{margin-top:var(--gap)}

/* marquee */
.marquee{margin-top:var(--gap);width:min(600px,100%);height:30px;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7.7%,#000 90.4%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7.7%,#000 90.4%,transparent 100%)}
.track{display:flex;width:max-content;height:100%;animation:marquee var(--dur,36s) linear infinite;will-change:transform;backface-visibility:hidden}
.group{display:flex;align-items:center;gap:40px;padding-right:40px;flex:none}
.group img{display:block;height:var(--h,20px);width:auto;flex:none;filter:brightness(0);opacity:.25}
@keyframes marquee{to{transform:translate3d(-50%,0,0)}}

/* corners */
.br{grid-row:2;justify-self:end;align-self:end}
.cta{display:inline-flex;cursor:pointer;align-items:center;border:1px solid #000;padding:15px 20px;text-decoration:none;white-space:nowrap;line-height:1.5;transition:background-color .35s var(--ease),color .35s var(--ease)}
.cta:hover{background:#000;color:#fff}
.cta .arr{display:inline-block;margin-left:.25em;transition:transform .35s var(--ease)}
.cta:hover .arr{transform:translateX(3px)}

.social{position:fixed;z-index:5;top:var(--pad-t);right:var(--pad-r);display:flex;align-items:center;gap:clamp(20px,2.6vw,38px);height:30px}
.social a,.social button{display:block;color:var(--grey);transition:color .3s var(--ease)}
.social a:hover,.social button:hover,.social a:focus-visible,.social button:focus-visible{color:#222}
.ico{display:block;width:22px;height:22px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.ico.mail{width:24px;height:24px}

.nav{position:fixed;z-index:5;left:var(--pad-l);bottom:var(--pad-b);height:62px;display:flex;align-items:flex-end;padding-bottom:1px}
.nav button{font-size:var(--fs);line-height:1.5;display:flex;align-items:center;gap:.5em}
.nav .lbl{display:inline-block;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.nav.swap .lbl{opacity:0;transform:translateY(3px)}
.nav button:hover .ar{transform:translateY(2px)}
.nav.up button:hover .ar{transform:translateY(-2px)}
.nav .ar{display:inline-block;transition:transform .3s var(--ease)}

/* toast */
.toast{position:fixed;z-index:10;left:50%;bottom:calc(var(--pad-b) + 16px);transform:translate(-50%,8px);opacity:0;pointer-events:none;
  background:#000;color:#fff;font-size:13px;padding:8px 12px;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* subtle reveal */
.rv{opacity:0;transform:translateY(6px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--d,0)*70ms)}
.in .rv{opacity:1;transform:none}
.fade{opacity:0;transition:opacity .8s var(--ease) .2s}
.ready .fade{opacity:1}

/* mobile */
@media (max-width:640px){
  :root{--pad:24px;--fs:16px;--fs-name:20px;--photo:112px;--gap:24px}
  .social{flex-direction:column;align-items:flex-end;gap:16px;height:auto}
  .tl{display:flex;flex-direction:column;height:100%;gap:var(--gap)}
  .tl>.body{margin:auto 0}
  .tl>.body>.name{margin-top:0}
  .ico{width:18px;height:18px}.ico.mail{width:20px;height:20px}
  .nav{height:auto}
  .nav button{font-size:14px}
  .cta{padding:11px 14px;font-size:15px}
  .marquee{height:24px}
  .group{gap:28px;padding-right:28px}
  .group img{height:calc(var(--h,20px)*.8)}
  .br{padding-top:var(--gap)}
  .toast{top:calc(var(--pad-t) + 4px);bottom:auto;transform:translate(-50%,-8px)}
  .stats{width:calc(var(--photo)*1.4)}
}
@media (max-width:360px){.cta{font-size:14px;padding:10px 12px}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .track{animation-play-state:paused}
  .rv,.fade{opacity:1;transform:none;transition:none}
  .nav .lbl,.cta,.cta .arr,.toast{transition:none}
}