@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Bebas+Neue&family=Bangers&display=swap');

/* Boogie Bingo full-screen landing page fixes */
html body.bb-landing-template,
html body.bb-fullscreen-page {
  margin: 0 !important;
  background: #050507 !important;
  overflow-x: hidden !important;
}
body.bb-fullscreen-page .site-header,
body.bb-fullscreen-page header#masthead,
body.bb-fullscreen-page .ct-header,
body.bb-fullscreen-page .entry-header,
body.bb-fullscreen-page .page-title,
body.bb-fullscreen-page .entry-title,
body.bb-fullscreen-page .site-footer,
body.bb-fullscreen-page footer.site-footer,
body.bb-fullscreen-page .ct-footer {
  display: none !important;
}
body.bb-fullscreen-page .site,
body.bb-fullscreen-page .site-content,
body.bb-fullscreen-page .content-area,
body.bb-fullscreen-page .site-main,
body.bb-fullscreen-page main,
body.bb-fullscreen-page article,
body.bb-fullscreen-page .entry-content,
body.bb-fullscreen-page .ct-container,
body.bb-fullscreen-page .ct-container-full,
body.bb-fullscreen-page .wp-site-blocks,
body.bb-fullscreen-page .wp-block-shortcode {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.bb-landing-template .bb-root,
body.bb-fullscreen-page .bb-root {
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
}
body.bb-landing-template.admin-bar .bb-root { min-height: calc(100vh - 32px); }
@media (max-width: 782px) {
  body.bb-landing-template.admin-bar .bb-root { min-height: calc(100vh - 46px); }
}

:root {
  --bb-pink:#ff1493;
  --bb-pink-soft:#ff4ab0;
  --bb-yellow:#efff00;
  --bb-yellow-soft:#fff95a;
  --bb-black:#050507;
  --bb-panel:#0a0a0e;
  --bb-panel-2:#101015;
  --bb-line:rgba(255,255,255,.14);
  --bb-white:#ffffff;
  --bb-muted:#c7c7d0;
}

.bb-root {
  background:
    radial-gradient(circle at 78% 18%, rgba(255,20,147,.20), transparent 22%),
    radial-gradient(circle at 12% 0%, rgba(239,255,0,.08), transparent 20%),
    linear-gradient(180deg, #09090d 0%, #050507 100%);
  color: #fff;
  font-family: 'Montserrat', system-ui, sans-serif;
  line-height: 1.4;
  margin-left: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
  overflow: hidden;
}
.bb-root * { box-sizing: border-box; }

.bb-site-shell {
  max-width: 1340px;
  margin: 0 auto;
  padding: 18px 18px 28px;
}

.bb-nav {
  position: relative;
  height: 86px;
  display: flex;
  align-items: center;
  gap: 24px;
  border: 1px solid var(--bb-line);
  border-bottom: none;
  border-radius: 24px 24px 0 0;
  background: rgba(0,0,0,.86);
  backdrop-filter: blur(16px);
  padding: 10px 24px 10px 20px;
  box-shadow: 0 25px 45px rgba(0,0,0,.35);
}
.bb-logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.bb-logo {
  display: block;
  width: 154px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(255,20,147,.20)) drop-shadow(0 0 22px rgba(239,255,0,.12));
}
.bb-menu {
  display: flex;
  gap: 28px;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.bb-menu a {
  color: #fff;
  text-transform: uppercase;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
  transition: .18s ease;
}
.bb-menu a:hover,
.bb-menu a:focus-visible { color: var(--bb-pink-soft); }
.bb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  text-transform: uppercase;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: .02em;
  text-decoration: none;
  border-radius: 4px;
  padding: 12px 22px;
  border: 2px solid transparent;
  transition: .18s ease;
}
.bb-btn-yellow {
  background: var(--bb-yellow);
  color: #050505;
  box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 0 26px rgba(239,255,0,.16);
}
.bb-btn-yellow:hover,
.bb-btn-yellow:focus-visible {
  background: var(--bb-yellow-soft);
  color: #000;
  transform: translateY(-1px);
}
.bb-btn-ghost {
  background: rgba(255,255,255,.03);
  color: #fff;
  border-color: rgba(255,255,255,.34);
}
.bb-btn-ghost:hover,
.bb-btn-ghost:focus-visible {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.52);
}

