/* ===================================================================
   Prairie Tickets — Design System v2 (calm / premium redesign)
   =================================================================== */

:root {
  /* Brand colours — exact set, no additions */
  --navy: #003273;
  --royal: #004AAD;
  --paper: #FBFBFB;
  --deep-navy: #003273; /* alias kept for clarity in dark-section rules */
  --soft-sky: #A9DEFF;
  --ice: #EAF7FF;
  --sky: #38B6FF;
  --slate: #536B85;

  --navy-2: #001d45; /* computed darker navy, used only for gradients */

  --heading-font: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body-font: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --marquee-font: "Archivo Black", "Helvetica Neue", Arial, sans-serif; /* best-effort match — see note in build summary */
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 8rem;

  --section-pad-desktop: 140px;
  --section-pad-mobile: 80px;

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 24px;

  --shadow-sm: 0 8px 24px -12px rgba(0, 50, 115, 0.18);
  --shadow-md: 0 24px 48px -20px rgba(0, 50, 115, 0.28);
  --shadow-lg: 0 40px 80px -30px rgba(0, 20, 50, 0.45);

  --nav-h: 84px;
  --max-w: 1200px;
}

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

html { scroll-behavior: auto; overflow-x: hidden; } /* JS drives offset-aware smooth scroll; overflow-x here (not just on body) stops the off-canvas fixed mobile nav from ever widening the document */

body {
  background: var(--paper);
  color: var(--navy);
  font-family: var(--body-font);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

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

h1, h2, h3, h4 {
  font-family: var(--heading-font);
  font-weight: 500;
  color: var(--navy);
  letter-spacing: -0.01em;
}
em { font-style: italic; color: var(--royal); }
section[id] { scroll-margin-top: var(--nav-h); }

.eyebrow {
  font-family: var(--body-font);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--slate);
}
.eyebrow--light { color: var(--soft-sky); }

.section {
  padding: var(--section-pad-desktop) 0;
}
.section--ice { background: var(--ice); }
.section--navy { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%); color: var(--paper); }
.section--navy h2, .section--navy h3 { color: var(--paper); }
.section--navy .eyebrow { color: var(--soft-sky); }

.section-head {
  max-width: 46rem;
  margin: 0 auto var(--space-lg);
  text-align: center;
}
.section-head h2 {
  font-size: clamp(2rem, 3.6vw, 2.85rem);
  line-height: 1.15;
  margin-top: 0.85rem;
}
.section-head p {
  margin-top: 0.85rem;
  color: var(--slate);
  font-size: 1.05rem;
}
.section--navy .section-head p { color: rgba(251,251,251,0.75); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--body-font); font-weight: 500; font-size: 0.95rem;
  padding: 1rem 2rem;
  border-radius: 999px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.btn-primary {
  background: var(--royal); color: var(--paper);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); background: #003d8f; }
.btn-secondary {
  background: transparent; color: var(--royal);
  border: 1.5px solid var(--soft-sky);
}
.btn-secondary:hover { background: var(--ice); border-color: var(--sky); }
.section--navy .btn-secondary { color: var(--paper); border-color: rgba(169,222,255,0.4); }
.section--navy .btn-secondary:hover { background: rgba(169,222,255,0.1); }
.btn-link {
  color: var(--royal); font-weight: 500; font-size: 0.95rem;
  border-bottom: 1.5px solid var(--soft-sky);
  padding-bottom: 2px;
}
.section--navy .btn-link { color: var(--soft-sky); border-color: rgba(169,222,255,0.4); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none !important; }

/* ---------- Reveal-on-scroll ---------- */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}
html.no-js [data-reveal] { opacity: 1; transform: none; }

