/* ============================================================
   STRIKE skin — dark plum + sunset (peach/pink/orange), Anton display +
   Pacifico script accents + Inter body, rounded cards, soft glow shadows.
   Styles the canonical section markup.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;800&family=Pacifico&family=Bowlby+One&display=swap');

:root {
  /* Real strike design tokens: deep navy + gold + sky + fire-red. */
  --bg: #050E2A;
  --bg-2: #081A3D;
  --surface: #0B1E47;
  --surface-2: #14264F;
  --peach: #FFC528;      /* legacy alias → gold (primary accent) */
  --pink: #6DC3FF;       /* legacy alias → sky */
  --orange: #E73927;     /* legacy alias → fire red */
  --gold: #FFC528;
  --gold-hi: #FFE070;
  --gold-lo: #E89A14;
  --sky: #6DC3FF;
  --sky-hi: #EAF6FF;
  --sky-mid: #2E84D6;
  --fire: #E73927;
  --fire-deep: #A8231A;
  --ink: #050E2A;        /* navy: text on gold + headline stroke */
  --cream: #F4ECDA;
  --white: #FFFFFF;
  --muted: rgba(244,236,218,.72);
  --line: rgba(255,197,40,.20);
  --maxw: 1200px;
  --radius: 16px;
  --shadow: 0 12px 34px rgba(0,0,0,.5);
  --font-head: 'Bowlby One', system-ui, sans-serif;
  --font-script: 'Pacifico', cursive;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-cond: 'Anton', 'Impact', sans-serif;
  --anim: .2s ease;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  background-image: radial-gradient(900px 500px at 80% -5%, rgba(255,197,40,.10), transparent 60%),
                    radial-gradient(800px 500px at 0% 5%, rgba(109,195,255,.08), transparent 55%);
  color: var(--cream);
  font-family: var(--font-body);
  line-height: 1.65;
}
html { scroll-behavior: smooth; }
a { color: var(--peach); text-decoration: none; }
a:hover { color: var(--gold); }
img { max-width: 100%; height: auto; display: block; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }

/* ---- Sections (deep navy; glowing gold divider at each section top) ---- */
.section { position: relative; padding: 5rem 0; scroll-margin-top: 76px; }
.section:where(:nth-of-type(even)) { background: var(--bg-2); }
.section + .section:not(.section--hero)::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(1120px, 92%); height: 2px; background: linear-gradient(90deg, transparent, var(--gold) 16%, var(--gold-hi) 50%, var(--gold) 84%, transparent); box-shadow: 0 0 16px rgba(255,197,40,.5); }
/* Section head: eyebrow + title (left), intro floated to the right (per the proof). */
.section__head { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2.75rem; }
@media (min-width: 880px) {
  .section__head { grid-template-columns: minmax(0, 1.6fr) minmax(250px, 1fr); align-items: end; column-gap: 3rem; }
  .section__head .section__eyebrow { grid-column: 1; grid-row: 1; }
  .section__head .section__title { grid-column: 1; grid-row: 2; }
  .section__head .section__intro { grid-column: 2; grid-row: 2; justify-self: end; max-width: 44ch; }
}
.section__eyebrow { display: inline-block; color: var(--fire); font-family: var(--font-body); font-weight: 800; text-transform: uppercase; letter-spacing: .24em; font-size: .8rem; margin: 0 0 .25rem; }
.section__title { font-family: var(--font-head); font-weight: 400; font-size: clamp(2.75rem, 7vw, 5.25rem); line-height: .95; letter-spacing: .01em; text-transform: uppercase; margin: 0 0 .25rem;
  background: linear-gradient(180deg, #fff 0%, #fff 52%, var(--sky-hi) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: .05em var(--ink); paint-order: stroke fill; filter: drop-shadow(0 .09em .15em rgba(0,0,0,.6)); }
/* the script accent word in a headline (em) — gold gradient Pacifico, navy stroke */
/* Outline BEHIND a gradient fill without negative z-index: the em itself is a solid navy
   glyph WITH the stroke (so the outline is the whole shape); an ::after paints the gold
   gradient on top (no stroke), covering the interior and leaving the navy stroke showing
   around the edge. A -webkit-text-stroke on a background-clip-gradient element would paint
   the stroke OVER the gold — this stacks the fill above the outline instead. */
.section__title em, .hero__title em, .cta__title em { font-family: var(--font-script); font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 1.15em; line-height: .9; position: relative;
  /* inline-block so the absolute ::after overlay aligns to the base text box (an inline em
     leaves the ::after offset from the baseline — the doubled/ghosted headline). */
  display: inline-block;
  /* Base = gold gradient (transparent interiors) + navy stroke. The ::after overlays a
     stroke-less gold copy so the outline reads BEHIND the fill; but if the ::after ever
     doesn't draw (e.g. a stale render with no data-text), this base degrades to gold-with-
     outline over the photo — never a solid navy blob. */
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 50%, var(--gold-lo) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: .05em var(--ink); paint-order: stroke fill;
  filter: drop-shadow(0 .07em .12em rgba(0,0,0,.5)); }
.section__title em::after, .hero__title em::after, .cta__title em::after {
  content: attr(data-text); position: absolute; left: 0; top: 0;
  -webkit-text-stroke: 0; background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 50%, var(--gold-lo) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.section__intro { color: rgba(244,236,218,.82); font-size: 1.05rem; max-width: 60ch; margin: 0; }

/* ---- Buttons (gold primary with fire-red bottom edge; ghost secondary) ---- */
.btn { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-body); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .9rem; padding: 1rem 1.7rem; border-radius: 12px; border: 2px solid transparent; cursor: pointer; transition: transform var(--anim), box-shadow var(--anim), background var(--anim); }
.btn--primary { background: var(--gold); color: var(--ink); box-shadow: 0 6px 0 var(--fire-deep), 0 16px 30px rgba(0,0,0,.4); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--fire-deep), 0 20px 34px rgba(0,0,0,.45); }
.btn--phone, .btn--ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.4); box-shadow: none; }
.btn--phone:hover, .btn--ghost:hover { background: rgba(255,255,255,.08); transform: translateY(-2px); }

/* ---- Header ---- */
/* NOTE: no backdrop-filter here — it would make the header a containing block for the
   fixed-positioned mobile drawer (.nav) + overlay, which breaks the slide-out menu. */
.section--header { position: sticky; top: 0; z-index: 50; background: rgba(10,4,16,.94); padding: 1rem 0; border-bottom: 1px solid var(--line); }
.section--header:nth-of-type(even) { background: rgba(10,4,16,.94); }
.header__inner { display: flex; align-items: center; gap: 1.5rem; }
/* Desktop header runs 15% wider than the body container. */
.section--header .container { max-width: calc(var(--maxw) * 1.15); }
.header__utility { display: flex; align-items: center; gap: 1.1rem; }
.nav__head { display: none; }
/* Open/closed status lives ABOVE the center name (brand__status); the top-right utility
   copy is redundant, so hide it there — the utility keeps just the phone. */
.brand__status { display: inline-flex; margin: 0 0 .1rem; font-size: .78rem; }
.header__utility .hours-status--badge { display: none; }
/* Desktop: reflow to two rows — brand left (spanning), utility (status + phone) top-right, nav below.
   Avoids the single crowded row that wrapped the badge + phone. */
