/* ============================================================
   prhffoundation.ca — design system
   Spec §8: palette from PRHF's own sites, Fraunces + Raleway.
   Editorial-campaign aesthetic: deep navy ink on paper white,
   ice-blue atmosphere, marker-yellow highlights, card-suit
   line art. No frameworks. WCAG 2.1 AA.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --color-primary-blue: #1565C0;
  --color-navy: #2B3990;
  --color-sky: #27AAE1;
  --color-green: #8DC63F;
  --color-green-deep: #6FA82B;
  --color-yellow: #FFDE17;
  --color-campaign-light-blue: #6EC0E5;
  --color-ink: #0B1E3B;
  --color-ink-soft: #3D5375;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F4F8FC;
  --color-line: #E3ECF7;

  /* Catch the Ace micro-site accents (echo the Ascend product) */
  --mc: #2CABE1;
  --sc: #92C847;
  --hc: #92C847;
  --ac: #0066CC;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px;

  --radius-card: 12px;
  --radius-envelope: 4px;
  --radius-pill: 999px;

  --shadow-card: 0 4px 16px rgba(11, 30, 59, 0.08);
  --shadow-hero: 0 8px 32px rgba(21, 101, 192, 0.18);

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Raleway', 'Segoe UI', Tahoma, sans-serif;

  --container: 1200px;
  --header-h: 76px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, 1.05vw, 1.125rem);
  line-height: 1.65;
  color: var(--color-ink);
  background: var(--color-surface);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary-blue); text-underline-offset: 3px; }
a:hover { color: var(--color-navy); }
button { font: inherit; cursor: pointer; }
ul, ol { padding-left: 1.25em; }
table { border-collapse: collapse; width: 100%; }
fieldset { border: 0; padding: 0; margin: 0; }
:focus-visible {
  outline: 2px solid var(--color-sky);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Typography ---------- */
h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.12;
  color: var(--color-navy);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-weight: 700; font-size: clamp(2rem, 4vw, 3.25rem); }
h2 { font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-weight: 600; font-size: clamp(1.25rem, 2.2vw, 1.75rem); }
h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  margin: 0 0 var(--space-3);
  color: var(--color-ink);
}
p { margin: 0 0 var(--space-4); }
small, .text-small { font-size: 0.875rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary-blue);
  margin-bottom: var(--space-3);
}
.eyebrow::before {
  content: "";
  width: 28px; height: 2px;
  background: var(--color-sky);
}

.lead { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); color: var(--color-ink-soft); }

