/* ============================================================
   MILKY LANE · SHARED MENU PAGE STYLES
   Used by burgers.html, sides.html, desserts.html, shakes.html, cocktails.html
   ============================================================ */
    /* B4 · Driftline is the Milky Lane script face (Brand Kit §4).
       Calgary Script retired 25 Aug 2026. Licence: BlackFridayFont, EUR2
       per-project commercial. Weight is set to 400 explicitly everywhere the
       face is used - leave it to the browser and it fakes a bold, which
       smears the brush strokes. */
    @font-face {
      font-family: "Driftline ML";
      /* DriftlineML is the repaired build (Brand Kit S4, ml-round2.css note).
         This used to load the older fonts/Driftline.ttf, which ml-round2.css
         then overrode - two faces of the same name fighting over the cascade.
         One face, one file, woff2 first. */
      src: url("fonts/DriftlineML.woff2") format("woff2"),
           url("fonts/DriftlineML.ttf") format("truetype");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
:root {
  --ml-black: #050505;
  --ml-ink: #0E0E10;
  --ml-charcoal: #161618;
  --ml-pink: #FF8CE0;
  --ml-pink-bright: #FF8CE0;
  --ml-blue: #5BD0E6;
  --ml-blue-deep: #5BD0E6;
  --ml-yellow: #5BD0E6;
  --ml-cream: #FFF7E8;
  /* Brand pink is #FF8CE0, which is 1.96:1 on the #FDF7EF paper sections -
     unreadable. This is the same hue taken deeper until it clears 4.5:1
     on paper (4.59:1), so it covers body copy and display type both.
     Use it anywhere pink type sits on a light ground. */
  --ml-pink-on-paper: #BD3D9A;
  --ml-white: #FFFFFF;
  --ml-text-dim: #B7B7BD;      /* captions and meta ONLY - Hayley Cat. C */
      --ml-text:     #E9E9EE;      /* body copy: near-white on ink, 16.7:1 */
  --ml-border: rgba(255,255,255,0.08);

  --display: "Anton", "Bebas Neue", Impact, sans-serif;
  --script: "Driftline ML", "Brush Script MT", cursive;
  /* Driftline · the Milky Lane brand script face (eyebrows / accents) */
  --tag: "Anton", "Bebas Neue", Impact, sans-serif;
  --body: "Inter", system-ui, -apple-system, sans-serif;

  --radius: 18px;
  --radius-lg: 28px;
  /* Was rgba(255,140,224,.55) / rgba(91,208,230,.45). A pink shadow under
     a pink button reads as a halo, not depth - it is the same effect as a
     0 0 glow, just offset. Black keeps the lift and drops the bloom. The
     names stay so nothing downstream has to change. */
  --shadow-pink: 0 20px 60px -20px rgba(0,0,0,0.55);
  --shadow-blue: 0 20px 60px -20px rgba(0,0,0,0.45);

  --max: 1320px;
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--body);
  background: var(--ml-black);
  color: var(--ml-white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 28px; border-radius: 999px;
  font-family: var(--display); font-size: 18px; letter-spacing: 1.5px;
  text-transform: uppercase; transition: transform .2s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  white-space: nowrap;
}
.btn--primary { background: var(--ml-pink); color: var(--ml-ink, #0E0E10); box-shadow: var(--shadow-pink); }
.btn--primary:hover { transform: translateY(-2px) scale(1.02); background: var(--ml-pink-bright); }
.btn--secondary { background: transparent; color: var(--ml-white); border: 2px solid var(--ml-white); }
.btn--secondary:hover { background: var(--ml-white); color: var(--ml-black); transform: translateY(-2px); }
.btn--ghost { background: rgba(255,255,255,0.06); border: 1px solid var(--ml-border); color: var(--ml-white); padding: 12px 22px; font-size: 15px; }
.btn--ghost:hover { background: rgba(255,255,255,0.12); }
.btn--sm { padding: 12px 20px; font-size: 14px; }

/* ============================================================
   ATMOSPHERIC PHOTO BANDS · subtle, full-bleed venue energy
   between sections. Heavily darkened so they live as texture,
   not feature imagery. Optional parallax via fixed-attachment.
   ============================================================ */

/* ============================================================
   UNIFIED PRICE SYSTEM
   FOOD (burgers, sides, desserts) → PINK
   DRINKS (shakes, cocktails, beers, wines, non-alc) → BLUE
   Applies to both inline .price elements and circular .price-stamp.
   ============================================================ */

/* --- BASE PRICE STAMP · uses brand drip badge PNGs ---
   Food cards → pink drip, drinks → blue drip.  The PNG carries the white
   outline, drip shape and brand colour, so all we do here is size the area,
   layer the PNG as a background, and centre the price text on the round
   portion (top ~75% of the badge · the drip hangs below). */
/* Heat / spice indicator · SVG chili so it renders without emoji fallback boxes.
   Markup: <span class="heat"><span class="on"></span><span class="off"></span>…</span> */
.heat span {
  display: inline-block;
  width: 14px; height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF52A9'><path d='M18.3 3.2c.6 0 1.1.6 1 1.2-.4 2.1-1.6 3.6-3.2 4.4-.2 3.3-2 6-4.7 7.6-3.8 2.4-9 2-9-2 0-.5.4-.9.9-.9 3.7 0 5-1.7 5.4-4.1.2-1.2 1.4-2.7 3.4-3.4 1.4-.5 2.8-.6 3.8-.6 1 0 1.5-.6 1.8-1.6.1-.4.4-.6.6-.6z' stroke='%23a02463' stroke-width='.6'/><path d='M17 2.5c1 0 1.6.9 1.4 1.8-.2.5-.7.9-1.2.8-.7-.1-1.1-.8-.9-1.5.1-.5.4-.9.7-1.1z' fill='%235BAE2E'/></svg>") center/contain no-repeat;
  vertical-align: -2px;
}
.heat span.off { opacity: 0.28; filter: grayscale(1); }

.price-stamp {
  position: absolute; top: 10px; right: 8px;
  width: 96px; height: 106px;
  background-image: url('images/brand/price-drip-bubble.webp');   /* default = food */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-size: 38px; line-height: 1; letter-spacing: 1px;
  text-align: center;
  padding-bottom: 34px;       /* pushes price text UP into the round bubble head */

  /* Chunky sticker lettering · 26 Aug 2026, to Christian's brief:
     "make price larger and the black stroke larger with a slight offset".

     Two different things are doing the work here and they are not
     interchangeable. -webkit-text-stroke draws ON the glyph edge and is
     always centred - there is no way to offset it - so it gives the even
     outline. The offset comes from a hard-edged text-shadow with no blur,
     which is the comic/sticker treatment rather than a glow.

     Worth flagging against the Brand Kit's "no text-shadow on type" rule:
     that rule is about soft shadows propping up legibility on busy grounds.
     This is a zero-blur offset used as a drawn outline, and it was asked for
     directly. If it should go, this line is the one to delete. */
  -webkit-text-stroke: 3px #0E0E10;
  paint-order: stroke fill;   /* stroke renders underneath the fill so glyphs stay crisp */

  /* No coloured drop-shadow. It was a pink glow around the whole PNG, not
     just the type, so the bubble carried a magenta halo on every card -
     "take the pink hue shadow thing off". Replaced with a neutral one so the
     stamp still sits on the card rather than floating flat against it. */
  filter: drop-shadow(0 5px 12px rgba(0,0,0,.45));
  z-index: 4;
  pointer-events: none;
  transform: rotate(-6deg);   /* casual sticker tilt */
  transform-origin: 50% 35%;  /* anchor near the round head, not the drip tail */
  transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .25s ease;
}

/* Food cards force pink drip (overrides any per-page styling) */
.burger-card .price-stamp,
.sd-card .price-stamp,
.dessert-card .price-stamp,
.price-stamp.is-food {
  background-image: url('images/brand/price-drip-bubble.webp') !important;
  color: #fff !important;
}

/* Drink cards · dedicated blue drip PNG (exact Milky Lane cyan) */
.shake-card .price-stamp,
.item-card .price-stamp,
.beer-card .price-stamp,
.wine-card .price-stamp,
.price-stamp.is-drink {
  background-image: url('images/brand/price-drip-blue.webp') !important;
  background-color: transparent !important;
  color: #fff !important;
}

/* --- INLINE .price element (the text label inside the card body) --- */
.burger-card .price,
.sd-card .price,
.dessert-card .price,
.price.is-food {
  color: var(--ml-pink) !important;
}
.shake-card .price,
.item-card .price,
.beer-card .price,
.wine-card .price,
.price.is-drink {
  color: var(--ml-blue) !important;
}
.price-stamp .base, .price-stamp .boozy {
  display: inline-block;
}
.price-stamp .boozy { display: none; }
/* When a card is in boozy mode, swap stamp content + flip to gradient.
   .is-boozy can be on any ancestor (a single card, or the body for global toggle). */
/* Boozy mode · dedicated blue drip PNG + pulse + pink halo for the "upgrade" glow */
.is-boozy .price-stamp {
  background-image: url('images/brand/price-drip-blue.webp') !important;
  background-color: transparent !important;
  color: #fff !important;
  transform: rotate(-7deg) scale(1.08);
}
.is-boozy .price-stamp .base { display: none; }
.is-boozy .price-stamp .boozy { display: inline-block; }
/* Subtle hover wiggle on the parent card */
.burger-card:hover .price-stamp,
.sd-card:hover .price-stamp,
.shake-card:hover .price-stamp {
  transform: rotate(-4deg) scale(1.1) translateY(-2px);
}
@media (max-width: 640px) {
  .price-stamp {
    width: 76px; height: 84px;
    font-size: 24px; top: 8px; right: 6px;
    padding-bottom: 26px;
    -webkit-text-stroke-width: 1.2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .price-stamp { transition: none !important; }
}

/* Mocktail companion note for Famous + Dessert cocktails · sits BELOW the price stamp */
.item-card .mocktail-note {
  position: absolute;
  top: 128px; right: 14px;   /* price stamp is 106px tall + 10px top offset · clear below */
  font-family: var(--display);
  letter-spacing: .1em;
  font-size: 11px;
  text-transform: uppercase;
  background: rgba(0,0,0,.72);
  color: #fff;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  white-space: nowrap;
  backdrop-filter: blur(4px);
  z-index: 6;
  transform: rotate(-3deg);
}
@media (max-width: 640px) {
  .item-card .mocktail-note { top: 104px; right: 10px; font-size: 10px; padding: 4px 8px; }
}

/* Sticker stamps live in ml-polish.css. This file used to carry a second,
   independent copy of the whole component; menu pages load this one and the
   homepage loaded home.css, so the two drifted apart and a fix to either
   silently missed half the site. One copy now, in the stylesheet every page
   with a sticker already loads. */
.film-grain {
  position: fixed; inset: 0; pointer-events: none;
  z-index: 9000;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}
@media (prefers-reduced-motion: reduce) {
  /* Keep grain · it's static · but slightly fainter for sensitive users */
  .film-grain { opacity: 0.04; }
}

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .3s ease, backdrop-filter .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(5,5,5,0.85); backdrop-filter: blur(14px);
  border-bottom-color: var(--ml-border);
}
/* Compact mode kicks in deeper into the page */
.site-header.compact .header-inner { height: 64px; transition: height .3s ease; }
.site-header.compact .logo img { height: 44px; transition: height .3s ease; }
.site-header .header-inner { transition: height .3s ease; }
.site-header .logo img { transition: height .3s ease, filter .3s ease; }

/* Active section indicator on nav links (motion.js applies .active/.is-active) */
.nav-main a.is-active,
.mobile-menu a.is-active { color: var(--ml-pink); opacity: 1; }
.nav-main a.is-active::after { transform: scaleX(1); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 80px; max-width: var(--max); margin: 0 auto; padding: 0 24px;
}
.logo { display: flex; align-items: center; gap: 10px; }
.logo img { height: 56px; width: auto; filter: drop-shadow(0 4px 14px rgba(0,0,0,0.28)); }
.nav-main { display: flex; gap: 6px; }
.nav-main a {
  padding: 10px 14px; font-family: var(--display); font-size: 16px; letter-spacing: 1.4px;
  text-transform: uppercase; opacity: .9; transition: color .2s ease, opacity .2s ease;
  position: relative;
}
.nav-main a:hover, .nav-main a.active { color: var(--ml-pink); opacity: 1; }

/* "Build & Win" nav pill · cycles through the three brand colours
   (pink → yellow → blue) with a subtle heartbeat scale to grab the eye. */
.nav-main .nav-build-cta,
.mobile-menu .nav-build-cta {
  font-family: var(--display);
  text-transform: uppercase; letter-spacing: .12em;
  font-size: 11px; line-height: 1;
  padding: 7px 12px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 8px;
  background: #FF8CE0; color: var(--ml-ink, #0E0E10) !important; opacity: 1 !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.38);
  animation: navBuildCycle 6s ease-in-out infinite;
  will-change: background-color, color, transform, box-shadow;
}
@keyframes navBuildCycle {
  0%, 45% {
    background: #FF8CE0; color: var(--ml-ink, #0E0E10);
    box-shadow: 0 6px 22px rgba(0,0,0,0.45);
  }
  22% { transform: scale(1.06); }
  50%, 95% {
    background: #5BD0E6; color: #000;
    box-shadow: 0 6px 22px rgba(0,0,0,0.41);
  }
  72% { transform: scale(1.06); }
  100% {
    background: #FF8CE0; color: var(--ml-ink, #0E0E10);
    box-shadow: 0 6px 22px rgba(0,0,0,0.45);
  }
}
.nav-main .nav-build-cta:hover,
.mobile-menu .nav-build-cta:hover {
  /* Pause the cycle on hover and lock to a high-contrast state */
  animation-play-state: paused;
  transform: translateY(-2px) scale(1.06);
  filter: brightness(1.08);
}
.nav-main .nav-build-cta::after { display: none !important; }
.mobile-menu .nav-build-cta { margin: 8px 0 0 0; align-self: flex-start; }
@media (max-width: 880px) {
  .nav-main .nav-build-cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-main .nav-build-cta,
  .mobile-menu .nav-build-cta { animation: none; }
}
.nav-main a::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
  background: var(--ml-pink); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.nav-main a:hover::after, .nav-main a.active::after { transform: scaleX(1); }
/* Menu dropdown (Food / Drinks) */
.nav-dropdown { position: relative; }
.nav-dropdown__trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; background: none; border: 0; cursor: pointer;
  font-family: var(--display); font-size: 16px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--ml-white); opacity: .9;
  transition: color .2s ease, opacity .2s ease;
  position: relative;
}
.nav-dropdown__trigger:hover, .nav-dropdown__trigger.is-active { color: var(--ml-pink); opacity: 1; }
  /* Active state moves onto the More trigger when the current page is one
     of the five it now contains. */
  .nav-dropdown.is-current > .nav-dropdown__trigger { color: var(--ml-pink); opacity: 1; }
.nav-dropdown__trigger::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
  background: var(--ml-pink); transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.nav-dropdown__trigger:hover::after, .nav-dropdown__trigger.is-active::after { transform: scaleX(1); }
.nav-dropdown__caret { width: 10px; height: 7px; transition: transform .2s ease; flex-shrink: 0; }
.nav-dropdown:hover .nav-dropdown__caret,
.nav-dropdown__trigger[aria-expanded="true"] .nav-dropdown__caret { transform: rotate(180deg); }
.nav-dropdown__panel {
  position: absolute; top: 100%; left: 0; min-width: 200px;
  background: linear-gradient(180deg, #0E0E10 0%, #050505 100%);
  border: 1px solid var(--ml-border); border-radius: var(--radius);
  padding: 8px; margin-top: 6px;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  box-shadow: 0 18px 44px rgba(0,0,0,.6);
  z-index: 10;
}
.nav-dropdown:hover .nav-dropdown__panel,
.nav-dropdown:focus-within .nav-dropdown__panel,
.nav-dropdown.is-open .nav-dropdown__panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dropdown__panel a {
  display: block; padding: 10px 14px; border-radius: 8px;
  font-family: var(--display); font-size: 14px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--ml-white); text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.nav-dropdown__panel a:hover, .nav-dropdown__panel a.is-active {
  background: rgba(255,140,224,.12); color: var(--ml-pink);
}
.nav-dropdown__panel a::after { display: none; }

/* Mobile: keep Menu visible with Food/Drinks nested below it */
.mobile-menu .nav-dropdown { display: block; }
.mobile-menu .nav-dropdown__trigger {
  display: block; width: 100%; text-align: left;
  padding: 16px 8px; background: none; border: 0;
  font-family: var(--display); font-size: 26px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--ml-white);
  border-bottom: 1px solid var(--ml-border); cursor: default;
}
.mobile-menu .nav-dropdown__trigger::after { display: none; }
.mobile-menu .nav-dropdown__caret { display: none; }
.mobile-menu .nav-dropdown__panel {
  position: static; background: none; border: 0; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0;
  opacity: 1; visibility: visible; transform: none; box-shadow: none;
}
.mobile-menu .nav-dropdown__panel a {
  padding: 14px 24px; font-size: 22px;
  border-bottom: 1px solid var(--ml-border); border-radius: 0;
  color: rgba(255,255,255,.85);
}
.mobile-menu .nav-dropdown__panel a:hover, .mobile-menu .nav-dropdown__panel a.is-active {
  background: transparent; color: var(--ml-pink);
}

.header-ctas { display: flex; align-items: center; gap: 10px; }
.menu-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; padding: 0; background: rgba(255,255,255,0.06); border: 1px solid var(--ml-border); border-radius: 10px; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.menu-toggle:hover, .menu-toggle.open { background: rgba(255,140,224,0.12); border-color: var(--ml-pink); }
.menu-toggle span { width: 24px; height: 2px; background: var(--ml-white); transition: transform .25s ease, opacity .2s ease; }
.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu {
  position: fixed; inset: 80px 0 0 0; z-index: 95;
  background: var(--ml-black);
  padding: 24px 22px 40px; display: none; flex-direction: column; gap: 4px;
  border-top: 1px solid var(--ml-border);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  padding: 16px 8px; font-family: var(--display); font-size: 26px; letter-spacing: 1.5px;
  text-transform: uppercase; border-bottom: 1px solid var(--ml-border);
}
.mobile-menu .mobile-ctas { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }

/* ---------- Category hero · ONE component, every menu page ----------

   Every category page used to carry its own copy of these rules, and
   most of them pinned the photo to the right with

       url(...) right center / auto 110% no-repeat

   which is what produced the hard vertical seam down the middle of
   the burgers, shakes and sides heroes: the photograph stops, the
   flat ground starts, and the join is a dead straight line the eye
   reads as a mistake rather than a design. A cut-out on black made it
   worse again - a shake floating in space with no scene behind it.

   Full-bleed `cover` has no such edge. The photo IS the section.

   A page supplies three things and nothing else:

       --cathero-img      the photograph
       --cathero-pos      background-position, wide screens
       --cathero-pos-sm   background-position, narrow screens

   and sets a ladder of --cathero-img inside its own media queries so
   a phone is not made to download the 1400px master.

   Narrow viewports are the trap here. A wide box crops the photo on
   its HEIGHT, so position-y does the work; a phone-shaped box crops
   on WIDTH, so position-y does nothing at all and position-x carries
   the whole composition. That is why there are two position hooks
   rather than one - a single value that frames the food on desktop
   will happily slice it in half on a phone.                           */
.ml-cathero {
  position: relative;
  padding: 180px 0 100px;
  overflow: hidden;
  background-color: #050505;
  background-image: var(--cathero-img);
  background-position: var(--cathero-pos, 50% 50%);
  background-size: cover;
  background-repeat: no-repeat;
}
/* Left-weighted scrim. A flat overlay across the whole photo would
   mute the one thing we put there; this drops to near-black under the
   type on the left and lets the food keep its colour on the right.
   The second gradient seats the band top and bottom so it does not
   collide with the header or hard-edge into the section below. */
.ml-cathero::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(96deg, rgba(4,4,5,.94) 0%, rgba(4,4,5,.88) 26%,
                           rgba(4,4,5,.58) 52%, rgba(4,4,5,.18) 76%,
                           rgba(4,4,5,.34) 100%),
    linear-gradient(180deg, rgba(4,4,5,.46) 0%, transparent 32%,
                            transparent 60%, rgba(0,0,0,.66) 100%);
  pointer-events: none;
}
.ml-cathero > * { position: relative; z-index: 2; }
/* Centre-set heroes (build-your-burger) put type across the full width,
   so a left-weighted scrim would darken one half of the copy and leave
   the other half fighting the photo. Even vertical wash instead. */