@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; }
}
.brand { display: flex; align-items: center; gap: .6rem; }
.brand__logo { width: 44px; height: 44px; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; gap: .1rem; line-height: 1.05; }
.brand__name { font-family: var(--font-head); font-size: 1.4rem; color: var(--cream); letter-spacing: .04em; text-transform: uppercase; line-height: 1; }
.brand__city { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 1.4rem; flex-wrap: nowrap; }
.nav__link { color: var(--cream); font-weight: 600; font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.nav__link:hover { color: var(--peach); }
.nav__link--cta { background: var(--gold); color: var(--ink); border-radius: 10px; padding: .5rem 1.1rem; font-weight: 800; }
.nav__link--cta:hover { color: var(--ink); filter: brightness(1.05); }
/* Desktop overflow: items beyond 5 collapse into an "And More…" dropdown. */
.nav__more { position: relative; display: inline-flex; }
.nav__more-toggle { background: transparent; border: 0; cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: .3rem; }
/* top:100% (no gap) so moving the cursor from the toggle to the menu never crosses dead space;
   padding-top gives visual separation without a hover gap. */
.nav__more-menu { display: none; position: absolute; top: 100%; right: 0; min-width: 13rem; flex-direction: column; gap: .1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: .85rem .5rem .5rem; box-shadow: 0 18px 50px rgba(0,0,0,.45); 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; }
.nav__more-menu .nav__link:hover { background: rgba(255,255,255,.07); color: var(--gold); }
.header__phone { color: var(--peach); font-weight: 700; white-space: nowrap; }

/* ---- Hero ---- */
.section--hero { position: relative; overflow: hidden; min-height: clamp(540px, 84vh, 820px); display: grid; align-items: center; color: var(--cream); }
.section--hero:nth-of-type(even) { background: var(--bg); }
.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(10,4,16,.95) 0%, rgba(10,4,16,.78) 45%, rgba(10,4,16,.35) 100%); }
.section--hero .container { position: relative; z-index: 2; }
.hero__inner { max-width: 640px; }
.hero__eyebrow { display: inline-block; color: var(--gold); border: 1px solid rgba(255,197,40,.45); border-radius: 9999px; padding: .35rem .9rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; margin: 0 0 1.1rem; }
/* Block word (the non-script part) reads WHITE with a navy outline. The fill must be a
   FOREGROUND text-fill, not a background-clip gradient: a clipped gradient paints at the
   element's background layer (bottom of the stacking context), i.e. BELOW the script em —
   the em's navy border would then draw over the white letters. As foreground text the block
   word paints in the parent's inline-content layer, ABOVE the em (a block-level descendant),
   so the white fill sits cleanly in front of the script's outline where they overlap. */
.hero__title { font-family: var(--font-head); font-weight: 400; font-size: clamp(3.25rem, 9vw, 7rem); line-height: .82; text-transform: uppercase; margin: .1rem 0 0; position: relative; isolation: isolate;
  color: #fff; -webkit-text-fill-color: #fff;
  -webkit-text-stroke: .045em var(--ink); paint-order: stroke fill; filter: drop-shadow(0 .1em .16em rgba(0,0,0,.65)); }
/* Script word is its own line, pulled tight over the block word with negative leading (the design
   stacks them overlapping). Without this the big Pacifico line box collides on narrow screens.
   No negative z-index: normal paint order already keeps the block word's foreground fill in
   front of this (block-level) em where they overlap. */
