/* ============================================================================
   TUANI'S DESIGN SYSTEM — CANONICAL REFERENCE
   This file is the single source of truth for every visual decision across
   the Tuanis website. Sub-pages must reference these tokens, not invent new
   ones. Last source: Figma file, May 12 2026 export.
   ============================================================================ */

:root {
  /* ── BRAND COLORS (named from Figma color styles) ────────────────────── */
  --color-black:        #101226;  /* the dark base used for the entire site bg */
  --color-white:        #FFFFFF;
  --color-turquoise:    #00A8E0;  /* "Turquoise" — the primary cyan, used for outlined cards */
  --color-light-tur:    #0DE3FF;  /* "Light Tur" — brighter cyan, used for text glows and accents */
  --color-prism:        #00A0C2;  /* logo color, a slightly muted cyan */
  --color-yellow:       #FFE364;  /* "Yellow" — bright glow yellow, hero "HERE" word */
  --color-golden:       #EAC10C;  /* "Golden" — deeper gold, gradient blob & specials */
  --color-dark-gold:    #FFA550;  /* "Dark Gold" — amber, VIP membership tint */
  --color-pink:         #EC217D;  /* "Pink" — neon hot pink, sports-bar / nightclub accent */
  --color-purple:       #5400C2;  /* "Purple" — deep brand purple, party section base */
  --color-purple-glow:  #A560FF;  /* lighter purple for text glows */
  --color-purple-edge:  #A967FF;  /* the exact stroke color on the giant RESERVE wordmark */
  --color-red:          #F12A15;  /* "Red" — the EVENTS button fill, danger/excitement */
  --color-red-soft:     #FFCFCA;  /* paler red used in inset glow */
  --color-red-glow:     #FF6151;  /* outer-glow red, lighter than the fill */
  --color-green:        #36FB67;  /* "Green" — bright neon green */
  --color-whatsapp:     #53FF7E;  /* "WhatsApp green" — the brand reservation color */
  --color-light-gray:   #C4C4C4;

  /* ── MASTHEAD SUBTITLE ACCENTS ──────────────────────────────────────────
     Warm-soft tints for the second-line subtitle text inside the page-title
     masthead (section 14). Each pairs with its variant's identity color so
     the subtitle reads as "cream" or "soft echo" of the masthead's glow. */
  --color-cream-warm:   #FFEFA6;  /* warm cream — food/restaurant variant */
  --color-cream-pink:   #FFD9E6;  /* soft blush — cocktails/bar variant */
  --color-cream-purple: #E0D4FF;  /* soft lavender — events/club variant */

  /* ── DERIVED / SEMANTIC ─────────────────────────────────────────────── */
  --bg:                 var(--color-black);
  --bg-card:            rgba(255,255,255,0.025);
  --bg-card-hover:      rgba(255,255,255,0.05);
  --border-subtle:      rgba(255,255,255,0.1);
  --border-strong:      rgba(255,255,255,0.22);
  --text-primary:       var(--color-white);
  --text-secondary:     rgba(255,255,255,0.7);
  --text-tertiary:      rgba(255,255,255,0.4);

  /* ── TYPOGRAPHY ─────────────────────────────────────────────────────── */
  --font-display:       'Inter', sans-serif;
  --font-body:          'Inter', sans-serif;
  --font-accent:        'Caveat Brush', cursive;  /* dish names + accent words (v5.34): ampersands in section heads, event-poster glow words, HOT/NEW badges, big single-word accents like HOURS / DAY / BIG. Never use for body copy. */

  /* type scale — sizes
     v5.42: added --fs-h4 and --fs-pill for full coverage.
     Each size token has a matching weight/line-height/letter-spacing companion
     token below so the full typography spec lives in :root, not in components. */
  --fs-hero-1:          clamp(48px, 6vw, 96px);     /* page H1 / masthead */
  --fs-hero-2:          clamp(40px, 5vw, 80px);     /* sub-hero / key area */
  --fs-display:         clamp(32px, 4vw, 64px);     /* large display element / countdown digits */
  --fs-h2:              clamp(28px, 3.2vw, 48px);   /* section block H2 */
  --fs-h3:              clamp(22px, 2.2vw, 32px);   /* H3 */
  --fs-h4:              clamp(16px, 1.6vw, 22px);   /* H4 / large sub-copy */
  --fs-pill:            clamp(14px, 1.4vw, 20px);   /* tier toggles, day pills, hour pills */
  --fs-body-lg:         clamp(16px, 1.2vw, 19px);   /* large body */
  --fs-body:            15px;                        /* body */
  --fs-small:           13px;                        /* small / sub-copy */
  --fs-caption:         11px;                        /* caption */

  /* type scale — weights (per size, locked) */
  --fw-hero-1:          900;
  --fw-hero-2:          800;
  --fw-display:         800;
  --fw-h2:              700;
  --fw-h3:              600;
  --fw-h4:              600;
  --fw-pill:            600;
  --fw-body-lg:         400;
  --fw-body:            400;
  --fw-small:           500;
  --fw-caption:         600;

  /* type scale — line-heights (per size, locked) */
  --lh-hero-1:          0.9;
  --lh-hero-2:          0.95;
  --lh-display:         1.0;
  --lh-h2:              1.1;
  --lh-h3:              1.2;
  --lh-h4:              1.3;
  --lh-pill:            1.2;
  --lh-body-lg:         1.4;
  --lh-body:            1.5;
  --lh-small:           1.4;
  --lh-caption:         1.2;

  /* type scale — letter-spacing (per size, locked) */
  --ls-hero-1:          -0.05em;
  --ls-hero-2:          -0.04em;
  --ls-display:         -0.04em;
  --ls-h2:              -0.03em;
  --ls-h3:              -0.02em;
  --ls-h4:              -0.02em;
  --ls-pill:            -0.04em;
  --ls-body-lg:         -0.01em;
  --ls-body:            0;
  --ls-small:           0;
  --ls-caption:         0.08em;

  /* ── SPACING ────────────────────────────────────────────────────────── */
  --space-xs:           4px;
  --space-sm:           8px;
  --space-md:           14px;
  --space-lg:           24px;
  --space-xl:           40px;
  --space-2xl:          72px;
  --space-3xl:          120px;

  /* ── RADIUS ─────────────────────────────────────────────────────────── */
  --radius-sm:          12px;
  --radius-md:          20px;
  --radius-lg:          32px;
  --radius-pill:        100px;
  --radius-organic:     clamp(192px, 14vw, 366px);

  /* ── EFFECTS ────────────────────────────────────────────────────────── */
  --shadow-card:        0 4px 24px rgba(0,0,0,0.25);

  /* glow recipes — used by buttons, text-glow utilities, cards */
  --glow-cyan:          0 0 32px var(--color-light-tur), 0 0 48px rgba(13,227,255,0.4);
  --glow-pink:          0 0 32px var(--color-pink), 0 0 48px rgba(236,33,125,0.4);
  --glow-purple:        0 0 32px var(--color-purple-glow), 0 0 48px rgba(165,96,255,0.4);
  --glow-red:           0 0 44.83px rgba(255,97,81,0.5), 0 0 49.74px var(--color-red), inset 0 0 8.59px var(--color-red-soft);
  --glow-green:         0 0 32px var(--color-green), 0 0 48px rgba(54,251,103,0.4);
  --glow-yellow:        0 0 32px var(--color-yellow), 0 0 48px rgba(255,227,100,0.35);

  /* ── MOTION ─────────────────────────────────────────────────────────── */
  --ease-out:           cubic-bezier(.4, 0, .2, 1);
  --ease-bounce:        cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast:           .2s;
  --dur-base:           .35s;
  --dur-slow:           .6s;
}

/* ── RESET ───────────────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.5;
  font-size: var(--fs-body);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ============================================================================
   LAYOUT — design-system page only (not for production)
   ============================================================================ */
.ds-wrap { max-width: 1280px; margin: 0 auto; padding: var(--space-2xl) var(--space-lg); }
.ds-title {
  font-size: var(--fs-display);
  font-weight: 900;
  letter-spacing: -0.04em;
  margin-bottom: var(--space-sm);
}
.ds-subtitle { color: var(--text-secondary); font-size: var(--fs-body-lg); margin-bottom: var(--space-2xl); max-width: 680px; }
.ds-section { margin-bottom: var(--space-3xl); }
.ds-section-title {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: var(--space-md);
}
.ds-section-desc { color: var(--text-secondary); margin: var(--space-md) 0 var(--space-xl); max-width: 720px; font-size: var(--fs-body-lg); }
.ds-block {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
}
.ds-block-title { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--space-md); }
.ds-block-desc { color: var(--text-secondary); margin-bottom: var(--space-lg); font-size: var(--fs-small); line-height: 1.6; }
.ds-row { display: flex; gap: var(--space-lg); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-lg); }
.ds-grid { display: grid; gap: var(--space-md); }
.ds-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ds-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ds-grid--6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 780px) {
  .ds-grid--3, .ds-grid--4, .ds-grid--6 { grid-template-columns: repeat(2, 1fr); }
}
.ds-code {
  font-family: ui-monospace, 'SF Mono', Monaco, monospace;
  font-size: 12px;
  color: var(--text-tertiary);
  background: rgba(0,0,0,0.4);
  padding: 4px 8px;
  border-radius: 4px;
}
.ds-label { font-size: var(--fs-caption); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.ds-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(16,18,38,0.85); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-md) var(--space-lg);
}
.ds-nav-inner { max-width: 1280px; margin: 0 auto; display: flex; gap: var(--space-lg); align-items: center; flex-wrap: wrap; }
.ds-nav-brand { font-weight: 900; letter-spacing: -0.04em; margin-right: auto; display: inline-flex; align-items: center; }
.ds-nav a { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary); font-weight: 600; }
.ds-nav a:hover { color: var(--color-light-tur); }
.ds-wrap { padding-top: calc(var(--space-2xl) + 60px); }


/* ============================================================================
   COLOR TOKENS
   ============================================================================ */
.swatch {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--space-md);
  font-size: 11px;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}
.swatch-name { text-transform: uppercase; letter-spacing: 0.06em; }
.swatch-hex { font-family: ui-monospace, Monaco, monospace; opacity: 0.85; }
.swatch.is-dark { color: var(--color-white); }
.swatch.is-light { color: var(--color-black); }


/* ============================================================================
   TYPOGRAPHY DEMO
   ============================================================================ */
.type-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-lg);
  align-items: baseline;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.type-row:last-child { border-bottom: 0; }
.type-meta { color: var(--text-tertiary); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.08em; }

/* ════════════════════════════════════════════════════════════════════════════
   CANONICAL TEXT UTILITY CLASSES (v5.42)
   One class per token. Bundles size + weight + line-height + letter-spacing.
   Components apply ONE class and inherit the locked typography spec for that
   level. Override individual properties only when the design genuinely needs
   to break from spec (rare).
   ════════════════════════════════════════════════════════════════════════════ */
.text-hero-1   { font-size: var(--fs-hero-1);   font-weight: var(--fw-hero-1);   line-height: var(--lh-hero-1);   letter-spacing: var(--ls-hero-1);   }
.text-hero-2   { font-size: var(--fs-hero-2);   font-weight: var(--fw-hero-2);   line-height: var(--lh-hero-2);   letter-spacing: var(--ls-hero-2);   }
.text-display  { font-size: var(--fs-display);  font-weight: var(--fw-display);  line-height: var(--lh-display);  letter-spacing: var(--ls-display);  }
.text-h2       { font-size: var(--fs-h2);       font-weight: var(--fw-h2);       line-height: var(--lh-h2);       letter-spacing: var(--ls-h2);       }
.text-h3       { font-size: var(--fs-h3);       font-weight: var(--fw-h3);       line-height: var(--lh-h3);       letter-spacing: var(--ls-h3);       }
.text-h4       { font-size: var(--fs-h4);       font-weight: var(--fw-h4);       line-height: var(--lh-h4);       letter-spacing: var(--ls-h4);       }
.text-pill     { font-size: var(--fs-pill);     font-weight: var(--fw-pill);     line-height: var(--lh-pill);     letter-spacing: var(--ls-pill);     }
.text-body-lg  { font-size: var(--fs-body-lg);  font-weight: var(--fw-body-lg);  line-height: var(--lh-body-lg);  letter-spacing: var(--ls-body-lg);  }
.text-body     { font-size: var(--fs-body);     font-weight: var(--fw-body);     line-height: var(--lh-body);     letter-spacing: var(--ls-body);     }
.text-small    { font-size: var(--fs-small);    font-weight: var(--fw-small);    line-height: var(--lh-small);    letter-spacing: var(--ls-small);    }
.text-caption  { font-size: var(--fs-caption);  font-weight: var(--fw-caption);  line-height: var(--lh-caption);  letter-spacing: var(--ls-caption);  text-transform: uppercase; }

/* .is-accent — swaps font-family to Caveat Brush (the script accent).
   Works on any element using a .text-* utility class. Caveat Brush has its
   own visual character at every size; we accept it as-is without adjusting
   weight or letter-spacing per heading level. Used for Neon Signage stacks,
   Daypart hero backdrops, and any decorative script accent. */
.is-accent { font-family: var(--font-accent); font-weight: 400; }

/* Type-sample classes — used in Section 02 (Typography) to display each token.
   These are now thin aliases over the canonical utility classes above so the
   docs Section 02 always shows the live spec. */
.type-sample-hero1   { font-size: var(--fs-hero-1);   font-weight: var(--fw-hero-1);   letter-spacing: var(--ls-hero-1);   line-height: var(--lh-hero-1);   }
.type-sample-hero2   { font-size: var(--fs-hero-2);   font-weight: var(--fw-hero-2);   letter-spacing: var(--ls-hero-2);   line-height: var(--lh-hero-2);   }
.type-sample-display { font-size: var(--fs-display);  font-weight: var(--fw-display);  letter-spacing: var(--ls-display);  line-height: var(--lh-display);  }
.type-sample-h2      { font-size: var(--fs-h2);       font-weight: var(--fw-h2);       letter-spacing: var(--ls-h2);       line-height: var(--lh-h2);       }
.type-sample-h3      { font-size: var(--fs-h3);       font-weight: var(--fw-h3);       letter-spacing: var(--ls-h3);       line-height: var(--lh-h3);       }
.type-sample-h4      { font-size: var(--fs-h4);       font-weight: var(--fw-h4);       letter-spacing: var(--ls-h4);       line-height: var(--lh-h4);       }
.type-sample-pill    { font-size: var(--fs-pill);     font-weight: var(--fw-pill);     letter-spacing: var(--ls-pill);     line-height: var(--lh-pill);     }
.type-sample-body-lg { font-size: var(--fs-body-lg);  font-weight: var(--fw-body-lg);  letter-spacing: var(--ls-body-lg);  line-height: var(--lh-body-lg);  }
.type-sample-body    { font-size: var(--fs-body);     font-weight: var(--fw-body);     letter-spacing: var(--ls-body);     line-height: var(--lh-body);     }
.type-sample-small   { font-size: var(--fs-small);    font-weight: var(--fw-small);    letter-spacing: var(--ls-small);    line-height: var(--lh-small);    }
.type-sample-caption { font-size: var(--fs-caption);  font-weight: var(--fw-caption);  letter-spacing: var(--ls-caption);  line-height: var(--lh-caption);  text-transform: uppercase; }
.type-sample-accent  { font-family: var(--font-accent); font-size: clamp(40px, 5vw, 80px); line-height: 0.9; letter-spacing: -0.02em; }


/* ============================================================================
   PILL BUTTON SYSTEM
   The universal button language across Tuanis. Resting state is outlined
   in the brand color; hover state fills with the same color, adds inset
   glow (paler tint), outer glow (the color itself), and expands ~5%.
   Direct port from Figma button-component specs.
   ============================================================================ */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  background: var(--color-black);
  border: 3px solid currentColor;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
  position: relative;
  white-space: nowrap;
}
.btn-pill:hover { transform: scale(1.04); }

/* color variants — each fills with its color on hover, glows accordingly.
   border-color on hover MUST match the new background, otherwise the resting
   `border: 3px solid currentColor` keeps showing a contrasting ring around
   the filled button (e.g. yellow fill + black text = visible black ring;
   pink fill + white text = visible white ring). */
.btn-pill.is-cyan { color: var(--color-turquoise); }
.btn-pill.is-cyan:hover {
  background: var(--color-turquoise); color: var(--color-white);
  border-color: var(--color-turquoise);
  box-shadow: 0 0 44.83px rgba(0,168,224,0.5), 0 0 49.74px var(--color-turquoise), inset 0 0 8.59px rgba(255,255,255,0.6);
}
.btn-pill.is-purple { color: var(--color-purple-glow); }
.btn-pill.is-purple:hover {
  background: var(--color-purple); color: var(--color-white);
  border-color: var(--color-purple);
  box-shadow: 0 0 44.83px rgba(165,96,255,0.5), 0 0 49.74px var(--color-purple-glow), inset 0 0 8.59px rgba(255,255,255,0.6);
}
.btn-pill.is-yellow { color: var(--color-yellow); }
.btn-pill.is-yellow:hover {
  background: var(--color-yellow); color: var(--color-black);
  border-color: var(--color-yellow);
  box-shadow: 0 0 44.83px rgba(255,227,100,0.5), 0 0 49.74px var(--color-yellow), inset 0 0 8.59px rgba(255,255,255,0.6);
}
.btn-pill.is-red { color: var(--color-red); }
.btn-pill.is-red:hover {
  background: var(--color-red); color: var(--color-white);
  border-color: var(--color-red);
  box-shadow: var(--glow-red);
}
.btn-pill.is-pink { color: var(--color-pink); }
.btn-pill.is-pink:hover {
  background: var(--color-pink); color: var(--color-white);
  border-color: var(--color-pink);
  box-shadow: 0 0 44.83px rgba(236,33,125,0.5), 0 0 49.74px var(--color-pink), inset 0 0 8.59px rgba(255,255,255,0.6);
}
.btn-pill.is-green { color: var(--color-green); }
.btn-pill.is-green:hover {
  background: var(--color-green); color: var(--color-black);
  border-color: var(--color-green);
  box-shadow: 0 0 44.83px rgba(54,251,103,0.5), 0 0 49.74px var(--color-green), inset 0 0 8.59px rgba(255,255,255,0.6);
}
/* .is-gold (v5.38) — deeper golden (#EAC10C) vs .is-yellow's brighter glow yellow (#FFE364).
   Used for the §06 Bottle Service CTA where Figma specifies the deeper golden border. */
.btn-pill.is-gold { color: var(--color-golden); }
.btn-pill.is-gold:hover {
  background: var(--color-golden); color: var(--color-black);
  border-color: var(--color-golden);
  box-shadow: 0 0 44.83px rgba(234,193,12,0.5), 0 0 49.74px var(--color-golden), inset 0 0 8.59px rgba(255,255,255,0.6);
}
/* .is-gold-outline (v5.38) — white text + golden border + golden arrow icon.
   Distinct from .is-gold (which has golden text). Used in §06 Bottle Service
   "Book Bottle Service" CTA per Figma spec. */
.btn-pill.is-gold-outline { color: var(--color-white); border-color: var(--color-golden); }
.btn-pill.is-gold-outline svg { color: var(--color-golden); }
.btn-pill.is-gold-outline:hover {
  background: var(--color-golden); color: var(--color-black);
  border-color: var(--color-golden);
  box-shadow: 0 0 44.83px rgba(234,193,12,0.5), 0 0 49.74px var(--color-golden), inset 0 0 8.59px rgba(255,255,255,0.6);
}
.btn-pill.is-gold-outline:hover svg { color: var(--color-black); }

/* primary CTA — always filled green with WhatsApp icon, no resting outline */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  padding: 18px 40px;
  background: var(--color-whatsapp);
  color: var(--color-black);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  box-shadow: 0 0 24px rgba(83,255,126,0.35), 0 0 48px rgba(83,255,126,0.15);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.btn-primary:hover {
  transform: scale(1.03);
  box-shadow: 0 0 32px rgba(83,255,126,0.6), 0 0 64px rgba(83,255,126,0.3);
}
.btn-primary svg { width: 22px; height: 22px; fill: currentColor; }

/* secondary text-link with arrow — for "See full menu →" type interactions */
.btn-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-yellow);                /* default — kept for backward compat */
  transition: gap var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn-arrow:hover { gap: 14px; color: var(--color-white); }
.btn-arrow svg { width: 12px; height: 12px; stroke: currentColor; }
/* v5.46: canonical 7-color modifiers — one per brand color.
   Used instead of inline style="color: ...". */
.btn-arrow.is-yellow { color: var(--color-yellow); }
.btn-arrow.is-gold   { color: var(--color-golden); }
.btn-arrow.is-pink   { color: var(--color-pink); }
.btn-arrow.is-purple { color: var(--color-purple-glow); }
.btn-arrow.is-cyan   { color: var(--color-light-tur); }
.btn-arrow.is-green  { color: var(--color-green); }
.btn-arrow.is-red    { color: var(--color-red-glow); }


/* ============================================================================
   TEXT EFFECTS — Glow Word + Ghost Wordmark + Neon Signage
   ────────────────────────────────────────────────────────────────────────────
   v5.43: legacy .text-glow and .text-ghost component classes REMOVED.
   Both effects now use the canonical heading-accent span family:
     • Glow Word  → <span class="is-{color}"> inside any h1-h4
     • Ghost      → <span class="is-{color} is-ghost"> inside any tag
   See "GLOW WORD + GHOST WORDMARK SPAN FAMILY" section further below.

   .text-neon-stack (Section 04 panel D) is genuinely different — it's a
   stacked layered composition (script accent BEHIND solid main word),
   not the same effect. Kept as a separate component below.
   ============================================================================ */


/* ════════════════════════════════════════════════════════════════════════════
   GLOW WORD + GHOST WORDMARK SPAN FAMILY (v5.42 — canonical)

   Two text effects, color-classed, weight/letter-spacing-inheriting.
   Wrap any word in any heading (h1–h4) with <span class="is-{color}"> to get
   the Glow Word treatment, or <span class="is-{color} is-ghost"> for the
   Ghost Wordmark. The span inherits font-size, font-weight, and
   letter-spacing from its parent — only color, fill, stroke, and glow change.

   GLOW WORD (default · scoped to headings):
     - Solid colored text + luminous halo (24px outer + 10px inner)
     - Hover intensifies: 36px outer + 64px far-bloom
     - Scoped to h1–h4 descendants so .is-{color} on buttons/lists doesn't
       accidentally fire the effect

   GHOST WORDMARK (.is-ghost · works anywhere):
     - Transparent-ish dark fill rgba(16,18,38,0.59) + colored outline + glow
     - Stroke width scales linearly: font-size × 0.025 (≈ 1.1px @ 44px, 2.1px @ 84px)
     - Recipe matches sec 04 .text-ghost exactly (Figma-locked)
     - Hover intensifies same as sec 04: 10px inner + 32px middle + 64px far-bloom
     - Works on any tag — including standalone decorative wordmarks behind CTAs

   Cross-browser: -webkit-text-stroke is supported in Chromium/WebKit/Gecko.
   In rare unsupported browsers, ghost falls back to transparent-fill colored
   text — visually degraded but functional.

   Author note: .is-white inside a heading is a NO-GLOW escape hatch that
   forces white text without the effect.
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── GLOW WORD (default · scoped to headings) ────────────────────────────── */

h1 > span.is-yellow, h2 > span.is-yellow, h3 > span.is-yellow, h4 > span.is-yellow,
h1 > span.is-gold,   h2 > span.is-gold,   h3 > span.is-gold,   h4 > span.is-gold,
h1 > span.is-pink,   h2 > span.is-pink,   h3 > span.is-pink,   h4 > span.is-pink,
h1 > span.is-purple, h2 > span.is-purple, h3 > span.is-purple, h4 > span.is-purple,
h1 > span.is-cyan,   h2 > span.is-cyan,   h3 > span.is-cyan,   h4 > span.is-cyan,
h1 > span.is-green,  h2 > span.is-green,  h3 > span.is-green,  h4 > span.is-green,
h1 > span.is-red,    h2 > span.is-red,    h3 > span.is-red,    h4 > span.is-red {
  display: inline-block;
  transition: color var(--dur-base) var(--ease-out),
              text-shadow var(--dur-base) var(--ease-out);
}

h1 > span.is-yellow, h2 > span.is-yellow, h3 > span.is-yellow, h4 > span.is-yellow {
  color: var(--color-yellow);
  text-shadow: 0 0 24px var(--color-yellow), 0 -1px 10px var(--color-yellow);
}
h1 > span.is-yellow:hover, h2 > span.is-yellow:hover, h3 > span.is-yellow:hover, h4 > span.is-yellow:hover {
  text-shadow: 0 0 36px var(--color-yellow), 0 0 64px rgba(255,227,100,0.6), 0 -1px 10px var(--color-yellow);
}

h1 > span.is-gold, h2 > span.is-gold, h3 > span.is-gold, h4 > span.is-gold {
  color: var(--color-golden);
  text-shadow: 0 0 24px var(--color-golden), 0 -1px 10px var(--color-golden);
}
h1 > span.is-gold:hover, h2 > span.is-gold:hover, h3 > span.is-gold:hover, h4 > span.is-gold:hover {
  text-shadow: 0 0 36px var(--color-golden), 0 0 64px rgba(234,193,12,0.6), 0 -1px 10px var(--color-golden);
}

h1 > span.is-pink, h2 > span.is-pink, h3 > span.is-pink, h4 > span.is-pink {
  color: var(--color-pink);
  text-shadow: 0 0 24px var(--color-pink), 0 -1px 10px var(--color-pink);
}
h1 > span.is-pink:hover, h2 > span.is-pink:hover, h3 > span.is-pink:hover, h4 > span.is-pink:hover {
  text-shadow: 0 0 36px var(--color-pink), 0 0 64px rgba(236,33,125,0.6), 0 -1px 10px var(--color-pink);
}

h1 > span.is-purple, h2 > span.is-purple, h3 > span.is-purple, h4 > span.is-purple {
  color: var(--color-purple-glow);
  text-shadow: 0 0 24px var(--color-purple-glow), 0 -1px 10px var(--color-purple-glow);
}
h1 > span.is-purple:hover, h2 > span.is-purple:hover, h3 > span.is-purple:hover, h4 > span.is-purple:hover {
  text-shadow: 0 0 36px var(--color-purple-glow), 0 0 64px rgba(165,96,255,0.6), 0 -1px 10px var(--color-purple-glow);
}

h1 > span.is-cyan, h2 > span.is-cyan, h3 > span.is-cyan, h4 > span.is-cyan {
  color: var(--color-light-tur);
  text-shadow: 0 0 24px var(--color-light-tur), 0 -1px 10px var(--color-light-tur);
}
h1 > span.is-cyan:hover, h2 > span.is-cyan:hover, h3 > span.is-cyan:hover, h4 > span.is-cyan:hover {
  text-shadow: 0 0 36px var(--color-light-tur), 0 0 64px rgba(13,227,255,0.6), 0 -1px 10px var(--color-light-tur);
}

h1 > span.is-green, h2 > span.is-green, h3 > span.is-green, h4 > span.is-green {
  color: var(--color-green);
  text-shadow: 0 0 24px var(--color-green), 0 -1px 10px var(--color-green);
}
h1 > span.is-green:hover, h2 > span.is-green:hover, h3 > span.is-green:hover, h4 > span.is-green:hover {
  text-shadow: 0 0 36px var(--color-green), 0 0 64px rgba(54,251,103,0.6), 0 -1px 10px var(--color-green);
}

h1 > span.is-red, h2 > span.is-red, h3 > span.is-red, h4 > span.is-red {
  color: var(--color-red-glow);
  text-shadow: 0 0 24px var(--color-red-glow), 0 -1px 10px var(--color-red-glow);
}
h1 > span.is-red:hover, h2 > span.is-red:hover, h3 > span.is-red:hover, h4 > span.is-red:hover {
  text-shadow: 0 0 36px var(--color-red-glow), 0 0 64px rgba(255,97,81,0.6), 0 -1px 10px var(--color-red-glow);
}

