body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-dark);
  background: var(--white);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-dark);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(36px, 5.6vw, 56px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-size: clamp(28px, 4vw, 40px);   font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }
h3 { font-size: 22px; font-weight: 600; line-height: 1.3; }
h4 { font-size: 18px; font-weight: 600; line-height: 1.4; }

p { color: var(--text-mid); }
.body-lg { font-size: 18px; line-height: 1.6; }
.caption { font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--text-muted); }

a { color: var(--brand-blue); transition: color 200ms var(--ease); }
a:hover { color: var(--brand-blue-deep); }

::selection { background: var(--brand-cyan); color: var(--white); }

/* Container utility */
.container {
  width: 100%;
  max-width: var(--container-lg);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}
.container--xl { max-width: var(--container-xl); }
.container--md { max-width: var(--container-md); }

/* Section rhythm */
section { padding-block: var(--space-4xl); }
@media (max-width: 768px) {
  section { padding-block: var(--space-2xl); }
}

.section--alt { background: var(--off-white); }
.section--dark { background: var(--brand-navy); color: var(--white); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); }
.section--dark p { color: rgba(255, 255, 255, 0.78); }

/* Section heading pattern (eyebrow + title) */
.section-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin-bottom: var(--space-md);
}
.section--dark .section-eyebrow { color: var(--brand-cyan); }

.section-title { margin-bottom: var(--space-md); }
.section-lede {
  max-width: 640px;
  font-size: 18px;
  margin-bottom: var(--space-2xl);
}
.section-header { margin-bottom: var(--space-3xl); }

/* Accessibility */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
:focus-visible {
  outline: 3px solid var(--brand-cyan);
  outline-offset: 2px;
  border-radius: 4px;
}