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

*,*::before,*::after{ box-sizing:border-box; }
html{ 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; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-md);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body.no-scroll{ overflow:hidden; height:100vh; }

h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.02em;
  margin:0 0 var(--sp-sm);
  color:var(--text);
}
h1{ font-size:var(--fs-9xl); }
h2{ font-size:var(--fs-7xl); }
h3{ font-size:var(--fs-6xl); }
h4{ font-size:var(--fs-5xl); font-weight:600; }
p{ margin:0 0 var(--sp-sm); color:var(--text-muted); }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--accent); color:var(--accent-ink); }

/* focus visibility (a11y) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--sp-md);
}
@media (max-width:640px){ .container{ padding-inline:var(--sp-sm); } }

.section{ padding-block:var(--sp-2xl); position:relative; }
@media (max-width:768px){ .section{ padding-block:var(--sp-xl); } }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:var(--sp-sm);
}
.eyebrow::before{
  content:''; width:20px; height:1px; background:var(--accent);
}

/* ---------- Article-style centered section intros ----------
   When an eyebrow + heading sit directly inside a .container (not paired
   with a side-by-side CTA button or a 2-column grid — those nest the
   eyebrow one level deeper and are untouched by this rule), center them
   for a premium editorial look. Body paragraphs and lists stay left-aligned
   underneath, since centering multi-line running text hurts readability. */
.container > .eyebrow{ display:flex; justify-content:center; margin-inline:auto; }
.container > .eyebrow + h1,
.container > .eyebrow + h2{ text-align:center; margin-inline:auto; }
.container > .eyebrow + h1 + p.section-lead,
.container > .eyebrow + h2 + p.section-lead{ text-align:center; margin-inline:auto; }

.text-muted{ color:var(--text-muted); }
.text-accent{ color:var(--accent); }
.text-gradient{
  background:var(--grad-accent);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.grid{ display:grid; gap:var(--sp-md); }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .g3,.g4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .g2,.g3,.g4{ grid-template-columns:1fr; } }

.flex{ display:flex; }
.items-center{ align-items:center; }
.justify-between{ justify-content:space-between; }
.gap-sm{ gap:var(--sp-sm); }
.gap-md{ gap:var(--sp-md); }

/* skip link for a11y */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--accent); color:var(--accent-ink);
  padding:10px 18px; z-index:999; border-radius:0 0 8px 0; font-weight:600;
}
.skip-link:focus{ left:0; }

/* lazy image fade-in */
img[loading="lazy"]{ opacity:0; transition:opacity .6s var(--ease-out); }
img.loaded, img.is-loaded{ opacity:1; }

.visually-hidden{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; padding:0; margin:-1px;
}