:root {
  --ink: #16201f;
  --muted: #5b6766;
  --line: #e3e8e7;
  --bg: #fbfcfc;
  --accent: #1f5f5b;
  --accent-soft: #e8f1f0;
  --max: 68rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: var(--accent); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; }

header { border-bottom: 1px solid var(--line); }
header .wrap { display: flex; align-items: center; justify-content: space-between; height: 4.5rem; }
.brand { font-weight: 650; font-size: 1.15rem; letter-spacing: .02em; color: var(--ink); text-decoration: none; }
.brand span { color: var(--accent); }
nav a { margin-left: 1.75rem; color: var(--muted); text-decoration: none; font-size: .95rem; }
nav a:hover, nav a[aria-current="page"] { color: var(--ink); }

.hero { padding-top: 7rem; padding-bottom: 5rem; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.12; font-weight: 650; letter-spacing: -.02em; margin: 0 0 1.5rem; max-width: 18ch; }
.lead { font-size: 1.2rem; color: var(--muted); max-width: 40rem; margin: 0 0 2.5rem; }
.button { display: inline-block; background: var(--accent); color: #fff; text-decoration: none; padding: .8rem 1.4rem; border-radius: .4rem; font-weight: 550; }
.button:hover { background: #174a47; }

section { padding: 4.5rem 0; border-top: 1px solid var(--line); }
h2 { font-size: 1.6rem; font-weight: 650; letter-spacing: -.01em; margin: 0 0 .75rem; }
.section-lead { color: var(--muted); max-width: 40rem; margin: 0 0 2.5rem; }

.grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.card { background: #fff; border: 1px solid var(--line); border-radius: .6rem; padding: 1.6rem; }
.card h3 { margin: 0 0 .5rem; font-size: 1.05rem; font-weight: 620; }
.card p { margin: 0; color: var(--muted); font-size: .97rem; }

.commitments { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.commitments li { padding-left: 1.6rem; position: relative; }
.commitments li::before { content: ""; position: absolute; left: 0; top: .55rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent); }

.panel { background: var(--accent-soft); border-radius: .6rem; padding: 2.5rem; }
.email { font-size: 1.4rem; font-weight: 600; }

footer { border-top: 1px solid var(--line); padding: 2.5rem 0; color: var(--muted); font-size: .88rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; }
footer a { color: var(--muted); }

@media (max-width: 40rem) {
  header .wrap { height: auto; padding-top: 1rem; padding-bottom: 1rem; flex-direction: column; gap: .5rem; }
  nav a { margin: 0 .75rem; }
  .hero { padding-top: 4rem; padding-bottom: 3rem; }
}