/* ============================================================
   HARDCORE HARRY'S - GLOBAL DESIGN SYSTEM
   Shared styles for all pages across hardcoreharrys.com.au
   ============================================================ */

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

/* ---- CSS VARIABLES ---- */
:root {
  --bg-primary: #080808;
  --bg-section: #121212;
  --bg-card: #181818;
  --accent: #2ca3ff;
  --accent-light: #5fbeff;
  --accent-glow: rgba(44, 163, 255, 0.3);
  --accent-subtle: rgba(44, 163, 255, 0.06);
  --cta: #64ffe9;
  --cta-light: #8effee;
  --cta-glow: rgba(100, 255, 233, 0.35);
  --text-primary: #ffffff;
  --text-secondary: #b0b0b0;
  --text-muted: #555555;
  --border: rgba(255, 255, 255, 0.06);
  --border-accent: rgba(44, 163, 255, 0.2);
  /* Danger / elimination / sold-out — semantic red, NOT brand */
  --danger: #ff3a3a;
  --danger-light: #ff6363;
  --danger-subtle: rgba(255, 58, 58, 0.08);
  --danger-border: rgba(255, 58, 58, 0.28);
  --danger-glow: rgba(255, 58, 58, 0.4);
  --max-width: 1100px;
}

/* ---- BASE ---- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---- GRAIN OVERLAY ---- */
body::after {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: 0.4;
}

/* ---- SCROLL REVEAL ---- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ---- UTILITY ---- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 120px 0;
  position: relative;
}

.section-alt {
  background: var(--bg-section);
}

.text-center {
  text-align: center;
}

/* ---- BUTTONS ----
   Primary CTA uses the brand mint #64ffe9. Dark text on mint for AA
   contrast. Inter Bold 14/20, letter-spacing 0, sentence case,
   rounded-rect 14px radius. */
.btn {
  display: inline-block;
  padding: 16px 32px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.btn-primary {
  background: var(--cta);
  color: #0a0a0a;
}

.btn-primary:hover {
  background: var(--cta-light);
  box-shadow: 0 8px 28px var(--cta-glow);
  transform: translateY(-2px);
}

/* Secondary button — solid card surface with strong border, paired
   weight to .btn-primary. Reads as a true secondary action, not a
   ghost link. Filled bg + 1.5px stroke + crisp hover state. */
.btn-outline {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--text-primary);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  transform: translateY(-2px);
}

