/* ==========================================================================
   BEST EVEREST RESTAURANT - PREMIUM EDITION DESIGN SYSTEM
   Visual Direction: Deep Wine, Warm Cream, Muted Gold, Marigold & Warm Orange
   Focus: 100% Legibility, High Visual Contrast, Crisp Typography, Accessible UI
   ========================================================================== */

:root {
  /* Reference Palette Core Direct Tokens */
  --palette-deep-wine: #2E0C0D;
  --palette-wine: #4B1416;
  --palette-wine-panel: #5C1B1D;
  --palette-warm-red: #C8232E;
  --palette-orange: #EF5A22;
  --palette-marigold: #F3821C;
  --palette-mustard-gold: #F2A50E;
  --palette-cream: #FBF2E4;
  --palette-sand: #EFE2C9;
  --palette-charcoal: #241813;
  --palette-warm-white: #FFFDF8;

  /* Functional Color Mapping Tokens */
  --bg-primary: var(--palette-cream);          /* Warm Cream default background */
  --bg-secondary: var(--palette-sand);         /* Sand secondary background */
  --bg-surface: var(--palette-warm-white);     /* Warm White for cards */
  --bg-dark: var(--palette-deep-wine);         /* Deep Wine for dark sections & footer */
  --bg-wine: var(--palette-wine);              /* Wine surface */
  --bg-wine-panel: var(--palette-wine-panel);  /* Wine Panel surface */
  
  --bg-header-glass: rgba(46, 12, 13, 0.95);  /* Deep Wine Header with blur */
  
  /* Text Legibility Tokens */
  --text-primary: var(--palette-charcoal);      /* Deep Charcoal on light surfaces for max legibility */
  --text-secondary: #3D2B23;                   /* Dark Warm Brown for readable body copy */
  --text-muted: #5E4A40;                       /* Subtle Metadata on light surfaces */
  --text-on-dark: var(--palette-cream);        /* Warm Cream for text on dark wine backgrounds */
  --text-on-dark-pure: var(--palette-warm-white); /* Pure Warm White on dark surfaces */
  --text-on-dark-sub: #E6D6C6;                /* Light Warm Sand for secondary text on dark bg */
  
  /* Accent Tokens */
  --accent-primary: var(--palette-mustard-gold);    /* Mustard Gold for primary highlights */
  --accent-primary-hover: #D99309;
  --accent-secondary: var(--palette-marigold);      /* Marigold / Warm Orange */
  --accent-secondary-hover: #D87010;
  --accent-terracotta: var(--palette-orange);       /* Warm Orange accent */
  --accent-warm-red: var(--palette-warm-red);       /* Warm Red for primary buttons */
  
  --accent-brass: var(--palette-mustard-gold);
  --accent-brass-light: var(--palette-marigold);
  
  /* Border Tokens */
  --border-subtle: rgba(75, 20, 22, 0.15);
  --border-medium: rgba(75, 20, 22, 0.28);
  --border-strong: rgba(75, 20, 22, 0.45);
  --border-gold: rgba(242, 165, 14, 0.50);
  --border-gold-solid: var(--palette-mustard-gold);
  --border-wine: rgba(75, 20, 22, 0.35);
  --border-light: rgba(251, 242, 228, 0.25);
  
  /* Typography Hierarchy */
  --font-serif: 'Fraunces', 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Manrope', 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  
  /* Layout & Utility */
  --container-width: 1280px;
  --header-height: 84px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  
  --shadow-sm: 0 4px 16px rgba(36, 24, 19, 0.08);
  --shadow-md: 0 10px 30px rgba(36, 24, 19, 0.14);
  --shadow-lg: 0 20px 45px rgba(36, 24, 19, 0.20);
  --shadow-gold: 0 8px 24px rgba(242, 165, 14, 0.22);
  --shadow-wine: 0 12px 32px rgba(46, 12, 13, 0.35);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

body {
  overflow-x: hidden;
  line-height: 1.6;
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* Subtle warm background texture grain */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: radial-gradient(rgba(184, 74, 40, 0.03) 1px, transparent 0);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

ul {
  list-style: none;
}

/* Custom Cursor - Brass & Terracotta */
@media (min-width: 1025px) {
  body { cursor: default; }
  .custom-cursor {
    width: 32px;
    height: 32px;
    border: 2px solid var(--accent-primary);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s, background-color 0.3s, border-color 0.3s;
  }
  .custom-cursor-dot {
    width: 6px;
    height: 6px;
    background-color: var(--accent-primary);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
  }
  .custom-cursor.hovered {
    width: 52px;
    height: 52px;
    background-color: rgba(184, 74, 40, 0.12);
    border-color: var(--accent-brass);
  }
}

/* Typography Scale & Hierarchy */
.font-serif { font-family: var(--font-serif); }
.font-sans { font-family: var(--font-sans); }

.heading-xl {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.heading-lg {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 3.2vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

.heading-md {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  font-weight: 700;
  color: var(--text-primary);
}

.subheading {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--accent-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.subheading::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background-color: var(--accent-primary);
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
}

.section-padding {
  padding: 5.5rem 0;
}

@media (max-width: 768px) {
  .section-padding {
    padding: 3.5rem 0;
  }
}

/* Buttons with Premium Contrast Rules */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.9rem 2rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: all var(--transition-smooth);
}

.btn-primary {
  background-color: var(--palette-warm-red);
  color: var(--palette-warm-white);
  border: 2px solid var(--palette-warm-red);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background-color: #A81A24;
  border-color: #A81A24;
  box-shadow: 0 8px 24px rgba(200, 35, 46, 0.35);
  color: var(--palette-warm-white);
  transform: translateY(-2px);
}

.btn-outline {
  background-color: transparent;
  color: var(--palette-mustard-gold);
  border: 2px solid var(--palette-mustard-gold);
  box-shadow: var(--shadow-sm);
}

.btn-outline:hover {
  border-color: var(--palette-mustard-gold);
  color: var(--palette-deep-wine);
  background-color: var(--palette-mustard-gold);
  transform: translateY(-2px);
}

.btn-forest, .btn-wine {
  background-color: var(--palette-wine);
  color: var(--palette-warm-white);
  border: 2px solid var(--palette-wine);
}

.btn-forest:hover, .btn-wine:hover {
  background-color: var(--palette-deep-wine);
  border-color: var(--palette-deep-wine);
  color: var(--palette-warm-white);
  transform: translateY(-2px);
}

.btn-brass, .btn-gold {
  background-color: var(--palette-mustard-gold);
  color: var(--palette-deep-wine);
  border: 2px solid var(--palette-mustard-gold);
  font-weight: 800;
}

.btn-brass:hover, .btn-gold:hover {
  background-color: #D99309;
  border-color: #D99309;
  color: var(--palette-deep-wine);
  transform: translateY(-2px);
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.9rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 50px;
  background: var(--palette-deep-wine);
  border: 1.5px solid var(--palette-mustard-gold);
  color: var(--palette-mustard-gold);
  box-shadow: var(--shadow-sm);
}

/* NOW SERVING LIVE PULSE BADGE */
.now-serving-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 1.25rem;
  background: var(--palette-deep-wine);
  border: 2px solid var(--palette-mustard-gold);
  border-radius: 50px;
  color: var(--palette-mustard-gold);
  font-size: 0.78125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: var(--shadow-wine);
}

.now-serving-dot {
  width: 9px;
  height: 9px;
  background-color: var(--palette-mustard-gold);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(242, 165, 14, 0.5);
  animation: pulse-dot 1.8s infinite;
}

@keyframes pulse-dot {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(242, 165, 14, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 9px rgba(242, 165, 14, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(242, 165, 14, 0);
  }
}

/* OFFICIAL LOGO BRANDING */
.official-logo-box {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
}

.official-logo {
  height: 52px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  border-radius: 8px;
  display: block;
  flex-shrink: 0;
  transition: height var(--transition-smooth);
}

.header.scrolled .official-logo {
  height: 42px;
}

.mobile-drawer-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
}

.official-logo-text {
  display: flex;
  flex-direction: column;
}

.official-brand-title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--palette-warm-white);
  text-transform: uppercase;
}

.official-brand-sub {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--palette-mustard-gold);
  font-weight: 700;
}

/* HEADER & NAVIGATION (100% legibility on all scroll states) */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 1000;
  background-color: var(--bg-header-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(242, 165, 14, 0.25);
  box-shadow: var(--shadow-wine);
  transition: background-color var(--transition-smooth), height var(--transition-smooth), border-color var(--transition-smooth);
}

.header.scrolled {
  height: 72px;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.nav-link {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--palette-cream);
  position: relative;
  padding: 0.5rem 0;
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2.5px;
  background-color: var(--palette-mustard-gold);
  transition: width var(--transition-fast);
}

.nav-link:hover, .nav-link.active { color: var(--palette-mustard-gold); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  z-index: 1100;
}

.hamburger-btn span {
  width: 100%;
  height: 2.5px;
  background-color: var(--palette-cream);
  border-radius: 2px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.hamburger-btn.active span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.hamburger-btn.active span:nth-child(2) { opacity: 0; }
.hamburger-btn.active span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

.mobile-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100vh;
  background-color: var(--palette-deep-wine);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6rem 2rem 3rem 2rem;
  transition: right var(--transition-smooth);
  overflow-y: auto;
}

.mobile-drawer.active { right: 0; }

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mobile-nav-link {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--palette-cream);
  font-weight: 700;
}