/* ---------- Layout ---------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}
.section { padding-block: clamp(var(--space-7), 7vw, var(--space-9)); }
.section--alt { background: var(--color-surface-alt); }
.section--tight { padding-block: var(--space-6); }
.section__head { max-width: 760px; margin-bottom: clamp(var(--space-5), 4vw, var(--space-7)); }

.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1023px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}
.skip-link {
  position: absolute;
  top: -60px; left: var(--space-4);
  z-index: 200;
  background: var(--color-navy);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  text-decoration: none;
  transition: top 150ms ease;
}
.skip-link:focus { top: 0; color: #fff; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 16px 28px;
  border-radius: var(--radius-card);
  border: 2px solid transparent;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  min-height: 44px;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--color-green); color: var(--color-navy); }
.btn--primary:hover { background: var(--color-green-deep); color: var(--color-navy); }
.btn--outline { background: transparent; color: var(--color-navy); border-color: var(--color-navy); }
.btn--outline:hover { background: var(--color-navy); color: #fff; }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.65); }
.btn--outline-light:hover { background: #fff; color: var(--color-navy); }
.btn--ghost { background: transparent; color: var(--color-ink-soft); }
.btn--ghost:hover { color: var(--color-navy); }
.btn--ghost-light { background: transparent; color: rgba(255, 255, 255, 0.85); }
.btn--ghost-light:hover { color: #fff; }
.btn--sm { padding: 10px 18px; font-size: 0.9375rem; }
.btn--lg { padding: 18px 36px; font-size: 1.125rem; }
.btn--block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: var(--header-h);
}
.site-header__brand { flex-shrink: 0; }
.site-header__brand img { width: 150px; height: auto; }
.site-nav { margin-left: auto; }
.site-nav__list {
  display: flex;
  gap: clamp(var(--space-3), 1.6vw, var(--space-5));
  list-style: none;
  margin: 0; padding: 0;
}
.site-nav__list a {
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--color-ink);
  text-decoration: none;
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
}
.site-nav__list a:hover { color: var(--color-primary-blue); }
.site-nav__list a[aria-current="page"] {
  color: var(--color-primary-blue);
  border-bottom-color: var(--color-green);
  font-weight: 700;
}
.site-header__actions { display: flex; align-items: center; gap: var(--space-3); }
.btn--buy { padding: 12px 22px; }
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--color-navy);
  padding: var(--space-2);
}
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: inline-flex; }

.mobile-buybar { display: none; }

@media (max-width: 1023px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: #fff;
    border-bottom: 1px solid var(--color-line);
    box-shadow: var(--shadow-card);
    padding: var(--space-4) clamp(16px, 4vw, 32px) var(--space-6);
    transform: translateY(-120%);
    transition: transform 220ms ease;
    visibility: hidden;
  }
  body.nav-open .site-nav { transform: translateY(0); visibility: visible; }
  .site-nav__list { flex-direction: column; gap: 0; }
  .site-nav__list a {
    display: block;
    padding: var(--space-3) 0;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--color-line);
  }
  .site-header .btn--buy { display: none; }
  .mobile-buybar {
    display: block;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 90;
    padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--color-line);
    box-shadow: 0 -4px 16px rgba(11, 30, 59, 0.10);
  }
  body { padding-bottom: 76px; }
}

/* ---------- Jackpot hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 460px at 85% -10%, rgba(39, 170, 225, 0.16), transparent 62%),
    radial-gradient(800px 420px at -10% 110%, rgba(141, 198, 63, 0.12), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, var(--color-surface-alt) 100%);
  padding-block: clamp(var(--space-7), 8vw, var(--space-9));
}
/* Ottawa Valley photograph as a faint backdrop — kept behind a near-opaque
   wash so body and jackpot text keep their AA contrast (§9.15). */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(244,248,252,0.97) 100%),
    image-set(url("/assets/img/photo/hero-valley.webp") type("image/webp"),
              url("/assets/img/photo/hero-valley.jpg") type("image/jpeg"));
  background-size: cover, cover;
  background-position: center, center;
  pointer-events: none;
}
/* From 1024px up the right half carries the white board-panel card, so the
   photograph may show through there without ever sitting behind body text. */
@media (min-width: 1024px) {
  .hero::before {
    background-image:
      linear-gradient(100deg,
        rgba(255,255,255,0.97) 0%,
        rgba(255,255,255,0.95) 42%,
        rgba(244,248,252,0.74) 100%),
      image-set(url("/assets/img/photo/hero-valley.webp") type("image/webp"),
                url("/assets/img/photo/hero-valley.jpg") type("image/jpeg"));
  }
}
.hero > .container { position: relative; z-index: 1; }
.hero::after { /* oversized spade watermark, pure CSS line-art */
  content: "";
  position: absolute;
  right: -70px; bottom: -90px;
  width: 340px; height: 340px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B3990' stroke-width='0.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9c-1.5 1.5-3 3.2-3 5.5A5.5 5.5 0 0 0 7.5 20c1.8 0 3-.5 4.5-2 1.5 1.5 2.7 2 4.5 2a5.5 5.5 0 0 0 5.5-5.5c0-2.3-1.5-4-3-5.5l-7-7-7 7Z'/%3E%3Cpath d='M12 18v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.06;
  pointer-events: none;
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(var(--space-6), 5vw, var(--space-8));
  align-items: center;
}
@media (max-width: 1023px) { .hero__inner { grid-template-columns: 1fr; } }

.hero__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-navy);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-5);
}
.hero__label svg { color: var(--mc); }

