/* ============================================================
   LAVA skin — warm LIGHT editorial theme (ash/cream) with a dark night hero,
   the signature lava gradient (red→orange→gold), Anton display + Mulish body,
   club purple/blue + felt-green card accents.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Mulish:wght@400;500;600;700;800;900&display=swap');

:root {
  /* DARK theme (matches designs/lava/preview.html [data-theme="dark"]).
     --ink is the PRIMARY TEXT token (light cream on dark) and is used ~24× as
     text — keep it light. The handful of places that used var(--ink) as a dark
     BACKGROUND now use --night so they stay dark after this flip. */
  --bg: #120F0E;            /* proof --surface-page */
  --bg-2: #171312;          /* proof --surface-sunken (alt sections) */
  --surface: #1E1A18;       /* proof --surface-card */
  --line: rgba(255,255,255,.12);
  --ink: #FBF7F4;           /* proof --text-strong (light) */
  --muted: #9E918A;         /* proof --ash-400 (dim cream) */
  --cream: #FAF7F4;
  --red: #D6291A;
  --orange: #F2913C;
  --gold: #FFD21A;
  --gold-deep: #F5B800;
  --club-purple: #8B3DF5;
  --club-blue: #2D7DFF;
  --felt: #1F7A4D;
  --night: #0C0A09;
  --night-2: #141110;
  --lava: linear-gradient(100deg, #B81E12 0%, #D6291A 35%, #F2913C 78%, #FFD21A 100%);
  --ember: linear-gradient(180deg, #F2913C, #D6291A);
  --club: linear-gradient(120deg, #8B3DF5, #2D7DFF);
  --maxw: 1200px;
  --radius: 14px;
  --shadow: 0 12px 32px rgba(0,0,0,.45);
  --font-head: 'Anton', sans-serif;
  --font-body: 'Mulish', system-ui, sans-serif;
  --anim: .2s ease;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); line-height: 1.6; }
html { scroll-behavior: smooth; }
a { color: var(--red); text-decoration: none; }
a:not(.btn):hover { color: var(--orange); }
img { max-width: 100%; height: auto; display: block; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }

/* ---- Sections ---- */
.section { padding: 5rem 0; }
.section:where(:nth-of-type(even)) { background: var(--bg-2); }
.section__head { margin-bottom: 2.5rem; }
.section__eyebrow { display: inline-block; color: var(--red); font-weight: 800; text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; margin: 0 0 .85rem; }
.section__title { font-family: var(--font-head); font-weight: 400; color: var(--ink); font-size: clamp(2.4rem, 5.5vw, 4rem); line-height: 1; text-transform: uppercase; letter-spacing: .01em; margin: 0 0 .75rem; }
.section__intro { color: var(--muted); font-size: 1.1rem; max-width: 60ch; margin: 0; }

/* ---- Buttons ---- */
.btn { display: inline-block; font-family: var(--font-body); font-weight: 800; letter-spacing: .02em; font-size: .95rem; padding: .85rem 1.6rem; border-radius: 8px; border: 2px solid transparent; cursor: pointer; transition: transform var(--anim), box-shadow var(--anim); }
.btn--primary { background: var(--lava); color: #fff; box-shadow: 0 8px 22px rgba(214,41,26,.32); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(214,41,26,.45); }
.btn--phone { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--phone:hover { background: var(--night); color: #fff; transform: translateY(-2px); }

/* ---- Header (dark night) ---- */
.section--header { position: sticky; top: 0; z-index: 50; background: rgba(12,10,9,.92); padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.section--header:nth-of-type(even) { background: rgba(12,10,9,.92); }
.header__inner { display: flex; align-items: center; gap: 1.5rem; }
.brand { display: flex; align-items: center; gap: .6rem; }
.brand__logo { width: 44px; height: 44px; object-fit: contain; }
.brand__name { font-family: var(--font-head); font-size: 1.4rem; color: #fff; text-transform: uppercase; line-height: 1; letter-spacing: .02em; }
.brand__city { font-size: .7rem; color: rgba(250,247,244,.6); text-transform: uppercase; letter-spacing: .1em; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.nav__link { color: #fff; font-weight: 700; font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; }
.nav__link:hover { color: var(--gold); }
.nav__link:last-child { background: var(--lava); color: #fff; border-radius: 8px; padding: .5rem 1.1rem; }
.header__phone { color: var(--gold); font-weight: 800; margin-left: 1rem; }

/* ---- Hero ---- */
.section--hero { position: relative; overflow: hidden; min-height: clamp(560px, 86vh, 840px); display: grid; align-items: center; color: #fff; background: var(--night); }
.section--hero:nth-of-type(even) { background: var(--night); }
.section--hero .hero__image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; margin: 0; border: 0; z-index: 0; }
.section--hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background: linear-gradient(90deg, rgba(12,10,9,.95) 0%, rgba(12,10,9,.78) 45%, rgba(12,10,9,.3) 100%); }
.section--hero .container { position: relative; z-index: 2; }
.hero__inner { max-width: 660px; }
.hero__eyebrow { display: inline-block; background: rgba(255,255,255,.1); color: var(--gold); border-radius: 9999px; padding: .35rem .9rem; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; margin: 0 0 1.1rem; }
.hero__title { font-family: var(--font-head); font-weight: 400; font-size: clamp(3.25rem, 9vw, 6.5rem); line-height: .95; text-transform: uppercase; background: var(--lava); -webkit-background-clip: text; background-clip: text; color: transparent; margin: .25rem 0; }
.hero__sub { color: rgba(255,255,255,.9); font-size: 1.2rem; max-width: 46ch; }
.hero__rating { color: var(--gold); font-weight: 800; }
.hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1.75rem 0 0; }
.hero-burst { display: grid; place-items: center; position: absolute; z-index: 3; right: 6%; top: 50%; transform: translateY(-50%) rotate(-8deg); width: 210px; height: 210px; font-family: var(--font-head); text-transform: uppercase; font-size: 2.2rem; color: #fff; background: var(--lava); border: 0; padding: 0; cursor: pointer; clip-path: polygon(50% 0,61% 18%,82% 12%,76% 33%,98% 38%,80% 52%,98% 67%,76% 70%,84% 92%,62% 82%,50% 100%,38% 82%,16% 92%,24% 70%,2% 67%,20% 52%,2% 38%,24% 33%,18% 12%,39% 18%); box-shadow: 0 0 55px rgba(214,41,26,.6); animation: lv-pop .5s ease-out both; }
.hero-burst.kapow { animation: lv-kapow .5s ease-out; }
.floaty { position: absolute; z-index: 4; font-family: var(--font-head); text-transform: uppercase; font-size: 2.8rem; color: var(--gold); text-shadow: 2px 2px 0 var(--red); pointer-events: none; animation: lv-float 1s ease-out forwards; }
@media (max-width: 900px) { .hero-burst { width: 140px; height: 140px; font-size: 1.5rem; right: 3%; } }


/* flying pins behind the hero STRIKE burst (decorative; no markup) */
.section--hero::after { content: ""; position: absolute; z-index: 2; right: 1%; top: 50%; transform: translateY(-50%); width: 420px; height: 340px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20220%20180%27%3E%3Cg%20transform%3D%27translate%288%2026%29%20rotate%28-28%29%20scale%28.95%29%27%3E%3Cpath%20d%3D%27M20%203%20C27%203%2028%2013%2024%2022%20C21%2029%2021%2033%2025%2044%20C31%2060%2031%2082%2020%2097%20C9%2082%209%2060%2015%2044%20C19%2033%2019%2029%2016%2022%20C12%2013%2013%203%2020%203%20Z%27%20fill%3D%27%23FAF7F4%27%20stroke%3D%27%230C0A09%27%20stroke-width%3D%273%27%2F%3E%3Cpath%20d%3D%27M15%2023%20H25%20M13%2031%20H27%27%20stroke%3D%27%23D6291A%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28150%208%29%20rotate%2834%29%20scale%28.85%29%27%3E%3Cpath%20d%3D%27M20%203%20C27%203%2028%2013%2024%2022%20C21%2029%2021%2033%2025%2044%20C31%2060%2031%2082%2020%2097%20C9%2082%209%2060%2015%2044%20C19%2033%2019%2029%2016%2022%20C12%2013%2013%203%2020%203%20Z%27%20fill%3D%27%23FAF7F4%27%20stroke%3D%27%230C0A09%27%20stroke-width%3D%273%27%2F%3E%3Cpath%20d%3D%27M15%2023%20H25%20M13%2031%20H27%27%20stroke%3D%27%23D6291A%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2896%2092%29%20rotate%288%29%20scale%281.05%29%27%3E%3Cpath%20d%3D%27M20%203%20C27%203%2028%2013%2024%2022%20C21%2029%2021%2033%2025%2044%20C31%2060%2031%2082%2020%2097%20C9%2082%209%2060%2015%2044%20C19%2033%2019%2029%2016%2022%20C12%2013%2013%203%2020%203%20Z%27%20fill%3D%27%23FAF7F4%27%20stroke%3D%27%230C0A09%27%20stroke-width%3D%273%27%2F%3E%3Cpath%20d%3D%27M15%2023%20H25%20M13%2031%20H27%27%20stroke%3D%27%23D6291A%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain; filter: drop-shadow(4px 5px 0 rgba(0,0,0,.4)); animation: lv-pins-in .6s ease-out both; }
@media (max-width: 900px) { .section--hero::after { width: 240px; height: 200px; right: 0; } }
@keyframes lv-pins-in { 0% { opacity: 0; transform: translateY(-50%) scale(.6) rotate(-8deg); } 100% { opacity: 1; transform: translateY(-50%) scale(1) rotate(0); } }

/* ---- Stats (light) ---- */
.section--stats { padding: 2.5rem 0; background: var(--night); }
.section--stats:nth-of-type(even) { background: var(--night); }
.stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 1rem; }
.stat { padding: .25rem 1.5rem; border-left: 3px solid var(--orange); }
.stat__value { display: block; font-family: var(--font-head); font-size: 2.75rem; line-height: 1; color: var(--gold); }
.stat__label { text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; color: rgba(250,247,244,.6); }

/* ---- Card base ---- */
.offering, .party, .league, .review, .menu-item, .deal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: transform var(--anim), box-shadow var(--anim); }
.offering:hover, .party:hover, .review:hover, .menu-item:hover, .deal:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

/* ---- Offerings (colorful top accent) ---- */
.offerings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 1.5rem; }
.offering { padding: 1.5rem; border-top: 4px solid var(--red); }
.offering:nth-child(6n+2) { border-top-color: var(--orange); }
.offering:nth-child(6n+3) { border-top-color: var(--club-blue); }
.offering:nth-child(6n+4) { border-top-color: var(--club-purple); }
.offering:nth-child(6n+5) { border-top-color: var(--felt); }
.offering:nth-child(6n+6) { border-top-color: var(--gold-deep); }
.offering__title { font-family: var(--font-head); text-transform: uppercase; font-size: 1.2rem; color: var(--ink); margin: 0 0 .5rem; letter-spacing: .02em; }
.offering__desc { color: var(--muted); margin: 0 0 1rem; }
.offering__photos { display: grid; gap: .5rem; }
.offering__photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; }

/* ---- Pricing ---- */
.pricing-list, .pricing-rentals { display: grid; gap: .5rem; max-width: 680px; }
.pricing-rentals { margin-top: 1rem; }
.price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 1px solid var(--line); padding: .75rem 0; }
.price-row__label { font-weight: 700; }
.price-row__value { font-family: var(--font-head); font-size: 1.6rem; color: var(--red); }

/* ---- Parties ---- */
.parties__image { width: 100%; max-width: 720px; border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 1.5rem; }
.party-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 1.5rem; }
.party { padding: 1.5rem; border-top: 4px solid var(--orange); }
.party__name { display: block; font-family: var(--font-head); text-transform: uppercase; font-size: 1.1rem; color: var(--ink); }
.party__price { display: inline-block; font-family: var(--font-head); font-size: 1.6rem; color: var(--red); margin: .35rem 0; }
.party__detail { display: block; color: var(--muted); }
.party__includes { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--muted); }

/* ---- Leagues ---- */
.leagues__photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1.5rem; margin-bottom: 1.5rem; }
.leagues__photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.league-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; max-width: 760px; }
.league { display: flex; align-items: baseline; gap: 1rem; padding: .85rem 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.league__name { font-weight: 800; color: var(--ink); }
.league__day { color: var(--muted); }
.league__time { margin-left: auto; font-family: var(--font-head); color: var(--red); }

/* ---- Bar & lounge / Cosmic (club gradient) ---- */
.section--barlounge { background: var(--bg-2); }
.section--cosmic { background: var(--club); color: #fff; }
.section--cosmic .section__title { color: #fff; }
.section--cosmic .section__intro, .section--cosmic .section__eyebrow { color: rgba(255,255,255,.85); }
.barlounge__photos, .cosmic__photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.barlounge__photo, .cosmic__photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.barlounge__details { color: var(--muted); }

/* ---- Food service (menu) ---- */
.section--foodservice { background: var(--bg); }
.menu-layout--featured { display: grid; grid-template-columns: .8fr 1.3fr; gap: 2rem; align-items: start; }
.menu-feature { margin: 0; }
.menu-feature img { width: 100%; max-width: none; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); position: sticky; top: 90px; }
.menu-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }
.menu-tab { font-family: var(--font-body); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .82rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 9999px; padding: .5rem 1.1rem; cursor: pointer; transition: background var(--anim), color var(--anim); }
.menu-tab.is-active { background: var(--lava); color: #fff; border-color: transparent; }
html.js .section--foodservice .menu-main:has(.menu-tabs) .menu-category { display: none; }
html.js .section--foodservice .menu-main:has(.menu-tabs) .menu-category.is-active { display: block; }
.menu-category__title { font-family: var(--font-head); text-transform: uppercase; color: var(--ink); font-size: 1.3rem; margin: 0 0 1.25rem; border-bottom: 3px solid var(--red); padding-bottom: .4rem; display: inline-block; }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 1.25rem; }
.menu-item { overflow: hidden; }
.menu-item__photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.menu-item__name { font-weight: 800; color: var(--ink); margin: .75rem .85rem .25rem; }
.menu-item__desc { color: var(--muted); font-size: .85rem; margin: 0 .85rem .5rem; }
.menu-item__price { display: inline-block; font-family: var(--font-head); color: var(--red); font-size: 1.25rem; margin: 0 .85rem .85rem; }
.menu-list { list-style: none; padding: 0; margin: 0; }
.menu-list__row { display: flex; align-items: baseline; gap: .75rem; border-bottom: 1px solid var(--line); padding: .6rem 0; }
.menu-list__name { font-weight: 700; color: var(--ink); }
.menu-list__meta { color: var(--muted); font-size: .8rem; }
.menu-list__price { margin-left: auto; font-family: var(--font-head); color: var(--red); }

/* ---- This week / deals ---- */
.deals-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 1.5rem; }
.deal { padding: 1.5rem; border-left: 5px solid var(--orange); }
.deal:nth-child(3n+2) { border-left-color: var(--red); }
.deal:nth-child(3n) { border-left-color: var(--gold-deep); }
.deal__title { font-family: var(--font-head); text-transform: uppercase; font-size: 1.4rem; color: var(--ink); margin: 0 0 .5rem; }
.deal__desc { color: var(--muted); margin: 0 0 .75rem; }
.deal__value { display: inline-block; font-family: var(--font-head); background: var(--lava); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 1.6rem; }
.deal__valid, .deal__code { display: block; font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: .4rem; }

