/* ==========================================================================
   BuskFinder — design system
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  --ink:        #14202e;
  --ink-2:      #2c3a4b;
  --muted:      #6f7a86;
  --muted-warm: #8a8175;

  --cream:      #faf7f2;
  --cream-2:    #f4efe6;
  --sand:       #f0e7d8;
  --line:       #e8e0d3;
  --line-soft:  #f0eae0;

  --navy:       #101826;
  --navy-2:     #16202f;
  --navy-3:     #1e2a3b;

  --gold:       #c9922e;
  --gold-2:     #b8801f;
  --gold-3:     #e0b15c;
  --gold-wash:  #f7edda;

  --live:       #e8384f;
  --live-wash:  #fdecef;
  --soon:       #1b7a45;
  --soon-wash:  #ddf3e5;

  --violet:     #7b3fe4;
  --violet-2:   #9a6bf0;

  --radius-sm:  10px;
  --radius:     16px;
  --radius-lg:  22px;
  --radius-xl:  28px;

  --shadow-xs:  0 1px 2px rgba(20, 32, 46, .06);
  --shadow-sm:  0 2px 10px rgba(20, 32, 46, .06);
  --shadow:     0 10px 30px rgba(20, 32, 46, .08);
  --shadow-lg:  0 24px 60px rgba(20, 32, 46, .14);
  --shadow-gold:0 10px 26px rgba(184, 128, 31, .28);

  --wrap:       1180px;
  --nav-h:      74px;

  --ease:       cubic-bezier(.22, .61, .36, 1);
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }

/* The `hidden` attribute only sets display:none in the UA stylesheet, so any
   author rule with a display value beats it — .form-note { display: flex }
   silently un-hid every element it was applied to. Make hidden mean hidden. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -.022em; font-weight: 800; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 1100;
  background: var(--gold); color: var(--navy); font-weight: 700;
  padding: 10px 18px; border-radius: 0 0 12px 12px; transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

/* --- Layout helpers ----------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.section { padding: 86px 0; }
.section--tight { padding: 60px 0; }
.section--cream { background: var(--cream); }
.section--white { background: #fff; }
.section--sand { background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-2);
}

.h-xl { font-size: clamp(2.6rem, 6.4vw, 4.4rem); letter-spacing: -.035em; }
.h-lg { font-size: clamp(2rem, 4vw, 2.9rem); }
.h-md { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.h-sm { font-size: 1.18rem; }

.gold { color: var(--gold); }
.lead { font-size: 1.12rem; color: var(--muted); max-width: 62ch; }
.muted { color: var(--muted); }

.section-head { text-align: center; max-width: 720px; margin: 0 auto 52px; }
.section-head .lead { margin: 16px auto 0; }
.section-head--left { text-align: left; margin-inline: 0; }

.rule {
  width: 62px; height: 3px; border-radius: 3px; margin: 18px auto 0;
  background: linear-gradient(90deg, var(--gold-3), var(--gold-2));
}
.section-head--left .rule { margin-inline: 0; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  --btn-bg: var(--gold);
  --btn-fg: #23180a;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid transparent; border-radius: 999px;
  font-weight: 800; font-size: .97rem; letter-spacing: -.005em;
  cursor: pointer; white-space: nowrap;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
              background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: linear-gradient(135deg, var(--gold-3), var(--gold-2));
  box-shadow: var(--shadow-gold);
}
.btn--primary:hover { box-shadow: 0 14px 34px rgba(184, 128, 31, .38); }

.btn--ghost-light {
  background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45);
}
.btn--ghost-light:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

.btn--ghost-dark {
  background: transparent; color: var(--gold-2); border-color: var(--gold);
}
.btn--ghost-dark:hover { background: var(--gold-wash); }

.btn--dark { background: var(--navy); color: #fff; }
.btn--dark:hover { background: var(--navy-3); }

.btn--white { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.btn--white:hover { box-shadow: var(--shadow); }

.btn--sm { padding: 10px 18px; font-size: .88rem; }
.btn--lg { padding: 17px 34px; font-size: 1.04rem; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: .93rem; color: var(--ink);
  border-bottom: 1.5px solid var(--gold); padding-bottom: 3px;
  transition: gap .2s var(--ease), color .2s var(--ease);
}
.link-arrow svg { width: 16px; height: 16px; }
.link-arrow:hover { gap: 14px; color: var(--gold-2); }

/* --- Site header -------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: var(--navy);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header--overlay {
  position: fixed; inset: 0 0 auto 0;
  background: linear-gradient(180deg, rgba(11, 17, 27, .92), rgba(11, 17, 27, .55));
  backdrop-filter: blur(10px);
  border-bottom-color: rgba(255, 255, 255, .07);
}
.site-header--overlay.is-stuck {
  background: rgba(11, 17, 27, .97);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
}

.nav {
  width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px;
  display: flex; align-items: center; gap: 16px;
}

/* The pick mark draws its detail in currentColor on a cream fill, so pin the
   colour rather than inheriting it — the footer and CTA banner are dark. */
.brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; flex: none; color: var(--ink); }
/* Sizing box holding the logo artwork, with the drawn pick behind it as a
   fallback. object-fit: contain, not cover — the emblem must never be cropped. */
.brand__mark { position: relative; display: block; width: 36px; height: 42px; flex: none; }
.brand__mark > svg, .brand__mark > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
}
.brand__mark > img { z-index: 1; }
.brand__text { font-size: 1.36rem; font-weight: 800; letter-spacing: -.03em; color: #fff; white-space: nowrap; }
.brand__text span { color: var(--gold); }
.site-header--light .brand__text { color: var(--ink); }

.nav__links { display: flex; align-items: center; gap: 2px; flex: none; }
.nav__links a {
  padding: 9px 13px; border-radius: 999px; white-space: nowrap;
  font-size: .9rem; font-weight: 600; color: rgba(255, 255, 255, .82);
  transition: color .18s var(--ease), background .18s var(--ease);
}
.nav__links a:hover { color: #fff; background: rgba(255, 255, 255, .09); }
.nav__links a.is-active { color: var(--gold-3); background: rgba(201, 146, 46, .14); }

.nav__actions { display: flex; align-items: center; gap: 10px; flex: none; }

.avatar-btn {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 50%; border: 1.6px solid rgba(255, 255, 255, .55);
  background: transparent; color: #fff; cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.avatar-btn svg { width: 21px; height: 21px; }
.avatar-btn:hover { background: rgba(255, 255, 255, .14); border-color: #fff; transform: translateY(-1px); }

.nav__toggle {
  display: none; width: 42px; height: 42px; place-items: center;
  background: transparent; border: 1.6px solid rgba(255, 255, 255, .35);
  border-radius: 12px; color: #fff; cursor: pointer;
}
.nav__toggle svg { width: 22px; height: 22px; }

/* mobile drawer */
.nav__drawer {
  position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 999;
  background: var(--navy); border-bottom: 1px solid rgba(255, 255, 255, .1);
  padding: 14px 24px 26px;
  display: none; flex-direction: column; gap: 4px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .4);
}
.nav__drawer.is-open { display: flex; }
.nav__drawer a {
  padding: 13px 14px; border-radius: 12px;
  color: rgba(255, 255, 255, .88); font-weight: 600;
}
.nav__drawer a:hover { background: rgba(255, 255, 255, .08); }
.nav__drawer a.is-active { color: var(--gold-3); }
.nav__drawer .btn { margin-top: 12px; }

/* --- Home hero ---------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate;
  padding: calc(var(--nav-h) + 74px) 0 78px;
  background: var(--navy);
  overflow: hidden;
}
.hero__scene { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__scene > svg, .hero__scene > img {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; object-fit: cover;
}
/* The photograph sits above the generated fallback scene. */
.hero__scene > img { z-index: 1; object-position: center 40%; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(10, 15, 24, .95) 0%, rgba(10, 15, 24, .82) 34%, rgba(10, 15, 24, .18) 62%, rgba(10, 15, 24, .05) 100%);
}
.hero__inner { max-width: 640px; }
.hero h1 { color: #fff; }
.hero h1 .gold { color: var(--gold-3); display: block; }
.hero__sub { margin-top: 20px; font-size: 1.15rem; color: rgba(255, 255, 255, .8); max-width: 32em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.hero__points {
  display: flex; flex-wrap: wrap; gap: 34px; margin-top: 46px;
}
.hero__point { display: flex; align-items: center; gap: 12px; }
.hero__point svg { width: 26px; height: 26px; color: #fff; flex: none; }
.hero__point b { display: block; color: #fff; font-size: .96rem; font-weight: 800; line-height: 1.25; }
.hero__point span { display: block; color: rgba(255, 255, 255, .68); font-size: .9rem; }

/* --- Filter bar --------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.field {
  position: relative; display: flex; align-items: center;
  background: #fff; border: 1px solid var(--line);
  border-radius: 999px; box-shadow: var(--shadow-xs);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(201, 146, 46, .16); }
/* the leading glyph — a .sr-only <span> may precede it, so don't use :first-child */
.field > svg {
  width: 18px; height: 18px; margin-left: 18px; color: var(--muted); flex: none; pointer-events: none;
}
.field input, .field select {
  border: 0; background: transparent; outline: none;
  padding: 13px 18px; border-radius: 999px; font-size: .94rem; font-weight: 600;
}
.field input { min-width: 0; width: 200px; padding-left: 12px; }
.field input::placeholder { color: var(--muted); font-weight: 500; }
.field select { appearance: none; padding-right: 42px; cursor: pointer; }
.field--select::after {
  content: ""; position: absolute; right: 18px; width: 9px; height: 9px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-25%) rotate(45deg); pointer-events: none;
}
.field--grow { flex: 1 1 220px; min-width: 0; }
.field--grow input { flex: 1; width: 100%; min-width: 0; }

/* --- Photo slot ---------------------------------------------------------
   A real photograph layered over the generated fallback scene. Fills whichever
   positioned box it's dropped into. See assets/img/README.md.               */
.ph { position: absolute; inset: 0; display: block; overflow: hidden; background: var(--navy-2); isolation: isolate; }
.ph > svg, .ph > img {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; object-fit: cover;
}

/* !important because Leaflet's stylesheet puts z-index:200 on svg elements
   inside its panes. Inside a map popup that made the generated fallback paint
   ON TOP of a perfectly good photograph — the photo loaded, you just couldn't
   see it. These two rules are the whole reason the layering is reliable. */
.ph > svg { z-index: 0 !important; }
.ph > img { z-index: 1 !important; }

/* Photos get cropped hard in the narrow popup panel, so bias the crop upward —
   faces sit in the top half of almost every performance shot. */
.ph > img { object-position: center 35%; }

/* Standalone photo panel for sections that aren't otherwise positioned. */
.media-panel { position: relative; min-height: 340px; background: var(--navy-2); overflow: hidden; }

/* --- Busker list card --------------------------------------------------- */
.busker-list { display: flex; flex-direction: column; gap: 14px; }

.busker-card {
  display: grid; grid-template-columns: 132px 1fr; align-items: stretch;
  background: #fff; border: 1px solid var(--line-soft);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-xs); cursor: pointer; text-align: left;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.busker-card:hover, .busker-card.is-active {
  transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--sand);
}
.busker-card.is-active { border-color: var(--gold); }

.busker-card__art { position: relative; min-height: 116px; background: var(--navy-2); }
.busker-card__body { padding: 14px 18px 15px; display: flex; flex-direction: column; gap: 3px; }
.busker-card__name { font-size: 1.08rem; font-weight: 800; }
.busker-card__genre { font-size: .88rem; color: var(--muted); }
.busker-card__foot {
  margin-top: auto; padding-top: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.busker-card__place { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--muted); }
.busker-card__place svg { width: 14px; height: 14px; flex: none; }
.busker-card__dist { font-size: .85rem; font-weight: 700; color: var(--ink-2); white-space: nowrap; }

.badge {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: 4px 11px; border-radius: 999px;
  font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
}
.badge--live { background: var(--live); color: #fff; }
.badge--live .dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pulse 1.6s infinite; }
.badge--soon { background: var(--soon-wash); color: var(--soon); }
.badge--off  { background: #eceff3; color: var(--muted); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* grid variant used on the find + profile pages */
.busker-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.busker-tile {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-xs);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.busker-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.busker-tile__art { position: relative; aspect-ratio: 4 / 3; background: var(--navy-2); }
.busker-tile__art .badge { position: absolute; top: 12px; left: 12px; z-index: 2; }
.busker-tile__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.busker-tile__body .busker-card__foot { padding-top: 14px; }

/* --- Map ---------------------------------------------------------------- */
.live-layout {
  display: grid; gap: 24px;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  align-items: start;
}
.live-layout__list { display: flex; flex-direction: column; gap: 14px; }
.live-layout__list-foot { display: flex; justify-content: center; padding-top: 6px; }

.map-panel {
  /* z-index:0 with position:relative creates a stacking context, which traps
     every Leaflet layer inside this panel. Leaflet's own panes and controls
     run from 200 up to 1000, so without this they compete with the sticky
     header in the root stacking context and scroll straight over it. */
  position: relative; z-index: 0; isolation: isolate;
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow); background: var(--cream-2);
}
.map-panel__canvas { height: 520px; width: 100%; }
.map-panel--tall .map-panel__canvas { height: min(72vh, 720px); }

.map-fallback {
  position: absolute; inset: 0; display: none; place-content: center; text-align: center;
  padding: 40px; background: var(--cream-2); z-index: 500;
}
.map-panel.is-offline .map-fallback { display: grid; }
.map-fallback h3 { margin-bottom: 8px; }

.map-tools {
  position: absolute; right: 14px; bottom: 14px; z-index: 500;
  display: flex; flex-direction: column; gap: 8px;
}
.map-tool {
  width: 42px; height: 42px; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-sm); cursor: pointer; color: var(--ink);
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.map-tool svg { width: 19px; height: 19px; }
.map-tool:hover { background: var(--gold-wash); transform: translateY(-1px); }
.map-tool.is-busy { opacity: .55; pointer-events: none; }

.map-count {
  position: absolute; left: 14px; top: 14px; z-index: 500;
  background: rgba(255, 255, 255, .95); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 16px; font-size: .84rem; font-weight: 700;
  box-shadow: var(--shadow-sm);
}

/* Leaflet overrides */
.leaflet-container { font: inherit; background: var(--cream-2); }
.leaflet-control-attribution { font-size: 10px; background: rgba(255, 255, 255, .8) !important; }
.leaflet-bar a { border-radius: 10px !important; }

.pin { display: block; width: 34px; height: 44px; }
.pin svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }
.pin--active { z-index: 1000 !important; }
.pin--active svg { transform: scale(1.18); transform-origin: bottom center; }

.leaflet-popup-content-wrapper {
  border-radius: var(--radius) !important; padding: 0 !important;
  box-shadow: var(--shadow-lg) !important; overflow: hidden; border: 1px solid var(--line-soft);
}
.leaflet-popup-content { margin: 0 !important; width: 268px !important; }
.leaflet-popup-tip { box-shadow: none; }
.leaflet-popup-close-button { z-index: 5; color: var(--muted) !important; }

.pop { display: grid; grid-template-columns: 96px 1fr; }
.pop__art { position: relative; background: var(--navy-2); min-height: 118px; }
.pop__body { padding: 12px 13px 13px; display: flex; flex-direction: column; gap: 3px; }
.pop__name { font-size: 1rem; font-weight: 800; line-height: 1.2; }
.pop__genre { font-size: .82rem; color: var(--muted); }
.pop__place { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; color: var(--muted); }
.pop__place svg { width: 13px; height: 13px; flex: none; }
.pop .btn { margin-top: 9px; padding: 9px 16px; font-size: .84rem; }

/* --- Spotlight banner --------------------------------------------------- */
.spotlight {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--navy);
  padding: 54px 52px;
  min-height: 340px;
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: center;
}
.spotlight__scene { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.spotlight__scene .ph > img { object-position: center 35%; }
.spotlight::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(96deg, rgba(11, 17, 27, .96) 0%, rgba(11, 17, 27, .86) 38%, rgba(11, 17, 27, .3) 72%, rgba(11, 17, 27, .55) 100%);
}
.spotlight__eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--gold-3); font-weight: 800; }
.spotlight__eyebrow svg { width: 22px; height: 22px; }
.spotlight h2 { color: #fff; margin-top: 16px; }
.spotlight__name { color: #fff; font-size: 1.5rem; font-weight: 700; margin-top: 4px; opacity: .95; }
.spotlight p { color: rgba(255, 255, 255, .78); margin-top: 14px; max-width: 44ch; }
.spotlight__quote {
  margin-top: 16px; font-style: italic; font-size: 1.12rem;
  color: rgba(255, 255, 255, .92);
}
.spotlight .btn { margin-top: 26px; }

.spotlight__facts {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(10px);
  border-radius: var(--radius); padding: 20px 22px;
}
.spotlight__facts h3 { color: #fff; font-size: 1rem; margin-bottom: 14px; }
.spotlight__facts li {
  display: flex; align-items: center; gap: 11px; padding: 8px 0;
  color: rgba(255, 255, 255, .85); font-size: .9rem;
}
.spotlight__facts svg { width: 17px; height: 17px; color: var(--gold-3); flex: none; }

/* --- Feature row -------------------------------------------------------- */
.feature-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.feature {
  text-align: center; padding: 0 26px;
  border-left: 1px solid var(--line);
}
.feature:first-child { border-left: 0; }
.feature__icon {
  width: 68px; height: 68px; margin: 0 auto 20px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--gold-wash); color: var(--ink);
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.feature__icon svg { width: 30px; height: 30px; }
.feature:hover .feature__icon { transform: translateY(-4px); background: var(--sand); }
.feature h3 { font-size: 1.05rem; margin-bottom: 9px; }
.feature p { font-size: .92rem; color: var(--muted); }

/* --- Steps -------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step {
  position: relative; display: grid; grid-template-columns: 108px 1fr; gap: 18px; align-items: center;
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: 20px 22px 20px 18px; box-shadow: var(--shadow-xs);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.step__num {
  position: absolute; top: -13px; left: -13px;
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; background: linear-gradient(135deg, var(--gold-3), var(--gold-2));
  color: #fff; font-weight: 900; font-size: .92rem; box-shadow: var(--shadow-gold);
}
.step__art { border-radius: 14px; overflow: hidden; background: var(--cream-2); }
.step h3 { font-size: 1.02rem; margin-bottom: 7px; }
.step p { font-size: .88rem; color: var(--muted); line-height: 1.5; }

/* --- CTA banner --------------------------------------------------------- */
.cta-banner {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--radius-xl); background: var(--navy);
  padding: 34px 42px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 26px;
}
.cta-banner__glow {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(700px 220px at 78% 120%, rgba(201, 146, 46, .40), transparent 70%),
    radial-gradient(500px 200px at 18% -20%, rgba(123, 63, 228, .28), transparent 70%);
}
.cta-banner .brand__text { font-size: 1.4rem; }
.cta-banner__copy { flex: 1 1 320px; }
.cta-banner__copy b { display: block; color: #fff; font-size: 1.32rem; font-weight: 800; letter-spacing: -.02em; }
.cta-banner__copy span { color: rgba(255, 255, 255, .72); font-size: .95rem; }

/* --- Page hero (inner pages) -------------------------------------------- */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--navy); color: #fff;
  padding: 74px 0 66px;
}
.page-hero__glow {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(760px 300px at 82% -10%, rgba(201, 146, 46, .30), transparent 70%),
    radial-gradient(620px 300px at 8% 110%, rgba(123, 63, 228, .26), transparent 70%);
}
.page-hero h1 { color: #fff; max-width: 16ch; }
.page-hero p { color: rgba(255, 255, 255, .76); margin-top: 16px; font-size: 1.1rem; max-width: 56ch; }
.page-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.crumbs { display: flex; align-items: center; gap: 9px; font-size: .84rem; color: rgba(255, 255, 255, .55); margin-bottom: 18px; }
.crumbs a:hover { color: var(--gold-3); }

/* --- Generic cards / panels --------------------------------------------- */
.card {
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: 28px; box-shadow: var(--shadow-xs);
}
.card--pad-lg { padding: 36px; }
.grid-2 { display: grid; gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.split { display: grid; gap: 54px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }

.icon-card__icon {
  width: 54px; height: 54px; display: grid; place-items: center; border-radius: 15px;
  background: var(--gold-wash); color: var(--gold-2); margin-bottom: 18px;
}
.icon-card__icon svg { width: 25px; height: 25px; }
.icon-card h3 { font-size: 1.08rem; margin-bottom: 9px; }
.icon-card p { color: var(--muted); font-size: .94rem; }

.tick-list li {
  display: flex; gap: 12px; padding: 9px 0; color: var(--ink-2); font-size: .97rem;
}
.tick-list svg { width: 21px; height: 21px; color: var(--gold); flex: none; margin-top: 2px; }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat { text-align: center; }
.stat b { display: block; font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -.03em; color: var(--gold-2); }
.stat span { font-size: .9rem; color: var(--muted); }

/* --- Accordion ---------------------------------------------------------- */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq__item { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 19px 22px; background: none; border: 0; cursor: pointer;
  font-weight: 700; font-size: 1rem; text-align: left;
}
.faq__q svg { width: 20px; height: 20px; color: var(--gold-2); flex: none; transition: transform .25s var(--ease); }
.faq__item.is-open .faq__q svg { transform: rotate(45deg); }
.faq__a { display: none; padding: 0 22px 21px; color: var(--muted); font-size: .95rem; }
.faq__item.is-open .faq__a { display: block; }

/* --- Timeline / schedule ------------------------------------------------ */
.schedule { display: flex; flex-direction: column; gap: 10px; }
.slot {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 18px; align-items: center;
  padding: 15px 20px; background: #fff;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
}
.slot__day { font-weight: 800; font-size: .92rem; }
.slot__day span { display: block; font-weight: 600; font-size: .8rem; color: var(--muted); }
.slot__where { font-size: .94rem; font-weight: 600; }
.slot__where span { display: block; font-weight: 500; font-size: .84rem; color: var(--muted); }

/* --- Profile ------------------------------------------------------------ */
.profile-head { display: grid; grid-template-columns: 190px 1fr; gap: 30px; align-items: center; }
.profile-head__art {
  position: relative; aspect-ratio: 1; border-radius: 24px; overflow: hidden;
  border: 3px solid rgba(255, 255, 255, .2); background: var(--navy-2);
}
.profile-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 16px; }
.profile-meta li { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .82); font-size: .93rem; }
.profile-meta svg { width: 17px; height: 17px; color: var(--gold-3); }

.profile-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 30px; align-items: start; }

