@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --ink:#101114;
  --paper:#f5f3ed;
  --soft:#e6e2d8;
  --acid:#d7ff45;
  --muted:#696962;
  --line:rgba(16,17,20,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.site-header{height:82px;padding:0 6vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{font-weight:800;letter-spacing:-.06em;font-size:1.55rem}
.brand span{font-family:"DM Mono",monospace;font-size:.45em;vertical-align:top;margin-left:4px}
nav{display:flex;gap:30px;font:500 .72rem "DM Mono",monospace;text-transform:uppercase;letter-spacing:.08em}
nav a:hover{opacity:.55}
.hero{min-height:720px;padding:7vw 6vw 6vw;display:grid;grid-template-columns:1.5fr .5fr;gap:7vw;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;width:42vw;height:42vw;border-radius:50%;background:var(--acid);right:-17vw;top:5vw;z-index:0}
.hero-copy,.hero-index{position:relative;z-index:1}
.eyebrow{font:500 .68rem "DM Mono",monospace;letter-spacing:.16em;margin:0 0 28px}
.hero h1{font-size:clamp(4rem,9.5vw,9.8rem);line-height:.86;letter-spacing:-.085em;margin:0 0 42px;max-width:950px}
.hero h1 em,.standards h2 em,.contact h2 em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.07em}
.lead{max-width:610px;font-size:1.05rem;line-height:1.75;color:#44443f}
.button{display:inline-flex;align-items:center;gap:28px;margin-top:25px;padding:15px 18px;border:1px solid var(--ink);font:500 .7rem "DM Mono",monospace;text-transform:uppercase;letter-spacing:.08em}
.button span{font-size:1.2rem}
.button:hover{background:var(--ink);color:var(--paper)}
.hero-index{align-self:end;padding-bottom:18px}
.index-label{font:500 .65rem "DM Mono",monospace;letter-spacing:.14em;border-bottom:1px solid var(--ink);padding-bottom:10px}
.index-mark{font-size:clamp(4rem,8vw,8rem);font-weight:800;letter-spacing:-.1em;margin:18px 0}
.index-mark span{font-family:Georgia,serif;font-weight:400}
.hero-index p{max-width:170px;font-size:.82rem;line-height:1.5}
.intro{padding:100px 6vw;display:grid;grid-template-columns:80px 1fr 1fr;gap:30px;border-bottom:1px solid var(--line)}
.section-number{font:500 .7rem "DM Mono",monospace}
.intro h2{font-size:clamp(2.3rem,5vw,5rem);line-height:.98;letter-spacing:-.065em;margin:0;max-width:750px}
.intro h2 span{font-family:Georgia,serif;font-weight:400}
.intro-text{align-self:end;max-width:390px;color:var(--muted);line-height:1.75}
.approach{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.approach article{min-height:360px;padding:38px 6vw;border-right:1px solid var(--line);position:relative}
.approach article:last-child{border-right:0}
.card-no{font:500 .65rem "DM Mono",monospace;background:var(--acid);padding:5px 8px}
.approach h3{font-size:2rem;letter-spacing:-.05em;margin:90px 0 15px}
.approach p{color:var(--muted);line-height:1.7;max-width:290px}
.standards{padding:110px 6vw;display:grid;grid-template-columns:1fr 1fr;gap:8vw;border-bottom:1px solid var(--line)}
.standards h2{font-size:clamp(3rem,6vw,6rem);line-height:.9;letter-spacing:-.075em;margin:0}
.standard-list{border-top:1px solid var(--line)}
.standard-list div{display:grid;grid-template-columns:55px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.standard-list strong{font:500 .7rem "DM Mono",monospace}
.statement{background:var(--ink);color:var(--paper);padding:110px 6vw;min-height:400px;display:flex;flex-direction:column;justify-content:center}
.statement p{font-size:clamp(2rem,4.7vw,5rem);line-height:1.03;letter-spacing:-.06em;max-width:1050px;margin:0}
.statement span{font:500 .65rem "DM Mono",monospace;letter-spacing:.14em;margin-top:35px;color:#b8b8b1}
.contact{padding:105px 6vw;display:grid;grid-template-columns:1fr 1fr;gap:8vw}
.contact h2{font-size:clamp(3rem,6vw,6rem);line-height:.9;letter-spacing:-.075em;margin:0}
.contact-box{align-self:end;border-top:1px solid var(--ink);padding-top:22px}
.contact-box p{color:var(--muted);line-height:1.6;max-width:360px}
.contact-box a{font-size:1.1rem;font-weight:700;text-decoration:underline;text-underline-offset:5px}
footer{display:flex;justify-content:space-between;padding:24px 6vw;border-top:1px solid var(--line);font:500 .62rem "DM Mono",monospace;letter-spacing:.1em;text-transform:uppercase}
@media(max-width:800px){
  nav{display:none}
  .hero{min-height:auto;grid-template-columns:1fr;padding-top:70px}
  .hero:after{width:70vw;height:70vw;right:-38vw;top:45vw}
  .hero-index{margin-top:45px}
  .intro,.standards,.contact{grid-template-columns:1fr}
  .intro{gap:45px}
  .approach{grid-template-columns:1fr}
  .approach article{border-right:0;border-bottom:1px solid var(--line);min-height:290px}
  .approach article:last-child{border-bottom:0}
  .approach h3{margin-top:65px}
  footer{gap:15px;flex-wrap:wrap}
}