/* ============================================================
   SoSo Sports — Global Stylesheet
   Extracted from Homepage Design v6
   Fonts: Nunito, Nunito Sans, Barlow Condensed, DM Mono
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,600;0,700;0,800;0,900;1,400&family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,500;0,6..12,600;1,6..12,400&family=DM+Mono:wght@400;500&family=Barlow+Condensed:wght@800;900&display=swap');


/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {
  --bubblegum: #FF69B4;
  --sunset:    #FF7A5C;
  --pistachio: #90EE90;
  --sky:       #87CEEB;
  --lavender:  #C4A1FF;
  --cream:     #FFF9E6;
  --sand:      #F8D6B3;
  --midnight:  #0A0A0A;
  --yellow:    #FFDD00;
  --mint:      #BAFCA2;
  --amber:     #FFDB58;
  --ice:       #DAF0FA;
  --peach:     #FFA07A;
}


/* ============================================================
   RESET & BASE
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  background: rgb(196, 161, 255);
}

body {
  background: var(--sky);
  color: var(--midnight);
  font-family: 'Nunito Sans', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}



/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */

.section-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(36px, 4vw, 54px);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: 0.04em;
  color: var(--midnight);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  color: rgba(10, 10, 10, 0.55);
  font-size: 12px;
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  width: fit-content;
}


/* ============================================================
   BUTTONS
   ============================================================ */

/* Primary CTA — yellow, bubblegum shadow */
.btn-primary {
  background: var(--yellow);
  color: var(--midnight);
  font-family: 'Nunito', sans-serif;
  font-size: 17px;
  font-weight: 800;
  padding: 13px 30px;
  border-radius: 14px;
  border: 2.5px solid var(--midnight);
  text-decoration: none;
  box-shadow: 5px 5px 0px var(--lavender), 5px 5px 0px 2px #000;
  transition: transform 0.12s, box-shadow 0.12s;
  display: inline-block;
}
.btn-primary::after { content: none; }
.btn-primary:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0px var(--lavender), 7px 7px 0px 2px #000;
}

/* CTA Dark — yellow, sky shadow (used on coloured backgrounds) */
.btn-cta-dark {
  background: var(--yellow);
  color: var(--midnight);
  font-family: 'Nunito', sans-serif;
  font-size: 17px;
  font-weight: 800;
  padding: 14px 36px;
  border-radius: 14px;
  border: 2.5px solid var(--midnight);
  text-decoration: none;
  box-shadow: 5px 5px 0px var(--sky), 5px 5px 0px 2px #000;
  transition: transform 0.12s, box-shadow 0.12s;
  display: inline-block;
}
.btn-cta-dark::after { content: none; }
.btn-cta-dark:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0px var(--sky), 7px 7px 0px 2px #000;
}

/* Ghost link — subtle text button */
.btn-ghost {
  color: rgba(10, 10, 10, 0.65);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s;
  padding: 13px 4px;
}
.btn-ghost:hover { color: var(--midnight); }
.btn-ghost-arrow { display: inline-flex; align-items: center; }
.btn-ghost-arrow svg { width: 1em; height: 1em; }

/* Loading spinner — inline in buttons */
.btn-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2.5px solid rgba(10,10,10,0.2);
  border-top-color: var(--midnight);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}

@keyframes spin { to { transform: rotate(360deg); } }


/* ============================================================
   NAVIGATION
   ============================================================ */

nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: rgba(196, 161, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 3px solid var(--midnight);
  padding: 0 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  transition: box-shadow 0.3s, transform 0.5s ease-out;
}
nav.scrolled { box-shadow: 0 4px 24px rgba(10, 10, 10, 0.08); }
nav.hidden { transform: translateY(-100%); }

.nav-logo img {
  height: 44px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
}
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--midnight);
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 6px;
  transition: background 0.18s, color 0.18s;
}
.nav-links a:not(.nav-btn):hover { background: var(--sand); }

.nav-btn {
  font-family: 'Nunito', sans-serif;
  font-size: 15px !important;
  font-weight: 800 !important;
  padding: 8px 20px !important;
  border-radius: 14px !important;
  display: inline-block !important;
}
.nav-btn-primary {
  background: var(--yellow) !important;
  color: var(--midnight) !important;
  border: 2.5px solid var(--midnight) !important;
  box-shadow: 5px 5px 0px var(--sky), 5px 5px 0px 2px #000 !important;
  transition: transform 0.12s, box-shadow 0.12s !important;
}
.nav-btn-primary::after { content: none; }
.nav-btn-primary:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 7px 7px 0px var(--sky), 7px 7px 0px 2px #000 !important;
  background: var(--yellow) !important;
}