/* --- Forms -------------------------------------------------------------- */
.form-grid { display: grid; gap: 18px; }
.form-row { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-label { display: block; font-size: .88rem; font-weight: 700; margin-bottom: 7px; }
.input, .textarea, .select {
  width: 100%; padding: 13px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  font-size: .96rem; outline: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--gold); box-shadow: 0 0 0 4px rgba(201, 146, 46, .16);
}
.textarea { min-height: 128px; resize: vertical; }
.select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f7a86' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 17px; padding-right: 42px;
}
.form-hint { font-size: .82rem; color: var(--muted); margin-top: 6px; }
.form-error { font-size: .82rem; color: var(--live); margin-top: 6px; display: none; }
.field-invalid .input, .field-invalid .select, .field-invalid .textarea { border-color: var(--live); }
.field-invalid .form-error { display: block; }

.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.choice {
  position: relative; cursor: pointer;
  background: #fff; border: 2px solid var(--line); border-radius: var(--radius);
  padding: 22px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.choice:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__icon {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: var(--gold-wash); color: var(--gold-2); margin-bottom: 14px;
}
.choice__icon svg { width: 23px; height: 23px; }
.choice b { display: block; font-size: 1.05rem; margin-bottom: 5px; }
.choice span { font-size: .88rem; color: var(--muted); }
.choice:has(input:checked) { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(201, 146, 46, .14); }

.form-note {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--gold-wash); border: 1px solid var(--sand);
  border-radius: 14px; padding: 15px 18px; font-size: .88rem; color: var(--ink-2);
}
.form-note svg { width: 19px; height: 19px; color: var(--gold-2); flex: none; margin-top: 2px; }