/* .is-white inside a heading → no-glow escape hatch */
h1 > span.is-white, h2 > span.is-white, h3 > span.is-white, h4 > span.is-white {
  color: var(--color-white);
  text-shadow: none;
}

/* ─── GHOST WORDMARK (.is-ghost · works on any tag) ───────────────────────── */

.is-ghost {
  display: inline-block;
  color: rgba(16,18,38,0.59);
  transition: text-shadow var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}

/* Stroke width scales with font-size automatically via em units (0.025em).
   At 44px H2 = 1.1px, at 84px H1 = 2.1px, at 22px H4 = 0.55px.
   Works in any context — heading, utility class, or inline-styled element. */
.is-ghost { -webkit-text-stroke-width: 0.025em; }

/* Per-color ghost recipes (stroke color + glow + dark fill). The dark fill
   is set here (not just on the base .is-ghost) so the combined selector wins
   the specificity battle vs the Glow Word selectors (h2 > span.is-yellow etc).
   Resting glow is the exact Figma-locked recipe from sec 04 .text-ghost. Hover intensifies. */
.is-ghost.is-yellow { color: rgba(16,18,38,0.59); -webkit-text-stroke-color: var(--color-yellow); text-shadow: 0 -0.012em 0.08em rgba(255,227,100,0.7), 0 0 0.26em var(--color-yellow); }
.is-ghost.is-yellow:hover { text-shadow: 0 -0.012em 0.125em rgba(255,227,100,0.9), 0 0 0.4em var(--color-yellow), 0 0 0.8em rgba(255,227,100,0.5); }

.is-ghost.is-gold { color: rgba(16,18,38,0.59); -webkit-text-stroke-color: var(--color-golden); text-shadow: 0 -0.012em 0.08em rgba(234,193,12,0.7), 0 0 0.26em var(--color-golden); }
.is-ghost.is-gold:hover { text-shadow: 0 -0.012em 0.125em rgba(234,193,12,0.9), 0 0 0.4em var(--color-golden), 0 0 0.8em rgba(234,193,12,0.5); }

.is-ghost.is-pink { color: rgba(16,18,38,0.59); -webkit-text-stroke-color: var(--color-pink); text-shadow: 0 -0.012em 0.08em rgba(236,33,125,0.7), 0 0 0.26em var(--color-pink); }
.is-ghost.is-pink:hover { text-shadow: 0 -0.012em 0.125em rgba(236,33,125,0.9), 0 0 0.4em var(--color-pink), 0 0 0.8em rgba(236,33,125,0.5); }

.is-ghost.is-purple { color: rgba(16,18,38,0.59); -webkit-text-stroke-color: var(--color-purple-glow); text-shadow: 0 -0.012em 0.08em rgba(165,96,255,0.7), 0 0 0.26em var(--color-purple-glow); }
.is-ghost.is-purple:hover { text-shadow: 0 -0.012em 0.125em rgba(165,96,255,0.9), 0 0 0.4em var(--color-purple-glow), 0 0 0.8em rgba(165,96,255,0.5); }

.is-ghost.is-cyan { color: rgba(16,18,38,0.59); -webkit-text-stroke-color: var(--color-light-tur); text-shadow: 0 -0.012em 0.08em rgba(13,227,255,0.7), 0 0 0.26em var(--color-light-tur); }
.is-ghost.is-cyan:hover { text-shadow: 0 -0.012em 0.125em rgba(13,227,255,0.9), 0 0 0.4em var(--color-light-tur), 0 0 0.8em rgba(13,227,255,0.5); }

.is-ghost.is-green { color: rgba(16,18,38,0.59); -webkit-text-stroke-color: var(--color-green); text-shadow: 0 -0.012em 0.08em rgba(54,251,103,0.7), 0 0 0.26em var(--color-green); }
.is-ghost.is-green:hover { text-shadow: 0 -0.012em 0.125em rgba(54,251,103,0.9), 0 0 0.4em var(--color-green), 0 0 0.8em rgba(54,251,103,0.5); }

.is-ghost.is-red { color: rgba(16,18,38,0.59); -webkit-text-stroke-color: var(--color-red-glow); text-shadow: 0 -0.012em 0.08em rgba(255,97,81,0.7), 0 0 0.26em var(--color-red-glow); }
.is-ghost.is-red:hover { text-shadow: 0 -0.012em 0.125em rgba(255,97,81,0.9), 0 0 0.4em var(--color-red-glow), 0 0 0.8em rgba(255,97,81,0.5); }

/* (C) NEON SIGNAGE — the "RESTAURANT EAT" / "BAR DRINK" / "NIGHTCLUB PARTY"
   double-stacked treatment. The accent word (Caveat Brush, neon glow) sits
   BEHIND as the dominant backdrop scripture, the white main word sits in
   FRONT and reads cleanly. Accent is uppercase and ~1.6× the main word
   size to function as a backdrop. */
/* ─── NEON SIGNAGE STACK ─────────────────────────────────────────────────────
   Layered composition: script Caveat Brush "accent" backdrop word + solid Inter
   "main" foreground word. v5.44: this component is now PURELY layout/positioning.
   Typography comes from .text-hero-1 utility class applied to BOTH words in markup,
   and the script accent uses .is-accent (Caveat Brush) + .is-ghost (outline effect)
   wrapped in a color span. The accent visually reads larger because we apply
   font-size: 1.875em ON THE SCRIPT WRAPPER ONLY — a structural ratio, not a token.

   v5.46: hover behavior fixed. Hovering anywhere on the .text-neon-stack now
   fires the canonical Ghost intensify (10px + 32px + 64px far-bloom). The
   backdrop ghost stroke is scoped thinner (0.012em vs 0.025em canonical) so
   the script reads as decorative backdrop rather than standalone wordmark.
   ──────────────────────────────────────────────────────────────────────────── */
.text-neon-stack {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.4em;
  padding: 0.2em 0;
}
.text-neon-stack .neon-main {
  /* Apply .text-hero-1 utility on the markup. This rule carries layout + glow only. */
  color: var(--color-white);
  text-transform: uppercase;
  position: relative;
  z-index: 2;
  /* a subtle dark glow behind the white to lift it off the neon backdrop */
  text-shadow: 0 2px 18px rgba(0,0,0,0.55), 0 0 24px rgba(0,0,0,0.35);
}
.text-neon-stack .neon-accent {
  /* Apply .text-hero-1 .is-accent + <span class="is-{color} is-ghost"> in markup.
     The 1.875 multiplier is a structural ratio so the backdrop reads larger. */
  font-size: 1.875em;
  text-transform: uppercase;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  white-space: nowrap;
}
/* Thinner stroke ratio for backdrop ghost (script accent). The canonical
   0.025em is for standalone Ghost wordmarks — when used as a layered backdrop
   behind a foreground word, the stroke needs to read lighter so it doesn't
   compete with the foreground. Single scoped rule, propagates everywhere
   .text-neon-stack is used. */
.text-neon-stack .neon-accent .is-ghost {
  -webkit-text-stroke-width: 0.012em;
}
/* Parent-hover trigger for the canonical Ghost intensify.
   When user hovers anywhere on the .text-neon-stack, the inner ghost span
   fires its :hover state. Mirrors the canonical .is-ghost.is-{color}:hover
   recipes from the heading-span system. */
.text-neon-stack:hover .neon-accent .is-yellow.is-ghost { text-shadow: 0 -0.012em 0.125em rgba(255,227,100,0.9), 0 0 0.4em var(--color-yellow), 0 0 0.8em rgba(255,227,100,0.5); }
.text-neon-stack:hover .neon-accent .is-gold.is-ghost   { text-shadow: 0 -0.012em 0.125em rgba(234,193,12,0.9), 0 0 0.4em var(--color-golden), 0 0 0.8em rgba(234,193,12,0.5); }
.text-neon-stack:hover .neon-accent .is-pink.is-ghost   { text-shadow: 0 -0.012em 0.125em rgba(236,33,125,0.9), 0 0 0.4em var(--color-pink), 0 0 0.8em rgba(236,33,125,0.5); }
.text-neon-stack:hover .neon-accent .is-purple.is-ghost { text-shadow: 0 -0.012em 0.125em rgba(165,96,255,0.9), 0 0 0.4em var(--color-purple-glow), 0 0 0.8em rgba(165,96,255,0.5); }
.text-neon-stack:hover .neon-accent .is-cyan.is-ghost   { text-shadow: 0 -0.012em 0.125em rgba(13,227,255,0.9), 0 0 0.4em var(--color-light-tur), 0 0 0.8em rgba(13,227,255,0.5); }
.text-neon-stack:hover .neon-accent .is-green.is-ghost  { text-shadow: 0 -0.012em 0.125em rgba(54,251,103,0.9), 0 0 0.4em var(--color-green), 0 0 0.8em rgba(54,251,103,0.5); }
.text-neon-stack:hover .neon-accent .is-red.is-ghost    { text-shadow: 0 -0.012em 0.125em rgba(255,97,81,0.9), 0 0 0.4em var(--color-red-glow), 0 0 0.8em rgba(255,97,81,0.5); }


/* ============================================================================
   ANIMATED BACKGROUND — party / footer / hero
   Composition (matches Figma bg.svg layer order):
     L1: deep purple/dark base color
     L2: two organic colored blobs (gold + cyan/pink) with Gaussian blur
         The blobs animate position with 10% drift, 4s loop, ease-in-out alternate
     L3: vertical pinstripe overlay — 7-8 dark-to-white linear gradient bars
         spaced across the width at 15% opacity with a 5px CSS blur
   ============================================================================ */
/* ============================================================================
   ANIMATED BACKGROUND SYSTEM
   The brand's signature visual: a deep colored base + two soft glowing
   color blobs + a vertical pinstripe overlay made of 55px-wide glass
   columns. This recipe appears across the site — hero, party, footer,
   reviews, events — only the base color and blob hues change per section.

   Construction (3 layers, bottom to top):
     L1: solid base color on the parent element
     L2: ::before — two large blurred radial-gradient blobs that drift
         positionally ~10% over a 4-5s loop. Sized larger than container
         (inset:-25%) so motion is actually visible inside the clip mask.
     L3: ::after — the pinstripe utility (independent class .bg-pinstripe
         can also be applied directly to any element).

   The pinstripe is the brand's signature. It's a real component, not
   a CSS afterthought, because we use it in 6+ places site-wide.
   ============================================================================ */
.bg-party,
.bg-footer,
.bg-hero,
.bg-section {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  isolation: isolate;
}

/* L1 base colors */
.bg-party  { background: #2D0A37; }              /* deep purple — events section */
.bg-footer { background: #0A1432; }              /* deep navy — site footer */
.bg-hero   { background: var(--color-black); }   /* brand base — hero */
.bg-section{ background: var(--color-black); }   /* default for any section */

/* L2 — colored blobs that visibly drift.
   KEY FIX: inset is NEGATIVE so the element is LARGER than its container.
   When we translate it, the visible portion shifts within the parent's
   overflow:hidden clip, producing visible motion. With inset:0 the previous
   version's drift was invisible because the element was exactly its parent's
   size and translate moved it equally on all sides. */
.bg-party::before,
.bg-footer::before,
.bg-hero::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
}
.bg-party::before {
  background:
    radial-gradient(ellipse 40% 50% at 15% 18%, var(--color-golden) 0%, rgba(234,193,12,0.55) 30%, transparent 62%),
    radial-gradient(ellipse 35% 50% at 88% 88%, var(--color-prism) 0%, rgba(0,160,194,0.55) 30%, transparent 62%);
  filter: blur(80px);
  animation: bg-drift-party 6s ease-in-out infinite alternate;
}
.bg-footer::before {
  background:
    radial-gradient(ellipse 32% 65% at 15% 50%, var(--color-light-tur) 0%, rgba(13,227,255,0.5) 35%, transparent 70%),
    radial-gradient(ellipse 32% 65% at 85% 50%, var(--color-golden) 0%, rgba(234,193,12,0.5) 35%, transparent 70%);
  filter: blur(60px);
  animation: bg-drift-footer 5s ease-in-out infinite alternate;
}
.bg-hero::before {
  background:
    radial-gradient(ellipse 45% 40% at 30% 70%, var(--color-light-tur) 0%, rgba(0,160,194,0.5) 30%, transparent 60%),
    radial-gradient(ellipse 38% 35% at 78% 28%, var(--color-pink) 0%, rgba(236,33,125,0.5) 30%, transparent 60%),
    radial-gradient(ellipse 55% 55% at 50% 100%, var(--color-purple) 0%, rgba(84,0,194,0.4) 40%, transparent 70%);
  filter: blur(60px);
  animation: bg-drift-hero 7s ease-in-out infinite alternate;
}

/* ── PINSTRIPE UTILITY — shared design primitive ────────────────────────
   v3.7 — extracted from the Figma source SVG (Glass.svg / pinstripe-bg.svg)
   and verified against the rendered Glass.png reference.

   Ground truth from the source files:
   - Each bar is 55px wide, with a linear gradient:
       stop 0: white, opacity 0
       stop 0.7: #282828, opacity 0.6
       stop 1: white, opacity 0
     (dark band slightly left of center, faded white edges)
   - The whole bar carries fill-opacity:0.2 at SVG level
   - Bars repeat with a 30px stride (desktop) — meaning each 55px bar OVERLAPS the
     next by 30px. The overlap is what creates the continuous soft wavy
     texture rather than discrete columns.
   - Figma uses backdrop-blur:180px on each bar; CSS substitute is a small
     filter-blur on the layer, which produces the same look at far lower
     cost.

   CSS implementation: SVG data-URI tile that contains the exact gradient
   from pinstripe-bg.svg, repeated horizontally at 30px stride (desktop default).
   ──────────────────────────────────────────────────────────────────── */
.bg-pinstripe,
.bg-party::after,
.bg-footer::after,
.bg-hero::after,
.bg-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* SVG data-URI: one 55px-wide bar with the exact Figma gradient.
     Gradient stops match pinstripe-bg.svg verbatim: white(0%) → #282828(70%) → white(100%)
     with fill-opacity 0.2 baked in. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='55' height='100' viewBox='0 0 55 100' preserveAspectRatio='none'><defs><linearGradient id='g' x1='66' y1='50' x2='-13' y2='50' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%23ffffff' stop-opacity='0'/><stop offset='0.7' stop-color='%23282828' stop-opacity='0.6'/><stop offset='1' stop-color='%23ffffff' stop-opacity='0'/></linearGradient></defs><rect width='55' height='100' fill='url(%23g)' fill-opacity='0.2'/></svg>");
  background-size: 30px 100%;  /* 30px stride — heavy overlap creates the wavy soft texture */
  background-repeat: repeat-x;
  background-position: 0 0;
  opacity: 1;
}

/* Pinstripe utility class (sits inside any positioned parent) */
.bg-pinstripe { position: absolute; inset: 0; }
.bg-pinstripe.is-soft { opacity: 0.6; }

/* ──────────────────────────────────────────────────────────────────────
   RESPONSIVE PINSTRIPE STRIDE (locked spec — exactly 3 strides total)
   ──────────────────────────────────────────────────────────────────────
   Desktop (≥1024px): 30px stride  (locked spec)
   Tablet  (≤1023px): 38px stride  (medium density)
   Mobile  (≤780px):  44px stride  (chunky / 8 stripes on a ~360px container)

   No width modifiers (.is-dense / .is-wide / .is-sharp removed). Pinstripe
   density is determined ONLY by viewport. One canonical answer per viewport
   for stronger system consistency. */

/* Tablet override */
@media (max-width: 1023px) {
  .bg-pinstripe,
  .bg-party::after,
  .bg-footer::after,
  .bg-hero::after,
  .bg-section::after {
    background-size: 38px 100%;
  }
}

/* Mobile override (overrides tablet at narrower widths) */
@media (max-width: 780px) {
  .bg-pinstripe,
  .bg-party::after,
  .bg-footer::after,
  .bg-hero::after,
  .bg-section::after {
    background-size: 44px 100%;
  }
}

/* drift keyframes — translate larger-than-container element by ~5-10% */
@keyframes bg-drift-party {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(3%, -2%) scale(1.05); }
  100% { transform: translate(-4%, 4%) scale(1.02); }
}
@keyframes bg-drift-footer {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(4%, 1%); }
  100% { transform: translate(-3%, -1%); }
}
@keyframes bg-drift-hero {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-3%, 2%) scale(1.04); }
  100% { transform: translate(4%, -3%) scale(1.02); }
}

/* respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bg-party::before, .bg-footer::before, .bg-hero::before { animation: none; }
}

/* content layer sits on top */
.bg-content { position: relative; z-index: 3; padding: var(--space-2xl) var(--space-xl); }


/* ============================================================================
   CARDS — daypart strip, audience funnel, specials block
   ============================================================================ */
.card-daypart {
  /* v5.46: refactored to match canonical card pattern (rounded square,
     photo background via --card-img, pinstripe overlay, canonical typography).
     v5.47: aspect ratio reduced from 4/5 portrait to 5/4 landscape — daypart
     cards are compact navigation/summary tiles, not large hero cards. */
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(20px, 2vw, 32px);
  gap: 6px;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out);
}
.card-daypart::before {
  /* Photo layer (set via --card-img on the element) */
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--card-img, none);
  background-size: cover;
  background-position: center;
  background-color: #1a1d3d;
  z-index: 0;
  transition: transform var(--dur-slow) var(--ease-out);
}
.card-daypart::after {
  /* Dark overlay for legibility + pinstripe pattern over photo */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(16,18,38,0) 30%, rgba(16,18,38,0.55) 65%, rgba(16,18,38,0.9) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='55' height='100' viewBox='0 0 55 100' preserveAspectRatio='none'><defs><linearGradient id='g' x1='66' y1='50' x2='-13' y2='50' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%23ffffff' stop-opacity='0'/><stop offset='0.7' stop-color='%23282828' stop-opacity='0.6'/><stop offset='1' stop-color='%23ffffff' stop-opacity='0'/></linearGradient></defs><rect width='55' height='100' fill='url(%23g)' fill-opacity='0.2'/></svg>");
  background-size: cover, 30px 100%;
  background-repeat: no-repeat, repeat-x;
}
.card-daypart > * { position: relative; z-index: 2; }
.card-daypart:hover { transform: translateY(-4px); }
.card-daypart:hover::before { transform: scale(1.04); }
/* Brand-color accent on time label per daypart */
.card-daypart.is-restaurant .card-time { color: var(--color-yellow); }
.card-daypart.is-sports     .card-time { color: var(--color-pink); }
.card-daypart.is-party      .card-time { color: var(--color-purple-glow); }
/* v5.46: typography stripped — apply canonical .text-caption / .text-h3 / .text-small in markup */
.card-time { color: var(--color-white); }
.card-name { color: var(--color-white); text-transform: uppercase; }
.card-desc { color: var(--color-white); opacity: 0.85; margin-top: 4px; }


/* ============================================================================
   FULL-WIDTH DAYPART SECTIONS (Matches Figma mobile/desktop)
   Used on the homepage to introduce Restaurant / Sports Bar / Nightclub
   ============================================================================ */
.daypart-hero {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-black);
  cursor: pointer;
}
.daypart-hero__photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(0.55);
  transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-slow);
}
.daypart-hero:hover .daypart-hero__photo {
  transform: scale(1.04);
  filter: brightness(0.7);
}
.daypart-hero__inner {
  position: relative; z-index: 2;
  text-align: center; padding: var(--space-xl);
}
.daypart-hero__time {
  display: block;
  font-size: var(--fs-caption); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: var(--space-md);
}
.daypart-hero.is-restaurant .daypart-hero__time { color: var(--color-yellow); }
.daypart-hero.is-sports     .daypart-hero__time { color: var(--color-pink); }
.daypart-hero.is-party      .daypart-hero__time { color: var(--color-purple-glow); }


/* ============================================================================
   AUDIENCE FUNNEL CARDS (¿Vienes con un grupo?)
   ============================================================================ */
.card-aud {
  /* v5.47: refactored to match canonical card pattern (rounded square,
     photo background via --card-img, pinstripe overlay, canonical typography).
     Matches .card-daypart and other canonical card components. */
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(20px, 2vw, 32px);
  gap: var(--space-sm);
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out);
}
.card-aud::before {
  /* Photo layer (set via --card-img on the element) */
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--card-img, none);
  background-size: cover;
  background-position: center;
  background-color: #1a1d3d;
  z-index: 0;
  transition: transform var(--dur-slow) var(--ease-out);
}
.card-aud::after {
  /* Dark overlay for legibility + pinstripe pattern over photo */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(16,18,38,0) 30%, rgba(16,18,38,0.55) 65%, rgba(16,18,38,0.9) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='55' height='100' viewBox='0 0 55 100' preserveAspectRatio='none'><defs><linearGradient id='g' x1='66' y1='50' x2='-13' y2='50' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%23ffffff' stop-opacity='0'/><stop offset='0.7' stop-color='%23282828' stop-opacity='0.6'/><stop offset='1' stop-color='%23ffffff' stop-opacity='0'/></linearGradient></defs><rect width='55' height='100' fill='url(%23g)' fill-opacity='0.2'/></svg>");
  background-size: cover, 30px 100%;
  background-repeat: no-repeat, repeat-x;
}
.card-aud > * { position: relative; z-index: 2; }
.card-aud:hover { transform: translateY(-4px); }
.card-aud:hover::before { transform: scale(1.04); }

/* Brand-color icon background per audience type */
.card-aud__icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
}
.card-aud.is-tour    .card-aud__icon { background: rgba(255,165,80,0.85); color: var(--color-white); }
.card-aud.is-private .card-aud__icon { background: rgba(165,96,255,0.85); color: var(--color-white); }
.card-aud.is-hotel   .card-aud__icon { background: rgba(13,227,255,0.85); color: var(--color-black); }
.card-aud__icon svg { width: 24px; height: 24px; }

/* v5.47: typography stripped — apply canonical .text-h3 / .text-small / .text-caption in markup */
.card-aud__title { color: var(--color-white); text-transform: uppercase; margin: 0; }
.card-aud__text { color: var(--color-white); opacity: 0.85; margin: 0; }
.card-aud__link {
  display: inline-flex; align-items: center; gap: 6px;
  text-transform: uppercase;
  transition: gap var(--dur-fast);
}
.card-aud:hover .card-aud__link { gap: 12px; }
.card-aud.is-tour    .card-aud__link { color: var(--color-dark-gold); }
.card-aud.is-private .card-aud__link { color: var(--color-purple-glow); }
.card-aud.is-hotel   .card-aud__link { color: var(--color-light-tur); }


/* ============================================================================
   HERO PROOF STRIP & LIVE INDICATOR
   ============================================================================ */
.hero-proof {
  display: inline-flex; align-items: center; gap: var(--space-md);
  flex-wrap: wrap; font-size: 14px;
  color: var(--color-white); opacity: 0.92;
  letter-spacing: -0.02em;
}
.hero-proof__stars { display: inline-flex; gap: 3px; }
.hero-proof__stars i {
  display: block; width: 14px; height: 14px;
  background: var(--color-golden);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.hero-proof b { color: var(--color-yellow); font-weight: 700; }
.hero-proof__sep { width: 1px; height: 14px; background: rgba(255,255,255,0.25); }

.live-indicator {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-whatsapp);
}
.live-indicator i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-green);
  box-shadow: 0 0 10px var(--color-green);
  animation: live-pulse 2s var(--ease-out) infinite;
}
.live-indicator.is-closed { color: var(--color-dark-gold); }
.live-indicator.is-closed i { background: var(--color-dark-gold); box-shadow: 0 0 10px var(--color-dark-gold); }
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}


/* ============================================================================
   STICKY MOBILE CTA
   ============================================================================ */
.sticky-cta {
  display: flex;
  position: relative;
  width: 100%;
  background: rgba(16,18,38,0.95);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 8px 8px 8px 20px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.sticky-cta__info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sticky-cta__hours {
  font-size: var(--fs-caption); font-weight: 600;
  color: var(--color-whatsapp); letter-spacing: 0.06em;
  text-transform: uppercase; line-height: 1;
}
.sticky-cta__hours.is-closed { color: var(--color-dark-gold); }
.sticky-cta__name {
  font-size: 13px; font-weight: 600;
  color: var(--color-white); letter-spacing: -0.02em; margin-top: 2px;
}
.sticky-cta__btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 44px; padding: 0 18px;
  font-size: 13px; font-weight: 700;
  letter-spacing: -0.02em; text-transform: uppercase;
  border-radius: var(--radius-pill);
  background: var(--color-whatsapp); color: var(--color-black);
  box-shadow: 0 0 18px rgba(83,255,126,0.45);
}
.sticky-cta__btn svg { width: 14px; height: 14px; fill: currentColor; }


/* ============================================================================
   HERO BRAND MARK — the canonical Tuani's audio-wave logo.

   ── ARCHITECTURE ─────────────────────────────────────────────────────────
   Two stacked layers, each its own <symbol> embedded verbatim from the
   Figma SVG export:

     • #i-hero-bars-bottom — rainbow glow halo
       viewBox 0 0 2124 1330
       13 bars × 2 fills each (rainbow gradient + center vignette mask)
       group opacity 0.78
       horizontal gradient: yellow → cyan → pink-purple → red → deep purple

     • #i-hero-bars-top — cyan body
       viewBox 0 0 1984 1187
       13 bars, single fill each
       group opacity 0.82
       vertical gradient: dark teal (top) → bright cyan (bottom)

   Both symbols are rendered inside a parent SVG with viewBox 0 0 2124 1330
   (the larger of the two) using:

     <svg viewBox="0 0 2124 1330" preserveAspectRatio="xMidYMax meet"
          class="brand-mark-svg is-layer-bottom">
       <use href="#i-hero-bars-bottom" x="-35" width="2124" height="1330"/>
     </svg>
     <svg viewBox="0 0 2124 1330" preserveAspectRatio="xMidYMax meet"
          class="brand-mark-svg is-layer-top">
       <use href="#i-hero-bars-top" x="0" y="71.5" width="1984" height="1187"/>
     </svg>

   ── CRITICAL: explicit width/height on every <use> ──────────────────────
   The width/height attributes on <use> are MANDATORY. Without them, each
   symbol stretches to fill its parent SVG's full coordinate space,
   distorting bar proportions and destroying the layer alignment. Always
   set width/height to the symbol's native viewBox dimensions.

   ── LAYER OFFSET (rainbow shadow positioning) ──────────────────────────
   The source SVGs are pre-aligned so each bottom-layer bar sits 70 source
   units to the RIGHT of its corresponding top-layer bar. Shifting the
   bottom layer by x="-35" reduces that offset to 35 units — the colored
   rim hugs the right edge of each cyan bar without sticking out too far.

   ── BLUR (tuned for demo container, override for full-scale hero) ──────
   The Figma source has feGaussianBlur filters inside the SVGs (15 on top,
   50 on bottom), sized for the 2560px hero canvas. At smaller demo sizes
   those values become disproportionately heavy. We REMOVED the in-SVG
   filters and apply CSS blur tuned to the demo container size instead.
   For a production-scale hero, add .is-full-scale to bring blur back to
   the original Figma values.

   ── MOBILE behavior ────────────────────────────────────────────────────
   On <780px viewports the top (cyan body) layer is hidden via
   [data-mobile-hide], leaving only the rainbow halo bottom-anchored with
   `slice` scaling so it bleeds up from the bottom edge into the content
   area above. Matches the production mobile reference.
   ============================================================================ */
.brand-mark-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* Reserve 60px at the bottom of the container so the peak bar's rounded
     pill end isn't clipped at the container edge. */
  height: calc(100% - 60px);
  pointer-events: none;
}

/* Locked-in blur values for the demo container size (~520-640px tall),
   verified via headless render against the production reference. */
.brand-mark-svg.is-layer-bottom { filter: blur(1.5px); }
.brand-mark-svg.is-layer-top    { filter: blur(0.5px); }

/* Full-scale hero override: when the brand mark renders at the full Figma
   canvas size (~2560px wide), restore the original feGaussianBlur values.
   Add this modifier to both <svg> wrappers in production hero markup. */
.brand-mark-svg.is-layer-bottom.is-full-scale { filter: blur(50px); }
.brand-mark-svg.is-layer-top.is-full-scale    { filter: blur(15px); }

