/* =====================================================================
   STATIC SITE TEMPLATE — STYLESHEET
   ---------------------------------------------------------------------
   Ships with just the foundation: design tokens, a minimal reset, and
   the styles for the "Coming Soon" home page. Everything else is
   per-project — build out CSS as you build the site.

   Replace the tokens in :root with the client brand palette during
   Phase 4 of NEW_PROJECT_SETUP.md. Validate WCAG AA contrast on every
   new color combination — see conventions/accessibility.md.
   ===================================================================== */


/* =========================================================
   TOKENS — design system variables
   Replace these with the client brand palette once locked.
   ========================================================= */
:root{
  /* Surfaces */
  --bg: #FFFFFF;                /* page background */
  --surface: #FAFAFA;           /* banner / accent surface */

  /* Brand — extracted from client-input/logos/Logo.png (pixel-sampled 2026-08-22) */
  --brand-primary: #0A5DFD;     /* logo blue — buttons, links, accent text (5.03:1 on white, AA-safe) */
  --brand-accent: #084ACA;      /* darker blue — hover/active state for brand-primary */

  /* Text */
  --ink: #021444;               /* logo navy — primary text / headings */
  --ink-soft: #525252;          /* secondary text, labels */

  /* Lines */
  --rule: rgba(0,0,0,.10);
  --rule-strong: rgba(0,0,0,.18);
  --border: #D4D4D4;            /* ghost-button / input border */

  /* Type stacks (system defaults — swap in branded fonts via the
     async Google Fonts pattern in conventions/performance.md) */
  --serif: ui-serif, Georgia, "Times New Roman", serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Layout */
  --maxw: 1440px;
  --gut: clamp(20px, 4vw, 56px);
}


/* =========================================================
   RESET
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
/* Guards JS-driven visibility (card.hidden = true) against any element whose
   own display rule (e.g. .group-card's display: flex) would otherwise beat
   the UA [hidden] default at equal specificity. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  overflow-x: hidden; /* the hero's full-bleed avatar row intentionally overflows its column; both html and body need this to actually block horizontal scroll */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, picture, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; }
a { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--brand-accent); }
h1, h2, h3, h4, h5, h6 { font-family: var(--display); font-weight: 600; margin: 0; }
.skip-link {
  position: absolute; left: 8px; top: -48px;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 6px;
  font-size: 14px; font-weight: 600; text-decoration: none; z-index: 100;
  transition: top .15s ease;
}
.skip-link:focus { top: 8px; }


/* =========================================================
   COMING SOON page (body.coming-soon)
   ========================================================= */
body.coming-soon {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(24px, 6vw, 64px);
  text-align: center;
}

body.coming-soon main {
  max-width: 56ch;
  margin: auto 0;
}

body.coming-soon .eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 24px;
}