/* ---------- Loading screen ---------- */
.loader {
  position: fixed; inset: 0; z-index: 999;
  background: var(--navy);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem;
  transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease);
}
.loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__mark {
  width: 88px; height: 88px; border-radius: 22px;
  opacity: 0; transform: scale(0.92);
  animation: loaderFadeScale 0.7s var(--ease) forwards 0.15s;
}
.loader__word {
  font-family: var(--body-font); font-size: 0.82rem; letter-spacing: 0.28em;
  color: var(--soft-sky); text-transform: uppercase;
  opacity: 0;
  animation: loaderFadeScale 0.6s var(--ease) forwards 0.4s;
}
.loader__bar {
  width: 140px; height: 2px; border-radius: 2px;
  background: rgba(169, 222, 255, 0.2);
  overflow: hidden;
  opacity: 0;
  animation: loaderFadeScale 0.4s var(--ease) forwards 0.55s;
}
.loader__bar::after {
  content: ""; display: block; height: 100%; width: 40%;
  background: var(--sky);
  animation: loaderBar 1.1s var(--ease) forwards 0.6s;
}
@keyframes loaderFadeScale { to { opacity: 1; transform: scale(1); } }
@keyframes loaderBar { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
html.no-js .loader { display: none; }

/* ---------- Nav ---------- */
/* Always a dark, translucent strip so the transparent (white-accented) logo stays
   legible everywhere; the tab strip itself scrolls horizontally on narrow screens
   instead of hiding behind a hamburger, so every tab stays reachable on phones. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: linear-gradient(160deg, rgba(0,50,115,0.92) 0%, rgba(0,32,74,0.92) 100%);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.35s var(--ease), height 0.35s var(--ease);
}
.nav.is-scrolled {
  box-shadow: 0 4px 20px rgba(0, 20, 48, 0.28);
}
.nav__inner {
  width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
}
.nav__logo {
  display: flex; align-items: center; gap: 0.65rem;
  flex-shrink: 0;
}
.nav__logo-img { width: 58px; height: 58px; display: block; flex-shrink: 0; }
.nav__links {
  display: flex; align-items: center; gap: 1.3rem;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  min-width: 0;
  flex: 1 1 auto;
  /* Fade only the edge that actually has more tabs hidden behind it — JS toggles
     --fade-l/--fade-r between 0 and 16px so the first/last tab is never clipped
     when there's nothing left to scroll to on that side. */
  --fade-l: 0px;
  --fade-r: 0px;
  mask-image: linear-gradient(to right, transparent 0, black var(--fade-l), black calc(100% - var(--fade-r)), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black var(--fade-l), black calc(100% - var(--fade-r)), transparent 100%);
}
.nav__links::-webkit-scrollbar { display: none; }
.nav__links a {
  position: relative;
  font-size: 0.88rem; font-weight: 500;
  color: rgba(251,251,251,0.85);
  padding: 0.4rem 0.05rem;
  transition: color 0.25s ease;
  flex-shrink: 0;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; border-radius: 2px; background: var(--sky);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav__links a:hover::after,
.nav__links a.is-active::after { transform: scaleX(1); }
.nav__links a.is-active { color: var(--sky) !important; }
.nav__right { display: flex; align-items: center; gap: 1.25rem; flex-shrink: 0; }
.nav__phone {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.9rem; font-weight: 500; white-space: nowrap;
  color: rgba(251,251,251,0.85);
  transition: color 0.2s ease;
}
.nav__phone:hover { color: var(--sky); }
.nav__phone svg { width: 16px; height: 16px; flex-shrink: 0; }
.nav__cta.btn-primary { padding: 0.75rem 1.5rem; font-size: 0.88rem; white-space: nowrap; }

/* ---------- Hamburger toggle (mobile only) ---------- */
.nav__toggle {
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 40px; height: 40px; flex-shrink: 0;
  background: none; border: none; padding: 0; cursor: pointer;
}
.nav__toggle span {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--paper);
  transition: transform 0.3s var(--ease), opacity 0.25s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Mobile dropdown (everything from the top bar, stacked) ---------- */
.nav__dropdown {
  position: absolute; top: 100%; left: 0; right: 0;
  display: flex; flex-direction: column;
  background: linear-gradient(170deg, rgba(0,50,115,0.98) 0%, rgba(0,32,74,0.98) 100%);
  backdrop-filter: blur(14px);
  max-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; opacity: 0;
  transition: max-height 0.4s var(--ease), opacity 0.3s var(--ease);
  box-shadow: 0 16px 28px rgba(0, 20, 48, 0.32);
}
.nav__dropdown.is-open { max-height: calc(100vh - var(--nav-h)); opacity: 1; }
.nav__dropdown a {
  padding: 1rem 24px;
  font-size: 1rem; font-weight: 500;
  color: rgba(251,251,251,0.9);
  border-bottom: 1px solid rgba(251,251,251,0.1);
}
.nav__dropdown a.is-active { color: var(--sky); }
.nav__dropdown-phone { display: flex; align-items: center; gap: 0.6rem; }
.nav__dropdown-phone svg { width: 16px; height: 16px; flex-shrink: 0; }
.nav__dropdown-cta.btn-primary { margin: 1.1rem 24px 1.4rem; text-align: center; border-bottom: none; }

@media (max-width: 760px) {
  .nav__inner { gap: 0.6rem; padding: 0 16px; }
  .nav__logo-img { width: 42px; height: 42px; }
  .nav__links, .nav__phone, .nav__cta { display: none; }
  .nav__right { gap: 0; }
  .nav__toggle { display: flex; }
}
@media (min-width: 761px) {
  .nav__dropdown { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--nav-h) + 3rem) 0 5rem;
  overflow: hidden;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  color: var(--paper);
}
.hero__field {
  position: absolute; inset: 0; opacity: 0.5;
  background-image: repeating-linear-gradient(115deg, rgba(169,222,255,0.06) 0px, rgba(169,222,255,0.06) 1px, transparent 1px, transparent 140px);
}
.hero__glow {
  position: absolute; width: 60vw; height: 60vw; border-radius: 50%;
  top: -25vw; right: -15vw; filter: blur(80px);
  background: radial-gradient(circle, var(--royal) 0%, transparent 70%);
  opacity: 0.55;
}
.hero__horizon {
  position: absolute; left: 0; right: 0; bottom: 18%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(169,222,255,0.35), transparent);
}
.hero__inner { position: relative; z-index: 2; max-width: var(--max-w); margin: 0 auto; padding: 0 24px; text-align: center; }
.hero__title {
  font-size: clamp(2.6rem, 6.4vw, 5.2rem);
  line-height: 1.05;
  max-width: 16ch; margin: 0 auto;
  color: var(--paper); /* global h1-h4 rule defaults to navy text — must override on this dark hero */
}
.hero__title em { color: var(--sky); } /* royal-on-navy (the global em colour) is too low-contrast here */
.hero__sub {
  margin: 1.75rem auto 0; max-width: 32rem;
  font-size: 1.1rem; color: rgba(251,251,251,0.78);
}
.hero__actions { margin-top: 2.5rem; display: flex; align-items: center; justify-content: center; gap: 1.75rem; flex-wrap: wrap; }
.hero__ticker {
  margin-top: 3.5rem;
  font-size: 0.82rem; letter-spacing: 0.08em; color: rgba(251,251,251,0.55);
}