.mobile-nav-link.active, .mobile-nav-link:hover { color: var(--palette-mustard-gold); }

.mobile-drawer-footer {
  border-top: 1px solid var(--border-light);
  padding-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--text-on-dark-sub);
}

@media (max-width: 1024px) {
  .nav-links, .nav-cta .btn { display: none; }
  .hamburger-btn { display: flex; }
}

/* HERO SECTION WITH CONTROLLED DEEP WINE OVERLAY FOR PERFECT ELEGANCE */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: calc(var(--header-height) + 1rem);
  overflow: hidden;
  background-color: var(--palette-deep-wine);
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  filter: brightness(0.85);
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(46, 12, 13, 0.78) 0%,
    rgba(46, 12, 13, 0.90) 55%,
    rgba(46, 12, 13, 0.97) 100%
  );
  z-index: -1;
}

.hero-content {
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
  z-index: 2;
  padding: 2rem 0;
}

.hero-logo-large {
  width: 110px;
  height: 110px;
  object-fit: contain;
  border-radius: 12px;
  border: 3px solid var(--palette-mustard-gold);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  margin: 0 auto 1.5rem auto;
}

.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 6vw, 4.8rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--palette-warm-white);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}

.hero-subtitle {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--palette-cream);
  font-weight: 500;
  max-width: 700px;
  margin: 0 auto 2rem auto;
  line-height: 1.6;
}

/* SECTION COLOR RHYTHM UTILITIES */
.section-wine-deep {
  background-color: var(--palette-deep-wine) !important;
  color: var(--palette-cream) !important;
}

.section-wine-deep .heading-xl,
.section-wine-deep .heading-lg,
.section-wine-deep .heading-md {
  color: var(--palette-warm-white) !important;
}

.section-wine-deep p {
  color: var(--palette-cream) !important;
}

.section-cream {
  background-color: var(--palette-cream) !important;
  color: var(--palette-charcoal) !important;
}

.section-cream .heading-xl,
.section-cream .heading-lg,
.section-cream .heading-md {
  color: var(--palette-deep-wine) !important;
}

.section-wine-panel {
  background-color: var(--palette-wine-panel) !important;
  color: var(--palette-cream) !important;
}

.section-wine-panel .heading-xl,
.section-wine-panel .heading-lg,
.section-wine-panel .heading-md {
  color: var(--palette-warm-white) !important;
}

.section-sand {
  background-color: var(--palette-sand) !important;
  color: var(--palette-charcoal) !important;
}

.section-sand .heading-xl,
.section-sand .heading-lg,
.section-sand .heading-md {
  color: var(--palette-deep-wine) !important;
}

/* EDITORIAL INTRO SECTION / CHEF VIDEO SHOWCASE */
.intro-section {
  background-color: var(--palette-cream);
}

.heart-kitchen-section {
  padding: 3.5rem 0;
}

.heart-kitchen-video-wrapper {
  position: relative;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1.5px solid var(--border-wine);
  background-color: var(--palette-sand);
  line-height: 0;
  aspect-ratio: 16 / 9;
}

.heart-kitchen-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: inherit;
  pointer-events: none;
  aspect-ratio: 16 / 9;
}

@media (max-width: 992px) {
  .heart-kitchen-section {
    padding: 2.25rem 0;
  }
  .heart-kitchen-video-wrapper {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .heart-kitchen-section {
    padding: 1.75rem 0;
  }
  .heart-kitchen-video-wrapper {
    border-radius: 14px;
    max-width: 100%;
  }
}

.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

@media (max-width: 992px) {
  .intro-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

.intro-image-wrapper {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1.5px solid var(--border-wine);
}

.intro-image-wrapper img {
  width: 100%;
  height: 480px;
  object-fit: cover;
}

/* DISHES SHOWCASE & FEATURED CARDS */
.signature-section { 
  background-color: var(--palette-sand);
  border-top: 1px solid var(--border-medium);
  border-bottom: 1px solid var(--border-medium);
}

.dishes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

@media (max-width: 1024px) { .dishes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .dishes-grid { grid-template-columns: 1fr; } }

.dish-card {
  background-color: var(--palette-warm-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1.5px solid var(--border-wine);
  transition: transform var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}

.dish-card:hover {
  transform: translateY(-6px);
  border-color: var(--palette-mustard-gold);
  box-shadow: var(--shadow-wine);
}

.signature-section .dish-img-box {
  position: relative;
  height: 260px;
  overflow: hidden;
  background-color: var(--palette-cream);
}

.signature-section .dish-img-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 0.35rem;
  transition: transform var(--transition-smooth);
}

.signature-section .dish-card:hover .dish-img-box img { transform: scale(1.04); }

.dish-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.dish-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.5rem;
  gap: 0.5rem;
}

.dish-title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--palette-deep-wine);
}

.dish-price {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--palette-warm-red);
  white-space: nowrap;
}

.dish-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-top: 0.4rem;
  line-height: 1.5;
}

/* MENU PAGE EDITORIAL SYSTEM */
.menu-header-bg {
  padding: 9rem 0 4.5rem 0;
  background: linear-gradient(135deg, #2E0C0D 0%, #4B1416 100%);
  border-bottom: 1.5px solid var(--palette-mustard-gold);
  text-align: center;
  color: var(--palette-cream);
}

.menu-header-bg .heading-xl {
  color: var(--palette-warm-white) !important;
}

.menu-header-bg p {
  color: var(--palette-cream) !important;
}

/* MEAL PERIOD SELECTOR TABS (BREAKFAST, LUNCH, DINNER, DRINKS) */
.meal-period-nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.meal-period-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 0.85rem 1.8rem;
  background: var(--palette-deep-wine);
  border: 2px solid rgba(242, 165, 14, 0.4);
  border-radius: var(--radius-sm);
  color: var(--palette-cream);
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.meal-period-btn .period-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--palette-cream);
}

.meal-period-btn .period-time {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--palette-mustard-gold);
  margin-top: 0.15rem;
}

.meal-period-btn:hover {
  border-color: var(--palette-mustard-gold);
  color: var(--palette-mustard-gold);
  transform: translateY(-2px);
}

.meal-period-btn.active {
  background: var(--palette-mustard-gold);
  border-color: var(--palette-mustard-gold);
  color: var(--palette-deep-wine);
  box-shadow: var(--shadow-gold);
}

.meal-period-btn.active .period-title {
  color: var(--palette-deep-wine);
}

.meal-period-btn.active .period-time {
  color: var(--palette-wine);
}

/* STICKY MENU FILTER BAR */
.menu-filter-nav {
  position: sticky;
  top: var(--header-height);
  z-index: 900;
  background-color: var(--bg-header-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(242, 165, 14, 0.25);
  padding: 1rem 0;
  box-shadow: var(--shadow-wine);
}

.menu-filter-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.filter-tabs {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  overflow-x: auto;
  padding-bottom: 0.2rem;
  scrollbar-width: none;
}

.filter-tabs::-webkit-scrollbar { display: none; }

.filter-btn {
  padding: 0.6rem 1.3rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 50px;
  background: var(--palette-deep-wine);
  color: var(--palette-cream);
  border: 1.5px solid rgba(242, 165, 14, 0.4);
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.filter-btn.active, .filter-btn:hover {
  background: var(--palette-mustard-gold);
  color: var(--palette-deep-wine);
  border-color: var(--palette-mustard-gold);
  font-weight: 800;
}

.menu-search-input {
  width: 100%;
  padding: 0.7rem 1.2rem;
  background: var(--palette-warm-white);
  border: 2px solid var(--border-wine);
  border-radius: 50px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--palette-charcoal);
  box-shadow: var(--shadow-sm);
  outline: none;
  transition: border-color var(--transition-fast);
}

.menu-search-input:focus {
  border-color: var(--palette-mustard-gold);
}

/* EDITORIAL MENU LIST ROWS (Ultra Crisp Legibility) */
.category-block { margin-bottom: 3.5rem; }

.category-title {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--palette-deep-wine);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.category-title::after {
  content: "";
  flex-grow: 1;
  height: 2px;
  background: var(--palette-mustard-gold);
}

.menu-list-rows {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

@media (max-width: 900px) {
  .menu-list-rows { grid-template-columns: 1fr; }
}

.menu-item-row {
  display: flex;
  flex-direction: column;
  padding: 1.2rem 1.4rem;
  background-color: var(--palette-warm-white);
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-wine);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}

.menu-item-row:hover {
  transform: translateY(-2px);
  border-color: var(--palette-mustard-gold);
  box-shadow: var(--shadow-md);
}

.menu-item-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.menu-item-name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--palette-deep-wine);
}

.menu-item-dots {
  flex-grow: 1;
  border-bottom: 2px dotted rgba(75, 20, 22, 0.25);
  margin: 0 0.5rem 0.25rem 0.5rem;
}

.menu-item-price {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--palette-warm-red);
  white-space: nowrap;
}

.menu-item-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-top: 0.4rem;
  line-height: 1.5;
}

