/* ============================================================
   STRIVE NETWORKING — design system
   Concept: a departures board / boarding-pass built for a company
   whose entire product is "show up somewhere new and meet people."
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:        #1f35a2;
  --ink-2:      #1a2c8c;
  --ink-3:      #17277d;
  --ink-4:      #23399f;
  --line:       rgba(255,255,255,0.20);
  --parchment:  #ffffff;
  --muted:      rgba(255,255,255,0.76);
  --muted-2:    rgba(255,255,255,0.52);
  --gold:       #ffffff;
  --gold-soft:  rgba(255,255,255,0.14);
  --gold-line:  rgba(255,255,255,0.4);
  --teal:       #a8bdf5;
  --coral:      #ffd166;

  --display: 'Anton', sans-serif;
  --body: 'Poppins', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --container: 1680px;
  --radius: 14px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body{
  margin:0;
  background: var(--ink);
  color: var(--parchment);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: inherit; }
.wrap{ max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.wrap-wide{ max-width: 1920px; }

h1,h2,h3,h4{ font-family: var(--display); font-weight: 700; margin: 0 0 .5em; letter-spacing: 0; }
p{ margin: 0 0 1em; color: var(--muted); }

.eyebrow{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  display:flex; align-items:center; gap:10px;
  margin-bottom: 22px;
}
.eyebrow::before{
  content:""; width:22px; height:1px; background: var(--gold-line);
}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--body); font-weight:600; font-size: 14.5px;
  padding: 13px 24px; border-radius: 999px; border:1px solid transparent;
  cursor:pointer; text-decoration:none; transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
@media (hover: hover) and (pointer: fine){
  .btn:hover{ transform: translateY(-1px); }
}
.btn-gold{ background: var(--gold); color: var(--ink); }
.btn-email{
  display:inline-flex; flex-direction:column; align-items:center; gap:4px;
  height:auto; padding-top:16px; padding-bottom:16px; text-align:center;
}
.btn-email span{ font-family: var(--body); font-weight:500; font-size:13px; opacity:.75; }
.btn-gold:hover{ background:#e0b25c; }
.btn-ghost{ background: transparent; color: var(--parchment); border-color: var(--line); }

.btn-ghost:hover{ border-color: var(--gold-line); }
.btn-sm{ padding: 8px 16px; font-size: 12.5px; }

/* ---------- NAV ---------- */
header.site-nav{
  position: sticky; top:0; z-index: 50;
  background: rgba(16,26,48,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding: 16px 28px; max-width: var(--container); margin:0 auto; }
.brand{
  display:flex; align-items:center; gap:9px; text-decoration:none;
  background:#fff; padding:7px 16px 7px 10px; border-radius:10px;
}
.brand-logo{ height:32px; width:auto; display:block; }
.brand-text{
  font-family: var(--body); font-weight:600; letter-spacing:0;
  color:#111; white-space:nowrap;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:32px; font-size:12.5px; line-height:1.15;
}
.brand-text span{ display:block; }

nav.primary{ display:flex; align-items:center; gap: 30px; }
nav.primary a{ font-size:14.5px; text-decoration:none; color: var(--muted); transition: color .15s ease; }
nav.primary a:hover{ color: var(--parchment); }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{ display:none; background:none; border:none; color:var(--parchment); font-size:24px; cursor:pointer; }

@media (max-width: 900px){
  nav.primary{
    position:absolute; top:100%; left:0; right:0;
    background: var(--ink-2); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:flex-start; gap:0;
    max-height:0; overflow:hidden; transition: max-height .25s ease;
  }
  nav.primary.open{ max-height: 480px; }
  nav.primary a{ width:100%; padding:14px 28px; border-bottom:1px solid var(--line); }
  .nav-toggle{ display:block; }
  .nav-cta .btn-ghost{ display:none; }
}

/* ---------- HERO ---------- */
.hero{
  position:relative; overflow:hidden;
  padding: 120px 0 90px;
  background:
    radial-gradient(ellipse at 15% -10%, rgba(255,255,255,0.10), transparent 55%),
    radial-gradient(ellipse at 90% 10%, rgba(255,255,255,0.08), transparent 50%),
    var(--ink);
  border-bottom: 1px solid var(--line);
}
.hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items:center; }

/* Points directly at the Worker's /cover-photo endpoint, which redirects
   to Drive's public thumbnail service for whatever the current "Cover
   photo" file is — no JS needed to apply this. Since this URL is static
   and known ahead of time, the browser starts loading it immediately as
   part of normal CSS parsing, in parallel with everything else, rather
   than waiting on a JS fetch chain (fetch JSON, read the ID, then fetch
   the image). If nothing's set yet, the request 404s and this layer is
   simply skipped, leaving the gradient underneath visible. */