/* ---------- Hero trust strip ---------- */
.hero__trust {
  margin-top: 2rem;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 0.6rem 1.1rem;
}
.hero__trust-item {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.82rem; font-weight: 500; color: rgba(251,251,251,0.7);
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(169,222,255,0.28);
  border-radius: 999px;
  white-space: nowrap;
}
.hero__trust-item--rating {
  color: var(--paper);
  border-color: rgba(245,179,1,0.4);
  background: rgba(245,179,1,0.08);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.hero__trust-item--rating:hover { background: rgba(245,179,1,0.16); border-color: rgba(245,179,1,0.6); }
.hero__trust-stars { color: #F5B301; letter-spacing: 0.05em; font-size: 0.78rem; }

/* ---------- Why Prairie Tickets (homepage differentiators) ---------- */
.diff-section { background: var(--paper); }
.diff-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.diff-card {
  padding: 2rem 1.75rem;
  border-radius: var(--radius-md);
  background: var(--ice);
  border: 1px solid transparent;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.diff-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--soft-sky); background: var(--paper); }
.diff-card__num {
  display: block; font-family: var(--heading-font); font-size: 1.6rem; font-style: italic;
  color: var(--sky); margin-bottom: 0.75rem;
}
.diff-card h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.diff-card p { color: var(--slate); font-size: 0.92rem; line-height: 1.55; }

/* ---------- Explore Our Services ---------- */
.explore-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.explore-card {
  background: var(--paper); border: 1px solid rgba(169,222,255,0.5);
  border-radius: var(--radius-md); padding: 2rem;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.explore-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--sky); }
.explore-card__icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ice); color: var(--royal);
  margin-bottom: 1.25rem;
}
.explore-card__icon svg { width: 22px; height: 22px; }
.explore-card h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.explore-card p { color: var(--slate); font-size: 0.92rem; }