/* PAGE HERO BANNERS (GALLERY, ABOUT, CONTACT) */
.gallery-hero-bg, .about-hero-bg, .contact-hero-bg {
  padding: 8rem 0 4.5rem 0;
  background: linear-gradient(135deg, #2E0C0D 0%, #4B1416 100%);
  text-align: center;
  border-bottom: 1.5px solid var(--palette-mustard-gold);
  color: var(--palette-cream);
}

.gallery-hero-bg .heading-xl,
.about-hero-bg .heading-xl,
.contact-hero-bg .heading-xl {
  color: var(--palette-warm-white) !important;
}

.gallery-hero-bg p,
.about-hero-bg p,
.contact-hero-bg p {
  color: var(--palette-cream) !important;
}

/* GALLERY & LIGHTBOX */
.gallery-grid {
  columns: 3 300px;
  column-gap: 1.5rem;
}

.gallery-item {
  break-inside: avoid;
  margin-bottom: 1.5rem;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  border: 1.5px solid var(--border-wine);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}

.gallery-item img {
  width: 100%;
  height: auto;
  transition: transform var(--transition-smooth);
}

.gallery-item:hover {
  border-color: var(--palette-mustard-gold);
  box-shadow: var(--shadow-wine);
}

.gallery-item:hover img { transform: scale(1.05); }

/* LIGHTBOX MODAL */
.lightbox-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(46, 12, 13, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-smooth);
}

.lightbox-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox-img {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  border: 2px solid var(--palette-mustard-gold);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
}

.lightbox-close-btn, .lightbox-prev-btn, .lightbox-next-btn {
  position: absolute;
  color: var(--palette-warm-white);
  font-size: 2rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--palette-deep-wine);
  border: 1.5px solid var(--palette-mustard-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.lightbox-close-btn:hover, .lightbox-prev-btn:hover, .lightbox-next-btn:hover {
  background: var(--palette-warm-red);
  border-color: var(--palette-warm-red);
}

.lightbox-close-btn { top: 2rem; right: 2rem; }
.lightbox-prev-btn { left: 2rem; top: 50%; transform: translateY(-50%); }
.lightbox-next-btn { right: 2rem; top: 50%; transform: translateY(-50%); }

/* CONTACT & MAP */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
}

@media (max-width: 992px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-info-card {
  background-color: var(--palette-warm-white);
  border: 1.5px solid var(--border-wine);
  border-radius: var(--radius-md);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  box-shadow: var(--shadow-sm);
}

.hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.hours-table tr { border-bottom: 1px solid var(--border-subtle); }
.hours-table td { padding: 0.65rem 0; color: var(--palette-charcoal); font-weight: 500; }
.hours-table td:last-child { text-align: right; color: var(--palette-warm-red); font-weight: 700; }

.map-card {
  position: relative;
  min-height: 420px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1.5px solid var(--border-wine);
  box-shadow: var(--shadow-sm);
}

.map-card iframe {
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: none;
}

.map-overlay-btn {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 10;
}

/* FOOTER - LUXURY DEEP WINE DEEP BROWN */
.footer {
  background-color: var(--palette-deep-wine);
  border-top: 2px solid var(--palette-mustard-gold);
  padding: 4.5rem 0 2rem 0;
  color: var(--palette-cream);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 3rem;
  margin-bottom: 3.5rem;
}

@media (max-width: 992px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 576px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-col h4 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--palette-warm-white);
  margin-bottom: 1.25rem;
}

.footer-links-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.9rem;
}

.footer-links-list a {
  color: var(--palette-cream);
}

.footer-links-list a:hover {
  color: var(--palette-mustard-gold);
}

.footer-bottom {
  border-top: 1px solid rgba(251, 242, 228, 0.15);
  padding-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: #D6C6B6;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Scroll Reveal Animation */
.reveal-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-up.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   WEEKLY THALI SPECIAL MENU BOARD - WARM LUXURY HIGH CONTRAST DESIGN
   ========================================================================== */

.weekly-special-section {
  background-color: var(--palette-wine-panel);
  position: relative;
  border-bottom: 1.5px solid var(--palette-mustard-gold);
  overflow: hidden;
  color: var(--palette-cream);
}

.weekly-special-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.weekly-special-header .heading-lg {
  color: var(--palette-warm-white) !important;
}

.weekly-special-header .subheading {
  color: var(--palette-mustard-gold) !important;
}

.weekly-special-timings-badge {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: var(--palette-deep-wine);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--palette-mustard-gold);
  box-shadow: var(--shadow-wine);
}

.timing-icon {
  font-size: 1.25rem;
}

.timing-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--palette-mustard-gold);
  text-transform: uppercase;
}

.timing-sub {
  display: block;
  font-size: 0.8rem;
  color: var(--palette-cream);
}

/* DAY NAVIGATION BAR */
.day-nav-wrapper {
  margin-bottom: 2.5rem;
  position: relative;
}

.day-nav-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  overflow-x: auto;
  padding: 0.5rem 0.25rem 0.85rem 0.25rem;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.day-nav-bar::-webkit-scrollbar { display: none; }

.day-tab-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  background: var(--palette-deep-wine);
  border: 2px solid rgba(242, 165, 14, 0.4);
  border-radius: var(--radius-sm);
  color: var(--palette-cream);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: all var(--transition-fast);
  position: relative;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

.day-tab-btn:hover {
  border-color: var(--palette-mustard-gold);
  color: var(--palette-mustard-gold);
  background: var(--palette-wine);
}

.day-tab-btn.active {
  background: var(--palette-mustard-gold);
  border-color: var(--palette-mustard-gold);
  color: var(--palette-deep-wine);
  font-weight: 800;
  box-shadow: var(--shadow-gold);
}

.day-tab-btn.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 15%;
  width: 70%;
  height: 2.5px;
  background: var(--palette-deep-wine);
  border-radius: 2px;
}

.day-today-indicator {
  display: none;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  border-radius: 3px;
  background: var(--palette-warm-red);
  color: var(--palette-warm-white);
  line-height: 1;
}

.day-tab-btn.is-today .day-today-indicator {
  display: inline-block;
}

/* DAILY MENU BOARD CONTAINER */
.daily-menu-board-wrapper {
  max-width: 900px;
  margin: 0 auto;
}

.daily-menu-board {
  position: relative;
  background: var(--palette-warm-white);
  border: 2px solid var(--palette-mustard-gold);
  border-radius: var(--radius-md);
  padding: 3.5rem 3rem 2.5rem 3rem;
  box-shadow: var(--shadow-wine);
  transition: opacity 0.25s ease, transform 0.25s ease;
  overflow: hidden;
}

.daily-menu-board.switching {
  opacity: 0;
  transform: translateY(8px);
}

/* Giant background watermark typography */
.daily-board-watermark {
  position: absolute;
  top: -1.5rem;
  right: -1rem;
  font-family: var(--font-serif);
  font-size: clamp(5rem, 12vw, 11rem);
  font-weight: 700;
  color: rgba(75, 20, 22, 0.04);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
  line-height: 1;
  z-index: 0;
}

.daily-board-header {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 2.5rem;
}

.daily-board-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.daily-meta-tag {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--palette-warm-red);
}

.daily-meta-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  background: var(--palette-deep-wine);
  border: 1px solid var(--palette-mustard-gold);
  color: var(--palette-mustard-gold);
  border-radius: 50px;
}

.daily-board-day {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 700;
  color: var(--palette-deep-wine);
  line-height: 1.1;
}

.daily-board-thali-title {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-style: italic;
  color: var(--palette-warm-red);
  margin-top: 0.35rem;
}

.daily-board-divider {
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--palette-mustard-gold), transparent);
  margin: 1.5rem auto 0 auto;
}

/* DISH LIST ON LUXURY MENU BOARD */
.daily-board-dishes {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.daily-dish-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  background: var(--palette-cream);
  border: 1.5px solid var(--border-wine);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.daily-dish-row:hover {
  border-color: var(--palette-mustard-gold);
  transform: translateX(4px);
  background: var(--palette-warm-white);
}

.daily-dish-info {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.daily-dish-num {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--palette-warm-red);
  opacity: 0.9;
  min-width: 24px;
}

.daily-dish-name {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--palette-deep-wine);
  letter-spacing: 0.01em;
}

.daily-dish-tag {
  font-size: 0.725rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--palette-warm-red);
  border-left: 1.5px solid var(--border-medium);
  padding-left: 1rem;
  white-space: nowrap;
}

/* SUNDAY NOTICE STYLING */
.sunday-notice-box {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: var(--bg-secondary);
  border: 1.5px dashed var(--border-medium);
  border-radius: var(--radius-sm);
}

.sunday-notice-box p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.8;
  max-width: 650px;
  margin: 0 auto;
}

/* BOARD FOOTER */
.daily-board-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--border-medium);
  padding-top: 1.5rem;
  text-align: center;
}

.daily-footer-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.daily-footer-info strong {
  color: var(--text-primary);
}

.footer-info-bullet {
  color: var(--accent-primary);
  opacity: 0.8;
}

/* RESPONSIVE CSS */
@media (max-width: 768px) {
  .daily-menu-board {
    padding: 2.25rem 1.25rem 1.75rem 1.25rem;
  }
  
  .daily-dish-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1rem;
  }
  
  .daily-dish-tag {
    border-left: none;
    padding-left: 0;
    margin-left: 2.2rem;
    color: var(--accent-primary);
  }
  
  .weekly-special-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* MENU DISH THUMBNAILS & ALL 20 IMAGES SHOWCASE GRID */
.daily-dish-thumb {
  width: 58px;
  height: 58px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1.5px solid var(--border-medium);
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  background-color: var(--bg-secondary);
}

.menu-item-row-with-thumb {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.menu-item-thumb {
  width: 76px;
  height: 76px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1.5px solid var(--border-medium);
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  background-color: var(--bg-secondary);
  transition: transform var(--transition-fast);
}

.menu-item-row:hover .menu-item-thumb {
  transform: scale(1.05);
  border-color: var(--accent-primary);
}

.menu-showcase-section {
  padding: 4rem 0;
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-medium);
  border-bottom: 1px solid var(--border-medium);
}

