/* ==========================================================================
   BASE — reset, typography, layout primitives, accessibility
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--hivis-ink);
  background: var(--hivis-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* Heading utilities */
.h-display, .h1, .h2 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--hivis-navy);
}
.h-display { font-size: var(--fs-display); line-height: 0.95; }
.h1        { font-size: var(--fs-h1);      line-height: 1.05; }
.h2        { font-size: var(--fs-h2);      line-height: 1.15; font-weight: 700; }
.h3 { font-family: var(--font-body); font-size: var(--fs-h3); line-height: 1.25; font-weight: 600; color: var(--hivis-navy); }
.eyebrow { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-label); letter-spacing: 0.22em; text-transform: uppercase; }
.lede { font-size: 1.125rem; line-height: 1.55; color: #333; max-width: 62ch; }
.small { font-size: var(--fs-small); }

/* Gradient text utility */
.u-grad-text {
  background: var(--hivis-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Container + grid */
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter-x); }
.section   { padding-block: clamp(3rem, 7vw, 6rem); }

/* Skip link — keyboard accessibility */
.skip-link {
  position: absolute; top: -40px; left: 1rem;
  background: var(--hivis-navy); color: var(--hivis-cream);
  padding: 0.6rem 1rem; border-radius: var(--radius-sm);
  font-family: var(--font-display); font-weight: 700; font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.12em;
  z-index: 200; transition: top 0.2s ease;
}
.skip-link:focus-visible { top: 0.75rem; }

/* Focus-visible ring — keyboard users only */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--hivis-yellow);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Reveal-on-scroll baseline */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

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