/* §7.1.3 — the H1 is the whole sentence, jackpot figure included. */
.hero__headline {
  display: block;
  margin-bottom: var(--space-2);
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
}
.hero__headline-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.12;
  color: var(--color-navy);
  margin-bottom: var(--space-2);
}
.jackpot-figure {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.75rem, 6vw, 5.5rem);
  line-height: 1;
  color: var(--color-ink);
  letter-spacing: -0.01em;
  display: inline-block;
  position: relative;
  z-index: 0; /* own stacking context so the ::after underline stays above section backgrounds */
  margin-bottom: var(--space-3);
  font-variant-numeric: tabular-nums;
}
.jackpot-figure::after { /* marker-yellow underline swash */
  content: "";
  position: absolute;
  left: -0.06em; right: -0.06em; bottom: 0.02em;
  height: 0.22em;
  background: var(--color-yellow);
  z-index: -1;
  border-radius: 3px;
  transform: skewX(-6deg);
}
.hero__sub {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  color: var(--color-ink-soft);
  margin-bottom: var(--space-2);
}
.hero__sub strong { color: var(--color-navy); }
.hero__disclaimer { font-size: 0.875rem; color: var(--color-ink-soft); margin-bottom: var(--space-1); }
.hero__updated {
  font-size: 0.875rem;
  color: var(--color-ink-soft);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.hero__microcopy { font-size: 0.875rem; color: var(--color-ink-soft); margin-top: var(--space-3); }

/* Jackpot data failure fallback (§12) */
.data-fallback {
  border: 2px dashed var(--color-sky);
  border-radius: var(--radius-card);
  background: #fff;
  padding: var(--space-5);
}
.data-fallback p { margin-bottom: var(--space-3); }
[data-raffle-state="error"] .raffle-live { display: none !important; }
.data-fallback[hidden] { display: none; }

/* ---------- Envelope board ---------- */
.board-panel {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-hero);
  padding: clamp(var(--space-5), 3vw, var(--space-6));
}
.board-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.board-panel__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--color-navy);
  margin: 0;
}
.board-panel__series {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.envelope-board {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 6px;
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}
@media (max-width: 479px) { .envelope-board { grid-template-columns: repeat(6, 1fr); } }
.envelope {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border-radius: var(--radius-envelope);
  border: 1px solid var(--color-line);
  position: relative;
  transition: background-color 200ms ease, transform 200ms ease, opacity 200ms ease;
}
.envelope--sealed {
  background: linear-gradient(160deg, #FDFEFF 0%, #EAF3FB 100%);
  color: var(--color-navy);
  border-color: #C9DCF0;
}
.envelope--sealed::before { /* envelope flap */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(to bottom right, transparent 49.5%, rgba(43, 57, 144, 0.10) 50%) top left / 50% 55% no-repeat,
    linear-gradient(to bottom left, transparent 49.5%, rgba(43, 57, 144, 0.10) 50%) top right / 50% 55% no-repeat;
  pointer-events: none;
}
.envelope--opened {
  background: var(--color-surface-alt);
  color: #8AA0BF;
  border-style: dashed;
  text-decoration: line-through;
  transform: scale(0.94);
}
/* Counts are accurate even before the opened envelope NUMBERS are confirmed. */
.envelope--unnumbered { text-decoration: none; }
.board-panel__caption {
  font-size: 0.9375rem;
  color: var(--color-ink-soft);
  margin: 0;
}
.board-panel__caption strong { color: var(--color-navy); }
.board-legend {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-3);
  font-size: 0.8125rem;
  color: var(--color-ink-soft);
}
.board-legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.board-legend i {
  width: 16px; height: 12px;
  border-radius: 3px;
  display: inline-block;
}
.board-legend .legend-sealed { background: #EAF3FB; border: 1px solid #C9DCF0; }
.board-legend .legend-opened { background: var(--color-surface-alt); border: 1px dashed var(--color-line); }

/* ---------- Ticket tiers ---------- */
.tier-card {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: relative;
  text-align: center;
}
.tier-card__flag {
  position: absolute;
  top: calc(-1 * var(--space-3));
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-navy);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.tier-card__tickets {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.25rem, 3.4vw, 3rem);
  line-height: 1;
  color: var(--color-primary-blue);
  font-variant-numeric: tabular-nums;
}
.tier-card__label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.tier-card__price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--color-navy);
}
.tier-card__cta { margin-top: auto; padding-top: var(--space-3); }
.tiers-note {
  max-width: 760px;
  margin: var(--space-5) auto 0;
}