.menu-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.75rem;
  margin-top: 2.5rem;
}

.menu-showcase-card {
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-medium);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth);
  display: flex;
  flex-direction: column;
}

.menu-showcase-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-md);
}

.menu-showcase-img-box {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--bg-secondary);
}

.menu-showcase-img-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 0.35rem;
  transition: transform var(--transition-smooth);
}

.menu-showcase-card:hover .menu-showcase-img-box img {
  transform: scale(1.04);
}

.menu-showcase-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex-grow: 1;
}

.menu-showcase-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}

.menu-showcase-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
}

.menu-showcase-price {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent-primary);
  white-space: nowrap;
}

.menu-showcase-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.725rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-terracotta);
  background: var(--bg-secondary);
  padding: 0.25rem 0.65rem;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
  margin-top: 0.25rem;
}

/* ==========================================================================
   MENU TO AUTHENTIC DISH GALLERY CONNECTION & PREMIUM HIGHLIGHT STYLES
   ========================================================================== */
.menu-item-row[data-dish],
.daily-dish-row[data-dish] {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.menu-item-row[data-dish]:hover,
.daily-dish-row[data-dish]:hover {
  border-color: var(--palette-mustard-gold);
  background-color: rgba(242, 165, 14, 0.07);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(75, 20, 22, 0.12), 0 0 0 1px var(--palette-mustard-gold);
}

.menu-photo-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  font-family: var(--font-sans, 'Manrope', sans-serif);
  color: var(--palette-orange);
  background: rgba(239, 90, 34, 0.1);
  border: 1px solid rgba(239, 90, 34, 0.28);
  padding: 0.12rem 0.5rem;
  border-radius: 12px;
  margin-left: 0.45rem;
  vertical-align: middle;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.menu-item-row[data-dish]:hover .menu-photo-badge,
.daily-dish-row[data-dish]:hover .menu-photo-badge {
  background: var(--palette-orange);
  color: var(--palette-warm-white);
  border-color: var(--palette-orange);
  box-shadow: 0 2px 8px rgba(239, 90, 34, 0.35);
  transform: scale(1.04);
}

/* Gallery Container Dimming during selection */
.menu-showcase-grid.gallery-has-highlight .menu-showcase-card {
  opacity: 0.45;
  filter: grayscale(20%);
  transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Selected Highlighted Gallery Card Effect */
.menu-showcase-grid.gallery-has-highlight .menu-showcase-card.highlighted-dish {
  opacity: 1;
  filter: none;
  transform: translateY(-8px) scale(1.025);
  z-index: 10;
  border-color: var(--palette-mustard-gold);
  box-shadow: 0 16px 40px rgba(242, 165, 14, 0.45), 0 0 0 3.5px var(--palette-mustard-gold), 0 0 30px rgba(239, 90, 34, 0.35);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-showcase-card.highlighted-dish .menu-showcase-img-box img {
  transform: scale(1.06);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}


/* ==========================================================================
   CATERING EDITORIAL & GALLERY SECTION STYLES
   ========================================================================== */
.catering-editorial-section {
  padding: 5rem 0;
  background-color: var(--bg-primary);
  border-top: 1px solid var(--border-medium);
  border-bottom: 1px solid var(--border-medium);
  position: relative;
}

.section-tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  background: rgba(184, 74, 40, 0.1);
  border: 1px solid var(--border-accent);
  border-radius: 50px;
  color: var(--accent-primary);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.section-tag-badge-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  background: rgba(158, 123, 53, 0.12);
  border: 1px solid rgba(158, 123, 53, 0.35);
  border-radius: 50px;
  color: var(--accent-brass);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.catering-editorial-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
  grid-auto-rows: 240px;
  margin-top: 3rem;
}

/* Dynamic Grid Spans for Magazine Editorial Layout */
.grid-span-hero {
  grid-column: span 8;
  grid-row: span 2;
}

.grid-span-tall {
  grid-column: span 4;
  grid-row: span 2;
}

.grid-span-wide {
  grid-column: span 6;
  grid-row: span 1;
}

.grid-span-third {
  grid-column: span 4;
  grid-row: span 1;
}

.grid-span-half {
  grid-column: span 6;
  grid-row: span 1;
}

.grid-span-quarter {
  grid-column: span 3;
  grid-row: span 1;
}

/* Editorial Catering Tile */
.editorial-catering-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1.5px solid var(--border-medium);
  background-color: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}

.editorial-catering-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent-primary);
}

.editorial-catering-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.editorial-catering-card:hover img {
  transform: scale(1.07);
}

.editorial-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(18, 14, 12, 0.90) 0%, rgba(18, 14, 12, 0.45) 50%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  opacity: 0.92;
  transition: opacity var(--transition-fast);
}

.editorial-catering-card:hover .editorial-card-overlay {
  opacity: 1;
}

.editorial-card-badge {
  align-self: flex-start;
  background: var(--accent-primary);
  color: #FFFFFF;
  font-size: 0.725rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 50px;
  margin-bottom: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.editorial-card-badge-gold {
  align-self: flex-start;
  background: var(--accent-brass);
  color: #FFFFFF;
  font-size: 0.725rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 50px;
  margin-bottom: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.editorial-card-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.3;
  margin-bottom: 0.2rem;
}

.editorial-card-subtitle {
  font-size: 0.85rem;
  color: var(--text-on-dark-sub);
  font-weight: 500;
}

/* ==========================================================================
   INDEX CINEMATIC RESTAURANT VIDEO SHOWCASE
   ========================================================================== */
.index-video-section {
  padding: 4rem 0;
  background-color: var(--bg-primary);
  position: relative;
  overflow: hidden;
}

.index-video-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.index-video-wrapper {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  border: 1.5px solid var(--border-gold, rgba(242, 165, 14, 0.4));
  box-shadow: 0 16px 45px rgba(46, 12, 13, 0.18), 0 4px 15px rgba(0, 0, 0, 0.08);
  background: transparent;
  line-height: 0;
  position: relative;
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}

.index-video-wrapper:hover {
  transform: translateY(-3px);
  border-color: var(--palette-mustard-gold);
  box-shadow: 0 22px 55px rgba(46, 12, 13, 0.24), 0 6px 20px rgba(242, 165, 14, 0.2);
}

.index-video-element {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border: none;
  outline: none;
  margin: 0;
  padding: 0;
  background: transparent;
}

@media (max-width: 768px) {
  .index-video-section {
    padding: 2.5rem 0;
  }
  
  .index-video-wrapper {
    border-radius: var(--radius-md, 12px);
    border-width: 1px;
  }
}

/* ==========================================================================
   GALLERY PAGE - REAL RESTAURANT EXPERIENCE SHOWCASE
   ========================================================================== */
.gallery-real-experience-section {
  padding: 3.25rem 0;
  background-color: var(--bg-primary);
  border-top: 1px solid var(--border-medium);
  position: relative;
}

.gallery-real-entrance-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.gallery-real-entrance-wrapper {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  border: 1.5px solid var(--border-gold, rgba(242, 165, 14, 0.4));
  box-shadow: 0 14px 38px rgba(46, 12, 13, 0.16), 0 4px 15px rgba(0, 0, 0, 0.06);
  background: transparent;
  line-height: 0;
  position: relative;
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}

.gallery-real-entrance-wrapper:hover {
  transform: translateY(-3px);
  border-color: var(--palette-mustard-gold);
  box-shadow: 0 20px 48px rgba(46, 12, 13, 0.22), 0 6px 18px rgba(242, 165, 14, 0.18);
}

.gallery-real-entrance-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 540px;
  object-fit: contain;
  margin: 0 auto;
  border: none;
  outline: none;
  background: transparent;
}

@media (max-width: 768px) {
  .gallery-real-experience-section {
    padding: 2.25rem 0;
  }
  
  .gallery-real-entrance-wrapper {
    max-width: 340px;
    border-radius: var(--radius-md, 12px);
    border-width: 1px;
  }
  
  .gallery-real-entrance-img {
    max-height: 440px;
  }
}

/* Catering Callout Banner Box */
.catering-cta-banner {
  margin-top: 3.5rem;
  background: linear-gradient(135deg, #1C1613 0%, #2D221D 100%);
  border-radius: var(--radius-lg);
  padding: 3rem 2.5rem;
  border: 1px solid var(--accent-brass);
  color: #FFFFFF;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  box-shadow: var(--shadow-lg);
}

.catering-cta-content h3 {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  color: #FFFFFF;
  margin-bottom: 0.5rem;
}

.catering-cta-content p {
  color: var(--text-on-dark-sub);
  max-width: 620px;
  font-size: 0.98rem;
  line-height: 1.7;
}

/* ==========================================================================
   DEDICATED CATERING & BIRTHDAY PAGES PREMIUM STYLES
   ========================================================================== */

/* CATERING HERO BACKGROUND */
.catering-hero-bg {
  padding: 6rem 0 4rem 0;
  background: linear-gradient(135deg, rgba(20, 51, 36, 0.06) 0%, rgba(184, 74, 40, 0.04) 100%), var(--bg-surface);
  border-bottom: 1px solid var(--border-medium);
  text-align: center;
}

/* CATERING EDITORIAL FEATURE SPLIT */
.catering-editorial-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

.catering-feature-media {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-medium);
}