/* Honeypot. Deliberately NOT display:none or hidden — a fair few bots skip
   those. Off-screen and unreachable by keyboard, so no person will ever fill
   it in, but a bot parsing the HTML happily will. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}

/* Server-side failure message, distinct from per-field validation errors. */
.form-error-box {
  display: none;
  padding: 13px 16px; border-radius: 12px; font-size: .9rem;
  background: var(--live-wash); border: 1px solid #f5c2ca; color: #8c1c2c;
}

.form-success {
  display: none; align-items: center; gap: 14px;
  background: var(--soon-wash); border: 1px solid #bfe6cf; color: var(--soon);
  border-radius: 14px; padding: 17px 20px; font-weight: 700; margin-top: 20px;
}
.form-success.is-visible { display: flex; }
.form-success svg { width: 24px; height: 24px; flex: none; }

/* --- Footer ------------------------------------------------------------- */
.site-footer { background: var(--navy); color: rgba(255, 255, 255, .7); padding: 62px 0 26px; }
.site-footer__top {
  display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; padding-bottom: 42px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.site-footer p { font-size: .93rem; margin-top: 16px; max-width: 34ch; }
.site-footer h4 { color: #fff; font-size: .96rem; margin-bottom: 16px; }
.site-footer li { margin-bottom: 10px; }
.site-footer li a { font-size: .92rem; transition: color .18s var(--ease); }
.site-footer li a:hover { color: var(--gold-3); }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center;
  padding-top: 24px; font-size: .85rem;
}
.socials { display: flex; gap: 10px; margin-top: 22px; }
.socials a {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, .08); color: #fff;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.socials a:hover { background: var(--gold); transform: translateY(-2px); }
.socials svg { width: 18px; height: 18px; }

/* --- Reveal animation --------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1080px) {
  .live-layout { grid-template-columns: 1fr; }
  .live-layout__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .steps { grid-template-columns: 1fr; }
  .profile-layout { grid-template-columns: 1fr; }
}

/* The full nav needs ~1000px before it starts crowding the brand. */
@media (max-width: 1000px) {
  .nav__links, .nav__actions .btn { display: none; }
  .nav__toggle { display: grid; }
}

@media (max-width: 900px) {
  .feature-row { grid-template-columns: repeat(2, 1fr); gap: 40px 0; }
  .feature:nth-child(3) { border-left: 0; }
  .spotlight { grid-template-columns: 1fr; padding: 40px 32px; }
  .split, .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .site-footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .profile-head { grid-template-columns: 1fr; }
  .profile-head__art { width: 160px; }
  .stat-row { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}

@media (max-width: 640px) {
  .section { padding: 62px 0; }
  .wrap { padding-inline: 18px; }
  .hero { padding-top: calc(var(--nav-h) + 52px); padding-bottom: 58px; }
  /* Stacked layout puts text over the whole scene, so darken the top and let
     the lit pavement come through at the bottom. */
  .hero::after { background: linear-gradient(180deg, rgba(10, 15, 24, .93) 0%, rgba(10, 15, 24, .88) 52%, rgba(10, 15, 24, .5) 100%); }
  .hero__points { gap: 20px; }
  .hero__point { flex: 1 1 140px; }
  .hero__cta .btn { flex: 1 1 auto; }
  .feature-row { grid-template-columns: 1fr; }
  .feature { border-left: 0; padding-inline: 0; }
  .busker-card { grid-template-columns: 108px 1fr; }
  .step { grid-template-columns: 84px 1fr; }
  .cta-banner { padding: 28px 24px; }
  .form-row, .choice-grid { grid-template-columns: 1fr; }
  .slot { grid-template-columns: 1fr; gap: 8px; }
  .site-footer__top { grid-template-columns: 1fr; }
  .card, .card--pad-lg { padding: 22px; }
  .map-panel__canvas { height: 420px; }
}