.ml-cathero--center::after {
  background:
    linear-gradient(180deg, rgba(4,4,5,.72) 0%, rgba(4,4,5,.80) 45%,
                            rgba(4,4,5,.90) 100%);
}
@media (max-width: 900px) {
  /* Portrait crops on width, so the scrim has to go top-to-bottom -
     a left-weighted one would sit across the photo, not behind the
     type, once the copy runs full width. */
  .ml-cathero {
    padding: 150px 0 80px;
    background-position: var(--cathero-pos-sm, var(--cathero-pos, 50% 50%));
  }
  .ml-cathero::after {
    background:
      linear-gradient(180deg, rgba(4,4,5,.58) 0%, rgba(4,4,5,.82) 46%,
                              rgba(4,4,5,.94) 100%);
  }
}

/* ---------- Page hero (small banner used on each menu page) ---------- */
.page-hero {
  position: relative; padding: 160px 0 80px; overflow: hidden;
  background:
    radial-gradient(800px 400px at 20% 30%, rgba(255,140,224,0.22), transparent 60%),
    radial-gradient(700px 400px at 90% 70%, rgba(91,208,230,0.18), transparent 60%),
    linear-gradient(180deg, #050505 0%, #0E0E10 100%);
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero .crumb {
  font-family: var(--script); color: var(--ml-blue); font-size: 28px;
  margin-bottom: 6px; transform: rotate(-2deg); display: inline-block; font-weight: 400;
      }
.page-hero h1 {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(56px, 9vw, 140px); line-height: .9; letter-spacing: -1px;
}
.page-hero h1 .pink { color: var(--ml-pink); }
.page-hero h1 .stroke { color: var(--ml-white); }
.page-hero p.lead { font-size: 18px; color: var(--ml-text); max-width: 580px; margin-top: 18px; font-weight: 500; }
.page-hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- Section + grid ---------- */
.menu-block { padding: 80px 0; position: relative; }
.menu-block:nth-of-type(even) {
  background:
    linear-gradient(180deg, rgba(10,10,12,0.86) 0%, rgba(14,14,18,0.93) 100%),
    url('images/atmosphere/neon-brick.jpg') center/cover no-repeat;
}
.menu-block:nth-of-type(3n) {
  background:
    radial-gradient(900px 600px at 90% 0%, rgba(255,140,224,0.18), transparent 60%),
    radial-gradient(700px 500px at 10% 100%, rgba(91,208,230,0.14), transparent 60%),
    linear-gradient(180deg, rgba(10,10,12,0.82) 0%, rgba(14,14,18,0.92) 100%),
    url('images/atmosphere/neon-brick.jpg') center/cover no-repeat;
}
@media (max-width: 760px) {
  .menu-block:nth-of-type(even),
  .menu-block:nth-of-type(3n) { background-attachment: scroll; }
}

.block-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; }
.block-head h2 {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(38px, 5vw, 64px); line-height: .9; letter-spacing: -.5px;
}
.block-head h2 .pink { color: var(--ml-pink); }
.block-head h2 .blue { color: var(--ml-blue); }

/* ---------- Graffiti heading wordmark (PNG-as-heading) ----------
   Use on any <h2 class="heading-img">. The h2 contains an <img>
   plus a visually-hidden <span class="sr"> for screen readers + SEO.
   Works inside .block-head, .head, .cta-banner · wherever an h2 lives.
*/
h2.heading-img,
.heading-img {
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  margin: 0 0 18px !important;
  display: block;
  text-align: inherit;
}
.heading-img .sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.heading-img > img {
  display: inline-block;
  height: clamp(78px, 9vw, 150px);
  width: auto; max-width: 100%;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.55));
  transform: rotate(-1.5deg);
  -webkit-user-select: none; user-select: none;
}
.heading-img.tight > img { transform: rotate(-2deg) translateX(-4px); }
.heading-img.lg > img    { height: clamp(96px, 11vw, 180px); }
.heading-img.sm > img    { height: clamp(56px, 6vw, 96px); }