/* ---------- Why We Exist ---------- */
.about-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center;
}
.about-copy h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.2; }
.about-copy p { margin-top: 1.25rem; color: var(--slate); font-size: 1.05rem; max-width: 30rem; }
.about-copy .closing-line { margin-top: 2rem; font-weight: 500; color: var(--navy); }
.stake-cards { display: flex; flex-direction: column; gap: 1rem; }
.stake-card {
  display: flex; align-items: flex-start; gap: 1rem;
  background: var(--ice); border-radius: var(--radius-md);
  padding: 1.5rem;
}
.stake-card__icon {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px;
  background: var(--paper); color: var(--royal);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.stake-card__icon svg { width: 21px; height: 21px; }
.stake-card h4 { font-size: 1.02rem; font-family: var(--body-font); font-weight: 600; }
.stake-card p { color: var(--slate); font-size: 0.9rem; margin-top: 0.2rem; }

/* ---------- Tickets We Fight ---------- */
.tickets-rail {
  display: flex; gap: 1.25rem; overflow-x: auto; padding: 0.5rem 0 1.5rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.tickets-rail::-webkit-scrollbar { height: 6px; }
.tickets-rail::-webkit-scrollbar-thumb { background: var(--soft-sky); border-radius: 3px; }
.ticket-card {
  scroll-snap-align: start;
  flex: 0 0 260px;
  background: var(--paper); border: 1px solid rgba(169,222,255,0.5);
  border-radius: var(--radius-md); padding: 1.75rem;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.ticket-card:hover, .ticket-card:focus-within { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.ticket-card__icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--ice); color: var(--royal);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.1rem;
}
.ticket-card__icon svg { width: 22px; height: 22px; }
.ticket-card__tag {
  display: inline-block; margin-bottom: 0.6rem;
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--royal); background: var(--ice);
  padding: 0.3rem 0.7rem; border-radius: 999px;
}
.ticket-card h3 { font-size: 1.1rem; font-family: var(--body-font); font-weight: 600; margin-bottom: 0.35rem; }
.ticket-card p { color: var(--slate); font-size: 0.88rem; }
.ticket-card__extra {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.35s var(--ease), opacity 0.35s var(--ease), margin-top 0.35s var(--ease);
  font-size: 0.85rem; color: var(--slate);
}
.ticket-card:hover .ticket-card__extra, .ticket-card:focus-within .ticket-card__extra {
  max-height: 4rem; opacity: 1; margin-top: 0.6rem;
}
.tickets-footer { text-align: center; margin-top: 1.5rem; }
.tickets-footer p { color: var(--slate); margin-bottom: 0.5rem; }

/* ---------- How It Works ---------- */
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; position: relative; }
.timeline::before {
  content: ""; position: absolute; top: 23px; left: 12%; right: 12%; height: 2px;
  background: rgba(169,222,255,0.4);
}
.timeline__fill {
  position: absolute; top: 23px; left: 12%; height: 2px; width: 0;
  background: var(--sky);
  transition: width 1s var(--ease);
}
.timeline-step { position: relative; text-align: center; }
.timeline-step__num {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--soft-sky); color: var(--royal);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--heading-font); font-weight: 500; font-size: 1.05rem;
  margin: 0 auto 1.25rem; position: relative; z-index: 2;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.timeline-step.is-active .timeline-step__num { background: var(--royal); border-color: var(--royal); color: var(--paper); }
.timeline-step__icon { color: var(--royal); margin: 0 auto 0.75rem; width: 26px; height: 26px; }
.timeline-step h3 { font-size: 1.05rem; font-family: var(--body-font); font-weight: 600; margin-bottom: 0.4rem; }
.timeline-step p { color: var(--slate); font-size: 0.88rem; max-width: 15rem; margin: 0 auto; }

/* ---------- Demerits ---------- */
.tabs {
  display: flex; justify-content: center; gap: 0.5rem; margin-bottom: var(--space-lg);
  background: var(--ice); padding: 0.4rem; border-radius: 999px;
  width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.tab-btn {
  padding: 0.7rem 1.6rem; border-radius: 999px; font-weight: 500; font-size: 0.92rem;
  color: var(--slate); transition: background 0.3s var(--ease), color 0.3s var(--ease);
  white-space: nowrap; flex-shrink: 0;
}
.tab-btn.is-active { background: var(--royal); color: var(--paper); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: var(--space-lg); }
.stat-card { background: var(--paper); border-radius: var(--radius-md); padding: 1.75rem; text-align: center; box-shadow: var(--shadow-sm); }
.stat-card__num { font-family: var(--heading-font); font-size: 2.4rem; color: var(--royal); }
.stat-card__label { color: var(--slate); font-size: 0.88rem; margin-top: 0.35rem; }

.demerit-table { width: 100%; border-collapse: collapse; background: var(--paper); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.demerit-table th, .demerit-table td { padding: 1rem 1.25rem; text-align: left; font-size: 0.92rem; }
.demerit-table thead th { background: var(--navy); color: var(--paper); font-weight: 500; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }
.demerit-table tbody tr:nth-child(even) { background: var(--ice); }
.demerit-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--royal); color: var(--paper); font-weight: 600; font-size: 0.9rem;
}
.demerit-source { margin-top: 1rem; text-align: center; color: var(--slate); font-size: 0.8rem; }

.court-callout {
  display: flex; gap: 1.5rem; align-items: center;
  background: var(--ice); border: 1.5px solid var(--soft-sky);
  border-radius: var(--radius-md); padding: 1.5rem 1.75rem; margin-bottom: 1.5rem;
}
.court-callout__badge {
  flex-shrink: 0; text-align: center;
  background: var(--navy); color: var(--paper);
  font-weight: 600; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.03em;
  border-radius: 14px; padding: 0.9rem 1rem; line-height: 1.35; min-width: 112px;
}
.court-callout__body h4 { font-family: var(--heading-font); font-weight: 500; font-size: 1.05rem; margin-bottom: 0.35rem; color: var(--navy); }
.court-callout__body p { color: var(--slate); font-size: 0.92rem; }
@media (max-width: 600px) {
  .court-callout { flex-direction: column; text-align: center; }
}

.irs-intro { max-width: 46rem; margin: var(--space-lg) auto 1.5rem; text-align: center; }
.irs-intro h3 { font-family: var(--heading-font); font-weight: 500; font-size: 1.5rem; color: var(--navy); margin-bottom: 0.6rem; }
.irs-intro p { color: var(--slate); font-size: 0.96rem; line-height: 1.6; }
.irs-intro strong { color: var(--royal); font-style: normal; }

