/* ==========================================================================
   Open Ground — the landing page
   ========================================================================== */

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(34px, 5vw, 72px) clamp(40px, 6vw, 86px); position: relative; }
.hero__in {
  display: grid;
  /* the copy and the featured-event card, in ../user-redesign's proportion */
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: clamp(26px, 3.4vw, 52px);
  align-items: center;
}
.hero__say > * + * { margin-top: clamp(14px, 1.6vw, 22px); }
.hero__say > .hero__h { margin-top: clamp(8px, 1vw, 14px); }
.hero__say > .hero__tag { margin-top: clamp(10px, 1.2vw, 16px); }

/* What the company does, before the name that does not say it */
.hero__eyebrow {
  font-size: var(--t-legend);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Where the name comes from: kan·go·mo, "can go more", with the same
   syllable carrying the accent here as in the wordmark above it. */
.hero__tag {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.32rem, 2.5vw, 1.95rem);
  letter-spacing: -0.02em;
  line-height: 1.16;
  color: var(--ink-2);
}
.hero__tag .go { color: var(--pulse-ink); font-weight: 700; }
:root[data-mode='dark'] .hero__tag .go { color: var(--pulse); }

/* The name is spelled the way the masthead spells it: the "go" carries the
   accent, and hovering the word sends the letters up in the same stagger.
   The hop is in em here, not the masthead's fixed pixels — a 9px lift on a
   96px letter is a twitch, not a hop. */
/* inline, not inline-flex: a flex row makes every letter its own line box,
   and the heading then reads out as seven letters instead of one word */
.hmark { display: inline; }
.hero__h .hmark b { font-weight: inherit; display: inline; }
.hero__h .hmark i { font-style: normal; display: inline-block; will-change: transform; }
.hero__h .go { color: var(--pulse-ink); }
:root[data-mode='dark'] .hero__h .go { color: var(--pulse); }

.hmark:hover i, .hmark:focus-within i { animation: hop-lg var(--hop) var(--d, 0ms) both; }
.hmark:hover .go i, .hmark:focus-within .go i { animation: hop-go-lg var(--hop) var(--d, 0ms) both; }

@keyframes hop-lg {
  0%   { transform: translateY(0); }
  42%  { transform: translateY(-0.13em); }
  100% { transform: translateY(0); }
}
@keyframes hop-go-lg {
  0%   { transform: translateY(0) rotate(0); }
  42%  { transform: translateY(-0.22em) rotate(-9deg); }
  100% { transform: translateY(0) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hmark:hover i, .hmark:focus-within i,
  .hmark:hover .go i, .hmark:focus-within .go i { animation: none; }
}

/* the headline and the line under it arrive from the light, in turn */
.hero__h span.ln,
.hero__tag span.ln {
  display: block;
  opacity: 0;
  transform: translateY(0.28em);
  filter: blur(9px);
  animation: line-in 1s var(--out) forwards;
}
@keyframes line-in { to { opacity: 1; transform: none; filter: none; } }

.hero__lede { max-width: 52ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 2.6vw, 34px); }

/* The plate is the featured-event card of ../user-redesign, at that card's
   own size and in its column proportion; the map takes the same footprint
   in turn with it (see "The event card" below). */
.hero__map {
  border-radius: var(--r-lg);
  background: var(--surface-solid);
  box-shadow: var(--lift-3), inset 0 0 0 1px var(--line);
}

#heroTag .state__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pulse-ink);
  animation: beat 1.9s ease-in-out infinite;
}
:root[data-mode='dark'] #heroTag .state__dot { background: var(--pulse); }
#heroTag { transition: opacity var(--ease-s); }
#heroTag:not(.is-live) .state__dot { background: var(--ink-3); animation: none; }
#heroTag[data-off='1'] { opacity: 0; }

/* ── The event card, taking turns with the map ───────────────────────────
   ../user-redesign's featured event, as it is there: the event's picture
   across the top at 16:9 (its drawn course where it has none), its state
   and dates, its name, three figures under their labels, the way in, and
   a bar per event along the bottom. Every event's card is laid in the same
   grid cell, so the plate is as tall as the tallest and does not jump; the
   map lies under them at that same size and has the plate to itself on
   every other turn. */