.hero{
  background-size: cover; background-position: center;
  background-image: linear-gradient(rgba(15,26,56,.2), rgba(15,26,56,.32)), url(https://strive-events.mc-138.workers.dev/cover-photo);
}
.cta-band.has-bg-photo{
  background-size: cover; background-position: center; border-color: rgba(255,255,255,.3);
  background-image: linear-gradient(120deg, rgba(15,26,56,.35), rgba(15,26,56,.25)), var(--bg-photo-url);
}
.hero h1, .hero .hero-lede, .hero .hero-slogan{
  text-shadow: 0 2px 16px rgba(0,0,0,.8), 0 1px 4px rgba(0,0,0,.9);
}
.hero h1{
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.05;
  color: var(--parchment);
  text-transform: uppercase;
  font-weight: 800;
}
.hero h1 em{ font-style: italic; color: var(--parchment); font-weight: 800; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.hero-slogan{
  font-family: var(--display); font-weight:700; font-size: 24px; line-height:1.35;
  color: var(--gold); max-width: 40ch; margin: 4px 0 14px;
}
.hero-lede{ font-size: 16px; color: var(--muted); max-width: 46ch; }
.hero-actions{ display:flex; gap:14px; margin-top: 28px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap: 34px; margin-top: 44px; flex-wrap:wrap; }
.hero-stat b{
  display:flex; align-items:center; justify-content:flex-start; height:38px;
  font-family: var(--display); font-size: 30px; color: var(--gold); line-height:1;
}
.hero-stat b.stat-infinity{
  color: var(--gold);
}
.hero-stat b.stat-infinity svg{
  width: 42px; height: 21px; /* matches the visual weight of the 30px digit stats beside it */
  color: var(--gold);
}
.hero-stat span{ font-family: var(--mono); font-size: 11.5px; color: var(--muted-2); text-transform:uppercase; letter-spacing: .08em; }
@media (max-width: 500px){ .hero-stats{ gap:24px 30px; } }

.hero-visual{
  aspect-ratio: 1/1; border-radius: 50%;
  border: 2px dashed rgba(255,255,255,0.65);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.hero-visual::before, .hero-visual::after{
  content:""; position:absolute; border-radius:50%; border:1px dashed rgba(255,255,255,0.4);
}
.hero-visual::before{ inset: 14%; }
.hero-visual::after{ inset: 30%; }
.hero-visual .pin{
  position:absolute; width:12px; height:12px; border-radius:50%;
  background: #fff; box-shadow: 0 0 0 7px rgba(255,255,255,0.22), 0 0 14px rgba(255,255,255,0.5);
  transform: translate(-50%, -50%);
}
.hero-visual .ticket-chip{
  position:relative; z-index:2; background: rgba(15,26,56,0.92);
  border:1.5px solid rgba(255,255,255,0.55); border-radius: 12px; padding: 18px 22px;
  font-family: var(--mono); font-size:12px; color: var(--parchment); text-align:center;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.hero-visual .ticket-chip b{ display:block; color: #fff; font-family: var(--display); font-size:18px; font-weight:500; margin-bottom:4px; }

@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-visual{ max-width: 320px; margin: 0 auto; }
}

/* ---------- SECTION shells ---------- */
section{ padding: 52px 0; }
section.tight{ padding: 64px 0; }
.section-head{ max-width: 640px; margin-bottom: 48px; }
.section-head h2{ font-size: clamp(28px, 3.4vw, 40px); color: var(--parchment); margin-top:.4em; }

.staircase-heading{ display:flex; flex-direction:column; gap:.15em; }
.staircase-line{ font-size: clamp(26px, 3.2vw, 38px); }
.staircase-line.staircase-2{ margin-left: clamp(20px, 6vw, 80px); }
.staircase-line.staircase-3{ margin-left: clamp(40px, 12vw, 160px); }
@media (max-width: 600px){
  .staircase-line{ font-size: 18px; }
  .staircase-line.staircase-2{ margin-left: 14px; }
  /* Starts line 3 under the "E" of "One" on line 2: line 2's own indent
     plus the width of the "On" preceding it. Kept in em rather than a
     fixed px value so it stays aligned at the 340px breakpoint below,
     where the font drops to 15px. */
  .staircase-line.staircase-3{ margin-left: calc(14px + 1.1em); }
}
@media (max-width: 340px){
  .staircase-line{ font-size: 15px; } /* extra margin for the smallest phones */
}

/* scroll-reveal: elements fade + slide up into view as the page scrolls
   (matches the "things pop up as you scroll" feel requested site-wide).
   JS (see reveal.js) toggles the "revealed" class via IntersectionObserver. */
.reveal-on-scroll{
  opacity:0; transform: translateY(28px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal-on-scroll.revealed{ opacity:1; transform: translateY(0); }

/* simple fade, no movement */
.reveal-fade{ opacity:0; transition: opacity 1s ease; }
.reveal-fade.revealed{ opacity:1; }

/* springy bounce-in */
.reveal-bounce{
  opacity:0; transform: scale(.72);
  transition: opacity .55s ease, transform .7s cubic-bezier(.34,1.56,.64,1);
}
.reveal-bounce.revealed{ opacity:1; transform: scale(1); }

/* slide in from the left */
.reveal-left{
  opacity:0; transform: translateX(-70px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,.9,.3,1);
}
.reveal-left.revealed{ opacity:1; transform: translateX(0); }

/* slide in from the right */
.reveal-right{
  opacity:0; transform: translateX(70px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,.9,.3,1);
}
.reveal-right.revealed{ opacity:1; transform: translateX(0); }

/* Scroll-reveal: elements start hidden via this minimal rule (a safety
   net for the brief moment before JS runs), then js/reveal.js takes over
   entirely using the Web Animations API (el.animate()) rather than CSS
   transitions — deliberately, since a CSS transition on the same property
   set elsewhere in this file can silently override the reveal's own
   transition (this is exactly what broke things before). Staggered
   entrance for the staircase headline lines is handled via
   data-reveal-delay in the HTML, not CSS transition-delay. */
.reveal{ opacity:0; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; }
}
.divider{ border:none; border-top:1px solid var(--line); margin:0; }

/* ---------- MAP / FINDER ---------- */
.finder{ background: var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.finder-toolbar{
  display:flex; align-items:center; gap: 20px;
  flex-wrap:wrap; margin-bottom: 22px;
}

/* ---------- GLOBE ---------- */
.globe-wrap{
  position:relative; background-color:#050912;
  contain: paint; /* the starfield below is 55 radial-gradients — costly to
                     repaint, so isolate it from the SVG redrawing on top */
  background-image:
    radial-gradient(1px 1px at 191.8px 7.5px, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(2px 2px at 41.9px 30.7px, rgba(255,255,255,0.89), transparent 60%),
    radial-gradient(1px 1px at 26.1px 126.6px, rgba(255,255,255,0.41), transparent 60%),
    radial-gradient(1.5px 1.5px at 69.8px 180.6px, rgba(255,255,255,0.47), transparent 60%),
    radial-gradient(1px 1px at 195.0px 163.5px, rgba(255,255,255,0.62), transparent 60%),
    radial-gradient(1px 1px at 83.5px 260.8px, rgba(255,255,255,0.77), transparent 60%),
    radial-gradient(1px 1px at 102.1px 46.6px, rgba(255,255,255,0.41), transparent 60%),
    radial-gradient(1px 1px at 114.0px 107.7px, rgba(255,255,255,0.71), transparent 60%),
    radial-gradient(1.5px 1.5px at 242.1px 218.9px, rgba(255,255,255,0.42), transparent 60%),
    radial-gradient(1px 1px at 276.7px 23.6px, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(1.5px 1.5px at 185.6px 258.5px, rgba(255,255,255,0.47), transparent 60%),
    radial-gradient(1px 1px at 20.9px 198.4px, rgba(255,255,255,0.94), transparent 60%),
    radial-gradient(1.5px 1.5px at 256.6px 259.9px, rgba(255,255,255,0.52), transparent 60%),
    radial-gradient(1px 1px at 190.7px 109.4px, rgba(255,255,255,0.56), transparent 60%),
    radial-gradient(2px 2px at 201.1px 210.5px, rgba(255,255,255,0.74), transparent 60%),
    radial-gradient(2px 2px at 182.7px 51.3px, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(2px 2px at 138.7px 81.0px, rgba(255,255,255,0.76), transparent 60%),
    radial-gradient(1px 1px at 65.9px 97.3px, rgba(255,255,255,0.49), transparent 60%),
    radial-gradient(1px 1px at 9.6px 94.6px, rgba(255,255,255,0.39), transparent 60%),
    radial-gradient(2px 2px at 273.9px 170.2px, rgba(255,255,255,0.54), transparent 60%),
    radial-gradient(2px 2px at 196.6px 118.7px, rgba(255,255,255,0.63), transparent 60%),
    radial-gradient(1.5px 1.5px at 79.5px 74.0px, rgba(255,255,255,0.67), transparent 60%),
    radial-gradient(1.5px 1.5px at 224.1px 128.5px, rgba(255,255,255,0.59), transparent 60%),
    radial-gradient(1.5px 1.5px at 65.8px 299.3px, rgba(255,255,255,0.65), transparent 60%),
    radial-gradient(1px 1px at 226.7px 258.3px, rgba(255,255,255,0.73), transparent 60%),
    radial-gradient(1px 1px at 237.6px 126.6px, rgba(255,255,255,0.58), transparent 60%),
    radial-gradient(1px 1px at 178.8px 140.4px, rgba(255,255,255,0.93), transparent 60%),
    radial-gradient(2px 2px at 258.2px 3.4px, rgba(255,255,255,0.42), transparent 60%),
    radial-gradient(2px 2px at 265.4px 225.3px, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1px 1px at 88.1px 47.4px, rgba(255,255,255,0.92), transparent 60%),
    radial-gradient(1.5px 1.5px at 262.8px 79.0px, rgba(255,255,255,0.81), transparent 60%),
    radial-gradient(2px 2px at 152.3px 31.9px, rgba(255,255,255,0.53), transparent 60%),
    radial-gradient(1px 1px at 191.7px 182.7px, rgba(255,255,255,0.57), transparent 60%),
    radial-gradient(1.5px 1.5px at 48.5px 286.0px, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(1px 1px at 179.7px 146.6px, rgba(255,255,255,0.91), transparent 60%),
    radial-gradient(1px 1px at 263.6px 249.5px, rgba(255,255,255,0.49), transparent 60%),
    radial-gradient(1px 1px at 72.3px 170.2px, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 145.8px 20.8px, rgba(255,255,255,0.81), transparent 60%),
    radial-gradient(1.5px 1.5px at 38.5px 142.6px, rgba(255,255,255,0.45), transparent 60%),
    radial-gradient(1px 1px at 158.3px 182.0px, rgba(255,255,255,0.91), transparent 60%),
    radial-gradient(2px 2px at 226.6px 207.0px, rgba(255,255,255,0.54), transparent 60%),
    radial-gradient(1.5px 1.5px at 298.5px 195.0px, rgba(255,255,255,0.89), transparent 60%),
    radial-gradient(1px 1px at 135.4px 74.4px, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1px 1px at 176.5px 69.0px, rgba(255,255,255,0.35), transparent 60%),
    radial-gradient(1px 1px at 212.4px 17.7px, rgba(255,255,255,0.89), transparent 60%),
    radial-gradient(1px 1px at 257.9px 21.3px, rgba(255,255,255,0.52), transparent 60%),
    radial-gradient(2px 2px at 145.6px 161.8px, rgba(255,255,255,0.91), transparent 60%),
    radial-gradient(1.5px 1.5px at 171.3px 141.8px, rgba(255,255,255,0.83), transparent 60%),
    radial-gradient(1.5px 1.5px at 57.1px 29.1px, rgba(255,255,255,0.56), transparent 60%),
    radial-gradient(1px 1px at 123.3px 259.2px, rgba(255,255,255,0.75), transparent 60%),
    radial-gradient(1.5px 1.5px at 295.2px 29.5px, rgba(255,255,255,0.79), transparent 60%),
    radial-gradient(1px 1px at 240.2px 32.8px, rgba(255,255,255,0.46), transparent 60%),
    radial-gradient(1px 1px at 134.6px 126.6px, rgba(255,255,255,0.63), transparent 60%),
    radial-gradient(1.5px 1.5px at 262.3px 22.6px, rgba(255,255,255,0.41), transparent 60%),
    radial-gradient(1px 1px at 195.6px 162.2px, rgba(255,255,255,0.93), transparent 60%);
  background-size: 300px 300px;
  background-repeat: repeat;
  display:flex; align-items:center; justify-content:center; overflow:hidden; aspect-ratio: 1/1;
  touch-action: none;
}
.globe-wrap svg{ width:100%; height:100%; display:block; cursor: grab; touch-action:none; }
.globe-wrap svg:active{ cursor: grabbing; }
.globe-sphere{ fill: var(--ink-3); }
.globe-graticule{ fill:none; stroke: rgba(255,255,255,0.05); stroke-width: 0.4; vector-effect: non-scaling-stroke; }
.country{ fill: var(--ink-4); stroke: rgba(255,255,255,0.4); stroke-width: 0.6; transition: fill .2s ease; cursor:pointer; vector-effect: non-scaling-stroke; }
.country.live{ fill: #f4f7ff; stroke: rgba(15,25,80,0.55); stroke-width: 0.8; }
@media (hover: hover) and (pointer: fine){
  .country:hover{ fill: #32499e; }
  .country.live:hover{ fill: #ffffff; }
}
.country.dim{ fill: var(--ink-3); opacity:.55; }
.globe-outline{ fill:none; stroke: rgba(255,255,255,0.45); stroke-width: 1.2; vector-effect: non-scaling-stroke; }

.globe-pin{ cursor:pointer; }
.globe-pin circle.core{ fill: var(--ink); transition: r .15s ease; }
.globe-pin circle.ring{ fill:none; stroke:var(--ink); stroke-width: 0.7; opacity:.55; }
.globe-pin circle.hit{ fill: transparent; pointer-events: all; }
.globe-pin:hover circle.core, .globe-pin.active circle.core{ r: 3.4; fill: var(--coral); }
.globe-pin.active circle.ring{ stroke: var(--coral); opacity:.9; }

.cluster-badge{ cursor:pointer; }
.cluster-badge circle.cluster-ring{ fill:none; stroke:#fff; stroke-width:1.3; opacity:.85; }
.cluster-badge circle.cluster-core{ fill: var(--coral); stroke: var(--ink); stroke-width: 1.5; transition: r .15s ease; }
.cluster-badge:hover circle.cluster-core{ r: 10.5; }
.cluster-badge text.cluster-count{
  fill: var(--ink); font-family: var(--body); font-weight:700; font-size: 10px;
  pointer-events: none; user-select: none;
}

.map-tooltip{
  position:absolute; z-index:6; pointer-events:none;
  background: rgba(10,20,60,0.92); color: var(--parchment); border:1px solid var(--gold-line);
  border-radius:8px; padding:7px 11px; font-family: var(--body); font-size:12.5px; font-weight:600;
  white-space:nowrap; opacity:0; transform: translate(-50%,-130%); transition: opacity .1s ease;
  max-width: 220px; white-space: normal; text-align:center; line-height:1.4;
}
.map-tooltip.show{ opacity:1; }

.globe-hint{
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  font-family: var(--mono); font-size:10.5px; color: var(--muted);
  background: rgba(10,20,60,0.55); padding:6px 12px; border-radius:999px; border:1px solid var(--line);
  pointer-events:none; white-space:nowrap; backdrop-filter: blur(4px);
}

.globe-loading{
  color: var(--muted); font-family: var(--mono); font-size: 13px;
  display:flex; align-items:center; justify-content:center; height:100%;
}

.globe-zoom-controls{
  position:absolute; top:14px; right:14px; display:flex; flex-direction:column; gap:6px; z-index:4;
}
.globe-zoom-controls button{
  width:32px; height:32px; border-radius:50%; border:1px solid var(--line);
  background: rgba(10,20,60,0.55); color: var(--parchment); font-size:17px; line-height:1;
  cursor:pointer; backdrop-filter: blur(4px); transition: background .15s ease, border-color .15s ease;
}
.globe-zoom-controls button:hover{ background: rgba(10,20,60,0.85); border-color: var(--gold-line); }

.country-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom: 18px; }
.country-chips .chips-label{ font-family: var(--mono); font-size:11.5px; color: var(--muted-2); text-transform:uppercase; letter-spacing:.06em; margin-right:2px; }
.country-chips button{
  font-family: var(--body); font-size:13px; padding: 7px 14px; border-radius:999px;
  border:1px solid var(--line); background: transparent; color: var(--muted); cursor:pointer;
  transition: all .15s ease;
}
.country-chips button.active{ border-color: var(--gold-line); background: var(--gold-soft); color: var(--parchment); }
.country-chips button:hover{ color: var(--parchment); }

.breadcrumb{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-family: var(--mono); font-size:12.5px; color: var(--muted-2); margin-bottom:16px;
}
.breadcrumb button{
  background:none; border:none; padding:0; font-family: var(--mono); font-size:12.5px;
  color: var(--muted); cursor:pointer; text-decoration: underline; text-underline-offset:3px;
}
.breadcrumb button:hover{ color: var(--parchment); }
.breadcrumb .current{ color: var(--parchment); }
.breadcrumb .sep{ opacity:.5; }

.state-layer path{
  fill: transparent; stroke: rgba(255, 209, 102, 0.55); stroke-width: 0.55;
  pointer-events: all; cursor: pointer; vector-effect: non-scaling-stroke;
}
.state-layer path.state-live{ stroke: rgba(255, 209, 102, 0.85); stroke-width: 0.75; }
@media (hover: hover) and (pointer: fine){
  .state-layer path:hover{ stroke: #ffffff; stroke-width: 1; fill: rgba(255,255,255,0.06); }
  .state-layer path.state-live:hover{ stroke: var(--coral); stroke-width: 1.3; fill: rgba(255,209,102,0.14); }
}
.state-layer path.state-dim{ opacity: .25; }

/* always-visible state/province/region outlines for the other 8 countries
   (US is handled by .state-layer above, at higher precision) — bumped up
   for visibility per feedback */
.admin1-outline{
  fill: none; stroke: rgba(255, 209, 102, 0.55); stroke-width: 0.5;
  pointer-events: none; vector-effect: non-scaling-stroke;
}

/* ---------- live attendance tracker: full-width panel under the globe ---------- */
.map-column{ display:flex; flex-direction:column; gap:20px; }
.tracker-block{
  background: var(--ink); border:1px solid var(--line); border-radius: var(--radius);
  overflow:hidden; margin-top: 24px;
}
.tracker-block-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 18px; border-bottom:1px solid var(--line);
}
.tracker-block-head h3{ margin:0; font-size:16px; }
.tracker-iframe{ width:100%; height:850px; border:none; display:block; background:#fff; overflow:hidden; }
/* The embedded tracker's cards wrap onto extra lines as the frame narrows,
   so its content is much taller on small screens than on desktop. Since an
   iframe can't size itself to cross-origin content, the height is stepped
   per breakpoint. Erring tall on purpose: with scrolling disabled, a little
   extra space at the bottom is recoverable, but clipped content is not. */
@media (max-width: 1000px){ .tracker-iframe{ height:1000px; } }
.tracker-body{ position:relative; min-height: 260px; }
.tracker-placeholder{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height: 260px; padding: 30px; color: var(--muted); font-family: var(--mono); font-size:13px;
}
.tracker-loading{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  background: var(--ink); color: var(--muted); font-family: var(--mono); font-size:12.5px;
  transition: opacity .25s ease; pointer-events:none;
}
.tracker-loading.hidden{ opacity:0; }
.tracker-spinner{
  width:26px; height:26px; border-radius:50%;
  border:2px solid var(--line); border-top-color: var(--parchment);
  animation: tracker-spin 0.8s linear infinite;
}
@keyframes tracker-spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .tracker-spinner{ animation: none; } }

.search-box{
  position:relative; flex:1; min-width:220px;
}
.search-box input{
  width:100%; background: var(--ink); border:1px solid var(--line); border-radius:999px;
  padding: 11px 16px 11px 38px; color: var(--parchment); font-family: var(--body); font-size:14px;
}
.search-box input:focus{ outline:none; border-color: var(--gold-line); }
.search-box::before{
  content:"⌕"; position:absolute; left:15px; top:50%; transform:translateY(-50%);
  color: var(--muted-2); font-size:16px;
}

.region-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 30px; }
.region-chips button{
  font-family: var(--body); font-size:13px; padding: 7px 14px; border-radius:999px;
  border:1px solid var(--line); background: transparent; color: var(--muted); cursor:pointer;
  transition: all .15s ease;
}
.region-chips button.active{ border-color: var(--gold-line); background: var(--gold-soft); color: var(--gold); }
.region-chips button:hover{ color: var(--parchment); }

.finder-grid{ display:grid; grid-template-columns: 560px 1fr; gap: 28px; align-items:start; }
@media (max-width: 1000px){ .finder-grid{ grid-template-columns: 1fr; } }
.map-panel{ position:relative; width:100%; max-width: 560px; margin: 0 auto; }

.dot{ cursor:pointer; }
.dot circle.core{ fill: var(--gold); transition: r .15s ease; }
.dot circle.ring{ fill: none; stroke: var(--gold); stroke-width:1; opacity:.55; }
.dot.dim circle.core{ fill: var(--muted-2); opacity:.35; }
.dot.dim circle.ring{ opacity:0; }
.dot:hover circle.core, .dot.active circle.core{ r:4.6; }
.dot.active circle.core{ fill: var(--coral); }

@keyframes pulse{
  0%{ r:2.6; opacity:.6; }
  70%{ r:9; opacity:0; }
  100%{ r:9; opacity:0; }
}
.dot .pulse{ fill:none; stroke: var(--gold); stroke-width:1; animation: pulse 2.6s ease-out infinite; transform-origin: center; }

.origin-mark text{ font-family: var(--mono); font-size: 6px; fill: var(--muted-2); }
.origin-star{ fill: var(--gold); }
.route-line{ fill:none; stroke: var(--gold); stroke-width:1; stroke-dasharray: 3 3; opacity:0; transition: opacity .2s ease; pointer-events:none; }
.route-line.show{ opacity:.8; }

.map-popover{
  position:absolute; z-index:5; width: 230px;
  background: var(--ink-2); border:1px solid var(--gold-line); border-radius:10px;
  padding: 14px 16px; box-shadow: 0 12px 30px rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transform: translate(-50%,-100%) translateY(-14px);
  transition: opacity .15s ease;
}
.map-popover.show{ opacity:1; pointer-events:auto; }
.map-popover .region-tag{ font-family: var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em; color: var(--gold); }
.map-popover h4{ font-size:16px; margin:.25em 0 .1em; color: var(--parchment); }
.map-popover .meta{ font-family: var(--mono); font-size:11.5px; color: var(--muted); line-height:1.5; margin-bottom:10px; }
.map-popover .close{
  position:absolute; top:8px; right:10px; background:none; border:none; color: var(--muted-2);
  font-size:16px; cursor:pointer; line-height:1;
}

.map-hint{ font-family: var(--mono); font-size:11px; color: var(--muted-2); padding: 10px 16px; border-top:1px solid var(--line); }

/* ---------- mobile: card becomes a bottom sheet, bigger touch UI ---------- */
@media (max-width: 700px){
  .map-popover{
    position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
    width:100% !important; max-width:none !important; max-height:80vh; overflow-y:auto;
    border-radius:16px 16px 0 0; transform:none !important;
    padding:18px 20px calc(18px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 30px rgba(0,0,0,.45);
    z-index: 60;
  }
  .map-popover .close{ font-size:22px; top:12px; right:14px; padding:6px; }
  .map-popover .btn{ width:100%; justify-content:center; padding:14px 24px; }
  .tracker-iframe{ height:1350px; }
  .globe-zoom-controls button{ width:42px; height:42px; font-size:20px; }
  .globe-hint{ display:none; }
  .city-list{ max-height: 420px; }
  .country-chips{
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 6px; margin-bottom: 14px;
    scrollbar-width: thin;
  }
  .country-chips button{ flex: 0 0 auto; white-space: nowrap; }
  .country-chips .chips-label{ flex: 0 0 auto; }
}

.city-list{
  max-height: 560px; overflow-y:auto;
  display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:10px;
  padding: 4px 14px 4px 4px;
  scrollbar-width: auto; scrollbar-color: var(--gold) var(--ink-2);
}
.city-list::-webkit-scrollbar{ width:14px; }
.city-list::-webkit-scrollbar-track{ background: var(--ink-2); border-radius: 8px; }
.city-list::-webkit-scrollbar-thumb{ background: var(--gold); border-radius: 8px; border: 3px solid var(--ink-2); }
.city-list::-webkit-scrollbar-thumb:hover{ background: var(--parchment); }

.ticket{
  display:flex; align-items:center; gap:14px;
  padding: 16px 18px; border:1px solid var(--line); border-radius: 12px; background: var(--ink);
  position:relative; transition: background .15s ease, border-color .15s ease;
}
.ticket:hover, .ticket.active{ background: var(--ink-3); border-color: var(--gold-line); }
.ticket-stripe{ width:4px; align-self:stretch; border-radius:2px; background: var(--gold); flex-shrink:0; }
.ticket-body{ flex:1; min-width:0; }
.ticket-body .city{ font-family: var(--display); font-size:17px; color: var(--parchment); margin-bottom:2px; }
.ticket-body .tag{ font-family: var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color: var(--gold); }
.ticket-body .meta{ font-family: var(--mono); font-size:12px; color: var(--muted); margin-top:5px; line-height:1.5; }
.ticket .buy{
  flex-shrink:0; font-family: var(--body); font-weight:600; font-size:12.5px;
  color: var(--ink); background: var(--gold); padding: 9px 14px; border-radius:999px;
  text-decoration:none; white-space:nowrap;
}
.ticket .buy:hover{ background:#e0b25c; }
.empty-state{ padding: 40px 20px; text-align:center; color: var(--muted-2); font-family: var(--mono); font-size:13px; }

/* ---------- ABOUT / WHAT TO EXPECT ---------- */
.about-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap:56px; align-items:center; }
.about-grid h2{ font-size: clamp(30px, 3.4vw, 42px); }
.about-grid p{ font-size: 18px; line-height:1.7; color: var(--muted); }
#about .about-grid{ grid-template-columns: 1.3fr 1fr; }
#about .about-photo{ aspect-ratio: 16/11; max-width: none; }
@media (max-width: 900px){ #about .about-grid{ grid-template-columns: 1fr; } }
.about-photo{
  aspect-ratio: 4/5; border-radius: var(--radius); background: linear-gradient(160deg, var(--ink-3), var(--ink-2));
  border:1px solid var(--line); display:flex; align-items:flex-end; padding:22px; position:relative; overflow:hidden;
}
.about-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#slot-about-story-photo img{ object-position: center 15%; } /* show more of the top, less of the bottom */
.about-photo span{ position:relative; z-index:1; font-family: var(--mono); font-size:11px; color: var(--muted-2); }
.about-photo span code{ color: var(--parchment); background: rgba(255,255,255,0.08); padding:1px 5px; border-radius:4px; }
@media (max-width: 900px){ .about-grid{ grid-template-columns:1fr; } }

.story-video{
  aspect-ratio: 16/9; width:100%; max-width: 1000px; margin: 0 auto; border-radius: var(--radius);
  background: #000;
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.story-video iframe{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:100%; height:100%; border:none;
}
.story-video span{ position:relative; z-index:1; font-family: var(--mono); font-size:12px; color: var(--muted-2); }

.cards-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
@media (max-width: 900px){ .cards-3{ grid-template-columns:1fr; } }
.card{
  background: var(--ink-2); border:1px solid var(--line); border-radius: var(--radius);
  padding: 0 0 26px; overflow:hidden;
}
.card .num, .card h3, .card p{ padding-left:26px; padding-right:26px; }
.card .num{ font-family: var(--mono); color: var(--gold); font-size:12px; letter-spacing:.1em; margin-top:22px; display:block; }
.card h3{ font-family: var(--body); font-size:20px; font-weight:700; margin-top:14px; color: var(--parchment); }
.card p{ font-size: 14.5px; margin:0; }
.card-photo{
  aspect-ratio: 16/10; background: linear-gradient(160deg, var(--ink-3), var(--ink-2));
  border-bottom:1px solid var(--line); position:relative; overflow:hidden;
}
.card-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.card-photo:empty, .card-photo img[style*="display:none"]{ display:block; }

/* ---------- FOUNDERS ---------- */
.founders-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
@media (max-width: 700px){ .founders-grid{ grid-template-columns: 1fr; } }
.founder-card{
  background: var(--ink-2); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden;
}
.founder-photo{
  width:160px; height:160px; margin: 32px auto 0; border-radius:50%;
  background: linear-gradient(160deg, var(--ink-3), var(--ink-2));
  border:1px solid var(--line); position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.founder-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.founder-photo span{ position:relative; z-index:1; font-family: var(--mono); font-size:10px; color: var(--muted-2); text-align:center; padding:0 12px; }
.founder-card{ text-align:center; }
.founder-card h3{ font-size:28px; margin: 22px 26px 8px; color: var(--parchment); }
.founder-card p{ font-size:17px; margin:0 26px 26px; color: var(--muted); }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item:first-child{ border-top:1px solid var(--line); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:none; border:none; text-align:left; cursor:pointer; padding: 22px 4px;
  font-family: var(--display); font-size: 18px; color: var(--parchment);
}
.faq-q .plus{ font-family: var(--mono); color: var(--gold); font-size:18px; transition: transform .2s ease; flex-shrink:0; }
.faq-item.open .faq-q .plus{ transform: rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .3s ease; }
.faq-a p{ padding: 0 4px 22px; max-width: 68ch; }

/* ---------- SPONSOR / CTA BAND ---------- */
.cta-band{
  background: linear-gradient(120deg, var(--ink-3), var(--ink-2));
  border:1px solid var(--gold-line); border-radius: 24px;
  padding: 72px 56px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
}
.cta-band h2{ font-size: 40px; margin:0; max-width: 34ch; }
.cta-band .btn{ font-size:17px; padding:16px 30px; }
@media (max-width:700px){ .cta-band{ padding:44px 28px; } .cta-band h2{ font-size:30px; } }

/* ---------- FOOTER ---------- */
footer{ border-top:1px solid var(--line); padding: 56px 0 34px; }
.footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-grid .brand{ justify-self: start; width: fit-content; }
@media (max-width:800px){ .footer-grid{ grid-template-columns:1fr; } }
footer h5{ font-family: var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; color: var(--muted-2); margin-bottom: 16px; }
footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
footer a{ text-decoration:none; color: var(--muted); font-size:14px; }
footer a:hover{ color: var(--gold); }
/* ---------- SPONSOR MARQUEE ---------- */
.sponsor-marquee{
  margin-top: 26px; overflow: hidden; position:relative;
  background:#fff; height: 110px;
}
.sponsor-marquee::before, .sponsor-marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none;
}
.sponsor-marquee::before{ left:0; background: linear-gradient(90deg, #fff, transparent); }
.sponsor-marquee::after{ right:0; background: linear-gradient(-90deg, #fff, transparent); }
.sponsor-track{
  display:flex; align-items:center; gap:70px; width:max-content; height:100%;
  animation: sponsor-scroll 13s linear infinite;
}
@keyframes sponsor-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-12.5%); } /* must match 100/COPIES from the JS (COPIES=8) */
}
@media (hover: hover) and (pointer: fine){
  .sponsor-marquee:hover .sponsor-track{ animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce){
  .sponsor-track{ animation: none; }
}
/* scattered, not-aligned placement — each logo sits at a different height
   and size on the same continuous white strip, like a sponsor banner.
   All logos bigger except Tesla, whose wordmark already reads bold/large
   at a smaller size than the others. */
.sponsor-logo{ flex-shrink:0; display:flex; align-items:center; }
.sponsor-logo img{ width:auto; object-fit:contain; }

.footer-socials{ display:flex; gap:12px; }
.social-badge{
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition: transform .15s ease, box-shadow .15s ease;
}
@media (hover: hover) and (pointer: fine){
  .social-badge:hover{ transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.35); }
}
.social-instagram{ background: radial-gradient(circle at 30% 110%, #FFDD55 0%, #FF543E 30%, #C837AB 62%, #7638FA 100%); }
.social-facebook{ background: #1877F2; }
.social-linkedin{ background: #0A66C2; }
.social-youtube{ background: #FF0000; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding-top: 26px; border-top:1px solid var(--line);
  font-family: var(--mono); font-size:11.5px; color: var(--muted-2);
}
.footer-bottom a{ color: var(--muted-2); }
.footer-bottom a:hover{ color: var(--gold); }

/* ---------- simple inner pages ---------- */
.page-hero{ padding: 76px 0 50px; border-bottom:1px solid var(--line); }
.page-hero .eyebrow{ margin-bottom:14px; }
.page-hero h1{ font-size: clamp(32px,4.4vw,52px); text-align:left; }
.page-hero-subline{ display:block; font-size:0.5em; color: var(--muted); margin-top:10px; text-align:left; }
.prose{ max-width: 1400px; margin-left:auto; margin-right:auto; }
.prose h2{ margin-top: 1.6em; font-size:38px; }
.prose p{ color: var(--muted); font-size: 19px; line-height:1.7; }
.gallery-grid{
  display:grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 160px; grid-auto-flow: dense; gap:0;
  width:100%; padding: 0;
}
.gallery-cell{
  position:relative; overflow:hidden; background: var(--ink-2);
  transition: transform .25s ease, box-shadow .25s ease, z-index 0s, opacity .8s ease;
  cursor:pointer;
}
.gallery-cell img{ width:100%; height:100%; display:block; object-fit:cover; }
@media (hover: hover) and (pointer: fine){
  .gallery-cell:hover{
    transform: scale(1.1); z-index: 5; box-shadow: 0 16px 40px rgba(0,0,0,.55);
    outline: 2px solid var(--gold-line);
  }
}
.g-wide{ grid-column: span 2; }
.g-tall{ grid-row: span 2; }
.g-big{ grid-column: span 2; grid-row: span 2; }
@media (max-width: 700px){
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
  .g-wide, .g-big{ grid-column: span 2; }
}
@media (max-width: 560px){
  .gallery-grid{ grid-auto-rows: 110px; }
}
.gallery-item{
  grid-column: 1 / -1; aspect-ratio: 3/1; border-radius:12px; background: var(--ink-2); border:1px dashed var(--line);
  display:flex; align-items:center; justify-content:center; color: var(--muted-2); font-family: var(--mono); font-size:12px; text-align:center; padding:10px;
}

/* ---------- GALLERY LIGHTBOX ---------- */
.gallery-lightbox{
  position:fixed; inset:0; z-index:200; background: rgba(5,9,18,0.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition: opacity .25s ease;
}
.gallery-lightbox.open{ opacity:1; visibility:visible; }
.gallery-lightbox img{
  max-width: 88vw; max-height: 88vh; object-fit:contain; border-radius:8px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.lightbox-close{
  position:absolute; top:20px; right:24px; background:none; border:none;
  color:#fff; font-size:36px; line-height:1; cursor:pointer; padding:8px;
  opacity:.8;
}
.lightbox-close:hover{ opacity:1; }
.lightbox-nav{
  position:absolute; top:50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.25);
  color:#fff; width:52px; height:52px; border-radius:50%;
  font-size:28px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .15s ease;
}
@media (hover: hover) and (pointer: fine){
  .lightbox-nav:hover{ background: rgba(255,255,255,0.22); }
}
.lightbox-prev{ left:20px; }
.lightbox-next{ right:20px; }
@media (max-width:700px){
  .lightbox-nav{ width:42px; height:42px; font-size:22px; }
  .lightbox-prev{ left:8px; }
  .lightbox-next{ right:8px; }
  .lightbox-close{ top:10px; right:14px; font-size:30px; }
}

/* ---------- ALTERNATING SECTION THEME ---------- */
/* Applied to every other content section for visual rhythm/contrast as
   you scroll — an off-white/cream background with dark navy text, using
   the same brand blue as the accent color instead of the background.
   Scoped as CSS variable overrides so existing components (cards, buttons,
   FAQ items) that already reference these variables adapt automatically,
   without needing each one rewritten individually. */
.section-light{
  --parchment:  #14162b;
  --muted:      rgba(20,22,43,0.72);
  --muted-2:    rgba(20,22,43,0.52);
  --ink-2:      #efece3;
  --ink-3:      #e8e4d8;
  --ink-4:      #e0dccc;
  --line:       rgba(20,22,43,0.14);
  --gold:       #1f35a2;
  --gold-soft:  rgba(31,53,162,0.10);
  --gold-line:  rgba(31,53,162,0.4);
  background: #f7f5ef;
  color: var(--parchment);
}
.section-light .btn-gold{ background: var(--gold); color: #fff; }