/* Subtle ambient pulse on the mark — applied to the wrapping <svg> so it
   moves both layers together. Uses scale, which respects the SVG's existing
   filters and gradients. */
.brand-mark-svg.is-pulsing  { animation: brand-mark-pulse 4s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.brand-mark-svg.is-pulsing-b{ animation: brand-mark-pulse-b 5s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes brand-mark-pulse   { 0% { transform: scale(1);    } 100% { transform: scale(1.015); } }
@keyframes brand-mark-pulse-b { 0% { transform: scale(1.01); } 100% { transform: scale(0.99);  } }
@media (prefers-reduced-motion: reduce) {
  .brand-mark-svg.is-pulsing,
  .brand-mark-svg.is-pulsing-b { animation: none; }
}

/* MOBILE: hide the top (cyan body) layer entirely, keep only the rainbow
   glow halo. The inline script (#brand-mark-mobile) also swaps
   preserveAspectRatio on [data-mobile-anchor="bottom"] elements so the halo
   anchors to the bottom edge and slices the top portion off-screen. */
@media (max-width: 780px) {
  .brand-mark-svg[data-mobile-hide] {
    display: none;
  }
}

/* ============================================================================
   HERO VIDEO PANEL — the looping video/image on the right side of the hero.
   Per Figma: position 1259×1400 at left=1301 in a 2560×1400 canvas. That
   translates to: right-anchored, ~49.2% of hero width, full hero height,
   with the top-left corner rounded at 360px (other 3 corners square).
   Hidden on mobile — the mobile hero is a single column with no side panel.
   ============================================================================ */
.hero-video-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 49.2%;                /* 1259 / 2560 from Figma */
  /* Figma source: border-top-left-radius: 360px; border-bottom-right-radius: 360px;
     The two diagonal corners curve, the other two stay square — gives the
     panel that asymmetric "media tile" shape visible in the hero. Radius
     scales responsively to container height: at the full Figma 1400px hero
     it lands at exactly 360px; at smaller heroes it shrinks proportionally,
     capped at 360px. */
  border-top-left-radius: min(360px, 25.7%);
  border-bottom-right-radius: min(360px, 25.7%);
  overflow: hidden;
  z-index: 3;                  /* above the brand mark layers, below the content */
  pointer-events: none;        /* doesn't intercept clicks on hero buttons */
}

.hero-video-panel video,
.hero-video-panel img,
.hero-video-panel .panel-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Demo placeholder when no real video is loaded — uses a colored gradient so
   the panel is visible in the design system without needing the asset. */
.hero-video-panel.is-placeholder .panel-bg {
  background:
    radial-gradient(ellipse 60% 50% at 30% 40%, rgba(236,33,125,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 70% 60%, rgba(84,0,194,0.4)  0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 50% 80%, rgba(13,227,255,0.25) 0%, transparent 55%),
    linear-gradient(180deg, #1A0B2E 0%, #0A0413 100%);
}
.hero-video-panel.is-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* subtle scanline-ish texture to suggest "video" without an actual video */
    repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0 2px, transparent 2px 4px);
}

/* MOBILE FRAME MODIFIER — when previewing the mobile hero composition,
   the video panel sits at the TOP of the hero instead of the right side.
   Full-bleed across the width, no rounded corners (the phone bezel is
   already rounded). Used inside the design system's mobile preview phone
   frame; in production this would be triggered by a media query on the
   hero container.
   v5.52: harmonized with .masthead__hero mobile — aspect-ratio 13/10
   instead of percentage height, so the simulator and the real mobile
   render look identical. */
.hero-video-panel.is-mobile {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  bottom: auto;
  width: 100%;
  aspect-ratio: 13/10;
  height: auto;
  border-radius: 0;
}
/* v5.52: gradient at bottom of simulator video panel — matches the
   canonical mobile pattern (.hero-video-panel mobile ::after and
   .masthead__hero mobile ::after all use this same curve). */
.hero-video-panel.is-mobile::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(16,18,38,0.4) 40%,
    rgba(16,18,38,0.85) 75%,
    var(--bg) 100%);
  pointer-events: none;
  z-index: 1;
}

/* HIDE on mobile — the DESKTOP-style side panel hides. The .is-mobile
   modifier (used in the mobile preview, top-anchored) stays visible. */
/* v5.48: on mobile the video panel does NOT hide via [data-mobile-hide] —
   it anchors at the top of the hero card with content stacking below.
   Matches Sec 05 Mobile preview canonical pattern. Sections that need the
   video to actually hide on mobile use .is-mobile-hide modifier instead.
   v5.52: harmonized with .masthead__hero mobile — same aspect-ratio 13/10,
   same heavier gradient curve, full-bleed, no rounded corners, flex item
   order:1 so the content stacks naturally below. */
@media (max-width: 780px) {
  .hero-video-panel:not(.is-mobile):not(.is-mobile-hide) {
    position: relative;            /* flex item, not absolute */
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    aspect-ratio: 13/10;           /* same as .masthead__hero on mobile */
    height: auto;
    border-radius: 0;              /* full-bleed, no rounded corners */
    margin: 0;                     /* flush against content below */
    overflow: hidden;              /* contain the gradient */
    order: 1;                      /* video on top of the flex column */
    z-index: 3;
  }
  /* v5.52: heavier gradient anchored to video panel's bottom edge (exact
     pixel where it meets the bars/content area). Same curve as the
     masthead's .masthead__hero::after. */
  .hero-video-panel:not(.is-mobile):not(.is-mobile-hide)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(16,18,38,0.4) 40%,
      rgba(16,18,38,0.85) 75%,
      var(--bg) 100%);
    pointer-events: none;
    z-index: 1;
  }
  .hero-video-panel.is-mobile-hide { display: none; }
}

/* v5.52: canonical mobile hero composite pattern.
   On ≤780px the in-context hero stacks video-top / content-below using a
   flex column — same structural model as .masthead on mobile, so both
   render identically. The .hero-video-panel becomes a flex item (order:1)
   with aspect-ratio 13/10, .bg-content is a flex item (order:2). Brand-mark
   SVG layers stay absolutely positioned as a full-hero background.
   Sections that need to keep their desktop overlay pattern on mobile can
   add data-mobile-overlay to the .bg-content. */
@media (max-width: 780px) {
  .bg-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;            /* clips brand-mark SVG bars to hero edges */
    min-height: auto;
  }
  /* v5.53: inside demo blocks (.ds-block) the hero has inline `height: 640px`
     and a width constrained by the demo wrapper. On mobile we want it to
     bleed full-viewport-width and flow-size to its content like the
     masthead does in production.
     v5.55: lock the hero to the masthead's mobile dimensions so the homepage
     hero matches the masthead pixel-for-pixel: total = video (aspect 13/10)
     + bars area (357px), matching .masthead's 657px @ 390-wide.
     v5.56: scoped to :has(.hero-video-panel) so the strict masthead-dimension
     rules only apply to the homepage hero composite (Sec 05), not to other
     .bg-hero demos elsewhere in the file (e.g. Sec 06 animated-backgrounds). */
  .ds-block .bg-hero:has(.hero-video-panel) {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    height: calc(100vw * 10 / 13 + 357px) !important;
    min-height: calc(100vw * 10 / 13 + 357px) !important;
    border-radius: 0 !important;  /* full-bleed has no rounded corners */
    /* v5.54: also strip the hero's own bg color so no sub-pixel hairline
       can appear above the video panel's top edge from background mismatch */
    background: transparent !important;
  }
  /* v5.54: a .ds-block containing a full-bleed hero must drop its bottom
     padding so the hero sits flush against the description text above.
     Also drop the ds-block's background so any sub-pixel overflow at the
     hero's top edge doesn't reveal the lighter ds-block bg as a hairline.
     Without these, a thin visible band appears at the top of the hero.
     v5.56: scoped to :has(.hero-video-panel) — only the homepage hero
     composite, not other demos. */
  .ds-block:has(> .bg-hero:has(.hero-video-panel)) {
    padding-bottom: 0 !important;
    background: transparent !important;
    border: none !important;
  }
  /* v5.55: title at masthead-equivalent size on mobile so the homepage hero
     and the masthead share the same type scale.
     v5.56: scoped to the hero composite only (has video panel). */
  .bg-hero:has(.hero-video-panel) .text-display {
    font-size: var(--fs-hero-2) !important;
    font-weight: 800 !important;
    line-height: 0.95 !important;
    letter-spacing: -0.04em !important;
    text-transform: uppercase !important;
  }
  /* v5.55: content bottom-anchored on mobile so CTAs sit at the hero's bottom
     and the headline text rises into the bars/video gradient area above.
     Matches the .masthead pattern where the content panel occupies the
     lower half and CTAs anchor to the masthead's bottom edge.
     v5.56: scoped to the hero composite only. */
  .bg-hero:has(.hero-video-panel) > .bg-content:not([data-mobile-overlay]) {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    margin: 0 !important;
    max-width: 100% !important;
    padding: 0 var(--space-md) var(--space-md) !important;
    text-align: center;
    z-index: 5;
    background: transparent;
    flex: none !important;
    height: auto !important;
  }
  .bg-hero:has(.hero-video-panel) > .bg-content:not([data-mobile-overlay]) > * {
    margin-left: auto;
    margin-right: auto;
  }
  .bg-hero .hero-proof,
  .bg-hero .live-indicator { justify-content: center; }
  /* v5.48: override inline justify-content: flex-start on .cta-stack inside
     hero composite — mobile uses centered layout per canonical pattern. */
  .bg-hero .cta-stack {
    justify-content: center !important;
  }
  /* v5.55: video panel uniform dark on mobile — kill the placeholder scanline
     overlay and override .panel-bg to a flat solid color so the video area
     reads as ONE continuous flat tone, not split into two zones. Also kill
     the desktop's top-left/bottom-right rounded corners so the video bleeds
     edge-to-edge. */
  .hero-video-panel:not(.is-mobile):not(.is-mobile-hide) {
    background-color: var(--bg) !important;
    border-top-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  .hero-video-panel:not(.is-mobile):not(.is-mobile-hide) .panel-bg {
    background: #1a1a2e !important;
    opacity: 1 !important;
  }
  .hero-video-panel.is-placeholder::after {
    display: none !important;
  }
  /* v5.52: brand-mark-svg layers stay at desktop pixel scale on mobile so
     only the center 2-4 columns of the rainbow halo are visible (the
     390-wide hero with overflow:hidden crops them horizontally). Mirrors
     the .masthead__bars svg mobile override.
     v5.55: extra blur on the bars so headline text reads cleanly over them.
     v5.56: scoped to the hero composite only. */
  .bg-hero:has(.hero-video-panel) .brand-mark-svg {
    width: 1400px !important;
    max-width: none !important;
    height: auto !important;
    min-height: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 0 !important;
    top: auto !important;
    position: absolute !important;
    filter: blur(20px) !important;
  }
  /* v5.56: Sec 06 animated-background demos full-bleed + square on mobile.
     The contained demos have inline `border-radius: var(--radius-md)` on
     the inner bg container. On mobile we want all 6 demos in Sec 06 to
     look identical (full-bleed, square edge-to-edge) so the design system
     consistently shows how these backgrounds present in production.
     Targets .ds-block containing a .bg-party / .bg-footer / .bg-hero.
     The homepage hero composite is matched by both this rule AND the
     more-specific .bg-hero:has(.hero-video-panel) rule above; the latter
     wins on specificity, so the composite keeps its masthead dimensions. */
  .ds-block:has(> .bg-party),
  .ds-block:has(> .bg-footer),
  .ds-block:has(> .bg-hero) {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
  }
  .ds-block:has(> .bg-party) > .bg-party,
  .ds-block:has(> .bg-footer) > .bg-footer,
  .ds-block:has(> .bg-hero):not(:has(.hero-video-panel)) > .bg-hero {
    border-radius: 0 !important;
  }
}

/* container for hero composite — bars fill the lower portion of the hero */
.hero-mark-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0.85;
}
.hero-mark-wrap svg {
  width: min(900px, 60%);
  height: auto;
  max-height: 70%;
}


/* ============================================================================
   MOBILE MENU PATTERNS
   Two patterns, two different purposes:

   Pattern A: SLIDE-DOWN — full-coverage primary navigation menu.
              Real Tuani's logo, language toggle, close button, menu items
              (left-aligned, no dividers), contact block, copyright +
              colored social icons + legal links.

   Pattern B: RIGHT POP-OUT CONTACT DRAWER — NOT a nav drawer.
              Cyan circular close, tagline, embedded map with "OPEN LARGER"
              CTA, address block, divider, branded social icons. Used when
              the user wants "where are you / how do I reach you", not nav.
   ============================================================================ */

/* shared close button — cyan circle, dark X */
.mobile-menu-close {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--color-light-tur);
  color: var(--color-black);
  cursor: pointer;
  flex: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.mobile-menu-close:hover { background: var(--color-turquoise); }
.mobile-menu-close svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.5; }

/* shared language pill */
.mobile-menu-lang {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-white);
  padding: 8px 12px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
}

/* shared link list (used by Pattern A) */
.mobile-menu-links { display: flex; flex-direction: column; }
.mobile-menu-link {
  display: block;
  padding: var(--space-md) 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 6vw, 38px);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--color-white);
  line-height: 1.1;
  transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur-base) var(--ease-out);
}
.mobile-menu-link:hover,
.mobile-menu-link:focus {
  color: var(--color-light-tur);
  padding-left: 10px;
}
/* the clean variant — no borders between items (matches Figma) */
.mobile-menu-links.is-clean .mobile-menu-link {
  padding: 10px 0;
}

/* ── PATTERN A — slide-down nav menu ─────────────────────────────────── */
.menu-slidedown {
  width: 100%;
  max-width: 440px;
  background: var(--color-black);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
  display: flex; flex-direction: column;
  /* in production: position:fixed, top:0, left:0, right:0, transform:translateY(-100%) when closed */
}
.menu-slidedown__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-lg);
  gap: var(--space-md);
}

/* HR above and below the menu nav links — matches the Figma spec.
   Both rules added to <hr> elements inserted around .mobile-menu-links. */
.menu-slidedown hr {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.12);
  margin: 0;
  width: 100%;
}

/* contact block inside the slide-down menu — CENTERED per Figma spec */
.menu-contact {
  margin-top: var(--space-xl);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: 8px;
}
.menu-contact__address {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
}
.menu-contact__phone {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 7vw, 40px);
  letter-spacing: -0.03em;
  color: var(--color-white);
  margin: 6px 0;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.menu-contact__phone:hover {
  color: var(--color-light-tur);
}
.menu-contact__hours {
  font-size: 13px;
  color: var(--text-secondary);
}
.menu-contact__email {
  font-size: 14px;
  color: var(--color-light-tur);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: 4px;
}

/* footer area inside the slide-down menu — also CENTERED */
.menu-foot {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: var(--space-md);
}
.menu-foot__copy {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  letter-spacing: 0.02em;
}
.menu-foot__socials {
  display: flex; gap: 18px; align-items: center;
  margin: var(--space-xs) 0;
}
.menu-foot__socials a {
  display: inline-flex;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  transition: transform var(--dur-fast) var(--ease-out);
  /* v5.47: ensure SVGs fill their wrapper consistently regardless of internal viewBox */
  overflow: hidden;
  border-radius: 8px;
}
.menu-foot__socials a:hover { transform: scale(1.1); }
.menu-foot__socials svg { width: 100%; height: 100%; display: block; }
.menu-foot__legal {
  font-size: 12px;
  color: var(--text-tertiary);
  letter-spacing: 0.03em;
  display: flex; gap: 16px;
  justify-content: center;
}
.menu-foot__legal a {
  color: var(--text-tertiary);
  text-decoration: underline;
}
.menu-foot__legal a:hover { color: var(--color-white); }

/* ── PATTERN B — contact / location pop-out drawer ────────────────────── */
.menu-popout-stage {
  position: relative;
  width: 100%; min-height: 720px;
  background: rgba(0,0,0,0.4);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.menu-popout-stage::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(165,96,255,0.08), rgba(236,33,125,0.05) 50%, rgba(0,160,194,0.08)),
    var(--color-black);
}

.menu-popout {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(440px, 92%);
  background: var(--color-black);
  border-left: 1px solid rgba(255,255,255,0.08);
  padding: var(--space-xl);
  box-shadow: -24px 0 64px rgba(0,0,0,0.5);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.menu-popout__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 3;
}
.menu-popout__tagline {
  font-size: 15px;
  color: var(--color-white);
  line-height: 1.45;
  letter-spacing: -0.01em;
  margin-top: 8px;
  margin-right: 56px;
  margin-bottom: var(--space-xl);
}

/* embedded map */
.menu-popout__map {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #dbe7d4;
  margin-bottom: var(--space-md);
}
.menu-popout__map-canvas {
  width: 100%;
  height: 240px;
}
.menu-popout__map-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1.5px solid var(--color-light-tur);
  color: var(--color-light-tur);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 12px auto 16px;
  background: var(--color-black);
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  transition: all var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.menu-popout__map-cta:hover {
  background: var(--color-light-tur);
  color: var(--color-black);
  box-shadow: 0 0 24px rgba(13,227,255,0.6);
}

/* contact lines */
.menu-popout__contact {
  margin-top: var(--space-2xl);
  text-align: right;
  display: flex; flex-direction: column; gap: 12px;
}
.menu-popout__addr {
  font-size: 16px;
  color: var(--color-white);
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.menu-popout__phone {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 5vw, 36px);
  color: var(--color-white);
  letter-spacing: -0.03em;
}
.menu-popout__email {
  font-size: 15px;
  color: var(--color-light-tur);
  text-decoration: underline;
}
.menu-popout__hours {
  font-size: 13px;
  color: var(--text-secondary);
}

/* gradient divider */
.menu-popout__div {
  height: 1px;
  margin: var(--space-xl) 0 var(--space-md);
  background: linear-gradient(90deg, transparent, var(--color-golden) 30%, var(--color-pink) 70%, transparent);
  opacity: 0.5;
}

.menu-popout__socials {
  display: flex; gap: 12px; justify-content: center;
  margin-bottom: var(--space-lg);
}
.menu-popout__socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.menu-popout__socials a:hover { transform: scale(1.12); }
.menu-popout__socials svg { width: 34px; height: 34px; display: block; }
.demo-canvas {
  background:
    linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.02) 75%),
    linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.02) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
  border-radius: var(--radius-sm);
  padding: var(--space-xl);
  min-height: 220px;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: var(--space-lg);
}
.demo-canvas--tall { min-height: 320px; }
.demo-canvas--bg { padding: 0; min-height: 280px; }
.demo-canvas--solid { background: var(--bg); }
.demo-row-label {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--space-md); padding: 0 4px;
}

/* ── RESERVE BLOCK DEMO ───────────────────────────────────────────────
   Built from the exact Figma left/right percentages provided in the
   Reserve component spec. Seven blurred stripes spaced across the width
   with the brand's white→dark linear gradient, opacity 0.2.
   Figma percentages (each stripe's left edge):
     0%, 16.07%, 28.67%, 41.27%, 54.84%, 70.62%, 85.76% */
.demo-reserve {
  position: relative;
  background: var(--bg);
  border-radius: var(--radius-md);
  padding: var(--space-3xl) var(--space-xl);
  overflow: hidden;
  text-align: center;
}
.demo-reserve__inner { position: relative; z-index: 2; }
.demo-reserve__heading {
  /* H1 token bundles size + weight + line-height + letter-spacing.
     Color/effect treatment comes from <span class="is-purple is-ghost">
     and the plain "tu mesa" runs at the heading's default white. */
  font-size: var(--fs-hero-1);
  font-weight: var(--fw-hero-1);
  letter-spacing: var(--ls-hero-1);
  line-height: var(--lh-hero-1);
  text-transform: uppercase;
  color: var(--color-white);
  margin: 0 0 var(--space-lg);
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  width: 100%;
}
.demo-reserve__sub {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-body-lg);
  letter-spacing: var(--ls-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--color-white);
  margin-bottom: var(--space-xl);
}

/* ── COMPONENT GRID ───────────────────────────────────────────────────── */
.demo-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
@media (max-width: 780px) { .demo-cards { grid-template-columns: 1fr; } }


/* ============================================================================
   GALLERY — layered photo collage with parallax peek pills
   ────────────────────────────────────────────────────────────────────────────
   The canonical Tuani's gallery, sourced verbatim from Figma node 2475-7407.
   This is NOT a flat carousel — it's a layered composition:
     • One square hero photo at center (Rectangle 15, 801×878, radius 134.948)
     • Five surrounding "peek" pills at opacity 0.5 + 2.92px blur, all with
       radius 259.189 so they read as vertical pills:
         - Rectangle 13: 331×682, far-left big      (10% left, 0%   top)
         - Rectangle 14: 162×423, near-left narrow  (26% left, 39%  top)
         - Rectangle 16: 201×571, near-right narrow (74% left, 13%  top)
         - Rectangle 17: 343×593, far-right big     (84% left, 36%  top)
         - Rectangle 18: 201×630, far-far-left      ( 0% left, 22%  top)
     • A rotated purple blur blob (#5400C2, blur 120px, rotate 18.54°) behind
     • A cyan glow circular nav button at right edge (Figma Ellipse 7)
     • An "05 / 14" counter to the right of the button on mobile, beneath
       on desktop

   POSITIONING: All percentages of the photos container (2110.43 × 931.14 in
   the Figma source). The container scales fluidly; aspect-ratio holds.

   ANIMATION ON NAV: Parallax. When the user clicks next/prev:
     • The center photo cross-fades to the new image
     • The big-pill peeks (13, 17) translate by ~30% of their width
     • The narrow-pill peeks (14, 16) translate by ~60% (faster, deeper effect)
     • The far-edge peeks (18) translate by ~90% (deepest parallax)
     • Purple blob drifts slowly (~10%) the opposite direction for counter-motion
   All transitions run 700ms cubic-bezier(0.22, 1, 0.36, 1) — the same easing
   the brand uses elsewhere.

   MOBILE (≤780px): Peek pills hide entirely. Single hero photo as a vertical
   pill (Rectangle 15 scaled, but pilled via radius 80px per Figma mobile spec).
   Cyan arrows + counter below.
   ============================================================================ */
.gallery-collage {
  position: relative;
  width: 100%;
  /* Figma container aspect: 2110.43 / 1156.24 ≈ 1.825. We use the photos
     band aspect (2110.43 / 931.14 ≈ 2.266) since that's the actual photo
     content area; the extra height in the Figma gallery container is just
     padding above/below. */
  aspect-ratio: 2110 / 931;
  max-width: 1680px;   /* matches the original galery-max max-width feel */
  margin: 0 auto;
  /* Pull the layered SVG/photo positions inside this stacking context */
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-md);
}

/* L1 — the rotated purple blur blob behind the photos. From Figma:
   width 1310.71, height 779.89, blur 119.954, rotate 18.54°, #5400C2.
   Sits inside the gallery container; the blur naturally hugs the bounds. */