body.coming-soon h1 {
  font-size: clamp(40px, 8vw, 84px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
}

body.coming-soon .lede {
  font-family: var(--serif);
  font-size: clamp(18px, 2.2vw, 22px);
  color: var(--ink-soft);
  margin: 0 0 16px;
}

body.coming-soon .contact {
  font-size: 16px;
  color: var(--ink-soft);
  margin-top: 24px;
}

/* Coming Soon footer */
.cs-foot {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  width: 100%;
  max-width: 56ch;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  text-align: center;
}
.cs-foot p { margin: 0; }
.cs-foot a { color: inherit; }


/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 600; font-size: 16px; line-height: 1.35;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border-radius: 8px; border: 1px solid transparent; padding: 10px 16px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--brand-primary); color: #fff; }
.btn-primary:hover { background: var(--brand-accent); color: #fff; }
.btn-ghost { background: #fff; color: #404040; border-color: var(--border); }
.btn-ghost:hover { border-color: #B0B0B0; background: #FAFAFA; color: #404040; }
.btn-lg { padding: 14px 28px; }


/* =========================================================
   SITE NAV
   ========================================================= */
.nav { background: var(--bg); }
.nav-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 24px; height: 80px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.nav-logo-icon { width: 34px; height: 40px; }
.nav-logo-text {
  font-family: var(--display); font-weight: 700; font-size: 19px;
  letter-spacing: -0.01em; line-height: 1.15; white-space: nowrap;
}
.nav-logo-text .c-brand { color: var(--brand-primary); }
.nav-logo-text .c-ink { color: var(--ink); }

.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  display: inline-block; padding: 6px 12px; border-radius: 8px;
  font-family: var(--sans); font-weight: 600; font-size: 16px;
  color: #404040; text-decoration: none; white-space: nowrap;
}
.nav-links a:hover { background: #F5F5F5; color: var(--ink); }

/* Resources submenu. Desktop: opens on hover or keyboard focus, no JS.
   In the hamburger menu it is always expanded as indented links. */
.nav { position: relative; z-index: 30; }
.nav-item { position: relative; display: flex; }
.nav-links a.is-section { color: var(--brand-primary); }
.nav-caret { display: inline-block; width: 11px; height: 11px; margin-left: 2px; vertical-align: -1px; transition: transform .2s ease; }
.nav-sub {
  position: absolute; top: 100%; left: 0; min-width: 230px; padding: 6px; margin-top: 8px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--bg); border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 16px 40px rgba(2,20,68,.12);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
/* Bridges the 8px gap so the pointer can travel from the link to the menu. */
.nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav-sub a { display: block; padding: 10px 12px; }
.nav-item:hover .nav-sub, .nav-item:focus-within .nav-sub {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret { transform: rotate(180deg); }
.nav-links a[aria-current="page"] { color: var(--brand-primary); }

.nav-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.menu-btn {
  display: none; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 40px; height: 40px; padding: 0; background: none; border: 0; flex-shrink: 0;
}
.menu-btn span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav[data-open="true"] .menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav[data-open="true"] .menu-btn span:nth-child(2) { opacity: 0; }
.nav[data-open="true"] .menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* The full desktop row (logo + 4 links + 2 buttons) needs about 1210px. */
@media (max-width: 1220px) {
  .menu-btn { display: flex; }
  .nav-links, .nav-actions { display: none; }
  .nav-inner { flex-wrap: wrap; height: auto; min-height: 80px; }
  .nav[data-open="true"] .nav-links {
    display: flex; flex-direction: column; align-items: flex-start;
    width: 100%; order: 3; padding: 8px 0 0;
  }
  .nav[data-open="true"] .nav-links a { width: 100%; padding: 10px 12px; }
  .nav-item { flex-direction: column; width: 100%; }
  .nav-caret { display: none; }
  .nav-sub, .nav-item:hover .nav-sub, .nav-item:focus-within .nav-sub {
    position: static; opacity: 1; visibility: visible; transform: none; transition: none;
    min-width: 0; margin: 0 0 0 12px; padding: 0 0 0 8px; gap: 0;
    background: none; border: 0; border-left: 2px solid var(--rule); border-radius: 0; box-shadow: none;
  }
  .nav-sub::before { display: none; }
  .nav[data-open="true"] .nav-actions {
    display: flex; flex-direction: column; align-items: stretch;
    width: 100%; order: 4; gap: 8px; padding: 16px 0 20px;
  }
}


/* =========================================================
   HOME — HERO
   ========================================================= */
.hero { padding: 64px 24px 0; text-align: center; }
@media (min-width: 1201px) {
  /* Fill the first screen (minus the 80px nav) so the stats bar lands on the
     bottom of the fold; capped so very tall screens don't open a big gap.
     Spare height is split evenly above and below the avatars, with 40px
     minimums on both sides. */
  .hero { display: flex; flex-direction: column; min-height: min(calc(100vh - 80px), 960px); }
  .hero .hero-copy { margin-bottom: 40px; }
  .hero .hero-avatars { margin-top: auto; margin-bottom: auto; }
  .hero .hero-stats-bar { margin-top: 40px; }
}

.hero-copy { max-width: 768px; margin: 0 auto; }
.hero-copy h1 {
  font-size: clamp(36px, 5.6vw, 76px); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em;
  color: var(--ink); margin: 0 0 24px;
}
.hero-sub { font-family: var(--sans); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.4; color: var(--ink-soft); margin: 0; }

.hero-avatars { position: relative; max-width: 1280px; margin: 40px auto 0; }
.avatar-row {
  --gap: clamp(8px, 2vw, 24px);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap); width: 130%; margin-left: -15%;
}

/* River drift (site.js adds .is-drifting and builds .avatar-track). The track
   holds four copies of the five photos so it always covers a full row-width
   beyond both ends of the row; it slides left by exactly one copy and loops.
   Each photo also bobs and tilts on its own slow cycle, using the individual
   translate/rotate properties so the per-blob transform offsets still apply. */
.avatar-row.is-drifting { display: block; }
.avatar-track {
  display: flex; align-items: center; gap: var(--gap);
  width: calc(400% + 3 * var(--gap)); margin-left: calc(-100% - var(--gap));
  animation: avatar-drift 185s linear infinite; will-change: transform;
}
@keyframes avatar-drift { to { transform: translateX(calc(-25% - var(--gap) / 4)); } }
@keyframes avatar-bob {
  0%   { translate: 0 -4%; rotate: -2deg; }
  50%  { translate: 0 3%;  rotate: 1.2deg; }
  100% { translate: 0 5%;  rotate: 2.4deg; }
}
.is-drifting .avatar-blob { animation: avatar-bob 9s ease-in-out infinite alternate; }
.is-drifting .blob-1 { animation-duration: 8s;  animation-delay: -2s; }
.is-drifting .blob-2 { animation-duration: 11s; animation-delay: -7s; }
.is-drifting .blob-3 { animation-duration: 9s;  animation-delay: -4s; }
.is-drifting .blob-4 { animation-duration: 12s; animation-delay: -9s; }
.is-drifting .blob-5 { animation-duration: 10s; animation-delay: -1s; }
.avatar-blob { flex: 1 1 0; aspect-ratio: 1 / 1; overflow: hidden; }
.avatar-blob img { width: 100%; height: 100%; object-fit: cover; }
.blob-1 { border-radius: 68% 32% 71% 29% / 60% 24% 76% 40%; transform: translateY(6%); }
.blob-2 { border-radius: 30% 70% 27% 73% / 68% 73% 27% 32%; transform: translateY(-8%); }
.blob-3 { border-radius: 73% 27% 62% 38% / 30% 62% 38% 70%; transform: translateY(4%); }
.blob-4 { border-radius: 25% 75% 68% 32% / 73% 28% 72% 27%; transform: translateY(-6%); }
.blob-5 { border-radius: 71% 29% 33% 67% / 34% 68% 32% 66%; transform: translateY(8%); }

.hero-cta-card {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: calc(100% - 48px); max-width: 700px; text-align: center;
  background: rgba(255, 255, 255, .62);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .7); border-radius: 16px;
  padding: clamp(24px, 4vw, 48px) clamp(20px, 5vw, 64px);
  box-shadow: 0 8px 32px rgba(2, 20, 68, .08);
}
.hero-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-cta-note { font-family: var(--sans); font-size: 14px; line-height: 1.4; color: var(--ink-soft); margin: 12px 0 0; }

/* Full-bleed dark band closing out the hero; negative margins cancel the
   hero's side padding. */
.hero-stats-bar { margin: 56px -24px 0; padding: 22px 24px; background: var(--ink); }
.hero-stats {
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: left;
}
.stat { border-left: 2px solid var(--brand-primary); padding-left: 24px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stat-num {
  font-family: var(--display); font-weight: 600; font-size: 24px; line-height: 1.2;
  letter-spacing: -0.01em; color: #fff;
}
/* Shown only in the phone layout (see the max-width:640px block). */
.stat-icon { display: none; }
.stat-label { font-family: var(--sans); font-weight: 600; font-size: 13px; line-height: 1.35; color: #C7D2EE; }

@media (min-width: 1201px) {
  /* Desktop's 4-up row is sized with headroom for labels around this length —
     keep them on one line here. At 1200px and below the columns get too narrow
     for that, so the grid drops to 2 columns, where wrapping is expected and
     fine (see the max-width:640px block). */
  .stat-label { white-space: nowrap; }
}

@media (max-width: 1200px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
}

@media (max-width: 640px) {
  .hero { padding: 40px 20px 0; }
  .hero-stats-bar { margin: 40px -20px 0; padding: 20px 20px; }
  .avatar-row { width: 112%; margin-left: -6%; --gap: 8px; }
  /* One copy is much shorter on a phone, so a shorter loop keeps a similar pace. */
  .avatar-track { animation-duration: 85s; }
  .hero-cta-card {
    position: static; transform: none;
    width: 100%; max-width: none; margin: 24px auto 0; padding: 20px;
  }
  .hero-cta-actions { flex-direction: column; }
  .hero-cta-actions .btn { width: 100%; }
  /* Phone stats: a centred 2x2 with an icon per cell and hairline dividers
     in place of the desktop's left-hand bars. */
  .hero-stats-bar { padding: 6px 20px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 0; max-width: 420px; padding: 0; text-align: center; }
  .stat { border-left: 0; padding: 16px 10px; align-items: center; gap: 3px; }
  .stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.14); }
  .stat:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.14); }
  .stat-icon {
    display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 6px;
    border-radius: 10px; background: rgba(10,93,253,.28); color: #A9C8FF;
  }
  .stat-icon svg { width: 18px; height: 18px; }
  .stat-num { font-size: 18px; }
  .stat-label { font-size: 12.5px; line-height: 1.35; font-weight: 400; max-width: 17ch; text-wrap: balance; }
  .nav-logo-text { font-size: 16px; }
}