.btn-group {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

.btn-sm {
  padding: 10px 18px;
  font-size: 13px;
  border-radius: 10px;
}

.btn-xl {
  padding: 20px 40px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 16px;
}
.btn-xl.btn-primary:hover {
  box-shadow: 0 12px 40px var(--cta-glow);
}

/* App Store / Play Store badge group — used where the action is
   specifically "open in the app" (hero CTAs on challenge pages,
   final CTA closers). Stack on mobile, side-by-side on desktop. */
.app-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
}
.app-badges a {
  display: inline-block;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.app-badges a:hover {
  transform: translateY(-2px);
  opacity: 0.92;
}
.app-badges img {
  height: 56px;
  width: auto;
  display: block;
}
.app-badges--lg img {
  height: 64px;
}
@media (max-width: 480px) {
  .app-badges img,
  .app-badges--lg img {
    height: 48px;
  }
}

/* ---- HEADINGS ----
   Canonical hero heading utility. Apply .page-heading to every page-
   level <h1> (or any "marquee" hero heading) to inherit the shared
   typographic spec: Inter Black, uppercase, tight negative tracking,
   tight line-height. Properties marked !important so the class wins
   against more-specific page-local selectors like `.story-hero h1`. */
.page-heading {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.05em !important;
  line-height: 0.92 !important;
  font-size: clamp(48px, 8vw, 96px);
  margin: 0 0 16px;
}

/* Visually hidden utility — kept in the accessibility tree (screen
   readers + SEO) but removed from the visual layout. Used when an
   image already conveys the heading, so we don't double-up visually. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ============================================================
   TYPOGRAPHY CONVENTIONS — read this before adding new heading styles.

   Two categories of heading exist on this site, with different rules:

   1. DISPLAY HEADINGS (h1/h2/h3 at >=16px, font-weight 700+)
      - Must use NEGATIVE letter-spacing. Scale by size:
          h1 hero (clamp 48-80px+): -0.05em to -0.04em
          h2 section (40-56px):     -0.04em to -0.03em
          h3 in-card (20-28px):     -0.03em to -0.025em
          h3 small  (18-20px):      -0.02em
      - Must set an EXPLICIT line-height. Default browser line-height
        (~1.5) is wrong for tight Inter Black uppercase. Use:
          giant h1:   0.92
          big h2:     0.95
          medium h3:  1.0 - 1.07
          small h3:   1.1 - 1.15

   2. EYEBROW LABELS / TINY ALL-CAPS (font-size <= 14px, uppercase)
      - POSITIVE letter-spacing IS correct here (1.5 - 2.4px is the
        brand convention for kicker labels). Don't 'fix' these.
      - Still set an explicit line-height (1.0 - 1.2).

   Why this matters: a 28px Inter Black uppercase heading with default
   browser line-height renders with ~14px of leading on each side, which
   reads as airy and off-brand. Always set both line-height + tracking
   when defining a heading.

   Shared utilities you can use directly:
      .page-heading      — hero h1 (Inter Black, uppercase, -0.05em, 0.92)
      h2.section-heading — large section h2 titles
   ============================================================ */

/* Section heading — same family, slightly looser line-height for the
   shorter section titles. */
h2.section-heading {
  font-family: 'Inter', sans-serif;
  font-size: clamp(40px, 6vw, 56px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 0.95;
  margin-bottom: 16px;
}

.section-rule {
  width: 60px;
  height: 3px;
  background: var(--accent);
  margin: 0 auto 40px;
}

/* ============================================================
   CHALLENGE PREVIEW PAGES — shared styles for /challenges/[slug]/
   When the App Dashboard API ships, the per-page data points are
   the things that should swap to live values. Layout stays.
   ============================================================ */
.chall-preview-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 160px 24px 96px;
  overflow: hidden;
  isolation: isolate;
}
.chall-preview-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: -2;
  filter: brightness(0.55);
}
.chall-preview-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8,8,8,0.35) 0%, rgba(8,8,8,0.55) 50%, rgba(8,8,8,0.95) 100%);
}
.chall-preview-hero > *:not(.chall-preview-hero-bg) {
  position: relative;
}
.chall-preview-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 50px;
  margin-bottom: 20px;
}
.chall-preview-badge.live {
  background: rgba(100, 255, 233, 0.12);
  color: var(--cta);
  border: 1px solid rgba(100, 255, 233, 0.3);
}
.chall-preview-badge.upcoming {
  background: rgba(44, 163, 255, 0.12);
  color: var(--accent-light);
  border: 1px solid var(--border-accent);
}
.chall-preview-badge.closed {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.25);
}
.chall-preview-hero h1 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(40px, 7vw, 80px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.045em;
  line-height: 0.94;
  margin-bottom: 16px;
  text-shadow: 0 2px 24px rgba(0,0,0,0.6);
}
.chall-preview-discipline {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}
.chall-preview-sub {
  font-size: 17px;
  color: rgba(255,255,255,0.85);
  max-width: 620px;
  margin: 0 auto 32px;
  line-height: 1.7;
  text-shadow: 0 1px 12px rgba(0,0,0,0.5);
}

