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

:root { --bg:#f7f7f5; --ink:#111312; --muted:#6c706a; --line:#d8dbd5; --panel:#ecefea; --signal:#c4ff42; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--bg); color:var(--ink); font-family:'DM Sans',sans-serif; }
a { color:inherit; text-decoration:none; } .shell { width:min(1160px, calc(100% - 48px)); margin:auto; } .mono { font:500 11px/1.4 'DM Mono',monospace; letter-spacing:.06em; text-transform:uppercase; }
nav { height:92px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); } nav .name { font-weight:700; letter-spacing:-.04em; } nav a:last-child { padding:9px 13px; border:1px solid var(--ink); font-size:13px; font-weight:600; }
.hero { display:grid; grid-template-columns:1.08fr .92fr; gap:68px; align-items:end; padding:78px 0 72px; border-bottom:1px solid var(--line); } .kicker { color:var(--muted); } h1 { margin:17px 0 24px; font-size:clamp(4rem,9.5vw,8.1rem); line-height:.84; letter-spacing:-.092em; font-weight:700; } .summary { max-width:530px; color:var(--muted); font-size:20px; line-height:1.55; } .hero-links { display:flex; gap:23px; margin-top:31px; font-size:14px; font-weight:600; } .hero-links a { border-bottom:1px solid var(--ink); padding-bottom:4px; }
.portrait-box { position:relative; width:min(100%,400px); justify-self:end; padding:34px 34px 0 0; } .portrait-box::before { content:''; position:absolute; inset:0 0 34px 34px; background:var(--signal); } .portrait-box img { position:relative; display:block; width:100%; aspect-ratio:1; object-fit:cover; filter:grayscale(1) contrast(1.04); } .portrait-box span { position:relative; display:block; margin-top:11px; color:var(--muted); }
.section { display:grid; grid-template-columns:170px 1fr; gap:46px; padding:57px 0; border-bottom:1px solid var(--line); } .section-label { color:var(--muted); } .lead { max-width:780px; margin:-7px 0 0; font-size:clamp(1.8rem,3.4vw,3rem); line-height:1.18; letter-spacing:-.055em; }
.capabilities { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); } .capability { min-height:200px; padding:23px; background:var(--bg); } .capability .number { color:var(--muted); } .capability h3 { margin:43px 0 10px; font-size:18px; line-height:1.05; letter-spacing:-.045em; } .capability p { margin:0; color:var(--muted); font-size:14px; line-height:1.5; }
.details { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); } .detail { min-height:115px; padding:20px 23px; background:var(--bg); } .detail b { display:block; margin-top:19px; font-size:16px; letter-spacing:-.03em; } .detail span { color:var(--muted); }
.writing { border-top:1px solid var(--line); } .writing a { display:grid; grid-template-columns:42px minmax(0,1fr) 28px; gap:18px; align-items:baseline; padding:19px 0; border-bottom:1px solid var(--line); transition:padding .2s ease, color .2s ease; } .writing a:hover { color:var(--muted); padding-left:8px; } .writing b { font-size:clamp(1.05rem,1.7vw,1.38rem); letter-spacing:-.04em; } .writing span { color:var(--muted); } .writing i { justify-self:end; font-style:normal; font-size:19px; }
.contact { padding:94px 0 100px; text-align:center; } .contact h2 { max-width:800px; margin:15px auto 28px; font-size:clamp(3rem,6vw,6rem); line-height:.92; letter-spacing:-.085em; } .contact a { display:inline-block; padding:13px 19px; background:var(--ink); color:var(--bg); font-size:14px; font-weight:700; } footer { display:flex; justify-content:space-between; padding:20px 0 28px; color:var(--muted); border-top:1px solid var(--line); }
@media(max-width:760px) { .shell{width:min(100% - 40px,1160px)} nav{height:72px}.hero{grid-template-columns:1fr;gap:50px;padding:52px 0 58px}.portrait-box{justify-self:start;width:min(340px,85%)}.section{grid-template-columns:1fr;gap:24px;padding:42px 0}.capabilities{grid-template-columns:1fr}.details{grid-template-columns:1fr}.contact{padding:65px 0}footer{gap:12px;flex-direction:column} }