.gallery-collage__blob {
  position: absolute;
  width: 62%;
  height: 84%;
  left: 19%;
  top: 8%;
  background: var(--color-purple);
  filter: blur(110px);
  transform: rotate(18.54deg);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
  animation: gallery-blob-drift 12s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@keyframes gallery-blob-drift {
  0%   { transform: rotate(18.54deg) translateX(0)     scale(1);    opacity: 0.55; }
  100% { transform: rotate(16deg)    translateX(-3%)   scale(1.05); opacity: 0.42; }
}

/* L2 — the peek pill layer. Holds five blurred 0.5-opacity rectangles.
   Each pill is absolutely positioned by percentage, with transitions on
   transform so the parallax shift on next/prev is smooth. */
.gallery-collage__peeks {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.gallery-collage__peek {
  position: absolute;
  opacity: 0.5;
  filter: blur(2.92px);
  border-radius: 259px;   /* same px-based radius as Figma so the pill shape
                             stays tall-and-narrow regardless of container scale */
  background-size: cover;
  background-position: center;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
/* Position each peek by Figma percentages within the photos band */
.gallery-collage__peek.is-p18 { left:  0.00%; top: 21.82%; width:  9.54%; height: 67.71%; }
.gallery-collage__peek.is-p13 { left: 10.14%; top:  0.00%; width: 15.69%; height: 73.25%; }
.gallery-collage__peek.is-p14 { left: 26.46%; top: 38.78%; width:  7.66%; height: 45.48%; }
.gallery-collage__peek.is-p16 { left: 73.57%; top: 13.13%; width:  9.53%; height: 61.28%; }
.gallery-collage__peek.is-p17 { left: 83.73%; top: 36.31%; width: 16.27%; height: 63.69%; }

/* L3 — the center hero photo. Rectangle 15: 801.44 × 877.91 inside a
   2110.43 × 931.14 photos band → 37.97% wide × 94.28% tall. Radius 134.948
   in source ≈ 16.84% of the photo's own width — but in CSS we use a fixed
   ratio that reads as "rounded-square" at every scale. */
.gallery-collage__hero {
  position: absolute;
  left: 34.85%;
  top: 0%;
  width: 37.97%;
  height: 94.28%;
  border-radius: 7vw;       /* fluid radius that reads correctly desktop→mobile;
                                clamped at 60px max via the rule below */
  overflow: hidden;
  z-index: 2;
  background: var(--bg-card);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
@media (min-width: 900px) {
  .gallery-collage__hero { border-radius: clamp(40px, 5vw, 60px); }
}
.gallery-collage__hero-inner {
  position: absolute;
  inset: 0;
  /* The image cross-fade layer. Two stacked images: current visible at
     opacity 1, incoming at 0. On nav we flip both. */
}
.gallery-collage__hero img,
.gallery-collage__hero svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 1;
  transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-collage__hero img.is-fading,
.gallery-collage__hero svg.is-fading {
  opacity: 0;
}

/* L4 — the cyan glow circular nav button, positioned at the right edge of
   the gallery (Figma Ellipse 7, 74.97×74.97 at left 1815.33, top 7418.38).
   Inside the gallery container that lands at ~94.35% left, ~46.81% top. */
.gallery-collage__nav {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.gallery-collage__nav.is-edge-right {
  right: var(--space-lg);
  top: 50%;
  transform: translateY(-50%);
}
.gallery-collage__nav.is-bottom-center {
  left: 50%;
  bottom: var(--space-md);
  transform: translateX(-50%);
  /* Hidden on desktop — the right-edge arrow handles desktop nav.
     The CSS @media at the bottom of this block flips visibility for mobile. */
  display: none;
}

/* Counter — "05 / 14" — reuses Figma's typography from gallery-max counter */
.gallery-collage__count {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--color-white);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.gallery-collage__count .now   { font-size: 30px; line-height: 1; }
.gallery-collage__count .sep   { font-size: 20px; line-height: 1; color: var(--color-prism); }
.gallery-collage__count .total { font-size: 20px; line-height: 1; color: var(--color-prism); }

/* Circular icon button — cyan halo per Figma. Same spec as the original
   galery-max controls so the brand affordance stays consistent across
   the site. */
.btn-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(16, 18, 38, 0.69);
  border: 3px solid var(--color-light-tur);
  box-shadow:
    0 -1px 9px var(--color-light-tur),
    0 0 37.9px var(--color-light-tur),
    inset 0 3px 17.3px 3px rgba(142, 242, 255, 0.75);
  backdrop-filter: blur(4.65px);
  -webkit-backdrop-filter: blur(4.65px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  cursor: pointer;
  transition: transform 220ms ease, box-shadow 220ms ease;
  flex: 0 0 auto;
  padding: 0;
}
.btn-circle svg {
  width: 49px;
  height: 42px;
  display: block;
  stroke-width: 4;
}
/* v5.48: small modifier for compact contexts (feedback arrows, etc.).
   Same canonical style, smaller dimensions. */
.btn-circle.is-sm {
  width: 60px;
  height: 60px;
  border-width: 2px;
  box-shadow:
    0 -1px 6px var(--color-light-tur),
    0 0 22px var(--color-light-tur),
    inset 0 2px 10px 2px rgba(142, 242, 255, 0.6);
}
.btn-circle.is-sm svg {
  width: 28px;
  height: 24px;
  stroke-width: 3;
}
.btn-circle.is-prev svg { transform: rotate(180deg); }
.btn-circle:hover  { transform: scale(1.06); }
.btn-circle:active { transform: scale(0.97); }
.btn-circle:disabled,
.btn-circle.is-disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .gallery-collage__blob,
  .gallery-collage__peek,
  .gallery-collage__hero,
  .gallery-collage__hero img,
  .gallery-collage__hero svg { animation: none !important; transition: none !important; }
}

/* MOBILE — collapse the collage. Peek pills hide. Single centered hero pill
   per Figma mobile node 2475-6571: Rectangle 15 width 635.67 × height 493.05
   becomes the vertical "stacked" hero card. Counter + arrow row beneath. */
@media (max-width: 780px) {
  .gallery-collage {
    aspect-ratio: auto;
    max-width: none;
    overflow: visible;
    border-radius: 0;
    padding: 0 var(--space-md);
    isolation: auto;
  }
  .gallery-collage__blob {
    /* Keep a soft purple haze behind the hero on mobile, but smaller */
    width: 80%;
    height: 60%;
    left: 10%;
    top: 8%;
    filter: blur(80px);
    opacity: 0.4;
  }
  .gallery-collage__peeks { display: none; }
  .gallery-collage__hero {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 636 / 770;       /* the mobile portrait-pill ratio per Figma */
    border-radius: 32px;            /* mobile per spec */
    margin: 0 auto;
  }
  .gallery-collage__nav.is-edge-right { display: none; }
  .gallery-collage__nav.is-bottom-center {
    display: flex;
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    margin-top: var(--space-lg);
    justify-content: center;
  }
  /* Mobile circular button — Figma Ellipse 7 mobile spec (40×40) */
  .btn-circle {
    width: 40px;
    height: 40px;
    border-width: 1.2px;
    box-shadow:
      0 -0.4px 3.6px var(--color-light-tur),
      0 0 15.16px var(--color-light-tur),
      inset 0 1.2px 6.92px 1.2px rgba(142, 242, 255, 0.75);
    backdrop-filter: blur(1.86px);
    -webkit-backdrop-filter: blur(1.86px);
  }
  .btn-circle svg {
    width: 19.77px;
    height: 16.73px;
    stroke-width: 1.58;
  }
}




/* ============================================================================
   FEEDBACK — customer reviews block (Option B v5 — brand-voice locked-in)
   ────────────────────────────────────────────────────────────────────────────
   Final spec after iteration cycles. Uses only design system tokens:
   Inter (400-900) + Caveat Brush, existing color palette, existing glows,
   existing components (.btn-arrow, .text-glow, etc.).

   TYPOGRAPHY:
     "4.7"      — Inter 900, heavy weight, yellow glow halo (matches the
                  hero "HERE" treatment). Color stays solid black/dark so
                  it's legible against the peach; the glow does the energy.
     "EXCELLENT" — Inter 700 uppercase with extra letter-spacing, cyan
                  color, sits as a confident label under the 4.7.
     Quote text — Inter 400 at 16-17px with loose 1.65 line-height.
                  Framed by a giant cyan opening quote mark (Inter 700),
                  no italic (not in the design system).
     Reviewer    — Inter 500.
     "via Google" — Inter 400, 11px, bottom-right corner of the quote card.

   COMPOSITION:
     Quote card  — white, NO border, sits on the peach. The giant cyan
                  opening quote mark does the visual framing instead of
                  an outline.
     Arrows      — thick cyan chevron glyphs with drop-shadow glow, no
                  border, no halo box.
     "Read all"  — .btn-arrow text link (existing component) in cyan,
                  with the right-arrow icon.

   PINSTRIPE: baked into the peach element's own background-image. Does
   NOT spill onto any other surface (white card is solid white). On
   mobile both the cream-rising-tongue and the peach pill share the
   stripe; the white top card does not.

   MOBILE SHAPE: cream "rises into" the bottom of the white rating card —
   the peach extends UP into a curved tongue that the white card sits over,
   visually linking the two cards into one composition.

   DESKTOP SHAPE: single horizontal pill — rounded-LEFT cap (200px),
   slightly rounded right corners (20px). Rating block in left endcap;
   white quote card on the right with arrows + Read all link below it on
   the peach surface.
   ============================================================================ */

.feedback {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* The pinstripe texture, applied directly to the peach surface via
   background-image. Same SVG pattern from earlier but used only inside
   the peach. The opacity is moderate so it reads as texture, not as
   an active overlay. */
.feedback__peach-bg {
  background-color: #FFDDA6;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='55' height='100' viewBox='0 0 55 100' preserveAspectRatio='none'><defs><linearGradient id='g' x1='66' y1='50' x2='-13' y2='50' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%23ffffff' stop-opacity='0'/><stop offset='0.7' stop-color='%23282828' stop-opacity='0.35'/><stop offset='1' stop-color='%23ffffff' stop-opacity='0'/></linearGradient></defs><rect width='55' height='100' fill='url(%23g)' fill-opacity='0.2'/></svg>");
  background-size: 30px 100%, auto;
  background-repeat: repeat-x;
}

/* ── MOBILE TOP CARD: WHITE RATING SUMMARY ──────────────────────────────
   The white card on top. Bottom corners squared so the peach tongue
   below can rise up and "join" it as one visual unit. The bottom edge
   gets a small concave curve via the .feedback__bridge child element. */
.feedback__top {
  position: relative;
  background: #FFFFFF;
  border-radius: 24px 24px 0 0;
  padding: 24px 22px 48px;  /* more bottom padding so "2,180 reviews" has space above the cream overlap */
  display: flex;
  align-items: center;
  gap: 18px;
  z-index: 1;  /* cream pill sits ON TOP so its overlap is visible */
}
.feedback__top-logos {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.feedback__top-logos svg { width: 34px; height: 34px; display: block; }
.feedback__top-body { flex: 1; text-align: center; min-width: 0; }

/* The cream "tongue" that rises into the bottom of the white card on
   mobile. It's a peach-colored shape with the pinstripe baked in,
   positioned absolutely at the bottom of .feedback__top, with rounded
   top corners so it reads as the cream rising upward. */
/* On mobile the peach pill sits flush against the white rating card above,
   creating the visual continuity of the two cards as one composition. */

/* ── PEACH PILL / DESKTOP CAPSULE ────────────────────────────────────── */
.feedback__pill {
  position: relative;
  background-color: #FFDDA6;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='55' height='100' viewBox='0 0 55 100' preserveAspectRatio='none'><defs><linearGradient id='g' x1='66' y1='50' x2='-13' y2='50' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%23ffffff' stop-opacity='0'/><stop offset='0.7' stop-color='%23282828' stop-opacity='0.35'/><stop offset='1' stop-color='%23ffffff' stop-opacity='0'/></linearGradient></defs><rect width='55' height='100' fill='url(%23g)' fill-opacity='0.2'/></svg>");
  background-size: 30px 100%;
  background-repeat: repeat-x;
  border-radius: 28px 28px 24px 24px;  /* rounded top corners — these "rise into" / overlap the white card above */
  padding: 48px 18px 32px;  /* generous top padding so quote card sits comfortably below the overlap zone */
  margin-top: -28px;  /* cream overlaps higher into the white card per locked spec */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 40px;
  z-index: 2;
}

.feedback__pill .feedback__rate { display: none; }

/* ── RATING BLOCK ──────────────────────────────────────────────────────
   Shown in white top card on mobile, in left endcap on desktop. */
.feedback__rate {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.feedback__rate-logos {
  display: none; /* desktop-only by default; overridden in media query */
  gap: 14px;
  margin-bottom: 4px;
}
.feedback__rate-logos svg { width: 30px; height: 30px; display: block; }

/* "4.7" — massive stat number with dark fill. Uses .text-hero-1 token via
   markup utility class. Component CSS owns color + line-height only. */
.feedback__rate-score {
  color: #2D2D2D;
  line-height: 0.85;
}

/* "EXCELLENT" — confident label below the number. Uses .text-caption token
   via markup utility class. Component CSS owns color + spacing. */
.feedback__rate-tagline {
  color: #2D2D2D;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 4px;
}

.feedback__rate-stars {
  display: flex;
  gap: 3px;
  margin-top: 6px;
}
.feedback__rate-count {
  color: #5F5E5A;
  margin: 6px 0 0;
}

/* Gold rating stars (#EAC10C) with multi-layer inset shadow bevel. */
.feedback__star {
  width: 18px;
  height: 18px;
  background: var(--color-golden);
  box-shadow:
    0 1.95px 2.68px rgba(0, 0, 0, 0.06),
    inset 0 1.46px 1.36px rgba(255, 255, 255, 0.35),
    inset 0 -0.49px 1.95px rgba(0, 0, 0, 0.2),
    inset 0 0.49px 1.95px rgba(255, 255, 255, 0.55);
  border-radius: 0.5px;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  flex: 0 0 auto;
}
.feedback__star.is-sm { width: 13px; height: 13px; }
.feedback__star.is-md { width: 16px; height: 16px; }

/* ── WHITE QUOTE CARD — no border, framed by giant cyan quote mark ───── */
.feedback__quote {
  position: relative;
  background: var(--color-white);
  border-radius: 14px;
  padding: 32px 28px 22px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

/* Giant cyan opening quote mark, positioned top-left of the quote card.
   Inter 700 heavy, large and translucent enough to feel decorative
   rather than typographic. */
.feedback__quote::before {
  content: "\201C";
  position: absolute;
  top: -6px;
  left: 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 88px;
  line-height: 1;
  color: var(--color-prism);
  opacity: 0.95;
  pointer-events: none;
}

.feedback__quote-text {
  color: #2D2D2D;
  margin: 28px 0 14px;  /* more top margin to clear the giant " quote mark */
  text-align: left;
}

/* Reviewer line — name + stars centered, "via Google" pinned to the
   bottom-right corner of the card. */
.feedback__reviewer {
  display: flex;
  align-items: center;
  justify-content: flex-start;  /* left-aligned per locked spec */
  gap: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(0, 160, 194, 0.3);
}
.feedback__reviewer-name {
  color: #2D2D2D;
}
.feedback__reviewer-stars { display: flex; gap: 2px; }

/* "via Google · 2 weeks ago" — bottom-right corner of the white quote
   card, small, muted */
.feedback__source {
  position: absolute;
  right: 16px;
  bottom: 10px;
  color: #5F5E5A;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.feedback__source svg { width: 11px; height: 11px; }

/* ── THICK CYAN GLYPH ARROWS WITH GLOW (B2) ──────────────────────────── */
.feedback__arrows {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
}
/* v5.48: refactored to use canonical .btn-circle (matches Sec 11 Gallery navigation).
   Same circular cyan-halo button used everywhere across the site. */
.feedback__arrow {
  /* Inherits all visual styling from .btn-circle in markup */
}
.feedback__arrow.is-prev svg { transform: rotate(180deg); }

/* ── READ ALL REVIEWS — uses .btn-arrow (cyan variant) ───────────────── */
.feedback__readmore {
  display: flex;
  justify-content: center;
}
.feedback__readmore .btn-arrow {
  color: var(--color-prism);
}
.feedback__readmore .btn-arrow:hover { color: var(--color-white); }

/* .feedback__pill-main base (mobile + desktop) — flex column with gap
   between the quote card and the controls row. */
.feedback__pill-main {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* MOBILE — fewer + thicker pinstripe stripes on the cream pill, matching the
   global mobile pinstripe rule for visual consistency at narrow widths.
   Desktop uses 30px stride (~14 stripes); mobile uses 44px (~8 stripes). */
@media (max-width: 780px) {
  .feedback__pill {
    background-size: 44px 100%;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   DESKTOP (≥781px) — SINGLE HORIZONTAL PILL
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 781px) {
  .feedback .feedback__top {
    display: none;
  }
  .feedback .feedback__pill {
    flex-direction: row;
    align-items: center;
    gap: 36px;
    padding: 40px 48px 40px 64px;
    max-width: 1346px;
    margin: 0 auto;
    min-height: 320px;
    border-radius: 200px 24px 24px 200px;
  }
  .feedback .feedback__pill .feedback__rate {
    display: flex;
    flex: 0 0 300px;
  }
  .feedback .feedback__rate-logos {
    display: flex;
  }
  .feedback .feedback__pill-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    min-width: 0;
  }
  .feedback .feedback__quote {
    max-width: none;
    padding: 36px 36px 26px;
  }
  .feedback .feedback__quote::before {
    font-size: 100px;
    top: -10px;
    left: 22px;
  }
  .feedback .feedback__quote-text {
    font-size: 16px;
    line-height: 1.65;
  }
  /* Desktop refines spacing only — base layout is below (applies to both). */
}

/* ── PILL CONTROLS ROW — READ ALL REVIEWS left, prev/next arrows right ─
   Applies to both mobile and desktop per locked spec. */
.feedback__pill-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  margin-top: 8px;  /* breathing room above the controls row */
}
.feedback__pill-controls .feedback__readmore {
  justify-content: flex-start;  /* override centered default */
  flex: 0 0 auto;
}
.feedback__pill-controls .feedback__arrows {
  justify-content: flex-end;  /* arrows sit at the right edge */
  flex: 0 0 auto;
  gap: 20px;  /* tighter pair than the original 36px standalone gap */
}





/* ============================================================================
   PAGE-TITLE MASTHEAD — Section 14 v5.33 (locked spec)
   ============================================================================
   The canonical subpage masthead. Inherits .bg-hero verbatim from the design
   system (black base + slow-drifting radial blobs + canonical pinstripe).
   Adds only what's specific to subpages:
     1. Rounded-bottom card shape (overrides .bg-hero's border-radius)
     2. Per-variant audio-wave bars at z 2 (double-layer: heavy glow + crisp top)
     3. Per-variant radial blob colors (overrides .bg-hero::before backgrounds)
     4. Hero food image positioned absolutely at top: 70%, breaks past rounded edge

   DOM structure:
     <div class="masthead is-{variant}">
       <div class="masthead__card">
         <div class="masthead__bars is-glow"><svg>…</svg></div>  ← heavy 15px blur
         <div class="masthead__bars is-crisp"><svg>…</svg></div>  ← light 10px blur
         <div class="masthead__content">
           <span class="live-indicator"><i></i>Abierto ahora</span>
           <h1 class="masthead__title">…</h1>
           <p class="masthead__subtitle-main">…</p>
           <p class="masthead__subtitle-lite">…</p>
           <div class="masthead__cta cta-stack"><a class="btn-pill is-purple">…</a>…</div>
         </div>
       </div>
       <div class="masthead__hero"><img>…</div>  ← positioned at top: 70%
     </div>

   Z-INDEX STACK (matches Figma layer order):
     0. .masthead__card background (navy)
     1. .bg-hero::before — radial blob layer (per-variant colors, animated)
     2. .masthead__bars — audio-wave bars (per-variant gradient, double-layer)
     3. .bg-hero::after — canonical pinstripe overlay
     4. .masthead__content — main content (title, buttons, etc)
     5. .masthead__hero — hero food image (positioned absolutely)

   PER-VARIANT GRADIENT STOPS — orange-gold cohesion logic:
     Each variant's bars endpoint = its brand color from the palette.
     Stops 1-2 are deep shadows in the same hue family.
     Stop 3 is the bronze/mid-tone bridge color.
     Stop 4 is the brand accent color itself.
     Page word color matches stop 4 (or a glowing sibling).
     Blob colors are a curated set in the same warm/cool family.
   ============================================================================ */

.masthead {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  isolation: isolate;
  margin-bottom: 200px;  /* room for the hero image extending past the card */
}
.masthead.is-constrained {
  width: 100%;
  margin-left: 0;
  max-width: 1280px;
  margin-right: auto;
  margin-left: auto;
}

/* The card — extends .bg-hero (gets blobs + pinstripe automatically).
   v5.49: .masthead__bars moved out to be a sibling of .masthead__card so
   they can span the FULL masthead on mobile. To keep desktop visually
   identical, isolation:isolate is removed here so internal z-index
   (blobs z:1, pinstripe z:3, content z:5) participates in the parent
   stacking context — bars at z:2 then interleave between blobs and
   pinstripe just like before. The card background-color is also removed
   (was black) because bars are now BEHIND it in DOM order and a solid
   bg would cover them; .masthead provides the navy base instead. */
.masthead__card {
  position: relative;
  background: transparent;
  border-radius: 0 0 clamp(48px, 10vw, 260px) clamp(48px, 10vw, 260px);
  overflow: hidden;
  min-height: clamp(420px, 50vw, 640px);
  /* v5.57: bottom-align content so buttons sit just above the hero image
     (which is absolutely positioned at top:70% of this card). */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
/* v5.49: masthead provides the navy base color (used to be on .__card) */
.masthead { background: var(--color-black); }

/* z 1 — radial blob layer (default colors; per-variant overrides below) */
.masthead__card::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
  background:
    radial-gradient(ellipse 45% 40% at 30% 70%, var(--blob-1, var(--color-light-tur)) 0%, color-mix(in srgb, var(--blob-1, var(--color-light-tur)) 50%, transparent) 30%, transparent 60%),
    radial-gradient(ellipse 38% 35% at 78% 28%, var(--blob-2, var(--color-pink))     0%, color-mix(in srgb, var(--blob-2, var(--color-pink))     50%, transparent) 30%, transparent 60%),
    radial-gradient(ellipse 55% 55% at 50% 100%, var(--blob-3, var(--color-purple))  0%, color-mix(in srgb, var(--blob-3, var(--color-purple))  40%, transparent) 40%, transparent 70%);
  filter: blur(60px);
  animation: bg-drift-hero 7s ease-in-out infinite alternate;
}

/* z 3 — pinstripe overlay (verbatim from canonical .bg-hero::after) */
.masthead__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='55' height='100' viewBox='0 0 55 100' preserveAspectRatio='none'><defs><linearGradient id='g' x1='66' y1='50' x2='-13' y2='50' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%23ffffff' stop-opacity='0'/><stop offset='0.7' stop-color='%23282828' stop-opacity='0.6'/><stop offset='1' stop-color='%23ffffff' stop-opacity='0'/></linearGradient></defs><rect width='55' height='100' fill='url(%23g)' fill-opacity='0.2'/></svg>");
  background-size: 30px 100%;
  background-repeat: repeat-x;
}

/* z 2 — audio-wave bars (double-layer: heavy glow + crisp top).
   The shared SVG symbol #i-bars-tinted uses CSS-variable gradient stops
   so each variant just sets --bars-stop-1..4 to produce its identity.
   v5.49: bars are now SIBLINGS of .masthead__card (no longer children),
   so they need their own rounded-bottom clip to match the card's shape
   on desktop. On mobile this clip is reset to 0 so bars span the full
   masthead. */
.masthead__bars {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  border-radius: 0 0 clamp(48px, 10vw, 260px) clamp(48px, 10vw, 260px);
}
.masthead__bars svg {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100%;  /* edge-to-edge for visual presence */
  height: 100%;
}
.masthead__bars.is-glow { opacity: 0.57; }
.masthead__bars.is-glow svg { filter: blur(15px); }
.masthead__bars.is-crisp { opacity: 1.0; }
.masthead__bars.is-crisp svg { filter: blur(10px); }

/* z 5 — content layer */
.masthead__content {
  position: relative;
  z-index: 5;
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  /* v5.57: bottom-aligned in card via parent's justify-content:flex-end.
     Add padding-bottom equal to (30% of card height + ~20px gap) so the
     buttons land 10-20px above the hero image (positioned at top:70% of
     the card and extending below). Clamp values mirror .masthead__card's
     min-height clamp scaled to 30% + 20px. */
  padding-bottom: clamp(146px, 17vw, 212px);
}
.masthead__title {
  font-size: var(--fs-hero-2);  /* matches homepage hero heading */
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--color-white);
  margin: 0;
}
.masthead__subtitle-main {
  font-size: var(--fs-body-lg);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin: 0;
  max-width: 60ch;
}
.masthead__subtitle-lite {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-secondary);
  margin: 0;
  max-width: 60ch;
}
.masthead__cta {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-sm);
  flex-wrap: wrap;
  justify-content: center;
}

/* ─── CANONICAL .cta-stack (v5.47) ─────────────────────────────────────────
   Canonical button group used wherever a hero/masthead has CTAs.
   Desktop: buttons sit in a row (.cta-stack default flex behavior).
   Mobile (≤780px): buttons stack per count rule:
     • 1 button  → full width (max 380px to keep tap-friendly)
     • 2 buttons → side by side in a single row
     • 3 buttons → first button full width on first row, remaining 2 side by side below

   Consumed by: .masthead__cta, hero composite CTA row, any similar group.
   ────────────────────────────────────────────────────────────────────── */
.cta-stack {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 780px) {
  /* Default: stack everything full width — applies to 1-button case */
  .cta-stack { gap: var(--space-sm); }
  .cta-stack > * {
    flex: 1 1 100%;
    max-width: 380px;
    min-width: 0;
    text-align: center;
    justify-content: center;
  }
  /* 2 buttons → side by side */
  .cta-stack:has(> *:nth-child(2):last-child) > * {
    flex: 1 1 0;
    max-width: 220px;
  }
  /* 3 buttons → first full width, next 2 side by side */
  .cta-stack:has(> *:nth-child(3):last-child) > *:nth-child(1) {
    flex: 1 1 100%;
    max-width: 380px;
  }
  .cta-stack:has(> *:nth-child(3):last-child) > *:nth-child(2),
  .cta-stack:has(> *:nth-child(3):last-child) > *:nth-child(3) {
    flex: 1 1 0;
    max-width: 220px;
  }
}

/* v5.57: SCOPED rule — apply the canonical 3-button cta-stack pattern
   (first button on its own row, capped at 380px; next two side-by-side
   below, each capped at 220px) to the homepage hero on DESKTOP too.
   Matches the canonical mobile pattern formatting exactly so RESERVAR
   (with WhatsApp icon) always gets its own row with centered contents,
   and VER MENÚ + EVENTOS stack side-by-side below with centered text.
   Uses CSS grid (not flex) because flex-wrap leaves slack room on the
   first row that lets the second button squeeze in. Grid's
   `grid-column: 1 / -1` truly forces button 1 onto its own row.
   Scoped to .bg-hero so masthead and other cta-stack consumers are
   unaffected. */
.bg-hero .cta-stack:has(> *:nth-child(3):last-child) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
.bg-hero .cta-stack:has(> *:nth-child(3):last-child) > *:nth-child(1) {
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  max-width: 380px;
  text-align: center;
  justify-content: center;
}
.bg-hero .cta-stack:has(> *:nth-child(3):last-child) > *:nth-child(2),
.bg-hero .cta-stack:has(> *:nth-child(3):last-child) > *:nth-child(3) {
  justify-self: stretch;
  max-width: 220px;
  min-width: 0;
  text-align: center;
  justify-content: center;
}

/* v5.57: cap the hero content width so the headline + CTAs don't sprawl
   on very wide viewports. The inline `max-width: 50%` on .bg-content stays
   for narrower viewports where 50% < 720px; this rule kicks in (via min())
   to clamp the content at 720px once 50% would exceed it (i.e. on heroes
   wider than ~1440px). Keeps text at readable line lengths in production. */
.bg-hero > .bg-content {
  max-width: min(50%, 720px) !important;
}

/* v5.58: bottom-align content in the homepage hero composite on desktop.
   The content's inline padding (var(--space-3xl) = up to 120px each side)
   makes content taller than the 640px hero at wide viewports, clipping
   the CTAs. Fix has two parts:
   (1) On desktop, reduce the content's vertical padding to var(--space-xl)
       (~32px each side) — content stays well under 640px so it fits with
       headroom in the hero.
   (2) Make .bg-hero a flex container with align-items: flex-end so the
       (now shorter) content bottom-anchors inside the hero, leaving the
       visual breathing room above it.
   Mobile preserved (the mobile @media block uses position: absolute
   bottom-anchoring with its own padding, untouched by these rules).
   Scoped to :has(.hero-video-panel) so other .bg-hero usages
   (Sec 06 demos) are unaffected. */
@media (min-width: 781px) {
  .bg-hero:has(.hero-video-panel) {
    display: flex !important;
    align-items: flex-end !important;
  }
  .bg-hero:has(.hero-video-panel) > .bg-content {
    padding-top: var(--space-xl) !important;
    padding-bottom: var(--space-xl) !important;
  }
}

/* z 6 — hero food image, positioned at top: 70% so it extends past the
   rounded-bottom of the card. The masthead wrapper has margin-bottom
   reserved for the portion that hangs below. */
.masthead__hero {
  position: absolute;
  z-index: 6;
  top: 70%;
  left: 50%;
  transform: translateX(-50%);
  width: min(80%, 2065px);
  aspect-ratio: 2065 / 600;
  border-radius: clamp(60px, 12vw, 300px);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.masthead__hero img,
.masthead__hero video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ════════════════════════════════════════════════════════════════════
   PER-VARIANT IDENTITY — bars gradient + blob colors
   12 brand accent palette variants. Adding a 13th = one more CSS block.
   ════════════════════════════════════════════════════════════════════ */
/* 1 · Yellow — Restaurant alternate, gallery, etc */
.masthead.is-yellow .masthead__bars { --bars-stop-1: #3C270A; --bars-stop-2: #4F340E; --bars-stop-3: #9DAA26; --bars-stop-4: #FFE364; }
.masthead.is-yellow .masthead__card { --blob-1: var(--color-yellow); --blob-2: var(--color-golden); --blob-3: var(--color-dark-gold); }

/* 2 · Dark Gold — Restaurant (the orange-gold cohesive variant) */
.masthead.is-dark-gold .masthead__bars { --bars-stop-1: #3C1A0A; --bars-stop-2: #4F2810; --bars-stop-3: #AA6B26; --bars-stop-4: #FFA550; }
.masthead.is-dark-gold .masthead__card { --blob-1: var(--color-golden); --blob-2: var(--color-dark-gold); --blob-3: var(--color-red); }

/* 3 · Golden — About / heritage pages */
.masthead.is-golden .masthead__bars { --bars-stop-1: #3C2A0A; --bars-stop-2: #4F3A0E; --bars-stop-3: #AA8A1E; --bars-stop-4: #EAC10C; }
.masthead.is-golden .masthead__card { --blob-1: var(--color-golden); --blob-2: var(--color-yellow); --blob-3: var(--color-dark-gold); }

/* 4 · Red — Bar / specials / promotions */
.masthead.is-red .masthead__bars { --bars-stop-1: #3C0A0A; --bars-stop-2: #4F0E0E; --bars-stop-3: #AA2620; --bars-stop-4: #F12A15; }
.masthead.is-red .masthead__card { --blob-1: var(--color-red); --blob-2: var(--color-dark-gold); --blob-3: var(--color-pink); }

/* 5 · Pink — Date night / cocktails / love */
.masthead.is-pink .masthead__bars { --bars-stop-1: #3C0A1E; --bars-stop-2: #4F0E2C; --bars-stop-3: #AA266A; --bars-stop-4: #EC217D; }
.masthead.is-pink .masthead__card { --blob-1: var(--color-pink); --blob-2: var(--color-purple-glow); --blob-3: var(--color-red); }

/* 6 · Purple Glow — Club / nightlife */
.masthead.is-purple-glow .masthead__bars { --bars-stop-1: #270A3C; --bars-stop-2: #310E4F; --bars-stop-3: #9460FC; --bars-stop-4: #A560FF; }
.masthead.is-purple-glow .masthead__card { --blob-1: var(--color-purple-glow); --blob-2: var(--color-pink); --blob-3: var(--color-purple); }

/* 7 · Purple — Private hire / events VIP (uses Purple Glow for word — pure Purple too dark) */
.masthead.is-purple .masthead__bars { --bars-stop-1: #150A3C; --bars-stop-2: #20104F; --bars-stop-3: #3A14A0; --bars-stop-4: #5400C2; }
.masthead.is-purple .masthead__card { --blob-1: var(--color-purple); --blob-2: var(--color-purple-glow); --blob-3: var(--color-pink); }

/* 8 · Turquoise — Location / contact */
.masthead.is-turquoise .masthead__bars { --bars-stop-1: #0A2A3C; --bars-stop-2: #0E3F4F; --bars-stop-3: #207FA8; --bars-stop-4: #00A8E0; }
.masthead.is-turquoise .masthead__card { --blob-1: var(--color-turquoise); --blob-2: var(--color-light-tur); --blob-3: var(--color-prism); }

/* 9 · Light Tur — Bay / outdoor / fresh */
.masthead.is-light-tur .masthead__bars { --bars-stop-1: #0A2A3C; --bars-stop-2: #0E3F4F; --bars-stop-3: #1A9AB5; --bars-stop-4: #0DE3FF; }
.masthead.is-light-tur .masthead__card { --blob-1: var(--color-light-tur); --blob-2: var(--color-turquoise); --blob-3: var(--color-prism); }

/* 10 · Prism — Brand / identity pages */
.masthead.is-prism .masthead__bars { --bars-stop-1: #0A2A3C; --bars-stop-2: #0E3F4F; --bars-stop-3: #207090; --bars-stop-4: #00A0C2; }
.masthead.is-prism .masthead__card { --blob-1: var(--color-prism); --blob-2: var(--color-light-tur); --blob-3: var(--color-purple-glow); }

/* 11 · Green — Sustainability / sourcing / community */
.masthead.is-green .masthead__bars { --bars-stop-1: #0A3C18; --bars-stop-2: #0E4F1E; --bars-stop-3: #1FAA45; --bars-stop-4: #36FB67; }
.masthead.is-green .masthead__card { --blob-1: var(--color-green); --blob-2: var(--color-whatsapp); --blob-3: var(--color-prism); }

/* 12 · WhatsApp — Events (purple→green gradient per Figma) */
.masthead.is-whatsapp .masthead__bars { --bars-stop-1: #270A3C; --bars-stop-2: #000201; --bars-stop-3: #0F6524; --bars-stop-4: #53FF7E; }
.masthead.is-whatsapp .masthead__card { --blob-1: var(--color-whatsapp); --blob-2: var(--color-green); --blob-3: var(--color-purple-glow); }

/* Mobile */
@media (max-width: 780px) {
  /* v5.50: canonical mobile masthead pattern matches the reference target.
     Structure: hero image full-bleed at the top (edge-to-edge, no rounded
     corners), heavy gradient at its bottom edge fading into the bars area
     below; audio-wave bars only span the LOWER portion (below the hero),
     no separate floating card with corners. The whole masthead reads as
     ONE continuous panel: hero → soft gradient → bars + content stacked.
     Same DOM as desktop — just CSS reposition. */
  .masthead {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;             /* clip any bleed past the masthead edges */
  }
  /* Bars span the LOWER portion only — from where the hero ends to the
     bottom of the masthead. Top is anchored to match the hero's exact
     bottom edge: hero is aspect-ratio 13/10 at full viewport width on
     mobile, so its height = 100vw * 10/13 ≈ 76.92vw. Using this anchor
     ensures bars are flush against the hero with no gap even if the
     masthead's total height changes (content amount, etc.).
     v5.51: keep the SVG at desktop pixel scale so only the center 2-4
     bars are visible on mobile (the 390-wide container with overflow:
     hidden crops the SVG horizontally). Without this override the SVG
     would compress all 12 bars into 390px. */
  .masthead .masthead__bars {
    position: absolute;
    top: calc(100vw * 10 / 13);    /* exact bottom of the hero (aspect 13/10) */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    border-radius: 0;
  }
  .masthead .masthead__bars svg {
    width: 1400px !important;      /* desktop pixel scale — bars stay full-size */
    max-width: none !important;    /* defeat the global img,svg max-width:100% */
    height: auto !important;       /* preserve aspect ratio, no vertical squish */
    min-height: 100% !important;   /* but still fill the bars area vertically */
    left: 50% !important;          /* center horizontally on the masthead */
    transform: translateX(-50%) !important;
    bottom: 0 !important;          /* anchor SVG bottom to bars-area bottom */
    top: auto !important;
  }
  .masthead__card {
    min-height: auto;
    border-radius: 0;             /* no separate card shape on mobile */
    order: 2;
    background: transparent;       /* bars show through */
    /* v5.57: reset desktop bottom-align — mobile uses natural flow from top */
    display: block;
    justify-content: initial;
  }
  .masthead__hero {
    position: relative;
    z-index: 4;
    width: 100%;
    aspect-ratio: 13/10;           /* v5.52: grow hero so its bottom reaches the bars start (~300px tall at 390 wide) */
    top: auto;
    left: auto;
    transform: none;
    border-radius: 0;              /* full-bleed, no rounded corners */
    margin: 0;                     /* flush against the bars area below */
    box-shadow: none;
    order: 1;
    overflow: hidden;              /* gradient is contained inside hero bounds */
  }
  /* Heavy gradient at the BOTTOM EDGE of the hero, fully contained within
     the hero's bounds. Bottom edge of the gradient = bottom edge of the
     hero image (exact pixel anchor). Softens the boundary so the hero
     dissolves into pure dark at its bottom edge — which is precisely
     where the bars area begins. Same canonical pattern as Sec 05 mobile
     hero-video-panel ::after. */
  .masthead__hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;                     /* anchor to hero's bottom edge — exact pixel */
    height: 50%;                   /* gradient covers bottom half of the hero */
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(16,18,38,0.4) 40%,
      rgba(16,18,38,0.85) 75%,
      var(--bg) 100%);
    pointer-events: none;
    z-index: 1;
  }
  .masthead__content {
    position: relative;
    z-index: 5;
    padding: var(--space-xl) var(--space-md);
    text-align: center;
    align-items: center;
  }
  /* Button layout inherits from .cta-stack rules. */
}



/* Full-width demo blocks — for showing background/hero recipes edge-to-edge
   as they'd actually render in production. Used as companions to the
   constrained boxed demos. */
.ds-block.is-fullwidth-demo {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  border: none;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  padding: 0;
  margin-bottom: var(--space-2xl);
  background: transparent;
  position: relative;
}
.ds-block.is-fullwidth-demo > .ds-fw-label {
  position: absolute;
  top: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(16, 18, 38, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-yellow);
  pointer-events: none;
}
.ds-block.is-fullwidth-demo > .ds-fw-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-yellow);
  box-shadow: 0 0 8px var(--color-yellow);
}

/* v5.56: on mobile, contained Sec 06 background demos go full-bleed + square
   edge-to-edge — matches the design rule that on mobile the animated-background
   atmospheres always span the full viewport with no rounded corners. Targets
   the .bg-party / .bg-footer / .bg-hero atmospheres that live directly inside
   a non-fullwidth .ds-block (excluding the canonical hero composite which has
   its own mobile treatment in §05's bg-hero rules). */
@media (max-width: 780px) {
  #backgrounds .ds-block:not(.is-fullwidth-demo) {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
  #backgrounds .ds-block:not(.is-fullwidth-demo) > .ds-block-title,
  #backgrounds .ds-block:not(.is-fullwidth-demo) > .ds-block-desc {
    padding: 0 var(--space-md);
  }
  #backgrounds .ds-block:not(.is-fullwidth-demo) > .bg-party,
  #backgrounds .ds-block:not(.is-fullwidth-demo) > .bg-footer,
  #backgrounds .ds-block:not(.is-fullwidth-demo) > .bg-hero {
    border-radius: 0 !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   ════════════════════════════════════════════════════════════════════════════
   v5.34 — 16 NEW SECTIONS (Pass 1: atoms, Pass 2: composite sections)
   ════════════════════════════════════════════════════════════════════════════
   Added 2026-05-14. Inherits all v5.33 tokens, components, and patterns. Hex
   literals from Figma are kept verbatim where they don't match existing tokens
   (per user preference). Caveat Brush rule widened in :root to allow accent
   words in addition to dish names.
   ════════════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────────────
   PASS 1 · SHARED ATOMS (used across §01–§16)
   ──────────────────────────────────────────────────────────────────────────── */

/* (A1) HIGHLIGHT BAR — short colored glowing rectangle behind a word.
   Used in §01 (yellow under TODAY'S→ SPECIALS), §03 (pink under HAPPY→ HOURS),
   §04 (red under COCKTAIL→ DAY). Figma: 169×46px, border-radius 1.8px, glow
   text-shadow + inset white highlight. */
.highlight-bar {
  display: inline-block;
  position: absolute;
  border-radius: 2px;
  border: 3px solid currentColor;
  box-shadow:
    0 0 14px currentColor,
    0 -1px 6px currentColor,
    inset 1px 3px 2px rgba(255,255,255,0.25);
  pointer-events: none;
}
.highlight-bar.is-yellow { color: var(--color-yellow); }
.highlight-bar.is-pink   { color: var(--color-pink); }
.highlight-bar.is-red    { color: var(--color-red); }

/* v5.44: .text-glow-blurred component removed. The Caveat Brush blurred-decorative
   pattern is now achieved with canonical .is-accent + <span class="is-{color} is-ghost">
   on any sized element, plus filter: blur() if blur is needed. */


/* (A3) BADGE-CIRCLE — scalloped wax-seal sticker (12-point burst) with neon
   glow, used on §02 / §05 / §09 menu cards (.is-hot red, .is-new green).
   v5.36: position is center-top of card straddling the photo top edge
   (was top-left at 26/27px); shape is the Figma "Star 2" scalloped burst,
   rendered via inline <svg> child (.badge-circle__shape) so drop-shadow
   glow extends past the scalloped silhouette. Badge MUST be a child of
   .menu-card (NOT .menu-card__photo) so the upper half can extend above
   the photo without being clipped by photo's overflow:hidden. */
.badge-circle {
  position: absolute;
  top: calc(-0.5 * var(--badge-size));
  left: 50%;
  transform: translateX(-50%);
  width: var(--badge-size);
  height: var(--badge-size);
  --badge-size: clamp(52px, 4.4vw, 78px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-accent);
  font-size: calc(var(--badge-size) * 0.36);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--color-white);
  z-index: 3;
  pointer-events: none;
  line-height: 1;
}
.badge-circle__shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: visible;
}
.badge-circle__label {
  position: relative;
  z-index: 2;
  padding: 0 4%;
}
.badge-circle.is-hot .badge-circle__shape {
  fill: var(--color-red);
  filter:
    drop-shadow(0 0 8px rgba(255, 0, 79, 0.83))
    drop-shadow(0 0 8px #9E1001);
}
.badge-circle.is-new .badge-circle__shape {
  fill: #0FC23C;
  filter:
    drop-shadow(0 0 10px #0FC23C)
    drop-shadow(0 0 8px #076B20);
}

/* (A4) CHECKPOINT-ROW — colored square outline bullet + text. Vertical lists
   in §01 specials (yellow), §03 happy hours (pink), §06 bottle service (white).
   Figma (v5.38): ✓ checkmark glyph, uppercase, scoped to the row's color. */
.checkpoint-list {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2vw, 16px);
}
.checkpoint-row {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 1.9vw, 34px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--color-white);
}
.checkpoint-row::before {
  content: "✓";
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: clamp(18px, 1.6vw, 29px);
  font-weight: 700;
  line-height: 1;
  /* checkmark glyph scales with row font-size by default since it's a text glyph */
}
.checkpoint-list.is-yellow .checkpoint-row::before { color: var(--color-yellow); }
.checkpoint-list.is-pink   .checkpoint-row::before { color: var(--color-pink); }
.checkpoint-list.is-white  .checkpoint-row::before { color: var(--color-white); }
/* .is-gold (v5.38) — colors BOTH the square AND the row text golden. Used in
   §06 Bottle Service. Other variants only color the square; the row text stays
   white. This is the only variant where text and square match. */
.checkpoint-list.is-gold   .checkpoint-row          { color: var(--color-golden); }
.checkpoint-list.is-gold   .checkpoint-row::before  { color: var(--color-golden); }

/* (A5) TAB-TOGGLE — pill toggle group. Active = white-filled or color-filled
   with glow, inactive = transparent + colored outline. Used in §06 bottle
   service tiers, §07 Upcoming/Older, §10 same. */
.tab-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: transparent;
}
.tab-toggle__btn {
  /* v5.45: typography moved to .text-pill utility class in markup.
     Component carries layout + interaction only.
     v5.47: hover behavior matches canonical .btn-pill (scale + glow). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  color: var(--color-white);
  border: 3px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
/* v5.47: hover state — same scale as canonical .btn-pill. Glow color
   varies per parent .tab-toggle.is-{color} variant. */
.tab-toggle__btn:hover { transform: scale(1.04); }
.tab-toggle.is-cyan .tab-toggle__btn:hover  { box-shadow: 0 0 24px rgba(0,168,224,0.4); }
.tab-toggle.is-green .tab-toggle__btn:hover { box-shadow: 0 0 24px rgba(54,251,103,0.4); }
.tab-toggle.is-pink .tab-toggle__btn:hover  { box-shadow: 0 0 24px rgba(236,33,125,0.4); }
.tab-toggle.is-gold .tab-toggle__btn:hover  { box-shadow: 0 0 24px rgba(234,193,12,0.4); }
.tab-toggle.is-purple .tab-toggle__btn:hover { box-shadow: 0 0 24px rgba(165,96,255,0.4); }
.tab-toggle.is-red .tab-toggle__btn:hover    { box-shadow: 0 0 24px rgba(255,97,81,0.4); }
.tab-toggle.is-yellow .tab-toggle__btn:hover { box-shadow: 0 0 24px rgba(242,205,42,0.4); }
.tab-toggle__btn.is-active {
  background: var(--color-white);
  color: #2D2D2D;
  box-shadow: 0 0 24px rgba(255,255,255,0.86);
}
.tab-toggle__btn.is-outline {
  border-color: currentColor;
}
.tab-toggle.is-cyan  .tab-toggle__btn.is-outline { color: var(--color-turquoise); }
.tab-toggle.is-green .tab-toggle__btn.is-outline { color: #0FC23C; }
.tab-toggle.is-gold  .tab-toggle__btn.is-outline { color: var(--color-golden); }
.tab-toggle.is-red   .tab-toggle__btn.is-outline { color: var(--color-red); }
/* v5.45: canonical active states — one per brand color.
   Components apply .is-active-{color} directly, no inline style overrides. */
.tab-toggle__btn.is-active-yellow {
  background: var(--color-yellow);
  color: var(--color-black);
  border-color: var(--color-yellow);
  box-shadow: 0 0 30px rgba(242,205,42,0.61), inset 0 0 16px var(--color-red-soft);
}
.tab-toggle__btn.is-active-pink {
  background: var(--color-pink);
  color: var(--color-white);
  border-color: var(--color-pink);
  box-shadow: 0 0 30px rgba(236,33,125,0.55);
}
.tab-toggle__btn.is-active-cyan {
  background: var(--color-light-tur);
  color: var(--color-black);
  border-color: var(--color-light-tur);
  box-shadow: 0 0 30px rgba(13,227,255,0.55);
}
.tab-toggle__btn.is-active-green {
  background: var(--color-green);
  color: var(--color-black);
  border-color: var(--color-green);
  box-shadow: 0 0 30px rgba(54,251,103,0.55);
}
.tab-toggle__btn.is-active-purple {
  background: var(--color-purple-glow);
  color: var(--color-white);
  border-color: var(--color-purple-glow);
  box-shadow: 0 0 30px rgba(165,96,255,0.55);
}
.tab-toggle__btn.is-active-gold {
  background: var(--color-golden);
  color: var(--color-black);
  border-color: var(--color-golden);
  box-shadow: 0 0 30px rgba(234,193,12,0.55);
}
.tab-toggle__btn.is-active-red {
  background: var(--color-red-glow);
  color: var(--color-white);
  border-color: var(--color-red-glow);
  box-shadow: 0 0 30px rgba(255,97,81,0.55);
}

/* (A6) COUNTDOWN-DIGIT — DD:HH:MM digit cluster with golden caption.
   Used in §08 featured event. */
.countdown {
  display: flex;
  align-items: flex-start;
  gap: clamp(6px, 0.7vw, 12px);
  justify-content: center;
}
.countdown__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: clamp(60px, 6vw, 120px);
}
.countdown__digit {
  /* v5.47: typography stripped. Apply canonical .text-display in markup
     (default countdown size) or scope via parent component CSS rule. */
  color: var(--color-white);
  text-transform: uppercase;
  line-height: 0.9;
}
.countdown__label {
  /* v5.47: typography stripped. Apply canonical .text-caption in markup. */
  color: var(--color-golden);
  text-transform: uppercase;
  margin-top: 8px;
}
.countdown__colon {
  /* Inherits font-size + family from parent .countdown via natural cascade */
  color: var(--color-white);
  line-height: 0.9;
  align-self: flex-start;
  padding-top: 2px;
}
.countdown.is-pink   .countdown__colon { color: var(--color-pink); }
.countdown.is-purple .countdown__colon { color: var(--color-purple-glow); }
.countdown.is-cyan   .countdown__colon { color: var(--color-light-tur); }

/* (A7) ROUND-NAV-BTN — the 100×100 circular right-arrow button used in
   §07/§10/§11 event grids and §15 about-page horizontal galleries. */
.round-nav-btn {
  width: clamp(60px, 6vw, 100px);
  height: clamp(60px, 6vw, 100px);
  border-radius: 50%;
  background: rgba(16,18,38,0.69);
  border: 3px solid var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  backdrop-filter: blur(5px);
}
.round-nav-btn:hover { transform: scale(1.05); }
.round-nav-btn.is-cyan {
  border-color: #FFF9E0;
  box-shadow: 0 -1px 9px var(--color-light-tur), 0 0 38px var(--color-white), inset 0 3px 17px 3px var(--color-light-tur);
}
.round-nav-btn.is-green {
  border-color: #D2FFC5;
  box-shadow: 0 -1px 9px #90FF64, 0 0 38px var(--color-white), inset 0 3px 17px 3px #83FF64;
}
.round-nav-btn.is-pink {
  border-color: #FFD0E0;
  box-shadow: 0 -1px 9px var(--color-pink), 0 0 38px var(--color-white), inset 0 3px 17px 3px var(--color-pink);
}
.round-nav-btn svg { width: 50%; height: 50%; stroke: currentColor; fill: none; stroke-width: 4; }


/* ────────────────────────────────────────────────────────────────────────────
   §15 · BANNER-PILL  ─ horizontal 2481×673 pill section with photo + content
   Used by:
     §15.1 Today's Specials (yellow border, MONDAY + HAPPY HOURS toggle pills)
     §15.2 Happy Hours (pink border, no day pills)
     §15.3 Cocktail of the Day (red border, photo-left via .is-reverse)

   Three columns: headline | photo | info.
   Photo is a vertical pill (490×575 per Figma Rectangle 12), flat black background.
   Right column has tiered hierarchy: pills → spec list → fineprint → CTA.

   Mobile (<900px): becomes a vertical card with per-variant gradient background
   and pinstripe overlay inside the gradient area (canonical "over color" pattern).
   ──────────────────────────────────────────────────────────────────────────── */
.banner-pill {
  position: relative;
  width: 100%;
  aspect-ratio: 2481 / 673;
  background: var(--color-black);
  border: 6px solid currentColor;
  border-radius: 450px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr) minmax(0, 1.3fr);
  align-items: center;
  padding: 0 clamp(60px, 6%, 160px);
  gap: clamp(20px, 3%, 80px);
}
.banner-pill.is-yellow { color: var(--color-yellow); }
.banner-pill.is-pink   { color: var(--color-pink); }
.banner-pill.is-red    { color: var(--color-red); }


/* ── HEADLINE COLUMN ──────────────────────────────────────────────────── */
.banner-pill__head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  z-index: 2;
  place-self: center start;
}
.banner-pill__head .blob {
  position: absolute;
  left: -10%;
  top: 50%;
  transform: translateY(-50%) rotate(5deg);
  width: 95%;
  height: 80%;
  background: currentColor;
  opacity: 0.55;
  filter: blur(66px);
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
}
.banner-pill__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, 0.8vw, 18px);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 80px);
  line-height: 0.9;
  letter-spacing: -0.08em;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: clamp(2px, 0.3vw, 10px);
}
.banner-pill__eyebrow svg {
  flex: none;
  width: clamp(28px, 2.5vw, 56px);
  height: auto;
}
.banner-pill__accent {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.08em;
  text-transform: uppercase;
  color: transparent;
  padding-right: 0.05em;
}
/* Per-variant accent stroke/glow — explicit color, NOT currentColor
   (currentColor resolves to the element's transparent fill and breaks the stroke) */
.banner-pill.is-yellow .banner-pill__accent {
  -webkit-text-stroke: 0.03em var(--color-yellow);
  text-shadow: 0 0 0.15em var(--color-yellow), 0 -0.01em 0.06em var(--color-yellow);
}
.banner-pill.is-pink .banner-pill__accent {
  -webkit-text-stroke: 0.03em var(--color-pink);
  text-shadow: 0 0 0.15em var(--color-pink), 0 -0.01em 0.06em var(--color-pink);
}
.banner-pill.is-red .banner-pill__accent {
  -webkit-text-stroke: 0.03em var(--color-red);
  text-shadow: 0 0 0.15em var(--color-red), 0 -0.01em 0.06em var(--color-red);
}


/* ── PHOTO COLUMN ─────────────────────────────────────────────────────── */
/* Figma Rectangle 12: 19.75% × 85.47% of 2481×673 ≈ 490×575 (taller than wide).
   border-radius 9999px = vertical pill. Sized by PILL HEIGHT not viewport width
   so it always fits inside the pill at any viewport. */
.banner-pill__photo {
  position: relative;
  z-index: 2;
  aspect-ratio: 490 / 575;
  height: 85%;
  width: auto;
  max-height: 575px;
  border-radius: 9999px;
  overflow: hidden;
  justify-self: center;
  align-self: center;
  background: var(--color-black);
}
.banner-pill__photo img,
.banner-pill__photo video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ── INFO COLUMN ──────────────────────────────────────────────────────── */
.banner-pill__info {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: clamp(16px, 2vw, 40px) 0;
  color: var(--color-white);
  gap: clamp(8px, 1vw, 18px);
}

/* MONDAY + HAPPY HOURS toggle buttons (yellow variant only) */
.banner-pill__pills {
  display: flex;
  gap: clamp(8px, 0.8vw, 16px);
  align-self: flex-start;
  flex-wrap: nowrap;
  white-space: nowrap;
  margin-bottom: clamp(4px, 0.5vw, 12px);
}
.pill-day,
.pill-hh {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(13px, 1.4vw, 26px);
  line-height: 0.9;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: inherit;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.pill-day:hover, .pill-hh:hover { transform: scale(1.04); }
.pill-day {
  padding: clamp(7px, 0.7vw, 12px) clamp(12px, 1.2vw, 20px);
  border-radius: 160px;
  background: var(--color-yellow);
  color: #2D2D2D;
  border: 3px solid var(--color-yellow);
  box-shadow:
    0 0 30px rgba(255, 227, 100, 0.5),
    inset 0 0 12px var(--color-red-soft);
}
.pill-day:hover {
  /* Already filled — intensify glow on hover, matches .btn-pill.is-yellow:hover */
  box-shadow: 0 0 44.83px rgba(255,227,100,0.5), 0 0 49.74px var(--color-yellow), inset 0 0 8.59px rgba(255,255,255,0.6);
}
.pill-hh {
  padding: clamp(7px, 0.7vw, 12px) clamp(12px, 1.2vw, 20px);
  border-radius: 90px;
  background: var(--color-black);
  border: 3px solid var(--color-yellow);
  color: var(--color-white);
}
.pill-hh:hover {
  /* Outlined → fills with yellow on hover, matches .btn-pill.is-yellow:hover */
  background: var(--color-yellow);
  color: var(--color-black);
  border-color: var(--color-yellow);
  box-shadow: 0 0 44.83px rgba(255,227,100,0.5), 0 0 49.74px var(--color-yellow), inset 0 0 8.59px rgba(255,255,255,0.6);
}


/* ── SPEC-LIST (✓ checkmark feature list — sentence case) ────────────── */
/* Distinct from .checkpoint-row (§06 Bottle Service, square outline, uppercase). */
.spec-list {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.6vw, 12px);
}
.spec-row {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.7vw, 14px);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(12px, 1.2vw, 22px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-white);
}
.spec-row::before {
  content: "✓";
  flex: none;
  font-weight: 700;
  line-height: 1;
}
.spec-list.is-yellow .spec-row::before { color: var(--color-yellow); }
.spec-list.is-pink   .spec-row::before { color: var(--color-pink); }
.spec-list.is-red    .spec-row::before { color: var(--color-red); }


/* ── FINEPRINT ────────────────────────────────────────────────────────── */
.banner-pill__fineprint {
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.3vw, 8px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(11px, 1vw, 18px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin-top: clamp(6px, 0.8vw, 16px);
}
/* Yellow variant uses #EAC10C (hex literal per Figma — diverges from --color-golden) */
.banner-pill.is-yellow .banner-pill__fineprint { color: #EAC10C; }
.banner-pill.is-pink   .banner-pill__fineprint { color: var(--color-pink); }
.banner-pill__fineprint p {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.banner-pill__fineprint a {
  color: inherit;
  text-decoration: underline;
}
/* Pink variant has • bullet dots before each fineprint line */
.banner-pill.is-pink .banner-pill__fineprint p::before {
  content: "•";
  flex: none;
  font-size: 0.7em;
  line-height: 1;
}


/* ── CTA BUTTON (SEE FULL MENU / RESERVE) ─────────────────────────────── */
/* Matches .btn-pill design-system pattern: outlined resting, fills with variant
   color on hover, glows with variant recipe. Text stays white in resting state. */
.banner-pill__cta {
  align-self: flex-start;
  margin-top: clamp(6px, 0.7vw, 14px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: clamp(5px, 0.5vw, 10px) clamp(10px, 1vw, 20px);
  border-radius: 60px;
  background: var(--color-black);
  border: 2px solid currentColor;
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(11px, 0.9vw, 16px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.banner-pill__cta:hover { transform: scale(1.04); }

/* Per-variant resting: border + arrow color (text stays white) */
.banner-pill.is-yellow .banner-pill__cta { border-color: #EAC10C; }
.banner-pill.is-yellow .banner-pill__cta svg { color: #EAC10C; }
.banner-pill.is-pink .banner-pill__cta { border-color: var(--color-pink); }
.banner-pill.is-pink .banner-pill__cta svg { color: var(--color-pink); }
.banner-pill.is-red .banner-pill__cta { border-color: var(--color-red); }
.banner-pill.is-red .banner-pill__cta svg { color: var(--color-red); }

/* Per-variant hover: fill with variant color, invert text, glow */
.banner-pill.is-yellow .banner-pill__cta:hover {
  background: #EAC10C;
  color: var(--color-black);
  border-color: #EAC10C;
  box-shadow: 0 0 44.83px rgba(234,193,12,0.5), 0 0 49.74px #EAC10C, inset 0 0 8.59px rgba(255,255,255,0.6);
}
.banner-pill.is-yellow .banner-pill__cta:hover svg { color: var(--color-black); }
.banner-pill.is-pink .banner-pill__cta:hover {
  background: var(--color-pink);
  color: var(--color-white);
  border-color: var(--color-pink);
  box-shadow: 0 0 44.83px rgba(236,33,125,0.5), 0 0 49.74px var(--color-pink), inset 0 0 8.59px rgba(255,255,255,0.6);
}
.banner-pill.is-pink .banner-pill__cta:hover svg { color: var(--color-white); }
.banner-pill.is-red .banner-pill__cta:hover {
  background: var(--color-red);
  color: var(--color-white);
  border-color: var(--color-red);
  box-shadow: var(--glow-red);
}
.banner-pill.is-red .banner-pill__cta:hover svg { color: var(--color-white); }

.banner-pill__cta svg {
  flex: none;
  width: 12px;
  height: 12px;
  color: currentColor;
  transition: color var(--dur-base) var(--ease-out);
}


/* ── COCKTAIL-OF-DAY FEATURE BLOCK (red variant only) ─────────────────── */
.banner-pill__feature {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.5vw, 12px);
}
.banner-pill__feature h3 {
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--color-white);
  margin: 0;
}
.banner-pill__feature .price {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(14px, 1.4vw, 28px);
  letter-spacing: -0.04em;
  color: var(--color-red);
  line-height: 1;
}
.banner-pill__feature .desc {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(10px, 1vw, 18px);
  line-height: 1.3;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  max-width: 32ch;
  margin-bottom: clamp(4px, 0.5vw, 10px);
}


/* ── REVERSED LAYOUT (Cocktail of the Day) ─────────────────────────────── */
.banner-pill.is-reverse {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr) minmax(0, 1.35fr);
}
.banner-pill.is-reverse .banner-pill__head  { order: 1; }
.banner-pill.is-reverse .banner-pill__photo { order: 2; }
.banner-pill.is-reverse .banner-pill__info  { order: 3; }


/* ─────────────────────────────────────────────────────────────────────────
   MOBILE (<900px) — vertical card with per-variant gradient + pinstripe.
   Photo on top, headline + content stacked below. Gradient background carries
   the variant color; canonical pinstripe overlay sits inside the gradient area
   (over color — bars pick up the underlying hue per design-system §pinstripe).
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .banner-pill,
  .banner-pill.is-reverse {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
    width: 100%;
    border: none;
    border-radius: 32px;
    padding: 0;
    gap: 0;
    overflow: hidden;
  }

  /* Per-variant mobile gradient backgrounds */
  .banner-pill.is-yellow {
    background: linear-gradient(180deg, var(--color-black) 0%, #4A2A0C 30%, #8A4A0C 65%, #C77A1A 100%);
  }
  .banner-pill.is-pink {
    background: linear-gradient(180deg, var(--color-black) 0%, #6B1247 40%, #4B1A8C 100%);
  }
  .banner-pill.is-red {
    background: linear-gradient(180deg, var(--color-black) 0%, #4A0915 40%, #1F2A6B 100%);
  }

  /* Pinstripe overlay — ONE continuous layer on the banner-pill itself,
     covering the full pill. The photo (order 1) has its own opaque black
     background and sits ABOVE the pinstripe via z-index, so visually the
     pinstripe only shows below the photo. Previously this was split between
     __head and __info, creating a visible seam where the two halves had
     independent background-position origins. */
  .banner-pill { isolation: isolate; }
  .banner-pill::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='55' height='100' viewBox='0 0 55 100' preserveAspectRatio='none'><defs><linearGradient id='g' x1='66' y1='50' x2='-13' y2='50' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%23ffffff' stop-opacity='0'/><stop offset='0.7' stop-color='%23282828' stop-opacity='0.6'/><stop offset='1' stop-color='%23ffffff' stop-opacity='0'/></linearGradient></defs><rect width='55' height='100' fill='url(%23g)' fill-opacity='0.2'/></svg>");
    background-size: 44px 100%;
    background-repeat: repeat-x;
    background-position: 0 0;
  }
  /* Photo + content sit above the overlay. Photo's black bg covers the top. */
  .banner-pill__photo { position: relative; z-index: 2; }
  .banner-pill__head,
  .banner-pill__info { position: relative; z-index: 1; }

  /* Photo on top: wide rectangle (16:11 aspect), photo's own black bg, no radius */
  .banner-pill__photo {
    order: 1;
    width: 100%;
    max-width: none;
    aspect-ratio: 16 / 11;
    height: auto;
    border-radius: 0;
    align-self: stretch;
    background: var(--color-black);
  }
  .banner-pill__head {
    order: 2;
    align-self: stretch;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 24px 24px 0;
    height: auto;
    width: 100%;
  }
  .banner-pill__head .blob { display: none; }
  .banner-pill__info {
    order: 3;
    align-self: stretch;
    padding: 16px 24px 28px;
    height: auto;
    align-items: flex-start;
  }
  /* Override reverse-order on mobile so photo always stays on top */
  .banner-pill.is-reverse .banner-pill__photo { order: 1; }
  .banner-pill.is-reverse .banner-pill__head  { order: 2; }
  .banner-pill.is-reverse .banner-pill__info  { order: 3; }

  /* Mobile-tuned type */
  .banner-pill__eyebrow { font-size: clamp(28px, 9vw, 44px); margin-bottom: 4px; }
  .banner-pill__eyebrow svg { width: 24px; }
  .banner-pill__accent { font-size: clamp(36px, 12vw, 60px); }
  .banner-pill__pills { flex-wrap: wrap; }
  .pill-day, .pill-hh { font-size: 18px; }
  .spec-row { font-size: 18px; }
  .banner-pill__fineprint { font-size: 13px; }
  .banner-pill__fineprint p::before {
    content: "•";
    flex: none;
    font-size: 0.7em;
    line-height: 1;
  }
  .banner-pill.is-yellow .banner-pill__fineprint { color: var(--color-white); }
  .banner-pill.is-yellow .banner-pill__fineprint p::before { color: var(--color-yellow); }

  /* CTA full-width mobile pattern — matches .masthead__cta .btn-pill mobile rule */
  .banner-pill__cta {
    align-self: stretch;
    width: 100%;
    max-width: 280px;
    margin: 16px auto 0;
    justify-content: center;
    font-size: 14px;
    padding: 12px 24px;
  }
  /* Red variant: button nested inside .banner-pill__feature.
     Stretch the feature block; center the button inside it. */
  .banner-pill__feature {
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  .banner-pill__feature .banner-pill__cta { align-self: center; }

  /* Red-variant feature block on mobile */
  .banner-pill__feature h3 { font-size: 36px; }
  .banner-pill__feature .price { font-size: 22px; }
  .banner-pill__feature .desc { font-size: 14px; }
}


/* ────────────────────────────────────────────────────────────────────────────
   §02/§05 · MENU-CARD + MENU-SIDEBAR  —  v5.36 rebuild (May 14 2026)
   Food menu (§02): 5 cards/category + 6th placeholder card with "See full menu"
   pill CTA. Gold/yellow/red/turquoise prices, Italian descriptions, optional
   HOT/NEW badge centered above the photo straddling the top edge.
   Cocktails menu (§05): same skeleton, pink price, no description line.

   What changed from v5.35:
   • Photo is a horizontal stadium pill (aspect 2.1:1, large clamped border-radius)
     instead of a near-disc. On hover the photo becomes a SQUARE with rounded
     corners (aspect 1:1), AND the text below hides — card becomes "just the
     big photo" per the Figma rest/hover behavior.
   • Card name + price are now on SEPARATE rows (name → italian desc → price →
     divider) instead of a competing horizontal row. Removed .menu-card__row.
   • Card name clamp ceiling 44 (was 65), price ceiling 28 (was 30), italian
     desc ceiling 14 (was 22). Demo-scale per the Figma 2079→1400 ratio.
   • Category h1 clamp ceiling 72 (was 100). Italian sub clamp ceiling 18 (was 34).
   • Sidebar narrowed: clamp(180px, 14vw, 240px) (was 22vw / 280-385). Border
     2px (was 3px). Per-link font dropped to clamp(12, 1.05vw, 17), wrap allowed
     so 2-word categories take 2 lines per Figma rhythm. ALL pill = active
     emphasis with slightly larger padding + bolder weight.
   • Cyan as the sidebar's default border color (was gold). .is-gold remains
     for the food-menu sidebar; new variant if a pink one is needed.
   • Row-gap in card grid bumped to clamp(48, 4.5vw, 72) so HOT/NEW badges
     of next row clear the divider line of previous row.
   • Photo transition speed: --dur-base (0.35s) matches .btn-pill and rest of
     site (was --dur-slow 0.6s — felt sluggish).
   ──────────────────────────────────────────────────────────────────────────── */

/* Top-level grid — sidebar + cards area */
.menu-grid {
  display: grid;
  grid-template-columns: clamp(180px, 14vw, 240px) minmax(0, 1fr);
  gap: clamp(20px, 2.5vw, 40px);
  align-items: start;
}
.menu-grid__main {
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 3.5vw, 60px);
}

/* Category header */
.menu-category {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 32px);
}
.menu-category__head {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.5vw, 10px);
}
.menu-category__title {
  /* v5.44: typography moved to .text-display utility class in markup. */
  text-transform: uppercase;
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.menu-category__title .emoji { font-size: 0.95em; line-height: 1; }
.menu-category__desc {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(13px, 1.05vw, 18px);
  line-height: 1.25;
  letter-spacing: -0.04em;
}
.menu-category.is-red       .menu-category__desc { color: var(--color-red); }
.menu-category.is-gold      .menu-category__desc { color: var(--color-golden); }
.menu-category.is-turquoise .menu-category__desc { color: var(--color-prism); }
.menu-category.is-yellow    .menu-category__desc { color: var(--color-yellow); }
.menu-category.is-pink      .menu-category__desc { color: var(--color-pink); }
.menu-category.is-purple    .menu-category__desc { color: var(--color-purple-glow); }

/* Card grid — 3 columns at desktop.
   Row-gap intentionally larger than column-gap to clear HOT/NEW badge from
   the previous row's divider line. */
.menu-category__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: clamp(48px, 4.5vw, 72px);
  column-gap: clamp(20px, 2.4vw, 40px);
}

/* The card itself */
.menu-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--color-white);
  padding-bottom: clamp(14px, 1.4vw, 22px);
  border-bottom: 1px solid rgba(255,255,255,0.5);
  isolation: isolate;
}

/* Photo — horizontal pill (stadium) in rested state.
   On hover, becomes a square with rounded corners. Transition matches
   --dur-base (the site's standard interactive speed). */
.menu-card__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 2.1 / 1;
  border-radius: clamp(60px, 6.2vw, 110px);
  overflow: hidden;
  margin-bottom: clamp(12px, 1.3vw, 22px);
  background-size: cover;
  background-position: center;
  background-color: rgba(255,255,255,0.04);
  transition:
    aspect-ratio var(--dur-base) var(--ease-out),
    border-radius var(--dur-base) var(--ease-out);
}
.menu-card__photo img,
.menu-card__photo video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Text stack below the photo */
.menu-card__body {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.9vw, 14px);
  transition:
    opacity var(--dur-fast) var(--ease-out),
    max-height var(--dur-base) var(--ease-out),
    margin var(--dur-base) var(--ease-out);
  overflow: hidden;
  max-height: 400px;
}
.menu-card__name {
  /* v5.44: dish name uses Caveat Brush by spec. Apply .text-h2 .is-accent in markup
     for size + Caveat Brush; this rule carries layout + color only. */
  text-transform: uppercase;
  color: var(--color-white);
  margin: 0;
}
.menu-card__desc {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(11px, 0.85vw, 14px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #C1C1C1;
}
.menu-card__price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 1.6vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.04em;
}

/* Per-category card accents — price color follows the category */
.menu-card.is-red       .menu-card__price { color: var(--color-red); }
.menu-card.is-gold      .menu-card__price { color: var(--color-golden); }
.menu-card.is-turquoise .menu-card__price { color: var(--color-prism); }
.menu-card.is-yellow    .menu-card__price { color: var(--color-yellow); }
.menu-card.is-pink      .menu-card__price { color: var(--color-pink); }
.menu-card.is-purple    .menu-card__price { color: var(--color-purple-glow); }

/* HOVER — photo becomes a square (1:1), text below hides */
.menu-card:hover .menu-card__photo {
  aspect-ratio: 1 / 1;
  border-radius: clamp(40px, 4vw, 70px);
}
.menu-card:hover .menu-card__body {
  opacity: 0;
  max-height: 0;
  margin: 0;
  pointer-events: none;
}

/* Placeholder "See full menu" card — last position. Photo is a dashed
   outline pill; CTA pill centered inside. No hover expansion. */
.menu-card.is-placeholder {
  border-bottom: none;
  padding-bottom: 0;
}
.menu-card.is-placeholder .menu-card__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.18);
}
.menu-card.is-placeholder:hover .menu-card__photo {
  aspect-ratio: 2.1 / 1;
  border-radius: clamp(60px, 6.2vw, 110px);
}
.menu-card.is-placeholder.is-red       { color: var(--color-red); }
.menu-card.is-placeholder.is-gold      { color: var(--color-golden); }
.menu-card.is-placeholder.is-turquoise { color: var(--color-prism); }
.menu-card.is-placeholder.is-yellow    { color: var(--color-yellow); }
.menu-card.is-placeholder.is-pink      { color: var(--color-pink); }

/* Sidebar — sticky scroll-spy filter rail */
.menu-sidebar {
  position: sticky;
  top: 24px;
  align-self: start;
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 1.4vw, 22px) clamp(12px, 1vw, 18px);
  border-radius: clamp(20px, 1.8vw, 28px);
  border: 2px solid currentColor;
  background: transparent;
  gap: clamp(4px, 0.6vw, 10px);
  max-height: calc(100vh - 60px);
  overflow-y: auto;
}
.menu-sidebar.is-gold { color: var(--color-light-tur); }   /* cyan border per Figma */
.menu-sidebar.is-pink { color: var(--color-pink); }
.menu-sidebar__link {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 100px;
  background: transparent;
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(12px, 1.05vw, 17px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: left;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
  cursor: pointer;
  align-self: flex-start;
  /* No nowrap — multi-word categories ("FLAMING TOMAHAWK", "SIGNATURE COCKTAILS")
     wrap to 2 lines per Figma. Differing line counts give the sidebar rhythm. */
}
.menu-sidebar__link:hover { background: rgba(255,255,255,0.08); }
.menu-sidebar__link.is-active {
  background: currentColor;
  color: var(--color-white);
  padding: 12px 22px;
  font-weight: 700;
}
.menu-sidebar.is-gold .menu-sidebar__link.is-active {
  background: var(--color-light-tur);
  color: var(--color-black);
  box-shadow:
    0 0 30px var(--color-light-tur),
    0 0 30px var(--color-prism),
    inset 0 0 16px var(--color-red-soft);
}
.menu-sidebar.is-pink .menu-sidebar__link.is-active {
  background: var(--color-pink);
  color: var(--color-white);
  box-shadow:
    0 0 30px rgba(255,0,79,0.6),
    inset 0 0 16px var(--color-red-soft);
}

@media (max-width: 1023px) {
  .menu-grid { grid-template-columns: 1fr; }
  .menu-sidebar {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    max-height: none;
    gap: 8px;
    padding: 12px 14px;
  }
  .menu-sidebar__link { white-space: nowrap; flex: none; }
  .menu-category__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .menu-category__grid { grid-template-columns: 1fr; }
  /* v5.44: removed bespoke .menu-category__title font-size override — token's own clamp handles responsive scaling */
  .menu-card:hover .menu-card__photo { aspect-ratio: 2.1 / 1; border-radius: clamp(60px, 6.2vw, 110px); }
  .menu-card:hover .menu-card__body { opacity: 1; max-height: 400px; }
}


/* ────────────────────────────────────────────────────────────────────────────
   §07/§10/§11 · EVENT-POSTER-CARD + GLASS-PANEL — v5.37 rebuild (May 15 2026)
   Used by: §07 Sports & Games (cyan), §10 Events & Party's (green),
            §11 Celebrate Big (pink, no-date variant).

   What changed from v5.36:
   • Panel background: dropped the diagonal color-blob slats + flat purple
     base. New recipe is the .masthead__card composition VERBATIM — black
     base + three radial-gradient blobs heavily blurred with the gentle drift
     animation. Per-variant blob colors mirror .masthead.is-turquoise/.is-green/
     .is-pink so §17 reads as a sibling of the masthead, not a one-off.
   • Pinstripe: now uses canonical .bg-pinstripe utility verbatim (was a
     custom .glass-panel__slats implementation). screen-blend over the dark
     masthead base works correctly — no scoped override needed.
   • Card shape: aspect-ratio 0.95/1 with clamp(60,7vw,130) border-radius
     (was custom rounded pill). Matches the squarish event-poster geometry
     from the Figma reference.
   • Hover model: inherits .daypart-hero pattern verbatim — photo dimmed at
     brightness 0.45 (rest), scale(1.04) + brightness 0.6 on hover, --dur-slow.
   • Title: --fs-display (clamp 32-64px, weight 500) — matches "Today's
     specials" and other system section headings. Was custom 36-72px before.
   • Date pill removed — replaced with inline "JUL 16 · 9PM" text + outline
     SVG calendar icon. Cleaner card chrome, conveys more info.
   • Top-right CALENDAR/INQUIRE pill removed — replaced with new
     .glass-panel__link text-link variant (cyan with subtle glow + arrow icon).
     Stays right-aligned on mobile.
   • Neon-word flourish: blur dropped from 3px to 1.5px so it reads as a
     typographic flourish rather than a smudge. Absolutely positioned BEHIND
     the title (z-index 1 below title's z-index 2) so it doesn't overlap.
   • Arrow nav button: canonical .btn-circle. Bug fix: hover now preserves
     translateY(-50%) when scaling (was jumping down by half its height).
   • Pill count: was 6 (CALENDAR + 3 date pills + UPCOMING + OLDER), now 2
     (only the UPCOMING/OLDER toggle remains as a canonical segmented control).
   ──────────────────────────────────────────────────────────────────────────── */

.glass-panel {
  position: relative;
  width: 100%;
  padding: clamp(40px, 5vw, 90px) clamp(28px, 4vw, 80px);
  border-radius: clamp(40px, 4vw, 60px) 0 0 clamp(40px, 4vw, 60px);
  overflow: hidden;
  isolation: isolate;
  background: var(--color-black);   /* same base as .masthead__card */
}

/* THREE-BLOB RADIAL COMPOSITION — verbatim from .masthead__card::before.
   Per-variant blob colors via the --blob-1 / --blob-2 / --blob-3 CSS vars,
   matching the masthead's per-variant identity overrides exactly.
   The radial-gradient stops, sizes, positions, blur, and animation are all
   copied 1:1 from the canonical masthead recipe so §17 reads as a sibling
   of the masthead pattern, not a one-off. */
.glass-panel::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
  background:
    radial-gradient(ellipse 45% 40% at 30% 70%, var(--blob-1) 0%, color-mix(in srgb, var(--blob-1) 50%, transparent) 30%, transparent 60%),
    radial-gradient(ellipse 38% 35% at 78% 28%, var(--blob-2) 0%, color-mix(in srgb, var(--blob-2) 50%, transparent) 30%, transparent 60%),
    radial-gradient(ellipse 55% 55% at 50% 100%, var(--blob-3) 0%, color-mix(in srgb, var(--blob-3) 40%, transparent) 40%, transparent 70%);
  filter: blur(60px);
  animation: bg-drift-glass 7s ease-in-out infinite alternate;
}

/* Per-variant blob colors — match the masthead's matching variants exactly.
   17.1 sports → masthead.is-turquoise blob set
   17.2 events → masthead.is-green blob set
   17.3 celebrate → masthead.is-pink blob set */
.glass-panel.is-cyan {
  --blob-1: var(--color-turquoise);
  --blob-2: var(--color-light-tur);
  --blob-3: var(--color-prism);
}
.glass-panel.is-green {
  --blob-1: var(--color-green);
  --blob-2: var(--color-whatsapp);   /* matches .masthead.is-green */
  --blob-3: var(--color-prism);
}
.glass-panel.is-pink {
  --blob-1: var(--color-pink);
  --blob-2: var(--color-purple-glow);
  --blob-3: var(--color-red);
}

@keyframes bg-drift-glass {
  0%   { transform: translate(0,    0)    scale(1); }
  100% { transform: translate(-4%, -3%)   scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .glass-panel::before { animation: none; }
}

/* Top of the panel: title (left column) + CALENDAR pill (right column).
   Grid layout instead of flex space-between so the title can't push the
   pill below itself when text wraps. Title takes whatever it needs, CALENDAR
   sits in a fixed-width right column. */
.glass-panel__head {
  position: relative;
  z-index: 3;             /* above the pinstripe */
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: clamp(20px, 2vw, 40px);
  margin-bottom: clamp(40px, 4vw, 72px);
}
/* Top-right text link replacing the previous CALENDAR/INQUIRE pill.
   Right-aligned on all viewports including mobile. */
.glass-panel__link {
  justify-self: end;
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--color-light-tur);
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  text-shadow: 0 0 12px rgba(13,227,255,0.5);
}
.glass-panel__link:hover {
  transform: translateX(2px);
  opacity: 0.85;
}
.glass-panel__link svg {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.glass-panel__link:hover svg {
  transform: translate(2px, -2px);
}
.glass-panel__title {
  /* v5.44: typography moved to .text-h2 utility class in markup.
     This rule carries only layout + color + transform. */
  text-transform: uppercase;
  color: var(--color-white);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05em;
}
.glass-panel__title .line {
  display: inline-flex;
  align-items: center;
  gap: 0.18em;
  flex-wrap: nowrap;
}
/* Caveat Brush ampersand uses canonical .is-accent + per-color glow span pattern,
   but the ampersand is set inline with size-relative 1.2em so it scales w/ the
   parent heading. Color is set by per-panel .glass-panel.is-{color} rule below. */
.glass-panel__title .amp {
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: 1.2em;
  letter-spacing: -0.05em;
  margin: 0 0.05em;
  line-height: 1;
}
.glass-panel.is-cyan  .glass-panel__title .amp { color: var(--color-light-tur); text-shadow: 0 -1px 6.5px var(--color-light-tur), 0 0 15.7px var(--color-light-tur); }
.glass-panel.is-green .glass-panel__title .amp { color: var(--color-green);     text-shadow: 0 -1px 6.5px var(--color-green),     0 0 15.7px var(--color-green); }
.glass-panel.is-pink  .glass-panel__title .amp { color: var(--color-pink);      text-shadow: 0 -1px 6.5px var(--color-pink),      0 0 15.7px var(--color-pink); }
.glass-panel__title .emoji {
  font-family: var(--font-display);
  font-size: 0.75em;
  line-height: 1;
}

/* The card row — horizontal scroll rail of event-poster cards.
   v5.47: changed from CSS grid to scrollable flex so scroll arrows work. */
.glass-panel__cards-row {
  position: relative;
  z-index: 3;
  display: flex;
  gap: clamp(20px, 2.5vw, 40px);
  margin-bottom: clamp(28px, 3vw, 48px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  padding-bottom: 12px;
}
.glass-panel__cards-row > .event-poster {
  flex: 0 0 calc((100% - clamp(20px, 2.5vw, 40px) * 2) / 3);
  scroll-snap-align: start;
}
.glass-panel__arrow {
  position: absolute;
  right: clamp(8px, 1.5vw, 32px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  /* v5.47: opacity-based visibility — JS toggles .is-hidden */
  opacity: 1;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
/* v5.47: prev (left) arrow auto-injected by JS, mirrored to the left side */
.glass-panel__arrow.is-prev {
  left: clamp(8px, 1.5vw, 32px);
  right: auto;
}
.glass-panel__arrow.is-prev svg { transform: rotate(180deg); }
.glass-panel__arrow.is-hidden { opacity: 0; pointer-events: none; }
/* Override .btn-circle's hover scale so it KEEPS the translateY positioning.
   Without this, .btn-circle:hover { transform: scale(1.06) } overwrites the
   translateY(-50%) and the button jumps down by half its height on hover. */
.glass-panel__arrow.btn-circle:hover { transform: translateY(-50%) scale(1.06); }
.glass-panel__arrow.btn-circle:active { transform: translateY(-50%) scale(0.97); }

/* ─── CANONICAL SCROLL-RAIL ARROW (v5.46) ───────────────────────────────────
   Generic horizontal-scroll rail wrapper. Used wherever a horizontal scroll
   list needs left/right scroll affordances (Sec 17 glass-panel, Sec 19
   featured-event, Sec 22 fast-links, Sec 25 story-gallery).

   Usage:
     <div class="scroll-rail">
       <div class="scroll-rail__viewport"> ...cards... </div>
       <button class="btn-circle scroll-rail__arrow is-prev" aria-label="Previous">...</button>
       <button class="btn-circle scroll-rail__arrow is-next" aria-label="Next">...</button>
     </div>
   ──────────────────────────────────────────────────────────────────────── */
.scroll-rail { position: relative; }
.scroll-rail__viewport {
  display: flex;
  gap: clamp(16px, 1.5vw, 30px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scroll-behavior: smooth;
}
.scroll-rail__viewport > * { scroll-snap-align: start; flex: 0 0 auto; }
.scroll-rail__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  /* v5.47: visibility controlled by JS via .is-hidden class.
     Default: visible. JS adds .is-hidden when at scroll boundary. */
  opacity: 1;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.scroll-rail__arrow.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.scroll-rail__arrow.is-prev { left: clamp(-12px, -0.5vw, -6px); }
.scroll-rail__arrow.is-next { right: clamp(-12px, -0.5vw, -6px); }
.scroll-rail__arrow.is-prev svg { transform: rotate(180deg); }
.scroll-rail__arrow.btn-circle:hover  { transform: translateY(-50%) scale(1.06); }
.scroll-rail__arrow.btn-circle:active { transform: translateY(-50%) scale(0.97); }

/* Bottom toggle */
.glass-panel__toggle {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 10px;
}
/* v5.47: removed legacy `.btn-pill` size override —
   toggle buttons are now canonical .tab-toggle__btn.text-pill */

/* ────────────────────────────────────────────────────────────────────────────
   EVENT POSTER CARD — inherits the daypart-hero hover model.
   Rest:  photo dimmed at brightness 0.55, all overlay text visible.
   Hover: photo zooms to scale(1.04) and brightens to 0.7. Text stays put.
   ──────────────────────────────────────────────────────────────────────────── */
.event-poster {
  position: relative;
  aspect-ratio: 0.95 / 1;
  border-radius: clamp(60px, 7vw, 130px);
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: clamp(24px, 2.5vw, 44px) clamp(20px, 2.2vw, 36px);
  text-decoration: none;
  color: var(--color-white);
  background: var(--color-black);
}
.event-poster__photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: rgba(255,255,255,0.04);
  filter: brightness(0.45);
  transition:
    transform var(--dur-slow) var(--ease-out),
    filter var(--dur-slow) var(--ease-out);
  z-index: 0;
}
.event-poster:hover .event-poster__photo {
  transform: scale(1.04);
  filter: brightness(0.6);
}
/* Soft dark vignette at the bottom so the title text always reads,
   but light enough that the photo above is clearly visible. */
.event-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(16, 18, 38, 0) 50%,
    rgba(16, 18, 38, 0.55) 80%,
    rgba(16, 18, 38, 0.85) 100%
  );
  pointer-events: none;
}
.event-poster__inner {
  position: relative;
  z-index: 2;             /* above the flourish (z:1) */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
  width: 100%;
}
/* The neon-word flourish — big blurred Caveat Brush word sitting BEHIND the
   white title and tagline. Absolutely positioned in the lower half of the
   card with low z-index so the title sits on top of it (vertically OFFSET,
   not crossing). Per-event color via .is-* modifier. */
/* v5.45: .event-poster__flourish is now a POSITIONING WRAPPER only.
   Typography + color come from canonical Glow Word span family applied
   to inner content: <span class="is-accent is-{color}">. Size set via
   calc(var(--fs-hero-1) × 2) — 2× the canonical hero-1 token, so
   updating --fs-hero-1 propagates to every flourish. */
.event-poster__flourish {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22%;
  z-index: 1;
  text-align: center;
  font-size: calc(var(--fs-hero-1) * 2);   /* 2× canonical hero-1 (scales with the token) */
  font-family: var(--font-accent);          /* Caveat Brush */
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0.85;
  filter: blur(1.5px);
}
/* Color variants for the flourish — solid colored fill + canonical glow text-shadow,
   matching the canonical Glow Word recipe. Thinner-than-default treatment via
   the slightly smaller text-shadow radii (the flourish blur softens further). */
.event-poster.is-pink   .event-poster__flourish { color: var(--color-pink);        text-shadow: 0 -1px 8px var(--color-pink),       0 0 22px var(--color-pink),       0 0 40px rgba(236,33,125,0.5); }
.event-poster.is-gold   .event-poster__flourish { color: var(--color-dark-gold);   text-shadow: 0 -1px 8px var(--color-dark-gold),  0 0 22px var(--color-dark-gold),  0 0 40px rgba(255,165,80,0.5); }
.event-poster.is-purple .event-poster__flourish { color: var(--color-purple-glow); text-shadow: 0 -1px 8px var(--color-purple-glow),0 0 22px var(--color-purple-glow),0 0 40px rgba(165,96,255,0.5); }
.event-poster.is-cyan   .event-poster__flourish { color: var(--color-light-tur);   text-shadow: 0 -1px 8px var(--color-light-tur),  0 0 22px var(--color-light-tur),  0 0 40px rgba(13,227,255,0.5); }
.event-poster.is-green  .event-poster__flourish { color: var(--color-green);       text-shadow: 0 -1px 8px var(--color-green),      0 0 22px var(--color-green),      0 0 40px rgba(54,251,103,0.5); }

.event-poster__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.0;
  text-transform: uppercase;
  color: var(--color-white);
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
  margin: 0;
}
.event-poster__tagline {
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-white);
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
  margin: 0;
  max-width: 32ch;
}
/* Date + time — inline text with a small calendar icon to the left.
   No background pill, no per-event color fill — just bright white text
   with a soft glow that picks up the variant color. Format: "JUL 16 · 9PM". */
.event-poster__when {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-white);
  margin-top: clamp(6px, 0.8vw, 12px);
}
.event-poster__when svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}
/* Per-variant glow on the date text — picks up the card's accent color */
.event-poster.is-pink   .event-poster__when { text-shadow: 0 0 12px rgba(236,33,125,0.7); }
.event-poster.is-gold   .event-poster__when { text-shadow: 0 0 12px rgba(255,165,80,0.7); }
.event-poster.is-purple .event-poster__when { text-shadow: 0 0 12px rgba(165,96,255,0.7); }
.event-poster.is-cyan   .event-poster__when { text-shadow: 0 0 12px rgba(13,227,255,0.7); }
.event-poster.is-green  .event-poster__when { text-shadow: 0 0 12px rgba(54,251,103,0.7); }

/* Variant — "Celebrate Big" cards have NO date (.is-no-date class hides it).
   Everything else about the card is identical. */
.event-poster.is-no-date .event-poster__when { display: none; }

/* RESPONSIVE — mobile: cards stack 1-up, panel padding tightens, gradient stays */
@media (max-width: 1023px) {
  .glass-panel__cards-row {
    grid-template-columns: 1fr 1fr;
    padding-right: clamp(60px, 8vw, 100px);  /* leave room for arrow */
  }
}
@media (max-width: 780px) {
  .glass-panel {
    border-radius: clamp(28px, 6vw, 40px) 0 0 clamp(28px, 6vw, 40px);
    padding: clamp(30px, 6vw, 60px) clamp(20px, 4vw, 32px);
  }
  .glass-panel__title { /* font-size inherits from --fs-h2 token's own clamp */ }
  /* Keep head as 2-col grid so the text link stays right-aligned on mobile —
     user explicitly requested this behavior. The title takes the left column,
     the link sits in the right column with align-self: start. */
  .glass-panel__head {
    gap: 12px;
    margin-bottom: clamp(28px, 5vw, 48px);
  }
  .glass-panel__link {
    font-size: 12px;          /* slightly smaller on mobile to fit */
  }
  .glass-panel__cards-row {
    /* v5.48: mobile shows 1 card per viewport. The flex scroll-rail from v5.47
       continues to work — just narrow the per-card flex-basis so 1 card fills
       the visible viewport, and reduce the gap. Cards still snap and scroll. */
    gap: 12px;
    padding-right: 0;
  }
  .glass-panel__cards-row > .event-poster {
    /* 1 card visible at a time on mobile */
    flex: 0 0 calc(100% - 24px);
    scroll-snap-align: center;
  }
  .glass-panel__arrow {
    /* v5.48: arrows stay positioned overlaying the card edges (canonical pattern
       matching Sec 11 Gallery). Don't drop to static-flow on mobile. */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .glass-panel__arrow.btn-circle { width: 60px; height: 60px; border-width: 2px; }
  .glass-panel__arrow.btn-circle svg { width: 28px; height: 24px; stroke-width: 3; }
  .glass-panel__arrow.btn-circle:hover  { transform: translateY(-50%) scale(1.06); }
  .glass-panel__arrow.btn-circle:active { transform: translateY(-50%) scale(0.97); }
  .event-poster__flourish { font-size: clamp(72px, 22vw, 120px); }
}


/* ────────────────────────────────────────────────────────────────────────────
   §06 · BOTTLE-SERVICE-BLOCK   (rebuilt v5.38)
   Figma canvas: 2440 wide, photo half-disc 1270 wide (52%), content starts
   at 1377 (56%). All clamp middles are tuned to (Figma px / 2440) so that
   the section scales correctly at 1400px desktop instead of exploding.
   ──────────────────────────────────────────────────────────────────────────── */
.bottle-block {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 52%) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 80px);
  align-items: center;
  width: 100%;
  /* Photo anchors flush-left to the section edge; content gets right padding. */
  padding-right: clamp(20px, 3vw, 80px);
}
.bottle-block__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1270 / 780;
  border-radius: 0 clamp(180px, 20vw, 496px) clamp(190px, 21vw, 520px) 0;
  overflow: hidden;
}
.bottle-block__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bottle-block__info {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1vw, 22px);
}
.bottle-block__title {
  /* v5.44: typography moved to .text-h2 utility class in markup. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  text-transform: uppercase;
  color: var(--color-white);
  margin: 0;
}
.bottle-block__title-row {
  display: inline-flex;
  align-items: baseline;
  gap: clamp(8px, 0.8vw, 18px);
}
.bottle-block__title-emoji {
  display: inline-block;
  -webkit-text-stroke: 0;       /* clear any inherited stroke from .is-ghost ancestor */
  font-size: 0.85em;
}
/* v5.44: .accent removed — use <span class="is-gold is-ghost"> in markup. */
.bottle-block__sub {
  /* v5.45: typography moved to .text-small utility class in markup */
  color: var(--color-white);
  max-width: 50ch;
  margin: 0;
}
.bottle-block__tiers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bottle-block__features {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(8px, 0.6vw, 14px) clamp(20px, 2vw, 48px);
}
/* v5.45: bottle-block tab-toggle bespoke sizing override REMOVED.
   Sizing now comes from .text-pill utility class applied in markup. */