.hero__title em { display: block; line-height: .9; margin-bottom: -.1em; position: relative; }
.hero__sub { font-family: var(--font-body); color: rgba(255,255,255,.85); font-size: 1.18rem; max-width: 42ch; line-height: 1.55; }
.hero__rating { color: var(--gold); font-weight: 700; }
.hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1.75rem 0 0; }
.btn__arrow { font-weight: 800; }
/* gold scrolling deals marquee along the hero's bottom edge */
.hero-marquee { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; background: var(--gold); border-top: 4px solid var(--ink); border-bottom: 4px solid var(--ink); overflow: hidden; }
.hero-marquee__track { display: inline-flex; align-items: center; white-space: nowrap; padding: .7rem 0; font-family: var(--font-head); text-transform: uppercase; font-size: 1.3rem; letter-spacing: .02em; color: var(--ink); animation: strike-marquee 38s linear infinite; will-change: transform; }
.hero-marquee__item { display: inline-flex; align-items: center; padding-left: 2.5rem; }
.hero-marquee__item::after { content: "\2022"; color: var(--fire); margin-left: 2.5rem; font-size: .85em; }
@keyframes strike-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 700px) { .hero-marquee__track { font-size: 1rem; } }
/* sunburst "STRIKE!" badge */
.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.3rem; color: var(--ink); background: radial-gradient(circle at 50% 40%, var(--gold), var(--orange)); 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 50px rgba(255,107,26,.6); animation: strike-pop .5s ease-out both; }
.hero-burst.kapow { animation: strike-kapow .5s ease-out; }
.floaty { position: absolute; z-index: 4; font-family: var(--font-head); text-transform: uppercase; font-size: 3rem; color: var(--peach); text-shadow: 3px 3px 0 var(--ink); pointer-events: none; animation: strike-float 1s ease-out forwards; }
@media (max-width: 900px) { .hero-burst { width: 140px; height: 140px; font-size: 1.6rem; 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%23F4ECDA%27%20stroke%3D%27%230A0410%27%20stroke-width%3D%273%27%2F%3E%3Cpath%20d%3D%27M15%2023%20H25%20M13%2031%20H27%27%20stroke%3D%27%23FF6B1A%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%23F4ECDA%27%20stroke%3D%27%230A0410%27%20stroke-width%3D%273%27%2F%3E%3Cpath%20d%3D%27M15%2023%20H25%20M13%2031%20H27%27%20stroke%3D%27%23FF6B1A%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%23F4ECDA%27%20stroke%3D%27%230A0410%27%20stroke-width%3D%273%27%2F%3E%3Cpath%20d%3D%27M15%2023%20H25%20M13%2031%20H27%27%20stroke%3D%27%23FF6B1A%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: strike-pins-in .6s ease-out both; }
@media (max-width: 900px) { .section--hero::after { width: 240px; height: 200px; right: 0; } }
@keyframes strike-pins-in { 0% { opacity: 0; transform: translateY(-50%) scale(.6) rotate(-8deg); } 100% { opacity: 1; transform: translateY(-50%) scale(1) rotate(0); } }
/* Strike design has no hero burst/pins — it uses the live "Lanes Available" island instead. */
.hero-burst, .section--hero::after, .floaty { display: none !important; }

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

/* ---- 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); }

/* ---- What's On (deal cards) ---- */
.offerings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px,1fr)); gap: 1.5rem; }
.offering { overflow: hidden; display: flex; flex-direction: column; }
.offering__media { position: relative; }
.offering__photo { width: 100%; aspect-ratio: 16/11; object-fit: cover; }
.offering__badge { position: absolute; top: .85rem; left: .85rem; background: var(--gold); color: var(--ink); font-family: var(--font-head); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 8px; }
.offering__body { padding: 1.5rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.offering__title { font-family: var(--font-head); text-transform: uppercase; font-size: 1.4rem; color: var(--cream); margin: 0; letter-spacing: .01em; }
.offering__desc { color: var(--muted); margin: 0; flex: 1; }
.offering__cta { font-family: var(--font-body); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; color: var(--gold); margin-top: .5rem; }
.offering__cta:hover { color: var(--gold-hi); }
/* ---- Amenities ("everything under one roof") ---- */
.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; }
.amenity__name { font-family: var(--font-head); text-transform: uppercase; font-size: 1.05rem; color: var(--gold); margin: 0 0 .4rem; letter-spacing: .02em; }
.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; }