/* ============================================================
   Text-based replacement for former PNG heading images.
   Same rotated, drop-shadowed display voice · but real text.
   ============================================================ */
.section-heading {
  display: block;
  font-family: var(--display, 'Anton', Impact, sans-serif);
  text-transform: uppercase;
  font-size: clamp(48px, 8vw, 130px) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.5px !important;
  color: var(--ml-white, #fff);
  margin: 0 0 22px !important;
  transform: rotate(-1.5deg);
}
.section-heading.sm { font-size: clamp(32px, 5vw, 68px) !important; }
.section-heading.lg { font-size: clamp(60px, 10vw, 160px) !important; }
.section-heading.tight { transform: rotate(-2deg) translateX(-4px); }
.section-heading .pink { color: var(--ml-pink, #FF8CE0); }
.section-heading .blue { color: var(--ml-blue, #5BD0E6); }
/* Inline heading swap for single words inside sentences */
.heading-text-mark {
  display: inline-block;
  font-family: var(--display, 'Anton', Impact, sans-serif);
  text-transform: uppercase;
  font-size: clamp(20px, 2.6vw, 34px);
  line-height: 1;
  vertical-align: middle;
  letter-spacing: -0.3px;
  color: var(--ml-white, #fff);
  transform: rotate(-2deg);
}
.heading-text-mark--md { font-size: clamp(28px, 3.4vw, 44px); }
.heading-text-mark--lg { font-size: clamp(38px, 4.6vw, 60px); }
.heading-text-mark--xl { font-size: clamp(50px, 6.2vw, 82px); }
.heading-text-mark.pink, .heading-text-mark .pink { color: var(--ml-pink, #FF8CE0); }

/* Wing card text heading (replaces per-wing PNG tag) */
.wing-card .wing-heading {
  display: block;
  font-family: var(--display, 'Anton', Impact, sans-serif);
  text-transform: uppercase;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1;
  letter-spacing: 0;
  color: var(--ml-white, #fff);
  margin: 0 0 6px;
  transform: rotate(-1deg);
}

/* Inline mark · used as a swap for a single word inside a sentence/eyebrow */
.heading-mark {
  display: inline-block;
  height: 42px; width: auto;
  vertical-align: middle;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45));
}
.heading-mark--md { height: 56px; }
.heading-mark--lg { height: 80px; }
.heading-mark--xl { height: 110px; }

/* Row of inline marks (e.g. "Pints  or  Towers") */
.inline-marks-row {
  display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 4px;
}
.inline-marks-row .heading-mark { display: block; }
/* eyebrow-style inline mark (replaces text eyebrow) */
.eyebrow-mark {
  display: inline-block;
  margin-bottom: -6px;
  transform: rotate(-2deg);
}
.block-head .eyebrow {
  font-family: var(--script); color: var(--ml-pink); font-size: 32px; line-height: 1;
  display: block; transform: rotate(-2deg); margin-bottom: 4px; font-weight: 400;
      }
.block-head .right p { color: var(--ml-text); max-width: 420px; }

/* ---------- Item grid + cards ---------- */
.item-grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}
.item-card {
  background: linear-gradient(180deg, #1A1A1D 0%, #101012 100%);
  border: 1px solid var(--ml-border);
  border-radius: var(--radius-lg);
  padding: 24px 22px 26px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .35s cubic-bezier(.2,.7,.3,1.2), border-color .25s ease, box-shadow .35s ease, background .35s ease;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  will-change: transform;
}
/* Animated pink→blue glow ring drawn via mask trick */
.item-card::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--ml-pink), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 2;
}
/* Pink underglow that rises up on hover */
.item-card::after {
  content: '';
  position: absolute; left: 50%; top: 100%;
  width: 180%; height: 60%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center top, rgba(255,140,224,0.30), transparent 65%);
  opacity: 0;
  transition: opacity .35s ease, top .45s ease;
  pointer-events: none;
  z-index: -1;
}
.item-card:hover {
  transform: translateY(-10px) scale(1.018);
  border-color: transparent;
  box-shadow:
    0 30px 60px -16px rgba(0,0,0,0.41), 0 18px 42px -12px rgba(0,0,0,0.28), 0 0 0 1px rgba(255,140,224,.15);
  background: linear-gradient(180deg, #25151E 0%, #14141A 100%);
}
.item-card:hover::before { opacity: 1; }
.item-card:hover::after { opacity: 1; top: 80%; }
.item-card:active { transform: translateY(-6px) scale(1.01); transition-duration: .1s; }

.item-card .img-wrap {
  aspect-ratio: 1/1;
  background: transparent;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
  transition: background .35s ease;
}
/* Shine sweep across image on hover */
.item-card .img-wrap::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.20) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform .7s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
  z-index: 2;
}
.item-card:hover .img-wrap::before { transform: translateX(110%); }

.item-card .img-wrap img {
  width: 100%; height: 100%; object-fit: contain;
  /* Subtle shadow so the image still has weight, but tight enough not to read as a dark box */
  filter: drop-shadow(0 12px 18px rgba(0,0,0,0.32));
  transition: transform .45s cubic-bezier(.2,.8,.3,1.2), filter .35s ease;
}
.item-card:hover .img-wrap img {
  transform: scale(1.10) rotate(-3deg);
  /* Swap to a pink-toned shadow on hover so it blends with the pink glow instead of fighting it */
  filter: drop-shadow(0 14px 22px rgba(0,0,0,0.3));
}
.item-card h3 { transition: color .25s ease, transform .25s ease; }
.item-card:hover h3 { color: var(--ml-pink); transform: translateX(2px); }
.item-card:hover .price-stamp {
  transform: rotate(-6deg) scale(1.1) translateY(-2px);
  transition: transform .3s cubic-bezier(.2,.8,.3,1.4);
}
@media (prefers-reduced-motion: reduce) {
  .item-card, .item-card *, .item-card::before, .item-card::after { transition: none !important; }
  .item-card:hover { transform: none; }
}
.item-card h3 {
  font-family: var(--display); text-transform: uppercase;
  font-size: 26px; line-height: 1; letter-spacing: 0.5px;
}
.item-card p { color: var(--ml-text); font-size: 14px; flex: 1; font-weight: 500; }
.item-card .row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 8px; margin-top: auto;
}
.item-card .price {
  font-family: var(--display); font-size: 22px; color: var(--ml-yellow); letter-spacing: 1px;
}
.item-card .order {
  font-family: var(--display); text-transform: uppercase; letter-spacing: 1.5px; font-size: 13px;
  padding: 8px 14px; border-radius: 999px; background: var(--ml-pink); color: var(--ml-ink, #0E0E10);
}
.item-card .badge {
  position: absolute; top: 14px; right: 14px;
  font-family: var(--display); text-transform: uppercase; letter-spacing: 1px; font-size: 11px;
  background: var(--ml-blue); color: var(--ml-black);
  padding: 6px 10px; border-radius: 999px;
}
.item-card .badge.b-pink { background: var(--ml-pink); color: var(--ml-ink, #0E0E10); }
.item-card .badge.b-yellow { background: var(--ml-yellow); color: var(--ml-black); }

/* ---------- Card add-ons (tags, badges, notes) ---------- */
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-pill {
  font-family: var(--display); text-transform: uppercase; letter-spacing: 1px; font-size: 11px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.06); color: var(--ml-text-dim);
  border: 1px solid var(--ml-border);
}
.tag-pill.t-v { background: #1f8a3a; color: #fff; border-color: #1f8a3a; }
.tag-pill.t-gfo, .tag-pill.t-gf { background: var(--ml-blue); color: var(--ml-black); border-color: var(--ml-blue); }

.block-note {
  display: inline-block;
  font-family: var(--script); font-size: 24px;
  color: var(--ml-yellow);
  transform: rotate(-2deg);
  margin: -16px 0 24px; font-weight: 400;
      }

/* ---------- Beer / wine / bottle list tables ---------- */
.beer-table, .text-list {
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #1A1A1D 0%, #101012 100%);
  border: 1px solid var(--ml-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.beer-header {
  display: grid; grid-template-columns: 1fr 110px 110px;
  gap: 16px; padding: 12px 24px;
  background: rgba(255,255,255,0.04);
  font-family: var(--display); text-transform: uppercase; letter-spacing: 1.5px; font-size: 13px;
  color: var(--ml-text-dim);
  border-bottom: 1px solid var(--ml-border);
}
.beer-header span:nth-child(2),
.beer-header span:nth-child(3) { text-align: center; }
.beer-row {
  display: grid; grid-template-columns: 1fr 110px 110px;
  gap: 16px; padding: 18px 24px; align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background .2s ease;
}
.beer-row:last-child { border-bottom: 0; }
.beer-row:hover { background: rgba(255,140,224,0.06); }
.beer-row .beer-name h4 {
  font-family: var(--display); text-transform: uppercase;
  font-size: 22px; line-height: 1; letter-spacing: 0.5px; margin-bottom: 4px;
}
.beer-row .beer-name p { font-size: 13px; color: var(--ml-text); }
.beer-row .beer-price {
  text-align: center;
  font-family: var(--display); font-size: 22px; color: var(--ml-yellow);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.beer-row .beer-price small {
  font-family: var(--body); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ml-text-dim);
}

.text-row {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background .2s ease;
}
.text-row:last-child { border-bottom: 0; }
.text-row:hover { background: rgba(255,140,224,0.06); }
.text-row h4 {
  font-family: var(--display); text-transform: uppercase;
  font-size: 22px; line-height: 1; letter-spacing: 0.5px;
}
.text-row p { font-size: 13px; color: var(--ml-text); margin-top: 4px; }
.text-row .price {
  font-family: var(--display); font-size: 22px; color: var(--ml-yellow);
  white-space: nowrap;
}

/* ---------- Store-aware beer banner ---------- */
.store-beers-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; margin-bottom: 22px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,140,224,.10), rgba(255,140,224,.04));
  border: 1px solid rgba(255,140,224,.30);
  font-family: 'Inter', system-ui, sans-serif; font-size: 14px;
}
.store-beers-banner .ml-pin {
  display: inline-block; width: 9px; height: 9px;
  border-radius: 50%; background: var(--ml-pink);
  box-shadow: 0 0 0 4px rgba(255,140,224,.20);
  flex-shrink: 0;
}
.store-beers-banner__text { color: var(--ml-text); flex: 1; min-width: 220px; }
.store-beers-banner__text strong { color: var(--ml-white); font-weight: 700; }
.store-beers-banner__change {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .14em;
  font-size: 11px; color: var(--ml-blue); text-decoration: none;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(91,208,230,.4); white-space: nowrap;
}
.store-beers-banner__change:hover { background: var(--ml-blue); color: var(--ml-black); }
.text-list[data-ml-beers]:empty::before {
  content: attr(data-ml-empty-msg);
  display: block; padding: 22px 18px;
  font-family: 'Inter', sans-serif; font-size: 14px;
  color: var(--ml-text-dim); text-align: center;
  background: rgba(255,255,255,.02); border-radius: var(--radius);
  border: 1px dashed var(--ml-border);
}

/* ---------- Non-alcoholic groupings (Sodas / Red Bull) ---------- */
.non-alc-group { margin-top: 28px; }
.non-alc-group:first-of-type { margin-top: 0; }
.non-alc-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--ml-border);
  margin-bottom: 4px;
}
.non-alc-title {
  font-family: var(--display); text-transform: uppercase;
  font-size: 28px; letter-spacing: .04em; line-height: 1;
  color: var(--ml-white);
}
.non-alc-pricetag {
  font-family: var(--display); text-transform: uppercase;
  letter-spacing: .12em; font-size: 13px;
  color: var(--ml-black);
  background: var(--ml-blue);
  padding: 6px 12px; border-radius: 999px;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .non-alc-title { font-size: 22px; }
  .non-alc-pricetag { font-size: 11px; padding: 5px 10px; }
}

/* ---------- Soda Hero (Pepsi feature) ---------- */
.soda-hero {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  align-items: center;
  padding: 22px 28px;
  margin: 6px 0 22px;
  background: linear-gradient(135deg, #001a4d 0%, #0046b0 50%, #5BD0E6 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}
.soda-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(255,140,224,0.18), transparent 60%);
  pointer-events: none;
}
.soda-hero img {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.55));
  position: relative;
  z-index: 1;
}
.soda-hero-copy { position: relative; z-index: 1; }
.soda-hero-eyebrow {
  display: inline-block;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 12px;
  color: var(--ml-pink-bright);
  background: rgba(0,0,0,0.45);
  padding: 5px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.soda-hero-title {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 38px;
  line-height: 1;
  letter-spacing: .02em;
  color: #fff;
}
.soda-hero-title .amp {
  font-family: var(--display);
  text-transform: none;
  color: var(--ml-pink-bright);
  font-weight: 400;
  font-size: 0.85em;
  padding: 0 4px;
}
.soda-hero-copy p {
  margin-top: 8px;
  color: rgba(255,255,255,0.85);
  font-size: 14px;
}
@media (max-width: 640px) {
  .soda-hero {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 22px 18px;
    gap: 14px;
  }
  .soda-hero img { max-width: 160px; margin: 0 auto; }
  .soda-hero-title { font-size: 30px; }
}

/* ---------- Add-ons block ---------- */
.addons-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
}
.addons-list, .sauces-list {
  background: linear-gradient(180deg, #1A1A1D 0%, #101012 100%);
  border: 1px solid var(--ml-border);
  border-radius: var(--radius-lg);
  padding: 22px 26px 26px;
}
.addons-list h4, .sauces-list h4 {
  font-family: var(--display); text-transform: uppercase; letter-spacing: 1.5px;
  font-size: 16px; color: var(--ml-pink); margin-bottom: 16px;
}
.addon-row {
  display: flex; justify-content: space-between; padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 15px;
}
.addon-row:last-child { border-bottom: 0; }
.addon-row .price { color: var(--ml-yellow); font-family: var(--display); font-size: 18px; }
.sauce-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.sauce-pill {
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--ml-border); background: rgba(255,255,255,0.04);
  font-family: var(--display); letter-spacing: 1.5px; font-size: 13px; text-transform: uppercase;
}