.nav-ig-link {
  display: flex;
  align-items: center;
  color: var(--midnight);
  opacity: 0.5;
  padding: 6px 10px;
  border-radius: 6px;
  transition: opacity 0.2s;
}
.nav-ig-link:hover { opacity: 1; background: var(--sand); }

/* Mobile nav button (shown at ≤960px) */
.nav-mobile-btn {
  display: none;
  background: var(--yellow);
  color: var(--midnight);
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 14px;
  padding: 8px 18px;
  border-radius: 12px;
  border: 2px solid var(--midnight);
  box-shadow: 5px 5px 0px var(--sky), 5px 5px 0px 2px #000;
  text-decoration: none;
  transition: transform 0.12s, box-shadow 0.12s;
}
.nav-mobile-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0px var(--sky), 7px 7px 0px 2px #000;
}

.nav-mobile-ig {
  display: none;
  align-items: center;
  color: var(--midnight);
  opacity: 0.6;
  padding: 6px 8px;
  padding-left: max(8px, env(safe-area-inset-left));
  border-radius: 6px;
  transition: opacity 0.2s;
  text-decoration: none;
}
.nav-mobile-ig:hover { opacity: 1; }


/* ============================================================
   MOBILE STICKY BAR
   ============================================================ */

.mobile-bar {
  display: flex;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 300;
  background: var(--bubblegum);
  border-top: 3px solid var(--midnight);
  padding: 10px 20px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  transition: transform 0.5s ease-out;
  transform: translateY(100%);
}
.mobile-bar.hidden { transform: translateY(100%); }
.mobile-bar.visible { transform: translateY(0); }
.mobile-bar span {
  color: var(--midnight);
  font-size: 14px;
  font-weight: 700;
}
.mobile-bar a {
  background: var(--yellow);
  color: var(--midnight);
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 15px;
  padding: 10px 22px;
  border-radius: 12px;
  border: 2px solid var(--midnight);
  box-shadow: 5px 5px 0px var(--sky), 5px 5px 0px 2px #000;
  text-decoration: none;
  transition: transform 0.12s, box-shadow 0.12s;
}
.mobile-bar a::after { content: none; }
.mobile-bar a:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0px var(--sky), 7px 7px 0px 2px #000;
}


/* ============================================================
   SECTION DIVIDERS
   ============================================================ */

.locations, .how, .sports, .founder, .instagram, .faq, .cta-band, footer {
  border-top: 3px solid var(--midnight);
}


/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */

.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

.stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.stagger.visible > *:nth-child(1)  { opacity: 1; transform: none; transition-delay: 0s; }
.stagger.visible > *:nth-child(2)  { opacity: 1; transform: none; transition-delay: .08s; }
.stagger.visible > *:nth-child(3)  { opacity: 1; transform: none; transition-delay: .16s; }
.stagger.visible > *:nth-child(4)  { opacity: 1; transform: none; transition-delay: .24s; }
.stagger.visible > *:nth-child(5)  { opacity: 1; transform: none; transition-delay: .32s; }
.stagger.visible > *:nth-child(6)  { opacity: 1; transform: none; transition-delay: .40s; }
.stagger.visible > *:nth-child(7)  { opacity: 1; transform: none; transition-delay: .48s; }
.stagger.visible > *:nth-child(8)  { opacity: 1; transform: none; transition-delay: .56s; }
.stagger.visible > *:nth-child(9)  { opacity: 1; transform: none; transition-delay: .64s; }
.stagger.visible > *:nth-child(10) { opacity: 1; transform: none; transition-delay: .72s; }
.stagger.visible > *:nth-child(11) { opacity: 1; transform: none; transition-delay: .80s; }
.stagger.visible > *:nth-child(12) { opacity: 1; transform: none; transition-delay: .88s; }


/* ============================================================
   VIBE STRIP (marquee)
   ============================================================ */