/* ---- 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: 600; }
.price-row__value { font-family: var(--font-head); font-size: 1.6rem; color: var(--gold); }

/* ---- 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; }
.party__name { display: block; font-family: var(--font-head); text-transform: uppercase; font-size: 1.15rem; color: var(--peach); }
.party__price { display: inline-block; font-family: var(--font-head); font-size: 1.6rem; color: var(--gold); margin: .35rem 0; }
.party__detail { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); }
.party.is-expanded .party__detail { -webkit-line-clamp: unset; }
.party__readmore { margin-top: .5rem; background: none; border: 0; padding: 0; color: var(--gold); font-weight: 800; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }
.party__readmore:hover { color: var(--peach); }
.party-list__more { text-align: center; margin-top: 1.75rem; }
/* Parties — featured-package hero (photo + price burst + ribbon | details + checklist + CTAs). */
.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: 6.5rem; height: 6.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--gold); color: var(--ink); text-align: center; line-height: 1; filter: drop-shadow(0 8px 18px rgba(0,0,0,.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: 1.7rem; }
.parties-feature__price small { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.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,.3); }
.parties-feature__lead { color: var(--cream); 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(--cream); font-weight: 600; }
.parties-feature__list li::before { content: "\2713"; position: absolute; left: 0; color: var(--gold); font-weight: 800; }
.parties-feature__ctas { display: flex; flex-wrap: wrap; gap: 1rem; }
.parties-feature__deskcta { cursor: default; }
.party__includes { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--muted); }

/* ---- Leagues (schedule left, "Why league?" feature right) ---- */
.leagues-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 920px) { .leagues-layout { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.league-list { list-style: none; margin: 0; max-width: none; display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem 1.25rem; max-height: 620px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--gold) transparent; }
.league-list::-webkit-scrollbar { width: 8px; }
.league-list::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 9999px; }
.league-list::-webkit-scrollbar-track { background: transparent; }
.league { display: flex; align-items: center; gap: 1rem; padding: 1rem .25rem; border-bottom: 1px dashed rgba(255,255,255,.1); }
.league:last-child { border-bottom: 0; }
.league__when { display: grid; place-items: center; min-width: 66px; padding: .4rem .3rem; background: var(--bg); border-radius: 10px; line-height: 1.05; }
.league__day { font-size: .58rem; font-weight: 800; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.league__time { font-family: var(--font-head); color: var(--gold); font-size: 1.05rem; }
.league__body { flex: 1; display: grid; gap: .1rem; }
.league__name { font-family: var(--font-head); font-size: 1.1rem; color: var(--cream); text-transform: uppercase; letter-spacing: .01em; }
.league__meta { color: var(--muted); font-size: .82rem; }
.league__status { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #7CE0A0; border: 1px solid rgba(124,224,160,.4); border-radius: 9999px; padding: .3rem .7rem; white-space: nowrap; }
.league-feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.league-feature__photo { margin: 0 0 1.25rem; position: relative; }
.league-feature__photo img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 12px; }
.league-feature__photo figcaption { position: absolute; left: .75rem; bottom: .75rem; background: var(--gold); color: var(--ink); font-family: var(--font-head); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; padding: .35rem .7rem; border-radius: 8px; }
.league-feature__title { font-family: var(--font-head); text-transform: uppercase; font-size: 1.8rem; color: var(--cream); margin: 0 0 .6rem; }
.league-feature__body { color: var(--muted); margin: 0 0 1.25rem; }
.league-feature__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }
.league-stat { background: var(--bg); border-radius: 12px; padding: 1rem 1.25rem; }
.league-stat__value { display: block; font-family: var(--font-head); font-size: 2rem; color: var(--gold); line-height: 1; }
.league-stat__label { color: var(--muted); font-size: .78rem; }
.league-feature__cta { width: 100%; justify-content: center; }

/* ---- Bar & lounge / Cosmic ---- */
.section--barlounge { background: var(--surface); }
/* Cosmic — immersive neon banner: photo bg + dark-purple overlay, rainbow wordmark, fact strip. */
.section--cosmic { position: relative; overflow: hidden; padding: 0; background: linear-gradient(135deg, #160a36 0%, #3a1166 52%, #6d1f9e 100%); }
.cosmic__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; z-index: 0; }
.section--cosmic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(22,10,54,.96) 0%, rgba(22,10,54,.6) 42%, rgba(109,31,158,.45) 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__eyebrow::before { content: "\2605  "; }
.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: #ff7a1a; }
.cosmic__letter:nth-child(3) { color: #ffd23f; }
.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; text-shadow: 0 0 18px rgba(255,255,255,.45); }
.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: 700; 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; } .cosmic__facts { gap: 1rem 2rem; } }
.barlounge__details, .section--cosmic .section__intro, .section--barlounge .section__intro { color: var(--muted); }
.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); }
/* Bar & lounge: masonry — photos pack into columns at their natural height, captions on hover.
   CSS multi-column gives a self-arranging grid with no gaps regardless of photo aspect ratios. */