.hcard {
  position: relative;
  z-index: 2;
  display: grid;
  pointer-events: none;
}
/* until the events are in, the plate keeps a card's proportions */
.hcard:empty { aspect-ratio: 8 / 9; }
.hcard__slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  background: var(--surface-solid);
  color: var(--ink);
  text-decoration: none;
  opacity: 0;
  transition: opacity 220ms var(--out);
}
.hcard__slide[data-on='1'] {
  opacity: 1;
  pointer-events: auto;
  animation: hcard-in 520ms var(--out) both;
}
@keyframes hcard-in { from { opacity: 0; transform: translateX(48px); } }
@media (prefers-reduced-motion: reduce) { .hcard__slide[data-on='1'] { animation: none; } }

.hcard__cover {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ground-3);
  overflow: hidden;
}
.hcard__cover img,
.hcard__route { position: absolute; inset: 0; width: 100%; height: 100%; }
.hcard__cover img { object-fit: cover; transition: transform 900ms var(--out); }
.hcard__slide:hover .hcard__cover img { transform: scale(1.04); }
.hcard__route { padding: 8%; box-sizing: border-box; }

.hcard__body {
  flex: 1;
  display: grid;
  align-content: start;
  gap: 14px;
  /* the bars sit in the space at the bottom */
  padding: 22px 24px 50px;
}
.hcard__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hcard__when { font-size: var(--t-caption); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.hcard__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-subtitle);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.hcard__figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hcard__fig { display: grid; gap: 4px; }
.hcard__fig em {
  order: -1;                      /* the label above the figure */
  font-style: normal;
  font-size: var(--t-pip);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hcard__fig b {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-title);
  letter-spacing: -0.02em;
  line-height: 1;
}
.hcard__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  font-weight: 700;
  font-size: var(--t-small);
  color: var(--pulse-ink);
}
:root[data-mode='dark'] .hcard__go { color: var(--pulse); }
.hcard__go svg { width: 15px; height: 15px; transition: transform var(--spring); }
.hcard__slide:hover .hcard__go svg { transform: translateX(4px); }

/* ── One bar per event, filling across its map and its card ───────────── */
.hdots {
  position: absolute;
  z-index: 5;
  left: 24px;
  right: 24px;
  bottom: 18px;
  display: flex;
  gap: 8px;
}
.hdots[hidden] { display: none; }
.hdots button { flex: 1; padding: 6px 0; position: relative; }
/* the bar stays 4px; the target around it reaches a fingertip */
@media (pointer: coarse) { .hdots button::after { content: ''; position: absolute; inset: -12px 0; } }
.hdots__bar {
  display: block;
  position: relative;
  height: 4px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: color-mix(in oklab, var(--ink-3), transparent 55%);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--surface-solid), transparent 50%);
}
.hdots [aria-current] .hdots__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--pulse);
  transform-origin: left;
  animation: hdots-fill var(--ms, 12s) linear both;
}
#heroPlate[data-held='1'] .hdots [aria-current] .hdots__bar::after { animation-play-state: paused; }
@keyframes hdots-fill { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .hdots [aria-current] .hdots__bar::after { animation: none; }
}

@media (max-width: 1000px) {
  .hero__in { grid-template-columns: minmax(0, 1fr); }
  .hero__map { order: -1; justify-self: center; width: min(100%, 560px); }
}

/* On a phone the name comes first. The plate above the fold used to be a
   240 px map with a two-line attribution across it — the visitor met the
   credit before they met the product. */
@media (max-width: 700px) {
  .hero { padding-block: clamp(20px, 5vw, 34px) clamp(30px, 7vw, 52px); }
  .hero__map { order: 0; margin-top: clamp(26px, 6vw, 36px); }
  .hero__say > * + * { margin-top: 12px; }
  .hero__cta { margin-top: 24px; }
  .hero__cta .btn { width: 100%; justify-content: center; }
}