/* ---------- Mandatory jackpot/price disclaimers (§12) + ConnexOntario (§9.9) ---------- */
.jackpot-legal {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-sky);
  background: var(--color-surface-alt);
  border-radius: var(--radius-envelope);
}
.jackpot-legal__line {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-2);
}
.jackpot-legal__line:last-child { margin-bottom: 0; }
.jackpot-legal__connex {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  color: var(--color-navy);
}
.jackpot-legal__connex svg { color: var(--color-primary-blue); flex: none; }

/* CRA wording required beside every purchase CTA (§9.11). */
.cra-note {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-ink-soft);
  margin: var(--space-3) 0 0;
}
.cra-note--light { color: rgba(255, 255, 255, 0.85); margin-top: 0; }

/* ---------- "Ace found" reset banner (§12A.8) ---------- */
.ace-banner {
  background: var(--color-yellow);
  color: var(--color-ink);
  border-bottom: 2px solid rgba(11, 30, 59, 0.12);
}
.ace-banner__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-block: var(--space-4);
}
.ace-banner__icon { display: inline-flex; color: var(--color-ink); flex: none; }
.ace-banner__text { margin: 0; flex: 1 1 320px; font-size: 0.9375rem; line-height: 1.5; }
.ace-banner__text strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  color: var(--color-navy);
}

/* ---------- Week N results detail (§7.4) ---------- */
.week-table th[scope="row"] { width: 42%; }
.week-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-5);
}

/* ---------- Winner strip ---------- */
.winner-strip {
  background: #fff;
  border: 1px solid var(--color-line);
  border-left: 6px solid var(--color-green);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}
.winner-strip__icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--color-surface-alt);
  color: var(--color-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.winner-strip__body { flex: 1 1 320px; }
.winner-strip__title { margin: 0 0 var(--space-1); font-size: 1.0625rem; }
.winner-strip__meta { margin: 0; color: var(--color-ink-soft); font-size: 0.9375rem; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  font-size: 0.8125rem;
  font-weight: 700;
}
.badge--carry { background: var(--color-surface-alt); color: var(--color-navy); border: 1px solid var(--color-line); }
.badge--ace { background: var(--color-yellow); color: var(--color-ink); }

/* ---------- Thermometer (Together, We Care) ---------- */
.thermo {
  background: linear-gradient(135deg, var(--color-campaign-light-blue) 0%, #A8D8EF 55%, #D6ECF8 100%);
  border-radius: var(--radius-card);
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  color: var(--color-ink);
}
.thermo__stat {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  color: var(--color-navy);
  margin-bottom: var(--space-2);
  font-variant-numeric: tabular-nums;
}
.thermo__track {
  height: 22px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.75);
  overflow: hidden;
  margin-block: var(--space-4);
}
.thermo__fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-sky), var(--color-primary-blue));
  transition: width 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}
.thermo__scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-ink-soft);
}

/* ---------- Impact / equipment cards ---------- */
.impact-card {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.impact-card__media {
  aspect-ratio: 3 / 2;
  background:
    radial-gradient(320px 200px at 30% 20%, rgba(39, 170, 225, 0.28), transparent 70%),
    linear-gradient(150deg, #EAF3FB 0%, #D9EAF7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-navy);
  position: relative;
}
.impact-card__media svg { opacity: 0.9; }
.impact-card__media picture,
.impact-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.impact-card__media .media-note {
  position: absolute;
  bottom: var(--space-2);
  right: var(--space-3);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(11, 30, 59, 0.62);
  padding: 2px var(--space-2);
  border-radius: var(--radius-envelope);
}

/* ---------- Standalone photo figures (§8 photography direction) ---------- */
.photo-figure { margin: 0; }
.photo-figure picture,
.photo-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.photo-figure figcaption {
  margin-top: var(--space-3);
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}
.impact-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.impact-card__title { margin: 0; font-size: 1.125rem; }
.impact-card__note { color: var(--color-ink-soft); font-size: 0.9375rem; margin: 0; }
.impact-card__value {
  margin-top: auto;
  padding-top: var(--space-3);
  font-weight: 700;
  color: var(--color-primary-blue);
  font-size: 0.9375rem;
}

/* ---------- Carousel ---------- */
.carousel { position: relative; }
.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(340px, 82vw);
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-3);
  scrollbar-width: thin;
}
.carousel__track > * { scroll-snap-align: start; }
.carousel__nav {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-3);
}
.carousel__btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background: #fff;
  color: var(--color-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
}
.carousel__btn:hover { background: var(--color-surface-alt); }