.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; }
@media (max-width: 600px) { .barlounge__photos { column-count: 2; } .barlounge__photos[data-count="1"] { column-count: 1; } }
.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, .barlounge__photo-item:focus-within .barlounge__cap { opacity: 1; }

/* ---- 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: 600; text-transform: uppercase; letter-spacing: .04em; font-size: .82rem; color: var(--cream); 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: linear-gradient(180deg, var(--peach), var(--orange)); color: var(--ink); border-color: transparent; }
html.js .section--foodservice .menu-tabs ~ .menu-category { display: none; }
html.js .section--foodservice .menu-tabs ~ .menu-category.is-active { display: block; }
.menu-category__title { font-family: var(--font-head); text-transform: uppercase; color: var(--peach); font-size: 1.3rem; margin: 0 0 1.25rem; letter-spacing: .03em; }
.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: 700; color: var(--cream); 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(--gold); 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: 600; color: var(--cream); }
.menu-list__meta { color: var(--muted); font-size: .8rem; }
.menu-list__price { margin-left: auto; font-family: var(--font-head); color: var(--gold); }

/* ---- This week / deals ---- */
.deals-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 1.5rem; }
.deal { padding: 1.5rem; }
.deal__media { margin: -1.5rem -1.5rem 1.1rem; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; }
.deal__photo { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.deal__title { font-family: var(--font-head); text-transform: uppercase; font-size: 1.5rem; color: var(--peach); margin: 0 0 .5rem; }
.deal__desc { color: var(--muted); margin: 0 0 .75rem; }
.deal__value { display: inline-block; font-family: var(--font-head); color: var(--gold); font-size: 1.5rem; }
.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(--gold); 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); }
.review__quote { margin: .5rem 0 1rem; color: var(--cream); }
.review__author { font-weight: 700; display: block; color: var(--peach); }
.review__source, .review__date { font-size: .8rem; color: var(--muted); }

/* ---- Gallery (hover caption + click → lightbox) ---- */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 1rem; }
.gallery__item { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; cursor: pointer; }
.gallery__photo { width: 100%; max-width: none; aspect-ratio: 1/1; object-fit: cover; display: block; transition: transform .45s ease; }
.gallery__item:hover .gallery__photo, .gallery__item:focus-visible .gallery__photo { transform: scale(1.06); }
.gallery__cap { display: block; position: absolute; left: 0; right: 0; bottom: 0; padding: 1.75rem .9rem .85rem; font-family: var(--font-head); text-transform: uppercase; font-size: .92rem; letter-spacing: .01em; color: #fff; background: linear-gradient(transparent, rgba(5,14,42,.9)); transform: translateY(100%); opacity: 0; transition: transform .3s ease, opacity .3s ease; }
.gallery__item:hover .gallery__cap, .gallery__item:focus-visible .gallery__cap { transform: translateY(0); opacity: 1; }
.lightbox { position: fixed; inset: 0; z-index: 200; align-items: center; justify-content: center; background: rgba(5,14,42,.93); padding: 5vh 5vw; }
.lightbox.is-open { display: flex; }
.lightbox__figure { margin: 0; max-width: 92vw; max-height: 86vh; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.lightbox__img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: 12px; box-shadow: 0 24px 70px rgba(0,0,0,.6); }
.lightbox__cap { color: #fff; font-size: 1rem; }
.lightbox__count { font-family: var(--font-head); color: var(--gold); margin-right: .5rem; }
.lightbox__close { position: absolute; top: 1.25rem; right: 1.25rem; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; transition: background var(--anim); }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; transition: background var(--anim); }
.lightbox__nav--prev { left: 1.25rem; }
.lightbox__nav--next { right: 1.25rem; }
.lightbox__close:hover, .lightbox__nav:hover { background: var(--gold); color: var(--ink); }

/* ---- Gift cards ---- */
.section--giftcards { background: linear-gradient(120deg, var(--orange), var(--pink)); }
.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,.15); border-radius: var(--radius); padding: .4rem; }
.giftcard__name { font-family: var(--font-head); text-transform: uppercase; color: var(--ink); }
.section--giftcards .section__title { color: var(--ink); }