.bb-hero {
  min-height: 560px;
  position: relative;
  display: grid;
  grid-template-columns: 45% 55%;
  align-items: center;
  overflow: hidden;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.72) 36%, rgba(0,0,0,.20) 66%, rgba(0,0,0,.06) 100%),
    var(--bb-hero-img);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--bb-line);
  border-top: none;
}
.bb-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 62%, rgba(0,0,0,.88) 100%);
  pointer-events: none;
}
.bb-hero-copy {
  position: relative;
  z-index: 1;
  padding: 52px 40px 40px;
  max-width: 610px;
}
.bb-kicker,
.bb-hero h1,
.bb-boogie-copy h2,
.bb-features h2,
.bb-lineup h2,
.bb-events h2,
.bb-bottom h2,
.bb-faq h2 {
  font-family: 'Bangers', cursive;
  letter-spacing: .015em;
}
.bb-kicker {
  margin: 0;
  color: #fff;
  font-size: 68px;
  line-height: .86;
  text-transform: uppercase;
  text-shadow: 4px 4px 0 #000;
}
.bb-hero h1 {
  margin: 4px 0 0;
  text-transform: uppercase;
  line-height: .82;
}
.bb-hero h1 span,
.bb-hero h1 strong {
  display: block;
  font-size: 76px;
  transform: rotate(-2.2deg);
}
.bb-hero h1 span {
  color: var(--bb-pink);
  text-shadow: 4px 4px 0 #000, 0 0 20px rgba(255,20,147,.32);
}
.bb-hero h1 strong {
  color: var(--bb-yellow);
  text-shadow: 4px 4px 0 #000, 0 0 20px rgba(239,255,0,.24);
}
.bb-hero-subtitle {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 22px 0 6px;
}
.bb-hero-text {
  max-width: 510px;
  color: #ececf3;
  font-size: 18px;
  margin: 0 0 22px;
}
.bb-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.bb-usp-row {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  background: #09090c;
  border-left: 1px solid var(--bb-line);
  border-right: 1px solid var(--bb-line);
  border-bottom: 1px solid var(--bb-line);
}
.bb-usp-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 3px 14px;
  align-items: center;
  padding: 18px 18px;
  border-right: 1px solid rgba(255,255,255,.11);
  min-height: 88px;
}
.bb-usp-item:last-child { border-right: none; }
.bb-usp-item strong {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.18;
}
.bb-usp-item small {
  grid-column: 2;
  color: var(--bb-muted);
  font-size: 10px;
  line-height: 1.28;
}
.bb-icon svg {
  width: 35px;
  height: 35px;
  stroke: var(--bb-pink);
  fill: none;
  stroke-width: 1.8;
  filter: drop-shadow(0 0 10px rgba(255,20,147,.14));
}
.bb-icon-confetti svg,
.bb-icon-people svg,
.bb-icon-bolt svg { stroke: var(--bb-yellow); filter: drop-shadow(0 0 10px rgba(239,255,0,.10)); }
.bb-icon-clock svg,
.bb-icon-music svg,
.bb-icon-gift svg,
.bb-icon-drink svg,
.bb-icon-smile svg,
.bb-icon-headphones svg { stroke: var(--bb-pink); }

