:root {
  color-scheme: light;
  --blue: #1a36c4;
  --blue-deep: #142aa0;
  --ink: #0e0f14;
  --text: #16171d;
  --muted: #5c5f6b;
  --on-blue-muted: #d3d9f5;
  --bg: #ffffff;
  --rule: #e2e3e8;
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 18px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 48px; }
a { color: inherit; text-underline-offset: 4px; }
h1, h2, h3, p { margin: 0; padding: 0; }

/* Navigation */
.nav { background: var(--blue); color: #fff; }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 88px; }
.brand { font: 500 26px/1 var(--serif); letter-spacing: -0.01em; text-decoration: none; }
.links { display: flex; gap: 36px; font-size: 16px; }
.links a { text-decoration: none; }
.links a:hover { text-decoration: underline; }

/* Hero */
.hero { background: var(--blue); color: #fff; overflow: hidden; }
.hero .wrap { padding-top: clamp(48px, 7vw, 96px); }
.hero h1 { font: 400 clamp(44px, 6vw, 76px)/1.08 var(--serif); letter-spacing: -0.02em; }
.hero p { max-width: 30em; margin-top: 22px; font-size: clamp(19px, 2vw, 22px); line-height: 1.5; color: var(--on-blue-muted); }
.wave { display: block; width: 100%; height: clamp(130px, 19vw, 300px); margin-top: clamp(16px, 3vw, 40px); object-fit: cover; object-position: right bottom; }

/* Sections */
.section { padding: clamp(72px, 9vw, 120px) 0; }
.section h2 { font: 400 clamp(30px, 3.4vw, 42px)/1.15 var(--serif); letter-spacing: -0.012em; }

.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: clamp(36px, 4vw, 56px); }
.service { padding-top: 20px; border-top: 1px solid var(--ink); }
.service h3 { font: 400 26px/1.2 var(--serif); letter-spacing: -0.008em; }
.service p { margin-top: 12px; color: var(--muted); }

.who { padding-top: 0; }
.who .wrap, .contact .wrap { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; }
.bio { max-width: 38em; }
.bio p { color: var(--muted); }
.bio p + p { margin-top: 16px; }
.bio a { color: var(--blue); font-weight: 500; }

/* Contact */
.contact { background: var(--blue); color: #fff; padding: clamp(40px, 4vw, 56px) 0; }
.contact h2 { font-size: 26px; line-height: 1.3; }
.contact .mail { font-size: 18px; }
.contact .place { margin-top: 2px; color: var(--on-blue-muted); }

/* Footer */
footer { background: var(--blue-deep); color: var(--on-blue-muted); padding: 26px 0; font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

/* Legal page */
.legal { max-width: 760px; padding: 72px 48px 104px; margin: 0 auto; }
.legal h1 { font: 400 46px/1.1 var(--serif); letter-spacing: -0.016em; }
.legal h2 { margin-top: 36px; font-size: 20px; font-weight: 600; }
.legal p { margin-top: 12px; color: var(--muted); }
.legal .updated { font-size: 15px; }

@media (max-width: 860px) {
  .services { grid-template-columns: 1fr; gap: 32px; }
  .who .wrap, .contact .wrap { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .wrap { padding: 0 20px; }
  .nav .wrap { height: 76px; }
  .links a:not(:last-child) { display: none; }
  .legal { padding: 56px 20px 80px; }
}