/* ---------- Feature card (Cheat Platter) ---------- */
.feature-card {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: linear-gradient(135deg, #FF8CE0 0%, #C30A65 100%);
  border-radius: var(--radius-lg); overflow: hidden;
  position: relative;
}
.feature-card::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 28px, transparent 28px 56px);
  pointer-events: none;
}
.feature-img { aspect-ratio: 1/1; position: relative; overflow: hidden; }
.feature-img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.5));
}
.feature-body {
  padding: 40px 44px; display: flex; flex-direction: column; gap: 12px; justify-content: center;
  position: relative; z-index: 2;
}
.feature-tag {
  font-family: var(--script); color: var(--ml-yellow); font-size: 26px;
  transform: rotate(-2deg); display: inline-block; font-weight: 400;
      }
.feature-body h3 {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(46px, 5vw, 72px); line-height: .9; color: var(--ml-white);
}
.feature-body p { color: rgba(255,255,255,0.92); font-size: 16px; max-width: 440px; }
.feature-row {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 10px;
}
.feature-price {
  font-family: var(--display); font-size: 56px; line-height: 1; color: var(--ml-white);
  background: var(--ml-black); padding: 14px 22px; border-radius: 999px;
}

/* ---------- Footer note ---------- */
.page-footer-note {
  color: var(--ml-text-dim); font-size: 13px; line-height: 1.6;
  text-align: center; max-width: 820px; margin: 0 auto;
}