.vibe-strip {
  background: var(--midnight);
  border-top: 3px solid var(--midnight);
  border-bottom: 3px solid var(--midnight);
  overflow: hidden;
  padding: 1.1rem 0;
  position: relative;
}
.vibe-track {
  display: inline-block;
  white-space: nowrap;
  animation: vibe-scroll 38s linear infinite;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* Deliberately no hover-pause rule — the marquee is meant to run
   continuously regardless of interaction. A :hover pause here also
   caused a mobile-specific bug: touch devices trigger :hover on tap
   and often can't "unhover" without tapping elsewhere, so a single tap
   could leave the animation stuck paused indefinitely. */
.vibe-item {
  display: inline-block;
  vertical-align: middle;
  margin: 0 1rem;
}
.vibe-sep {
  display: inline-block;
  vertical-align: middle;
  width: 14px; height: 14px;
  margin: 0 0.75rem;
  transform: rotate(45deg);
}
.vibe-c1 { color: var(--bubblegum); }
.vibe-c2 { color: var(--pistachio); }
.vibe-c3 { color: var(--sunset); }
.vibe-c4 { color: var(--sky); }
.vibe-c5 { color: var(--lavender); }
.vibe-c6 { color: var(--yellow); }
.vibe-sep.s1 { background: var(--bubblegum); }
.vibe-sep.s2 { background: var(--pistachio); }
.vibe-sep.s3 { background: var(--sunset); }
.vibe-sep.s4 { background: var(--sky); }
.vibe-sep.s5 { background: var(--lavender); }
.vibe-sep.s6 { background: var(--yellow); }

@keyframes vibe-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ============================================================
   HERO
   ============================================================ */

.hero {
  padding-top: 68px;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow: hidden;
}

.hero-left {
  background: var(--sky);
  padding: 5rem 3.5rem 5rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.hero-eyebrow {
  margin-bottom: 1.5rem;
}

.hero-headline {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(54px, 5.5vw, 80px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: 0.04em;
  color: var(--midnight);
  margin-bottom: 1.25rem;
}
.hero-headline .white { color: #fff; }

.hero-sub {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(10, 10, 10, 0.72);
  max-width: 400px;
  margin-bottom: 2.5rem;
}

.hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 3rem;
}

/* Hero right — photo mosaic */
.hero-right {
  position: relative;
  background: var(--midnight);
  overflow: hidden;
}
.hero-mosaic {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
  padding: 3px;
}
.mosaic-main {
  grid-row: span 2;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.mosaic-top, .mosaic-bot {
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.mosaic-main .mosaic-img,
.mosaic-top .mosaic-img,
.mosaic-bot .mosaic-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}
.mosaic-main:hover .mosaic-img,
.mosaic-top:hover .mosaic-img,
.mosaic-bot:hover .mosaic-img { transform: scale(1.06); }


/* ============================================================
   LOCATIONS
   ============================================================ */

.locations {
  padding: 5rem 4rem;
  background: var(--mint);
}
.locations .section-title { margin-bottom: 2.5rem; }

.location-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.location-card-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.location-card {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-decoration: none;
  color: var(--midnight);
  transition: transform 0.2s;
  border: 3px solid var(--midnight);
}
a.location-card.card-iw { background: var(--amber); }
a.location-card.card-es { background: var(--ice); }
.location-card:hover { transform: translateY(-3px); }
.location-card:hover .loc-arrow { transform: translate(4px, 0); }
.location-card:hover ~ .loc-cutout { transform: translateY(-3px); }

.location-content {
  position: relative;
  z-index: 2;
  padding: 2rem;
}
.location-card.card-iw .location-content,
.location-card.card-es .location-content { max-width: 60%; }

/* Day tab above card */
.loc-day-tab {
  display: inline-block;
  align-self: flex-start;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 18px;
  border-radius: 30px;
  border: 3px solid var(--midnight);
  color: var(--midnight);
}
.card-iw .loc-day-tab { background: var(--sunset); }
.card-es .loc-day-tab { background: var(--sky); }

/* Hide old loc-day inside card */
.loc-day { display: none; }

.loc-name {
  font-family: 'Nunito', sans-serif;
  font-size: 38px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--midnight);
  margin-bottom: 4px;
}
.loc-suburb {
  font-size: 15px;
  color: var(--midnight);
  font-weight: 600;
  margin-bottom: 1rem;
}
.loc-meta {
  font-size: 14px;
  color: var(--midnight);
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 500;
}
.loc-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 800;
  padding: 11px 22px;
  border-radius: 12px;
  border: 2.5px solid var(--midnight);
  box-shadow: 5px 5px 0px var(--sky), 5px 5px 0px 2px #000;
  transition: transform 0.12s, box-shadow 0.12s;
}
.loc-arrow { transition: transform 0.2s; display: inline-flex; align-items: center; }
.loc-arrow-svg { width: 16px; height: 16px; }
.card-iw .loc-cta { background: var(--sunset); color: var(--midnight); box-shadow: 5px 5px 0px var(--pistachio), 5px 5px 0px 2px #000; }
.card-iw .loc-cta:hover { box-shadow: 7px 7px 0px var(--pistachio), 7px 7px 0px 2px #000; }
.card-es .loc-cta { background: var(--sky); color: var(--midnight); box-shadow: 5px 5px 0px var(--bubblegum), 5px 5px 0px 2px #000; }
.card-es .loc-cta:hover { box-shadow: 7px 7px 0px var(--bubblegum), 7px 7px 0px 2px #000; }
.loc-cta:hover { transform: translate(-2px, -2px); }

/* Cutout photo overlay */
.loc-cutout {
  position: absolute;
  bottom: 3px; /* clears the card's 3px border */
  right: 0;
  width: 55%;
  max-height: calc(100% - 3px);
  object-fit: contain;
  object-position: bottom;
  pointer-events: none;
  z-index: 10;
  transition: transform 0.2s;
}


/* ============================================================
   HOW IT WORKS
   ============================================================ */

.how {
  background: var(--midnight);
  padding: 5rem 4rem;
  position: relative;
  overflow: hidden;
}
.how-bg-img { display: none; }
.how .section-title { color: #FAF9F6; margin-bottom: 2.5rem; }

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  position: relative;
  z-index: 2;
}
.step {
  padding: 1.75rem;
  border-radius: 16px;
  background: #FAF9F6;
  border: 3px solid var(--midnight);
  box-shadow: 6px 6px 0px var(--bubblegum);
  transition: transform 0.2s, box-shadow 0.2s;
}
.step:hover { transform: translate(-3px, -3px); }
.step-num {
  font-family: 'Nunito', sans-serif;
  font-size: 38px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 0.75rem;
}
.step-title {
  font-family: 'Nunito', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--midnight);
  margin-bottom: 0.5rem;
}
.step-text { font-size: 14px; color: #333; line-height: 1.6; }


/* ============================================================
   SPORTS GRID
   ============================================================ */

.sports {
  padding: 5rem 4rem;
  background: var(--pistachio);
}
.sports-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 2.5rem;
}
.sport-chip {
  background: rgba(10, 10, 10, 0.08);
  border-radius: 12px;
  border: 2.5px solid var(--midnight);
  padding: 1.25rem 1rem;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 3px 3px 0px var(--midnight);
}
.sport-chip:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0px var(--midnight); }
.sport-chip:nth-child(1)  { background: var(--bubblegum); }
.sport-chip:nth-child(2)  { background: var(--sky); }
.sport-chip:nth-child(3)  { background: var(--amber); }
.sport-chip:nth-child(4)  { background: var(--pistachio); }
.sport-chip:nth-child(5)  { background: var(--peach); }
.sport-chip:nth-child(6)  { background: var(--lavender); }
.sport-chip:nth-child(7)  { background: var(--mint); }
.sport-chip:nth-child(8)  { background: var(--bubblegum); }
.sport-chip:nth-child(9)  { background: var(--sky); }
.sport-chip:nth-child(10) { background: var(--amber); }
.sport-name {
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--midnight);
}


/* ============================================================
   PHOTO GALLERY ROW
   ============================================================ */

.gallery-row {
  border-top: 3px solid var(--midnight);
  border-bottom: 3px solid var(--midnight);
  display: flex;
  gap: 6px;
  height: 340px;
  overflow: hidden;
  background: var(--midnight);
}
.gallery-item {
  flex: 1;
  min-width: 0;
  background-size: cover;
  background-position: center;
  transition: flex 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}
.gallery-item:hover { flex: 2.8; }
.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.35), transparent 50%);
  opacity: 0;
  transition: opacity 0.3s;
}
.gallery-item:hover::after { opacity: 1; }