.bb-boogie-hour {
  display: grid;
  grid-template-columns: 130px 1fr 42%;
  gap: 22px;
  align-items: center;
  background: linear-gradient(90deg,#08080b,#111018);
  padding: 28px 34px;
  border-left: 1px solid var(--bb-line);
  border-right: 1px solid var(--bb-line);
  border-bottom: 1px solid var(--bb-line);
}
.bb-neon-glass {
  width: 132px;
  height: 132px;
  margin: auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M26 26h55l-27 26-28-26Z' stroke='%23ff1493' stroke-width='5'/%3E%3Cpath d='M54 52v28' stroke='%23ff1493' stroke-width='5'/%3E%3Cpath d='M40 84h28' stroke='%23ff1493' stroke-width='5'/%3E%3Cpath d='M67 27h22' stroke='%23efff00' stroke-width='5'/%3E%3Ccircle cx='56' cy='39' r='5.5' stroke='%23efff00' stroke-width='4'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 0 10px rgba(255,20,147,.72)) drop-shadow(0 0 10px rgba(239,255,0,.26));
}
.bb-boogie-copy h2,
.bb-features h2,
.bb-lineup h2,
.bb-events h2,
.bb-bottom h2,
.bb-faq h2 {
  margin: 0 0 12px;
  font-size: 50px;
  line-height: .84;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 3px 3px 0 #000;
}
.bb-boogie-copy h2,
.bb-events h2 span,
.bb-bottom h2 span { color: var(--bb-yellow); }
.bb-boogie-copy h2 { color: #fff; }
.bb-boogie-copy h2 .bb-hour-accent,
.bb-boogie-copy h2 em { color: var(--bb-yellow); font-style: inherit; }
.bb-label {
  display: inline-block;
  background: var(--bb-pink);
  color: #fff;
  padding: 7px 14px;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 900;
  margin: 0 0 12px;
}
.bb-boogie-copy p:not(.bb-label) {
  color: #e4e4ea;
  margin: 0;
  max-width: 460px;
}
.bb-boogie-photo {
  min-height: 220px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}
.bb-boogie-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.18) 100%);
}
.bb-badge {
  position: absolute;
  right: 16px;
  top: 18px;
  width: 132px;
  height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--bb-yellow);
  color: #070707;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-10deg);
  box-shadow: 0 0 0 4px rgba(0,0,0,.42), 0 0 22px rgba(239,255,0,.26);
  z-index: 2;
  clip-path: polygon(50% 0%, 61% 4%, 74% 2%, 84% 9%, 95% 17%, 100% 30%, 97% 43%, 100% 56%, 96% 69%, 100% 82%, 90% 92%, 77% 98%, 64% 96%, 50% 100%, 37% 96%, 22% 99%, 11% 92%, 2% 81%, 5% 68%, 1% 56%, 4% 43%, 0% 30%, 7% 16%, 18% 8%, 30% 2%, 43% 4%);
  border-radius: 22px;
}
.bb-badge::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px solid rgba(0,0,0,.15);
  clip-path: inherit;
}
.bb-badge small {
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.05;
}
.bb-badge strong {
  position: relative;
  z-index: 1;
  font-family: 'Bangers', cursive;
  font-size: 38px;
  line-height: .78;
}

.bb-features,
.bb-lineup,
.bb-events {
  padding: 24px 34px 28px;
  background: #050507;
  border-left: 1px solid var(--bb-line);
  border-right: 1px solid var(--bb-line);
}
.bb-feature-grid {
  display: grid;
  grid-template-columns: repeat(6,1fr);
  gap: 0;
  border: 1px solid rgba(255,255,255,.16);
}
.bb-feature-grid .bb-card { border-width: 0 1px 0 0; }
.bb-feature-grid .bb-card:last-child { border-right: 0; }
.bb-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 2px 12px;
  align-items: start;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.02);
  padding: 14px 14px 14px 12px;
  min-height: 92px;
}
.bb-card .bb-icon {
  grid-row: 1 / span 2;
  align-self: center;
  margin-top: 2px;
}
.bb-card h3 {
  font-size: 12px;
  text-transform: uppercase;
  margin: 1px 0 4px;
  letter-spacing: .02em;
  line-height: 1.15;
}
.bb-card p {
  font-size: 11px;
  color: #cfcfd7;
  margin: 0;
  line-height: 1.34;
}
.bb-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}
.bb-small-link {
  color: #fff;
  border: 1px solid rgba(255,255,255,.34);
  padding: 10px 13px;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
  letter-spacing: .04em;
}
.bb-small-link:hover,
.bb-small-link:focus-visible {
  border-color: var(--bb-yellow);
  color: var(--bb-yellow);
}
.bb-people-row {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 14px;
}
.bb-person {
  border: 1px solid rgba(239,255,0,.44);
  background: #0d0d11;
  text-align: center;
  overflow: hidden;
}
.bb-person-img {
  height: 160px;
  background-size: cover;
  background-position: center top;
}
.bb-person h3 {
  margin: 10px 6px 0;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .02em;
}
.bb-person p {
  margin: 5px 6px 14px;
  color: var(--bb-yellow);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
}
.bb-events-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 14px;
}
.bb-event-card {
  min-height: 176px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,.18);
  overflow: hidden;
}
.bb-event-card h3 {
  margin: 0;
  color: var(--bb-pink);
  font-size: 28px;
  text-transform: uppercase;
  font-family: 'Bangers', cursive;
  line-height: .85;
  text-shadow: 2px 2px 0 #000;
}
.bb-event-card p {
  margin: 6px 0 0;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 14px;
}
.bb-event-card small {
  display: block;
  color: #fff;
  font-size: 13px;
}
.bb-event-card span {
  display: inline-block;
  background: var(--bb-yellow);
  color: #000;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 900;
  padding: 4px 8px;
  margin-top: 8px;
}
.bb-event-card a {
  align-self: flex-start;
  background: var(--bb-pink);
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 12px;
  padding: 9px 12px;
}

