/* =============================================================================
   Trades Thursday — Hub Page styles
   Brand: 2026 Housecall Pro palette · Manrope + Open Sans + Headline Gothic ATF
   Built to the Figma: 070626 Trades Thursday HUB Page v1 (Desktop/Tablet/Mobile)
============================================================================= */

/* ── Fonts (self-hosted; see assets/fonts) ─────────────────────────────────── */
@font-face{font-family:'Headline Gothic ATF';src:url('assets/fonts/headline-gothic-atf.ttf') format('truetype');font-weight:400 900;font-style:normal;font-display:swap;}
@font-face{font-family:'Manrope';src:url('assets/fonts/manrope-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Manrope';src:url('assets/fonts/manrope-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Manrope';src:url('assets/fonts/manrope-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Manrope';src:url('assets/fonts/manrope-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Manrope';src:url('assets/fonts/manrope-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:'Open Sans';src:url('assets/fonts/open-sans-latin.woff2') format('woff2');font-weight:300 800;font-style:normal;font-display:swap;}

/* ── Tokens ─────────────────────────────────────────────────────────────────*/
:root{
  --denim:#003A6D;      /* hero / dark sections   */
  --blue:#0065C1;       /* primary blue           */
  --blue-tint:#66B5E8;  /* light-blue accent      */
  --orange:#FF9B24;     /* Golden Hour — CTAs     */
  --carbon:#13181A;     /* nav / footer / ink     */
  --satin:#F0F4F7;      /* light section bg        */
  --slate:#CCD5DB;      /* borders / muted        */
  --white:#fff;
  --ink:#13181A;
  --ink-soft:#48545c;
  --ink-onDark:#F0F4F7;

  --font-display:'Headline Gothic ATF',system-ui,sans-serif;
  --font-head:'Manrope',system-ui,-apple-system,sans-serif;
  --font-body:'Open Sans',system-ui,-apple-system,sans-serif;

  --wrap:1200px;
  --radius:16px;
  --radius-sm:10px;
  --shadow-card:0 6px 24px rgba(0,0,0,.10);
  --nav-h:64px;
}

/* ── Reset / base ───────────────────────────────────────────────────────────*/
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h);-webkit-text-size-adjust:100%;}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3{margin:0;line-height:1.15;}
p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:4px;}

.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:8px;top:-48px;z-index:200;background:var(--orange);color:var(--carbon);padding:10px 16px;border-radius:8px;font-family:var(--font-head);font-weight:700;transition:top .15s;}
.skip-link:focus{top:8px;}

/* ── Shared type ────────────────────────────────────────────────────────────*/
.eyebrow{font-family:var(--font-head);font-weight:700;font-size:.9375rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin:0 0 12px;}
.eyebrow--orange{color:var(--orange);}
.section-title{font-family:var(--font-head);font-weight:800;font-size:clamp(1.75rem,3.6vw,2.6rem);letter-spacing:-.01em;color:var(--ink);}
.section-sub{font-size:clamp(1.15rem,1.9vw,1.6rem);line-height:1.4;color:#232c33;margin-top:16px;max-width:62ch;}
.section-head{margin-bottom:36px;}
.section-head--center{text-align:center;margin-inline:auto;max-width:760px;}
.section-head--center .section-sub{margin-inline:auto;}
.section-head--onDark .section-title,.section-head--onDark .section-sub{color:var(--white);}
.section-head--onDark .section-sub{color:rgba(255,255,255,.85);}

/* ── Buttons ────────────────────────────────────────────────────────────────*/
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;font-family:var(--font-head);font-weight:700;font-size:.95rem;line-height:1;border:0;border-radius:100px;padding:14px 24px;transition:transform .12s ease,background .15s ease,box-shadow .15s ease;white-space:nowrap;}
.btn--primary{background:var(--orange);color:var(--carbon);}
.btn--primary:hover{background:#ffab45;transform:translateY(-1px);}
.btn--primary:active{transform:translateY(0);}
.btn--lg{font-size:1.08rem;padding:18px 36px;}
.btn[disabled],.btn--disabled{background:var(--slate);color:#6b7780;cursor:not-allowed;transform:none;}
.btn--secondary{background:#fff;color:var(--blue);}
.btn--secondary:hover{background:#eaf2fb;transform:translateY(-1px);}
.btn--secondary:active{transform:translateY(0);}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;}

/* ── NAV ────────────────────────────────────────────────────────────────────*/
.nav{position:sticky;top:0;z-index:100;background:var(--carbon);}
.nav__inner{max-width:var(--wrap);margin-inline:auto;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 clamp(16px,4vw,48px);}
.nav__brand{display:flex;align-items:center;color:var(--satin);flex-shrink:0;}
.nav__logo{height:19px;width:auto;position:relative;top:2px;}
.nav__logo-text{font-family:var(--font-head);font-weight:800;font-size:5.96px;fill:#fff;}
.nav__menu{display:flex;align-items:center;gap:clamp(16px,2.4vw,40px);}
.nav__links{display:flex;align-items:center;gap:clamp(12px,1.6vw,24px);}
.nav__links a{font-family:var(--font-body);font-weight:600;font-size:.875rem;color:var(--satin);padding:6px 2px;border-bottom:2px solid transparent;transition:border-color .15s,color .15s;}
.nav__links a:hover{color:#fff;border-bottom-color:var(--orange);}
.nav__cta{padding:10px 22px;font-size:.9rem;}
.nav__toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;background:transparent;border:0;padding:10px;}
.nav__toggle span{display:block;height:2px;background:var(--satin);border-radius:2px;transition:transform .2s,opacity .2s;}

/* ── 01 HERO ───────────────────────────────────────────────────────────────*/
/* Responsive crowd backdrop — mobile crop by default; tablet/desktop crops
   swapped in via the media queries in the RESPONSIVE block below. */
.hero{background:var(--denim) url('assets/img/hero-mobile.jpg') center bottom/cover no-repeat;border-bottom:16px solid var(--orange);padding:clamp(48px,7vw,80px) clamp(20px,6vw,120px);}
/* Columns stretch to equal height; each pushes its lower element (countdown /
   CTAs) to the bottom so the timer lines up with the buttons across the row. */
.hero__inner{max-width:1160px;margin-inline:auto;display:flex;flex-wrap:wrap;align-items:stretch;justify-content:space-between;gap:clamp(32px,5vw,72px);}
.hero__logo{flex:1 1 420px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:clamp(24px,4vw,44px);}
.hero__logo img{width:min(100%,484px);height:auto;}
.hero__content{flex:1 1 460px;max-width:540px;}
.hero__eyebrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-family:var(--font-head);font-weight:700;font-size:clamp(1rem,1.7vw,1.3rem);letter-spacing:.06em;text-transform:uppercase;color:var(--orange);margin-bottom:18px;}
.hero__eyebrow-sep{width:1px;height:20px;background:rgba(255,255,255,.4);}
.hero__title{font-family:var(--font-display);font-weight:400;font-size:clamp(2.75rem,7vw,6rem);line-height:1.02;color:var(--white);text-transform:none;}
.hero__sub{font-family:var(--font-head);font-weight:700;font-size:clamp(1.3rem,2.6vw,2rem);line-height:1.35;color:var(--satin);margin:22px 0 28px;text-wrap:balance;}

/* Hero countdown — compact row centered under the logo: orange numerals,
   hairline dividers, labels beneath. Ticks in the viewer's local time zone.
   Matches the logo's width so the clock centers directly under it. */
.countdown{width:min(100%,484px);text-align:center;}
.countdown__clock{display:inline-flex;align-items:flex-start;}
.countdown__unit{display:flex;flex-direction:column;align-items:center;padding:0 clamp(14px,2.2vw,28px);border-left:1px solid rgba(255,255,255,.28);}
.countdown__unit:first-child{border-left:0;padding-left:0;}
.countdown__num{font-family:var(--font-display);font-weight:400;font-size:clamp(2.2rem,4vw,3.1rem);line-height:1;color:var(--orange);font-variant-numeric:tabular-nums;}
.countdown__label{font-family:var(--font-head);font-weight:600;font-size:clamp(.7rem,1vw,.85rem);color:rgba(255,255,255,.82);margin-top:9px;}
/* Post-event message that replaces the ticking clock once Oct 1 arrives (JS adds
   --done and swaps in text). Overrides the inline-flex clock layout. */
.countdown__clock--done{display:block;font-family:var(--font-head);font-weight:700;font-size:clamp(1.05rem,2vw,1.35rem);color:var(--orange);}

/* ── 02 ABOUT ──────────────────────────────────────────────────────────────*/
.about{background:var(--satin);}
.about__inner{max-width:var(--wrap);margin-inline:auto;padding:clamp(56px,7vw,88px) clamp(20px,5vw,48px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:stretch;}
.about__copy{display:flex;flex-direction:column;justify-content:center;}
.about__title{font-family:var(--font-head);font-weight:800;font-size:clamp(1.8rem,3.6vw,2.7rem);letter-spacing:-.015em;color:var(--ink);}
.about__body{font-size:clamp(1.2rem,1.9vw,1.5rem);line-height:1.5;color:#1e2733;margin-top:20px;max-width:42ch;}
.about__media{display:flex;}
.about__photo{width:100%;height:100%;min-height:300px;object-fit:cover;border-radius:var(--radius);}

/* Blue pull-quote band */
.band{background:var(--blue);}
.band__text{max-width:var(--wrap);margin-inline:auto;padding:20px clamp(20px,5vw,48px);text-align:center;color:#fff;font-family:var(--font-head);font-weight:700;font-size:clamp(1.2rem,2.4vw,1.75rem);}

/* ── Tags (event tier chips) ───────────────────────────────────────────────*/
/* Figma chips: light pill + colored leading dot (hub/local), red-pin location, solid-navy category */
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);font-weight:700;font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;padding:5px 11px;border-radius:7px;}
.tag--hub{background:#f7ce7f;color:#6a4410;}
.tag--hub::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange);flex-shrink:0;}
.tag--local{background:#cfe4f8;color:var(--blue);}
.tag--local::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);flex-shrink:0;}
.tag--soon{background:var(--slate);color:#4b5a63;}
.tag--loc{background:#eef3f7;color:var(--ink);}
.tag--loc svg{width:12px;height:12px;color:#e0483b;flex-shrink:0;}
.tag--trade{background:var(--denim);color:#fff;}

/* ── 04 MAP SECTION ────────────────────────────────────────────────────────*/
.map-section{background:var(--denim) url('assets/img/map-bg-mobile.jpg') center/cover no-repeat;}
.map-section__inner{max-width:1120px;margin-inline:auto;padding:clamp(52px,7vw,80px) clamp(16px,5vw,48px);}
.map-section__updated{font-family:var(--font-head);font-weight:600;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:#a2b2be;margin-top:10px;}
.map-section .section-sub{font-weight:400;}
.map-wrap{position:relative;border-radius:10px;overflow:hidden;}
.map{width:100%;height:clamp(360px,52vw,560px);background:#0a2842;}
/* Sits above the Mapbox logo/attribution in the bottom-left corner */
.map__legend{position:absolute;left:12px;bottom:34px;z-index:2;display:flex;gap:14px;flex-wrap:wrap;background:rgba(9,26,42,.82);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.12);border-radius:100px;padding:8px 14px;}
.map__legend-item{display:inline-flex;align-items:center;gap:6px;color:#fff;font-family:var(--font-head);font-weight:600;font-size:.72rem;}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;}
.dot--hub{background:var(--orange);}
.dot--local{background:var(--blue-tint);}
.dot--soon{background:#5b7186;}

/* Blue finder panel (contains the zip search + result cards) */
.finder-panel{background:var(--blue);border-radius:16px;padding:clamp(20px,3vw,32px);margin-top:16px;}

/* Zip finder — white labeled field, dark located-in bar, underlined geo link */
.zip-finder{margin:0;}
.zip-finder__row{display:flex;gap:12px;}
.zip-finder__field{flex:1;background:#fff;border-radius:10px;padding:8px 18px;text-align:left;display:flex;flex-direction:column;justify-content:center;min-height:58px;}
.zip-finder__label{font-family:var(--font-head);font-weight:700;font-size:.72rem;color:var(--blue);margin-bottom:1px;}
.zip-finder__input{width:100%;border:0;background:transparent;padding:0;font-family:var(--font-body);font-size:1.05rem;color:var(--ink);}
.zip-finder__input:focus{outline:none;}
.zip-finder__input::placeholder{color:#8b98a1;}
.zip-finder__submit{flex-shrink:0;padding-inline:28px;}
.zip-finder__located{background:#0d1418;color:#c9d2d8;font-family:var(--font-body);font-size:.8rem;padding:9px 16px;border-radius:6px;margin-top:8px;}
.zip-finder__located strong{color:#fff;}
/* Geo link + the "back to the full map" reset sit on one row; the reset is hidden
   (via [hidden]) until a search is active, so the row is just the geo link at rest. */
.zip-finder__actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:12px;}
/* Tap targets: WCAG 2.5.8 asks for 24x24, the mobile platform guidelines ask for
   ~44. The geo link was 22px tall, which failed even the AA minimum. Both controls
   are now 44 so they read as one row. */
.zip-finder__geo{display:inline-flex;align-items:center;gap:7px;min-height:44px;background:transparent;border:0;color:#fff;font-family:var(--font-head);font-weight:600;font-size:.85rem;text-decoration:underline;padding:2px 4px;}
.zip-finder__geo:hover{color:#dbe8f6;}
.zip-finder__reset{display:inline-flex;align-items:center;gap:6px;min-height:44px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.45);border-radius:999px;color:#fff;font-family:var(--font-head);font-weight:600;font-size:.85rem;padding:7px 18px;cursor:pointer;transition:background .15s ease,border-color .15s ease;}
.zip-finder__reset:hover{background:rgba(255,255,255,.26);border-color:#fff;}
.zip-finder__reset:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}
.zip-finder__reset[hidden]{display:none;}
.zip-finder__status{margin-top:8px;font-size:.85rem;color:rgba(255,255,255,.9);min-height:1em;}
.zip-finder__status--err{color:#ffd7a8;}
/* Footer-CTA variant: full-width field, then located bar, geo link, and a centered button */
.zip-finder--stacked{display:flex;flex-direction:column;align-items:stretch;text-align:left;}
.zip-finder--stacked .zip-finder__actions{align-self:flex-start;}
.zip-finder--stacked .zip-finder__submit{align-self:center;margin-top:16px;}

/* Result cards */
.results{display:grid;gap:20px;margin-top:22px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.results:empty{margin-top:0;}
.result-card{background:#fff;border-radius:12px;padding:18px 18px 12px;display:flex;flex-direction:column;align-items:flex-start;gap:9px;}
.result-card .tag{align-self:flex-start;}
/* The event's own promotional title (local events only) - a kicker line above
   the city so the card still reads "location first" at a glance, matching how
   the rest of the page (and the map) identifies an event by its city.
   margin-bottom pulls it tight against the city below (the card's flex `gap`
   is 9px everywhere, which reads fine between unrelated lines but leaves an
   awkward gap between a kicker and the headline it belongs to). */
.result-card__name{font-size:.78rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--blue);margin-bottom:-5px;}
.result-card__city{font-family:var(--font-head);font-weight:800;font-size:1.35rem;color:var(--ink);}
.result-card__meta{font-size:.9rem;color:var(--ink-soft);}
.result-card__addr{font-size:.85rem;color:#5a6670;}
.result-card__host{font-size:.85rem;color:var(--ink-soft);font-weight:600;}
.result-card__dist{font-size:.78rem;color:var(--blue);font-weight:700;}
/* Seats remaining — a chip in the same family as the hub/local tags, so a card
   reads as one system. Three states: plenty (calm blue), nearly gone (Golden
   Hour, the same colour as the CTA it sits above), and full (muted, so it reads
   as information rather than an error). Colour is never the only signal — the
   wording changes too ("18 spots left" / "Only 3 spots left" / "Event is full"),
   which is what keeps it legible to a colour-blind visitor. */
.seats{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);font-weight:700;font-size:.78rem;letter-spacing:.02em;padding:5px 11px;border-radius:7px;background:#e4eef8;color:var(--blue);font-variant-numeric:tabular-nums;}
.seats::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0;}
.seats.is-urgent{background:#fdf0d8;color:#8a5606;}
.seats.is-urgent::before{background:var(--orange);}
.seats.is-full{background:var(--slate);color:#4b5a63;}
/* margin-top:auto bottom-aligns the CTA, so a row of cards with different amounts
   of venue/address/host text still lines its buttons up. */
.result-card .btn{margin-top:auto;width:100%;}

/* ── 05 LEADERBOARD ────────────────────────────────────────────────────────*/
.leaderboard{background:#ccd5dc;}
.leaderboard__inner{max-width:var(--wrap);margin-inline:auto;padding:clamp(52px,7vw,80px) clamp(20px,5vw,48px);}
.leaderboard__body{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(22px,3vw,40px);align-items:stretch;margin-top:36px;}
.leaderboard__media{border-radius:16px;overflow:hidden;min-height:340px;}
.leaderboard__media img{width:100%;height:100%;object-fit:cover;display:block;}
.leaderboard__panel{background:var(--denim);border-radius:16px;padding:16px;display:flex;}
.ranking{display:flex;flex-direction:column;gap:10px;width:100%;justify-content:center;}
.ranking__row{min-height:52px;}
.ranking__btn{display:flex;align-items:stretch;width:100%;min-height:52px;padding:0;margin:0;border:0;background:none;color:inherit;font:inherit;text-align:left;border-radius:8px;overflow:hidden;-webkit-appearance:none;appearance:none;}
button.ranking__btn{cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;}
button.ranking__btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.18);}
button.ranking__btn:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}
.ranking__main{flex:1;display:flex;align-items:center;gap:12px;background:#fff;padding:10px 16px;}
.ranking__num{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;font-family:var(--font-head);font-weight:800;font-size:.82rem;display:flex;align-items:center;justify-content:center;}
.ranking__city{font-family:var(--font-head);font-weight:700;color:var(--ink);font-size:.98rem;}
.ranking__count{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--blue);color:#fff;padding:0 20px;font-family:var(--font-head);font-weight:700;font-size:.92rem;white-space:nowrap;min-width:152px;}
.ranking__count svg{width:22px;height:22px;flex-shrink:0;transition:transform .12s ease;}
button.ranking__btn:hover .ranking__count svg,button.ranking__btn:focus-visible .ranking__count svg{transform:translateX(3px);}

/* ── 06 SPOTLIGHTS ─────────────────────────────────────────────────────────*/
.spotlights{background:#eef2f5;}
.spotlights__inner{max-width:var(--wrap);margin-inline:auto;padding:clamp(52px,7vw,80px) clamp(20px,5vw,48px);}
.spotlights__track{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.spotlight{background:var(--blue);border-radius:16px;padding:16px;color:#fff;display:flex;flex-direction:column;gap:13px;}
.spotlight__quote{font-family:var(--font-head);font-weight:700;font-size:1.4rem;line-height:1.25;min-height:2.5em;}
.spotlight__quote::before{content:"\201C";}
.spotlight__quote::after{content:"\201D";}
/* Photo region — name / role / business sit on top of it (blue shows through when no photo) */
.spotlight__photo{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:1/1;display:flex;background:transparent;}
.spotlight__photo img{width:100%;height:100%;object-fit:cover;}
/* No photo yet (or the photo failed to load) — a deliberate deep-navy panel so the
   name/role lockup still reads cleanly instead of sitting on a bare card. */
.spotlight__photo--empty{background:linear-gradient(to top,#00223f,#004a8f);}
.spotlight__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,26,52,.88),transparent 46%);}
.spotlight__namewrap{position:absolute;left:6px;right:6px;bottom:10px;z-index:2;}
.spotlight__name{display:block;font-family:var(--font-display);font-weight:400;font-size:2rem;line-height:1;color:#fff;text-transform:uppercase;letter-spacing:.01em;}
.spotlight__metarow{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:6px;}
.spotlight__role,.spotlight__biz{font-family:var(--font-head);font-weight:600;font-size:.76rem;color:rgba(255,255,255,.9);}
.spotlight__divider{border:0;border-top:1px solid rgba(255,255,255,.3);margin:1px 0;}
.spotlight__handle{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;background:#fff;color:var(--ink);border-radius:100px;padding:4px 13px 4px 5px;font-family:var(--font-head);font-weight:600;font-size:.76rem;transition:background .15s;}
a.spotlight__handle:hover{background:#e9eff5;}
.spotlight__handle-ic{width:19px;height:19px;border-radius:50%;background:var(--blue);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
/* Platform-differentiated social CTA icons */
.spotlight__handle-ic--fb{background:#1877F2;}
.spotlight__handle-ic--ig{background:linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888);}
.spotlight__handle-ic svg{width:11px;height:11px;}
.spotlight__chips{display:flex;flex-wrap:wrap;gap:8px;}

/* ── 07/08 TIERS + WHY ─────────────────────────────────────────────────────*/
.tiers{background:#ccd5dc;}
.tiers__inner{max-width:var(--wrap);margin-inline:auto;padding:clamp(52px,7vw,80px) clamp(20px,5vw,48px);}
.tier-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:clamp(40px,5vw,64px);}
.tier-card{position:relative;background:#eef1f4;border-radius:16px;padding:14px;box-shadow:0 4px 16px rgba(0,0,0,.05);display:flex;flex-direction:column;}
.tier-card > .tag{position:absolute;top:28px;left:28px;z-index:2;}
.tier-card__media{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:4/3;}
.tier-card__media img{width:100%;height:100%;object-fit:cover;display:block;}
.tier-card__body{padding:16px 8px 6px;display:flex;flex-direction:column;flex:1;}
.tier-card__title{font-family:var(--font-head);font-weight:800;font-size:1.5rem;margin-bottom:8px;}
.tier-card__body p{color:#333b41;font-size:1.05rem;margin-bottom:18px;}
/* margin-top:auto bottom-aligns the CTA so both tier buttons stay even at any width */
.tier-card__cta{width:100%;margin-top:auto;}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.why{text-align:center;}
.why__icon{display:inline-flex;align-items:center;justify-content:center;width:76px;height:76px;margin-bottom:16px;}
.why__icon img{width:100%;height:100%;}
.why__title{font-family:var(--font-head);font-weight:800;font-size:1.5rem;color:var(--blue);margin-bottom:8px;}
.why p{color:var(--ink-soft);font-size:.95rem;}

/* ── 11 SPONSORS ───────────────────────────────────────────────────────────*/
.sponsors{background:var(--satin);}
.sponsors__inner{max-width:var(--wrap);margin-inline:auto;padding:clamp(48px,6vw,72px) clamp(20px,5vw,48px);}
.sponsor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px;}
/* Bare logos directly on the section background (no card), matching the Figma */
.sponsor{aspect-ratio:5/2;display:flex;align-items:center;justify-content:center;gap:14px;padding:12px;min-height:104px;}
.sponsor img{max-width:82%;max-height:70%;object-fit:contain;}
.sponsor--ph{color:#9aa7b0;}
.sponsor__mark{width:60px;height:60px;fill:#aeb9c1;flex-shrink:0;}
.sponsor__ph{font-family:var(--font-head);font-weight:700;font-size:1.02rem;letter-spacing:.03em;color:#9aa7b0;}

/* ── 09 HOST · "Interested in hosting a local event?" banner ────────────────*/
.host{background:var(--blue);}
.host__inner{max-width:var(--wrap);margin-inline:auto;padding:clamp(22px,3.2vw,34px) clamp(20px,5vw,48px);display:flex;align-items:center;gap:clamp(16px,2.4vw,26px);}
/* Megaphone SVG ships with its own light-blue circle, so no wrapper styling. */
.host__icon{flex-shrink:0;width:clamp(56px,7vw,72px);height:auto;}
.host__q{font-family:var(--font-head);font-weight:800;font-size:clamp(1.3rem,2.4vw,1.9rem);color:#fff;line-height:1.15;}
.host__cta{flex-shrink:0;margin-left:auto;}

/* ── 10 FOOTER CTA ─────────────────────────────────────────────────────────*/
.footer-cta{background:var(--denim);}
.footer-cta__inner{max-width:1040px;margin-inline:auto;padding:clamp(52px,7vw,80px) clamp(20px,5vw,48px);text-align:center;}
.footer-cta .section-title{color:#fff;}
.footer-cta .section-sub{color:rgba(255,255,255,.85);margin-inline:auto;}
.footer-cta .zip-finder{margin-top:26px;}

/* ── MKT FOOTER ────────────────────────────────────────────────────────────*/
.site-footer{background:var(--carbon);color:#c4ccd2;border-top:4px solid var(--orange);}
.site-footer__inner{max-width:1360px;margin-inline:auto;padding:clamp(40px,5vw,60px) clamp(20px,3vw,44px);display:grid;grid-template-columns:1fr auto;gap:40px 80px;}
/* Hi-res HCP lockup shipped in brand blue; recolored to white for the dark footer */
.site-footer__logo{height:40px;width:auto;margin-bottom:16px;filter:brightness(0) invert(1);}
.site-footer__tag{max-width:44ch;font-size:.95rem;line-height:1.5;color:#aab4ba;margin-bottom:26px;}
.site-footer__champion{height:88px;width:auto;margin-bottom:24px;}
.site-footer__proof{display:flex;flex-wrap:wrap;align-items:center;gap:22px 40px;}
.site-footer__apps{display:flex;gap:12px;}
.store-badge-link{display:inline-flex;border-radius:6.5px;transition:opacity .15s;}
.store-badge-link:hover{opacity:.85;}
.store-badge{height:44px;width:auto;display:block;}
.site-footer__ratings{display:flex;gap:32px;}
.rating{display:flex;flex-direction:column;align-items:flex-start;gap:5px;}
.rating__num{font-family:var(--font-head);font-weight:800;font-size:2.35rem;line-height:1;color:#fff;}
.stars{position:relative;display:inline-block;font-size:1rem;line-height:1;letter-spacing:2px;}
.stars__base{color:#4a555c;}
.stars__fill{position:absolute;inset:0;overflow:hidden;white-space:nowrap;color:var(--orange);width:var(--pct);}
.rating__src{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-head);font-weight:600;font-size:.72rem;color:#cfd6db;}
.rating__src svg{flex-shrink:0;}
.rating__count{color:#99a2a9;font-weight:500;}
.site-footer__col-title{font-family:var(--font-head);font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:#c4ccd2;margin-bottom:16px;}
.site-footer__col-title--mt{margin-top:32px;}
.site-footer__socials{display:flex;gap:14px;}
.site-footer__socials a{width:44px;height:44px;border-radius:50%;background:#4a555c;color:#e2e8ec;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;}
.site-footer__socials a svg{width:22px;height:22px;}
.site-footer__socials a:hover{background:#5a666d;color:#fff;}
.site-footer__contact{line-height:2;}
.site-footer__contact a{color:#4f9fe3;font-family:var(--font-head);font-weight:700;font-size:.95rem;}
.site-footer__contact a:hover{color:#79bdf2;text-decoration:underline;}
.site-footer__legal{padding:8px clamp(20px,5vw,48px) 24px;}
.site-footer__legal p{max-width:var(--wrap);margin-inline:auto;text-align:center;font-size:.8rem;color:#969fa6;}
.site-footer__legal a{color:#969fa6;text-decoration:underline;}
.site-footer__legal a:hover{color:#fff;}

/* ══════════════════════════ RESPONSIVE ══════════════════════════ */
@media (min-width:600px){
  .hero{background-image:url('assets/img/hero-tablet.jpg');}
  .map-section{background-image:url('assets/img/map-bg-tablet.jpg');}
}
@media (min-width:1000px){
  .hero{background-image:url('assets/img/hero-desktop.jpg');}
  .map-section{background-image:url('assets/img/map-bg-desktop.jpg');}
}

/* Tablet & down */
@media (max-width:900px){
  .nav__toggle{display:flex;}
  .nav__menu{position:absolute;top:var(--nav-h);left:0;right:0;background:var(--carbon);flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 20px;border-top:1px solid #262e32;box-shadow:0 12px 24px rgba(0,0,0,.3);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;}
  .nav__menu.is-open{opacity:1;visibility:visible;transform:translateY(0);}
  .nav__links{flex-direction:column;align-items:stretch;gap:0;}
  .nav__links a{padding:14px 6px;border-bottom:1px solid #23292d;}
  .nav__links a:hover{border-bottom-color:#23292d;}
  .nav__cta{margin-top:14px;text-align:center;}
  .nav.is-open .nav__toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav.is-open .nav__toggle span:nth-child(2){opacity:0;}
  .nav.is-open .nav__toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .about__inner{grid-template-columns:1fr;}
  .about__media{order:-1;}
  .leaderboard__body{grid-template-columns:1fr;}
  .leaderboard__media{order:-1;min-height:220px;}
  .spotlights__track{grid-template-columns:1fr;max-width:460px;margin-inline:auto;}
  .tier-cards{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:repeat(2,1fr);gap:28px 20px;}
  .sponsor-grid{grid-template-columns:repeat(2,1fr);}
  .site-footer__inner{grid-template-columns:1fr;gap:28px;}
  .host__inner{flex-direction:column;text-align:center;align-items:center;}
  .host__cta{margin-left:0;}
}

/* Phone */
@media (max-width:560px){
  .hero__inner{flex-direction:column;align-items:stretch;text-align:center;gap:32px;}
  .hero__content{max-width:100%;width:100%;}
  .hero__eyebrow{justify-content:center;}
  .hero__logo{flex-basis:auto;width:100%;align-items:center;}
  .hero__logo img{width:auto;max-width:100%;}
  .hero .btn-row{justify-content:center;}
  .zip-finder__row{flex-direction:column;}
  .zip-finder__submit{width:100%;}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .sponsor-grid{grid-template-columns:1fr;}
  .results{grid-template-columns:1fr;}
  .band__text{font-size:1.05rem;}
  /* Countdown: tighten the compact row so all four units fit on phones */
  .countdown__unit{padding:0 clamp(10px,3.6vw,18px);}
  .countdown__num{font-size:clamp(1.75rem,8.5vw,2.3rem);}
  /* Leaderboard: the fixed-width count pill overflowed the single-column grid on
     phones (grid tracks honour min-content) — trim it so rows fit at 375px. */
  .ranking__main{min-width:0;}
  .ranking__city{overflow-wrap:anywhere;}
  .ranking__count{min-width:0;padding:0 14px;}
}

/* ── Map markers (created in JS) ───────────────────────────────────────────*/
.tt-marker{border:0;padding:0;background:transparent no-repeat center/contain;cursor:pointer;transition:transform .15s ease,filter .15s ease;}
.tt-marker--hub{width:34px;height:34px;background-image:url('assets/img/marker-hub-orange.png');filter:drop-shadow(0 3px 5px rgba(0,0,0,.4));}
.tt-marker--local{width:34px;height:34px;background-image:url('assets/img/marker-local.png');filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));}
.tt-marker--soon{width:34px;height:34px;background-image:url('assets/img/marker-local.png');opacity:.55;filter:grayscale(.35);}
.tt-marker:hover{transform:scale(1.12);z-index:3;}
.tt-marker.is-active{transform:scale(1.22);filter:drop-shadow(0 0 3px rgba(255,255,255,.9)) drop-shadow(0 4px 8px rgba(0,0,0,.5));z-index:4;}

.map--fallback{display:flex;align-items:center;justify-content:center;padding:24px;}
.map__fallback{color:#cdd8e0;font-family:var(--font-head);font-weight:600;text-align:center;max-width:40ch;}

.results__empty{grid-column:1/-1;text-align:center;color:#fff;background:rgba(255,255,255,.08);border-radius:var(--radius);padding:24px;font-family:var(--font-head);font-weight:600;}

/* Mapbox popup skin */
.mapboxgl-popup-content{border-radius:12px!important;padding:16px!important;box-shadow:0 8px 28px rgba(0,0,0,.28)!important;}
.tt-popup{display:flex;flex-direction:column;gap:8px;min-width:180px;}
.tt-popup__city{font-family:var(--font-head);font-weight:800;font-size:1.05rem;color:var(--ink);}
.tt-popup__meta{font-size:.82rem;color:var(--ink-soft);}
.tt-popup__seats{align-self:flex-start;font-size:.74rem;padding:4px 9px;}
.tt-popup__btn{margin-top:4px;font-size:.82rem;padding:10px 16px;}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important;animation:none!important;}
}