/* ============================================================
   FOUNDER
   ============================================================ */

.founder {
  padding: 0;
  background: var(--lavender);
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
  overflow: hidden;
}
.founder-photo {
  background-size: cover;
  background-position: center 30%;
  border-radius: 0;
  margin: 0;
  border: none;
}
.founder-content {
  padding: 5rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.founder-quote {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--midnight);
  margin-bottom: 1.25rem;
}
.open-quote {
  font-size: 72px;
  line-height: 0;
  vertical-align: -0.35em;
  color: rgba(10, 10, 10, 0.15);
  font-family: 'Nunito', sans-serif;
  margin-right: 2px;
}
.founder-bio {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(10, 10, 10, 0.68);
  margin-bottom: 1.75rem;
}
.founder-name {
  font-family: 'Nunito', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--midnight);
}
.founder-role { font-size: 13px; color: rgba(10, 10, 10, 0.5); margin-top: 2px; }


/* ============================================================
   INSTAGRAM SECTION
   ============================================================ */

.instagram {
  padding: 5rem 4rem;
  background: var(--midnight);
  position: relative;
  overflow: hidden;
}
.insta-inner { position: relative; z-index: 2; }
.insta-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.insta-top-left { flex: 1; }
.insta-headline {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(26px, 2.8vw, 40px);
  font-weight: 900;
  color: var(--cream);
  line-height: 1.2;
  max-width: 580px;
  letter-spacing: 0.01em;
}
.insta-cta-top {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 2.5px solid var(--bubblegum);
  color: var(--bubblegum);
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 800;
  padding: 11px 22px;
  border-radius: 14px;
  text-decoration: none;
  box-shadow: 3px 3px 0px var(--bubblegum), 3px 3px 0px 2px #000;
  transition: transform 0.12s, box-shadow 0.12s;
  white-space: nowrap;
}
.insta-cta-top:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0px var(--bubblegum), 5px 5px 0px 2px #000; }
.insta-cta-top svg { width: 15px; height: 15px; fill: var(--bubblegum); }
.insta-cta-bottom {
  display: flex;
  justify-content: center;
  margin-top: 1.75rem;
}
.insta-cta-bottom a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--lavender);
  color: var(--midnight);
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 800;
  padding: 13px 28px;
  border-radius: 14px;
  border: 2.5px solid var(--midnight);
  text-decoration: none;
  box-shadow: 5px 5px 0px var(--bubblegum), 5px 5px 0px 2px #000;
  transition: transform 0.12s, box-shadow 0.12s;
}
.insta-cta-bottom a:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0px var(--bubblegum), 7px 7px 0px 2px #000; }
.insta-cta-bottom svg { width: 17px; height: 17px; fill: var(--midnight); }

