/* === base.css === reset · typography · utilities === */

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
img { image-rendering: auto; }
a { color: var(--primary); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--primary-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin: 0 0 var(--s4);
  color: var(--text);
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(2rem, 4.5vw + 0.5rem, var(--text-6xl)); font-weight: var(--fw-extra); }
h2 { font-size: clamp(1.75rem, 3vw + 0.25rem, var(--text-4xl)); }
h3 { font-size: clamp(1.25rem, 1.8vw + 0.25rem, var(--text-2xl)); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); text-transform: uppercase; letter-spacing: 0.08em; }

p { margin: 0 0 var(--s4); line-height: var(--lh-relaxed); color: var(--text-muted); }
ul, ol { margin: 0 0 var(--s4); padding-left: var(--s6); }
li { margin-bottom: var(--s2); color: var(--text-muted); }

strong, b { font-weight: var(--fw-semibold); color: var(--text); }
small { font-size: var(--text-sm); color: var(--text-muted); }

/* Layout helpers */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s5); }
@media (min-width: 768px) { .container { padding-inline: var(--s8); } }

.s { padding-block: clamp(3rem, 6vw, 6rem); }
.s--white { background: var(--white); }
.s--alt   { background: var(--off-white); }
.s--cream { background: var(--cream); }
.s--dark  { background: var(--dark); color: var(--text-inverse); }
.s--dark h1, .s--dark h2, .s--dark h3, .s--dark h4 { color: var(--text-inverse); }
.s--dark p, .s--dark li { color: rgba(248, 250, 252, 0.85); }

.grid { display: grid; gap: var(--s6); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--s2); }
.gap-4 { gap: var(--s4); }
.gap-6 { gap: var(--s6); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--primary-soft);
  padding: 6px 12px;
  border-radius: var(--r-full);
  margin-bottom: var(--s4);
}
.s--dark .eyebrow { background: rgba(16, 185, 129, 0.16); color: #6EE7B7; }

.lead { font-size: var(--text-lg); line-height: var(--lh-relaxed); color: var(--text-muted); max-width: 62ch; }
.s--dark .lead { color: rgba(248, 250, 252, 0.88); }

.text-center { text-align: center; }
.mx-auto    { margin-left: auto; margin-right: auto; }

/* Accessibility */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--dark); color: var(--white);
  padding: var(--s3) var(--s5); font-weight: var(--fw-semibold);
  z-index: var(--z-modal);
}
.skip-link:focus { left: var(--s4); top: var(--s4); color: var(--white); }

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

/* Print */
@media print {
  .site-header, .site-footer, .mobile-cta-bar, .wa-fab, .back-to-top,
  .cookie-banner, .emergency-bar, .hero-dots, .hero-prev, .hero-next { display: none !important; }
  body { color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
  .s--dark { background: #fff; color: #000; }
}