.bottle-block .checkpoint-row {
  font-size: clamp(12px, 1.2vw, 22px);        /* matches .spec-row */
  gap: clamp(8px, 0.7vw, 14px);
  letter-spacing: -0.04em;
}
.bottle-block .btn-pill {
  padding: clamp(8px, 0.8vw, 14px) clamp(14px, 1.4vw, 24px);
  font-size: clamp(11px, 0.9vw, 16px);        /* matches .banner-pill__cta */
  border-width: 2px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.bottle-block .btn-pill svg {
  width: 12px;
  height: 12px;
}

@media (max-width: 1023px) {
  .bottle-block { grid-template-columns: 1fr; }
  .bottle-block__photo {
    aspect-ratio: 16/9;
    border-radius: 0 0 clamp(120px, 30vw, 300px) clamp(120px, 30vw, 300px);
  }
  .bottle-block__info { padding: 0 clamp(20px, 4vw, 40px); }
  .bottle-block__features { grid-template-columns: 1fr; }
}


/* ────────────────────────────────────────────────────────────────────────────
   §08 · FEATURED-EVENT countdown cards   (v5.40 rebuild)
   Sizing inherits from §07 banner-pill canonical scale: title matches
   .banner-pill__accent (clamp 36/5vw/96), card name matches .banner-pill__eyebrow,
   sub/date match .banner-pill__fineprint, CTA matches .banner-pill__cta.
   Dark cards now carry the canonical .bg-pinstripe overlay.
   ──────────────────────────────────────────────────────────────────────────── */
.featured-event {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2vw, 40px);
  width: 100%;
}
.featured-event__title {
  /* v5.44: typography moved to .text-h2 utility class in markup. */
  display: inline-flex;
  align-items: baseline;
  gap: clamp(8px, 0.8vw, 18px);
  text-transform: uppercase;
  color: var(--color-white);
  margin: 0;
  justify-content: center;
}
/* v5.44: .accent removed — use <span class="is-purple is-ghost"> in markup. */
.featured-event__title .sparkle { color: var(--color-yellow); }
/* v5.46: changed from 2-column grid → horizontal scroll rail.
   Shows 2 cards fully + 1 half-visible to signal more content. */