.catering-hero-img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.catering-feature-media:hover .catering-hero-img {
  transform: scale(1.04);
}

.catering-media-badge {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  background: rgba(22, 17, 15, 0.85);
  backdrop-filter: blur(8px);
  color: var(--accent-brass-light);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 6px 14px;
  border-radius: 50px;
  border: 1px solid var(--accent-brass);
}

.catering-highlights-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.catering-highlights-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.98rem;
  color: var(--text-primary);
}

.catering-highlights-list li span {
  color: var(--accent-primary);
  font-weight: 700;
}

/* CATERING INFO CARDS GRID */
.catering-info-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.catering-info-card {
  padding: 2.25rem 1.8rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-smooth);
}

.catering-info-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-primary);
}

.catering-card-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.catering-info-card h3 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--text-primary);
  margin-bottom: 0.6rem;
}

.catering-info-card p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* ==========================================================================
   MOST IMPORTANT CATERING NOTICE BOX (PREMIUM HIGHLIGHT TREATMENT)
   ========================================================================== */
.catering-notice-section {
  background: linear-gradient(135deg, #2E0C0D 0%, #5C1B1D 100%);
  color: var(--palette-cream);
  position: relative;
  overflow: hidden;
  border-top: 2px solid var(--palette-mustard-gold);
  border-bottom: 2px solid var(--palette-mustard-gold);
}

.catering-notice-card {
  max-width: 860px;
  margin: 0 auto;
  padding: 3.5rem 3rem;
  background: rgba(46, 12, 13, 0.90);
  border: 2.5px solid var(--palette-mustard-gold);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(46, 12, 13, 0.7);
  text-align: center;
  position: relative;
}

.notice-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--palette-mustard-gold);
  background: rgba(242, 165, 14, 0.15);
  padding: 6px 18px;
  border-radius: 50px;
  border: 1.5px solid var(--palette-mustard-gold);
}

.notice-main-heading {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--palette-warm-white);
  margin-top: 0.8rem;
}

.notice-divider {
  width: 90px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--palette-mustard-gold), transparent);
  margin: 1.5rem auto 2rem auto;
}

.notice-wording-box {
  background: rgba(0, 0, 0, 0.45);
  border-left: 4px solid var(--palette-mustard-gold);
  border-right: 4px solid var(--palette-mustard-gold);
  padding: 2rem 2.5rem;
  border-radius: var(--radius-sm);
  margin-bottom: 2rem;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
}

.notice-exact-text {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.8vw, 1.75rem);
  font-weight: 600;
  color: var(--palette-warm-white);
  line-height: 1.6;
  letter-spacing: 0.02em;
}

.notice-exact-text.text-urgent {
  color: var(--palette-marigold);
  margin-top: 0.75rem;
}

.notice-footer {
  font-size: 0.9rem;
  color: var(--palette-cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

/* CATERING HERO BACKGROUND */
.catering-hero-bg {
  padding: 8rem 0 4.5rem 0;
  background: linear-gradient(135deg, #2E0C0D 0%, #4B1416 100%);
  text-align: center;
  border-bottom: 1.5px solid var(--palette-mustard-gold);
  color: var(--palette-cream);
}

.catering-hero-bg .heading-xl {
  color: var(--palette-warm-white) !important;
}

.catering-hero-bg p {
  color: var(--palette-cream) !important;
}

/* BIRTHDAY PAGE HERO & EDITORIAL STYLES */
.birthday-page-body {
  background-color: var(--palette-cream);
}

.birthday-hero-bg {
  padding: 8rem 0 4.5rem 0;
  background: linear-gradient(135deg, #2E0C0D 0%, #4B1416 100%);
  text-align: center;
  border-bottom: 1.5px solid var(--palette-mustard-gold);
  color: var(--palette-cream);
}

.birthday-hero-bg .heading-xl {
  color: var(--palette-warm-white) !important;
}

.subheading-gold {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--palette-mustard-gold);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.birthday-editorial-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}

.birthday-main-feature {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid var(--accent-brass);
  height: 100%;
  min-height: 498px;
  box-shadow: var(--shadow-lg);
  width: 100%;
  box-sizing: border-box;
  background-color: var(--bg-surface);
  cursor: pointer;
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}

.birthday-main-feature img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.birthday-main-feature:hover img {
  transform: scale(1.05);
}

.birthday-feature-badge {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  background: var(--accent-primary);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 6px 14px;
  border-radius: 50px;
  z-index: 2;
}

.birthday-feature-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 2rem 1.8rem 1.5rem 1.8rem;
  background: linear-gradient(to top, rgba(15, 20, 16, 0.95) 0%, rgba(15, 20, 16, 0.4) 60%, transparent 100%);
  color: #FFFFFF;
  box-sizing: border-box;
  z-index: 2;
}

.birthday-feature-caption h3 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: #FFFFFF;
}

.birthday-feature-caption p {
  font-size: 0.9rem;
  color: var(--text-on-dark-sub);
  margin-top: 0.4rem;
}

.birthday-side-features {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.birthday-side-card {
  position: relative;
  flex: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1.5px solid var(--accent-brass);
  box-shadow: var(--shadow-md);
  min-height: 235px;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--bg-surface);
  cursor: pointer;
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}

.birthday-side-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent-brass);
}

.birthday-side-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s ease;
}

.birthday-side-card:hover img {
  transform: scale(1.06);
}

.birthday-side-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 1.5rem 1.25rem 1.25rem 1.25rem;
  background: linear-gradient(to top, rgba(15, 20, 16, 0.95) 0%, rgba(15, 20, 16, 0.4) 60%, transparent 100%);
  color: #FFFFFF;
  box-sizing: border-box;
  z-index: 2;
}

.caption-tag {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent-brass-light);
  display: block;
  margin-bottom: 0.2rem;
}

.birthday-side-caption h4 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: #FFFFFF;
}

/* BIRTHDAY HIGHLIGHTS GRID */
.birthday-highlights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  width: 100%;
}

.birthday-highlight-card {
  padding: 2.25rem 1.8rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: all var(--transition-smooth);
}

.birthday-highlight-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-brass);
}

.highlight-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.birthday-highlight-card h3 {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.birthday-highlight-card p {
  color: var(--text-secondary);
  font-size: 0.925rem;
  line-height: 1.7;
}

/* BIRTHDAY CELEBRATION EDITORIAL SECTION (DESKTOP BASE) */
.birthday-celebration-section {
  padding: 5rem 0;
  background-color: var(--bg-surface);
  border-top: 1px solid var(--border-medium);
  border-bottom: 1px solid var(--border-medium);
  position: relative;
  width: 100%;
}

.birthday-editorial-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
  grid-auto-rows: 240px;
  margin-top: 3rem;
  width: 100%;
}

.birthday-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1.5px solid rgba(158, 123, 53, 0.35);
  background-color: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  width: 100%;
  height: 100%;
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}

.birthday-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent-brass);
}

.birthday-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.birthday-card:hover img {
  transform: scale(1.07);
}

.birthday-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: linear-gradient(to top, rgba(15, 20, 16, 0.94) 0%, rgba(15, 20, 16, 0.45) 50%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  box-sizing: border-box;
  opacity: 0.94;
  transition: opacity var(--transition-fast);
}

.birthday-card:hover .birthday-card-overlay {
  opacity: 1;
}

.birthday-card-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.3;
  margin-bottom: 0.2rem;
}

.birthday-card-desc {
  font-size: 0.85rem;
  color: var(--text-on-dark-sub);
  font-weight: 500;
}

/* GALLERY DEDICATED EXPERIENCES CARDS GRID */
.gallery-dedicated-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

.gallery-experience-card {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 2px solid var(--border-medium);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-smooth);
  display: flex;
  flex-direction: column;
}

.gallery-experience-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent-primary);
}

.experience-card-media {
  position: relative;
  height: 280px;
  overflow: hidden;
}

.experience-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-experience-card:hover .experience-card-media img {
  transform: scale(1.06);
}

.experience-card-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(22, 17, 15, 0.85);
  backdrop-filter: blur(6px);
  color: var(--accent-brass-light);
  font-size: 0.725rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 5px 12px;
  border-radius: 50px;
  border: 1px solid var(--accent-brass);
}

.experience-card-body {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.experience-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-primary);
  margin-bottom: 0.4rem;
}

.experience-card-body h3 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--text-primary);
  margin-bottom: 0.6rem;
}

.experience-card-body p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.7;
  flex: 1;
}

/* ==========================================================================
   COMPREHENSIVE MOBILE RESPONSIVE & PREMIUM POLISH
   CATERING & BIRTHDAY PARTY PAGES
   Targeting breakpoints: Desktop (>1024px), Tablet (768px - 1024px), Mobile (<768px, 430px, 390px, 375px)
   ========================================================================== */