/* =========================================================
   UTILITIES
   ========================================================= */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}


/* =========================================================
   BROWSE EVENTS — shared (breadcrumb, page header, container)
   ========================================================= */
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

.breadcrumb { padding: 20px 24px 0; }
.breadcrumb ol {
  list-style: none; margin: 0; padding: 0; max-width: 1280px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--sans);
  font-size: 13px; color: var(--ink-soft);
}
.breadcrumb li { display: flex; align-items: center; gap: 6px; }
.breadcrumb li:not(:last-child)::after { content: "/"; color: var(--rule-strong); }
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand-primary); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 600; }

.page-header { padding: 32px 24px 48px; text-align: center; }
.page-header-inner { max-width: 1040px; margin: 0 auto; }
.page-header h1 {
  font-size: clamp(32px, 4.4vw, 52px); font-weight: 700; line-height: 1.1;
  letter-spacing: -0.02em; color: var(--ink); margin: 0 0 16px;
}
.page-header-sub { font-family: var(--sans); font-size: clamp(15px, 1.3vw, 18px); line-height: 1.5; color: var(--ink-soft); max-width: 720px; margin: 0 auto; }


/* =========================================================
   BROWSE EVENTS — hub (search + metro grid)
   ========================================================= */
.locate-search { max-width: 640px; margin: 32px auto 0; }
.search-form {
  display: flex; gap: 8px; background: var(--surface); border: 1px solid var(--rule);
  border-radius: 12px; padding: 8px;
}
.search-input {
  flex: 1; min-width: 0; border: 0; background: transparent; font: inherit;
  font-size: 16px; color: var(--ink); padding: 10px 12px; outline: none;
}
.search-input::placeholder { color: #8A8A8A; }
.search-submit { flex-shrink: 0; }
.search-divider { text-align: center; font-family: var(--sans); font-size: 13px; color: var(--ink-soft); margin: 12px 0 0; }
.locate-btn-inline { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--brand-primary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.locate-btn-inline:hover { color: var(--brand-accent); }
.search-status { margin: 16px auto 0; max-width: 640px; font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--ink-soft); text-align: center; }
.search-status[data-tone="notice"] {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 14px 18px; color: var(--ink);
}
.search-status a { font-weight: 600; }
.search-status:empty { display: none; }

.metro-section { padding: 8px 24px 80px; }
.metro-section h2 {
  max-width: 1280px; margin: 0 auto 20px; font-size: 22px; font-weight: 600; color: var(--ink);
}
.metro-grid {
  max-width: 1280px; margin: 0 auto; display: grid;
  /* Caps at 4 per row; narrower screens drop columns at the 240px minimum. */
  grid-template-columns: repeat(auto-fill, minmax(max(240px, calc((100% - 48px) / 4)), 1fr)); gap: 16px;
}
.metro-card {
  position: relative; display: block; text-decoration: none; border-radius: 14px;
  overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface);
  transition: transform .15s ease, box-shadow .15s ease;
}
a.metro-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(2,20,68,.2); }
.metro-card-media { position: absolute; inset: 0; }
.metro-card-media img { width: 100%; height: 100%; object-fit: cover; }
.metro-card-soon .metro-card-media img { filter: grayscale(30%) brightness(.92); }
.metro-card-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(2,20,68,0) 32%, rgba(2,20,68,.58) 66%, rgba(2,20,68,.88) 100%);
}
.metro-card-body {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 3px;
}
.metro-card-name {
  font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 1.2;
  color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.metro-card-meta { font-family: var(--sans); font-size: 13px; font-weight: 600; color: rgba(255,255,255,.85); }
.metro-status {
  position: absolute; top: 0; right: 18px; font-family: var(--display); font-size: 12px;
  letter-spacing: .03em; text-transform: uppercase; font-weight: 700; text-align: center;
  color: #fff; padding: 7px 13px 8px; border-radius: 0 0 9px 9px;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.metro-status-line { display: block; line-height: 1.3; }
.metro-status-soon { background: var(--ink); }
.metro-status-live { background: var(--brand-primary); display: flex; align-items: center; gap: 6px; }
.metro-status-live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; flex-shrink: 0;
  animation: metroLivePulse 2.2s ease-in-out infinite;
}
@keyframes metroLivePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}