.insta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 160px 160px;
  gap: 6px;
  background: var(--midnight);
  border-top: 3px solid var(--midnight);
  border-bottom: 3px solid var(--midnight);
}
.insta-item {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 3px solid var(--midnight);
}
.insta-item:hover { z-index: 3; }
.insta-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.3s ease;
}
.insta-item:hover .insta-img { transform: scale(1.06); }
.insta-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 95, 160, 0.0);
  transition: background 0.3s;
}
.insta-item:hover::after { background: rgba(255, 95, 160, 0.15); }
.insta-grid > .insta-item:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.insta-grid > .insta-item:nth-child(6) { grid-column: 4; grid-row: 1 / 3; }


/* ============================================================
   FAQ
   ============================================================ */

.faq {
  padding: 5rem 4rem;
  background: var(--cream);
}
.faq-inner { max-width: 820px; }
.faq-list { margin-top: 2.5rem; }
.faq-item { border-bottom: 1.5px solid rgba(10, 10, 10, 0.08); padding: 1.25rem 0; }
.faq-q {
  font-family: 'Nunito', sans-serif;
  font-size: 19px;
  font-weight: 800;
  color: var(--midnight);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  user-select: none;
}
.faq-toggle {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--sand);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  transition: background 0.2s, transform 0.3s;
}
.faq-item.open .faq-toggle { background: var(--bubblegum); transform: rotate(45deg); }
.faq-a {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(10, 10, 10, 0.62);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.2s;
  padding-top: 0;
}
.faq-item.open .faq-a { max-height: 200px; padding-top: 0.75rem; }


/* ============================================================
   CTA BAND
   ============================================================ */

.cta-band {
  background: var(--bubblegum);
  padding: 5rem 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-photo-bg { display: none; }
.cta-band h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(36px, 4vw, 58px);
  font-weight: 900;
  color: var(--midnight);
  line-height: 1.1;
  letter-spacing: 0.02em;
  margin-bottom: 0.75rem;
  position: relative; z-index: 2;
}
.cta-band p {
  font-size: 17px;
  color: rgba(10, 10, 10, 0.65);
  margin-bottom: 2.5rem;
  position: relative; z-index: 2;
}
.cta-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative; z-index: 2;
}


/* ============================================================
   FOOTER
   ============================================================ */