.featured-event__grid {
  display: flex;
  gap: clamp(16px, 1.5vw, 30px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  scrollbar-width: thin;
}
.featured-event__grid > .featured-card {
  flex: 0 0 calc((100% - clamp(16px, 1.5vw, 30px) * 1.5) / 2);
  scroll-snap-align: start;
}
/* v5.48: mobile — 1 card per viewport, taller card so CTA buttons fit comfortably */
@media (max-width: 780px) {
  .featured-event__grid > .featured-card {
    flex: 0 0 calc(100% - 24px);
    scroll-snap-align: center;
  }
  .featured-card {
    min-height: 540px;
    padding: 40px 32px;
  }
}
.featured-card {
  /* v5.45: rounded square. Variant-specific gradient backgrounds.
     v5.46: text bottom-anchored instead of centered. */
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  padding: clamp(28px, 3vw, 56px) clamp(28px, 3vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;             /* v5.46: bottom-anchored */
  text-align: center;
  gap: clamp(8px, 0.9vw, 18px);
  border: 3px solid var(--color-purple-glow);
  min-height: clamp(380px, 38vw, 560px);
}
/* Variant gradient backgrounds — brand-colored theme, matches Sec 23/24 pattern */
.featured-card.is-pink {
  background: linear-gradient(135deg, #2a0e1c 0%, #4a1a2e 50%, #6a1d3a 100%);
  border-color: var(--color-pink);
}
.featured-card.is-purple {
  background: linear-gradient(135deg, #1a1030 0%, #2c1a4a 50%, #3a2466 100%);
  border-color: var(--color-purple-glow);
}
.featured-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(16,18,38,0.55);   /* slightly less opaque so the gradient shows */
  z-index: 0;
}
/* Pinstripe overlay — canonical 30/38/44 responsive stride */
.featured-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='55' height='100' viewBox='0 0 55 100' preserveAspectRatio='none'><defs><linearGradient id='g' x1='66' y1='50' x2='-13' y2='50' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%23ffffff' stop-opacity='0'/><stop offset='0.7' stop-color='%23282828' stop-opacity='0.6'/><stop offset='1' stop-color='%23ffffff' stop-opacity='0'/></linearGradient></defs><rect width='55' height='100' fill='url(%23g)' fill-opacity='0.2'/></svg>");
  background-size: 30px 100%;
  background-repeat: repeat-x;
  background-position: 0 0;
}
.featured-card > * { position: relative; z-index: 2; }

/* v5.45: bespoke typography REMOVED — apply canonical utility classes in markup.
   .featured-card__name → .text-h3 in markup
   .featured-card__sub  → .text-small in markup
   .featured-card__date → .text-small in markup
   .featured-card__dj-pill → use canonical .btn-pill .text-pill .is-{color} in markup
   Component CSS now carries layout + color only. */
.featured-card__name {
  text-transform: uppercase;
  margin: 0;
}
.featured-card.is-pink   .featured-card__name { color: var(--color-pink); }
.featured-card.is-purple .featured-card__name { color: var(--color-purple-glow); }
.featured-card__sub {
  color: var(--color-white);
  margin: 0;
}
.featured-card__date {
  color: var(--color-golden);
  margin: 0;
}
/* v5.47: countdown sizing now from canonical .text-display + .text-caption
   utility classes in markup. Component just controls layout. */
.featured-card .countdown__cell {
  min-width: clamp(48px, 4.5vw, 90px);
}

@media (max-width: 780px) {
  .featured-event__grid { grid-template-columns: 1fr; }
}


/* ────────────────────────────────────────────────────────────────────────────
   §09 · PHOTO-CARD-LABELED  (VIP Membership 3-up)   (v5.40 rebuild)
   Title matches .banner-pill__accent scale. Discs constrained to a sane
   max-width so 3-up at desktop doesn't blow out the layout. Labels at
   .banner-pill__eyebrow scale to fit inside the disc without clipping.
   ──────────────────────────────────────────────────────────────────────────── */
.vip-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2vw, 36px);
  width: 100%;
}
.vip-block__title {
  /* v5.44: typography moved to .text-h2 utility class in markup. */
  text-transform: uppercase;
  color: var(--color-white);
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: clamp(8px, 0.8vw, 18px);
  text-align: center;
  flex-wrap: wrap;
  justify-content: center;
}
/* v5.44: .accent removed — use <span class="is-gold is-ghost"> in markup. */
.vip-block__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 28px);
  width: 100%;
  max-width: 1120px;                          /* keeps discs ≤ ~360px each at desktop */
  margin: 0 auto;
}
.photo-card-labeled {
  /* v5.45: changed from circle (border-radius: 9999px + aspect-ratio: 1) to rounded square */
  position: relative;
  aspect-ratio: 4 / 5;                        /* portrait-ish card, taller than wide */
  border-radius: var(--radius-lg);            /* canonical 32px rounded corner */
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  color: var(--color-white);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: clamp(20px, 2.2vw, 36px);
}
.photo-card-labeled::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--card-img, none);
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.photo-card-labeled::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(16,18,38,0.85) 100%);
  z-index: 1;
}
.photo-card-labeled__label {
  /* v5.47: typography moved to .text-h3 utility class in markup */
  position: relative;
  z-index: 2;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  margin: 0;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.photo-card-labeled__label .em { color: var(--color-golden); }

@media (max-width: 1023px) {
  .vip-block__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .vip-block__grid { grid-template-columns: 1fr; max-width: 320px; }
}


/* ────────────────────────────────────────────────────────────────────────────
   §12 · PHOTO-CTA-DISC  (Reserve a Table 3-up)   (v5.41 rebuild)
   Sizing inherits from §07 banner-pill canonical scale: title matches
   .banner-pill__accent, tagline matches .banner-pill__fineprint. Discs
   constrained to a sane max-width like §09 VIP cards, with canonical
   pinstripe overlay on the dark wash (same pattern as §08 featured cards).
   Inner CTA pills inherit .btn-pill canonical sizing at .banner-pill__cta scale.
   ──────────────────────────────────────────────────────────────────────────── */
.reserve-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 1.8vw, 36px);
  text-align: center;
  width: 100%;
}
.reserve-block__title {
  /* v5.44: typography moved to .text-h2 utility class in markup. */
  text-transform: uppercase;
  color: var(--color-white);
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(8px, 0.8vw, 18px);
  justify-content: center;
}
/* v5.44: .accent removed — use <span class="is-purple is-ghost"> in markup. */
.reserve-block__tagline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(13px, 1vw, 28px);          /* matches .banner-pill__fineprint */
  line-height: 1.2;
  color: var(--color-white);
  letter-spacing: -0.05em;
  margin: 0;
}
.reserve-block__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 28px);
  width: 100%;
  max-width: 1120px;                          /* keeps discs ≤ ~360px each */
  margin: clamp(8px, 1vw, 20px) auto 0;
}
.photo-cta-disc {
  /* v5.45: changed from circle to rounded square */
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
.photo-cta-disc::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--disc-img, none);
  background-size: cover;
  background-position: center;
  z-index: 0;
  transition: transform var(--dur-slow) var(--ease-out);
}
.photo-cta-disc::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(16,18,38,0.3);
  z-index: 1;
}
.photo-cta-disc:hover::before { transform: scale(1.04); }
/* Pinstripe overlay — canonical 30/38/44 responsive stride, same as §08 */
.photo-cta-disc__pinstripe {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='55' height='100' viewBox='0 0 55 100' preserveAspectRatio='none'><defs><linearGradient id='g' x1='66' y1='50' x2='-13' y2='50' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%23ffffff' stop-opacity='0'/><stop offset='0.7' stop-color='%23282828' stop-opacity='0.6'/><stop offset='1' stop-color='%23ffffff' stop-opacity='0'/></linearGradient></defs><rect width='55' height='100' fill='url(%23g)' fill-opacity='0.2'/></svg>");
  background-size: 30px 100%;
  background-repeat: repeat-x;
  background-position: 0 0;
}
.photo-cta-disc > .btn-pill { position: relative; z-index: 3; }
/* Scope inner CTA to banner-pill__cta canonical scale */
.photo-cta-disc .btn-pill {
  padding: clamp(8px, 0.8vw, 14px) clamp(14px, 1.4vw, 24px);
  font-size: clamp(11px, 0.9vw, 16px);        /* matches .banner-pill__cta */
  border-width: 2px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

@media (max-width: 1023px) {
  .photo-cta-disc__pinstripe { background-size: 38px 100%; }
  .reserve-block__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
}
@media (max-width: 600px) {
  .photo-cta-disc__pinstripe { background-size: 44px 100%; }
  .reserve-block__grid { grid-template-columns: 1fr; max-width: 320px; }
}


/* ────────────────────────────────────────────────────────────────────────────
   §13 · FAST-LINK-CARD  (horizontal photo nav row, 6 cards)
   ──────────────────────────────────────────────────────────────────────────── */
.fast-links {
  display: flex;
  gap: clamp(12px, 1.5vw, 20px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 clamp(16px, 3vw, 40px);
  scrollbar-width: thin;
}
.fast-link-card {
  /* v5.45: rounded square (was circle clamp 140-227). Background photos via --card-img.
     Hover effect: image scales up + dark overlay lifts to show the photo.
     v5.46: pills bottom-anchored. */
  position: relative;
  flex: 0 0 clamp(240px, 28vw, 380px);
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: clamp(20px, 2.2vw, 36px);
  isolation: isolate;
  scroll-snap-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out);
}
.fast-link-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--card-img, none);
  background-size: cover;
  background-position: center;
  background-color: #1a1d3d;  /* fallback for cards without an image */
  z-index: 0;
  transition: transform var(--dur-slow) var(--ease-out);
}
.fast-link-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(16,18,38,0.75);
  z-index: 1;
  transition: background var(--dur-base) var(--ease-out);
}
.fast-link-card:hover { transform: translateY(-4px); }
.fast-link-card:hover::before { transform: scale(1.08); }
.fast-link-card:hover::after { background: rgba(16,18,38,0.45); }
.fast-link-card > .btn-pill {
  position: relative;
  z-index: 2;
}