.bb-bottom {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 24px;
  padding: 24px 34px;
  background: #09090c;
  border: 1px solid var(--bb-line);
}
.bb-price-row {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
}
.bb-price-row div {
  background: #111116;
  border: 1px solid rgba(255,255,255,.12);
  padding: 16px;
}
.bb-price-row strong {
  display: block;
  color: var(--bb-pink);
  text-transform: uppercase;
  font-size: 13px;
}
.bb-price-row span {
  display: block;
  color: var(--bb-yellow);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 34px;
  line-height: 1;
  letter-spacing: .02em;
}
.bb-price-row small { color: #d8d8df; }
.bb-faq details {
  border: 1px solid rgba(255,255,255,.15);
  background: #111116;
  margin-bottom: 8px;
  padding: 10px 12px;
}
.bb-faq summary {
  cursor: pointer;
  font-weight: 900;
  text-transform: uppercase;
}
.bb-faq p {
  color: #d7d7df;
  margin: 8px 0 0;
}

.bb-footer {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 24px;
  align-items: center;
  background: #060608;
  border: 1px solid var(--bb-line);
  border-top: none;
  border-radius: 0 0 24px 24px;
  padding: 20px 34px 24px;
}
.bb-footer img {
  width: 104px;
  height: auto;
  display: block;
}
.bb-footer p {
  margin: 8px 0 0;
  color: #fff;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 12px;
}
.bb-footer h3 {
  margin: 0 0 10px;
  text-transform: uppercase;
  font-size: 13px;
}
.bb-newsletter { display: flex; }
.bb-newsletter input {
  flex: 1;
  background: #0e0e12;
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  padding: 13px 14px;
}
.bb-newsletter button {
  background: var(--bb-pink);
  color: #fff;
  border: none;
  padding: 13px 18px;
  text-transform: uppercase;
  font-weight: 900;
}
.bb-social a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  margin: 0 10px 6px 0;
  font-size: 13px;
}
.bb-mobile-sticky { display: none; }