footer {
  background: rgba(196, 161, 255, 0.95);
  padding: 3rem 4rem;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
}
.footer-logo img { height: 40px; width: auto; opacity: 0.9; }
.footer-icons {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Group contact + IG together on desktop */
@media (min-width: 961px) {
  .footer-top .footer-contact-icon,
  .footer-top .footer-icons {
    margin-left: auto;
  }
  .footer-top .footer-contact-icon {
    margin-left: auto;
    margin-right: 0;
  }
  .footer-icons { margin-left: 1.5rem; }
}
.footer-contact-icon {
  display: flex;
  align-items: center;
  color: var(--midnight);
  opacity: 0.5;
  padding: 4px;
  border-radius: 6px;
  transition: opacity 0.2s;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
}
.footer-contact-icon:hover { opacity: 1; }
.footer-ig-icon {
  display: flex;
  align-items: center;
  color: var(--midnight);
  opacity: 0.5;
  padding: 4px;
  border-radius: 6px;
  transition: opacity 0.2s;
  text-decoration: none;
}
.footer-ig-icon:hover { opacity: 1; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-copy { font-size: 13px; color: rgba(10, 10, 10, 0.5); }


.footer-spacer {
  height: 34px;
  background: rgba(196, 161, 255, 0.95);
  border-top: 3px solid var(--midnight);
}


/* ============================================================
   REGISTER MODAL
   ============================================================ */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.modal-overlay.open {
  display: flex;
}

.modal {
  background: var(--cream);
  border: 3px solid var(--midnight);
  border-radius: 20px;
  box-shadow: 8px 8px 0px var(--bubblegum), 8px 8px 0px 2px var(--midnight);
  width: 100%;
  max-width: 480px;
  padding: 2.25rem 2.25rem 2rem;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 1.1rem;
  right: 1.25rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: rgba(10, 10, 10, 0.4);
  padding: 4px;
  transition: color 0.15s;
}
.modal-close:hover { color: var(--midnight); }

.modal-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.45);
  margin-bottom: 0.6rem;
}

.modal-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 0.03em;
  line-height: 1.0;
  color: var(--midnight);
  margin-bottom: 1.75rem;
}

/* Location selector */
.modal-label {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.5);
  margin-bottom: 0.6rem;
  display: block;
}

.modal-locations {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 1.5rem;
}

.modal-loc-btn {
  border: 2.5px solid var(--midnight);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: box-shadow 0.12s, transform 0.12s;
  box-shadow: 4px 4px 0px var(--midnight);
}
.modal-loc-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--midnight);
}
.modal-loc-btn.selected {
  background: var(--amber);
  box-shadow: 4px 4px 0px var(--midnight);
}
.modal-loc-btn.selected.es { background: var(--sky); }

.modal-loc-name {
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: var(--midnight);
  display: block;
}
.modal-loc-detail {
  font-size: 12px;
  color: rgba(10, 10, 10, 0.5);
  margin-top: 2px;
  display: block;
  white-space: nowrap;
}

/* Quantity picker */
.modal-qty-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.modal-qty-controls {
  display: flex;
  align-items: center;
  gap: 0;
  border: 2.5px solid var(--midnight);
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}
.qty-btn {
  background: #fff;
  border: none;
  width: 40px;
  height: 40px;
  font-size: 20px;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  cursor: pointer;
  color: var(--midnight);
  transition: background 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qty-btn:hover { background: var(--sand); }
.qty-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.qty-display {
  width: 44px;
  text-align: center;
  font-family: 'Nunito', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--midnight);
  border-left: 2px solid var(--midnight);
  border-right: 2px solid var(--midnight);
  height: 40px;
  line-height: 40px;
}
.modal-qty-note {
  font-size: 13px;
  color: rgba(10, 10, 10, 0.45);
  line-height: 1.4;
}

/* Modal CTA */
.modal-cta {
  width: 100%;
  text-align: center;
  justify-content: center;
  font-size: 17px;
  padding: 14px;
}

/* Pink shadow on modal CTA buttons (waitlist / notify / continue) */
.modal-cta.btn-primary {
  box-shadow: 5px 5px 0px var(--bubblegum), 5px 5px 0px 2px #000;
}
.modal-cta.btn-primary:hover {
  box-shadow: 7px 7px 0px var(--bubblegum), 7px 7px 0px 2px #000;
}

/* Space between last field and submit button in waitlist/notify form */
.modal-waitlist-form .modal-cta {
  margin-top: 1rem;
}

/* Responsive */
@media (max-width: 960px) {
  .modal { padding: 1.75rem 1.5rem 1.5rem; }
  .modal-title { font-size: 28px; }
  .modal-locations { grid-template-columns: 1fr; }
}