/* ---------- Sponsor strip ---------- */
.sponsor-strip {
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  background: #fff;
  padding-block: var(--space-5);
}
.sponsor-strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  text-align: center;
}
.sponsor-strip__label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin: 0;
}
.sponsor-strip__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--color-navy);
  margin: 0;
}
/* TBC: replace with the licensed OK Tire logo supplied by the client (§13). */
.sponsor-strip__logo-placeholder {
  border: 1px dashed var(--color-line);
  border-radius: var(--radius-card);
  padding: var(--space-2) var(--space-4);
  font-size: 0.75rem;
  color: var(--color-ink-soft);
}

/* ---------- Stats band ---------- */
.stats-band {
  background:
    linear-gradient(180deg, rgba(43,57,144,0.93) 0%, rgba(43,57,144,0.97) 100%),
    image-set(url("/assets/img/photo/stats-navy.webp") type("image/webp"),
              url("/assets/img/photo/stats-navy.jpg") type("image/jpeg"))
    center / cover no-repeat;
  color: #fff;
}
.stats-band .eyebrow { color: var(--color-campaign-light-blue); }
.stats-band h2 { color: #fff; }
.stat {
  border-left: 3px solid var(--color-sky);
  padding-left: var(--space-4);
}
.stat__value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.05;
  color: var(--color-yellow);
  font-variant-numeric: tabular-nums;
}
.stat__label { color: #C9D6EE; font-size: 0.9375rem; }

/* ---------- Steps (How It Works) ---------- */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.step {
  counter-increment: step;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-4);
  align-items: start;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--color-sky);
  background: var(--color-surface-alt);
  border-radius: var(--radius-card);
  width: 56px; height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step h3 { font-size: 1.125rem; margin-bottom: var(--space-2); }
.step p:last-child { margin-bottom: 0; }

/* Glossary */
.glossary { display: grid; gap: var(--space-4); }
.glossary dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--color-navy);
}
.glossary dd { margin: var(--space-1) 0 0; color: var(--color-ink-soft); }

/* ---------- Archive table ---------- */
.table-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: end;
  margin-bottom: var(--space-4);
}
.table-tools .field { flex: 1 1 200px; max-width: 300px; }
.table-tools__spacer { flex: 1 1 auto; }
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.archive-table { min-width: 860px; font-size: 0.9375rem; }
.archive-table caption {
  text-align: left;
  padding: var(--space-4) var(--space-4) 0;
  font-weight: 700;
  color: var(--color-ink-soft);
  font-size: 0.875rem;
}
.archive-table th, .archive-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-line);
  white-space: nowrap;
}
.archive-table th {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  background: var(--color-surface-alt);
  position: sticky;
  top: 0;
}
.archive-table tbody tr:hover { background: #FAFCFE; }
.archive-table td.is-money { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--color-navy); }
.archive-table .row-series {
  background: var(--color-navy);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.8125rem;
}
.archive-table .row-series td { border-bottom: 0; }

/* ---------- Prose (legal pages) ---------- */
.page-hero {
  background: linear-gradient(180deg, var(--color-surface-alt) 0%, #fff 100%);
  border-bottom: 1px solid var(--color-line);
  padding-block: clamp(var(--space-6), 6vw, var(--space-8));
}
.page-hero .lead { max-width: 720px; }
.breadcrumbs {
  font-size: 0.8125rem;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-4);
}
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: var(--space-2); color: var(--color-line); }
.breadcrumbs a { color: var(--color-ink-soft); }