@media (max-width: 1120px) {
  .bb-hero-copy { padding: 44px 28px 38px; }
  .bb-kicker { font-size: 58px; }
  .bb-hero h1 span,
  .bb-hero h1 strong { font-size: 66px; }
  .bb-feature-grid { grid-template-columns: repeat(3,1fr); gap: 12px; border: 0; }
  .bb-feature-grid .bb-card { border-width: 1px; }
  .bb-people-row { grid-template-columns: repeat(4,1fr); }
  .bb-events-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 980px) {
  .bb-site-shell { padding: 0; }
  .bb-nav {
    border-radius: 0;
    height: auto;
    padding: 14px 18px;
  }
  .bb-logo { width: 126px; }
  .bb-menu { display: none; }
  .bb-nav > .bb-btn { display: none; }

  .bb-hero {
    grid-template-columns: 1fr;
    min-height: 620px;
    background-image:
      linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.70) 42%, rgba(0,0,0,.95) 100%),
      var(--bb-hero-img);
    background-position: center top;
    align-items: end;
  }
  .bb-hero-copy { padding: 268px 24px 26px; }
  .bb-kicker { font-size: 44px; }
  .bb-hero h1 span,
  .bb-hero h1 strong { font-size: 54px; }
  .bb-hero-text { font-size: 16px; }
  .bb-actions .bb-btn { width: 100%; }

  .bb-usp-row {
    grid-template-columns: repeat(5,1fr);
    overflow: auto;
  }
  .bb-usp-item {
    min-width: 130px;
    padding: 16px 12px;
    grid-template-columns: 1fr;
    text-align: center;
  }
  .bb-usp-item small { grid-column: auto; }

  .bb-boogie-hour {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 22px;
  }
  .bb-neon-glass { display: none; }
  .bb-boogie-photo { min-height: 160px; order: 2; }
  .bb-boogie-copy h2,
  .bb-features h2,
  .bb-lineup h2,
  .bb-events h2,
  .bb-bottom h2,
  .bb-faq h2 { font-size: 42px; }

  .bb-feature-grid { grid-template-columns: repeat(2,1fr); gap: 12px; border: 0; }
  .bb-feature-grid .bb-card { border-width: 1px; }
  .bb-people-row,
  .bb-events-grid {
    display: flex;
    overflow: auto;
    padding-bottom: 10px;
  }
  .bb-person { min-width: 150px; }
  .bb-person-img { height: 118px; }
  .bb-event-card { min-width: 260px; }

  .bb-bottom {
    grid-template-columns: 1fr;
    padding: 22px;
  }
  .bb-price-row { grid-template-columns: 1fr; }
  .bb-footer {
    grid-template-columns: 1fr;
    border-radius: 0;
    padding-bottom: 82px;
  }
  .bb-mobile-sticky {
    display: flex;
    position: fixed;
    z-index: 99999;
    left: 14px;
    right: 14px;
    bottom: 12px;
    justify-content: center;
    align-items: center;
    background: var(--bb-yellow);
    color: #000;
    text-decoration: none;
    font-weight: 950;
    text-transform: uppercase;
    padding: 16px;
    border-radius: 999px;
    box-shadow: 0 14px 42px rgba(0,0,0,.45), 0 0 22px rgba(239,255,0,.45);
  }
  .bb-features,
  .bb-lineup,
  .bb-events { padding: 22px; }
  .bb-section-head { align-items: start; }
  .bb-small-link { font-size: 11px; }
  .bb-newsletter { display: grid; gap: 8px; }
}

@media (max-width: 560px) {
  .bb-feature-grid { grid-template-columns: 1fr; gap: 12px; border: 0; }
  .bb-feature-grid .bb-card { border-width: 1px; }
  .bb-usp-row { grid-template-columns: none; display: flex; }
  .bb-root { margin-left: calc(50% - 50vw); }
}


/* v1.6 mockup refinements */
.bb-usp-item strong,
.bb-card h3,
.bb-person h3,
.bb-event-card p,
.bb-event-card small,
.bb-small-link,
.bb-faq summary,
.bb-footer h3,
.bb-footer p,
.bb-menu a,
.bb-hero-subtitle,
.bb-boogie-copy p,
.bb-label {
  color: #fff !important;
  opacity: 1 !important;
}
.bb-card h3 { color:#fff !important; }
.bb-usp-item small,
.bb-card p { color: #d8d8e0 !important; }

.bb-hero { background-position: center 36%; }
.bb-boogie-photo { background-position: center 34%; }
.bb-person-img { background-position: center 18%; }
.bb-event-card { background-position: center 35%; }

.bb-badge {
  right: 12px;
  top: 12px;
  width: 138px;
  height: 138px;
  transform: rotate(-11deg);
  clip-path: polygon(50% 0%, 57% 5%, 66% 2%, 73% 8%, 82% 4%, 87% 12%, 96% 14%, 95% 24%, 100% 32%, 95% 40%, 100% 49%, 94% 57%, 98% 68%, 90% 74%, 92% 84%, 82% 88%, 78% 97%, 67% 94%, 59% 100%, 50% 95%, 41% 100%, 33% 94%, 22% 97%, 18% 88%, 8% 84%, 10% 74%, 2% 68%, 6% 57%, 0% 49%, 5% 40%, 0% 32%, 5% 24%, 4% 14%, 13% 12%, 18% 4%, 27% 8%, 34% 2%, 43% 5%);
}
.bb-badge small { font-size: 10px; }
.bb-badge strong { font-size: 41px; }

.bb-feature-grid .bb-card {
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.015));
}