/* ---------- CTA banner ---------- */
.cta-banner {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--ml-pink) 0%, #C30A65 100%);
  text-align: center; position: relative; overflow: hidden;
}
.cta-banner::before {
  content: ''; position: absolute; inset: 0;
  background: url("images/brand/texture-graffiti.webp") center/420px repeat;
  mix-blend-mode: multiply;
  opacity: 0.32;
  pointer-events: none;
}
.cta-banner::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.18) 100%);
  pointer-events: none;
}
.cta-banner h2 {
  position: relative; font-family: var(--display); text-transform: uppercase;
  font-size: clamp(38px, 5.5vw, 72px); line-height: .9;
}
.cta-banner h2 .stroke { color: var(--ml-white); }
.cta-banner .ctas { position: relative; display: flex; gap: 12px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.site-footer {
  background: #030303; padding: 80px 0 32px; border-top: 1px solid var(--ml-border);
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 56px;
}
.footer-brand img { height: 64px; margin-bottom: 18px; }
.footer-brand p { color: var(--ml-text); font-size: 14px; max-width: 320px; }
.footer-col h4 {
  font-family: var(--display); text-transform: uppercase; letter-spacing: 1.5px; font-size: 16px;
  margin-bottom: 14px; color: var(--ml-pink);
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--ml-text-dim); font-size: 14px; transition: color .2s ease; }
.footer-col a:hover { color: var(--ml-white); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px; border-top: 1px solid var(--ml-border);
  color: var(--ml-text-dim); font-size: 13px; flex-wrap: wrap; gap: 14px;
}
.footer-socials { display: flex; gap: 10px; flex-wrap: wrap; }
.footer-socials a {
  height: 40px; border-radius: 999px;
  border: 1px solid var(--ml-border);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 0 14px;
  color: var(--ml-text-dim);
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.footer-socials a:hover {
  background: var(--ml-pink); border-color: var(--ml-pink);
  color: var(--ml-ink, #0E0E10); transform: translateY(-2px);
}
.footer-socials a:hover .count { color: var(--ml-ink); }
.footer-socials a .count {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  color: var(--ml-text-dim);
  transition: color .2s ease;
}
.footer-legal { display: flex; gap: 16px; }

/* ---------- Footer email signup ---------- */
.footer-signup {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center;
  padding: 28px 0; margin: 14px 0;
  border-top: 1px solid var(--ml-border);
  border-bottom: 1px solid var(--ml-border);
}
.footer-signup-copy h3 {
  font-family: var(--display); text-transform: uppercase;
  font-size: 30px; line-height: 1; margin-bottom: 6px;
}
.footer-signup-copy p {
  color: var(--ml-text); font-size: 14px; line-height: 1.55;
}
.footer-signup-form {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.footer-signup-form input[type="email"] {
  flex: 1 1 220px; min-width: 0;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--ml-border);
  color: #fff;
  padding: 13px 18px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif; font-size: 14px;
  outline: none;
  transition: border-color .2s ease;
}
.footer-signup-form input[type="email"]:focus { border-color: var(--ml-pink); }
.footer-signup-form button {
  background: var(--ml-pink); border: none; color: var(--ml-ink, #0E0E10);
  font-family: var(--display); letter-spacing: .04em;
  font-size: 18px;
  padding: 13px 26px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.footer-signup-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
@media (max-width: 720px) {
  .footer-signup { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .addons-grid { grid-template-columns: 1fr; }
  .feature-card { grid-template-columns: 1fr; }
  .feature-img { aspect-ratio: 16/9; }
  .feature-body { padding: 30px 32px 36px; }
}
@media (max-width: 720px) {
  .menu-block { padding: 60px 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .page-hero { padding: 130px 0 56px; }
  .page-hero h1 { font-size: clamp(48px, 13vw, 72px); }

  .beer-header, .beer-row { grid-template-columns: 1fr 80px 80px; gap: 8px; padding: 14px 16px; }
  .beer-row .beer-price { font-size: 18px; }
  .beer-row .beer-name h4 { font-size: 18px; }
  .text-row { padding: 14px 16px; }
  .text-row h4 { font-size: 18px; }

  .feature-body h3 { font-size: clamp(40px, 9vw, 56px); }
  .feature-price { font-size: 44px; padding: 10px 18px; }
}
@media (min-width: 961px) { .header-ctas .btn--mobile { display: none; } }

/* ============================================================
   MOBILE NAV REWORK · added for cleaner mobile experience
   ============================================================ */
/* Tablet · narrow CTAs, keep main nav */
@media (max-width: 1100px) {
  .header-ctas .btn--secondary,
  .header-ctas .btn--ghost { display: none; }
}
/* Switch to hamburger nav early enough for iPad portrait + tablets */
@media (max-width: 960px) {
  .nav-main { display: none; }
  .header-ctas .btn--secondary,
  .header-ctas .btn--primary { display: none; }
  .header-ctas .btn--mobile { display: inline-flex; padding: 10px 16px; font-size: 14px; }
  .menu-toggle { display: flex; }
  .header-inner { gap: 12px; padding: 0 16px; }
  .logo img { height: 48px; }
  .site-header.compact .logo img { height: 40px; }
}
@media (max-width: 480px) {
  .header-inner { height: 70px; padding: 0 14px; }
  .logo img { height: 42px; }
  .site-header.compact .header-inner { height: 58px; }
  .site-header.compact .logo img { height: 36px; }
  .header-ctas .btn--mobile { padding: 8px 12px; font-size: 13px; letter-spacing: 1px; }
  .menu-toggle { width: 42px; height: 42px; }
  .mobile-menu { inset: 70px 0 0 0; padding: 20px 18px 40px; }
  .mobile-menu a { font-size: 22px; padding: 14px 6px; letter-spacing: 1.2px; }
  .mobile-menu .nav-dropdown__trigger { font-size: 22px; padding: 14px 6px; }
  .mobile-menu .nav-dropdown__panel a { font-size: 18px; padding: 12px 20px; }
}

/* ============================================================
   TOUCH-DEVICE HOVER-ON-SCROLL
   When the device has no hover (phones / tablets), the JS marks
   <body class="is-touch"> and toggles .in-view on cards as they
   centre in the viewport. Mirror the :hover treatments to .in-view
   so the lift / scale / glow animations play during scroll.
   ============================================================ */
@media (hover: none) {
  /* Card lift + pink border + glow */
  body.is-touch .sd-card.in-view,
  body.is-touch .burger-card.in-view,
  body.is-touch .shake-card.in-view,
  body.is-touch .product-card.in-view,
  body.is-touch .item-card.in-view,
  body.is-touch .week-card.in-view,
  body.is-touch .may-card.in-view,
  body.is-touch .monthly-card.in-view,
  body.is-touch .tile.in-view,
  body.is-touch .insta-tile.in-view,
  body.is-touch .loc-card.in-view,
  body.is-touch .role-card.in-view,
  body.is-touch .follow-card.in-view,
  body.is-touch .platter-card.in-view,
  body.is-touch .feature-card.in-view,
  body.is-touch .has-hover-video.in-view {
    transform: translateY(-6px);
    border-color: var(--ml-pink);
    box-shadow: var(--shadow-pink);
  }

  /* Image zoom inside cards with .art / .img wrapper */
  body.is-touch .sd-card.in-view .art img,
  body.is-touch .burger-card.in-view .art img,
  body.is-touch .shake-card.in-view .art img,
  body.is-touch .product-card.in-view .art img,
  body.is-touch .item-card.in-view .art img,
  body.is-touch .may-card.in-view img,
  body.is-touch .monthly-card.in-view img,
  body.is-touch .tile.in-view img,
  body.is-touch .insta-tile.in-view img,
  body.is-touch .loc-card.in-view img {
    transform: scale(1.05);
  }

  /* Order arrow slide */
  body.is-touch .sd-card.in-view .order .arrow,
  body.is-touch .burger-card.in-view .order .arrow,
  body.is-touch .shake-card.in-view .order .arrow {
    transform: translateX(4px);
  }

  /* Wing flavour tiles · gentle scale */
  body.is-touch .wing-card.in-view {
    transform: translateY(-3px);
    border-color: var(--ml-pink);
  }

  /* Beer / text row hover background */
  body.is-touch .beer-row.in-view,
  body.is-touch .text-row.in-view {
    background: rgba(255,140,224,0.06);
  }

  /* Build promo art parallax-like lift */
  body.is-touch .build-promo__art.in-view {
    transform: translateY(-4px);
  }
}


/* ============================================================
   ML SPRAY ICON SET
   Line-art SVGs with a spray-paint filter (roughened edges +
   overspray halo) and real paint drips built into the geometry.
   viewBox is 24x28 · the extra 4 units are drip room.
   ============================================================ */
.ml-ico {
  width: 38px; height: 44px;          /* 24:28 ratio */
  display: block;
  overflow: visible;
  color: var(--ml-pink, #FF8CE0);
  /* Wet-paint glow · sits under the SVG filter's own overspray */
  filter: none;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), filter .3s ease, color .3s ease;
}
/* Alternate pink → blue across a row of cards */
.occasion-card:nth-child(even) .ml-ico,
.addon-card:nth-child(even) .ml-ico,
.gc-why-card:nth-child(even) .ml-ico,
.fr-pillar:nth-child(even) .ml-ico {
  color: var(--ml-blue, #5BD0E6);
  filter: none;
}
/* Hover · paint "runs" a touch further and the glow blooms */
.occasion-card:hover .ml-ico,
.addon-card:hover .ml-ico,
.gc-why-card:hover .ml-ico,
.fr-pillar:hover .ml-ico {
  transform: translateY(-2px) rotate(-3deg) scale(1.06);
  filter: drop-shadow(0 0 18px currentColor);
}
@media (max-width: 700px) {
  .ml-ico { width: 31px; height: 36px; }
}
/* Reduced motion · keep the look, drop the movement */
@media (prefers-reduced-motion: reduce) {
  .ml-ico { transition: none; }
  .occasion-card:hover .ml-ico,
  .addon-card:hover .ml-ico,
  .gc-why-card:hover .ml-ico,
  .fr-pillar:hover .ml-ico { transform: none; }
}
/* .atmo-band retired 26 Aug 2026 · those bands are ordinary .ml-divider
   elements now, so the whole site reveals the same way. The component was
   duplicated here and in the other stylesheet, on disjoint page sets -
   the third component in this codebase found in two places at once. */