/* Hero variant: banner-card layout
   ----------------------------------------------------------------
   Instead of a full-bleed background image with text overlay, the
   challenge banner becomes a contained 2:1 card with rounded
   corners. The same artwork is reused as a heavily blurred + dark
   ambient background so the page picks up the banner's colour
   without distorting the artwork itself. Title + sub + CTA sit
   centred below the card.
*/
.chall-preview-hero--card {
  min-height: auto;
  padding: 130px 24px 96px;
  display: block;
  text-align: center;
}
.chall-preview-hero--card .chall-preview-hero-bg {
  /* Ambient: same image, blurred + darkened. */
  filter: blur(48px) brightness(0.45) saturate(1.1);
  /* Scale up to hide blur edge artefacts. */
  transform: scale(1.15);
  z-index: -2;
}
.chall-preview-hero--card::after {
  /* Soften the ambient further toward the bottom so the card
     stands out cleanly against the page. */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8,8,8,0.45) 0%, rgba(8,8,8,0.55) 50%, rgba(8,8,8,0.92) 100%);
}
.chall-preview-hero-card {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto 48px;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 2 / 1;
  background: var(--bg-card);
  /* On viewport-height-constrained displays the card shrinks so the
     full hero (title + sub + badges + bottom padding) stays visible
     above the fold. 100vh - 560px reserves room for nav, headings,
     sub, badges and padding; clamps between 240px and 420px so it
     never gets tiny or oversized on widescreen. */
  display: block;
  text-decoration: none;
  cursor: pointer;
  /* Resting shadow is static — animating box-shadow on hover causes
     per-frame repaints and jank. Only transform animates here, which
     is GPU-composited and free. */
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
/* Inner glow halo on a pseudo-element. INSET shadow keeps it inside
   the card's overflow:hidden mask. Animated via opacity (composited)
   instead of box-shadow (paints), so hover stays smooth. */
.chall-preview-hero-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1.5px var(--border-accent),
              inset 0 0 28px var(--accent-glow);
  opacity: 0;
  transition: opacity 0.3s ease;
}
a.chall-preview-hero-card:hover,
a.chall-preview-hero-card:focus-visible {
  transform: translate3d(0, -3px, 0) scale(1.015);
}
a.chall-preview-hero-card:hover::after,
a.chall-preview-hero-card:focus-visible::after {
  opacity: 1;
}
a.chall-preview-hero-card:focus-visible {
  outline: none;
}
.chall-preview-hero-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
a.chall-preview-hero-card:hover img,
a.chall-preview-hero-card:focus-visible img {
  transform: scale(1.035);
}
.chall-preview-hero-text {
  max-width: 720px;
  margin: 0 auto;
}
.chall-preview-hero--card h1 {
  margin-top: 16px;
}

@media (max-width: 768px) {
  .chall-preview-hero--card {
    padding: 100px 20px 64px;
  }
  .chall-preview-hero-card {
    margin-bottom: 32px;
    border-radius: 14px;
  }
}

/* Widescreen / desktop: scale the banner down proportionately so the
   full hero (title + sub + badges) is always visible above the fold.
   2:1 aspect ratio is preserved — just a smaller card. 720×360 is
   ~25% smaller than the original 960×480, which frees ~120px of
   vertical space without distorting the artwork. */
@media (min-width: 1024px) {
  .chall-preview-hero--card {
    padding-top: 110px;
    padding-bottom: 64px;
  }
  .chall-preview-hero-card {
    max-width: 840px;
    margin-bottom: 32px;
  }
  .chall-preview-hero--card h1 {
    margin-top: 8px;
  }
  .chall-preview-sub {
    margin-bottom: 24px;
  }
}

.chall-preview-stats {
  background: var(--bg-section);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 40px 0;
}
.chall-preview-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.chall-preview-stat-value {
  font-family: 'Inter', sans-serif;
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--accent);
  line-height: 1;
  display: block;
  margin-bottom: 6px;
}
.chall-preview-stat-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.chall-preview-prize-pack {
  max-width: 720px;
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.chall-preview-prize-image {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: var(--bg-primary);
}
.chall-preview-prize-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.chall-preview-prize-meta {
  padding: 20px 24px 24px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--border);
}
.chall-preview-prize-value {
  font-family: 'Inter', sans-serif;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 900;
  letter-spacing: -0.025em;
  color: var(--accent);
  line-height: 1;
}
.chall-preview-prize-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.chall-preview-cta {
  position: relative;
  text-align: center;
  padding: 120px 24px;
  background: linear-gradient(135deg, #0a0a12 0%, #061a3a 40%, #0c2d5e 70%, #0a0a12 100%);
  overflow: hidden;
}
.chall-preview-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(44, 163, 255, 0.12) 0%, transparent 70%);
  pointer-events: none;
}
.chall-preview-cta > * {
  position: relative;
}
.chall-preview-cta h2 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(32px, 6vw, 56px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 0.95;
  margin-bottom: 16px;
}
.chall-preview-cta p {
  font-size: 17px;
  color: rgba(255,255,255,0.75);
  max-width: 520px;
  margin: 0 auto 32px;
  line-height: 1.7;
}

