*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-dark);
  background: var(--bg-cream);
  overflow-x: hidden;
}

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

button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent-terracotta);
  outline-offset: 2px;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

::selection { background: var(--accent-terracotta); color: var(--text-white); }

main { display: block; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad-mobile);
}
@media (min-width: 900px) {
  .container { padding: 0 var(--container-pad-desktop); }
}

.section { padding: 48px 20px; }
@media (min-width: 900px) {
  .section { padding: 100px 80px; }
}

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent-terracotta);
}
.eyebrow.on-dark { color: var(--accent-terracotta-light); }

.lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 64ch;
}
.lede.on-dark { color: var(--text-light); }

.h1 { font-family: var(--font-heading); font-size: clamp(36px, 7vw, 56px); line-height: 1.1; font-weight: 500; }
.h2 { font-family: var(--font-heading); font-size: clamp(28px, 4.5vw, 40px); line-height: 1.2; font-weight: 600; }
.h3 { font-family: var(--font-heading); font-size: clamp(22px, 3vw, 28px); line-height: 1.25; font-weight: 600; }
.h4 { font-family: var(--font-heading); font-size: 20px; line-height: 1.3; font-weight: 600; }

.text-light { color: var(--text-light); }
.text-white { color: var(--text-white); }
.text-muted { color: var(--text-muted); }

.section--dark { background: var(--bg-navy); color: var(--text-light); }
.section--sand { background: var(--bg-sand); }
.section--cream { background: var(--bg-cream); }

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

[data-reveal] { will-change: transform, opacity; }
html.js-ready [data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(24px); }
html.js-ready [data-reveal].is-visible { opacity: 1; transform: translateY(0); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

.icon { display: inline-flex; align-items: center; justify-content: center; }
.icon svg { width: 1em; height: 1em; }