/* ---- Reviews ---- */
.review-sources { display: flex; gap: 1.5rem; margin-bottom: 1.5rem; color: var(--muted); }
.review-source__num { font-family: var(--font-head); color: var(--red); font-size: 1.6rem; margin-right: .25rem; }
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 1.5rem; }
.review { padding: 1.5rem; }
.review__avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; float: right; margin-left: .75rem; border: 2px solid var(--line); }
.review__rating { color: var(--gold-deep); }
.review__quote { margin: .5rem 0 1rem; color: var(--ink); }
.review__author { font-weight: 800; display: block; color: var(--red); }
.review__source, .review__date { font-size: .8rem; color: var(--muted); }

/* ---- Gallery ---- */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 1rem; }
.gallery__photo { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--radius); transition: transform var(--anim); }
.gallery__photo:hover { transform: scale(1.03); }

/* ---- Gift cards (lava band) ---- */
.section--giftcards { background: var(--lava); }
.giftcard { text-align: center; display: grid; justify-items: center; gap: .5rem; }
.giftcard__logo { width: 64px; height: 64px; object-fit: contain; background: rgba(255,255,255,.2); border-radius: var(--radius); padding: .4rem; }
.giftcard__name { font-family: var(--font-head); text-transform: uppercase; color: #fff; }
.section--giftcards .section__title, .section--giftcards .section__eyebrow, .section--giftcards .section__intro { color: #fff; }

/* ---- CTA (night) ---- */
.section--cta { background: var(--night); text-align: center; }
.cta__inner { display: grid; justify-items: center; gap: 1rem; }
.cta__title { font-family: var(--font-head); text-transform: uppercase; background: var(--lava); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: clamp(2.4rem,8vw,4.5rem); margin: 0; }
.cta__sub { color: rgba(255,255,255,.85); font-size: 1.15rem; }
.cta__actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

/* ---- Footer (night) ---- */
.section--footer { background: var(--night-2); color: rgba(250,247,244,.85); border-top: 3px solid var(--red); }
.section--footer:nth-of-type(even) { background: var(--night-2); }
.footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 2rem; }
.footer__logo { width: 60px; height: 60px; object-fit: contain; }
.footer__heading { font-family: var(--font-head); text-transform: uppercase; color: var(--gold); font-size: 1rem; margin: 0 0 .75rem; }
.footer__map { width: 100%; border-radius: 10px; margin-bottom: .75rem; }
.footer__tag, .footer__address { color: rgba(250,247,244,.65); }
.footer__phone, .footer__directions { color: var(--gold); font-weight: 800; display: inline-block; margin-top: .5rem; }
.footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.footer__links a { color: rgba(250,247,244,.85); }
.footer__links a:hover { color: var(--gold); }
.footer__legal { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .8rem; color: rgba(250,247,244,.55); }

/* ---- Scroll reveal ---- */
.section.in-view:not(.section--header):not(.section--hero) { animation: lv-reveal .55s ease both; }

/* ---- Mobile slide-out nav (smooth off-canvas drawer) ---- */
.nav-toggle { flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: transparent; border: 0; width: 46px; height: 46px; padding: 0; cursor: pointer; margin-left: auto; }
.nav-toggle span { display: block; width: 24px; height: 2.5px; background: #fff; border-radius: 2px; transition: transform .3s cubic-bezier(.4,.01,.2,1), opacity .2s ease; }
/* overlay fades (opacity/visibility) instead of display-toggling, so it eases; display:block
   overrides the canonical base hide; pointer-events gate clicks while hidden. */
.nav-overlay { display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 60; background: rgba(0,0,0,.5); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility .3s ease; }
body.nav-locked { overflow: hidden; }
@media (max-width: 1024px) {
  .nav-toggle { display: flex; order: 2; margin-left: 0; flex: none; }
  .header__phone { display: none; }
  /* Compact single-row mobile header (logo + name | status | toggle) */
  .section--header { padding: .4rem 0; }
  .header__inner { flex-wrap: nowrap; align-items: center; gap: .6rem; }
  .brand { order: 0; flex: 1 1 auto; min-width: 0; }
  .brand__logo { width: 34px; height: 34px; }
  .brand__name { font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand__city { display: none; }
  .header__utility { order: 1; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: .15rem; margin: 0; }
  .hours-status--badge { font-size: .62rem; padding: .12rem .45rem; }
  .nav { position: fixed; top: 0; right: 0; bottom: 0; width: min(86vw, 340px); background: var(--night); border-left: 1px solid rgba(255,255,255,.12); box-shadow: -18px 0 50px rgba(0,0,0,.45); flex-direction: column; align-items: stretch; gap: .15rem; padding: 5.5rem 1.5rem 2rem; margin: 0; z-index: 70; transform: translateX(100%); transition: transform .34s cubic-bezier(.22,.61,.36,1); overflow-y: auto; }
  .nav__link { font-size: 1.15rem; padding: .75rem 0; width: 100%; border-bottom: 1px solid rgba(255,255,255,.12); }
  .nav__link:last-child { margin-top: .75rem; text-align: center; border-bottom: 0; }
  .section--header.nav-open .nav { transform: translateX(0); }
  .section--header.nav-open .nav-overlay { opacity: 1; visibility: visible; pointer-events: auto; }
  .section--header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
  .section--header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .section--header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }
  .menu-layout--featured { grid-template-columns: 1fr; }
  .menu-feature img { position: static; aspect-ratio: 16/9; }
}

/* ---- Animations ---- */
@keyframes lv-pop { 0% { transform: translateY(-50%) rotate(-8deg) scale(0); } 60% { transform: translateY(-50%) rotate(-8deg) scale(1.15); } 100% { transform: translateY(-50%) rotate(-8deg) scale(1); } }
@keyframes lv-kapow { 0% { transform: translateY(-50%) rotate(-8deg) scale(1); } 30% { transform: translateY(-50%) rotate(6deg) scale(1.2); } 60% { transform: translateY(-50%) rotate(-14deg) scale(.92); } 100% { transform: translateY(-50%) rotate(-8deg) scale(1); } }
@keyframes lv-float { 0% { transform: translateY(0) scale(.6); opacity: 0; } 20% { transform: translateY(-18px) scale(1.1); opacity: 1; } 100% { transform: translateY(-130px) scale(1); opacity: 0; } }
@keyframes lv-reveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

@media (max-width: 720px) { .section:not(.section--header) { padding: 3rem 0; } .section--hero { min-height: 74vh; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ============================================================
   LAVA — strike-era section additions (light theme; dark hero / cosmic / find-us / footer).
   Later rules override the now-dead old ones (party-list, cosmic photos, gallery grid…).
   ============================================================ */

/* Hero: drop the off-design burst + flying pins (now a photo hero + marquee). */
.hero-burst, .floaty { display: none; }
.section--hero::after { content: none; }
.hero__title em { font-style: italic; font-weight: 900; -webkit-text-fill-color: var(--gold); }

/* Hero deals marquee */
.hero-marquee { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; overflow: hidden; background: var(--lava); color: #fff; }
.hero-marquee__track { display: inline-flex; gap: 2.5rem; white-space: nowrap; padding: .55rem 0; font-family: var(--font-head); text-transform: uppercase; font-size: 1.05rem; letter-spacing: .03em; animation: lv-marquee 26s linear infinite; }
.hero-marquee__track span { display: inline-flex; align-items: center; gap: 2.5rem; }
@keyframes lv-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Live hours status (header / hero / find-us — all dark contexts → light text) */
.hours-status { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; font-size: .9rem; color: #fff; white-space: nowrap; }
.hours-status::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: rgba(255,255,255,.5); flex: none; }
.hours-status.is-open::before { background: #34d27b; box-shadow: 0 0 0 3px rgba(52,210,123,.25); }
.hours-status.is-closed::before { background: var(--red); }
.hours-status--badge { font-size: .8rem; padding: .35rem .75rem; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; }
.section--hero .hours-status { margin-top: 1.1rem; }
.findus__card .hours-status { margin: 0 0 .85rem; }
.findus__hours-row.is-today { background: rgba(255,210,26,.14); border-radius: 7px; margin: 0 -.6rem; padding: .15rem .6rem .5rem; }
.findus__hours-row.is-today span { color: var(--gold); font-weight: 900; }

/* Header utility + nav More dropdown + reserve pill (dark header) */
.header__utility { display: flex; align-items: center; gap: 1.1rem; }
.brand__status, .nav__head { display: none; }
.header__phone { color: var(--gold); font-weight: 800; white-space: nowrap; }
.nav__link--cta { background: var(--lava); color: #fff; border-radius: 8px; padding: .5rem 1.2rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.nav__more { position: relative; display: inline-flex; }
.nav__more-toggle { background: transparent; border: 0; cursor: pointer; font: inherit; color: #fff; display: inline-flex; align-items: center; gap: .3rem; }
.nav__more-menu { display: none; position: absolute; top: 100%; right: 0; min-width: 13rem; flex-direction: column; gap: .1rem; background: var(--night); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: .85rem .5rem .5rem; box-shadow: var(--shadow); z-index: 80; }
.nav__more:hover .nav__more-menu, .nav__more:focus-within .nav__more-menu { display: flex; }
.nav__more-menu .nav__link { padding: .55rem .65rem; border-radius: 8px; white-space: nowrap; border: 0; color: rgba(255,255,255,.9); }
.nav__more-menu .nav__link:hover { background: rgba(255,255,255,.08); color: var(--gold); }

/* Offering / deal / amenity card photos (light cards) */
.offering { overflow: hidden; }
.offering__media { position: relative; margin: -1.5rem -1.5rem 1rem; }
.offering__photo { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 0; }
.offering__badge { position: absolute; top: .8rem; left: .8rem; background: var(--lava); color: #fff; font-family: var(--font-head); padding: .2rem .7rem; border-radius: 6px; }
.offering__cta { color: var(--red); font-weight: 800; text-transform: uppercase; font-size: .82rem; display: inline-block; margin-top: .5rem; }
.deal { overflow: hidden; }
.deal__media { margin: -1.5rem -1.5rem 1.1rem; overflow: hidden; }
.deal__photo { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.amenities-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 1.25rem; }
.amenity { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.4rem; overflow: hidden; border-top: 4px solid var(--orange); }
.amenity__name { font-family: var(--font-head); text-transform: uppercase; font-size: 1.05rem; color: var(--ink); margin: 0 0 .4rem; }
.amenity__desc { color: var(--muted); font-size: .9rem; margin: 0; }
.amenity__media { margin: -1.25rem -1.4rem 1rem; overflow: hidden; }
.amenity__photo { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }

/* Parties — featured-package hero (light) */
.parties-feature { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .parties-feature { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }
.parties-feature__media { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.parties-feature__photo { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.parties-feature__price { position: absolute; top: 1rem; right: 1rem; width: calc(6.5rem * var(--badge-scale, 1)); height: calc(6.5rem * var(--badge-scale, 1)); display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--lava); color: #fff; text-align: center; line-height: 1; filter: drop-shadow(0 8px 18px rgba(214,41,26,.4)); clip-path: polygon(50% 0%, 61% 11%, 76% 8%, 78% 24%, 92% 30%, 84% 43%, 95% 55%, 82% 62%, 86% 78%, 70% 78%, 62% 92%, 50% 82%, 38% 92%, 30% 78%, 14% 78%, 18% 62%, 5% 55%, 16% 43%, 8% 30%, 22% 24%, 24% 8%, 39% 11%); }
.parties-feature__price strong { font-family: var(--font-head); font-size: calc(1.6rem * var(--badge-scale, 1)); }
.parties-feature__price small { font-size: calc(.68rem * var(--badge-scale, 1)); text-transform: uppercase; letter-spacing: .08em; }
.parties-feature__ribbon { position: absolute; left: 0; bottom: 1.5rem; background: var(--gold); color: var(--ink); font-family: var(--font-head); text-transform: uppercase; letter-spacing: .04em; font-size: .85rem; padding: .55rem 1.7rem .55rem 1.1rem; clip-path: polygon(0 0, 100% 0, calc(100% - .8rem) 50%, 100% 100%, 0 100%); box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.parties-feature__lead { color: var(--muted); font-size: 1.08rem; line-height: 1.6; margin: 1.1rem 0 1.6rem; max-width: 46ch; }
.parties-feature__list { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: .9rem; }
.parties-feature__list li { position: relative; padding-left: 1.9rem; color: var(--ink); font-weight: 700; }
.parties-feature__list li::before { content: "\2713"; position: absolute; left: 0; color: var(--red); font-weight: 900; }
.parties-feature__ctas { display: flex; flex-wrap: wrap; gap: 1rem; }
.parties-feature__deskcta { cursor: default; }
.party__readmore { margin-top: .5rem; background: none; border: 0; padding: 0; color: var(--red); font-weight: 900; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }
.party-list__more { text-align: center; margin-top: 1.75rem; }
.party__detail { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.party.is-expanded .party__detail { -webkit-line-clamp: unset; }

/* Cosmic — neon banner (dark; overrides the old photo grid) */
.section--cosmic { position: relative; overflow: hidden; padding: 0; background: var(--club); }
.cosmic__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42; z-index: 0; }
.section--cosmic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(12,10,9,.92) 0%, rgba(12,10,9,.55) 45%, rgba(214,41,26,.3) 100%); z-index: 1; }
.cosmic__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto; gap: 1.25rem 2rem; padding: 3.5rem 1.5rem; align-items: start; }
.cosmic__lead { grid-column: 1; grid-row: 1; }
.cosmic__action { grid-column: 2; grid-row: 1; text-align: right; justify-self: end; }
.cosmic__facts { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 1rem 3rem; margin: 1.5rem 0 0; }
.cosmic__eyebrow { color: var(--gold); text-transform: uppercase; letter-spacing: .24em; font-weight: 800; font-size: .8rem; margin: 0 0 .6rem; }
.cosmic__mark { margin: 0; line-height: .82; font-family: var(--font-head); text-transform: uppercase; }
.cosmic__mark-top { display: block; font-size: clamp(2.8rem, 8vw, 6rem); }
.cosmic__letter { -webkit-text-stroke: 1px rgba(0,0,0,.45); paint-order: stroke fill; text-shadow: 0 0 18px currentColor, 0 0 5px currentColor; }
.cosmic__letter:nth-child(1) { color: #ff2d9b; }
.cosmic__letter:nth-child(2) { color: var(--orange); }
.cosmic__letter:nth-child(3) { color: var(--gold); }
.cosmic__letter:nth-child(4) { color: #4ade5b; }
.cosmic__letter:nth-child(5) { color: #38bdf8; }
.cosmic__letter:nth-child(6) { color: #a855f7; }
.cosmic__mark-bottom { display: block; color: #fff; font-size: clamp(1.9rem, 5.5vw, 4rem); letter-spacing: .18em; }
.cosmic__sub { color: rgba(255,255,255,.78); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 700; margin: .8rem 0 0; }
.cosmic__facts dt { color: var(--gold); text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 800; margin: 0 0 .3rem; }
.cosmic__facts dd { color: #fff; font-weight: 800; font-size: 1.05rem; margin: 0; }
@media (max-width: 760px) { .cosmic__inner { grid-template-columns: 1fr; } .cosmic__action { grid-column: 1; grid-row: 3; text-align: left; justify-self: start; margin-top: 1rem; } }

/* Bar & lounge masonry */
.barlounge__photos { display: block; column-count: 3; column-gap: .9rem; grid-template-columns: none; margin-top: 1.5rem; }
.barlounge__photos[data-count="1"] { column-count: 1; }
.barlounge__photos[data-count="2"] { column-count: 2; }
.barlounge__photo-item { position: relative; break-inside: avoid; margin: 0 0 .9rem; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: block; }
.barlounge__photo-item .barlounge__photo { width: 100%; height: auto; aspect-ratio: auto; border-radius: 0; box-shadow: none; display: block; }
.barlounge__cap { position: absolute; inset: auto 0 0 0; margin: 0; padding: .7rem .8rem; color: #fff; font-size: .8rem; font-weight: 600; background: linear-gradient(transparent, rgba(0,0,0,.78)); opacity: 0; transition: opacity .3s ease; }
.barlounge__photo-item:hover .barlounge__cap { opacity: 1; }
@media (max-width: 600px) { .barlounge__photos { column-count: 2; } .barlounge__photos[data-count="1"] { column-count: 1; } }

/* Gallery lightbox figures + overlay */
.gallery__item { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; cursor: pointer; }
.gallery__cap { position: absolute; inset: auto 0 0 0; margin: 0; padding: .7rem .8rem; color: #fff; font-size: .8rem; background: linear-gradient(transparent, rgba(0,0,0,.8)); opacity: 0; transition: opacity .3s ease; }
.gallery__item:hover .gallery__cap { opacity: 1; }
.gallery__item:hover .gallery__photo { transform: scale(1.05); }
.lightbox { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(8,5,4,.94); align-items: center; justify-content: center; }
.lightbox.is-open { display: flex; }
.lightbox__img { max-width: 92vw; max-height: 82vh; border-radius: 10px; }
.lightbox__btn { position: absolute; background: rgba(255,255,255,.12); border: 0; color: #fff; font-size: 2rem; width: 3rem; height: 3rem; border-radius: 50%; cursor: pointer; }
.lightbox__btn--close { top: 1.25rem; right: 1.25rem; }
.lightbox__btn--prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__btn--next { right: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__cap { position: absolute; bottom: 1.5rem; left: 0; right: 0; text-align: center; color: #fff; }

/* Find Us (the cta section is --night dark → light-on-dark cards) */
.findus { display: grid; grid-template-columns: 1fr; gap: 2rem; text-align: left; }
@media (min-width: 920px) { .findus { grid-template-columns: 1.3fr 1fr; align-items: start; } }
.findus__map { border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(255,255,255,.14); }
.findus__map img { width: 100%; max-width: none; display: block; aspect-ratio: 4/5; object-fit: cover; }
.findus__cards { display: grid; gap: 1.25rem; }
.findus__card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); padding: 1.4rem 1.5rem; }
.findus__card-title { font-family: var(--font-head); text-transform: uppercase; font-size: 1.1rem; color: var(--gold); margin: 0 0 .7rem; }
.findus__address { color: rgba(255,255,255,.9); margin: 0 0 .5rem; line-height: 1.5; }
.findus__note--link { color: var(--gold); font-weight: 800; text-transform: uppercase; font-size: .82rem; }
.findus__hours { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.findus__hours-row { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed rgba(255,255,255,.14); padding-bottom: .45rem; color: rgba(255,255,255,.9); font-size: .92rem; }
.findus__hours-row span:last-child { font-weight: 800; }
.findus__contact { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 .5rem; color: rgba(255,255,255,.65); }
.findus__contact a { color: #fff; font-weight: 800; }

/* Footer logo + legal links */
.footer__brand-id { display: flex; align-items: center; gap: .7rem; }
.footer__social { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.footer__social a { color: rgba(250,247,244,.65); }
.footer__social a:hover { color: var(--gold); }
.footer__brand-id .footer__logo { width: 42px; height: 42px; }
.footer__legal-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.footer__powered { text-align: center; font-size: .72rem; margin: 1.5rem 0 0; opacity: .5; }
.footer__powered a { color: inherit; font-weight: 400; font-style: italic; text-decoration: none; }
.footer__powered a:hover { text-decoration: underline; }

/* Compact mobile header — final overrides (win over the later-appended base rules) */
@media (max-width: 1024px) {
  .section--header .header__inner { flex-wrap: nowrap; align-items: center; gap: .6rem; }
  .section--header .brand { flex: 1 1 auto; min-width: 0; align-items: center; gap: .6rem; }
  .section--header .brand__logo { width: 48px; height: 48px; }
  .section--header .brand__text { min-width: 0; gap: .05rem; }
  .section--header .brand__status { display: inline-flex; font-size: .64rem; }
  .section--header .brand__name { min-width: 0; font-size: 1.1rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .section--header .brand__city { display: block; font-size: .68rem; opacity: .85; }
  .section--header .header__utility { display: none; }
  .section--header .nav-toggle { flex: none; margin-left: 0; }
  /* Flatten the desktop "More" dropdown into the drawer — all items at one level */
  .section--header .nav { padding-top: 10px; }
  .section--header.nav-open .nav-toggle { z-index: 80; }
  .section--header .nav__head { display: flex; align-items: center; gap: .7rem; width: 100%; margin: 10px 0 .6rem; padding: 0 2.75rem .85rem 0; border-bottom: 1px solid rgba(255,255,255,.15); }
  .section--header .nav__head-logo { width: 44px; height: 44px; flex: none; }
  .section--header .nav__head-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
  .section--header .nav__head-name { font-weight: 700; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .section--header .nav__head-status { font-size: .68rem; }
  .section--header .nav__more { display: block; width: 100%; }
  .section--header .nav__more-toggle { display: none; }
  .section--header .nav__more-menu { display: flex; flex-direction: column; position: static; width: 100%; min-width: 0; padding: 0; margin: 0; border: 0; background: none; box-shadow: none; gap: 0; }
  .section--header .nav__more-menu .nav__link { padding: .75rem 0; font-size: 1.15rem; width: 100%; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .section--header .nav__more-menu .nav__link:hover { background: none; }
}
.footer__legal-links a { color: rgba(250,247,244,.6); }
.footer__legal-links a:hover { color: var(--gold); }

/* Hide the status placeholder until the client fills it */
[data-hours-status]:empty { display: none; }

/* ============================================================
   LAVA — PROOF MATCH (designs/lava/preview.html as source of truth).
   The comp is a warm LIGHT page (cream/ash) with a dark photo hero, a
   floating white stats card, a dark cosmic/club band, a dark find-us +
   footer, and the signature lava-gradient ACCENT WORD. These blocks are
   appended last so they win the cascade over the earlier dark-header /
   full-gradient-hero / dark-stats rules. Values lifted from the comp's
   own stylesheet (design tokens + UI kit).
   ============================================================ */

/* ---- Buttons → pills (proof .ll-btn is fully rounded) ---- */
.btn { border-radius: 10px; padding: .9rem 1.7rem; }
.btn--primary { background: var(--lava); color: #fff; box-shadow: 0 10px 30px rgba(214,41,26,.35); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(214,41,26,.45); }
.btn--ghost { background: transparent; border: 1.5px solid var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--night); color: #fff; transform: translateY(-2px); }
/* On the dark hero/cosmic the ghost reads light */
.section--hero .btn--ghost, .section--cosmic .btn--ghost { border-color: rgba(255,255,255,.45); color: #fff; }
.section--hero .btn--ghost:hover, .section--cosmic .btn--ghost:hover { background: rgba(255,255,255,.14); color: #fff; }

/* ---- ACCENT WORD: slot_em (*word*) renders <em>; the comp paints it with
   the lava gradient (NOT a gold italic). Applies to every headline. ---- */
.hero__title em,
.section__title em,
.parties-feature__body .section__title em,
.league-feature__title em,
.cta__title em,
.giftcard .section__title em {
  font-style: normal;
  font-weight: 400;
  background: var(--lava);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---- Header → light glass bar (proof: white 86% + blur, red logo,
   dark nav, red icon phone, red Visit Us pill). Overrides the dark bar. ---- */
.section--header,
.section--header:nth-of-type(even) {
  background: rgba(18,15,14,.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand__name { color: #E8502F; }
.brand__city { color: var(--muted); }
.nav__link { color: var(--ink); }
.nav__link:hover { color: var(--red); }
.nav__link--cta { color: #fff; }            /* stays the lava pill */
.nav__link--cta:hover { color: #fff; }
.header__phone { color: var(--ink); }
.header__phone:hover { color: var(--red); }
.nav__more-toggle { color: var(--ink); }
.section--header .hours-status { color: var(--ink); }
.section--header .hours-status::before { background: var(--muted); }
.section--header .hours-status.is-open::before { background: #1F9D57; box-shadow: 0 0 0 3px rgba(31,157,87,.22); }
.section--header .hours-status.is-closed::before { background: var(--red); }
.section--header .hours-status--badge { border-color: var(--line); background: var(--bg-2); }

/* ---- Hero → white headline + gradient accent, light eyebrow w/ gold dot.
   (Earlier rule made the WHOLE title a gradient; the comp keeps it white.) ---- */
.section--hero .hero__title {
  background: none;
  color: #fff;
  -webkit-text-fill-color: #fff;
  text-shadow: 0 4px 30px rgba(0,0,0,.4);
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: .96;
}
.section--hero .hero__title em { -webkit-text-fill-color: transparent; }  /* re-enable gradient fill on the span */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: #fff;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.hero__eyebrow::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold);
  flex: none;
}
.hero__sub { color: rgba(255,255,255,.86); }

/* ---- Stats → floating white card overlapping the hero (proof .stats-strip).
   Replaces the dark band: transparent section, white rounded card w/ dividers,
   ink Anton numbers, muted caps labels, pulled up over the hero photo. ---- */
.hero-marquee { display: none; }            /* the comp has no hero marquee; drop it so the card can overlap */
.section--stats,
.section--stats:nth-of-type(even) { background: transparent; padding: 0; }
.section--stats .stats__grid {
  position: relative;
  z-index: 6;
  margin-top: -3.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: 0 16px 40px rgba(28,25,23,.16);
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  overflow: hidden;
}
.section--stats .stat {
  border-left: 1px solid var(--line);
  padding: 2.2rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
}
.section--stats .stat:first-child { border-left: 0; }
.section--stats .stat__value { color: var(--ink); font-size: clamp(2.2rem, 4.5vw, 3.6rem); }
.section--stats .stat__label { color: var(--muted); }
@media (max-width: 760px) {
  .section--stats .stats__grid { grid-template-columns: 1fr 1fr; margin-top: -2.5rem; }
  .section--stats .stat:nth-child(odd) { border-left: 0; }
  .section--stats .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ---- Centered section heads for the full-width grid sections (proof centers
   the eyebrow / title / intro on amenities + pricing). ---- */
.section--amenities .section__head,
.section--pricing .section__head { text-align: center; }
.section--amenities .section__intro,
.section--pricing .section__intro { margin-left: auto; margin-right: auto; }

/* ---- Amenity cards → clean white cards (proof: no colored top stripe,
   soft shadow, rounded). Keeps the optional photo / icon media. ---- */
.amenity {
  border-top: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 2px 6px rgba(28,25,23,.10);
  padding: 1.75rem;
}

/* ============================================================
   LAVA — CONTENT-SECTION PROOF MATCH (continuation of ad66421).
   The previous pass matched header / hero / stats to the LIGHT default
   of designs/lava/preview.html; this block brings the remaining content
   sections (leagues, reviews, gift-cards band) the rest of the way to
   that same proof. Appended last so it wins over the earlier strike-era
   rules. Values lifted from the proof's own UI kit (.leagues / .league-row,
   .reviews-scores / .review-source, .giftcard__title).
   ============================================================ */

/* ---- Gift-cards band: the lava-gradient ACCENT em (slot_em) is painted
   with the lava gradient via the global headline rule, which renders it
   nearly invisible on this section's lava-gradient background. The proof's
   .giftcard__title is solid white — force the whole title (incl. em) white
   so the wordmark reads. Why it matters: the band's headline was otherwise
   half-illegible (e.g. "GIFT [cards]" with "cards" vanishing). ---- */
.section--giftcards .section__title,
.section--giftcards .section__title em {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #fff;
  -webkit-text-fill-color: #fff;
}

/* ---- Leagues: the proof pairs the night schedule with a supporting
   feature card side-by-side (proof .leagues = two columns). The canonical
   .leagues-layout was unstyled, so the full 20-row schedule stacked at
   full width (a very tall wall) above the feature. Split it: schedule left,
   feature card right (sticky on desktop). ---- */
.leagues-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
@media (min-width: 920px) {
  .leagues-layout { grid-template-columns: 1.35fr 1fr; gap: 3rem; }
}
.league-list { max-width: none; gap: .6rem; }

/* night row → proof .league-row: white bar, Anton red day code, name,
   muted time, slide-on-hover. Overrides the earlier baseline .league flex. */
.league {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: .9rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(28,25,23,.08);
  transition: transform var(--anim), box-shadow var(--anim), border-color var(--anim);
}
.league:hover { transform: translateX(4px); box-shadow: var(--shadow); border-color: #F6A593; }
.league__when { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; min-width: 5.5rem; }
.league__day { font-family: var(--font-head); text-transform: uppercase; color: var(--red); font-size: 1.15rem; letter-spacing: .02em; margin-left: 0; }
.league__time { font-family: var(--font-body); font-weight: 800; color: var(--muted); font-size: .78rem; margin: .2rem 0 0; }
.league__body { display: flex; flex-direction: column; gap: .1rem; }
.league__name { font-weight: 800; color: var(--ink); }
.league__meta { color: var(--muted); font-size: .85rem; }
.league__status { font-weight: 800; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--felt); white-space: nowrap; }

/* league feature → white card with photo header, why-copy, stat pair, CTA */
.league-feature { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 1.5rem; box-shadow: var(--shadow); }
@media (min-width: 920px) { .league-feature { position: sticky; top: 92px; } }
.league-feature__photo { margin: -1.5rem -1.5rem 1.25rem; border-radius: 18px 18px 0 0; overflow: hidden; }
.league-feature__photo img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.league-feature__photo figcaption { padding: .6rem .9rem 0; font-size: .8rem; color: var(--muted); }
.league-feature__title { font-family: var(--font-head); text-transform: uppercase; color: var(--ink); font-size: 1.4rem; line-height: 1.05; margin: 0 0 .5rem; }
.league-feature__body { color: var(--muted); margin: 0 0 1.25rem; }
.league-feature__stats { display: flex; flex-wrap: wrap; gap: 2rem; margin: 0 0 1.25rem; }
.league-stat__value { display: block; font-family: var(--font-head); color: var(--red); font-size: 1.8rem; line-height: 1; }
.league-stat__label { display: block; color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; margin-top: .25rem; }
.league-feature__cta { display: block; width: 100%; text-align: center; }

/* ---- Reviews: the canonical non-comic markup is a minimal source list
   (<span class="review-source"><span class="review-source__num">4.2</span>
   Google</span>). The proof shows each as a small SCORE BLOCK — a big ink
   Anton number above the platform label. Promote the row to read that way
   instead of a tiny red inline number. ---- */
.review-sources { gap: 2rem 2.5rem; flex-wrap: wrap; align-items: flex-end; }
.review-source {
  display: inline-flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: .15rem;
  color: var(--muted);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.review-source__num { font-family: var(--font-head); color: var(--ink); font-size: 2.6rem; line-height: .85; margin: 0; }

/* ============================================================
   LAVA — DARK CONVERSION FIXUPS (last). The :root flip above made the page
   dark and --ink a light cream, which carries ~24 text uses to light. These
   final rules catch the spots the token flip alone can't: a light-bg accent
   chip that needs DARK text, and a few card shadows that were warm-grey
   (invisible on near-black) → black so elevation still reads. Matches the
   DARK state of designs/lava/preview.html. Warm accents (red/orange/gold,
   the lava gradient CTA + headline accent word, the gift-cards band) are
   intentionally preserved.
   ============================================================ */

/* Gold party ribbon is a LIGHT chip → keep its text dark (was var(--ink),
   now light, which would vanish on gold). */
.parties-feature__ribbon { color: #1C1917; }

/* Card elevation: warm-grey shadows disappear on the dark page → black. */
.section--stats .stats__grid { box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.amenity { box-shadow: 0 2px 10px rgba(0,0,0,.4); }
.league { box-shadow: 0 1px 3px rgba(0,0,0,.4); }

/* ============================================================
   GIFT CARDS — RICH LAYOUT (proof match: dark two-column band,
   denomination pills + call-to-buy CTA, and a red→orange gradient
   gift-card visual with the amount big, logo top-left, "GIFT CARD"
   top-right, and the center name + tagline along the bottom).
   Opted in by the canonical blade when denom/cta/card slots exist;
   appended last so these win over the earlier lava-band rules
   (which paint the whole section gradient + force the title white).
   ============================================================ */
.section--giftcards:has(.giftcard--rich) { background: var(--bg-2); }

/* left column reads as a normal dark content section, not a gradient band */
.section--giftcards:has(.giftcard--rich) .section__title { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink); -webkit-text-fill-color: var(--ink); }
.section--giftcards:has(.giftcard--rich) .section__title em { background: var(--lava); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.section--giftcards:has(.giftcard--rich) .section__eyebrow { color: var(--red); }
.section--giftcards:has(.giftcard--rich) .section__intro { color: var(--muted); }

.giftcard--rich {
  text-align: left;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  justify-items: stretch;
}
.giftcard--rich .giftcard__body { max-width: 46ch; }
.giftcard--rich .giftcard__intro { margin-bottom: 1.3rem; }

.giftcard__denoms { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.3rem 0; }
.giftcard__denom { font-family: var(--font-body); font-weight: 800; font-size: .9rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .45rem 1.1rem; }

.giftcard--rich .giftcard__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.4rem; }
.giftcard--rich .giftcard__cta { color: #fff; }
.giftcard--rich .giftcard__note { color: var(--muted); font-size: .9rem; }

/* the gradient card visual (right column) */
.giftcard__preview { display: flex; justify-content: center; }
.giftcard__card {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1.6 / 1;
  background: linear-gradient(135deg, var(--red) 0%, #E8511F 52%, var(--orange) 100%);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.giftcard__card::after {
  content: "";
  position: absolute;
  right: -20%;
  top: -40%;
  width: 70%;
  height: 120%;
  background: radial-gradient(closest-side, rgba(255,255,255,.28), rgba(255,255,255,0));
  pointer-events: none;
}
.giftcard__card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: relative; z-index: 1; }
.giftcard--rich .giftcard__logo { width: 48px; height: 48px; background: rgba(255,255,255,.92); border-radius: 10px; padding: .3rem; }
.giftcard__card-label { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .12em; font-size: .85rem; color: #fff; }
.giftcard__card-amount { font-family: var(--font-head); font-weight: 400; font-size: clamp(3rem, 8vw, 4.6rem); line-height: 1; margin-top: auto; position: relative; z-index: 1; text-shadow: 0 2px 10px rgba(0,0,0,.22); }
.giftcard__card-foot { font-family: var(--font-body); font-weight: 700; font-size: .85rem; color: rgba(255,255,255,.95); margin-top: .35rem; position: relative; z-index: 1; }
.giftcard--rich .giftcard__name { font-family: var(--font-head); text-transform: uppercase; color: #fff; }

@media (max-width: 820px) {
  .giftcard--rich { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .giftcard--rich .giftcard__body { max-width: none; }
  .giftcard--rich .giftcard__denoms,
  .giftcard--rich .giftcard__actions { justify-content: center; }
  .giftcard__preview { order: -1; }
}

/* ============================================================
   LAVA — HEADER / STATS / MOBILE-NAV POLISH (appended last → wins cascade).
   1) Header: strike-style 2-row desktop grid (brand top-left, phone top-right,
      nav on its own row below, no wrapping) with the live open/closed status
      stacked ABOVE the center name — a single status, dropping the redundant
      top-right badge.
   2) Stats strip sits clearly IN FRONT of the dark hero it overlaps.
   3) Sticky header + mobile drawer use a SOLID on-brand lava token (--night).
      The header drops backdrop-filter, which otherwise makes it a containing
      block that clips the fixed full-height slide-in drawer to header height.
   ============================================================ */

/* --- (1) Header layout: strike-style two-row grid --- */
.brand__text { display: flex; flex-direction: column; gap: .1rem; line-height: 1.05; }
.header__utility { display: flex; align-items: center; gap: 1.1rem; }
.nav__head { display: none; }
.brand__status { display: inline-flex; margin: 0 0 .1rem; font-size: .78rem; }   /* hours status ABOVE the name */
.header__utility .hours-status--badge { display: none; }                          /* drop the redundant top-right badge */
.nav { flex-wrap: nowrap; }                                                       /* stop the nav wrapping to two lines */
@media (min-width: 1025px) {
  .header__inner { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "brand utility" "brand nav"; column-gap: 1.5rem; row-gap: .55rem; align-items: center; }
  .brand { grid-area: brand; }
  .header__utility { grid-area: utility; justify-self: end; }
  .nav { grid-area: nav; justify-self: end; margin: 0; }
}

/* --- (3) Solid on-brand sticky header. No backdrop-filter: it makes the header
   a containing block for the fixed drawer + overlay, clipping the slide-in
   menu to header height. Solid --night reads opaque against lava's palette. --- */
.section--header,
.section--header:nth-of-type(even) {
  background: var(--night);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* --- (2) Stats strip must paint IN FRONT of the hero it overlaps (-3.5rem pull).
   The section gets its own stacking context above the hero (hero z-index: auto);
   the card keeps its higher z within it. --- */
.section--stats { position: relative; z-index: 3; }
.section--stats .stats__grid { position: relative; z-index: 6; }

/* --- (3) Mobile drawer + overlay: solid on-brand background, fully opaque. --- */
@media (max-width: 1024px) {
  .section--header .nav { background: var(--night); }
}

/* Bigger brand logo (operator request 2026-07-02) — the 2-row header grid gives
   the brand column status+name+city of height, so the mark can fill it. */
.brand__logo { width: 56px; height: 56px; }
@media (min-width: 1025px) { .section--header .brand__logo { width: 68px; height: 68px; } }
@media (max-width: 700px) { .brand__logo { width: 42px; height: 42px; } }

/* Hero copy hugs the container LEFT (operator request 2026-07-02): the 660px cap on
   .hero__inner made the hero grid shrinkwrap + center the whole cluster; widen the
   inner to the container and cap its children instead. */
.hero__inner { max-width: var(--maxw); width: 100%; }
.hero__inner > * { max-width: 660px; }

/* Drawer consistency (operator fix 2026-07-02, ported from starlite): the legacy
   .nav__link:last-child CTA rule (pre .nav__link--cta) hits whatever lands last in
   the "And More" dropdown (e.g. GALLERY) — neutralize it there; the real CTA pill
   is .nav__link--cta (FIND US). */
.nav__more-menu .nav__link:last-child { background: none; border: 0; border-radius: 0; padding: .55rem .65rem; color: rgba(255,255,255,.9); font-weight: 700; }
@media (max-width: 1024px) {
  .section--header .nav__more-menu .nav__link:last-child { margin-top: 0; text-align: left; padding: .75rem 0; }
}

/* Powered-by line centers across the WHOLE page (it no longer sits in a .container). */
.footer__powered { width: 100%; padding: 0 1.5rem; }

/* Overflow mini-cards — capped sections surface extras instead of dropping them (brzportal#45/#48). */
.overflow-cards { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 1rem; }
.overflow-cards--4up, .overflow-cards--6up { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .overflow-cards--4up { grid-template-columns: repeat(4, 1fr); } .overflow-cards--6up { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .overflow-cards--6up { grid-template-columns: repeat(6, 1fr); } }
.overflow-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem 1rem; }
.overflow-card__title { font-family: var(--font-head); color: var(--gold); font-size: .92rem; line-height: 1.2; margin: 0 0 .35rem; text-transform: uppercase; letter-spacing: .02em; }
.overflow-card__desc { color: var(--muted); font-size: .82rem; line-height: 1.45; margin: 0; }
.overflow-note { margin: 1.1rem 0 0; color: var(--gold); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.parties-feature__more { margin: 1.8rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.parties-feature__more-label { margin: 0 0 .6rem; color: var(--muted); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

/* ---- More party packages: full descriptions, taller cards, two-row scroll (brzportal#61) ---- */
.parties-more-scroll { position: relative; min-width: 0; }
.parties-more-cards { max-height: 30rem; overflow-y: auto; overscroll-behavior: contain; padding-right: .35rem; align-content: start; }
.parties-more-cards .overflow-card { padding: 1.1rem 1.25rem; }
.parties-more-cards .overflow-card__desc { display: block; overflow: visible; text-overflow: clip; -webkit-line-clamp: none; }

/* Owner-chosen badge size (brzportal#67). A scale factor, not pixels — each skin keeps its own
   type scale and the badge stays inside the design instead of being set to something that
   breaks the photo composition. Medium is the theme's own size. */
.parties-feature__price--small { --badge-scale: .78; }
.parties-feature__price--large { --badge-scale: 1.34; }