.irs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-bottom: 1.5rem; }
.irs-card { background: var(--paper); border-radius: var(--radius-md); padding: 1.5rem 1.5rem 1.75rem; box-shadow: var(--shadow-sm); }
.irs-card--wide { grid-column: 1 / -1; }
.irs-card__head { margin-bottom: 1rem; }
.irs-card__tag {
  display: inline-block; font-family: var(--heading-font); font-weight: 500; font-size: 1.02rem;
  color: var(--paper); background: var(--navy); padding: 0.3rem 0.9rem; border-radius: 999px; margin-bottom: 0.65rem;
}
.irs-card__head p { color: var(--slate); font-size: 0.86rem; line-height: 1.5; }
.irs-card__simple { color: var(--slate); font-size: 0.92rem; line-height: 1.6; }

.irs-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
.irs-table th, .irs-table td { padding: 0.6rem 0.7rem; text-align: left; }
.irs-table thead th { background: var(--ice); color: var(--navy); font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; }
.irs-table tbody tr:not(:last-child) { border-bottom: 1px solid var(--ice); }
@media (max-width: 760px) {
  .irs-grid { grid-template-columns: 1fr; }
}

.updating-soon { text-align: center; padding: var(--space-xl) 1rem; }
.updating-soon svg { width: 56px; height: 56px; color: var(--soft-sky); margin: 0 auto 1.25rem; }
.updating-soon h3 { font-size: 1.4rem; margin-bottom: 0.6rem; }
.updating-soon p { color: var(--slate); max-width: 26rem; margin: 0 auto 1.5rem; }

/* ---------- FAQ accordion ---------- */
.faq-list { max-width: 44rem; margin: 0 auto; display: flex; flex-direction: column; gap: 0.85rem; }
.faq-item {
  background: var(--paper); border: 1px solid var(--soft-sky); border-radius: var(--radius-md);
  padding: 0.25rem 1.5rem; transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.faq-item[open] { border-color: var(--sky); box-shadow: var(--shadow-sm); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 0;
  font-family: var(--heading-font); font-size: 1.05rem; color: var(--navy);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--royal); }
.faq-item__icon {
  position: relative; flex-shrink: 0; width: 20px; height: 20px;
}
.faq-item__icon::before, .faq-item__icon::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  background: var(--royal); border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.faq-item__icon::before { width: 14px; height: 2px; }
.faq-item__icon::after { width: 2px; height: 14px; }
.faq-item[open] .faq-item__icon::after { opacity: 0; }
.faq-item p { color: var(--slate); font-size: 0.94rem; line-height: 1.65; padding: 0 0 1.25rem; }
@media (max-width: 600px) {
  .faq-item { padding: 0.15rem 1.1rem; }
  .faq-item summary { font-size: 0.98rem; }
}

/* ---------- What You Get ---------- */
.benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.benefit-card {
  background: var(--paper); border: 1px solid rgba(169,222,255,0.5);
  border-radius: var(--radius-md); padding: 1.85rem;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.benefit-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.benefit-card__icon {
  width: 42px; height: 42px; border-radius: 11px; background: var(--ice); color: var(--royal);
  display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;
  transition: color 0.3s ease;
}
.benefit-card:hover .benefit-card__icon { color: var(--sky); }
.benefit-card__icon svg { width: 21px; height: 21px; }
.benefit-card h3 { font-size: 1.02rem; font-family: var(--body-font); font-weight: 600; margin-bottom: 0.3rem; }
.benefit-card p { color: var(--slate); font-size: 0.88rem; }

/* ---------- Where We Fight ----------
   All three provinces are projected at the same scale (same px-per-degree)
   and share almost exactly the same latitude range (49-60N), so sizing them
   by a shared HEIGHT — rather than a shared width — is what makes them line
   up and "match": each keeps its true relative width (Saskatchewan narrower,
   Manitoba wider) while sitting at the same real-world scale, borders aligned.
   The label text lives BELOW each shape (not overlaid on top of it): these are
   real, irregular province borders, so a polygon's interior width varies a lot
   from one row of pixels to the next — text centered over it can fit the
   overall bounding box yet still spill past the actual outline at that exact
   height. Putting the caption in normal flow underneath sidesteps that
   entirely, so every line always has its full, real width to sit in. */
.provinces-row { display: flex; justify-content: center; align-items: flex-start; gap: 2.5rem; flex-wrap: wrap; }
.province-card { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 280px; }
.province-shape {
  height: clamp(260px, 30vw, 320px);
  cursor: default;
}
.province-shape svg { height: 100%; width: auto; display: block; overflow: visible; margin: 0 auto; }
.province-shape path {
  fill: none; stroke: var(--royal); stroke-width: 3; stroke-linejoin: round;
  transition: fill 0.35s var(--ease), stroke 0.35s var(--ease);
}
.province-card:hover .province-shape path { fill: var(--ice); stroke: var(--sky); }
.province-caption { margin-top: 1.5rem; text-align: center; }
.province-caption h3 {
  font-size: 1.3rem; color: var(--navy); transition: color 0.35s var(--ease);
}
.province-card:hover .province-caption h3 { color: var(--royal); }
.province-caption p { color: var(--slate); font-size: 0.9rem; line-height: 1.5; margin-top: 0.4rem; }
.province-caption__courts { margin-top: 0.2rem; }
.province-badge {
  display: inline-block; margin-top: 0.85rem; font-size: 0.68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--royal);
  background: none; border: 1px solid var(--royal); padding: 0.3rem 0.7rem; border-radius: 999px;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}