/* ────────────────────────────────────────────────────────────────────────────
   §14 · GRADIENT-CTA-STRIP  ("Planning Something BIG?")
   ──────────────────────────────────────────────────────────────────────────── */
.gradient-strip {
  position: relative;
  width: 100%;
  border-radius: clamp(160px, 18vw, 380px);
  background: linear-gradient(90deg, var(--color-pink) 0%, #117CFF 100%);
  padding: clamp(48px, 5vw, 120px) clamp(40px, 5vw, 80px);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(320px, 32vw, 452px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 1.8vw, 32px);
}
.gradient-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--strip-img, none);
  background-size: cover;
  background-position: center;
  opacity: 0.18;
  z-index: 0;
}
/* v5.45: canonical pinstripe overlay (same 30/38/44 stride pattern as other dark cards) */
.gradient-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='55' height='100' viewBox='0 0 55 100' preserveAspectRatio='none'><defs><linearGradient id='g' x1='66' y1='50' x2='-13' y2='50' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%23ffffff' stop-opacity='0'/><stop offset='0.7' stop-color='%23282828' stop-opacity='0.6'/><stop offset='1' stop-color='%23ffffff' stop-opacity='0'/></linearGradient></defs><rect width='55' height='100' fill='url(%23g)' fill-opacity='0.2'/></svg>");
  background-size: 30px 100%;
  background-repeat: repeat-x;
}
.gradient-strip > * { position: relative; z-index: 1; }
.gradient-strip__title {
  /* v5.44: typography moved to .text-h2 utility class in markup. */
  text-transform: uppercase;
  color: var(--color-white);
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2em;
  justify-content: center;
}
/* v5.44: .accent removed — use <span class="is-cyan is-ghost"> in markup. */
.gradient-strip__tagline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 38px);
  line-height: 1.2;
  letter-spacing: -0.05em;
  color: var(--color-white);
  margin: 0;
  max-width: 60ch;
}


/* ────────────────────────────────────────────────────────────────────────────
   §15 · DUAL-CTA-PILL + MAP-PILL  (Contact page)
   ──────────────────────────────────────────────────────────────────────────── */
.dual-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-radius: clamp(120px, 14vw, 336px);
  overflow: hidden;
  width: 100%;
  min-height: clamp(180px, 20vw, 336px);
}
.dual-cta__half {
  /* v5.45: pinstripe overlay added since this is a brand-colored gradient theme */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(20px, 3vw, 60px);
  text-decoration: none;
  color: var(--color-white);
  gap: 12px;
  isolation: isolate;
  overflow: hidden;
}
.dual-cta__half::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='55' height='100' viewBox='0 0 55 100' preserveAspectRatio='none'><defs><linearGradient id='g' x1='66' y1='50' x2='-13' y2='50' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%23ffffff' stop-opacity='0'/><stop offset='0.7' stop-color='%23282828' stop-opacity='0.6'/><stop offset='1' stop-color='%23ffffff' stop-opacity='0'/></linearGradient></defs><rect width='55' height='100' fill='url(%23g)' fill-opacity='0.2'/></svg>");
  background-size: 30px 100%;
  background-repeat: repeat-x;
}
.dual-cta__half > * { position: relative; z-index: 1; }
.dual-cta__half.is-green { background: linear-gradient(90deg, #1F9F45 0%, #36FB67 100%); }
.dual-cta__half.is-cyan  { background: linear-gradient(90deg, #0096B5 0%, var(--color-light-tur) 100%); }

/* v5.48: canonical hover per half — brightness lift + brand-color glow.
   Same canonical hover pattern as .btn-pill (scale + glow) but adapted for
   the full-width clickable card half. */
.dual-cta__half {
  cursor: pointer;
  transition: filter var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.dual-cta__half.is-green:hover {
  filter: brightness(1.08);
  box-shadow: inset 0 0 60px rgba(54,251,103,0.35), 0 0 40px rgba(54,251,103,0.5);
}
.dual-cta__half.is-cyan:hover {
  filter: brightness(1.08);
  box-shadow: inset 0 0 60px rgba(13,227,255,0.35), 0 0 40px rgba(13,227,255,0.5);
}
.dual-cta__title {
  /* v5.46: typography moved to .text-h3 utility class in markup */
  text-transform: uppercase;
  margin: 0;
}
.dual-cta__sub {
  /* v5.46: typography moved to .text-body utility class in markup */
  margin: 0;
  max-width: 36ch;
}

.map-pill {
  position: relative;
  width: 100%;
  aspect-ratio: 2065 / 600;
  border-radius: clamp(160px, 22vw, 450px);
  overflow: hidden;
  background: var(--color-light-tur);
}
.map-pill img,
.map-pill iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
}
.map-pill__cta {
  position: absolute;
  bottom: clamp(20px, 3vw, 56px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
/* v5.45 fix: .btn-pill:hover sets transform:scale(1.04), but this map CTA needs
   to preserve translateX(-50%) for centering. Combine both. */
.map-pill__cta:hover {
  transform: translateX(-50%) scale(1.04);
}

@media (max-width: 1023px) {
  .dual-cta { grid-template-columns: 1fr; border-radius: clamp(60px, 12vw, 120px); }
  .map-pill { aspect-ratio: 1; border-radius: clamp(80px, 30vw, 240px); }
}
/* v5.48: canonical mobile-square pattern for .dual-cta and .map-pill —
   full-width with --radius-lg corners, no pill curves. */
@media (max-width: 780px) {
  .dual-cta {
    border-radius: var(--radius-lg);
    min-height: auto;
  }
  .dual-cta__half {
    min-height: 140px;
    padding: clamp(24px, 5vw, 40px) clamp(20px, 4vw, 32px);
  }
  .map-pill {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg) !important;
  }
}


/* ────────────────────────────────────────────────────────────────────────────
   §16 · ABOUT-PAGE CLUSTER (Our Story, Landmark, Why, Our Team, FAQ)
   Smaller atoms used across the about page.
   ──────────────────────────────────────────────────────────────────────────── */

/* Our-story headline pattern — Caveat Brush ghost word + plain white word */
.story-headline {
  /* v5.45: flow content inline on a single line. Typography from .text-h2 utility class. */
  text-transform: uppercase;
  color: var(--color-white);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25em;
}
/* Style for emojis in story-headline so they sit on the baseline cleanly */
.story-headline .emoji {
  font-size: 0.9em;
  display: inline-block;
  -webkit-text-stroke: 0;
}

/* Horizontal photo gallery with category filter pills */
.story-gallery {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2vw, 36px);
}
.story-gallery__filters {
  /* v5.48: refactored to use canonical .menu-filter pattern (matches Sec 16
     food/cocktail menu typography + divider style). All filter "buttons" use
     the canonical menu-item look — uppercase text, weight 500, divider below,
     hover/active in cyan. */
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: var(--space-lg);
  border-top: 1px solid rgba(255,255,255,0.15);
}
.story-gallery__filters > .menu-filter {
  /* Each filter row matches the canonical menu-card item typography */
  flex: 1 1 auto;
  padding: clamp(14px, 1.4vw, 22px) clamp(16px, 2vw, 32px);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(16px, 1.4vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--color-white);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.5);
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.story-gallery__filters > .menu-filter:hover,
.story-gallery__filters > .menu-filter.is-active {
  color: var(--color-light-tur);
  border-bottom-color: var(--color-light-tur);
}
.story-gallery__rail {
  display: flex;
  gap: clamp(12px, 1.5vw, 24px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
}
.story-gallery__rail > * {
  flex: 0 0 clamp(220px, 22vw, 380px);
  scroll-snap-align: start;
}
.story-gallery__photo {
  /* v5.45: rounded square (was circle clamp 80-140) */
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.story-gallery__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Landmark events — 2-card horizontal photo strip */
.landmark-events {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 32px);
}
.landmark-card {
  position: relative;
  aspect-ratio: 1080 / 600;
  border-radius: clamp(140px, 18vw, 280px);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: clamp(20px, 2.5vw, 40px);
  isolation: isolate;
  text-decoration: none;
}
.landmark-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--card-img, none);
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.landmark-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(255,165,80,0.7) 100%);
  z-index: 1;
}
.landmark-card__label {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 1.8vw, 32px);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--color-white);
  margin: 0;
  width: 100%;
  text-align: center;
}

/* Why Tuanis — 2×2 feature grid with Caveat Brush labels */
.why-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 3vw, 48px) clamp(28px, 4vw, 60px);
}
.why-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* v5.45: typography moved to .text-h3 .is-accent / .text-body-lg utility classes in markup. */
.why-item__title {
  color: var(--color-light-tur);
  text-transform: uppercase;
  margin: 0;
}
.why-item__body {
  color: var(--color-white);
  margin: 0;
}