.prose { max-width: 780px; }
.prose h2 { margin-top: var(--space-7); }
.prose h3 { margin-top: var(--space-6); }
.prose ul, .prose ol { margin-bottom: var(--space-4); }
.prose li { margin-bottom: var(--space-2); }
.prose .doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: 0.875rem;
  color: var(--color-ink-soft);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-surface-alt);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
}
.prose .doc-meta strong { color: var(--color-navy); }

.callout {
  border-radius: var(--radius-card);
  padding: var(--space-5);
  margin-block: var(--space-5);
  border: 1px solid var(--color-line);
  background: var(--color-surface-alt);
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--space-3);
}
.callout svg { color: var(--color-primary-blue); margin-top: 2px; }
.callout--warn { background: #FFFBE5; border-color: #F0E4A5; }
.callout--warn svg { color: #9C7C08; }
.callout--connex { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }
.callout--connex a { color: var(--color-yellow); }
.callout--connex svg { color: var(--color-campaign-light-blue); }
.callout :last-child { margin-bottom: 0; }
.callout__title { font-weight: 700; margin-bottom: var(--space-1); }

.legal-table th, .legal-table td {
  border: 1px solid var(--color-line);
  padding: var(--space-3);
  text-align: left;
  font-size: 0.9375rem;
  vertical-align: top;
  white-space: normal;
}
.legal-table th { background: var(--color-surface-alt); }

/* ---------- FAQ ---------- */
.faq-item {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-3);
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  font-weight: 700;
  color: var(--color-navy);
  min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg { flex-shrink: 0; transition: transform 200ms ease; color: var(--color-primary-blue); }
.faq-item[open] summary svg { transform: rotate(180deg); }
.faq-item__body { padding: 0 var(--space-5) var(--space-5); color: var(--color-ink-soft); }
.faq-item__body :last-child { margin-bottom: 0; }

/* ---------- Forms ---------- */
.field { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.field label { font-weight: 700; font-size: 0.9375rem; }
.field input, .field select, .field textarea {
  font: inherit;
  color: var(--color-ink);
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #C4D4E8;
  border-radius: var(--radius-card);
  background: #fff;
  width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--color-sky);
  outline-offset: 2px;
}
.field .hint { font-size: 0.8125rem; color: var(--color-ink-soft); }
.checkbox {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--space-3);
  align-items: start;
  font-size: 0.9375rem;
  margin-bottom: var(--space-4);
}
.checkbox input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--color-primary-blue); }