/* ── Doors ───────────────────────────────────────────────────────────── */
.doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vw, 22px);
}
.door {
  display: grid;
  gap: 12px;
  align-content: start;
  text-decoration: none;
  color: var(--ink);
  padding: clamp(26px, 3.2vw, 40px);
  position: relative;
  overflow: hidden;
}
.door__icon {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--r);
  background: var(--brand-wash);
  color: var(--brand);
  margin-bottom: 4px;
  transition: transform var(--spring), background var(--ease-s);
}
.door__icon svg { width: 24px; height: 24px; }
.door:hover .door__icon { transform: translateY(-4px) rotate(-6deg); background: var(--pulse-wash); }
.door__p { color: var(--ink-2); max-width: 42ch; }
.door__go { margin-top: 8px; }
.door--b .door__icon { background: var(--second-soft); color: var(--second); }

/* a soft sweep of light crosses the door on hover */
.door::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 38%, var(--pulse-wash) 50%, transparent 62%);
  transform: translateX(-110%);
  transition: transform 900ms var(--out);
  pointer-events: none;
}
.door:hover::after { transform: translateX(110%); }

@media (max-width: 780px) { .doors { grid-template-columns: minmax(0, 1fr); } }

/* The doors, the logo band and the figures are three parts of the same
   opening, not three sections, so they sit half the section rhythm apart;
   the logos carry that space above them and hand straight on to the band. */
#figures { margin-block-start: clamp(22px, 3vw, 36px); }

/* ── Figures band ────────────────────────────────────────────────────── */
.figrow--band .fig__n { color: var(--on-field); font-size: var(--t-headline); }
.figrow--band .fig__n small { color: var(--on-field-2); }
.figrow--band .fig__l { color: var(--on-field-3); }
.figrow--band .fig::before { background: var(--pulse-field); }

/* ── The app ─────────────────────────────────────────────────────────── */
.app__grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 0.8fr);
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}
.ticks { display: grid; gap: 11px; margin-top: 8px; }
.ticks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  color: var(--ink-2);
}
.ticks svg { width: 20px; height: 20px; color: var(--pulse-ink); margin-top: 2px; }
:root[data-mode='dark'] .ticks svg { color: var(--pulse); }

.phone { display: grid; place-items: center; perspective: 1200px; }
.phone__shell {
  width: min(310px, 76vw);
  aspect-ratio: 9 / 19;
  border-radius: 42px;
  padding: 9px;
  background: linear-gradient(160deg, var(--ground-edge), var(--ground-3));
  box-shadow: var(--lift-3);
  transform: rotateY(-13deg) rotateX(4deg) rotate(1.5deg);
  transition: transform 900ms var(--out);
}
.phone:hover .phone__shell { transform: rotateY(-4deg) rotateX(1deg) rotate(0deg) translateY(-6px); }
.phone__screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 34px;
  overflow: hidden;
  background: var(--ground-2);
}
.phone__ui { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 14px 12px; pointer-events: none; }
.phone__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--surface-solid), transparent 8%);
  backdrop-filter: blur(8px);
  box-shadow: var(--lift);
}
.phone__mark { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -0.03em; }
/* the wordmark's orange middle, as in the masthead */
.phone__mark .go { font-weight: inherit; color: var(--pulse-ink); }
:root[data-mode='dark'] .phone__mark .go { color: var(--pulse); }
.phone__bar .state { font-size: 11px; padding: 3px 8px 3px 6px; }
.phone__card {
  border-radius: var(--r);
  background: color-mix(in oklab, var(--surface-solid), transparent 5%);
  backdrop-filter: blur(8px);
  box-shadow: var(--lift-2);
  padding: 13px 14px;
  display: grid;
  gap: 9px;
}
.phone__row { display: flex; align-items: center; gap: 8px; padding: 3px 6px; margin: 0 -6px; border-radius: 9px; }
.phone__row.is-me { background: var(--pulse-wash); }
.phone__pos { width: 20px; font-size: 11.5px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.phone__nm i { font-style: normal; color: var(--pulse-ink); font-weight: 700; }
:root[data-mode='dark'] .phone__nm i { color: var(--pulse); }
.phone__field { display: grid; gap: 2px; padding-top: 8px; background: linear-gradient(to right, var(--line), transparent) top / 100% 1px no-repeat; }

/* the app's own status: tracking is on */
.phone__track {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}
.phone__live {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pulse);
  flex: none;
}
.phone__live::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--pulse);
  animation: soon-ring 1.8s ease-out infinite;
}
.phone__metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.phone__metric { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 2px; }
.phone__metric b { font-family: var(--display); font-size: 16px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.phone__metric em { font-style: normal; font-size: 9.5px; font-weight: 700; color: var(--ink-3); }
.phone__metric span { grid-column: 1 / -1; font-size: 10px; font-weight: 600; color: var(--ink-3); }
.phone__bib {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--brand);
  color: var(--on-brand);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  flex: none;
}
.phone__nm { font-weight: 650; font-size: 13.5px; }
.phone__sub { color: var(--ink-3); font-size: 11.5px; margin-left: auto; }
.phone__stats { display: flex; gap: 14px; padding-top: 9px; background: linear-gradient(to right, var(--line), transparent) top / 100% 1px no-repeat; }
.phone__stat b { display: block; font-family: var(--display); font-size: 15px; letter-spacing: -0.02em; }
.phone__stat span { font-size: 11px; color: var(--ink-3); font-weight: 600; }
.phone__foot { display: grid; gap: 6px; }
/* the map on the screen is real cartography, so it carries its credit */
.phone__credit {
  justify-self: center;
  pointer-events: auto;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--surface-solid), transparent 12%);
  color: var(--ink-3);
  font-size: 9px;
  line-height: 1.4;
  text-align: center;
}
.phone__credit:empty { display: none; }
.phone__credit a { color: var(--ink-2); }

