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

:root{--ink:#101419;--muted:#66707a;--line:#dfe3e7;--paper:#f7f8f6;--white:#fff;--accent:#b9ff5b;--dark:#11171d;--max:1180px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif;line-height:1.65}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;background:rgba(247,248,246,.94);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.brand{font-family:"Space Grotesk";font-weight:700;font-size:1.15rem;color:var(--ink);text-decoration:none}.nav nav{display:flex;gap:25px}.nav nav a{font-size:.9rem;color:var(--muted);text-decoration:none}.nav nav a:hover{color:var(--ink)}
.hero{min-height:680px;max-width:var(--max);margin:auto;padding:100px 5vw 80px;display:grid;grid-template-columns:1.55fr .75fr;gap:80px;align-items:center}
.eyebrow{font-size:.73rem;letter-spacing:.18em;font-weight:700;color:#77818a;margin:0 0 18px}
h1,h2,h3{font-family:"Space Grotesk";line-height:1.08;margin:0 0 20px}h1{font-size:clamp(3rem,7vw,6.5rem);letter-spacing:-.065em;max-width:850px}h2{font-size:clamp(2.2rem,4vw,4rem);letter-spacing:-.045em}h3{font-size:1.35rem}.lead{font-size:1.2rem;color:var(--muted);max-width:690px;margin:30px 0}
.actions{display:flex;gap:12px;flex-wrap:wrap}.button{padding:13px 20px;border-radius:4px;text-decoration:none;font-weight:700;font-size:.9rem}.primary{background:var(--ink);color:var(--white)}.secondary{border:1px solid var(--ink);color:var(--ink)}
.hero-card{background:var(--dark);color:white;padding:42px;border-radius:8px;display:flex;flex-direction:column;gap:14px;min-height:280px;justify-content:flex-end;box-shadow:0 25px 60px rgba(0,0,0,.12)}.hero-card strong{font:600 2rem "Space Grotesk"}.hero-card span:last-child{color:#aab2b9}.card-label{font-size:.7rem;letter-spacing:.16em;color:var(--accent);font-weight:700}
.section{max-width:var(--max);margin:auto;padding:120px 5vw}.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;border-top:1px solid var(--line)}.body-copy{font-size:1.08rem;color:#46505a;max-width:620px}.body-copy p{margin-top:0;margin-bottom:22px}
.dark{max-width:none;background:var(--dark);color:white;padding-left:max(5vw,calc((100% - 1080px)/2));padding-right:max(5vw,calc((100% - 1080px)/2))}.dark .eyebrow{color:var(--accent)}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#394149;margin-top:45px}.grid article{background:var(--dark);padding:32px;min-height:270px}.grid span{color:var(--accent);font-weight:700;font-size:.8rem}.grid p{color:#aab2b9}
.timeline{border-top:1px solid var(--line);margin-top:45px}.timeline>div{display:grid;grid-template-columns:220px 1fr;gap:40px;padding:34px 0;border-bottom:1px solid var(--line)}.year{font-size:.72rem;letter-spacing:.14em;font-weight:700;color:#77818a}.timeline p{color:var(--muted);margin:0;max-width:700px}
.projects{background:white;max-width:none;padding-left:max(5vw,calc((100% - 1080px)/2));padding-right:max(5vw,calc((100% - 1080px)/2))}.project-grid,.articles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:45px}.project-grid article,.articles article{border:1px solid var(--line);padding:32px;background:var(--paper)}.project-grid p,.articles p{color:var(--muted)}.tag{font-size:.7rem!important;letter-spacing:.15em;font-weight:700}
.contact{background:var(--accent);padding:110px 5vw;text-align:center}.contact h2{max-width:700px;margin:0 auto 20px}.contact p:not(.eyebrow){max-width:600px;margin:0 auto 18px}.email{font-weight:700;color:var(--ink);font-size:1.1rem}
footer{display:flex;justify-content:space-between;padding:28px 5vw;background:var(--dark);color:#9da6ae;font-size:.8rem}

@media(max-width:850px){.nav{padding:0 22px}.nav nav{display:none}.hero{grid-template-columns:1fr;gap:45px;padding-top:70px}.section{padding:80px 22px}.split{grid-template-columns:1fr;gap:25px}.grid,.project-grid,.articles{grid-template-columns:1fr 1fr}.timeline>div{grid-template-columns:1fr;gap:10px}.dark,.projects{padding-left:22px;padding-right:22px}}
@media(max-width:560px){.grid,.project-grid,.articles{grid-template-columns:1fr}h1{font-size:3.25rem}.hero{min-height:auto}.hero-card{min-height:220px}footer{flex-direction:column;gap:8px}}