/* ——— Type system tuned for Source Serif 4 ——— */
:root{
  --bg: #ffffff;
  --fg: #121212;
  --muted: #6b7280;
  --accent: #0f172a;
  --accent-2: #2563eb;
  --maxw: 1050px;
  --measure: 68ch; /* comfortable line length */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--fg);
  background:var(--bg);

  font-family:"Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;
  font-size:clamp(17px, 1.1vw + 0.2rem, 19px);
  line-height:1.6;
  font-optical-sizing:auto;
  font-kerning:normal;
  font-variant-ligatures:common-ligatures;
  font-variant-numeric:proportional-nums oldstyle-nums;
}

/* Reading measure */
p, .bullets, .lead{max-width:var(--measure)}

h1,h2,h3{line-height:1.2; margin:0 0 .6rem}
h1{
  font-weight:700;
  font-size:clamp(32px, 3.8vw, 46px);
  letter-spacing:-0.006em;
}
h2{
  font-weight:600;
  font-size:clamp(24px, 2.8vw, 34px);
  letter-spacing:-0.004em;
}
h3{
  font-weight:600;
  font-size:clamp(18px, 1.6vw, 20px);
  letter-spacing:-0.002em;
}
h3, .sc{font-variant-caps:small-caps}

.lead{font-size:clamp(18px, 2vw, 21px); color:#1f2937}

.container{max-width:var(--maxw); margin-inline:auto; padding:0 20px}
.narrow{max-width:760px}
.section{padding:72px 0}
.section.alt{background:#f7fafc}
.subtle{color:var(--muted)}
.bullets{padding-left:1.2rem}
.bullets li{margin:.45rem 0}
.bullets.long li{margin:.35rem 0}
.note{margin-top:1rem; color:var(--muted)}
.fineprint{color:var(--muted); font-size:.9rem}

a{color:var(--accent-2); text-decoration:none}
a:hover{text-decoration:underline}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid #e5e7eb;
}
.header-inner{display:flex; align-items:center; gap:16px; height:64px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--fg)}
.brand img{height:28px}
.brand-fallback{font-weight:800; letter-spacing:.3px}

.site-nav ul{display:flex; gap:18px; margin:0; padding:0; list-style:none}
.site-nav a{color:var(--fg); padding:6px 2px; border-bottom:2px solid transparent}
.site-nav a.active{border-color:var(--accent-2)}
.nav-toggle{display:none; background:none; border:0; font-size:20px}

/* Hero */
.hero{padding:96px 0 72px; background:linear-gradient(180deg,#fff 0%,#fafafa 100%)}
.hero-actions{display:flex; gap:12px; margin-top:18px}
.btn{
  display:inline-block;
  padding:10px 16px; border-radius:10px;
  background:var(--accent-2); color:#fff; font-weight:700;
}
.btn:hover{filter:brightness(.95)}
.btn.btn-outline{background:#fff; color:var(--accent-2); border:2px solid var(--accent-2)}

/* About */
.split{display:grid; grid-template-columns:320px 1fr; gap:28px; align-items:start}
.portrait{width:67%; border-radius:12px; display:block}

/* Clients */
.logo-grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:18px; align-items:center; justify-items:center;
}
.logo-grid img{width:100%; height:auto; max-height:70px; object-fit:contain; filter:grayscale(15%)}

/* Contact */
.contact address{font-style:normal; line-height:1.7; margin:10px 0 6px}
.contact-icon{width:64px; height:64px; opacity:.6; margin:8px 0}
.social{display:flex; gap:16px; list-style:none; padding:0}

/* Progressive enhancements */
@supports (text-wrap: balance){
  h1, h2 { text-wrap: balance; }
}

@media (max-width: 900px){
  .split{grid-template-columns:1fr}
  .logo-grid{grid-template-columns:repeat(3, minmax(0,1fr))}
}
@media (max-width: 640px){
  p, li { hyphens:auto }
  .site-nav{position:fixed; inset:64px 0 auto 0; background:#fff; border-bottom:1px solid #eee; transform:translateY(-110%); transition:.25s}
  .site-nav.open{transform:translateY(0)}
  .site-nav ul{flex-direction:column; padding:14px}
  .nav-toggle{display:block; margin-left:auto}
}