/* =========================================================================
   BASE — reset, page background, typography defaults, layout primitives
   Load order: tokens.css -> base.css -> components.css
   ========================================================================= */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  color: var(--slate);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* ---- Layout primitives ---- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 96px 0; }
.section-alt { background: var(--white); }
.section-tint { background: var(--mint); }
@media (max-width: 768px) {
  .section { padding: 64px 0; }
}

.section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.eyebrow {
  display: inline-block;
  color: var(--teal);
  background: var(--teal-light);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}
.section-head h2 {
  color: var(--navy);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  margin: 0 0 14px;
  font-weight: 700;
}
.section-head p { color: var(--slate-light); font-size: 1.05rem; }

/* ---- Accessibility ---- */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 2000;
  background: var(--navy); color: var(--white); padding: 12px 20px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* ---- Decorative background blobs (used behind hero sections) ---- */
.blob {
  position: absolute; border-radius: 50%; filter: blur(10px); opacity: 0.35; z-index: -1;
}
.blob-1 { width: 340px; height: 340px; background: var(--teal); top: -120px; right: -100px; }
.blob-2 { width: 260px; height: 260px; background: var(--blue); bottom: -80px; left: -80px; opacity: 0.2; }

/* ---- Scroll-reveal animation ----
   Add class="reveal" to any element; js/main.js's initScrollReveal()
   adds "in-view" via IntersectionObserver when it enters the viewport. */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* Stagger children of grids (2nd/3rd/4th item animate slightly later) */
.grid-3 .reveal:nth-child(2), .grid-4 .reveal:nth-child(2) { transition-delay: 0.08s; }
.grid-3 .reveal:nth-child(3), .grid-4 .reveal:nth-child(3) { transition-delay: 0.16s; }
.grid-4 .reveal:nth-child(4) { transition-delay: 0.24s; }