* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: #f6f7f6;
  color: #18221f;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
main { max-width: 1120px; margin: 0 auto; padding: 28px 32px 80px; }
nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0 24px; border-bottom: 1px solid #d9dddb;
}
nav strong { font-size: 20px; letter-spacing: -0.03em; }
nav span, .eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #68736f;
}
.hero { max-width: 820px; padding: 120px 0 60px; }
.eyebrow { margin: 0 0 22px; color: #356e66; }
h1 {
  margin: 0; max-width: 760px; font-size: clamp(48px, 7vw, 88px);
  line-height: .98; letter-spacing: -0.055em; font-weight: 650;
}
.lead {
  max-width: 650px; margin: 34px 0 0; font-size: clamp(19px, 2vw, 24px);
  line-height: 1.5; color: #53605c;
}
.rule { width: 100%; height: 1px; background: #d9dddb; margin: 64px 0 24px; }
.principle { margin: 0; max-width: 650px; font-size: 15px; line-height: 1.6; color: #68736f; }
@media (max-width: 640px) {
  main { padding: 20px 20px 56px; }
  .hero { padding-top: 84px; }
  h1 { font-size: 52px; }
}