.chall-preview-data-note {
  margin-top: 56px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}

/* Extended Rules + Prize Breakdown — mirror app Challenge Details */
.chall-rules-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 960px;
  margin: 0 auto;
}
.chall-rule-block {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
}
.chall-rule-block h3 {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.8px; /* small all-caps eyebrow — positive tracking is intentional */
  line-height: 1.2;
  color: var(--accent);
  margin-bottom: 18px;
}
.chall-rule-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}
.chall-rule-list > li {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
  padding: 0;
}
.chall-rule-list > li strong {
  color: var(--text-primary);
  font-weight: 800;
}
.chall-rule-list-sub {
  list-style: none;
  margin: 8px 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chall-rule-list-sub li {
  font-size: 13px;
  color: var(--text-secondary);
  padding-left: 18px;
  position: relative;
  line-height: 1.6;
}
.chall-rule-list-sub li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
}
.chall-disclaimer {
  max-width: 760px;
  margin: 32px auto 0;
  padding: 24px 28px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.75;
}

/* Disclaimer accordion (collapsed by default — content's dense legal copy) */
.chall-disclaimer-toggle {
  max-width: 760px;
  margin: 32px auto 0;
  text-align: center;
}
.chall-disclaimer-toggle summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--text-muted);
  list-style: none;
  padding: 9px 18px;
  border: 1px solid var(--border);
  border-radius: 50px;
  transition: color 0.2s ease, border-color 0.2s ease;
  user-select: none;
}
.chall-disclaimer-toggle summary::-webkit-details-marker { display: none; }
.chall-disclaimer-toggle summary::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  transition: transform 0.25s ease;
}
.chall-disclaimer-toggle[open] summary::after {
  transform: rotate(180deg);
}
.chall-disclaimer-toggle summary:hover,
.chall-disclaimer-toggle summary:focus-visible {
  color: var(--text-secondary);
  border-color: var(--text-muted);
  outline: none;
}
.chall-disclaimer-toggle .chall-disclaimer-body {
  margin: 16px auto 0;
  padding: 24px 28px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.75;
  text-align: left;
}

/* Entry Tiers — used by Clock The 3 (faster time = more draw entries) */
.chall-entry-tiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 1080px;
  margin: 0 auto;
}
.chall-entry-tier {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 18px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.chall-entry-tier::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent);
  opacity: 0.6;
  transform-origin: left;
}
.chall-entry-tier-name {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.chall-entry-tier-time {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-bottom: 8px;
}
.chall-entry-tier-entries {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--text-secondary);
}
.chall-entry-tier-entries strong {
  color: var(--text-primary);
  font-weight: 800;
}

/* Prize Pool single-card layout — for challenges with one pool of positions
   (e.g. Share the Miles: 1st/2nd/3rd/4th drawn from same pool) instead of
   distinct per-tier prize packs. */
.chall-prize-pool-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  max-width: 720px;
  margin: 0 auto;
}
.chall-prize-pool-card h3 {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.8px; /* small all-caps eyebrow — positive tracking is intentional */
  line-height: 1.2;
  color: var(--accent);
  margin-bottom: 20px;
}
.chall-prize-pool-positions {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}
.chall-prize-pool-positions > li {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.chall-prize-pool-positions > li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.chall-prize-pool-positions .rank {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
}
.chall-prize-pool-positions .item {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.4;
}
.chall-prize-pool-positions .value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Top-Performer callout — distinct from the random-draw pool */
.chall-top-performer {
  background: linear-gradient(180deg, var(--accent-subtle) 0%, var(--bg-card) 100%);
  border: 1px solid var(--border-accent);
  border-radius: 14px;
  padding: 24px 28px;
  max-width: 720px;
  margin: 16px auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.chall-top-performer-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 4px;
}
.chall-top-performer-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.3;
}
.chall-top-performer-criteria {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 4px;
  flex-basis: 100%;
}

/* #ShareTheMiles social callout — full-width, used between rules grid and disclaimer */
.chall-social-callout {
  margin: 32px auto 0;
  padding: 28px 32px;
  background: linear-gradient(135deg, var(--accent-subtle) 0%, var(--bg-card) 70%);
  border: 1px solid var(--border-accent);
  border-radius: 14px;
  max-width: 960px;
  text-align: center;
}
.chall-social-callout-tag {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--accent);
  margin-bottom: 12px;
  text-transform: none;
}
.chall-social-callout p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto;
}
.chall-social-callout p + p {
  margin-top: 10px;
}

