/* ===== Reset & base ===== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: hidden; }
h1, h2, h3, h4, p, a { overflow-wrap: break-word; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: .005em;
  color: var(--navy);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; }
p  { color: var(--muted); }

::selection { background: var(--gold); color: var(--navy); }

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

/* ===== Layout helpers ===== */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--space-7); }
.section--tight { padding-block: var(--space-6); }
.section--cream { background: var(--cream); }
.section--navy { background: var(--navy); color: var(--white); }
.section--navy h2, .section--navy h3 { color: var(--white); }
.section--navy p { color: rgba(255,255,255,.72); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display: block; max-width: 100%;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--gold); display: inline-block; vertical-align: middle; margin-right: .7rem; }
.section--navy .eyebrow { color: var(--gold-soft); }

.lead { font-size: var(--fs-lead); color: var(--muted); }
.section--navy .lead { color: rgba(255,255,255,.8); }

.center { text-align: center; }
.center .eyebrow::before { display: none; }
.center .eyebrow { justify-content: center; }

.measure { max-width: 60ch; }
.measure-narrow { max-width: 44ch; }

/* utility reveal (JS toggles .is-in) */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