/* ---------- Reviews ---------- */
.reviews-summary {
  display: inline-flex; align-items: center; gap: 1rem;
  margin: 0 auto var(--space-lg); padding: 1rem 1.75rem;
  background: var(--paper); border-radius: 999px; box-shadow: var(--shadow-sm);
  max-width: 100%;
}
.reviews-summary__stars { display: flex; gap: 0.15rem; color: #F5B301; flex-shrink: 0; }
.reviews-summary__stars svg { width: 20px; height: 20px; }
.reviews-summary p { color: var(--navy); font-weight: 500; font-size: 0.92rem; text-align: left; }
.reviews-summary-wrap { text-align: center; }
.review-carousel { position: relative; max-width: 42rem; margin: 0 auto; }
.review-slide {
  display: none;
  position: relative;
  background: var(--paper); border: 1px solid var(--soft-sky); border-radius: var(--radius-lg); padding: 2.75rem 2.25rem 2.25rem;
  box-shadow: var(--shadow-md); text-align: center;
}
.review-slide.is-active { display: block; animation: stepIn 0.4s var(--ease); }
.review-slide__quote {
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--royal); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--heading-font); font-size: 1.5rem; line-height: 1;
  box-shadow: var(--shadow-sm);
}
.review-slide__stars { display: flex; justify-content: center; gap: 0.15rem; color: #F5B301; margin-bottom: 1rem; }
.review-slide__stars svg { width: 16px; height: 16px; }
.review-slide p.review-slide__text { color: var(--navy); font-size: 1.05rem; line-height: 1.65; }
.review-slide__author { margin-top: 1.5rem; display: flex; align-items: center; justify-content: center; gap: 0.65rem; color: var(--slate); font-size: 0.88rem; font-weight: 500; }
.review-slide__avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(160deg, var(--sky) 0%, var(--royal) 100%);
  color: var(--paper); font-family: var(--heading-font); font-size: 0.82rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.review-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.75rem; }
.review-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--soft-sky); transition: background 0.3s ease, transform 0.3s ease; }
.review-dot.is-active { background: var(--royal); transform: scale(1.3); }
.review-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%; background: var(--paper);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md);
  color: var(--royal); border: 1px solid var(--soft-sky);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.review-arrow:hover { background: var(--royal); color: var(--paper); transform: translateY(-50%) scale(1.06); }
.review-arrow--prev { left: -21px; }
.review-arrow--next { right: -21px; }
.review-arrow svg { width: 18px; height: 18px; }
.expect-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: var(--space-lg); }
.expect-card {
  text-align: center; padding: 1.75rem 1.25rem;
  background: var(--paper); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.expect-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.expect-card__icon { width: 38px; height: 38px; color: var(--royal); margin: 0 auto 0.75rem; }
.expect-card p { font-size: 0.9rem; color: var(--slate); font-weight: 500; }
.reviews-actions { display: flex; justify-content: center; gap: 1.25rem; margin-top: var(--space-lg); flex-wrap: wrap; }

/* ---------- Final CTA ---------- */
.final-cta { text-align: center; }
.final-cta h2 {
  color: var(--paper); font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.15;
  text-transform: uppercase; letter-spacing: -0.01em;
}
.final-cta p { color: rgba(251,251,251,0.75); margin-top: 1rem; font-size: 1.05rem; }
.final-cta .hero__actions { margin-top: 2.25rem; }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; white-space: nowrap; background: var(--navy-2); padding: 1.5rem 0; }
.marquee__track { display: inline-flex; animation: marqueeScroll 22s linear infinite; }
.marquee__track span {
  font-family: var(--marquee-font);
  font-size: clamp(2.5rem, 7vw, 5rem);
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(169,222,255,0.5);
  padding-right: 3rem;
}
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------- Footer ---------- */
.footer { background: var(--navy); color: rgba(251,251,251,0.7); padding: var(--space-xl) 0 var(--space-lg); }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--space-lg); padding-bottom: var(--space-lg); border-bottom: 1px solid rgba(169,222,255,0.15); }
.footer__logo { display: flex; align-items: center; gap: 0.65rem; font-family: var(--heading-font); font-size: 1.3rem; color: var(--paper); }
.footer__logo-img { width: 44px; height: 44px; border-radius: 12px; display: block; flex-shrink: 0; }
.footer__logo span { color: var(--sky); }
.footer__col p { margin-top: 1rem; font-size: 0.9rem; }
.footer__col h4 { font-family: var(--body-font); color: var(--paper); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; }
.footer__col a { display: block; font-size: 0.92rem; margin-bottom: 0.7rem; transition: color 0.2s ease; }
.footer__col a:hover { color: var(--sky); }
.footer__bottom { padding-top: var(--space-md); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; font-size: 0.8rem; }
.footer__disclaimer { text-align: center; margin-top: 1rem; font-size: 0.78rem; color: rgba(251,251,251,0.5); }