@media (max-width: 980px) {
  .bb-hero {
    min-height: 650px;
    background-position: 62% 0%;
    background-size: cover;
  }
  .bb-hero-copy {
    padding: 315px 22px 24px;
    max-width: 100%;
  }
  .bb-kicker { font-size: 40px; }
  .bb-hero h1 span,
  .bb-hero h1 strong { font-size: 50px; }
  .bb-hero-subtitle { font-size: 13px; }
  .bb-hero-text { font-size: 15px; max-width: 100%; }

  .bb-usp-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 136px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
  }
  .bb-usp-item {
    min-width: 136px;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 8px;
    padding: 14px 10px;
    scroll-snap-align: start;
  }
  .bb-usp-item small { grid-column: auto; font-size: 10px; }
  .bb-usp-item strong { font-size: 11px; }

  .bb-boogie-hour { padding: 20px 18px; }
  .bb-boogie-copy h2 { font-size: 40px; }
  .bb-boogie-photo { min-height: 160px; background-position: center 30%; }
  .bb-badge { width: 122px; height: 122px; right: 8px; top: 8px; }
  .bb-badge strong { font-size: 36px; }

  .bb-feature-grid { grid-template-columns: 1fr; gap: 10px; }
  .bb-card {
    min-height: auto;
    grid-template-columns: 36px 1fr;
    gap: 2px 12px;
    align-items: center;
    padding: 14px 12px;
  }
  .bb-card .bb-icon { align-self: start; margin-top: 2px; }
  .bb-card h3 { font-size: 12px; margin: 0 0 2px; }
  .bb-card p { font-size: 11px; }

  .bb-person-img { background-position: center 16%; }
  .bb-event-card { background-position: center 28%; }
  .bb-event-card h3 { font-size: 24px; }
}

@media (max-width: 560px) {
  .bb-hero { min-height: 640px; background-position: 63% 0%; }
  .bb-hero-copy { padding-top: 300px; }
  .bb-kicker { font-size: 36px; }
  .bb-hero h1 span,
  .bb-hero h1 strong { font-size: 46px; }
}


/* v1.7 footer typography + improved mockup cocktail icon */
.bb-footer,
.bb-footer h3,
.bb-footer p,
.bb-footer a,
.bb-footer strong,
.bb-footer span,
.bb-footer label,
.bb-footer input,
.bb-footer ::placeholder {
  color: #ffffff !important;
}
.bb-footer h3 {
  opacity: 1 !important;
}
.bb-footer a {
  text-decoration: none;
}
.bb-footer a:hover,
.bb-footer a:focus-visible {
  color: var(--bb-yellow) !important;
}
.bb-footer input {
  -webkit-text-fill-color: #fff;
}

.bb-neon-glass {
  width: 138px;
  height: 138px;
  margin: auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 38h72l-36 34-36-34Z' stroke='%23ff1493' stroke-width='5.5'/%3E%3Cpath d='M58 72v26' stroke='%23ff1493' stroke-width='5.5'/%3E%3Cpath d='M43 102h30' stroke='%23ff1493' stroke-width='5.5'/%3E%3Cpath d='M78 40h28' stroke='%23efff00' stroke-width='5.5'/%3E%3Ccircle cx='60' cy='54' r='6.5' stroke='%23efff00' stroke-width='4.5'/%3E%3Cpath d='M96 28l13-9' stroke='%23efff00' stroke-width='4.5'/%3E%3Cpath d='M106 20l10 10' stroke='%23efff00' stroke-width='4.5'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 0 10px rgba(255,20,147,.85)) drop-shadow(0 0 18px rgba(255,20,147,.25)) drop-shadow(0 0 8px rgba(239,255,0,.55));
}
@media (max-width: 980px) {
  .bb-neon-glass {
    width: 126px;
    height: 126px;
  }
}