@media (max-width: 900px) {
  .app__grid { grid-template-columns: minmax(0, 1fr); }
  .phone { order: -1; }
}

/* The credit is a pill on a wide screen, where it fits on one line. In a
   phone-width mock it wrapped to three and sat across the bezel, so it
   becomes a bar along the bottom of the screen instead. */
@media (max-width: 700px) {
  .phone__credit {
    justify-self: stretch;
    border-radius: var(--r-xs);
    font-size: 8px;
    padding: 3px 6px;
  }
}


/* the app is not out yet, and the section says so before anything else */
/* The pill's ground, rim, glow and sheen are their own layer
   (.soon-tag__bg) behind the label; the tag as a whole, words included,
   is what jumps. */
.soon-tag {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  justify-self: start;
  padding: 8px 18px 8px 14px;
  color: var(--pulse-ink);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: default;
  transform-origin: 50% 100%;
  /* it jumps with the "go" in the wordmark, on the same beat (--jump-at,
     chrome.js): the app is where kangomo goes next */
  animation: soon-jump 7s cubic-bezier(0.34, 1.2, 0.64, 1) var(--jump-at, 0ms) infinite;
}
:root[data-mode='dark'] .soon-tag { color: var(--pulse); }
.soon-tag__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--r-pill);
  background: var(--pulse-wash);
  box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--pulse), transparent 55%);
  overflow: hidden;
  animation: soon-glow 2.8s ease-in-out infinite;
}
/* a live dot with a ring going out from it: something is on its way */
.soon-tag__dot {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pulse);
  flex: none;
}
.soon-tag__dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--pulse);
  animation: soon-ring 1.8s ease-out infinite;
}
/* and a sheen that crosses the pill now and then */
.soon-tag__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: soon-sheen 4.2s ease-in-out infinite 1s;
  pointer-events: none;
}
:root[data-mode='dark'] .soon-tag__bg::after {
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.16) 50%, transparent 70%);
}
/* a pointer on it makes it jump there and then */
.soon-tag:hover { animation: soon-hop 700ms cubic-bezier(0.34, 1.2, 0.64, 1) both; }
@keyframes soon-ring {
  from { transform: scale(1); opacity: 0.7; }
  to { transform: scale(2.6); opacity: 0; }
}
@keyframes soon-sheen {
  0%, 55% { transform: translateX(-120%); }
  85%, 100% { transform: translateX(120%); }
}
/* go-jump from chrome.css, in pixels: in em, a 14px tag barely leaves the line */
@keyframes soon-jump {
  0%, 58%, 100% { transform: translateY(0) scale(1, 1); }
  61%  { transform: translateY(1px) scale(1.04, 0.9); }
  68%  { transform: translateY(-14px) scale(0.97, 1.06); }
  74%  { transform: translateY(0) scale(1.05, 0.9); }
  78%  { transform: translateY(-4px) scale(0.99, 1.02); }
  83%  { transform: translateY(0) scale(1.02, 0.98); }
  88%  { transform: translateY(0) scale(1, 1); }
}
/* the same jump, on its own: crouch, leap, land, settle */
@keyframes soon-hop {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  8%   { transform: translateY(1px) scale(1.04, 0.9); }
  35%  { transform: translateY(-14px) scale(0.97, 1.06); }
  58%  { transform: translateY(0) scale(1.05, 0.9); }
  72%  { transform: translateY(-4px) scale(0.99, 1.02); }
  86%  { transform: translateY(0) scale(1.02, 0.98); }
}
@keyframes soon-glow {
  0%, 100% { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--pulse), transparent 55%), 0 0 0 0 transparent; }
  50% { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--pulse), transparent 25%), 0 0 22px -4px color-mix(in oklab, var(--pulse), transparent 45%); }
}
@media (prefers-reduced-motion: reduce) {
  .soon-tag, .soon-tag:hover, .soon-tag__bg, .soon-tag__dot::after { animation: none; }
  .soon-tag__bg::after { display: none; }
}

