@font-face{
  font-family:"InterVariable";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("../fonts/InterVariable.woff2") format("woff2");
}
:root{
  --bg:#f5f4ef; --ink:#111; --muted:#6e6e68; --line:#d9d8d1;
  --accent:#151515; --white:#fff;
  --max:1180px;
  --nav-h:82px;
  --font:"InterVariable",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.5}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.wrap{width:min(calc(100% - 48px),var(--max));margin:auto}

/* Skip link */
.skip{position:absolute;left:16px;top:-60px;z-index:20;background:#111;color:#fff;padding:10px 16px;border-radius:999px;font-size:13px}
.skip:focus{top:16px}

/* Background network (fixed behind everything; lvh so mobile toolbars don't resize it) */
.site-field{position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;z-index:-1;pointer-events:none;display:block}

/* Header: sticky, hides on scroll down, returns on scroll up */
.site-header{position:sticky;top:0;z-index:10;background:rgba(245,244,239,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:transform .35s ease,border-color .2s}
.site-header.is-scrolled{border-bottom-color:var(--line)}
.site-header.is-hidden{transform:translateY(-100%)}
@media(prefers-reduced-motion:reduce){.site-header{transition:none}}
nav{position:relative;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{font-weight:800;letter-spacing:-.06em;font-size:25px;white-space:nowrap}
.logo span{font-weight:400;letter-spacing:-.03em}
.navlinks{display:flex;gap:30px;font-size:13px;color:#4e4e49}
.navlinks a:hover{color:#000}
.nav-actions{display:flex;align-items:center;gap:8px}
.nav-cta,.menu-toggle{display:inline-flex;align-items:center;min-height:44px;border:1px solid #111;padding:0 16px;border-radius:999px;font-size:13px;white-space:nowrap;transition:background-color .2s,color .2s}
.nav-cta:hover{background:#111;color:#fff}
.menu-toggle{display:none;background:none;color:inherit;font:inherit;font-size:13px;cursor:pointer;border-color:var(--line)}

/* Hero */
.hero{position:relative;overflow:hidden;min-height:calc(100vh - var(--nav-h));min-height:calc(100svh - var(--nav-h));display:flex;align-items:center;padding:80px 0 110px}
.hero-inner{position:relative}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:11px;color:var(--muted);margin-bottom:25px}
h1{font-size:clamp(58px,8vw,108px);line-height:.9;letter-spacing:-.075em;margin:0;max-width:850px;font-weight:750}
h1 em{font-style:normal;color:#777}
.hero-copy{max-width:510px;margin-top:35px;color:#55554f;font-size:18px}
.cycle-word{display:inline-block;color:var(--ink)}
.caret{display:inline-block;width:.5em;height:1em;margin-left:.15em;vertical-align:-.14em;background:currentColor;animation:caret-blink 1s steps(1) infinite}
.caret.is-typing{animation:none}
.caret[hidden]{display:none}
@keyframes caret-blink{50%{opacity:0}}
.js [data-stream]{visibility:hidden;animation:stream-fallback 0s 2.5s forwards}
.js [data-stream].is-streaming{visibility:visible;animation:none}
@keyframes stream-fallback{to{visibility:visible}}
@media(prefers-reduced-motion:reduce){.js [data-stream]{visibility:visible;animation:none}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 19px;border-radius:999px;border:1px solid #111;font-size:13px;transition:background-color .2s,color .2s}
.btn:hover{background:#111;color:#fff}
.btn.dark{background:#111;color:#fff}
.btn.dark:hover{background:transparent;color:#111}

/* Sections */
section{padding:115px 0;border-top:1px solid var(--line)}
.section-head{display:grid;grid-template-columns:1fr 2fr;gap:60px;margin-bottom:65px}
.section-no{font-size:12px;color:var(--muted)}
h2{font-size:clamp(40px,5vw,68px);line-height:.95;letter-spacing:-.065em;margin:0;max-width:850px}
.lead{font-size:19px;color:#5e5e58;max-width:650px}
.services{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.service{padding:28px 25px 35px 0;border-bottom:1px solid var(--line);min-height:235px}
.service:nth-child(3n+2),.service:nth-child(3n+3){padding-left:25px;border-left:1px solid var(--line)}
.service-num{font-size:11px;color:var(--muted)}
.service h3{font-size:24px;letter-spacing:-.04em;margin:48px 0 12px}
.service p{font-size:14px;color:#66665f;max-width:290px}
.manifesto{background:#111;color:#fff}
.manifesto .section-no,.manifesto .lead{color:#aaa}
.manifesto h2{max-width:1000px}
.manifesto-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin-top:65px}
.principle{border-top:1px solid #333;padding-top:18px}
.principle strong{display:block;font-size:17px;margin-bottom:8px}
.principle span{font-size:14px;color:#aaa}
.work-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:18px}
.work-card{min-height:330px;background:#deddd7;padding:30px;display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.work-card:nth-child(2){background:#c9c8c1}
.work-card:nth-child(3){background:#e6e4dc;grid-column:1/-1;min-height:260px}
.tag{font-size:11px;text-transform:uppercase;letter-spacing:.15em}
.work-card h3{font-size:32px;letter-spacing:-.05em;margin:0;max-width:450px}
.work-card p{font-size:14px;color:#555;max-width:420px}
.card-link{display:inline-block;font-size:13px;text-decoration:underline;text-underline-offset:4px}
.card-link:hover{text-decoration-thickness:2px}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end}
.contact .section-no{margin-bottom:25px}
.contact h2{font-size:clamp(48px,7vw,90px)}
.contact-copy{color:#60605a;max-width:450px}
.email-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.email{font-size:24px;text-decoration:underline;text-underline-offset:6px;overflow-wrap:anywhere}
.copy-btn{min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:none;color:inherit;font:inherit;font-size:13px;cursor:pointer;transition:border-color .2s}
.copy-btn:hover{border-color:#111}
.contact-note{font-size:13px;color:var(--muted);margin-top:18px}
footer{border-top:1px solid var(--line);padding:25px 0;font-size:12px;color:#66665f;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
footer a:hover{color:#111}

/* Tablet */
@media(max-width:1000px){
  .services{grid-template-columns:repeat(2,1fr)}
  .service:nth-child(3n+2),.service:nth-child(3n+3){padding-left:0;border-left:0}
  .service:nth-child(2n){padding-left:25px;border-left:1px solid var(--line)}
}

/* Mobile */
@media(max-width:800px){
  .wrap{width:min(calc(100% - 32px),var(--max))}
  .js .menu-toggle{display:inline-flex}
  .navlinks{display:none;position:absolute;top:var(--nav-h);left:0;right:0;flex-direction:column;gap:0;padding:8px 0 16px;background:var(--bg);border-bottom:1px solid var(--line);font-size:17px;color:var(--ink)}
  .navlinks a{padding:12px 0;border-top:1px solid var(--line)}
  .navlinks a:first-child{border-top:0}
  nav.is-open .navlinks{display:flex}
  .hero{min-height:0;padding:72px 0 96px}
  section{padding:80px 0}
  .section-head,.contact{grid-template-columns:1fr;gap:25px}
  .services{grid-template-columns:1fr}
  .service,.service:nth-child(2n),.service:nth-child(3n+2),.service:nth-child(3n+3){padding:25px 0;border-left:0;min-height:0}
  .service h3{margin-top:32px}
  .manifesto-grid{grid-template-columns:1fr;gap:35px}
  .work-grid{grid-template-columns:1fr}
  .work-card,.work-card:nth-child(3){min-height:260px;padding:26px}
  footer{flex-direction:column}
}

/* Small phones */
@media(max-width:480px){
  .logo span{display:none}
  .nav-cta,.menu-toggle{padding:0 14px}
  .email{font-size:21px}
}