/* ============================================================
   MODAL — SHARED COMPONENT STYLES
   ============================================================ */

/* Price row (open-league state) */
.modal-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.6rem 0 1rem;
}
.modal-price-total {
  font-family: 'Nunito', sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: var(--midnight);
}
.modal-price-detail {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 13px;
  color: rgba(10,10,10,0.5);
}

/* Waitlist / notify form inputs */
.modal-field { margin-bottom: 0.5rem; }
.modal-field-phone { margin-bottom: 0; }

.modal-input {
  width: 100%;
  padding: 8px 12px;
  border: 2.5px solid var(--midnight);
  border-radius: 10px;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 14px;
  color: var(--midnight);
  background: #fff;
  outline: none;
  transition: box-shadow 0.12s;
  box-shadow: 3px 3px 0px var(--midnight);
}
.modal-input:focus {
  box-shadow: 4px 4px 0px var(--bubblegum), 4px 4px 0px 2px var(--midnight);
}
.modal-input::placeholder { color: rgba(10,10,10,0.35); }

/* Phone input — dial code + number side by side */
.phone-input-wrap {
  display: flex;
  gap: 0;
  border: 2.5px solid var(--midnight);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 3px 3px 0px var(--midnight);
}
.phone-input-wrap:focus-within {
  box-shadow: 4px 4px 0px var(--bubblegum), 4px 4px 0px 2px var(--midnight);
}
.dial-code-select {
  flex-shrink: 0;
  border: none;
  border-right: 2px solid var(--midnight);
  border-radius: 0;
  background: var(--sand);
  font-family: 'Nunito Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--midnight);
  padding: 0 8px;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
}
.modal-input.phone-number-input {
  flex: 1;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 8px 10px;
  min-width: 0;
}
.modal-input.phone-number-input:focus { box-shadow: none; }

/* Tagline (italic note below modal title in waitlist/notify view) */
.modal-waitlist-tagline {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 13px;
  font-style: italic;
  color: rgba(10,10,10,0.55);
  margin-bottom: 0.9rem;
  line-height: 1.4;
}

/* Success confirmation box */
.modal-waitlist-success {
  padding: 1rem;
  background: var(--pistachio);
  border: 2.5px solid var(--midnight);
  border-radius: 12px;
  box-shadow: 4px 4px 0px var(--midnight);
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--midnight);
  text-align: center;
}

/* Location button badges (sold-out / coming-soon / spots-available) */
.modal-loc-btn { position: relative; }

.sold-out-badge,
.coming-soon-badge,
.loc-cta-badge,
.spots-badge {
  position: absolute;
  font-family: 'Nunito', sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 20px;
  border: 2px solid var(--midnight);
  white-space: nowrap;
  color: var(--midnight);
}
.sold-out-badge,
.coming-soon-badge {
  top: -8px;
  right: -6px;
  background: var(--bubblegum);
}
.coming-soon-badge { background: var(--lavender); }

/* Badge on league card CTA button */
.loc-cta { position: relative; }
.loc-cta-badge {
  top: -14px;
  right: -8px;
  background: var(--bubblegum);
}
.spots-badge {
  top: -8px;
  right: -6px;
  background: var(--pistachio);
}

/* Compact modal on very short screens */
@media (max-height: 700px) {
  .modal { padding: 1.5rem 1.5rem 1.25rem; }
  .modal-eyebrow { margin-bottom: 0.3rem; }
  .modal-title { font-size: 28px; margin-bottom: 1rem; }
  .modal-locations { margin-bottom: 1rem; }
  .modal-field { margin-bottom: 0.4rem; }
}


/* ============================================================
   SHARED BUTTONS & INLINE ELEMENTS
   ============================================================ */

/* Trial CTA button — sky fill, pistachio shadow */
.btn-trial {
  background: var(--yellow);
  color: var(--midnight);
  font-family: 'Nunito', sans-serif;
  font-size: 17px;
  font-weight: 800;
  padding: 14px 36px;
  border-radius: 14px;
  border: 2.5px solid var(--midnight);
  text-decoration: none;
  box-shadow: 5px 5px 0px var(--lavender), 5px 5px 0px 2px #000;
  transition: transform 0.12s, box-shadow 0.12s;
  display: inline-block;
}
.btn-trial:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0px var(--lavender), 7px 7px 0px 2px #000;
}

/* Hero outlined word */
.hero-outlined { color: var(--midnight); }


