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

:root {
  --bg: #f5f4f0;
  --ink: #121212;
  --muted: #686762;
  --line: #d9d7d0;
  --card: #ffffff;
  --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:"DM Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.55; }
a { color:inherit; }
.site-header { max-width:var(--max); margin:0 auto; padding:28px; display:flex; justify-content:space-between; align-items:center; }
.brand { width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--ink); border-radius:50%; text-decoration:none; font-family:"Manrope",sans-serif; font-weight:700; letter-spacing:-0.03em; }
nav { display:flex; gap:26px; font-size:14px; }
nav a { text-decoration:none; color:var(--muted); }
nav a:hover { color:var(--ink); }
main, footer { max-width:var(--max); margin:0 auto; padding-left:28px; padding-right:28px; }
.hero { min-height:72vh; display:flex; flex-direction:column; justify-content:center; padding:80px 0 70px; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(260px,.75fr); gap:64px; align-items:center; }
.hero-content { min-width:0; }
.hero-portrait { margin:0; justify-self:end; width:min(100%,360px); }
.hero-portrait img { display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; object-position:center 28%; border-radius:22px; border:1px solid #e2dfd7; box-shadow:0 18px 60px rgba(18,18,18,.10); }
.eyebrow, .section-kicker, .card-label, .work-item span { text-transform:uppercase; letter-spacing:.13em; font-size:12px; font-weight:600; color:var(--muted); }
h1,h2,h3 { font-family:"Manrope",sans-serif; line-height:1.05; letter-spacing:-0.045em; margin:0; }
h1 { margin-top:18px; font-size:clamp(58px,8.5vw,118px); max-width:820px; }
.hero-copy { max-width:720px; font-size:clamp(21px,2.4vw,32px); line-height:1.3; margin:32px 0; letter-spacing:-0.025em; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 20px; border-radius:999px; text-decoration:none; font-weight:600; font-size:14px; border:1px solid var(--ink); }
.button-primary { background:var(--ink); color:white; }
.button-secondary { background:transparent; }
.signal { margin-top:76px; border-top:1px solid var(--line); padding-top:22px; display:flex; justify-content:space-between; gap:20px; font-size:15px; }
.section { border-top:1px solid var(--line); padding:90px 0; }
.section-kicker { margin:0 0 42px; }
.split { display:grid; grid-template-columns:1.05fr 1fr; gap:80px; }
h2 { font-size:clamp(38px,5vw,68px); max-width:650px; }
.body-copy { font-size:18px; color:#363532; }
.body-copy p:first-child { margin-top:0; }
.cards { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.card { min-height:330px; background:var(--card); padding:32px; display:flex; flex-direction:column; justify-content:space-between; border-radius:18px; border:1px solid #e8e6df; }
.card.featured { grid-column:1 / -1; min-height:380px; }
.card h3 { margin-top:14px; font-size:clamp(31px,4vw,50px); }
.card p:not(.card-label) { color:var(--muted); max-width:650px; }
.card a, .card > span { font-size:14px; font-weight:600; text-decoration:none; }
.work-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.work-item { border-top:1px solid var(--ink); padding-top:22px; }
.work-item h3 { font-size:28px; margin:16px 0 10px; }
.work-item p { color:var(--muted); margin:0; }
.contact h2 { margin-bottom:24px; }
.signature-line { color:var(--ink) !important; font-family:"Manrope",sans-serif; font-size:clamp(22px,2.4vw,32px) !important; line-height:1.3; letter-spacing:-0.02em; max-width:820px; margin:0 0 18px !important; font-weight:600; }
.contact p { color:var(--muted); font-size:18px; margin-bottom:30px; }
footer { border-top:1px solid var(--line); padding-top:28px; padding-bottom:45px; display:flex; justify-content:space-between; color:var(--muted); font-size:13px; }
@media (max-width:900px) {
  .hero-grid { grid-template-columns:1fr; gap:42px; }
  .hero-portrait { justify-self:start; width:min(72vw,340px); }
  h1 { font-size:clamp(58px,13vw,96px); }
}
@media (max-width:780px) {
  .site-header { padding-top:20px; }
  nav { gap:14px; }
  nav a:nth-child(3) { display:none; }
  .hero { min-height:auto; padding-top:70px; }
  .hero-portrait { width:min(78vw,320px); }
  .signal { flex-direction:column; }
  .split,.cards,.work-grid { grid-template-columns:1fr; }
  .card.featured { grid-column:auto; min-height:350px; }
  .split { gap:32px; }
  .section { padding:70px 0; }
  footer { flex-direction:column; gap:8px; }
}