@media (max-width: 768px) {
  .chall-entry-tiers { grid-template-columns: repeat(2, 1fr); }
  .chall-prize-pool-positions > li { grid-template-columns: 50px 1fr; }
  .chall-prize-pool-positions .value { grid-column: 2; padding-left: 0; }
}

/* Compact prize-pack header used when the breakdown lives high on the page.
   Artwork already shows the prize value, so this variant ditches the
   meta strip and locks the image to its native 2:1 ratio so nothing
   gets horizontally stretched on widescreen. */
.chall-preview-prize-pack--compact {
  max-width: 880px;
  margin: 0 auto;
  background: transparent;
  border: none;
}
.chall-preview-prize-pack--compact .chall-preview-prize-image {
  aspect-ratio: 2 / 1;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.chall-preview-prize-pack--compact .chall-preview-prize-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.chall-rule-block--cta {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--accent-subtle) 0%, var(--bg-card) 80%);
  border-color: var(--border-accent);
}
.chall-rule-block--cta p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 20px;
}
.chall-rule-block--cta p strong {
  color: var(--text-primary);
  font-weight: 800;
}
.chall-rule-block--cta .btn {
  align-self: flex-start;
  margin-top: auto;
}
.chall-evidence-q {
  max-width: 760px;
  margin: 24px auto 0;
  padding: 20px 24px;
  background: var(--accent-subtle);
  border: 1px solid var(--border-accent);
  border-radius: 12px;
}
.chall-evidence-q-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.chall-evidence-q-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.5;
}

.chall-prize-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1080px;
  margin: 0 auto;
}
.chall-prize-tier {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
}
.chall-prize-tier-rank {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.chall-prize-tier h3 {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 18px;
  color: var(--text-primary);
}
.chall-prize-tier-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 18px 0;
  padding: 0;
  flex-grow: 1;
}
.chall-prize-tier-items li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.chall-prize-tier-items li span {
  flex-shrink: 0;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.chall-prize-tier-total {
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.3px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.chall-prize-pool-total {
  text-align: center;
  margin-top: 56px;
}
.chall-prize-pool-total-value {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--accent);
  line-height: 1;
}
.chall-prize-pool-total-label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 12px;
}

@media (max-width: 768px) {
  .chall-rules-grid { grid-template-columns: 1fr; }
  .chall-prize-tiers { grid-template-columns: 1fr; }
  .chall-rule-block { padding: 22px; }
  .chall-prize-tier { padding: 24px 20px; }
}

@media (max-width: 768px) {
  .chall-preview-hero {
    min-height: 60vh;
    padding: 130px 24px 64px;
  }
  .chall-preview-stats-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .chall-preview-stat-value {
    font-size: 22px;
  }
  .chall-preview-prize-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .chall-preview-cta {
    padding: 80px 24px;
  }
}

/* ============================================================
   STICKY NAV - Full nav with links (not just logo+CTA like TLM)
   ============================================================ */
.sticky-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: env(safe-area-inset-top) 32px 0;
  height: calc(72px + env(safe-area-inset-top));
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(8, 8, 8, 0.0);
  backdrop-filter: blur(0px);
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease;
}