/* ── Enquiry ─────────────────────────────────────────────────────────── */
.enq {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(28px, 4vw, 60px);
  padding: clamp(28px, 4vw, 54px);
}
.enq__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-content: start;
}
.enq__form .f-wide { grid-column: 1 / -1; }
.enq__form .btn { grid-column: 1 / -1; justify-self: start; }
.receipt {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 4px 12px;
  margin-top: 4px;
  color: var(--ink);
}
.receipt svg { grid-row: 1 / span 2; width: 20px; height: 20px; margin-top: 2px; color: var(--pulse-ink); }
:root[data-mode='dark'] .receipt svg { color: var(--pulse); }
.receipt b { font-weight: 700; }
.receipt p { color: var(--ink-2); font-size: 14.5px; }
.receipt[hidden] { display: none; }

@media (max-width: 860px) {
  .enq { grid-template-columns: minmax(0, 1fr); }
  .enq__form { grid-template-columns: minmax(0, 1fr); }
}
.receipt a { color: var(--pulse-ink); text-decoration: underline; }

/* ── Who runs on it: the organisers' logos, in an endless band ───────────
   After ../user-redesign's landing page. The logos are the organisers'
   own black artwork, greyed and held back so no one brand shouts over the
   next; at dusk they are inverted rather than swapped for a second set. */
.logos { text-align: center; padding-block: clamp(36px, 5vw, 64px) 0; }
.logos[hidden] { display: none; }
.logos__h {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  font-size: var(--t-legend);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* the wordmark keeps its own case and colour inside the capitals, and
   jumps in step with the one in the masthead */
.logos__mark {
  font-family: var(--display);
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: -0.035em;
  text-transform: none;
  color: var(--ink);
}
.logos__mark b { font-weight: inherit; }
.logos__mark i { font-style: normal; display: inline-block; }
.logos__mark .go { color: var(--pulse-ink); }
:root[data-mode='dark'] .logos__mark .go { color: var(--pulse); }

.marquee {
  overflow: hidden;
  margin-top: 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee calc(var(--n, 6) * 9s) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-100% / var(--n, 6))); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

.marquee ul {
  display: flex;
  align-items: center;
  gap: clamp(40px, 5vw, 72px);
  padding-right: clamp(40px, 5vw, 72px);
}
.marquee img {
  height: 30px;
  width: auto;
  display: block;
  opacity: 0.45;
  filter: grayscale(1);
  transition: opacity var(--ease-s);
}
:root[data-mode='dark'] .marquee img { filter: grayscale(1) invert(1); }
.marquee li:hover img { opacity: 0.9; }

/* the map's credit sits above the bars rather than across them */
#heroPlate .maplibregl-ctrl-bottom-right { bottom: 34px; }