/* =============================================================================
   Base reset + typography. Anything that's "site-wide default" lives here.
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--c-ink);
  background: var(--c-bg);
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: 1.15;
  color: var(--c-ink);
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { color: var(--c-ink-muted); }

a { color: var(--c-navy); text-decoration: none; }
a:hover { color: var(--c-navy-dark); text-decoration: underline; }

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

button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}

/* Accessible focus ring — visible on every focusable element, not just :focus
   (which Safari sometimes hides on mouse click). */
:focus-visible {
  outline: 3px solid var(--c-orange);
  outline-offset: 2px;
  border-radius: 4px;
}

/* "Skip to main content" link — invisible until focused (keyboard users). */
.skip-link {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 0.5rem 0.9rem;
  background: var(--c-navy);
  color: #fff;
  border-radius: var(--r-sm);
  transform: translateY(-200%);
  transition: transform 0.2s var(--ease-out);
  z-index: 1000;
}
.skip-link:focus { transform: translateY(0); color: #fff; }

/* Page container helper. */
.container { width: var(--container); margin-inline: auto; }

/* Tiny eyebrow label used above section headings. */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-orange-dark);
}
.eyebrow--light { color: #fdba74; }

/* Section heading block — common pattern across pages. */
.section-head { max-width: 720px; margin: 0 auto var(--s-7); text-align: center; }
/* Eyebrow sits on its own line above the title (both are inline-block, which
   would otherwise let them share a line in the centered head). */
.section-head .eyebrow { display: block; }
.section-head__title { margin-top: var(--s-2); }
.section-head__lede { margin-top: var(--s-3); font-size: var(--fs-lg); color: var(--c-ink-muted); }
.section-cta { text-align: center; margin-top: var(--s-7); }