.sticky-nav.scrolled {
  background: rgba(8, 8, 8, 0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}

/* On mobile, the nav always carries a backdrop so the iOS safe-area /
   notch region above the logo isn't a transparent gap that shows the
   page content scrolling beneath. Keep desktop fully transparent at
   top for the immersive hero treatment. */
@media (max-width: 768px) {
  .sticky-nav {
    background: rgba(8, 8, 8, 0.7);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}

.nav-brand {
  text-decoration: none;
  display: flex;
  align-items: center;
}

.nav-logo {
  height: 28px;
  width: auto;
  filter: brightness(0) invert(1);
}

/* ---- NAV LINKS (horizontal on desktop) ---- */
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

.nav-links a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s;
}

.nav-links a:hover {
  color: var(--text-primary);
}

.nav-links a.active {
  color: var(--accent);
}

/* ---- EVENTS DROPDOWN ---- */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-trigger {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-dropdown-trigger::after {
  content: '';
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  transition: transform 0.2s;
}

.nav-dropdown:hover .nav-dropdown-trigger::after {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 12px;
  background: rgba(18, 18, 18, 0.98);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 0;
  min-width: 200px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-8px);
  transition: opacity 0.2s, transform 0.2s;
}

/* Invisible hover bridge — fills the 12px margin-top gap so moving
   the cursor from the trigger to the menu doesn't break the hover state. */
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu a {
  display: block;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.nav-dropdown-menu a:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
}

/* ---- NAV CTA BUTTON ----
   Tightens .btn-sm for nav fit. Typography (Inter Bold 14, sentence
   case, no tracking) inherits from the base .btn — only padding +
   layout overrides here. */
.btn.nav-cta-link {
  margin-left: 16px;
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* ---- MOBILE HAMBURGER ---- */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  z-index: 1001;
}

.nav-hamburger span {
  width: 24px;
  height: 2px;
  background: var(--text-primary);
  transition: all 0.3s ease;
}

.nav-hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.nav-hamburger.active span:nth-child(2) {
  opacity: 0;
}

.nav-hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ---- MOBILE OVERLAY MENU ---- */
.nav-mobile {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(8, 8, 8, 0.98);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.nav-mobile.active {
  display: flex;
}

.nav-mobile a {
  font-family: 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  text-decoration: none;
  transition: color 0.2s;
}

.nav-mobile a:hover {
  color: var(--accent);
}

.nav-mobile .nav-mobile-sub {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 2px;
}

/* ============================================================
   IMAGE BREAK - Parallax section divider
   ============================================================ */
.image-break {
  width: 100%;
  height: 50vh;
  min-height: 350px;
  position: relative;
  overflow: hidden;
}

.image-break-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.image-break::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, var(--bg-primary) 0%, transparent 20%, transparent 80%, var(--bg-primary) 100%);
}

/* ============================================================
   FAQ ACCORDION (reusable on any page)
   ============================================================ */
.faq-list {
  max-width: 700px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 0;
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  user-select: none;
  transition: color 0.2s;
  letter-spacing: 0.3px;
}

.faq-question:hover {
  color: var(--accent);
}

.faq-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  margin-left: 20px;
}

.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background: var(--text-muted);
  transition: transform 0.3s ease;
}