/* ===================================================================
   Contact page — multi-step form
   =================================================================== */
.form-page-hero, .page-hero {
  padding: calc(var(--nav-h) + 3.5rem) 0 3rem;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  color: var(--paper); text-align: center;
}
.form-page-hero h1, .page-hero h1 { color: var(--paper); font-size: clamp(2rem, 4.5vw, 3rem); max-width: 20ch; margin: 0 auto; }
.form-page-hero p, .page-hero p { margin-top: 0.85rem; color: rgba(251,251,251,0.75); }
.page-hero .eyebrow { justify-content: center; }

/* ---------- Pager (prev/next between tabs) ---------- */
.pager {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 2rem 0 0.5rem; margin-top: 1rem; border-top: 1px solid var(--soft-sky);
  flex-wrap: wrap;
}
.pager__link { display: flex; flex-direction: column; gap: 0.15rem; max-width: 45%; }
.pager__link span { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate); }
.pager__link strong { font-family: var(--heading-font); font-size: 1.05rem; color: var(--navy); transition: color 0.25s var(--ease); }
.pager__link:hover strong { color: var(--royal); }
.pager__link--next { text-align: right; align-items: flex-end; margin-left: auto; }

.form-shell { max-width: 40rem; margin: 0 auto; padding: var(--space-xl) 24px var(--space-2xl); }
/* ---------- Same form, embedded directly on the homepage ---------- */
.section--form { background: var(--ice); }
.form-shell--embedded {
  padding: var(--space-lg) clamp(1.25rem, 4vw, 2.75rem) var(--space-lg);
  background: var(--paper);
  border-radius: 28px;
  box-shadow: var(--shadow-md);
}
.progress-bar { height: 4px; border-radius: 2px; background: var(--ice); overflow: hidden; margin-bottom: 0.75rem; }
.progress-bar__fill { height: 100%; background: var(--sky); border-radius: 2px; transition: width 0.4s var(--ease); }
.progress-label { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--slate); margin-bottom: var(--space-lg); text-transform: uppercase; letter-spacing: 0.06em; }

.form-step { display: none; }
.form-step.is-active { display: block; animation: stepIn 0.4s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.form-step h2 { font-size: 1.6rem; margin-bottom: 2rem; }

.field-group { margin-bottom: 1.4rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field label {
  display: block; font-size: 0.82rem; font-weight: 500; color: var(--slate);
  margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.04em;
}
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--body-font); font-size: 1rem; color: var(--navy);
  background: var(--ice); border: 1.5px solid transparent; border-radius: 12px;
  padding: 0.9rem 1rem; outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--sky); background: var(--paper); }