/* ============================================================
   FOOTER — MOBILE OVERRIDES
   ============================================================ */

@media (max-width: 960px) {
  footer { padding: 1rem 1.25rem; }
  /* Grid instead of flex space-between — guarantees Contact sits at the
     true horizontal center regardless of how wide the logo or icons end
     up being, rather than just being "roughly in the middle" from even
     gap distribution. */
  .footer-top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    flex-wrap: nowrap;
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 0.85rem;
    gap: 0.75rem;
  }
  .footer-logo { justify-self: start; }
  .footer-contact-icon { justify-self: center; margin-left: 0; }
  .footer-icons { justify-self: end; margin-left: 0; }
  .footer-logo img { height: 28px; }
  .footer-links { gap: 0.6rem; flex-wrap: nowrap; }
  .footer-links a { font-size: 11px; }
  .footer-ig-icon { padding: 0; }
  /* Was 18px — sat noticeably smaller than the rest of the footer's
     content once footer-bottom is restored below; bumped up to feel
     proportionate rather than like an afterthought. */
  .footer-ig-icon svg { width: 23px; height: 23px; }
  .footer-contact-icon { padding: 0; font-size: 15px; }
  .footer-icons { gap: 1rem; }
  /* Restored — this was hiding both the copyright line and the tagline
     entirely on mobile, which is the actual missing-information issue.
     Stacked and centered rather than kept as the desktop's
     space-between row, since two full sentences side-by-side don't fit
     a narrow screen the same way. */
  .footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
  }
  .footer-spacer { display: none; }
}


/* ============================================================
   RESPONSIVE — MOBILE (≤960px)
   ============================================================ */

@media (max-width: 960px) {
  nav { padding: 0 1.25rem; }
  .nav-links { display: none; }
  .nav-mobile-btn-wrap { display: block; }
  .nav-mobile-ig { display: flex; }
  .nav-mobile-btn { display: inline-block; }

  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 68px; }
  .hero-left { padding: 3rem 1.5rem; }
  .hero-right { min-height: 280px; }

  .locations { padding: 3rem 1.5rem; }
  .location-cards { grid-template-columns: 1fr; }
  .card-es .loc-cutout { width: 52%; right: 0; }
  .card-iw .loc-cutout { width: 60%; right: 0; }

  .how { padding: 3rem 1.1rem; }
  .steps { grid-template-columns: 1fr 1fr; gap: 14px; }
  .step { padding: 1rem 0.85rem; }
  .step-num { font-size: 28px; margin-bottom: 0.5rem; }
  .step-title { font-size: 17px; margin-bottom: 0.35rem; }

  .sports { padding: 3rem 1.5rem; }
  .sports-grid { grid-template-columns: 1fr 1fr; }
  .sport-name { font-size: 13px; }

  .gallery-row {
    border-top: 3px solid var(--midnight);
    border-bottom: 3px solid var(--midnight);
    height: 160px;
    padding: 3px;
    gap: 4px;
  }
  .gallery-item { border-radius: 8px; }
  .gallery-item-hide-mobile { display: none; }

  .founder { grid-template-columns: 1fr; }
  .founder-photo { height: 340px; order: -1; border-right: none; border-bottom: 3px solid var(--midnight); }
  .founder-content { padding: 2.5rem 1.5rem; }

  .instagram { padding: 3rem 1.5rem; }
  .insta-top { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .insta-grid { grid-template-columns: repeat(2, 1fr); }
  .insta-headline { font-size: 22px; }

  .faq { padding: 3rem 1.5rem; }
  .loc-cta { font-size: 14px; padding: 9px 14px; white-space: nowrap; }

  .cta-band { padding: 3rem 1.5rem; }

  /* Was permanently reserved regardless of whether the sticky register
     bar was actually showing — meaning even once the bar slid away
     (scrolling to the very bottom, or scrolling up), this space stayed
     behind as dead padding below the real footer, reading as an
     oversized/too-tall footer. Now synced to the bar's own .visible
     class (see main.js's scroll handler) so the space only exists while
     the bar genuinely needs room to sit without covering content. */
  body { transition: padding-bottom 0.5s ease-out; }
  body.mobile-bar-space { padding-bottom: 68px; background: var(--lavender); }

  .vibe-track { animation-duration: 28s; }
  .vibe-item { margin: 0 0.7rem; }
  .vibe-strip { padding: 0.85rem 0; }
  .vibe-sep { width: 11px; height: 11px; margin: 0 0.5rem; }
}