/* =============================================================
   BASE — Reset · Body · Typography · Layout Utilities
   ============================================================= */

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  background-color: var(--color-off-white);
  color: var(--color-text-dark);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.menu-open { overflow: hidden; }

/* ── TYPOGRAPHY BASE ────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-dark);
}

p {
  line-height: var(--line-height-relaxed);
  color: var(--color-text-medium);
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--ease-fast);
}
a:hover { color: var(--color-accent-hover); }

strong { font-weight: 700; color: var(--color-text-dark); }
em     { font-style: italic; }

img, video, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ── FOCUS VISIBLE (WCAG AA) ────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── LAYOUT ─────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

.container--copy {
  max-width: var(--container-copy);
  margin-inline: auto;
}

/* ── SCREEN-READER ONLY ─────────────────────────────────────── */
.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;
}

/* ── SECTION SCAFFOLD ────────────────────────────────────────── */
.section {
  padding-block: var(--section-py);
}
.section--sm   { padding-block: var(--section-py-sm); }
.section--surface  { background: var(--color-bg-surface); }
.section--elevated { background: var(--color-bg-elevated); }

/* Subtle top / bottom borders on surface sections */
.section--surface,
.section--elevated {
  border-top:    1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}

/* ── SECTION HEADER ──────────────────────────────────────────── */
.section-header { margin-bottom: var(--space-3xl); }
.section-header--center { text-align: center; }
.section-header--center .section-subtitle { margin-inline: auto; }

/* Eyebrow label */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-electric-bright);
  margin-bottom: var(--space-4);
}
/* The eyebrow used to carry a short rule before the text, drawn here as
   a ::before. Removed at the brand's request — the label stands on its
   own. Nothing else depended on it, and the flex gap above simply has
   no second child to space. */

.section-title {
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}
.section-title em {
  font-style: italic;
  color: var(--color-sky);
}

.section-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: 52ch;    /* ≈ 40-50 CPL per brief */
}

/* ── SECTION ACTION ──────────────────────────────────────────── */
.section-action { margin-top: var(--space-2xl); }
.section-action--center { text-align: center; }

/* ── DIVIDER ─────────────────────────────────────────────────── */
hr.divider {
  border: none;
  border-top: 1px solid var(--color-divider);
}

/* ── GOOGLE FONTS IMPORT ─────────────────────────────────────── */
/* Loaded via <head> to avoid FOUT; listed here for documentation.
   Playfair Display: 400i 700 700i
   Plus Jakarta Sans: 400 500 600 700
   JetBrains Mono: 400 500 700                                    */

/* ── SKIP LINK — visible on keyboard focus (WCAG 2.4.1, 2.4.11) ──
   .sr-only hides this permanently by default. On :focus it must
   become visible, or keyboard users never know it exists. */
.sr-only:focus {
  position: fixed;
  top: var(--space-4); left: var(--space-4);
  width: auto; height: auto;
  padding: 12px 20px;
  clip: auto;
  overflow: visible;
  white-space: normal;
  background: var(--color-electric-bright);
  color: var(--color-white);
  font-weight: 600;
  border-radius: var(--radius-md);
  z-index: var(--z-modal);
  box-shadow: var(--shadow-lg);
}

/* ── Centred section headers on phones ───────────────────────────
   On a wide screen a left-aligned header sits against the left edge
   of a grid that starts there too, so the alignment reads as
   deliberate. In one column on a phone there is no such edge to
   agree with, and the mixture of left- and centre-aligned headers
   down the page reads as inconsistent rather than considered.

   Applied to the header only. Body copy, cards and lists keep their
   own alignment, because centred paragraphs are harder to read: the
   eye loses the left edge it returns to on each new line.
   ------------------------------------------------------------- */
@media (max-width: 640px) {
  .section-header { text-align: center; }
  .section-header .section-subtitle { margin-inline: auto; }

  /* The partner logo and its heading share a flex row. Centring the row
     changes nothing, because at 358px the logo, gap and heading fill it
     exactly — the heading only *looks* off centre because it sits beside
     the logo. Stacking puts the logo above a genuinely centred heading. */
  .section-header .partner-logo-row {
    flex-direction: column;
    justify-content: center;
  }
}