.faq-icon::before {
  width: 14px;
  height: 1.5px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.faq-icon::after {
  width: 1.5px;
  height: 14px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.faq-item.active .faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.faq-item.active .faq-answer {
  max-height: 400px;
}

.faq-answer-inner {
  padding-bottom: 28px;
  color: var(--text-secondary);
  line-height: 1.9;
  font-size: 14px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  padding: 72px 24px 40px;
  border-top: 1px solid var(--border);
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 60px;
}

.footer-logo {
  height: 36px;
  width: auto;
  filter: brightness(0) invert(1);
  margin-bottom: 20px;
  display: block;
}

.footer-tagline {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 8px;
}

.footer-app-badges {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.app-badge {
  height: 44px;
  width: auto;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.app-badge:hover {
  transform: translateY(-2px);
  opacity: 0.92;
}

/* ============================================================
   MARQUEE — infinite horizontal scroll for prize & winner showcases
   Items inside .marquee-track are duplicated in HTML so the loop is
   seamless. Track animates from 0 -> -50% (one full set width).
   ============================================================ */
.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}
.marquee + .marquee {
  margin-top: 14px;
}
.marquee-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: marquee-scroll 80s linear infinite;
  /* Pause until the track scrolls into view so the first items are
     always visible on entry, regardless of how long the user took
     to scroll down the page. JS adds .in-view via IntersectionObserver. */
  animation-play-state: paused;
  will-change: transform;
}
.marquee-track.in-view {
  animation-play-state: running;
}
.marquee-track--reverse {
  animation-name: marquee-scroll-reverse;
}
.marquee-track--fast {
  animation-duration: 60s;
}
@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes marquee-scroll-reverse {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
/* Marquees keep scrolling on hover by design — they're decorative motion,
   not interactive content. Pausing felt jumpy and slowed the page rhythm. */
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
    transform: none;
  }
  .marquee {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Prize marquee item — purely visual, non-clickable image card.
   Artwork shows the prize name + value; no overlay needed.
   Same hover treatment as .winner-marquee-item for consistency. */
.prize-marquee-item {
  flex-shrink: 0;
  width: 520px;
  aspect-ratio: 2 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}
.prize-marquee-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.prize-marquee-item:hover {
  transform: translateY(-4px) scale(1.015);
  border-color: var(--border-accent);
  box-shadow: 0 18px 56px rgba(0,0,0,0.55),
              0 0 0 1px var(--border-accent) inset;
}

/* Winner marquee item — square social-post-style card */
.winner-marquee-item {
  flex-shrink: 0;
  width: 240px;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}
.winner-marquee-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.winner-marquee-item:hover {
  transform: translateY(-4px) scale(1.015);
  border-color: var(--border-accent);
  box-shadow: 0 18px 56px rgba(0,0,0,0.55),
              0 0 0 1px var(--border-accent) inset;
}

@media (max-width: 768px) {
  .prize-marquee-item { width: 400px; }
  .winner-marquee-item { width: 200px; }
}
@media (max-width: 480px) {
  .prize-marquee-item { width: 320px; }
  .winner-marquee-item { width: 160px; }
}

.footer-nav-col {
  display: flex;
  flex-direction: column;
  padding-top: 4px;
}

.footer-nav-col a {
  font-size: 15px;
  color: var(--text-secondary);
  text-decoration: none;
  line-height: 2.4;
  transition: color 0.2s;
}

.footer-nav-col a:hover {
  color: var(--accent);
}

.footer-signup {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 40px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.footer-signup-text {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.footer-signup-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

.footer-signup-form {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.footer-signup-form input {
  padding: 12px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
  width: 260px;
  transition: border-color 0.2s;
}

.footer-signup-form input:focus {
  border-color: var(--accent);
}

.footer-signup-form input::placeholder {
  color: var(--text-muted);
}

.footer-signup-form button {
  padding: 12px 24px;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #000;
  background: var(--cta);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
  white-space: nowrap;
}

.footer-signup-form button:hover {
  background: var(--cta-light);
  box-shadow: 0 4px 20px var(--cta-glow);
  transform: translateY(-2px);
}

.footer-bottom {
  max-width: var(--max-width);
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-muted);
}

.footer-social-icons {
  display: flex;
  gap: 20px;
}

.footer-social-icons a {
  color: var(--text-muted);
  transition: color 0.2s;
  display: flex;
}

.footer-social-icons a:hover {
  color: var(--text-primary);
}

/* ============================================================
   BACK TO TOP
   ============================================================ */
.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 44px;
  height: 44px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 999;
}

.back-to-top.visible {
  opacity: 1;
  pointer-events: all;
}

.back-to-top:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-3px);
}

.back-to-top svg {
  width: 18px;
  height: 18px;
  stroke: var(--text-secondary);
  transition: stroke 0.3s ease;
}

.back-to-top:hover svg {
  stroke: #ffffff;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .section {
    padding: 80px 0;
  }

  .image-break {
    height: 35vh;
    min-height: 250px;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .footer-signup {
    flex-direction: column;
    text-align: center;
    padding: 32px 24px;
  }

  .footer-signup-form {
    width: 100%;
    flex-direction: column;
  }

  .footer-signup-form input {
    width: 100%;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .footer-social-icons {
    justify-content: center;
  }

  .sticky-nav {
    padding: 0 12px;
    height: 64px;
  }

  .nav-links {
    display: none;
  }

  .btn.nav-cta-link {
    margin-left: 8px;
    padding: 8px 14px;
    font-size: 12px;
  }

  .nav-hamburger {
    display: flex;
  }
}

/* ============================================================
   REDUCED MOTION
   Honour OS-level "reduce motion" preference. Keeps fades and
   colour transitions (purposeful), kills transforms (parallax,
   slide-ins, hover lifts, scale).
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Reveal: skip the slide-in, just be visible. */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Parallax image breaks: stop translating the bg. */
  .image-break-bg {
    transform: none !important;
  }
}