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

:root{
  --bg:#f5f4ef; --paper:#fbfaf7; --ink:#151616; --muted:#6e716f;
  --line:#deded7; --dark:#151817; --lime:#d7f36b; --blue:#cbd8ff;
  --max:1180px; --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"DM Sans",sans-serif;line-height:1.55}
a{color:inherit;text-decoration:none}
.container{width:min(var(--max),calc(100% - 48px));margin:auto}
.nav{position:sticky;top:0;z-index:50;background:rgba(245,244,239,.82);backdrop-filter:blur(18px);border-bottom:1px solid rgba(21,22,22,.08)}
.navin{height:74px;display:flex;align-items:center;justify-content:space-between}
.logo{font-size:16px;font-weight:700;letter-spacing:-.04em}
.logo i{font-style:normal;color:#829900}
.links{display:flex;gap:28px;align-items:center;font-size:13px;font-weight:600;color:#4f5350}
.links a:hover{color:var(--ink)}
.navcta{background:var(--ink);color:#fff;padding:10px 15px;border-radius:999px}
.hero{padding:110px 0 90px;min-height:690px;display:flex;align-items:center}
.kicker{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#737873}
.hero h1{font-size:clamp(58px,8.2vw,112px);line-height:.88;letter-spacing:-.075em;font-weight:600;max-width:1050px;margin:24px 0}
.hero h1 .serif{font-family:"Instrument Serif",serif;font-weight:400;font-style:italic;letter-spacing:-.045em}
.hero h1 .soft{color:#747a74}
.hero p{font-size:19px;color:var(--muted);max-width:650px;margin:0}
.hero-actions{display:flex;gap:10px;margin-top:32px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 17px;border:1px solid var(--line);border-radius:999px;font-size:13px;font-weight:700;transition:.2s}
.btn:hover{transform:translateY(-2px)}
.btn.dark{background:var(--ink);color:white;border-color:var(--ink)}
.btn.light{background:transparent}
.hero-mark{margin-top:70px;display:flex;align-items:center;gap:12px;color:#6b706c;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.hero-mark:before{content:"";width:42px;height:1px;background:#aeb2ac}
section{padding:100px 0;border-top:1px solid var(--line)}
.section-label{font-size:11px;text-transform:uppercase;letter-spacing:.18em;font-weight:700;color:#7b7f7b}
.section-title{font-size:46px;line-height:1.02;letter-spacing:-.055em;font-weight:600;margin:10px 0 0;max-width:680px}
.section-copy{color:var(--muted);max-width:560px}
.intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:90px;align-items:end}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:45px}
.stat{background:var(--paper);padding:24px}.stat b{display:block;font-size:30px;letter-spacing:-.05em}.stat span{font-size:12px;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:44px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px;min-height:265px;display:flex;flex-direction:column;justify-content:space-between;transition:.25s}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 50px rgba(21,22,22,.06)}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:15px}
.pill{font-size:10px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;padding:6px 9px;border-radius:999px;background:#ecece6;color:#626661}
.pill.live{background:var(--lime);color:#263000}
.card-number{font-size:12px;color:#999d98}
.card h3{font-size:29px;line-height:1.05;letter-spacing:-.045em;margin:35px 0 10px}
.card p{color:var(--muted);font-size:14px;max-width:500px;margin:0}
.card-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:26px;font-size:12px;color:#777b76}
.arrow{font-size:18px}
.services{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden;margin-top:45px}
.service{background:var(--paper);padding:25px;min-height:210px}
.service b{font-size:18px;letter-spacing:-.03em}.service p{font-size:13px;color:var(--muted);margin-top:16px}
.timeline{margin-top:45px;border-top:1px solid var(--line)}
.role{display:grid;grid-template-columns:150px 1fr 180px;gap:30px;padding:26px 0;border-bottom:1px solid var(--line)}
.role .year{font-size:12px;color:var(--muted)}.role h3{margin:0;font-size:19px;letter-spacing:-.025em}.role p{margin:4px 0 0;color:var(--muted);font-size:13px}.role .company{text-align:right;font-size:12px;color:#777b76}
.now{background:var(--dark);color:white;border-radius:28px;padding:50px}
.now .section-label{color:#9da39e}.now-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-top:35px}.now h2{font-size:42px;line-height:1;letter-spacing:-.055em;margin:0}.now p{color:#aeb4ae}.now-list{display:grid;gap:18px}.now-item{border-bottom:1px solid #353b38;padding-bottom:18px}.now-item b{display:block;font-size:14px}.now-item span{color:#9ca39e;font-size:13px}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}.about-copy{font-size:22px;line-height:1.35;letter-spacing:-.025em}.interests{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}.interest{border:1px solid var(--line);border-radius:999px;padding:9px 13px;font-size:12px;background:var(--paper)}
.contact{background:#dfe8b0;border-top:0}.contact h2{font-size:clamp(48px,7vw,86px);line-height:.9;letter-spacing:-.07em;margin:10px 0 25px;max-width:800px}.email{font-size:18px;text-decoration:underline;text-underline-offset:5px}
.footer{padding:35px 0}.footerin{display:flex;justify-content:space-between;color:#777b76;font-size:12px}.footer-links{display:flex;gap:20px}
@media(max-width:850px){
 .links{gap:14px}.links a:not(.navcta){display:none}
 .hero{padding:80px 0 65px;min-height:auto}.hero h1{font-size:clamp(54px,15vw,86px)}
 .intro-grid,.about-grid,.now-grid{grid-template-columns:1fr;gap:35px}
 .cards{grid-template-columns:1fr}.services{grid-template-columns:1fr 1fr}
 .role{grid-template-columns:1fr;gap:6px}.role .company{text-align:left}
 .stats{grid-template-columns:1fr}
}
@media(max-width:520px){
 .container{width:min(var(--max),calc(100% - 30px))}
 .services{grid-template-columns:1fr}.section-title{font-size:38px}.now{padding:30px 22px}
 .footerin{display:block}.footer-links{margin-top:12px}
}