/* =========================================================
   BROWSE EVENTS — city listing (filters + group cards)
   ========================================================= */
.filters-bar {
  max-width: 1280px; margin: 0 auto; padding: 0 24px 24px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.filter-search { flex: 1 1 220px; min-width: 200px; }
.filter-search input {
  width: 100%; border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
  font: inherit; font-size: 15px; color: var(--ink); padding: 10px 14px; outline: none;
}
.filter-search input:focus { border-color: var(--brand-primary); }
.filter-group { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-chip {
  border: 1px solid var(--border); background: var(--bg); border-radius: 999px;
  font: inherit; font-weight: 600; font-size: 14px; color: #404040;
  padding: 8px 16px; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.filter-chip:hover { border-color: #B0B0B0; }
.filter-chip.is-active { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.filter-select-wrap select {
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); padding: 9px 12px; cursor: pointer;
}
#locateBtn[data-state="active"] { border-color: var(--brand-primary); color: var(--brand-primary); }
#locateBtn[data-state="error"] { border-color: #B0B0B0; color: var(--ink-soft); }

.location-note {
  max-width: 1280px; margin: 0 auto 24px; padding: 14px 24px;
  font-family: var(--sans); font-size: 14px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule); border-radius: 10px;
}

.results { max-width: 1280px; margin: 0 auto; padding: 0 24px 80px; }
.results-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 20px; flex-wrap: wrap; }
.results-meta h2 { font-size: 20px; font-weight: 600; color: var(--ink); }
#resultsCount { font-family: var(--sans); font-size: 14px; color: var(--ink-soft); margin: 0; }

.view-toggle {
  display: inline-flex; gap: 4px; margin: 0 0 20px; padding: 4px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 10px;
}
.view-toggle-btn {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: none;
  border-radius: 7px; font: inherit; font-weight: 600; font-size: 14px; color: var(--ink-soft);
  padding: 8px 16px; cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.view-toggle-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.view-toggle-btn:hover { color: var(--ink); }
.view-toggle-btn.is-active { background: var(--bg); color: var(--ink); box-shadow: 0 1px 3px rgba(2,20,68,.14); }

.group-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.group-card {
  border: 1px solid var(--rule); border-radius: 14px; padding: 20px; background: var(--bg);
  display: flex; flex-direction: column; gap: 8px;
}
/* Briefly marks the card a map popup's "View more info" jumped to. */
.group-card { transition: box-shadow .3s ease, border-color .3s ease; scroll-margin-block: 24px; }
.group-card.is-highlighted { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(10,93,253,.22), 0 10px 28px rgba(2,20,68,.12); }
.group-card:focus { outline: none; }
.group-card:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; }
.group-name { font-family: var(--display); font-weight: 600; font-size: 17px; line-height: 1.3; color: var(--ink); margin: 0; }
.group-host { font-family: var(--sans); font-size: 13px; color: var(--ink-soft); margin: 0; }
.group-schedule { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--brand-accent); margin: 4px 0 0; }
.group-address { font-family: var(--sans); font-size: 14px; line-height: 1.4; color: #1A1A1A; margin: 0; }
.group-cost { font-family: var(--sans); font-size: 13px; color: #1A1A1A; margin: 0; }
.group-distance {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--sans); font-weight: 700; font-size: 13px; color: var(--brand-accent); margin: 0;
}
.group-distance::before {
  content: ""; width: 12px; height: 12px; flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230A5DFD' d='M12 2C7.58 2 4 5.58 4 10c0 5.25 6.72 11.19 7.11 11.55.19.17.44.26.69.26s.5-.09.69-.26C12.28 21.19 20 15.25 20 10c0-4.42-3.58-8-8-8zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat; background-position: center;
}

.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.badge {
  display: inline-flex; align-items: center; font-family: var(--sans); font-weight: 700;
  font-size: 12px; letter-spacing: .05em; text-transform: uppercase; line-height: 1;
  border: 1px solid; border-radius: 6px; padding: 6px 10px; background: var(--bg);
}
.badge-free { border-color: #146C2E; color: #146C2E; }
.badge-food { border-color: #8A5100; color: #8A5100; }
.badge-exclusive { border-color: var(--brand-accent); color: var(--brand-accent); }

.group-directions {
  margin-top: auto; padding-top: 8px; font-family: var(--sans); font-weight: 600; font-size: 14px;
  color: var(--brand-primary); text-decoration: none; text-underline-offset: 3px;
}
.group-directions:hover { text-decoration: underline; color: var(--brand-accent); }
.group-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; }
.group-actions .group-directions { margin-top: 0; padding-top: 0; }
/* Quiet gray at rest, red on hover or keyboard focus. #767676 is 4.5:1 (the
   lightest gray that still passes AA for small text on white) and
   #B42318 is 6.5:1 on white, so the small label stays readable in both. */
.group-report {
  padding: 4px 10px; background: transparent; border: 1px solid #B0B0B0; border-radius: 999px; cursor: pointer;
  font-family: var(--sans); font-weight: 600; font-size: 12px; line-height: 1.4; color: #767676; white-space: nowrap;
  transition: border-color .15s ease, color .15s ease;
}
.group-report:hover, .group-report:focus-visible { border-color: #B42318; color: #B42318; }
.group-report:focus-visible { outline: 2px solid #B42318; outline-offset: 2px; }

.map-view { margin: 0 0 24px; }
.map-container {
  width: 100%; height: 60vh; min-height: 360px; max-height: 560px;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px;
  border-radius: 14px; border: 1px solid var(--rule); background: var(--surface);
  font-family: var(--sans); color: var(--ink-soft); font-size: 14px;
}
.map-container.maplibregl-map { padding: 0; font-family: var(--sans); }
.map-pin { cursor: pointer; }
.map-pin img {
  display: block; width: 34px; height: 40px; transform-origin: 50% 100%;
  /* White disc behind the logo's ring so map detail doesn't show through. */
  background: radial-gradient(circle at 50% 17px, #fff 16px, transparent 16.5px);
  filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 2px 3px rgba(2,20,68,.35));
  transition: transform .15s ease;
}
.map-pin:hover img, .map-pin:focus-visible img { transform: scale(1.2); }
/* The pin is already absolutely positioned by MapLibre, so the badge anchors to it. */
.map-pin-count {
  position: absolute; top: -4px; right: -6px; min-width: 15px; height: 15px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center; border-radius: 8px;
  background: var(--ink); color: #fff; border: 1.5px solid #fff;
  font-family: var(--sans); font-weight: 700; font-size: 9px; line-height: 1;
  box-shadow: 0 1px 4px rgba(2,20,68,.35); pointer-events: none;
}
.map-pin:hover, .map-pin:focus-visible { z-index: 2; }
.map-pin:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.map-container .maplibregl-popup-content {
  padding: 16px 36px 16px 16px; border-radius: 12px; text-align: left;
  box-shadow: 0 8px 28px rgba(2,20,68,.18);
}
/* Invisible hover bridge: extends the popup's hover area 16px on every side,
   enough to span its arrow and the hairline gap to its pin, so the pointer
   never crosses dead space on the way from pin to popup. */
.map-container .maplibregl-popup-content { isolation: isolate; }
.map-container .maplibregl-popup-content::before { content: ""; position: absolute; inset: -16px; z-index: -1; }
.map-container .maplibregl-popup-close-button {
  top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%;
  font-size: 20px; line-height: 1; color: var(--ink-soft);
}
.map-container .maplibregl-popup-close-button:hover { background: #F5F5F5; color: var(--ink); }
.map-container .maplibregl-ctrl-group { border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(2,20,68,.15); }
.map-popup { font-family: var(--sans); min-width: 180px; }
.map-popup-stack { font-family: var(--sans); min-width: 200px; }
.map-popup-stack-count { font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 10px; }
.map-popup-stack-list { max-height: 250px; overflow-y: auto; overscroll-behavior: contain; margin-right: -24px; padding-right: 24px; }
.map-popup-stack-list .map-popup { padding: 12px 0; border-top: 1px solid var(--rule); }
.map-popup-stack-list .map-popup:first-child { padding-top: 0; border-top: 0; }
.map-popup-stack-list .map-popup:last-child { padding-bottom: 2px; }
.map-popup-stack-hint { font-size: 12px; color: var(--ink-soft); margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--rule); }
.map-popup-name { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--ink); margin: 0 0 4px; }
.map-popup-schedule { font-weight: 600; font-size: 13px; color: var(--brand-accent); margin: 0 0 4px; }
.map-popup-address { font-size: 13px; line-height: 1.4; color: var(--ink-soft); margin: 0 0 8px; }
.map-popup-actions { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; }
.map-popup-more {
  display: block; margin: 0; padding: 0; background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--brand-primary); text-underline-offset: 3px;
}
.map-popup-more:hover { text-decoration: underline; color: var(--brand-accent); }
.map-popup-link { font-weight: 600; font-size: 13px; color: var(--brand-primary); text-decoration: none; text-underline-offset: 3px; }
.map-popup-link:hover { text-decoration: underline; color: var(--brand-accent); }

.empty-state {
  display: none; text-align: center; font-family: var(--sans); font-size: 15px; color: var(--ink-soft);
  padding: 48px 24px; border: 1px dashed var(--rule); border-radius: 14px;
}
.empty-state[data-visible="true"] { display: block; }
.empty-state button {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--brand-primary);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; margin-left: 4px;
}

@media (max-width: 640px) {
  .page-header { padding: 24px 20px 36px; }
  .search-form { flex-direction: column; }
  .search-submit { width: 100%; }
  .filters-bar { padding: 0 20px 20px; }
  .results, .metro-section { padding-left: 20px; padding-right: 20px; }
  .breadcrumb { padding: 16px 20px 0; }
  .map-container { height: 50vh; min-height: 320px; }
}


/* =========================================================
   HOW IT WORKS
   ========================================================= */
.steps-section { padding: 16px 24px 88px; }
/* On the home page the steps follow the hero's stats bar, so they carry
   their own heading and more room on top. */
.home-how { padding-top: clamp(80px, 10vw, 136px); padding-bottom: clamp(80px, 10vw, 136px); scroll-margin-top: 16px; }
.section-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.section-head h2 { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 12px; }
.section-head p { font-family: var(--sans); font-size: clamp(15px, 1.3vw, 18px); line-height: 1.5; color: var(--ink-soft); margin: 0; }
.steps-grid {
  position: relative; max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
}
.steps-grid::before {
  content: ""; position: absolute; top: 27px; left: 60px; right: 60px; height: 2px;
  background: var(--rule); z-index: 0;
}
/* Brand-coloured progress line that draws across once the steps scroll in. */
.steps-grid::after {
  content: ""; position: absolute; top: 27px; left: 60px; right: 60px; height: 2px;
  background: var(--brand-primary); z-index: 0; transform: scaleX(0); transform-origin: left center;
}
.steps-grid.is-in::after { transform: scaleX(1); transition: transform 1.1s cubic-bezier(.65,0,.35,1) .15s; }
.step {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  align-items: center; gap: 14px; text-align: center;
}
.step-num {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 22px;
  background: var(--brand-primary); color: #fff; box-shadow: 0 6px 16px rgba(10,93,253,.3);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, background-color .25s ease;
}
.step-text { transition: transform .25s ease; }
.step h3 { transition: color .2s ease; }
@media (hover: hover) {
  .step:hover .step-num {
    transform: translateY(-4px) scale(1.12); background: var(--brand-accent);
    box-shadow: 0 0 0 8px rgba(10,93,253,.14), 0 12px 24px rgba(10,93,253,.35);
  }
  .step:hover .step-text { transform: translateY(-2px); }
  .step:hover h3 { color: var(--brand-primary); }
  .how-cta-inner { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
  .how-cta-inner:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(2,20,68,.10); border-color: rgba(10,93,253,.35); }
}

/* Scroll-in reveals. site.js adds .reveal-pending only when it can also add
   .is-in later, so without JS (or with reduced motion) everything just shows. */
@keyframes reveal-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes step-pop { 0% { transform: scale(.5); } 70% { transform: scale(1.1); } 100% { transform: scale(1); } }
.reveal-pending:not(.is-in):not(.steps-grid) { opacity: 0; }
/* fill backwards (not both) so a finished reveal lets go of transform and
   hover lifts on the same element still work. */
.reveal-pending.is-in:not(.steps-grid) { animation: reveal-up .6s cubic-bezier(.22,1,.36,1) backwards; }
/* Steps reveal one by one: staggered left to right on desktop, and each as it
   scrolls in once they stack (the stagger is zeroed in the 900px block). */
.step.reveal-pending.is-in { animation-delay: calc(var(--i, 0) * 160ms + 100ms); }
.step.is-in .step-num { animation: step-pop .55s cubic-bezier(.34,1.56,.64,1) backwards; animation-delay: calc(var(--i, 0) * 160ms + 200ms); }
.step:nth-child(2) { --i: 1; } .step:nth-child(3) { --i: 2; } .step:nth-child(4) { --i: 3; }
@media (prefers-reduced-motion: reduce) {
  .steps-grid::after { transform: none; transition: none; }
  .step-num, .step-text, .step h3, .how-cta-inner { transition: none; }
}
.step-text { display: flex; flex-direction: column; gap: 8px; }
.step h2, .step h3 { font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--ink); margin: 0; }
.step p { font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin: 0; max-width: 26ch; }

/* Testimonial (home): one large quote on a full-bleed navy band. */
.testimonial-band { background: var(--ink); padding: clamp(64px, 9vw, 120px) 24px; margin-bottom: clamp(56px, 7vw, 88px); }
.testimonial { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.testimonial-eyebrow { font-family: var(--sans); font-weight: 600; font-size: 13px; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: #C7D2EE; margin: 0 0 28px; }
.testimonial-mark { width: 44px; height: 33px; color: var(--brand-primary); margin-bottom: 24px; transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.testimonial blockquote { margin: 0; }
.testimonial blockquote p {
  font-family: var(--display); font-weight: 600; font-style: italic; font-size: clamp(22px, 3vw, 38px); line-height: 1.3;
  letter-spacing: -0.01em; color: #fff; margin: 0; text-wrap: balance;
}
.testimonial figcaption { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 36px; text-align: left; }
.testimonial figcaption:not(:has(.testimonial-avatar)) { text-align: center; }
.testimonial-avatar {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--brand-primary); color: #fff; font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: .02em;
}
.testimonial-who { display: flex; flex-direction: column; min-width: 0; }
.testimonial-name { font-family: var(--display); font-weight: 700; font-size: 16px; color: #fff; }
.testimonial-role { font-family: var(--sans); font-size: 14px; line-height: 1.4; color: #C7D2EE; }
@media (hover: hover) { .testimonial-band:hover .testimonial-mark { transform: scale(1.15) rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .testimonial-mark { transition: none; } }

.how-cta { padding: 8px 24px 96px; text-align: center; }
.how-cta-inner {
  max-width: 1120px; margin: 0 auto; background: var(--surface); border: 1px solid var(--rule);
  border-radius: 20px; padding: clamp(48px, 6vw, 72px) 32px;
}
.how-cta h2 { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 3vw, 32px); color: var(--ink); margin: 0 0 12px; }
.how-cta p { font-family: var(--sans); font-size: 16px; line-height: 1.5; color: var(--ink-soft); max-width: 560px; margin: 0 auto 28px; }
.how-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 900px) {
  .steps-grid { grid-template-columns: 1fr; gap: 36px; max-width: 420px; }
  .steps-grid::before, .steps-grid::after { display: none; }
  .steps-grid .step { --i: 0; }
  .step { flex-direction: row; align-items: flex-start; text-align: left; gap: 16px; }
  .step-num { width: 44px; height: 44px; font-size: 18px; box-shadow: 0 4px 12px rgba(10,93,253,.28); }
  .step p { max-width: none; }
}

@media (max-width: 640px) {
  .how-cta-inner { padding: 36px 24px; }
  .how-cta-actions { flex-direction: column; }
  .how-cta-actions .btn { width: 100%; }
}


/* =========================================================
   SHARED SECTION HEADING (multi-section pages)
   ========================================================= */
.section-heading {
  max-width: 1120px; margin: 0 auto 40px; text-align: center;
  font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.6vw, 28px); color: var(--ink);
}


/* =========================================================
   FOR ORGANIZERS — two-path chooser, benefits, FAQ
   ========================================================= */
.org-paths { padding: 8px 24px 88px; }
.org-paths-grid {
  max-width: 900px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(2, 1fr); gap: 24px;
}
.org-path-card {
  border: 1px solid var(--rule); border-radius: 16px; padding: 32px 28px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
.org-path-icon {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; background: var(--brand-primary);
}
.org-path-icon svg { width: 22px; height: 22px; }
.org-path-card h2 { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--ink); margin: 4px 0 0; }
.org-path-card p { font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 8px; }
.org-path-card .btn { margin-top: auto; }

.benefits-section { padding: 64px 24px; background: var(--surface); }
.benefits-grid {
  max-width: 1120px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(4, 1fr); gap: 28px;
}
.benefit { display: flex; flex-direction: column; gap: 10px; }
.benefit-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; background: rgba(10,93,253,.1);
}
.benefit-icon svg { width: 20px; height: 20px; }
.benefit h3 { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink); margin: 0; }
.benefit p { font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin: 0; }

.faq-section { padding: 72px 24px; }
/* Home: follows the testimonial band, which already leaves space below it. */
.home-faq { padding-top: 0; position: relative; overflow: hidden; }
/* Faint oversized logo mark behind the questions, tilted and running off the
   right-hand side. Decorative only. */
.home-faq::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: 50%; right: max(-70px, calc(50% - 720px)); width: clamp(260px, 34vw, 480px); aspect-ratio: 240 / 281;
  transform: translateY(-50%) rotate(8deg);
  background: url(images/logo-icon.webp) center / contain no-repeat; opacity: .026;
}
.home-faq > * { position: relative; z-index: 1; }
@media (max-width: 900px) { .home-faq::before { top: auto; bottom: 8px; right: -60px; transform: rotate(8deg); } }
.faq-item { transition: border-color .2s ease, box-shadow .2s ease; }
.faq-item[open] { border-color: rgba(10,93,253,.35); box-shadow: 0 6px 20px rgba(2,20,68,.06); }
.faq-item p a { font-weight: 600; }
@media (hover: hover) { .faq-item:hover { border-color: rgba(10,93,253,.35); } .faq-item summary:hover { color: var(--brand-primary); } }
.faq-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { border: 1px solid var(--rule); border-radius: 12px; padding: 4px 20px; }
.faq-item summary {
  padding: 18px 0; font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--ink);
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; width: 10px; height: 10px; flex-shrink: 0;
  border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg); transition: transform .15s ease; margin-top: -4px;
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.faq-item p { font-family: var(--sans); font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 18px; }