/* TABLET & INTERMEDIATE BREAKPOINT (max-width: 1024px) */
@media (max-width: 1024px) {
  .catering-editorial-feature {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .catering-hero-img {
    height: 380px;
  }

  .birthday-editorial-hero {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .birthday-main-feature {
    height: 380px;
  }

  .gallery-dedicated-cards-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .catering-info-cards-grid,
  .birthday-highlights-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .catering-editorial-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 260px;
    gap: 1.25rem;
  }

  .birthday-editorial-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }

  .grid-span-hero,
  .grid-span-tall,
  .grid-span-wide,
  .grid-span-third,
  .grid-span-half,
  .grid-span-quarter {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
}

/* MOBILE RESPONSIVE STACKED LAYOUT (max-width: 768px) */
@media (max-width: 768px) {
  /* Prevent horizontal overflow across page components */
  .catering-hero-bg,
  .birthday-hero-bg,
  .catering-editorial-section,
  .birthday-celebration-section,
  .catering-notice-section {
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  /* Hero Section Polish */
  .catering-hero-bg {
    padding: 4.5rem 1rem 3rem 1rem;
  }

  .birthday-hero-bg {
    padding: 4.5rem 1rem 3rem 1rem;
  }

  .catering-hero-bg .heading-xl,
  .birthday-hero-bg .heading-xl {
    font-size: clamp(1.85rem, 6.5vw, 2.4rem) !important;
    line-height: 1.25 !important;
    margin-top: 0.4rem !important;
  }

  .catering-hero-bg p,
  .birthday-hero-bg p {
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
    padding: 0 0.5rem;
  }

  /* Hero Action Buttons - Full Width Stacking */
  .catering-hero-bg div[style*="display: flex"],
  .birthday-hero-bg div[style*="display: flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 1.5rem auto 0 auto !important;
    gap: 0.75rem !important;
  }

  .catering-hero-bg .btn,
  .birthday-hero-bg .btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    white-space: normal !important;
    word-break: break-word !important;
    padding: 0.8rem 1rem !important;
    box-sizing: border-box !important;
  }

  /* Editorial Feature Split - Mobile Stack */
  .catering-editorial-feature {
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
  }

  .catering-hero-img {
    height: 250px !important;
    width: 100% !important;
    border-radius: var(--radius-md) !important;
  }

  .catering-feature-content {
    width: 100% !important;
  }

  .catering-feature-content h2 {
    font-size: clamp(1.4rem, 5vw, 1.8rem) !important;
    line-height: 1.3 !important;
  }

  .catering-highlights-list li {
    font-size: 0.925rem !important;
    line-height: 1.6 !important;
  }

  /* Cards Grids - 1 Column Stack */
  .catering-info-cards-grid,
  .birthday-highlights-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  .catering-info-card,
  .birthday-highlight-card {
    padding: 1.75rem 1.25rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  .catering-info-card h3,
  .birthday-highlight-card h3 {
    font-size: 1.25rem !important;
  }

  /* Birthday Main & Side Feature Showcase - Mobile Stack */
  .birthday-editorial-hero {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    width: 100% !important;
  }

  .birthday-main-feature {
    height: 260px !important;
    width: 100% !important;
  }

  .birthday-feature-caption {
    padding: 1.25rem 1rem 1rem 1rem !important;
  }

  .birthday-feature-caption h3 {
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
  }

  .birthday-side-features {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    width: 100% !important;
  }

  .birthday-side-card {
    min-height: 200px !important;
    height: 200px !important;
    width: 100% !important;
  }

  /* Important Booking Timeline Notice Box - Mobile Fit */
  .catering-notice-card {
    padding: 2rem 1.15rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-width: 1.5px !important;
    margin: 0 auto !important;
  }

  .notice-eyebrow {
    font-size: 0.725rem !important;
    letter-spacing: 0.15em !important;
    padding: 5px 12px !important;
  }

  .notice-main-heading {
    font-size: clamp(1.5rem, 5.5vw, 2rem) !important;
  }

  .notice-wording-box {
    padding: 1.25rem 1rem !important;
    margin: 1.25rem 0 1.5rem 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-left-width: 3px !important;
    border-right-width: 3px !important;
  }

  .notice-exact-text {
    font-size: clamp(1.05rem, 4vw, 1.3rem) !important;
    line-height: 1.5 !important;
  }

  .notice-footer {
    width: 100% !important;
    align-items: center !important;
  }

  .notice-footer .btn {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
    text-align: center !important;
    box-sizing: border-box !important;
    padding: 0.85rem 1rem !important;
    font-size: 0.9rem !important;
    margin-top: 1rem !important;
  }

  /* Editorial Photo Gallery Grid - Clean Mobile Stack */
  .catering-editorial-grid,
  .birthday-editorial-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    margin-top: 2rem !important;
    width: 100% !important;
  }

  .editorial-catering-card,
  .birthday-card {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    min-height: 260px !important;
    height: 260px !important;
    box-sizing: border-box !important;
  }

  .editorial-catering-card img,
  .birthday-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .editorial-card-overlay,
  .birthday-card-overlay {
    padding: 1.25rem 1rem 1rem 1rem !important;
    background: linear-gradient(to top, rgba(15, 12, 11, 0.92) 0%, rgba(15, 12, 11, 0.4) 60%, transparent 100%) !important;
  }

  .editorial-card-title,
  .birthday-card-title {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
  }

  .editorial-card-subtitle,
  .birthday-card-desc {
    font-size: 0.825rem !important;
  }

  /* CRITICAL CTA BANNER RESPONSIVE STACK & BUTTON FIX */
  .catering-cta-banner {
    flex-direction: column !important;
    text-align: center !important;
    padding: 2.25rem 1.25rem !important;
    gap: 1.5rem !important;
    margin-top: 2rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: var(--radius-md) !important;
  }

  .catering-cta-content {
    width: 100% !important;
  }

  .catering-cta-content h3 {
    font-size: clamp(1.35rem, 5vw, 1.75rem) !important;
    line-height: 1.3 !important;
    margin-bottom: 0.5rem !important;
  }

  .catering-cta-content p {
    font-size: 0.925rem !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
  }

  .catering-cta-btn,
  .birthday-cta-btn,
  .catering-cta-banner .btn {
    width: 100% !important;
    max-width: 100% !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
    padding: 0.85rem 1.25rem !important;
    font-size: 0.95rem !important;
    margin-top: 0 !important;
  }
}

/* EXTRA SMALL MOBILE BREAKPOINT (max-width: 430px) */
@media (max-width: 430px) {
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .catering-hero-bg,
  .birthday-hero-bg {
    padding-top: 4rem !important;
    padding-bottom: 2.5rem !important;
  }

  .section-padding {
    padding: 3.5rem 0 !important;
  }

  .editorial-catering-card,
  .birthday-card {
    height: 240px !important;
    min-height: 240px !important;
  }

  .catering-cta-banner {
    padding: 1.75rem 1rem !important;
  }
}

/* ==========================================================================
   INDEX PAGE - CONTENT UPDATE & PREMIUM SECTION RESTRUCTURE STYLES
   ========================================================================== */

/* 1. OUR VALUES SECTION */
.values-section {
  background-color: var(--bg-primary);
  padding: 4.5rem 0 3.5rem 0;
  position: relative;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.value-card {
  background-color: var(--bg-surface);
  border: 1.5px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: 1.75rem 1.5rem;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.value-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--palette-wine), var(--accent-primary));
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.value-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-gold-solid);
  box-shadow: var(--shadow-md);
}

.value-card:hover::before {
  opacity: 1;
}

.value-emoji {
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 1rem;
  display: inline-block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
}

.value-title {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--palette-deep-wine);
  margin-bottom: 0.4rem;
}

.value-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
  font-weight: 500;
}

/* 2. POPULAR PICKS & PRICING SECTION */
.popular-picks-section {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: 5rem 0;
  position: relative;
}

.popular-picks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2.5rem;
}

.popular-picks-card {
  background-color: var(--bg-surface);
  border: 1.5px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.popular-picks-category {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--palette-deep-wine);
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--accent-primary);
  margin-bottom: 1.5rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.popular-picks-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  flex-grow: 1;
}

.popular-picks-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.popular-picks-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}

.popular-picks-dots {
  flex-grow: 1;
  border-bottom: 1px dashed rgba(75, 20, 22, 0.28);
  margin: 0 0.35rem;
  min-width: 12px;
}

.popular-picks-price {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--palette-wine);
  white-space: nowrap;
  font-family: var(--font-sans);
}

.popular-picks-cta {
  text-align: center;
  margin-top: 3rem;
}

/* 3. FOOD MADE WITH LOVE SECTION */
.food-love-section {
  background-color: var(--bg-surface);
  padding: 5.5rem 0;
  border-bottom: 1px solid var(--border-subtle);
}