/* v1.8 exact cocktail glass from mockup */
.bb-neon-glass {
  width: 161px !important;
  height: 156px !important;
  margin: auto;
  background-image: url('../img/cocktail-glass-mockup.png') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  filter: none !important;
}
@media (max-width: 980px) {
  .bb-neon-glass {
    width: 142px !important;
    height: 138px !important;
  }
}


/* v1.9 section edge cleanup */
.bb-hero,
.bb-boogie-photo {
  overflow: hidden !important;
  isolation: isolate;
  background-clip: padding-box;
}
.bb-hero::before,
.bb-boogie-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  z-index: 2;
}
.bb-hero::after {
  inset: 0 !important;
}
.bb-hero > *,
.bb-boogie-photo > * {
  position: relative;
  z-index: 3;
}
.bb-site-shell {
  overflow: visible;
}


/* v2.0 mockup comparison pass */
.bb-lineup h2,
.bb-events h2,
.bb-bottom h2,
.bb-faq h2,
.bb-footer h3,
.bb-footer p,
.bb-footer a,
.bb-section-head h2,
.bb-events h2 span { color:#fff !important; }
.bb-events h2 span { color: var(--bb-pink) !important; }

.bb-mobile-menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  margin-left: auto;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: default;
}
.bb-mobile-menu-toggle span {
  display: block;
  width: 20px;
  height: 2.5px;
  background: #fff;
  margin: 4px auto;
  border-radius: 999px;
}

.bb-lineup {
  display: grid;
  grid-template-columns: 170px 1fr;
  grid-template-areas: 'head people';
  gap: 16px;
  align-items: start;
}
.bb-lineup .bb-section-head {
  grid-area: head;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 188px;
  margin-bottom: 0;
}
.bb-lineup .bb-section-head h2 {
  font-size: 44px;
  line-height: .92;
  margin: 0 0 12px;
}
.bb-lineup .bb-small-link {
  width: 100%;
  text-align: center;
}
.bb-lineup .bb-people-row {
  grid-area: people;
}

.bb-events-grid {
  grid-template-columns: repeat(5,1fr);
}
.bb-event-card-more {
  background: linear-gradient(180deg, rgba(25,25,28,.96), rgba(7,7,9,.96));
  border-color: rgba(255,255,255,.20);
}
.bb-event-card-more h3 { color: var(--bb-yellow); }
.bb-event-card-more p,
.bb-event-card-more small { color: #fff !important; }
.bb-event-card-more a { background: transparent; border: 1px solid rgba(255,255,255,.25); }

@media (max-width: 1180px) {
  .bb-events-grid { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 980px) {
  .bb-mobile-menu-toggle { display: block; }
  .bb-nav { align-items: center; }
  .bb-lineup {
    display: block;
  }
  .bb-lineup .bb-section-head {
    min-height: 0;
    margin-bottom: 12px;
  }
  .bb-lineup .bb-section-head h2 {
    font-size: 38px;
    margin-bottom: 10px;
  }
  .bb-events-grid {
    display: flex;
    overflow-x: auto;
    gap: 14px;
  }
  .bb-event-card { min-width: 250px; }
  .bb-event-card-more { min-width: 220px; }
  .bb-footer {
    gap: 18px;
  }
}

/* v2.1 mobile menu + sticky CTA behavior */
.bb-mobile-sticky.bb-sticky-hidden {
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
}
.bb-mobile-sticky {
  transition: opacity .2s ease, transform .2s ease;
}

@media (max-width: 980px) {
  .bb-nav {
    position: relative;
  }
  .bb-mobile-menu-toggle {
    cursor: pointer;
    flex: 0 0 auto;
  }
  .bb-menu {
    display: none;
    position: absolute;
    left: 12px;
    right: 12px;
    top: calc(100% + 8px);
    z-index: 50;
    background: rgba(5,5,7,.98);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,.45);
  }
  .bb-nav.bb-menu-open .bb-menu {
    display: grid;
    gap: 8px;
  }
  .bb-menu a {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255,255,255,.03);
  }
  .bb-menu a:hover,
  .bb-menu a:focus-visible {
    background: rgba(255,255,255,.08);
  }
  .bb-nav.bb-menu-open .bb-mobile-menu-toggle span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }
  .bb-nav.bb-menu-open .bb-mobile-menu-toggle span:nth-child(2) {
    opacity: 0;
  }
  .bb-nav.bb-menu-open .bb-mobile-menu-toggle span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }
  .bb-mobile-menu-toggle span {
    transition: transform .18s ease, opacity .18s ease;
  }
}


