/* ==========================================================================
   base.css — reset, design values, fluid scales, base typography, buttons
   ========================================================================== */

:root {
  /* ---- Brand palette ---- */
  --navy: #1f4789;
  --blue: #0097d7;
  --black: #130f2d;
  --teal: #57bcbc;
  --yellow: #efc40f;
  --purple: #7552cc;

  /* Tints used on dark backgrounds where the base brand colour is too heavy */
  --blue-light: #5bcbf4;
  --blue-pale: #9bdcf5;
  --purple-light: #bca6f7;

  /* ---- Neutrals ---- */
  --ink-90: #130f2d;
  --ink-70: #3d3a55;
  --ink-50: #767282;
  --ink-15: #e5e4ea;
  --paper: #ffffff;
  --paper-soft: #f7f9fc;
  --paper-mid: #eef2f7;

  /* ---- Elevation ---- */
  --shadow-sm: 0 2px 8px rgb(19 15 45 / 4%);
  --shadow-md: 0 8px 24px rgb(19 15 45 / 8%);
  --shadow-lg: 0 16px 48px rgb(19 15 45 / 12%);

  /* ---- Radii (fixed: corner radius should not scale with viewport) ---- */
  --radius-sm: 0.75rem;
  --radius-md: 1.25rem;
  --radius-lg: 1.75rem;
  --radius-pill: 999px;

  /* ---- Typefaces ---- */
  --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Arvo", Georgia, "Times New Roman", serif;

  /* ---- Fluid type scale ----
     Every step interpolates linearly between a 360px and a 1366px viewport,
     then clamps. The rem term keeps the text responsive to user font-size
     settings, so zoom and browser text scaling still work. */
  --text-2xs: clamp(0.6875rem, 0.665rem + 0.1vw, 0.75rem);      /* 11 -> 12 */
  --text-xs: clamp(0.75rem, 0.728rem + 0.1vw, 0.8125rem);       /* 12 -> 13 */
  --text-s: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);        /* 13 -> 14 */
  --text-base: clamp(1rem, 0.978rem + 0.1vw, 1.0625rem);        /* 16 -> 17 */
  --text-m: clamp(1rem, 0.955rem + 0.2vw, 1.125rem);            /* 16 -> 18 */
  --text-l: clamp(1.0625rem, 0.995rem + 0.3vw, 1.25rem);        /* 17 -> 20 */
  --text-xl: clamp(1.125rem, 1.036rem + 0.4vw, 1.375rem);       /* 18 -> 22 */
  --text-2xl: clamp(1.25rem, 1.116rem + 0.6vw, 1.625rem);       /* 20 -> 26 */
  --text-3xl: clamp(1.625rem, 1.446rem + 0.8vw, 2.125rem);      /* 26 -> 34 */
  --text-4xl: clamp(1.875rem, 1.472rem + 1.79vw, 3rem);         /* 30 -> 48 */
  --text-5xl: clamp(2.125rem, 1.633rem + 2.19vw, 3.5rem);       /* 34 -> 56 */
  --text-hero: clamp(2.25rem, 1.534rem + 3.18vw, 4.25rem);      /* 36 -> 68 */
  --text-stat: clamp(2.25rem, 1.982rem + 1.19vw, 3rem);         /* 36 -> 48 */
  --text-counter: clamp(2.25rem, 1.847rem + 1.79vw, 3.375rem);  /* 36 -> 54 */

  /* ---- Fluid space scale ---- */
  --space-3xs: clamp(0.25rem, 0.228rem + 0.1vw, 0.3125rem);     /*  4 ->  5 */
  --space-2xs: clamp(0.5rem, 0.455rem + 0.2vw, 0.625rem);       /*  8 -> 10 */
  --space-xs: clamp(0.75rem, 0.66rem + 0.4vw, 1rem);            /* 12 -> 16 */
  --space-s: clamp(1rem, 0.866rem + 0.6vw, 1.375rem);           /* 16 -> 22 */
  --space-m: clamp(1.25rem, 0.982rem + 1.19vw, 2rem);           /* 20 -> 32 */
  --space-l: clamp(1.75rem, 1.303rem + 1.99vw, 3rem);           /* 28 -> 48 */
  --space-xl: clamp(2.25rem, 1.624rem + 2.78vw, 4rem);          /* 36 -> 64 */
  --space-2xl: clamp(3rem, 2.284rem + 3.18vw, 5rem);            /* 48 -> 80 */

  /* ---- Section rhythm (vertical spacing between sections) ---- */
  --section-space-s: clamp(3rem, 2.284rem + 3.18vw, 5rem);      /* 48 -> 80  */
  --section-space-m: clamp(4rem, 3.195rem + 3.58vw, 6.25rem);   /* 64 -> 100 */
  --section-space-l: clamp(5rem, 4.105rem + 3.98vw, 7.5rem);    /* 80 -> 120 */

  /* ---- Layout ---- */
  --gutter: clamp(1.25rem, 0.982rem + 1.19vw, 2rem);            /* 20 -> 32 */
  --container-width: 75rem;                                     /* 1200px    */
  --measure: 40rem;                                             /* readable line length */

  /* ---- Motion ---- */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-reveal: 650ms;
  --reveal-shift: 1.5rem;
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  /* Sticky header height + breathing room, so anchored sections are not hidden */
  scroll-padding-top: 6rem;
  /* Reserve the scrollbar track so locking scroll for the modal shifts nothing */
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}