/* ---- Find Us (map + address / hours / contact cards) ---- */
.section--cta { background: var(--surface); }
.cta__title { font-size: clamp(2.5rem, 8vw, 5rem); }
.findus { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@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 var(--line); }
/* Taller frame (bigger like lava); cover-fill so the map is cropped, never stretched/distorted. */
.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: var(--bg); border: 1px solid var(--line); 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: #fff; margin: 0 0 .7rem; letter-spacing: .02em; }
.findus__address { color: var(--cream); margin: 0 0 .5rem; line-height: 1.5; }
.findus__note--link { color: var(--gold); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.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,.1); padding-bottom: .45rem; color: var(--cream); font-size: .92rem; }
.findus__hours-row span:last-child { font-weight: 700; }
.findus__hours-row.is-today { background: rgba(245,197,66,.1); border-radius: 7px; margin: 0 -.6rem; padding: .15rem .6rem .5rem; }
.findus__hours-row.is-today span { color: var(--gold); font-weight: 800; }
.findus__contact { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 .5rem; color: var(--muted); font-size: .92rem; }
.findus__contact a { color: var(--cream); font-weight: 700; }
/* Live open/closed status (filled client-side; hidden while empty via base [data-hours-status]:empty). */
.hours-status { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .9rem; color: var(--cream); white-space: nowrap; }
.hours-status::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--muted); flex: none; }
.hours-status.is-open::before { background: #34d36b; box-shadow: 0 0 0 3px rgba(52,211,107,.25); }
.hours-status.is-closed::before { background: #ff6b5e; }
.hours-status--badge { font-size: .8rem; padding: .35rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.05); }
.findus__card .hours-status { margin: 0 0 .85rem; }
.section--hero .hours-status { margin-top: 1.1rem; }

/* ---- Footer (brand + social + 3 nav columns) ---- */
.section--footer { background: var(--bg); color: var(--cream); border-top: 1px solid var(--line); }
.section--footer:nth-of-type(even) { background: var(--bg); }
.footer__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 2rem; } }
.footer__brand-name { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-head); text-transform: uppercase; font-size: 1.5rem; color: #fff; letter-spacing: .03em; }
.footer__brand-name::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--fire); box-shadow: 0 0 12px var(--fire); flex: none; }
.footer__brand-id { display: flex; align-items: center; gap: .7rem; }
.footer__logo { width: 42px; height: 42px; object-fit: contain; border-radius: 8px; flex: none; }
/* When a real logo shows, drop the dot marker (the logo is the mark, like the header). */
.footer__brand-id:has(.footer__logo) .footer__brand-name::before { display: none; }
.footer__tag { color: var(--muted); margin: 1rem 0 1.25rem; max-width: 32ch; }
.footer__social { display: flex; gap: .6rem; }
.footer__social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); color: var(--cream); transition: background var(--anim), color var(--anim); }
.footer__social a:hover { background: var(--gold); color: var(--ink); }
.footer__social svg { width: 18px; height: 18px; }
.footer__heading { font-family: var(--font-body); font-weight: 800; text-transform: uppercase; color: var(--gold); font-size: .8rem; margin: 0 0 1rem; letter-spacing: .14em; }
.footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.footer__links a { color: var(--cream); }
.footer__links a:hover { color: var(--gold); }
.footer__legal { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
.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; }