/* Our Team — portrait grid with pink-purple bg */
.team-block {
  /* v5.45: rounded square (was clamp 120-240 organic). Pink/cyan gradient is the brand-colored theme
     that survives the "non-image dark surfaces stay flat" rule. Pinstripe overlay added below. */
  position: relative;
  border-radius: var(--radius-lg);
  background: linear-gradient(90deg, #0DBED5 0%, var(--color-pink) 100%);
  padding: clamp(30px, 3vw, 60px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 3vw, 60px);
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
/* Pinstripe overlay — same canonical responsive stride as other dark cards */
.team-block::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='55' height='100' viewBox='0 0 55 100' preserveAspectRatio='none'><defs><linearGradient id='g' x1='66' y1='50' x2='-13' y2='50' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%23ffffff' stop-opacity='0'/><stop offset='0.7' stop-color='%23282828' stop-opacity='0.6'/><stop offset='1' stop-color='%23ffffff' stop-opacity='0'/></linearGradient></defs><rect width='55' height='100' fill='url(%23g)' fill-opacity='0.2'/></svg>");
  background-size: 30px 100%;
  background-repeat: repeat-x;
}
.team-block > * { position: relative; z-index: 1; }
.team-block__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.team-block__title {
  /* v5.45: flow content inline on a single line. Typography from .text-h2 utility class. */
  text-transform: uppercase;
  color: var(--color-white);
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25em;
}
.team-block__title .emoji {
  font-size: 0.9em;
  display: inline-block;
  -webkit-text-stroke: 0;
}
@media (max-width: 1023px) {
  .landmark-events { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .team-block { grid-template-columns: 1fr; }
}
/* v5.48: canonical mobile-square for landmark cards — smaller rounded edges */
@media (max-width: 780px) {
  .landmark-card {
    border-radius: var(--radius-lg);
    aspect-ratio: 4 / 3;
  }
}

/* FAQ accordion */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.faq-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding: clamp(16px, 2vw, 28px) 0;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  align-items: start;
  cursor: pointer;
}
/* v5.45: typography stripped from FAQ rules.
   Apply .text-h3 to .faq-row__toggle, .text-h4 to .faq-row__q, .text-body to .faq-row__a in markup. */
.faq-row__toggle {
  color: var(--color-light-tur);
  user-select: none;
}
.faq-row__body { display: flex; flex-direction: column; gap: 8px; }
.faq-row__q {
  color: var(--color-light-tur);
  margin: 0;
}
.faq-row__a {
  color: rgba(255,255,255,0.7);
  margin: 0;
  display: none;
}
.faq-row.is-open .faq-row__a { display: block; }
.faq-row.is-open .faq-row__toggle::before { content: "—"; }
.faq-row .faq-row__toggle::before { content: "+"; }


/* ════════════════════════════════════════════════════════════════════════════
   END v5.34 CSS
   ════════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════════
   v5.37 — Section 17 rebuild (May 15 2026)
   ════════════════════════════════════════════════════════════════════════════
   §17 Glass-panel + event-poster cards rebuilt to inherit the masthead
   composition pattern and reduce pill density:
   • Panel background: dropped diagonal color-blob slats + flat purple base.
     New recipe is .masthead__card VERBATIM — black base + three radial blobs
     heavily blurred + drift animation. Per-variant blob colors mirror
     .masthead.is-turquoise / .is-green / .is-pink.
   • Pinstripe: canonical .bg-pinstripe utility verbatim (was a custom
     glass-panel__slats implementation). screen-blend works correctly over
     the masthead-style dark base.
   • Pill density: 6 pills → 2 (only the UPCOMING/OLDER toggle remains).
     Date pill removed in favor of inline "JUL 16 · 9PM" text + outline SVG
     calendar icon. Top-right CALENDAR/INQUIRE pill replaced with text link
     (new .glass-panel__link class) — stays right-aligned on mobile.
   • Card shape: aspect-ratio 0.95/1, clamp(60,7vw,130) border-radius — the
     squarish event-poster geometry from the Figma reference.
   • Hover model: inherits .daypart-hero pattern verbatim — photo dim 0.45
     rest, scale(1.04) + brightness 0.6 on hover, --dur-slow.
   • Title: --fs-display (clamp 32-64px, weight 500) matching system section
     headings (was custom 36-72px).
   • Neon-word flourish blur: 3px → 1.5px so it reads as typographic
     flourish, not a smudge. Positioned BEHIND title via z-index.
   • Arrow nav bug fix: .glass-panel__arrow.btn-circle:hover now preserves
     translateY(-50%) when scaling (was jumping down by half its height).
   See the §07/§10/§11 EVENT-POSTER + GLASS-PANEL block above for the rules.
   ════════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════════
   v5.36 — Section 16 rebuild (May 14 2026)
   ════════════════════════════════════════════════════════════════════════════
   §16 Menu cards & sidebar rebuilt to match the Figma rest/hover behavior:
   • Photo is a horizontal stadium pill (rested) → square with rounded corners
     (hover). On hover, the text below hides; card becomes "just the photo."
   • Name + Italian desc + price stack vertically (NOT name+price in one row).
   • HOT/NEW badge: scalloped wax-seal star shape via inline <svg>, centered
     above the photo straddling the top edge (was a top-left circle).
   • Sidebar narrowed and text allowed to wrap; ALL pill larger as active emphasis.
   • Photo transition speed matches the site's --dur-base (0.35s).
   • Row-gap in the card grid enlarged so badges clear the divider lines above.
   See the §02/§05 MENU-CARD block above for the full rule set.
   ════════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════════
   v5.35 — QA pass on sections 16–25 (May 14 2026)
   ════════════════════════════════════════════════════════════════════════════
   No new components or tokens — purely repair work:
   (1) every sub-block in §16–§25 that was previously crammed into a constrained
       .ds-block (or hacked with inline padding:0 + background:transparent) is
       now wrapped in the canonical .ds-block.is-fullwidth-demo pattern from §15,
       with a numbered "Full-width preview" label-pill.
   (2) §25.4 Our Team disc grid corrected from 2 → 3 columns to match the Figma
       intent and visual parity with §25.1 Our Story (4-up gallery feel scaled
       down). One small CSS rule below.
   (3) ad-hoc inline-styled hex literals replaced with brand tokens where the
       resolved color is identical or visually indistinguishable.
   No locked tokens, no locked components, no breakpoints touched.
   ════════════════════════════════════════════════════════════════════════════ */

/* §25.4 team-block grid — 3 photo cards (was discs, now rounded squares per v5.45) */
.team-block__discs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}
.team-block__discs > .team-block__disc {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background-image: var(--disc-img, linear-gradient(135deg, #2a3a4a 0%, #4a5a6a 100%));
  background-size: cover;
  background-position: center;
  /* v5.46: canonical card hover (lift 4px + photo scale via the disc itself) */
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.team-block__discs > .team-block__disc:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 12px 36px rgba(13,227,255,0.4), 0 0 48px rgba(236,33,125,0.25);
}
@media (max-width: 780px) {
  .team-block__discs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}


/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 780px) {
  .ds-wrap { padding-left: var(--space-md); padding-right: var(--space-md); }
  .ds-block { padding: var(--space-lg); }
  .demo-reserve { padding: var(--space-xl) var(--space-md); }
  .type-row { grid-template-columns: 1fr; gap: var(--space-xs); }

  /* ─── CANONICAL MOBILE-SQUARE PATTERN (v5.48) ──────────────────────────────
     Per the locked design system spec: large pill-shaped components flatten
     to full-width rounded squares on mobile (≤780px). Applies to:
       - .bottle-block (Sec 18)
       - .gradient-strip (Sec 23 Planning Big)
       - .map-pill (Sec 24.2)
       - .team-block (Sec 25.4)
       - .bottle-block__photo (the rounded-bottom image inside Sec 18)
     Components stay full-width within their container at the canonical
     --radius-lg (32px) corner radius — no pill curves on mobile.
     ────────────────────────────────────────────────────────────────────── */
  .bottle-block,
  .bottle-block__photo,
  .gradient-strip,
  .map-pill,
  .team-block {
    border-radius: var(--radius-lg) !important;
    width: 100%;
  }
  .bottle-block__photo {
    aspect-ratio: 16 / 10;
  }
}
/* ============================================================================
   SITE NAV (Epic 3.0-DS, additive — global shell)
   Responsive single component:
   - Desktop (>860px): glass top bar — brand mark + links + lang + reserve CTA.
   - Mobile  (<=860px): brand mark + hamburger; hamburger opens the EXISTING
                        .menu-slidedown drawer (09-nav.css) inside the
                        .site-nav__drawer fixed wrapper added below.
   Consumes only existing 01-tokens.css tokens. No new tokens.
   Additive: does NOT modify 09-nav.css; reuses .menu-slidedown + descendants.
   ============================================================================ */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-sm) var(--space-lg);
  background: rgba(16, 18, 38, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
}

.site-nav__brand {
  display: inline-flex;
  align-items: center;
  flex: none;
}
.site-nav__brand svg {
  width: auto;
  height: 34px;
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.site-nav__link {
  font-family: var(--font-display);
  font-weight: var(--fw-h4);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-out);
}
.site-nav__link:hover,
.site-nav__link:focus {
  color: var(--color-light-tur);
}
/* deferred (not-yet-built) nav targets — muted, non-clickable. Mirrors the
   footer's phase-aware treatment. Also covers the reused .mobile-menu-link
   in the drawer (additive modifier; does not edit Epic-0 09-nav.css). */
.site-nav__link.is-deferred,
.mobile-menu-link.is-deferred {
  color: var(--text-tertiary);
  cursor: default;
}

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex: none;
}

/* inline language toggle — mirrors .mobile-menu-lang look (09-nav.css) */
.site-nav__lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-white);
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.site-nav__lang:hover {
  border-color: var(--color-light-tur);
}

/* hamburger — hidden on desktop, shown at the mobile breakpoint */
.site-nav__hamburger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--color-white);
}
.site-nav__hamburger svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
}

/* ── Mobile drawer wrapper ──────────────────────────────────────────────
   Fixed full-width container that slides the reused .menu-slidedown drawer
   down from the top. The drawer's interior styling lives in 09-nav.css;
   this only adds the positioning + open/close states the Epic-0 file left
   as a production note. */
.site-nav__overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur-base) var(--ease-out),
    visibility var(--dur-base) var(--ease-out);
}
.site-nav__overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.site-nav__drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 201;
  display: flex;
  justify-content: center;
  padding: var(--space-sm);
  transform: translateY(-100%);
  transition: transform var(--dur-base) var(--ease-out);
}
.site-nav__drawer.is-open {
  transform: translateY(0);
}
/* drawer header logo sizing + lang/close cluster (replaces inline styles) */
.site-nav__drawer .menu-slidedown__header svg {
  width: 110px;
  height: auto;
}
.site-nav__drawer-langclose {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

@media (max-width: 860px) {
  .site-nav__links,
  .site-nav__lang,
  .site-nav__actions .btn-primary {
    display: none;
  }
  .site-nav__hamburger {
    display: inline-flex;
  }
}
/* ============================================================================
   SITE FOOTER (Epic 3.0-DS, additive — global shell)
   Full-IA footer: brand + tagline, 4-column link grid, social + legal strip.
   Sits on the existing .bg-footer atmosphere (05-backgrounds.css).
   Phase-aware rendering is a markup concern (Footer.astro reads each entry's
   phase from slug-map): LIVE page_ids render as <a class="site-footer__link">,
   DEFERRED render as <span class="site-footer__link is-deferred"> (muted, no
   href, zero 404s). The .is-deferred modifier provides the muted treatment.
   Consumes only existing 01-tokens.css tokens. No new tokens.
   ============================================================================ */

.site-footer {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  padding: var(--space-2xl) var(--space-lg) var(--space-xl);
}

.site-footer__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}
.site-footer__brand svg {
  width: auto;
  height: 56px;
}
.site-footer__tagline {
  color: var(--text-secondary);
  font-size: var(--fs-body);
  letter-spacing: -0.01em;
  max-width: 52ch;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
  max-width: 1100px;
  margin: 0 auto;
}
.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.site-footer__col-title {
  font-family: var(--font-display);
  font-weight: var(--fw-h4);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: var(--space-xs);
}
.site-footer__link {
  font-size: var(--fs-small);
  color: var(--text-secondary);
  letter-spacing: -0.01em;
  transition: color var(--dur-fast) var(--ease-out);
}
a.site-footer__link:hover,
a.site-footer__link:focus {
  color: var(--color-light-tur);
}
/* DEFERRED entries — muted plain text, not links (no href). */
.site-footer__link.is-deferred {
  color: var(--text-tertiary);
  cursor: default;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  max-width: 1100px;
  margin: var(--space-2xl) auto 0;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-subtle);
}
.site-footer__copy {
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}
.site-footer__socials {
  display: flex;
  gap: 16px;
  align-items: center;
}
.site-footer__socials a {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-out);
}
.site-footer__socials a:hover {
  transform: scale(1.1);
}
.site-footer__socials svg {
  width: 100%;
  height: 100%;
  display: block;
}
.site-footer__legal {
  display: flex;
  gap: 16px;
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
  letter-spacing: 0.03em;
}
.site-footer__legal a {
  color: var(--text-tertiary);
  text-decoration: underline;
}
.site-footer__legal a:hover {
  color: var(--color-white);
}

@media (max-width: 959px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
}
@media (max-width: 599px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
  }
  .site-footer__bottom {
    flex-direction: column;
    text-align: center;
  }
}
/* ============================================================================
   PROOF STATS (Epic 3.0-DS, additive — homepage Section 5, reusable)
   4-up stat grid (e.g. "#7 de 77 · 4.8★ · #4 Seafood Lunch · 25+ países").
   Stands alone from .hero-proof (07-proof-cta.css) — different layout — but
   borrows its golden star (clip-path) and --color-yellow numeric emphasis for
   visual consistency. Consumes only existing 01-tokens.css tokens. No new
   tokens. Does NOT modify 07-proof-cta.css.
   ============================================================================ */

.proof-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  max-width: 900px;
  margin: 0 auto;
}
.proof-stats__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-xs);
  padding: var(--space-lg) var(--space-md);
  border-left: 1px solid var(--border-subtle);
}
.proof-stats__cell:first-child {
  border-left: 0;
}
.proof-stats__value {
  font-family: var(--font-display);
  font-size: var(--fs-hero-2);
  font-weight: var(--fw-hero-2);
  letter-spacing: var(--ls-hero-2);
  line-height: 1;
  color: var(--color-yellow);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.proof-stats__label {
  font-size: var(--fs-small);
  color: var(--text-secondary);
  letter-spacing: -0.01em;
}
/* golden star glyph — same clip-path as .hero-proof__stars i (07-proof-cta) */
.proof-stats__star {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  background: var(--color-golden);
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

@media (max-width: 759px) {
  .proof-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .proof-stats__cell {
    border-left: 0;
  }
  .proof-stats__cell:nth-child(even) {
    border-left: 1px solid var(--border-subtle);
  }
}
@media (max-width: 419px) {
  .proof-stats {
    grid-template-columns: 1fr;
  }
  .proof-stats__cell {
    border-left: 0;
  }
}
/* ============================================================================
   PAGE SECTIONS + HOMEPAGE LAYOUT (Epic 3, additive — production scaffolding)
   The Epic-0 .ds-* layout utilities in 02-base.css are showcase-only
   ("not for production"). This file provides the production page-section
   scaffolding the homepage (and later pages) need: section container, the
   eyebrow/H2/lead header, the section grids, and the hero/story/find-us
   layouts. Consumes only existing 01-tokens.css tokens. No new tokens.
   ============================================================================ */

/* ── Section container + header ─────────────────────────────────────────── */
.page-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-lg);
}
.section-head {
  max-width: 760px;
  margin-bottom: var(--space-2xl);
}
.section-head.is-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-eyebrow {
  display: block;
  color: var(--color-light-tur);
  margin-bottom: var(--space-sm);
}
.section-lead {
  color: var(--text-secondary);
  margin-top: var(--space-md);
}

/* ── Generic atmospheric image slot (off-card slots) ────────────────────── */
.img-slot {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 300px;
}

/* ── Grids ──────────────────────────────────────────────────────────────── */
.home-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.home-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}
@media (max-width: 860px) {
  .home-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .home-grid-2 {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px) {
  .home-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* ── Hero (Viewport 1) ──────────────────────────────────────────────────── */
.home-hero {
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.home-hero__content {
  position: relative;
  z-index: 4;
  max-width: 640px;
  padding: var(--space-3xl) var(--space-lg);
}
.home-hero__subhead {
  color: var(--text-secondary);
  margin: var(--space-md) 0 var(--space-lg);
  max-width: 48ch;
}
.home-hero__bars {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ── Daypart strip (5-up time pills) ────────────────────────────────────── */
.daypart-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xl);
}
.daypart-strip__item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
}
.daypart-strip__time {
  color: var(--color-yellow);
  font-weight: 700;
}

/* ── Story teaser (Viewport 7) 2-col ────────────────────────────────────── */
.home-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
.home-story__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
}
.home-story__media .mask-circle {
  width: min(100%, 360px);
}
.home-story__media .circular-text {
  position: absolute;
}
.home-story__body {
  color: var(--text-secondary);
  margin: var(--space-lg) 0;
}
@media (max-width: 860px) {
  .home-story {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

/* ── Find us (Viewport 8) 2-col ─────────────────────────────────────────── */
.home-findus {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: stretch;
}
.home-findus__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.home-findus__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.home-findus__label {
  color: var(--text-tertiary);
}
.home-findus__value {
  color: var(--color-white);
}
@media (max-width: 860px) {
  .home-findus {
    grid-template-columns: 1fr;
  }
}

/* ── Events strip (Viewport 3) 7-up rail ────────────────────────────────── */
.home-events {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-sm);
}
.home-events__day {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  min-height: 150px;
  color: var(--text-secondary);
}
.home-events__day.is-today {
  border-color: var(--color-yellow);
  background: rgba(255, 227, 100, 0.06);
}
.home-events__dow {
  color: var(--color-white);
  font-weight: 700;
  text-transform: uppercase;
}
@media (max-width: 860px) {
  .home-events {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: minmax(150px, 1fr);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .home-events__day {
    scroll-snap-align: start;
  }
}

/* ── Centered CTA row under a section ───────────────────────────────────── */
.section-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
  margin-top: var(--space-xl);
}
.section-cta-row.is-start {
  justify-content: flex-start;
}

/* ── Figma split hero (content left, blob photo right) ──────────────────── */
.hero-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-2xl);
  align-items: center;
  min-height: 86vh;
  position: relative;
}
.hero-split__media {
  position: relative;
  display: grid;
  place-items: center;
}
/* mask has aspect-ratio but no width — in a centered grid it collapses to 0;
   give it an explicit width so the blob (+ atmospheric fill) is visible. */
.hero-split__media .mask-blob {
  width: min(100%, 460px);
}
.hero-split__discover {
  position: absolute;
  right: 8%;
  bottom: 6%;
}
@media (max-width: 860px) {
  .hero-split {
    grid-template-columns: 1fr;
    min-height: 0;
  }
}

/* ── Concept ovals (3-up) — oval photo + centered label + neon-script ───── */
.concept-oval {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
}
/* fill the column so the oval (+ atmospheric fill) is visible (mask has
   aspect-ratio but no width; centered grid would collapse it to 0). */
.concept-oval .mask-oval {
  width: 100%;
}
.concept-oval__label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  color: var(--color-white);
}

/* ── Category pills row (centered, large) ───────────────────────────────── */
.category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
}

/* ── VIP oval banner (full-width oval, centered overlay) ────────────────── */
.vip-banner {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  aspect-ratio: 16 / 6;
  border-radius: var(--radius-organic);
  overflow: hidden;
}
.vip-banner__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-xl);
}
@media (max-width: 860px) {
  .vip-banner {
    aspect-ratio: 4 / 3;
  }
}

/* ── Social row (headline + 3 oval thumbs + follow) ─────────────────────── */
.social-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
@media (max-width: 600px) {
  .social-thumbs {
    grid-template-columns: 1fr;
  }
}

/* ── About section (H2 left, lead + 2 body columns right) ───────────────── */
.about-cols {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-2xl);
}
.about-cols__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  color: var(--text-secondary);
  margin-top: var(--space-lg);
}
@media (max-width: 860px) {
  .about-cols,
  .about-cols__body {
    grid-template-columns: 1fr;
  }
}

/* Scoped banner-pill text fit: the Epic-0 clamp (eyebrow→80px, accent→96px)
   suits short EN words but the longer ES words overflow the fixed-aspect
   pill. Reduce within the homepage only (does not touch 13-atoms-bannerpill). */
.page-section .banner-pill__eyebrow {
  font-size: clamp(20px, 2.6vw, 48px);
}
.page-section .banner-pill__accent {
  font-size: clamp(26px, 3.2vw, 60px);
}

/* Featured-dish carousel: clear the negative-positioned scroll-rail arrows
   off the cards by giving the rail inline margin. */
.featured-dishes .scroll-rail {
  margin-inline: clamp(28px, 3vw, 52px);
}

/* ── Featured dish carousel rail (menu-cards in a horizontal scroll rail) ── */
.home-dish-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 340px);
  gap: var(--space-lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-sm);
}
.home-dish-rail > .menu-card {
  scroll-snap-align: center;
}

/* ── Giant photo-fill wordmark section ──────────────────────────────────── */
.wordmark-section {
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  overflow: hidden;
}

/* ── Sticky reserve CTA wrapper (Viewport 9) — mobile-only, fixed ────────── */
.sticky-cta-fixed {
  position: fixed;
  bottom: 20px;
  right: 20px;
  left: 20px;
  z-index: 90;
  max-width: 420px;
  margin-left: auto;
}
@media (min-width: 861px) {
  .sticky-cta-fixed {
    display: none;
  }
}

/* ── Proof reviews (Viewport 5) — 3-up quote cards ──────────────────────── */
.home-reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}
.home-review {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.home-review__quote {
  color: var(--color-white);
}
.home-review__author {
  color: var(--text-tertiary);
  margin-top: auto;
}
@media (max-width: 860px) {
  .home-reviews {
    grid-template-columns: 1fr;
  }
}
/* ============================================================================
   IMAGE MASKS (Epic 3 shape extension, additive — F1/F2/F3)
   Additive shape vocabulary for the Figma homepage. Coexists with — does NOT
   replace — the design system's rounded-square photo treatments (menu-card,
   event-poster, team-block__disc, photo-cta-disc remain rounded-square).
   Shape-only: border-radius + overflow clip + aspect. Fill comes from either
   an atmospheric bg-* class on the same element (placeholder) or a clipped
   <img> child (real photo). Consumes only existing tokens. No new tokens.
   ============================================================================ */

/* F1 — organic blob mask (hero photo). Asymmetric 8-value radius. */
.mask-blob {
  aspect-ratio: 4 / 5;
  border-radius: 47% 53% 62% 38% / 42% 45% 55% 58%;
  overflow: hidden;
}

/* F2 — vertical oval / capsule mask (concept + social photos). */
.mask-oval {
  aspect-ratio: 3 / 5;
  border-radius: 50%;
  overflow: hidden;
}

/* F3 — true circle mask (team photo, §3). NEW class — the existing disc
   classes deliberately stay rounded-square; this does not touch them. */
.mask-circle {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
}

/* A clipped <img> fills any mask to the shape (real photo path). */
.mask-blob > img,
.mask-oval > img,
.mask-circle > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ============================================================================
   CIRCULAR TEXT RING (Epic 3 shape extension, additive — F4)
   Text laid around a circle via SVG <textPath> (markup supplies the SVG with
   a circle path + <textPath>). This file styles the wrapper, the slow
   rotation, the glyph treatment, and a centered slot (play button / arrow).
   Used by the hero "DISCOVER MORE" scroll indicator and the §3
   "eat drink party repeat ✱" ring around the team play button.
   Consumes only existing tokens. No new tokens. Respects reduced-motion.
   ============================================================================ */

.circular-text {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: clamp(120px, 12vw, 168px);
  height: clamp(120px, 12vw, 168px);
}
.circular-text__ring {
  width: 100%;
  height: 100%;
  animation: circular-text-spin 20s linear infinite;
}
.circular-text__ring text {
  fill: var(--color-white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.circular-text__center {
  position: absolute;
  display: grid;
  place-items: center;
  color: var(--color-light-tur);
}
@keyframes circular-text-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .circular-text__ring {
    animation: none;
  }
}
/* ============================================================================
   PHOTO-FILLED DISPLAY WORDMARK (Epic 3 shape extension, additive — F5)
   Giant display text whose letterforms reveal a photo/gradient behind them
   via background-clip:text (the §13 full-width "TUANI'S"). NEW class — does
   NOT touch the SVG brand-bar logo or #i-logo-full. Default fill is the brand
   multi-color gradient; a real photo swaps in via --fill-img. Consumes only
   existing tokens. No new tokens.
   ============================================================================ */

.photofill-type {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.9;
  text-transform: uppercase;
  background-image: var(
    --fill-img,
    linear-gradient(
      100deg,
      var(--color-light-tur) 0%,
      var(--color-purple-glow) 35%,
      var(--color-pink) 65%,
      var(--color-yellow) 100%
    )
  );
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.photofill-type.is-giant {
  font-size: clamp(72px, 24vw, 360px);
  text-align: center;
  display: block;
  width: 100%;
}
/* ============================================================================
   PAGE LAYOUT — production primitives (Epic 3.x DS, additive)
   Canonical production page-layout layer. The Epic-0 .ds-* utilities in
   02-base.css are showcase-only ("not for production"). This file canonizes
   the production primitives every page assembles its sections with: the
   section container + .is-narrow modifier, the section head trio (head /
   eyebrow / lead) + .is-center, the section CTA row + .is-start, the basic
   responsive grids, and the atmospheric off-card image slot. Bodies are
   byte-identical to the corresponding rules in 21-home.css (which seeded
   these primitives during the Epic-3 homepage build). 21-home.css remains
   in place for backwards compatibility during migration — these selectors
   re-declare with identical bodies (cascade-late, byte-identical → zero
   visual change). The grids carry new names .layout-grid-2/3 (vs the
   home-grid-2/3 still defined in 21-home.css) per locked Decision A.
   Consumes only existing 01-tokens.css tokens. No new tokens.
   ============================================================================ */

/* ── Section container + .is-narrow modifier ──────────────────────────────── */
.page-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-lg);
}
.page-section.is-narrow {
  max-width: 760px;
}

/* ── Section head trio (head / eyebrow / lead) + .is-center modifier ─────── */
.section-head {
  max-width: 760px;
  margin-bottom: var(--space-2xl);
}
.section-head.is-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-eyebrow {
  display: block;
  color: var(--color-light-tur);
  margin-bottom: var(--space-sm);
}
.section-lead {
  color: var(--text-secondary);
  margin-top: var(--space-md);
}

/* ── Section CTA row + .is-start modifier ─────────────────────────────────── */
.section-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
  margin-top: var(--space-xl);
}
.section-cta-row.is-start {
  justify-content: flex-start;
}

/* ── Responsive grids (.layout-grid-2 / .layout-grid-3) ──────────────────── */
.layout-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.layout-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}
@media (max-width: 860px) {
  .layout-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .layout-grid-2 {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px) {
  .layout-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* ── Atmospheric off-card image slot ──────────────────────────────────────── */
.img-slot {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 300px;
}
/* ============================================================================
   §26 · MODAL — canonical DS atom (post-Epic-0, additive)
   2026-05-30 · operator-approved promotion of the sandbox .sb-modal pattern
   used in #14 events gallery and #15 floor-plan treatments.
   Uses native <dialog> for free focus-trap + Esc + click-outside semantics.
   Body-scroll lock via `body.modal-open` (toggled in consumer JS).
   ========================================================================== */

.modal {
  width: min(600px, calc(100vw - var(--space-xl)));
  max-height: calc(100vh - var(--space-2xl));
  background: var(--bg-card);
  color: var(--color-white);
  border: 1px solid var(--color-yellow);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: auto;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  margin: auto;
}
.modal.is-large { width: min(900px, calc(100vw - var(--space-xl))); }
.modal::backdrop {
  background: rgba(16, 18, 38, 0.78);
  backdrop-filter: blur(8px);
}
.modal__close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-subtle);
  color: var(--color-white);
  cursor: pointer;
  font: 700 18px/1 Inter, sans-serif;
  z-index: 2;
}
.modal__close:hover { background: rgba(255, 227, 100, 0.15); border-color: var(--color-yellow); }
.modal__body { padding: 0; display: flex; flex-direction: column; }
.modal__photo {
  width: 100%; aspect-ratio: 16/9;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  position: relative;
}
.modal__content {
  padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-md);
}
.modal__eyebrow { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-yellow); font-weight: 700; }
.modal__title { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -0.02em; color: var(--color-white); line-height: 1.15; }
.modal__sub { color: var(--text-secondary); font-size: var(--fs-body); }
.modal__meta {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-xs) var(--space-md);
  font-size: var(--fs-small); color: var(--text-secondary);
  padding: var(--space-md) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.modal__meta dt { color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-caption); align-self: center; }
.modal__meta dd { margin: 0; color: var(--color-white); font-weight: 600; }
.modal__cta-row { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; margin-top: var(--space-sm); }
body.modal-open { overflow: hidden; }
@media (max-width: 600px) {
  .modal, .modal.is-large { width: 100%; max-width: 100%; max-height: 100vh; border-radius: 0; }
  .modal__photo { border-radius: 0; }
}