.food-love-card {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.food-love-paragraph {
  color: var(--text-secondary);
  font-size: 1.1rem;
  line-height: 1.85;
  margin-top: 1.5rem;
  margin-bottom: 2.5rem;
  font-weight: 500;
}

.food-love-quote-box {
  background-color: var(--bg-primary);
  border-left: 4px solid var(--accent-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 2.25rem 2.5rem;
  margin: 2.5rem 0;
  text-align: left;
  box-shadow: var(--shadow-sm);
  position: relative;
}

.food-love-quote-text {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-style: italic;
  color: var(--palette-deep-wine);
  line-height: 1.6;
  font-weight: 600;
}

.food-love-closing {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-secondary);
  margin-top: 1.5rem;
}

/* 4. EDITORIAL BRAND STATEMENT SECTION */
.editorial-statement-section {
  background-color: var(--palette-deep-wine);
  color: var(--palette-cream);
  padding: 4.5rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.editorial-statement-inner {
  max-width: 820px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.editorial-statement-quote {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-style: italic;
  line-height: 1.6;
  color: var(--palette-warm-white);
  font-weight: 500;
  position: relative;
}

.editorial-statement-quote::before,
.editorial-statement-quote::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background: var(--palette-mustard-gold);
  margin: 1.25rem auto;
}

/* RESPONSIVE MEDIA QUERIES FOR NEW SECTIONS */
@media (max-width: 1024px) {
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .popular-picks-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 640px) {
  .values-grid {
    grid-template-columns: repeat(1, 1fr);
  }
  .food-love-quote-box {
    padding: 1.5rem 1.25rem;
  }
  .popular-picks-name {
    font-size: 0.875rem;
    white-space: normal;
  }
  .popular-picks-card {
    padding: 1.5rem 1.25rem;
  }
}

/* ==========================================================================
   REUSABLE GEOMETRIC DIAMOND DECORATIVE BORDER COMPONENT
   Visual Signature: Red -> Gold -> Orange -> Red -> Gold -> Red Diamonds
   ========================================================================== */

:root {
  --geometric-pattern-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='12' viewBox='0 0 72 12'%3E%3Crect x='3.5' y='3.5' width='5' height='5' transform='rotate(45 6 6)' fill='%23C8232E'/%3E%3Crect x='15.5' y='3.5' width='5' height='5' transform='rotate(45 18 6)' fill='%23F2A50E'/%3E%3Crect x='27.5' y='3.5' width='5' height='5' transform='rotate(45 30 6)' fill='%23EF5A22'/%3E%3Crect x='39.5' y='3.5' width='5' height='5' transform='rotate(45 42 6)' fill='%23C8232E'/%3E%3Crect x='51.5' y='3.5' width='5' height='5' transform='rotate(45 54 6)' fill='%23F2A50E'/%3E%3Crect x='63.5' y='3.5' width='5' height='5' transform='rotate(45 66 6)' fill='%23C8232E'/%3E%3C/svg%3E");
}

.geometric-divider {
  width: 100%;
  height: 12px;
  background-image: var(--geometric-pattern-url);
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 12px;
  pointer-events: none;
  margin: 0;
  padding: 0;
  display: block;
}

.geometric-border-top {
  position: relative;
}

.geometric-border-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 12px;
  background-image: var(--geometric-pattern-url);
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 12px;
  pointer-events: none;
  z-index: 5;
}

.geometric-border-bottom {
  position: relative;
}

.geometric-border-bottom::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 12px;
  background-image: var(--geometric-pattern-url);
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 12px;
  pointer-events: none;
  z-index: 5;
}

/* Footer Signature Decorative Top Border */
.footer {
  position: relative;
  border-top: 1px solid var(--border-gold);
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 12px;
  background-image: var(--geometric-pattern-url);
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 12px;
  pointer-events: none;
  z-index: 10;
}

/* Active Nav Underline Accent */
.nav-link.active {
  position: relative;
  color: var(--accent-primary) !important;
}

.nav-link.active::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--palette-warm-red), var(--palette-mustard-gold));
  border-radius: 2px;
}

/* Catering Notice Highlight Card with Geometric Accent Frame & Deep Wine Contrast */
.catering-notice-section {
  padding: 4.5rem 0;
}

.catering-notice-card {
  background-color: var(--palette-deep-wine) !important;
  border: 1.5px solid var(--palette-mustard-gold) !important;
  border-radius: var(--radius-md) !important;
  padding: 2.5rem 2rem !important;
  box-shadow: 0 16px 40px rgba(46, 12, 13, 0.4), 0 0 24px rgba(242, 165, 14, 0.18) !important;
  position: relative;
  overflow: hidden;
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
  color: var(--palette-cream);
}

.catering-notice-card::before {
  content: "";
  display: block;
  width: 100%;
  height: 12px;
  background-image: var(--geometric-pattern-url);
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 12px;
  margin-bottom: 1.75rem;
}

.catering-notice-card::after {
  content: "";
  display: block;
  width: 100%;
  height: 12px;
  background-image: var(--geometric-pattern-url);
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 12px;
  margin-top: 1.75rem;
}

.notice-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.notice-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.825rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--palette-mustard-gold);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.notice-main-heading {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-weight: 700;
  color: var(--palette-warm-white);
  line-height: 1.25;
  margin-top: 0.2rem;
}

.notice-divider {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--palette-mustard-gold), transparent);
  margin: 0.75rem auto 1.5rem auto;
}

.notice-wording-box {
  background: rgba(75, 20, 22, 0.65);
  border: 1px solid rgba(242, 165, 14, 0.35);
  border-radius: var(--radius-sm);
  padding: 1.75rem 2rem;
  margin: 1.25rem 0 2rem 0;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  text-align: center;
}

.notice-exact-text {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-style: italic;
  color: var(--palette-cream);
  line-height: 1.6;
  font-weight: 600;
}

.notice-exact-text.text-urgent {
  color: #FFD166;
  font-weight: 700;
}

.notice-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.notice-management {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-on-dark-sub);
  letter-spacing: 0.05em;
}

.notice-cta {
  background: linear-gradient(135deg, var(--palette-warm-red), #A01820) !important;
  color: #FFFFFF !important;
  border: 1.5px solid var(--palette-mustard-gold) !important;
  box-shadow: 0 4px 16px rgba(200, 35, 46, 0.35) !important;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast) !important;
}

.notice-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(242, 165, 14, 0.4) !important;
  border-color: #FFFFFF !important;
}

@media (max-width: 640px) {
  .catering-notice-card {
    padding: 1.75rem 1.25rem !important;
  }
  .notice-wording-box {
    padding: 1.25rem 1rem;
  }
}

/* ==========================================================================
   CUSTOMER REVIEWS & FEEDBACK SECTION (VOICES FROM OUR TABLE)
   ========================================================================== */
.reviews-section {
  background-color: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: 5.5rem 0;
  position: relative;
}

.reviews-badge-wrapper {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--bg-primary);
  border: 1.5px solid var(--border-medium);
  padding: 0.6rem 1.25rem;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}

.review-card {
  background-color: var(--bg-primary);
  border: 1.5px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: 2.25rem 1.75rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.review-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--palette-wine), var(--palette-mustard-gold));
}

.review-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-gold-solid);
  box-shadow: var(--shadow-md);
}

.review-stars {
  color: var(--palette-mustard-gold);
  font-size: 1.15rem;
  letter-spacing: 2px;
  margin-bottom: 1rem;
}

.review-quote {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--palette-deep-wine);
  line-height: 1.7;
  font-weight: 500;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-top: 1px dashed var(--border-medium);
  padding-top: 1rem;
}

.review-author-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--palette-wine);
  color: var(--palette-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.9rem;
}

.review-author-details {
  display: flex;
  flex-direction: column;
}

.review-author-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--palette-deep-wine);
  letter-spacing: -0.01em;
}

.review-author-badge {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 600;
  margin-top: 0.2rem;
  display: inline-flex;
  align-items: center;
}

.reviews-cta {
  text-align: center;
  margin-top: 3rem;
}



/* ==========================================================================
   BEYOND THE TABLE - THREE SERVICE OPTIONS SECTION
   ========================================================================== */
.service-options-section {
  background-color: var(--bg-primary);
  padding: 4.5rem 0;
  border-bottom: 1px solid var(--border-subtle);
}

.service-options-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem auto;
}

.service-options-header .subheading {
  color: var(--accent-terracotta);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.service-options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 2.5rem;
}

@media (max-width: 992px) {
  .service-options-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.service-card {
  background-color: var(--bg-surface);
  border: 1.5px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: 2.25rem 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.service-card:hover {
  transform: translateY(-4px);
  border-color: var(--palette-mustard-gold);
  box-shadow: var(--shadow-md);
}

.service-card-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--palette-wine);
  color: var(--palette-mustard-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 12px rgba(92, 16, 23, 0.25);
}

.service-card-title {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--palette-deep-wine);
  margin-bottom: 0.75rem;
}

.service-card-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.service-options-footer {
  text-align: center;
  max-width: 650px;
  margin: 0 auto;
}

.service-footer-text {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1.25rem;
}

/* ==========================================================================
   CATERING IN ACTION - ASYMMETRIC EDITORIAL MOSAIC GALLERY
   ========================================================================== */
.ref-bento-section {
  background-color: #240A0D;
  padding: 5rem 0;
  color: #FFFFFF;
}

.ref-bento-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.catering-editorial-mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 290px;
  gap: 1.25rem;
  width: 100%;
}