.field input.has-error, .field select.has-error, .field textarea.has-error { border-color: #E0473E; }
.field-error { color: #E0473E; font-size: 0.8rem; margin-top: 0.4rem; display: none; }
.field-error.is-visible { display: block; }
.phone-input { position: relative; }
.phone-input__prefix {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--slate); font-weight: 500; pointer-events: none;
}
.phone-input input { padding-left: 2.75rem; }
.char-count { text-align: right; font-size: 0.78rem; color: var(--slate); margin-top: 0.35rem; }

.pill-group { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.pill-option { flex: 1; min-width: 8rem; }
.pill-option input { position: absolute; opacity: 0; pointer-events: none; }
.pill-option span {
  display: block; text-align: center; padding: 0.9rem 1rem;
  border-radius: 999px; border: 1.5px solid rgba(169,222,255,0.6);
  background: var(--paper); color: var(--navy); font-weight: 500; font-size: 0.92rem;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.pill-option input:checked + span { background: var(--royal); border-color: var(--royal); color: var(--paper); }
.pill-option input:focus-visible + span { outline: 2px solid var(--sky); outline-offset: 2px; }

.irs-note {
  display: none; margin-top: 0.75rem; padding: 0.75rem 1rem;
  background: var(--ice); border-left: 3px solid var(--sky);
  border-radius: 8px; font-size: 0.85rem; color: var(--slate);
}
.irs-note.is-visible { display: block; }

.dropzone {
  border: 1.5px dashed var(--soft-sky); border-radius: var(--radius-md);
  padding: 2rem 1.5rem; text-align: center; background: var(--ice);
  cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease;
}
.dropzone.is-dragover { border-color: var(--sky); background: #ddf1ff; }
.dropzone svg { width: 32px; height: 32px; color: var(--royal); margin: 0 auto 0.75rem; }
.dropzone p { font-size: 0.9rem; color: var(--slate); }
.dropzone input[type="file"] { display: none; }
.dropzone-previews { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.dropzone-preview {
  position: relative; width: 72px; height: 72px; border-radius: 10px; overflow: hidden;
  background: var(--paper); box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center;
}
.dropzone-preview img { width: 100%; height: 100%; object-fit: cover; }
.dropzone-preview__file { font-size: 0.65rem; color: var(--slate); text-align: center; padding: 0.3rem; word-break: break-word; }
.dropzone-preview__remove {
  position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(0,50,115,0.85); color: var(--paper); display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; line-height: 1;
}

.step-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 2.25rem; }
.consent-line { font-size: 0.85rem; color: var(--slate); margin-bottom: 1.25rem; }

.form-success { text-align: center; padding: var(--space-2xl) 0; }
.form-success svg { width: 56px; height: 56px; color: var(--sky); margin: 0 auto 1.25rem; }
.form-success h2 { font-size: 1.8rem; margin-bottom: 0.6rem; }
.form-success p { color: var(--slate); margin-bottom: 1.5rem; }

/* ===================================================================
   Responsive
   =================================================================== */
@media (max-width: 1024px) {
  :root { --section-pad-desktop: 100px; }
  .about-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .explore-grid { grid-template-columns: repeat(2, 1fr); }
  .diff-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
  .timeline::before, .timeline__fill { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .section { padding: var(--section-pad-mobile) 0; }
  .stat-row { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .demerit-table { font-size: 0.82rem; }
  .demerit-table th, .demerit-table td { padding: 0.75rem 0.6rem; }
  .review-arrow { display: none; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  :root { --section-pad-mobile: 72px; }
  .explore-grid, .benefits-grid, .diff-grid, .timeline { grid-template-columns: 1fr; }
  .stake-cards { gap: 0.85rem; }
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .provinces-row { flex-direction: column; align-items: center; }
  .hero__actions { flex-direction: column; }
  .tab-btn { padding: 0.65rem 1.1rem; font-size: 0.84rem; }
}

/* ===================================================================
   Mobile action bar — fixed Call + Free Case Review bar for phones.
   The top nav's phone link disappears below 460px (no room in the tab
   strip), so this restores one-tap calling and keeps the CTA within
   thumb reach no matter how far down the page someone has scrolled.
   Hidden entirely on desktop/tablet; not shown on contact.html (its
   own submit button is already the CTA there).
   =================================================================== */
.mobile-bar { display: none; }

@media (max-width: 760px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

  .mobile-bar {
    display: flex; align-items: stretch; gap: 0.6rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 0.55rem 0.75rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
    background: rgba(251,251,251,0.92);
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(0,50,115,0.12);
    box-shadow: 0 -8px 24px -12px rgba(0,50,115,0.2);
  }
  .mobile-bar__call {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.15rem; flex: 0 0 64px;
    color: var(--navy); text-decoration: none;
    font-size: 0.7rem; font-weight: 600;
    border-radius: var(--radius-sm);
    transition: background 0.2s var(--ease);
  }
  .mobile-bar__call:active { background: var(--ice); }
  .mobile-bar__call svg { width: 20px; height: 20px; color: var(--royal); }
  .mobile-bar__cta.btn {
    flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
    margin: 0; font-size: 0.92rem; padding: 0 1rem;
  }
}

/* When the loader is still visible (first paint), don't show the bar
   underneath it — avoids a flash of the bar before the loader fades. */
.loader:not(.is-hidden) ~ .mobile-bar { opacity: 0; pointer-events: none; }

/* ---------- Tickets We Fight — mobile: full list, not hover-to-reveal ----------
   The rail's second line of copy only appears on :hover/:focus-within, which
   doesn't really exist on touch, and the horizontal scroll had no affordance
   telling a phone user there was more to swipe to. Below 760px this becomes
   an ordinary vertical list with everything visible up front. */
@media (max-width: 760px) {
  .tickets-rail {
    flex-direction: column; overflow-x: visible; padding: 0.5rem 0 0.5rem;
    scroll-snap-type: none;
  }
  .ticket-card { flex: 1 1 auto; width: 100%; }
  .ticket-card:hover, .ticket-card:focus-within { transform: none; }
  .ticket-card__extra {
    max-height: none; opacity: 1; overflow: visible; margin-top: 0.6rem;
  }
}