/* ==========================================================================
   Base — reset, elements, typography
   ========================================================================== */

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

/* Ensure [hidden] always wins over component display rules (e.g. .card{display:flex}). */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* guard against accidental horizontal scroll */
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
/* Line icons are stroke-based (fill:none, stroke:currentColor). Do NOT force a
   global svg fill — it turns outline icons into solid blobs. */
.gg-icon { width: 24px; height: 24px; flex: none; fill: none; }

a { color: var(--c-blue); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--c-blue-600); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--c-navy);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-900); }
h2 { font-size: var(--fs-800); }
h3 { font-size: var(--fs-700); }
h4 { font-size: var(--fs-600); }
p { text-wrap: pretty; }

ul, ol { padding-left: 1.25em; }
strong, b { font-weight: var(--fw-semibold); }
blockquote { border-left: 4px solid var(--c-aqua); padding-left: var(--sp-4); color: var(--c-ink-soft); font-style: italic; }
hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--sp-6) 0; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }

/* Selection */
::selection { background: var(--c-aqua); color: var(--c-navy); }

/* Skip link */
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 1000;
  background: var(--c-navy); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 8px; color: #fff; }

/* Screen-reader only */
.screen-reader-text, .sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}