/* ============================================
   Base — Reset, Typography, Utilities
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--brand); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--brand-deep); }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

ul, ol { list-style: none; }

/* Headings — Oswald, heavy, uppercase, tight */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--leading-tight);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}
/* Fluid — no breakpoint step. See --display-* in tokens.css. */
h1 { font-size: var(--display-1); }
h2 { font-size: var(--display-2); }
h3 { font-size: var(--display-3); }
h4 { font-size: var(--text-xl); }

p + p { margin-top: var(--space-md); }
strong { font-weight: 700; }

/* Utilities */
.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-lg); }
.container--narrow { max-width: var(--max-width-narrow); }
.text-center { text-align: center; }
/* Centred block with a top gap — replaces repeated inline `style="margin: … auto 0"`. */
.flow-md { margin: var(--space-md) auto 0; }
.flow-lg { margin: var(--space-lg) auto 0; }

.section { padding: var(--space-4xl) 0; }
.section--alt { background: var(--cream); }
.section--dark { background: var(--ink); color: var(--text-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); }

.section__header { text-align: center; max-width: 760px; margin: 0 auto var(--space-2xl); }
.section__header p { margin-top: var(--space-md); color: var(--text-secondary); font-size: var(--text-lg); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-deep);
  font-size: var(--text-lg);
  margin-bottom: var(--space-sm);
}

.kw { color: var(--brand-deep); }

.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; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; padding: var(--space-sm) var(--space-md); background: var(--brand); color: var(--white); font-weight: 700; }
.skip-link:focus { left: 0; }

/* --bp-lap (900px): tighter vertical rhythm once the layout stops being a wide desktop. */
@media (max-width: 900px) {
  .section { padding: var(--space-3xl) 0; }
}

/* --bp-phone (640px): reclaim the gutters. */
@media (max-width: 640px) {
  .container { padding: 0 var(--space-md); }
}