/* ---------- RG strip + footer ---------- */
.rg-strip {
  background: var(--color-ink);
  color: #fff;
  padding-block: var(--space-5);
}
.rg-strip__inner { display: grid; gap: var(--space-3); }
.rg-strip__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-weight: 700;
}
.rg-strip__tag {
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-pill);
  padding: 2px 14px;
  font-size: 0.875rem;
}
.rg-strip__connex { color: var(--color-yellow); font-size: 0.9375rem; }
.rg-strip__connex:hover { color: #fff; }
.rg-strip__note { margin: 0; font-size: 0.875rem; color: #C9D6EE; }
.rg-strip__note a { color: #fff; }

.site-footer {
  background: var(--color-navy);
  color: #DDE5F7;
  padding-block: var(--space-8) var(--space-6);
  font-size: 0.9375rem;
}
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--color-yellow); }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.2fr;
  gap: clamp(var(--space-5), 4vw, var(--space-8));
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
@media (max-width: 1023px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer__logo { background: #fff; padding: var(--space-2) var(--space-3); border-radius: var(--radius-card); margin-bottom: var(--space-4); }
.site-footer__address { font-style: normal; line-height: 1.9; }
.site-footer__address a { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; }
.site-footer__social { list-style: none; display: flex; gap: var(--space-3); padding: 0; margin: var(--space-4) 0 0; }
.site-footer__social a {
  width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.site-footer__social a:hover { background: rgba(255, 255, 255, 0.12); }
.site-footer__heading {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-campaign-light-blue);
  margin: 0 0 var(--space-4);
}
.site-footer__heading--badges { margin-top: var(--space-6); }
.site-footer__links {
  list-style: none;
  padding: 0; margin: 0;
  columns: 2;
  column-gap: var(--space-5);
}
@media (max-width: 479px) { .site-footer__links { columns: 1; } }
.site-footer__links li { margin-bottom: var(--space-2); break-inside: avoid; }
.site-footer__links a { text-decoration: none; }
.site-footer__links a:hover { text-decoration: underline; }
.site-footer__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
/* §12A.3 — no less prominent than the Buy Tickets CTA. */
.btn--membership { font-size: 1rem; }
.site-footer__badges {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
.site-footer__badges img { height: auto; }
.site-footer__badges a { display: inline-flex; background: rgba(255,255,255,0.06); padding: var(--space-2) var(--space-3); border-radius: var(--radius-card); }
.site-footer__badges a[aria-label^="Alcohol"] { background: #fff; }
.site-footer__badges a[aria-label^="PlaySmart"] { background: #fff; }
.site-footer__legal { padding-top: var(--space-5); }
.site-footer__legal p { font-size: 0.875rem; line-height: 1.8; color: #C9D6EE; }
.site-footer__meta { font-size: 0.8125rem; }

/* ---------- Modals ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(11, 30, 59, 0.72);
  backdrop-filter: blur(3px);
}
.modal[hidden] { display: none; }
.modal__panel {
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-hero);
  max-width: 520px;
  width: 100%;
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  text-align: center;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.modal__icon {
  width: 72px; height: 72px;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  background: var(--color-surface-alt);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal__title { font-size: 1.5rem; margin-bottom: var(--space-3); }
.modal__copy { color: var(--color-ink-soft); }
.modal__copy--strong { color: var(--color-ink); font-weight: 700; }
.modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-block: var(--space-5) var(--space-4);
}
.modal__fineprint { font-size: 0.875rem; color: var(--color-ink-soft); margin: 0; }
body.modal-open { overflow: hidden; }

/* ---------- Cookie bar ---------- */
.cookiebar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 250;
  background: #fff;
  border-top: 3px solid var(--color-navy);
  box-shadow: 0 -8px 32px rgba(11, 30, 59, 0.18);
  padding-block: var(--space-5);
  max-height: 85vh;
  overflow-y: auto;
}
.cookiebar[hidden] { display: none; }
.cookiebar__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-5); align-items: center; }
@media (max-width: 1023px) { .cookiebar__inner { grid-template-columns: 1fr; } }
.cookiebar__title {
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 1.0625rem;
  color: var(--color-navy);
  margin-bottom: var(--space-2);
}
.cookiebar__intro p { margin: 0; font-size: 0.9375rem; color: var(--color-ink-soft); }
.cookiebar__options { display: grid; gap: var(--space-2); margin-bottom: var(--space-3); }
.cookiebar__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.9375rem;
  font-weight: 700;
}
.cookiebar__option input { width: 20px; height: 20px; accent-color: var(--color-primary-blue); }
.cookiebar__option small { font-weight: 400; color: var(--color-ink-soft); margin-left: var(--space-2); }
.cookiebar__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- Announcement snippet (§12A) ---------- */
.snippet-box {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  padding: var(--space-5);
}
.snippet-box textarea {
  width: 100%;
  min-height: 110px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.875rem;
  border: 1px solid #C4D4E8;
  border-radius: var(--radius-envelope);
  padding: var(--space-3);
  margin-block: var(--space-3);
}

/* ---------- 404 / age-restricted ---------- */
.errorpage {
  min-height: 55vh;
  display: grid;
  place-content: center;
  text-align: center;
  padding-block: var(--space-8);
}
.errorpage__code {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(4rem, 12vw, 8rem);
  color: var(--color-line);
  line-height: 1;
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 500ms ease, transform 500ms ease;
  }
  .reveal.is-visible { opacity: 1; transform: none; }
  .reveal:nth-child(2) { transition-delay: 80ms; }
  .reveal:nth-child(3) { transition-delay: 160ms; }
  .reveal:nth-child(4) { transition-delay: 240ms; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- Print (archive) ---------- */
@media print {
  .site-header, .mobile-buybar, .rg-strip, .site-footer, .cookiebar, .modal,
  .table-tools, .carousel__nav, .btn { display: none !important; }
  body { padding: 0; font-size: 11pt; }
  .archive-table { min-width: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}