@media (max-width: 720px) {
  .org-paths-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .benefits-grid { grid-template-columns: 1fr; }
}


/* =========================================================
   RESOURCES — free-resource category cards
   ========================================================= */
.resources-section { padding: 8px 24px 96px; }
.resource-grid {
  max-width: 1280px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px;
}
.resource-card {
  border: 1px solid var(--rule); border-radius: 16px; padding: 28px 24px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; background: var(--bg);
}
.resource-icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; background: rgba(10,93,253,.1);
  margin-bottom: 4px;
}
.resource-icon svg { width: 22px; height: 22px; }
.resource-category {
  font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--brand-accent); margin: 0;
}
.resource-card h2 { font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--ink); margin: 0; }
.resource-card p { font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 8px; }
.resource-card .btn { margin-top: auto; }

/* =========================================================
   SITE FOOTER
   ========================================================= */
.site-footer { padding-top: clamp(56px, 7vw, 88px); background: var(--ink); font-family: var(--sans); color: #fff; }
.footer-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 48px clamp(28px, 3.5vw, 56px);
  padding-bottom: clamp(48px, 6vw, 72px);
}
.footer-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; line-height: 1.15; }
/* Turns the two-tone logo mark solid white for the navy footer. */
.footer-logo img { width: 34px; height: 40px; filter: brightness(0) invert(1); }
.footer-logo .c-brand, .footer-logo .c-ink { color: #fff; }
.footer-brand p { max-width: 32ch; margin: 20px 0 0; font-size: 16px; line-height: 1.6; color: #C7D2EE; }
.footer-head { margin: 0 0 18px; font-family: var(--sans); font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: #9FB0D9; }
.footer-col { font-size: 15px; line-height: 1.6; }
.footer-links { list-style: none; margin: -5px 0 0; padding: 0; }
.footer-links li + li { margin-top: 2px; }
.footer-links a { display: inline-block; padding-block: 5px; color: #fff; text-decoration: none; }
.footer-col a:hover, .footer-base p a:hover { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.footer-base {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px 24px;
  padding-block: 24px 32px;
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: 14px;
  color: #C7D2EE;
}
.footer-base > p { grid-column: 1; grid-row: 1; margin: 0; }
.footer-base p a { color: inherit; text-decoration: none; }
.footer-social { grid-column: 2; grid-row: 1; display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; }
.footer-social a {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,.32); border-radius: 50%; color: #fff;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.footer-social a:hover { background: #fff; border-color: #fff; color: var(--ink); }
.footer-social svg { width: 18px; height: 18px; }
.footer-credit { grid-column: 3; grid-row: 1; justify-self: end; display: inline-flex; }
.footer-credit a { display: inline-flex; opacity: .75; transition: opacity .2s ease; }
.footer-credit a:hover { opacity: 1; }
/* The credit logo art is white-on-transparent, so it sits on the navy as is. */
.footer-credit img { height: 22px; width: auto; }
.site-footer a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 1023px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
  .footer-base { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .footer-social { grid-column: 1; grid-row: 1; }
  .footer-base > p { grid-column: 1; grid-row: 2; }
  .footer-credit { grid-column: 1; grid-row: 3; justify-self: center; }
}

/* =========================================================
   EARLY ACCESS
   ========================================================= */
.ea-section { padding: 8px 24px 96px; }
.ea-grid { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(32px, 6vw, 80px); align-items: start; }
.ea-benefits h2, .ea-form h2 { font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--ink); margin: 0 0 24px; }
.ea-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 28px; }
.ea-list li { display: flex; gap: 16px; align-items: flex-start; }
.ea-icon { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(10,93,253,.10); color: var(--brand-primary); }
.ea-icon svg { width: 22px; height: 22px; }
.ea-list h3 { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--ink); margin: 2px 0 6px; }
.ea-list p { font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.ea-form { background: var(--bg); border: 1px solid var(--rule); border-radius: 20px; padding: clamp(24px, 4vw, 36px); box-shadow: 0 16px 40px rgba(2,20,68,.08); display: flex; flex-direction: column; gap: 18px; }
.ea-form h2 { margin-bottom: 2px; }
/* Pre-load height floor only; form_embed.js sets the real height. Don't raise it. */
.qf-embed iframe { display: block; width: 100%; min-height: 320px; border: 0; background: transparent; }
@media (max-width: 860px) {
  .ea-grid { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .ea-form { order: -1; }
}

/* =========================================================
   BLOG
   ========================================================= */
.blog-section { padding: 8px 24px 96px; }
.blog-empty {
  max-width: 720px; margin: 0 auto; text-align: center; background: var(--surface);
  border: 1px solid var(--rule); border-radius: 20px; padding: clamp(40px, 6vw, 64px) 32px;
}
.blog-empty h2 { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.6vw, 28px); color: var(--ink); margin: 0 0 12px; }
.blog-empty p { font-family: var(--sans); font-size: 16px; line-height: 1.5; color: var(--ink-soft); max-width: 520px; margin: 0 auto 28px; }
@media (max-width: 640px) { .blog-empty .how-cta-actions { flex-direction: column; } .blog-empty .how-cta-actions .btn { width: 100%; } }

/* =========================================================
   RESOURCE DETAIL PAGES (e.g. Sales Pipeline Assessment)
   ========================================================= */
/* Lets a one-sentence intro run the width of the heading instead of wrapping at 720px. */
.page-header-sub-wide { max-width: 1040px; }
.page-eyebrow { font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-primary); margin: 0 0 14px; }
.offer-section { padding: 8px 24px clamp(56px, 7vw, 88px); }
.offer-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.offer-card { border: 1px solid var(--rule); border-radius: 18px; padding: 28px; background: var(--bg); display: flex; flex-direction: column; gap: 12px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.offer-card h3 { font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--ink); margin: 4px 0 0; }
.offer-card p { font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.offer-card:nth-child(2) { --i: 1; } .offer-card:nth-child(3) { --i: 2; }
.offer-card.reveal-pending.is-in { animation-delay: calc(var(--i, 0) * 140ms); }
@media (hover: hover) { .offer-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(2,20,68,.10); border-color: rgba(10,93,253,.35); } }

/* Featured partner band, in the partner's own colours (Cardinal navy, cream
   and red) so it reads as their space within the page. */
.partner-band { background: #2E3F5C; padding: clamp(56px, 8vw, 104px) 24px; }
.partner-inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.partner-logo img { width: 100%; max-width: 300px; height: auto; margin: 0 auto; }
.partner-copy { font-family: var(--sans); color: #F0EBE0; }
.partner-eyebrow { font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #C9D3C9; margin: 0 0 12px; }
.partner-copy h2 { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -0.02em; color: #fff; margin: 0 0 12px; }
.partner-tagline { font-family: var(--display); font-weight: 600; font-size: clamp(18px, 2vw, 22px); line-height: 1.35; color: #fff; margin: 0 0 18px; padding-left: 16px; border-left: 3px solid #C0564F; }
.partner-copy > p:not([class]) { font-size: 16px; line-height: 1.6; margin: 0 0 24px; max-width: 62ch; }
.partner-lanes { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.partner-lanes li { border: 1px solid rgba(240,235,224,.22); border-radius: 14px; padding: 20px; background: rgba(255,255,255,.04); }
.partner-lanes h3 { font-family: var(--display); font-weight: 700; font-size: 17px; color: #fff; margin: 0 0 8px; }
.partner-lanes p { font-size: 14px; line-height: 1.55; color: #E3DDD0; margin: 0; }
.partner-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.partner-btn { background: #F0EBE0; color: #2E3F5C; }
.partner-btn:hover { background: #fff; color: #2E3F5C; }
.partner-btn-ghost { background: transparent; color: #F0EBE0; border-color: rgba(240,235,224,.55); }
.partner-btn-ghost:hover { background: rgba(240,235,224,.12); color: #fff; border-color: #F0EBE0; }
.partner-band a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.offer-steps { padding-top: clamp(64px, 8vw, 104px); }
.steps-grid-3 { grid-template-columns: repeat(3, 1fr); max-width: 900px; }
@media (max-width: 900px) {
  .offer-grid { grid-template-columns: 1fr; max-width: 520px; }
  .offer-grid .offer-card { --i: 0; }
  .partner-inner { grid-template-columns: 1fr; text-align: left; }
  .partner-logo img { max-width: 180px; margin: 0; }
  .steps-grid.steps-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .partner-lanes { grid-template-columns: 1fr; }
  .partner-actions { flex-direction: column; }
  .partner-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .offer-card { transition: none; } }