/* Set while a modal dialog is open — showModal() does not lock page scroll. */
html.has-modal {
  overflow: hidden;
}

body {
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink-90);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: var(--blue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Base typography
   ========================================================================== */

h1,
h2,
h3,
h4 {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

.serif-accent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

/* ==========================================================================
   Focus states — visible, branded, never removed
   ========================================================================== */

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Dark surfaces need a light focus ring to stay visible */
.hero :focus-visible,
.matters :focus-visible,
.cta :focus-visible,
.site-footer :focus-visible,
.counter__card :focus-visible {
  outline-color: var(--yellow);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  border-radius: var(--radius-pill);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  transition:
    transform var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.btn:hover {
  text-decoration: none;
}

.btn__arrow {
  transition: transform var(--duration-normal) var(--ease-out);
}

.btn:hover .btn__arrow {
  transform: translateX(0.25rem);
}

/* ---- Sizes ---- */

.btn--sm {
  padding: 0.625rem 1.375rem;
  font-size: var(--text-s);
}

.btn--md {
  padding: var(--space-xs) var(--space-m);
  font-size: var(--text-base);
}

.btn--lg {
  padding: var(--space-s) var(--space-l);
  font-size: var(--text-l);
  font-weight: 800;
}

/* ---- Variants ---- */

.btn--navy {
  background: var(--navy);
  color: var(--paper);
  box-shadow: 0 4px 16px rgb(31 71 137 / 25%);
}

.btn--navy:hover {
  background: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgb(31 71 137 / 35%);
}

.btn--paper {
  background: var(--paper);
  color: var(--navy);
  box-shadow: 0 6px 24px rgb(19 15 45 / 35%);
}

.btn--paper:hover {
  background: var(--blue);
  color: var(--paper);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgb(19 15 45 / 45%);
}

.btn--yellow {
  background: var(--yellow);
  color: var(--black);
  box-shadow: 0 8px 24px rgb(239 196 15 / 30%);
}

.btn--yellow:hover {
  background: var(--paper);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgb(255 255 255 / 20%);
}

/* ==========================================================================
   Utilities
   ========================================================================== */

/* Geometric plus/cross.
   A "+" character is centred on its em box rather than on its ink, so it sits
   visibly off-centre inside a circle — and the offset becomes obvious once the
   icon is rotated into an x. Two bars centre exactly and rotate cleanly. */
.icon-cross {
  position: relative;
}

.icon-cross::before,
.icon-cross::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentcolor;
  border-radius: 1px;
  transform: translate(-50%, -50%);
}

.icon-cross::before {
  width: var(--cross-size, 0.625rem);
  height: var(--cross-weight, 2px);
}

.icon-cross::after {
  width: var(--cross-weight, 2px);
  height: var(--cross-size, 0.625rem);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-2xs);
  left: var(--space-2xs);
  z-index: 200;
  padding: var(--space-2xs) var(--space-s);
  background: var(--navy);
  color: var(--paper);
  border-radius: var(--radius-sm);
  font-size: var(--text-s);
  font-weight: 700;
  transform: translateY(-200%);
  transition: transform var(--duration-fast) var(--ease-out);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* ==========================================================================
   Scroll reveal

   Section content fades up as it enters the viewport. The hidden state is
   applied by assets/js/reveal.js and never sits in the markup, so the page
   renders in full if that module never runs. Only the inner content moves —
   section backgrounds stay put, so colours never slide out of position.
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition:
    opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
}

.reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* reveal.js bails out entirely under reduced motion; this is the safety net
     in case the class is ever applied anyway. */
  .reveal {
    opacity: 1;
    transform: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}