/* v2.2 menu visibility + lineup desktop fix */
.bb-nav {
  overflow: visible !important;
  z-index: 120;
}

/* Put lineup heading above the cards on desktop to match the intended composition */
.bb-lineup {
  display: block !important;
}
.bb-lineup .bb-section-head {
  display: flex !important;
  flex-direction: row !important;
  align-items: end !important;
  justify-content: space-between !important;
  min-height: 0 !important;
  margin-bottom: 18px !important;
}
.bb-lineup .bb-section-head h2 {
  max-width: 620px;
  font-size: 58px !important;
  line-height: .88 !important;
  margin: 0 !important;
}
.bb-lineup .bb-small-link {
  width: auto !important;
  min-width: 240px;
  text-align: center !important;
}
.bb-lineup .bb-people-row {
  display: grid !important;
  grid-template-columns: repeat(5,1fr) !important;
  gap: 14px !important;
}

@media (max-width: 980px) {
  .bb-nav {
    z-index: 300 !important;
  }
  .bb-nav.bb-menu-open {
    border-radius: 0 0 18px 18px;
  }
  .bb-nav.bb-menu-open .bb-menu {
    display: flex !important;
    flex-direction: column !important;
    top: calc(100% - 1px) !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 10px;
    z-index: 350 !important;
  }
  .bb-menu a {
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .05em !important;
    text-align: left !important;
    color: #fff !important;
  }
  .bb-lineup .bb-section-head {
    display: block !important;
    margin-bottom: 12px !important;
  }
  .bb-lineup .bb-section-head h2 {
    max-width: none;
    font-size: 38px !important;
    margin-bottom: 10px !important;
  }
  .bb-lineup .bb-small-link {
    display: inline-block;
    min-width: 0;
    width: auto !important;
  }
}


/* v2.3 boogie hour image fill + improved mobile hero crop */
.bb-boogie-photo {
  background-position: center center !important;
  background-size: cover !important;
}
.bb-boogie-photo::after {
  background: linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.16) 100%) !important;
}

@media (max-width: 980px) {
  .bb-hero {
    background-image:
      linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.62) 42%, rgba(0,0,0,.94) 100%),
      url('../img/hero-mobile.png') !important;
    background-position: center top !important;
    background-size: cover !important;
  }
  .bb-hero-copy {
    padding-top: 330px !important;
  }
}

@media (max-width: 560px) {
  .bb-hero {
    background-position: center top !important;
  }
  .bb-hero-copy {
    padding-top: 322px !important;
  }
}


/* v2.4 mobile hero moved left for 2-person composition */
@media (max-width: 980px) {
  .bb-hero {
    background-position: 38% top !important;
  }
}
@media (max-width: 560px) {
  .bb-hero {
    background-position: 36% top !important;
  }
}


/* v2.5 exact requested mobile hero crop */
@media (max-width: 980px) {
  .bb-hero {
    background-image:
      linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.62) 42%, rgba(0,0,0,.94) 100%),
      url('../img/hero-mobile.png') !important;
    background-position: center top !important;
    background-size: cover !important;
  }
}