.catering-mosaic-item {
  position: relative;
  border-radius: var(--radius-md, 14px);
  overflow: hidden;
  background-color: #140406;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.catering-mosaic-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}

.catering-mosaic-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.catering-mosaic-item:hover img {
  transform: scale(1.035);
}

/* Desktop Asymmetric Spans (12 Columns, 2 Rows) */
/* 1. Large portrait/tall image on the left */
.catering-mosaic-item.item-tall {
  grid-column: 1 / span 4;
  grid-row: 1 / span 2;
}

/* 2. Wide landscape image in the upper middle area */
.catering-mosaic-item.item-wide-top {
  grid-column: 5 / span 5;
  grid-row: 1;
}

/* 3. Smaller image on the upper right */
.catering-mosaic-item.item-right-top {
  grid-column: 10 / span 3;
  grid-row: 1;
}

/* 4. Medium image below upper-middle area */
.catering-mosaic-item.item-mid-bottom {
  grid-column: 5 / span 3;
  grid-row: 2;
}

/* 5. Wider landscape image beside it */
.catering-mosaic-item.item-wide-bottom {
  grid-column: 8 / span 5;
  grid-row: 2;
}

/* Tablet Responsive (max-width: 992px) */
@media (max-width: 992px) {
  .catering-editorial-mosaic {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 270px;
    gap: 1rem;
  }

  .catering-mosaic-item.item-tall {
    grid-column: 1 / span 3;
    grid-row: 1 / span 2;
  }

  .catering-mosaic-item.item-wide-top {
    grid-column: 4 / span 3;
    grid-row: 1;
  }

  .catering-mosaic-item.item-mid-bottom {
    grid-column: 4 / span 3;
    grid-row: 2;
  }

  .catering-mosaic-item.item-right-top {
    grid-column: 1 / span 2;
    grid-row: 3;
    height: 250px;
  }

  .catering-mosaic-item.item-wide-bottom {
    grid-column: 3 / span 4;
    grid-row: 3;
    height: 250px;
  }
}

/* Mobile Responsive (max-width: 680px) */
@media (max-width: 680px) {
  .catering-editorial-mosaic {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .catering-mosaic-item {
    width: 100%;
    border-radius: 12px;
  }

  .catering-mosaic-item.item-tall {
    height: 380px;
  }

  .catering-mosaic-item.item-wide-top,
  .catering-mosaic-item.item-wide-bottom {
    height: 240px;
  }

  .catering-mosaic-item.item-mid-bottom,
  .catering-mosaic-item.item-right-top {
    height: 270px;
  }
}

/* ==========================================================================
   ABOUT PAGE - LIVING CHEF LINE-ART STORYTELLING ANIMATION
   ========================================================================== */

.chef-hero-animation-section {
  position: relative;
  background-color: var(--bg-primary);
  padding: 3rem 0;
}

.chef-animation-card {
  position: relative;
  width: 100%;
  /* Original solid vibrant orange visual identity - static container */
  background-color: #ef881a;
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  padding: 2.5rem 1.5rem;
}

.chef-live-art-stage {
  position: relative;
  width: 100%;
  max-width: 1000px;
  min-height: 520px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: none !important;
}

.chef-part {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  will-change: transform;
}

.chef-layer-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  /* Pure crisp white lines with subtle crisp drop-shadow */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
}

/* Layer 1: Body (Torso, Hat, Profile, Mustache) */
.chef-part-body {
  z-index: 1;
  transform-origin: 52% 70%;
  animation: liveChefBody 9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Layer 2: Arm & Hand (Independent Hand & Arm Serving Gesture) */
.chef-part-arm {
  z-index: 2;
  transform-origin: 48% 54%;
  animation: liveChefArm 9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Layer 3: Serving Plate (Plate Presentation Motion) */
.chef-part-plate {
  z-index: 3;
  transform-origin: 41% 37%;
  animation: liveChefPlate 9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Plate Glow Aura */
.plate-glow-ring {
  position: absolute;
  top: 36%;
  left: 32%;
  width: 240px;
  height: 50px;
  background: radial-gradient(ellipse at center, rgba(255, 240, 200, 0.95) 0%, rgba(255, 200, 100, 0.5) 40%, transparent 75%);
  filter: blur(14px);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: plateGlowPulse 9s ease-in-out infinite;
  pointer-events: none;
}

/* SVG Flowing Aroma / Steam Wisps */
.chef-aroma-steam-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
  will-change: transform, opacity;
  animation: aromaSteamRise 9s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

.aroma-wisp {
  fill: none;
  stroke: url(#aromaGlow);
  stroke-width: 3.2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: wispFlow 9s ease-in-out infinite;
}

.wisp-sub {
  stroke-width: 2px;
  opacity: 0.75;
  animation-delay: 0.2s;
}

.sparkle {
  fill: #FFEAA7;
  filter: drop-shadow(0 0 6px rgba(255, 234, 167, 0.9));
  animation: sparklePulse 9s ease-in-out infinite;
}

.s1 { animation-delay: 0.1s; }
.s2 { animation-delay: 0.3s; }
.s3 { animation-delay: 0.5s; }
.s4 { animation-delay: 0.2s; }

.aroma-leaf {
  fill: #FFEAA7;
  filter: drop-shadow(0 0 8px rgba(255, 220, 140, 0.85));
  animation: sparklePulse 9s ease-in-out infinite;
}

/* Served Floating Quote (Emerges FROM Plate - Transparent Overlay - No Box) */
.served-quote-container {
  position: absolute;
  top: 10%;
  left: 5%;
  max-width: 520px;
  background: transparent;
  padding: 0.5rem 0;
  z-index: 10;
  will-change: transform, opacity;
  animation: liveServedQuote 9s cubic-bezier(0.25, 1, 0.5, 1) infinite;
  pointer-events: none;
}

.served-quote-text {
  color: #FFFFFF;
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2.1vw, 1.42rem);
  font-style: italic;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: -0.01em;
  text-shadow: 
    0 0 25px rgba(255, 220, 140, 0.85),
    0 0 12px rgba(255, 255, 255, 0.9),
    0 2px 10px rgba(0, 0, 0, 0.35);
  margin: 0;
  text-align: center;
}

/* Seamless 9s Chef Serving Motion Loop Keyframes */

/* Chef Body: Respectful forward lean & posture shift */
@keyframes liveChefBody {
  0%, 15% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  38%, 72% {
    transform: translate3d(-12px, -3px, 0) rotate(-1.5deg);
  }
  88%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

/* Arm & Hand: Reaches forward in a natural serving extension gesture */
@keyframes liveChefArm {
  0%, 15% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  38%, 72% {
    transform: translate3d(-28px, -7px, 0) rotate(-4.8deg);
  }
  88%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

/* Plate: Glides forward with hand, lifts & presents to visitor */
@keyframes liveChefPlate {
  0%, 15% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  38%, 72% {
    transform: translate3d(-40px, -14px, 0) rotate(-2.8deg);
  }
  88%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

/* Plate Glow Aura */
@keyframes plateGlowPulse {
  0%, 32%, 80%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
  }
  42%, 70% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(1.15);
  }
}

/* Steam Wisp Flow Keyframes */
@keyframes aromaSteamRise {
  0%, 35% {
    opacity: 0;
    transform: translate3d(20px, 30px, 0) scale(0.9);
  }
  48%, 70% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  78% {
    opacity: 0.2;
    transform: translate3d(-10px, -15px, 0) scale(0.95);
  }
  86%, 100% {
    opacity: 0;
    transform: translate3d(20px, 30px, 0) scale(0.9);
  }
}

@keyframes wispFlow {
  0%, 36% {
    stroke-dashoffset: 800;
    opacity: 0;
  }
  48%, 70% {
    stroke-dashoffset: 0;
    opacity: 0.95;
  }
  78% {
    stroke-dashoffset: -300;
    opacity: 0.2;
  }
  86%, 100% {
    stroke-dashoffset: -800;
    opacity: 0;
  }
}

@keyframes sparklePulse {
  0%, 36%, 78%, 100% {
    opacity: 0;
    transform: scale(0.5);
  }
  48%, 70% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* Quote: Emerges FROM Plate along Aroma Stream -> Holds -> Dissolves back */
@keyframes liveServedQuote {
  0%, 40% {
    opacity: 0;
    transform: translate3d(35px, 75px, 0) scale(0.88);
  }
  50% {
    opacity: 0.98;
    transform: translate3d(5px, 8px, 0) scale(0.98);
  }
  54%, 70% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  78% {
    opacity: 0.15;
    transform: translate3d(-10px, -12px, 0) scale(0.95);
  }
  86%, 100% {
    opacity: 0;
    transform: translate3d(35px, 75px, 0) scale(0.88);
  }
}

/* Responsive Styling */
@media (max-width: 992px) {
  .chef-live-art-stage {
    min-height: 440px;
  }
  .served-quote-container {
    top: 5%;
    left: 3%;
    max-width: 400px;
  }
  .reviews-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .chef-animation-card {
    padding: 1.5rem 1rem;
    border-radius: 18px;
  }
  .chef-live-art-stage {
    min-height: 480px;
  }
  .served-quote-container {
    top: 4%;
    left: 4%;
    right: 4%;
    max-width: 92%;
  }
  .served-quote-text {
    font-size: clamp(1rem, 3.8vw, 1.15rem);
    line-height: 1.45;
  }

  /* Customer Reviews Mobile Responsiveness Fix */
  .reviews-section {
    padding: 3.5rem 0;
  }
  .reviews-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
  }
  .review-card {
    width: 100%;
    box-sizing: border-box;
    padding: 1.75rem 1.35rem;
    overflow: hidden;
  }
  .review-quote {
    font-size: 1rem;
    line-height: 1.6;
    word-break: normal;
    overflow-wrap: break-word;
    margin-bottom: 1.25rem;
  }
  .reviews-badge-wrapper {
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
  }
  .reviews-cta {
    margin-top: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chef-part-body,
  .chef-part-arm,
  .chef-part-plate,
  .served-quote-container {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .plate-glow-ring,
  .serving-light-beam {
    opacity: 0.8 !important;
    animation: none !important;
  }
}

/* ABOUT PAGE - CHEF VIDEO ANIMATION PRESENTATION */
.heart-kitchen-section {
  padding: 3rem 0;
}

.heart-kitchen-video-wrapper {
  max-width: 960px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  border: 1.5px solid var(--border-gold-solid, rgba(212, 175, 55, 0.35));
  background: #000000;
  line-height: 0;
}

.heart-kitchen-video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  margin: 0 auto;
}

/* CATERING PAGE - SINGLE FEATURED IMAGE LAYOUT */
.catering-single-image-container {
  max-width: 860px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
  border: 1.5px solid rgba(212, 175, 55, 0.35);
}

.catering-single-image-container img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}