/* 3-line mobile header (avatar + status / name / city) + flatten the "More" dropdown into the drawer */
@media (max-width: 1024px) {
  .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 { 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: var(--muted); text-decoration: none; }
.footer__legal-links a:hover { color: var(--gold); }

/* ---- Scroll reveal (animation-based; safe) ---- */
.section.in-view:not(.section--header):not(.section--hero) { animation: strike-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: var(--cream); border-radius: 2px; transition: transform .3s cubic-bezier(.4,.01,.2,1), opacity .2s ease; }
/* overlay fades (opacity/visibility) rather than display-toggling, so it eases in and out.
   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(3,8,24,.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; }
  /* One compact row (≈half the height): logo + name left, status + phone stacked right, toggle far right. */
  .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: 30px; height: 30px; }
  .brand__text { min-width: 0; }
  .brand__name { font-size: 1rem; 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: .1rem; margin: 0; }
  .hours-status--badge { font-size: .66rem; padding: .14rem .5rem; }
  .header__phone { font-size: .8rem; }
  .nav { position: fixed; top: 0; right: 0; bottom: 0; width: min(86vw, 340px); background: var(--surface); border-left: 1px solid var(--line); 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 var(--line); }
  .nav__link--cta { margin-top: .75rem; text-align: center; border-bottom: 0; }
  /* In the drawer, flatten the More dropdown so every item is listed; hide the toggle. */
  .nav__more { width: 100%; display: block; }
  .nav__more-toggle { display: none; }
  .nav__more-menu { display: flex; position: static; min-width: 0; background: transparent; border: 0; box-shadow: none; padding: 0; gap: 0; }
  .nav__more-menu .nav__link { padding: .75rem 0; border-bottom: 1px solid var(--line); border-radius: 0; white-space: normal; }
  .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 strike-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 strike-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 strike-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 strike-reveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

@media (max-width: 720px) {
  .section:not(.section--header) { padding: 3rem 0; }
  /* Don't vertical-center the tall hero on mobile — it pushed content up under the sticky header.
     Top-align and pad below the header instead; shrink the headline so it isn't crowded. */
  .section--hero { min-height: auto; align-items: start; }
  .hero__inner { padding: 5.5rem 0 4rem; }
  .hero__title { font-size: clamp(2.75rem, 13vw, 4.5rem); }
  .hero__sub { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Leagues: "Scroll for more" fade-hint over the (already scrollable) list's bottom edge. */
.league-scroll { position: relative; min-width: 0; }
.league-scroll-hint { position: absolute; left: 1px; right: 1px; bottom: 1px; margin: 0; padding: 2.2rem 0 .5rem; text-align: center; pointer-events: none;
  font-weight: 800; text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; color: var(--gold);
  background: linear-gradient(180deg, rgba(26,16,40,0) 0%, rgba(26,16,40,.94) 70%); border-radius: 0 0 var(--radius) var(--radius); }

/* HERO headline em (script) — the ONE em that physically overlaps other text (its
   descenders hang into the white block word below). The gradient treatment paints via
   background-clip at the background layer, which drops out where it stacks over the
   white foreground text and reads as an inverted outline knockout. Foreground gold
   fill + paint-order keeps the overlap solid: gold script, navy outline, over white.
   Section/cta titles keep the gradient em — they never overlap. */
.hero__title em { background: none; color: var(--gold); -webkit-text-fill-color: var(--gold); }
.hero__title em::after { content: none; }

/* Section/CTA title ems too: the gradient + data-text ::after machinery mis-registers on
   multi-word script accents ("pizza, beer.") — ghost outlines + uneven fills. Same cure as
   the hero em: solid foreground gold, navy stroke behind via paint-order, overlay retired. */
.section__title em, .cta__title em { background: none; color: var(--gold); -webkit-text-fill-color: var(--gold); }
.section__title em::after, .cta__title em::after { content: none; }

/* 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 640px 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: 640px; }

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