/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Outfit:wght@100..900&family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Caveat:wght@400..700&display=swap');

@font-face {
  font-family: 'Zeroarea';
  src: url('assets/Zeroarea-Regular.ttf') format('truetype'),
       url('assets/Zeroarea-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* CSS Variables for design system tokens */
:root {
  /* Colors */
  --bg-primary: #FAF7F2;     /* Warm Ivory Cream */
  --bg-secondary: #F3ECE0;   /* Rich Soft Cream */
  --bg-tertiary: #E6D8C4;    /* Warm Earthy Cream */
  --text-dark: #1E1B18;      /* Deep Charcoal Warm Black */
  --text-muted: #5C554E;     /* Muted Earthy Brown/Grey */
  --accent-gold: #C5A880;    /* Premium Warm Gold */
  --accent-gold-hover: #AA8C63; /* Deep Gold for Hover states */
  --accent-orange: #C05621;  /* Spicy Terracotta Orange (Appetizing) */
  --accent-green: #3B7A57;   /* Jade Green for Veg dishes */
  --border-light: rgba(197, 168, 128, 0.25);
  --border-medium: rgba(197, 168, 128, 0.45);
  
  /* Fonts */
  --font-serif: "Playfair Display", serif;
  --font-accent: "Cormorant Garamond", serif;
  --font-sans: "Outfit", sans-serif;
  
  /* Transitions */
  --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.2s ease;
}

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

html {
  scroll-behavior: smooth;
  font-family: var(--font-sans);
  background-color: var(--bg-primary);
  color: var(--text-dark);
}

body {
  overflow-x: hidden;
  line-height: 1.6;
}

/* Hide Scrollbar */
html, body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Selection color */
::selection {
  background-color: var(--accent-gold);
  color: white;
}

/* Typography styles */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.25;
}

p {
  font-size: 1.05rem;
  color: var(--text-muted);
}

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

/* Utility classes */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

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

.text-center {
  text-align: center;
}

.gold-text {
  color: var(--accent-gold);
}

.section-tag {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--accent-gold-hover);
  margin-bottom: 0.5rem;
  display: block;
}

.section-title {
  font-size: 2.75rem;
  margin-bottom: 1.5rem;
  position: relative;
}

.section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background-color: var(--accent-gold);
  margin: 1rem auto 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 2.2rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 0;
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.btn-primary {
  background-color: var(--text-dark);
  color: var(--bg-primary);
}

.btn-primary:hover {
  background-color: var(--accent-gold);
  color: var(--text-dark);
  transform: translateY(-2px);
}

.btn-outline {
  background-color: transparent;
  border-color: var(--accent-gold);
  color: var(--text-dark);
}

.btn-outline:hover {
  background-color: var(--accent-gold);
  color: var(--text-dark);
  transform: translateY(-2px);
}

/* Header & Navigation */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: var(--transition-smooth);
}

header.scrolled {
  padding: 0.5rem 0;
  background-color: rgba(250, 247, 242, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-light);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

.logo-link {
  display: flex;
  align-items: center;
}

.logo-img {
  height: 60px;
  width: auto;
  transition: var(--transition-smooth);
}

header.scrolled .logo-img {
  height: 48px;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 2.5rem;
  align-items: center;
}

.nav-links a {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dark);
  position: relative;
}

.nav-links a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--accent-gold);
  transition: var(--transition-smooth);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.phone-link {
  font-weight: 600;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
}

.phone-link svg {
  stroke: var(--accent-gold);
  transition: var(--transition-fast);
}

.phone-link:hover svg {
  transform: rotate(15deg);
}

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.mobile-menu-btn span {
  display: block;
  width: 25px;
  height: 2px;
  background-color: var(--text-dark);
  margin: 5px 0;
  transition: var(--transition-fast);
}

/* Hero Slider Section */
.hero-slider-section {
  position: relative;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  
  /* Fallback defaults */
  --hero-bg: #FAF7F2;
  --hero-text: #1E1B18;
  --hero-text-muted: #5C554E;
  --hero-accent: #C5A880;
  --hero-border: rgba(197, 168, 128, 0.25);
  --hero-invert: 0;
}

/* Background Curvy Gradients for crossfade transitions */
.hero-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero-bg-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-bg-slide.active {
  opacity: 1;
}

/* Gradient 0: Butter Chicken (#21F1A8, #171717) - mint green and charcoal */
.hero-bg-slide[data-index="0"] {
  background: radial-gradient(circle at 15% 25%, #21F1A8 0%, transparent 65%),
              radial-gradient(circle at 85% 75%, #171717 0%, transparent 65%),
              linear-gradient(135deg, #21F1A8 0%, #171717 100%);
}

/* Gradient 1: Paneer Tikka (#FD1843, #FFF9FA) - crimson red and soft white */
.hero-bg-slide[data-index="1"] {
  background: radial-gradient(circle at 15% 25%, #FD1843 0%, transparent 65%),
              radial-gradient(circle at 85% 75%, #FFF9FA 0%, transparent 65%),
              linear-gradient(135deg, #FD1843 0%, #FFF9FA 100%);
}

/* Gradient 2: Hakka Noodles (#004741, #F0EDE4) - deep green and warm cream */
.hero-bg-slide[data-index="2"] {
  background: radial-gradient(circle at 15% 25%, #004741 0%, transparent 65%),
              radial-gradient(circle at 85% 75%, #F0EDE4 0%, transparent 65%),
              linear-gradient(135deg, #004741 0%, #F0EDE4 100%);
}

/* Gradient 3: Chicken Biryani (#FFC6A8, #741A2F) - soft peach and dark wine */
.hero-bg-slide[data-index="3"] {
  background: radial-gradient(circle at 15% 25%, #FFC6A8 0%, transparent 65%),
              radial-gradient(circle at 85% 75%, #741A2F 0%, transparent 65%),
              linear-gradient(135deg, #FFC6A8 0%, #741A2F 100%);
}

.hero-slider-section.slide-active-0 {
  --hero-bg: #21F1A8;
  --hero-text: #171717;
  --hero-text-muted: rgba(23, 23, 23, 0.7);
  --hero-accent: #171717;
  --hero-border: rgba(23, 23, 23, 0.25);
  --hero-invert: 0;
  --hero-infobar-text: #171717;
  --hero-infobar-bg: rgba(255, 255, 255, 0.95);
  --hero-infobar-border: rgba(23, 23, 23, 0.1);
}

.hero-slider-section.slide-active-1 {
  --hero-bg: #FD1843;
  --hero-text: #FFF9FA;
  --hero-text-muted: rgba(255, 249, 250, 0.75);
  --hero-accent: #FFF9FA;
  --hero-border: rgba(255, 249, 250, 0.25);
  --hero-invert: 1;
  --hero-infobar-text: #FD1843;
  --hero-infobar-bg: rgba(255, 255, 255, 0.95);
  --hero-infobar-border: rgba(253, 24, 67, 0.15);
}

.hero-slider-section.slide-active-2 {
  --hero-bg: #004741;
  --hero-text: #F0EDE4;
  --hero-text-muted: rgba(240, 237, 228, 0.75);
  --hero-accent: #F0EDE4;
  --hero-border: rgba(240, 237, 228, 0.25);
  --hero-invert: 1;
  --hero-infobar-text: #004741;
  --hero-infobar-bg: rgba(255, 255, 255, 0.95);
  --hero-infobar-border: rgba(0, 71, 65, 0.15);
}

.hero-slider-section.slide-active-3 {
  --hero-bg: #FFC6A8;
  --hero-text: #741A2F;
  --hero-text-muted: rgba(116, 26, 47, 0.75);
  --hero-accent: #741A2F;
  --hero-border: rgba(116, 26, 47, 0.25);
  --hero-invert: 0;
  --hero-infobar-text: #741A2F;
  --hero-infobar-bg: rgba(255, 255, 255, 0.95);
  --hero-infobar-border: rgba(116, 26, 47, 0.15);
}

.hero-slider-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem;
  align-items: center;
  position: relative;
  z-index: 3;
  width: 100%;
  padding-top: 5rem;
}

.slider-content-area {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  min-height: 420px;
  align-items: center;
}

.slide-text {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(35px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.slide-text.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.slide-subtitle {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--hero-accent);
  display: block;
  margin-bottom: 0.5rem;
  transition: var(--transition-smooth);
}

.slide-subtitle svg {
  stroke: var(--hero-accent) !important;
  transition: var(--transition-smooth);
}

.slide-title {
  font-family: var(--font-serif);
  font-size: 4.75rem;
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 1.5rem;
  color: var(--hero-text);
  transition: var(--transition-smooth);
}

.slide-desc {
  font-size: 1.05rem;
  color: var(--hero-text-muted);
  margin-bottom: 2.5rem;
  max-width: 480px;
  transition: var(--transition-smooth);
}

.slider-display-area {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.slider-arc-wrapper {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 120px;
  margin-bottom: -40px;
  z-index: 5;
}

.arc-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.slider-labels {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.slider-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--hero-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-smooth);
  padding: 0.5rem;
}

.slider-label.active {
  color: var(--hero-text);
  font-weight: 600;
  font-size: 1.3rem;
}
/* Editorial Dot Grid */
.accent-dots {
  position: absolute;
  top: 5rem;
  left: 5rem;
  width: 70px;
  height: 50px;
  background-image: radial-gradient(var(--hero-border) 1.5px, transparent 1.5px);
  background-size: 11px 11px;
  pointer-events: none;
  z-index: 1;
  transition: var(--transition-smooth);
}

/* Arc Nodes (Dots on Arc) */
.arc-node {
  fill: var(--hero-bg);
  stroke: var(--hero-text);
  stroke-width: 2;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.arc-node:hover {
  fill: var(--hero-text-muted);
  r: 6;
}

.arc-node.active {
  fill: var(--hero-text);
  stroke: var(--hero-text);
  r: 6.5;
  filter: drop-shadow(0 0 4px var(--hero-text));
}

/* Slide Badges */
.slide-badges {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.slide-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  width: 80px;
}

.badge-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--hero-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hero-text);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.01);
  transition: var(--transition-smooth);
}

.slide-badge:hover .badge-icon-box {
  border-color: var(--hero-text);
  color: var(--hero-text);
  background-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05);
}

.badge-icon-box svg {
  stroke-width: 1.8px;
}

.badge-label {
  font-size: 0.76rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--hero-text-muted);
  transition: var(--transition-smooth);
}

.slide-actions {
  display: flex;
  gap: 1.2rem;
}

/* Floating Infobar Card */
.slider-infobar {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--hero-infobar-bg);
  backdrop-filter: blur(20px);
  border: 1.5px solid var(--hero-infobar-border);
  border-radius: 50px;
  padding: 0.8rem 2.2rem;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr;
  width: 95%;
  max-width: 450px;
  transition: var(--transition-smooth);
}

.infobar-slide {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.infobar-slide.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.infobar-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--hero-infobar-text);
  transition: var(--transition-smooth);
}

.infobar-item svg {
  color: var(--hero-infobar-text);
  stroke-width: 2.2px;
  transition: var(--transition-smooth);
}

.infobar-divider {
  width: 1.5px;
  height: 18px;
  background-color: var(--hero-infobar-border);
  transition: var(--transition-smooth);
}

.plate-wheel-container {
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 1px solid rgba(197, 168, 128, 0.2);
}

.plate-wheel-container::after {
  content: "";
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  border-radius: 50%;
  border: 1.5px solid rgba(197, 168, 128, 0.3);
  pointer-events: none;
  z-index: 1;
}

.plate-wheel-container::before {
  content: "";
  position: absolute;
  top: 3%;
  left: 3%;
  width: 94%;
  height: 94%;
  border-radius: 50%;
  border: 1.5px dashed var(--border-medium);
  pointer-events: none;
  z-index: 1;
  animation: rotateRing 60s linear infinite;
}

@keyframes rotateRing {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.plate-image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 3;
}

.plate-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: none;
  box-shadow: 0 25px 55px rgba(30, 27, 24, 0.15);
  opacity: 0;
  transform: rotate(-180deg) scale(0.7);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.plate-img.active {
  opacity: 1;
  transform: rotate(0deg) scale(1.15);
  pointer-events: auto;
}

.plate-img.exit {
  opacity: 0;
  transform: rotate(180deg) scale(0.6);
}


/* Floating Ingredients */
.floating-ingredients {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
  overflow: visible;
}

.ingredient-item {
  position: absolute;
  opacity: 0;
  transform: scale(0.4) translateY(60px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.ingredient-item.active {
  opacity: 0.85;
  transform: scale(1) translateY(0);
}

.ingredient-item img {
  display: block;
  max-width: 100%;
  height: auto;
  transition: transform 0.4s ease;
  animation: floatSlow 6s ease-in-out infinite alternate;
}

.ingredient-item:nth-child(3n+1) img {
  animation-delay: -1s;
  animation-duration: 5.5s;
}

.ingredient-item:nth-child(3n+2) img {
  animation-delay: -3s;
  animation-duration: 7.5s;
}

@keyframes floatSlow {
  from {
    transform: translateY(0) rotate(0deg);
  }
  to {
    transform: translateY(-10px) rotate(6deg);
  }
}


/* About / Story Section */
.about {
  background-color: var(--bg-primary);
  position: relative;
}

.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 5rem;
  align-items: center;
}

.about-text {
  text-align: left;
}

.about-text h2 {
  font-size: 3rem;
  margin-bottom: 2rem;
}

.about-text p {
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
}

.about-signature {
  font-family: var(--font-accent);
  font-size: 1.8rem;
  color: var(--accent-gold-hover);
  margin-top: 2rem;
  display: block;
}

.about-img-frame {
  position: relative;
  padding: 1.5rem;
  border: 1px solid var(--border-medium);
}

.about-img-frame::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 1px solid var(--border-light);
  pointer-events: none;
}

.about-img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  display: block;
  filter: sepia(10%) contrast(102%);
}

/* Craving Section (Signature Dishes) */
.signatures {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

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

.dish-card {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-light);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.015);
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
}

.dish-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(30, 27, 24, 0.06);
  border-color: var(--accent-gold);
}

.dish-img-container {
  position: relative;
  width: 100%;
  height: 250px;
  overflow: hidden;
}

.dish-img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.dish-card:hover .dish-img-container img {
  transform: scale(1.08);
}

.dish-tag {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background-color: rgba(30, 27, 24, 0.85);
  color: var(--accent-gold);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.3rem 0.8rem;
  backdrop-filter: blur(4px);
}

.dish-info {
  padding: 2rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

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

.dish-title {
  font-size: 1.35rem;
  color: var(--text-dark);
}

.dish-diet {
  width: 14px;
  height: 14px;
  border: 1px solid var(--accent-green);
  padding: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
  vertical-align: middle;
}

.dish-diet.non-veg {
  border-color: var(--accent-orange);
}

.dish-diet::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent-green);
}

.dish-diet.non-veg::after {
  background-color: var(--accent-orange);
}

.dish-price {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--accent-gold-hover);
}

.dish-desc {
  font-size: 0.95rem;
  color: var(--text-muted);
  flex-grow: 1;
  margin-bottom: 1.5rem;
}

.dish-card .btn-text {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dark);
  align-self: flex-start;
  position: relative;
  padding-bottom: 2px;
  margin-top: auto;
}

.dish-card .btn-text::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40%;
  height: 1.5px;
  background-color: var(--accent-gold);
  transition: var(--transition-smooth);
}

.dish-card:hover .btn-text::after {
  width: 100%;
}

/* Interactive Menu Section */
.menu-section {
  background-color: var(--bg-primary);
}

.menu-tabs {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 4rem;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 1rem;
}

.menu-tab {
  background: none;
  border: none;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  padding: 0.5rem 1.5rem;
  cursor: pointer;
  color: var(--text-muted);
  transition: var(--transition-smooth);
  position: relative;
}

.menu-tab::after {
  content: "";
  position: absolute;
  bottom: -17px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--accent-gold);
  transition: var(--transition-smooth);
}

.menu-tab:hover {
  color: var(--text-dark);
}

.menu-tab.active {
  color: var(--text-dark);
  font-weight: 600;
}

.menu-tab.active::after {
  width: 100%;
}

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

.menu-item {
  display: flex;
  gap: 1.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px dashed var(--border-light);
  transition: var(--transition-smooth);
}

.menu-item.hidden {
  display: none !important;
}

.menu-item-img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 0;
  border: 1px solid var(--border-light);
}

.menu-item-body {
  flex-grow: 1;
}

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

.menu-item-title {
  font-size: 1.25rem;
  font-weight: 600;
}

.menu-item-dots {
  flex-grow: 1;
  border-bottom: 1px dotted var(--border-medium);
  margin: 0 1rem;
  align-self: stretch;
  height: 1.1rem;
}

.menu-item-price {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--accent-gold-hover);
}

.menu-item-desc {
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* Callout Section ( craver trigger text banner ) */
.craving-banner {
  position: relative;
  background-image: url('assets/chicken_biryani.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 10rem 0;
  text-align: center;
  color: white;
}

.craving-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(30, 27, 24, 0.75);
}

.craving-banner-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2rem;
}

.craving-banner h3 {
  font-size: 3.5rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-serif);
}

.craving-banner p {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.6rem;
  color: rgba(250, 247, 242, 0.9);
  margin-bottom: 2.5rem;
}

/* Reservation / Inquiry Form */
.reservation {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.reservation-wrapper {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 6rem;
  align-items: stretch;
}

.reservation-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.reservation-details h2 {
  font-size: 3rem;
  margin-bottom: 1.5rem;
}

.reservation-details p {
  margin-bottom: 2.5rem;
}

.contact-info-list {
  list-style: none;
}

.contact-info-item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.contact-icon-box {
  width: 50px;
  height: 50px;
  border: 1px solid var(--border-medium);
  background-color: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-gold);
}

.contact-info-text h4 {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}

.contact-info-text p {
  margin: 0;
  font-weight: 500;
  color: var(--text-dark);
  font-size: 1.1rem;
}

.contact-info-text a:hover {
  color: var(--accent-gold-hover);
}

/* Reservation Form Card */
.reservation-form-card {
  background-color: var(--bg-primary);
  padding: 3.5rem;
  border: 1px solid var(--border-light);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.02);
  width: 100%;
  box-sizing: border-box;
}

.form-title {
  font-size: 1.8rem;
  margin-bottom: 2rem;
  text-align: center;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
  width: 100%;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group.full-width {
  grid-column: span 2;
}

.form-group label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
  color: var(--text-muted);
}

.form-control {
  padding: 0.9rem 1rem;
  font-family: var(--font-sans);
  background-color: var(--bg-secondary);
  border: 1px solid transparent;
  color: var(--text-dark);
  outline: none;
  transition: var(--transition-smooth);
  width: 100%;
  box-sizing: border-box;
  font-size: 1rem;
}

.form-control:focus {
  border-color: var(--accent-gold);
  background-color: white;
}

select.form-control {
  cursor: pointer;
}

.reservation-form-card .btn-submit {
  width: 100%;
}

/* Form success message */
.form-success {
  display: none;
  text-align: center;
  padding: 2rem 0;
}

.form-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--accent-gold);
  color: var(--accent-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.form-success h3 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

/* Map / Visit Us Section */
.visit-section {
  padding: 0;
  height: 500px;
  position: relative;
  overflow: hidden;
}

.map-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.map-placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--bg-tertiary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  background-image: radial-gradient(var(--border-medium) 1px, transparent 1px);
  background-size: 24px 24px;
}

.map-placeholder h3 {
  font-size: 2.2rem;
  margin-bottom: 1rem;
}

.map-placeholder p {
  max-width: 500px;
  margin-bottom: 2rem;
}

/* Map Overlay Card styling */
.map-overlay-card {
  position: absolute;
  top: 50%;
  left: 8%;
  transform: translateY(-50%);
  background: rgba(30, 27, 24, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-medium);
  border-radius: 12px;
  padding: 2.5rem;
  max-width: 380px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6);
  z-index: 10;
  text-align: left;
}

.map-overlay-card h3 {
  font-size: 1.8rem;
  margin-top: 0.5rem;
  margin-bottom: 0.8rem;
  color: var(--text-light);
}

.map-overlay-card p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 1.6rem;
}

@media (max-width: 768px) {
  .visit-section {
    height: auto !important;
    display: flex;
    flex-direction: column-reverse;
  }
  .map-container {
    height: 350px !important;
  }
  .map-overlay-card {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    max-width: 100%;
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--border-medium);
    padding: 2.5rem 1.5rem;
    box-shadow: none;
  }
}

/* Footer Section */
footer {
  background-color: #1E1B18; /* Rich Deep Charcoal background */
  color: #FAF7F2;
  padding: 5rem 0 3rem;
  border-top: 1px solid #C5A880;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1fr;
  gap: 5rem;
  margin-bottom: 4rem;
}

.footer-info .footer-logo {
  height: 80px;
  margin-bottom: 1.5rem;
}

.footer-info p {
  color: #BAB0A5;
  margin-bottom: 1.5rem;
}

.footer-hours h3,
.footer-contact h3 {
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
  color: var(--accent-gold);
  letter-spacing: 0.5px;
}

.footer-hours-list {
  list-style: none;
}

.footer-hours-list li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.8rem;
  color: #BAB0A5;
  font-size: 0.95rem;
}

.footer-contact-list {
  list-style: none;
}

.footer-contact-list li {
  margin-bottom: 1rem;
  color: #BAB0A5;
  font-size: 0.95rem;
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}

.footer-contact-list li svg {
  margin-top: 2px;
  stroke: var(--accent-gold);
  flex-shrink: 0;
}

.footer-contact-list a:hover {
  color: var(--accent-gold);
}

.footer-bottom {
  border-top: 1px solid rgba(197, 168, 128, 0.15);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #8C8276;
  font-size: 0.85rem;
}

.footer-socials {
  display: flex;
  gap: 1.5rem;
}

.footer-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(197, 168, 128, 0.3);
  border-radius: 50%;
  color: #BAB0A5;
  transition: var(--transition-fast);
}

.footer-socials a:hover {
  background-color: var(--accent-gold);
  color: var(--text-dark);
  border-color: var(--accent-gold);
}

/* Scroll Animation classes */
.reveal {
  opacity: 0;
  transform: translateY(35px) scale(0.97);
  transition: opacity 0.85s cubic-bezier(0.25, 1, 0.5, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Mobile responsive media queries */
@media (max-width: 1024px) {
  .dish-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .about-grid,
  .reservation-wrapper {
    gap: 3rem;
  }
}

@media (max-width: 768px) {
  .section-padding {
    padding: 5rem 0;
  }
  
  .section-title {
    font-size: 2.25rem;
  }
  
  .about-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .about-text {
    text-align: center;
    order: 2;
  }
  
  .about-img-frame {
    order: 1;
    max-width: 500px;
    margin: 0 auto;
  }
  
  .about-img {
    height: 380px;
  }
  
  .dish-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: 4rem auto 0;
  }
  
  .menu-tabs {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .menu-tab {
    font-size: 1.1rem;
    padding: 0.4rem 1rem;
  }
  
  .menu-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .reservation-wrapper {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .reservation-details {
    text-align: center;
    align-items: center;
  }
  
  .contact-info-list {
    width: 100%;
    max-width: 100%;
  }

  /* Form grid collapses to single column on mobile */
  .form-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  /* Cancel the span-2 on mobile since it's now 1 column */
  .form-group.full-width,
  .form-group[style*="grid-column: span 2"],
  .form-group[style*="grid-column:span 2"] {
    grid-column: span 1 !important;
  }

  /* Reduce form card padding on mobile */
  .reservation-form-card {
    padding: 2rem 1.5rem;
  }

  .form-title {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
  }
  
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  
  .footer-bottom {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }
  
  /* Hero Slider Mobile Responsiveness */
  .hero-slider-section {
    height: auto;
    min-height: 100vh;
    padding: 7rem 0 3rem;
  }

  .hero-slider-container {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: center;
    padding-top: 2rem;
  }

  .slider-content-area {
    order: 2;
    min-height: auto;
    text-align: center;
  }

  .slide-text {
    text-align: center;
    align-items: center;
    display: flex;
    flex-direction: column;
  }

  .slide-title {
    font-size: 2.4rem;
    margin-bottom: 1rem;
    /* Prevent long words from overflowing the viewport */
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
  }

  .slide-desc {
    font-size: 0.98rem;
    margin-bottom: 2rem;
    max-width: 100%;
  }

  .slider-display-area {
    order: 1;
    width: 100%;
  }

  .plate-wheel-container {
    width: 290px;
    height: 290px;
  }

  .plate-wheel-container::before {
    top: 2%;
    left: 2%;
    width: 96%;
    height: 96%;
  }

  .slider-arc-wrapper {
    max-width: 320px;
    height: 90px;
    margin-bottom: -30px;
  }

  .slider-label {
    font-size: 0.85rem;
  }

  .slider-label.active {
    font-size: 0.98rem;
  }

  /* Responsive Badges and Infobar */
  .slide-badges {
    justify-content: center;
    gap: 0.8rem;
    margin-bottom: 1.8rem;
  }

  .slide-badge {
    width: 68px;
  }

  .badge-icon-box {
    width: 36px;
    height: 36px;
  }

  .badge-icon-box svg {
    width: 16px;
    height: 16px;
  }

  .badge-label {
    font-size: 0.65rem;
  }

  .slider-infobar {
    bottom: -15px;
    padding: 0.6rem 1.2rem;
    max-width: 310px;
  }

  .infobar-item {
    font-size: 0.75rem;
    gap: 0.3rem;
  }

  .infobar-divider {
    height: 14px;
  }

  
  /* Navigation toggles */
  .mobile-menu-btn {
    display: block;
    z-index: 1100;
  }
  
  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    height: 100vh;
    background-color: var(--bg-primary);
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.05);
    transition: var(--transition-smooth);
    z-index: 1050;
  }

  /* ── Fixed dark colour for all nav links inside the mobile drawer ─────
     Override any hero-slide colour cascades — the drawer bg is always
     light (var(--bg-primary)), so links must always be dark.              */
  .nav-links a,
  header:not(.scrolled) .nav-links a,
  header:not(.scrolled).slide-active-0 .nav-links a,
  header:not(.scrolled).slide-active-1 .nav-links a,
  header:not(.scrolled).slide-active-2 .nav-links a,
  header:not(.scrolled).slide-active-3 .nav-links a {
    color: var(--text-dark) !important;
    font-size: 1.15rem;
    font-weight: 500;
  }

  .nav-links a:hover,
  .nav-links a.active {
    color: var(--accent-gold) !important;
  }

  .nav-links.active {
    right: 0;
  }

  
  .mobile-menu-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  
  .mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
  }
  
  .mobile-menu-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
  }
  
  .nav-cta {
    display: none;
  }
}

/* ─── Small phones (≤480px) ─────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Tighter form card on very small screens */
  .reservation-form-card {
    padding: 1.5rem 1rem;
  }

  /* Prevent iOS Safari auto-zoom (needs ≥16px font-size on inputs) */
  .form-control {
    font-size: 16px !important;
    padding: 0.8rem 0.85rem;
  }

  /* Slightly smaller label text */
  .form-group label {
    font-size: 0.78rem;
    letter-spacing: 0.5px;
  }

  .form-title {
    font-size: 1.3rem;
  }

  /* Section heading scale */
  .reservation-details h2 {
    font-size: 2rem;
  }

  /* Contact info items tighter */
  .contact-info-item {
    gap: 0.75rem;
  }

  .contact-icon-box {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }

  /* Hero title fits small phone viewports — no overflow or clipping */
  .slide-title {
    font-size: 1.85rem !important;
    line-height: 1.1;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .slide-subtitle {
    font-size: 0.75rem;
    letter-spacing: 2px;
  }

  .hero-slider-section {
    overflow-x: hidden;
  }
}


/* Hero Slider Active Theme Button Adjustments */
.hero-slider-section .btn-primary {
  background-color: var(--hero-text);
  color: var(--hero-bg);
}

.hero-slider-section .btn-primary:hover {
  background-color: transparent;
  border-color: var(--hero-text);
  color: var(--hero-text);
  transform: translateY(-2px);
}

.hero-slider-section .btn-outline {
  border-color: var(--hero-text);
  color: var(--hero-text);
}

.hero-slider-section .btn-outline:hover {
  background-color: var(--hero-text);
  color: var(--hero-bg);
  transform: translateY(-2px);
}

/* General transparent header styles for sub-pages (dark backgrounds) */
header:not(.scrolled) .nav-links a {
  color: #F0EDE4;
  transition: var(--transition-fast);
}
header:not(.scrolled) .nav-links a:hover,
header:not(.scrolled) .nav-links a.active {
  color: var(--accent-gold);
}
header:not(.scrolled) .phone-link {
  color: #F0EDE4;
  transition: var(--transition-fast);
}
header:not(.scrolled) .phone-link:hover {
  color: var(--accent-gold);
}
header:not(.scrolled) .mobile-menu-btn span {
  background-color: #F0EDE4;
}

/* Transparent Header colors based on active slide */
header:not(.scrolled).slide-active-0 .nav-links a { color: #171717; }
header:not(.scrolled).slide-active-0 .phone-link { color: #171717; }
header:not(.scrolled).slide-active-0 .mobile-menu-btn span { background-color: #171717; }
header:not(.scrolled).slide-active-0 .logo-img { filter: invert(0); }

header:not(.scrolled).slide-active-1 .nav-links a { color: #FFF9FA; }
header:not(.scrolled).slide-active-1 .phone-link { color: #FFF9FA; }
header:not(.scrolled).slide-active-1 .mobile-menu-btn span { background-color: #FFF9FA; }
header:not(.scrolled).slide-active-1 .logo-img { filter: invert(1) brightness(2); }

header:not(.scrolled).slide-active-2 .nav-links a { color: #F0EDE4; }
header:not(.scrolled).slide-active-2 .phone-link { color: #F0EDE4; }
header:not(.scrolled).slide-active-2 .mobile-menu-btn span { background-color: #F0EDE4; }
header:not(.scrolled).slide-active-2 .logo-img { filter: invert(1) brightness(2); }

header:not(.scrolled).slide-active-3 .nav-links a { color: #741A2F; }
header:not(.scrolled).slide-active-3 .phone-link { color: #741A2F; }
header:not(.scrolled).slide-active-3 .mobile-menu-btn span { background-color: #741A2F; }
header:not(.scrolled).slide-active-3 .logo-img { filter: invert(0); }

/* Preloader Screen */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #171717; /* Dark elegant backdrop */
  z-index: 9999; /* Float above header & menu */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

#preloader.fade-out {
  opacity: 0;
  visibility: hidden;
}

.preloader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8rem;
  text-align: center;
}

.preloader-logo-wrapper {
  width: 120px;
  animation: logoPulse 2.5s ease-in-out infinite alternate;
}

.preloader-logo {
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1) drop-shadow(0 4px 8px rgba(255,255,255,0.05)); /* Pure white logo on dark load screen */
}

.preloader-spinner {
  width: 48px;
  height: 48px;
  border: 2.5px solid rgba(197, 168, 128, 0.15);
  border-top-color: var(--accent-gold); /* Gold spinner accent */
  border-radius: 50%;
  animation: spinSpeed 1s linear infinite;
}

.preloader-text {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: rgba(255, 249, 250, 0.8);
  letter-spacing: 1px;
  font-weight: 300;
  margin: 0;
}

@keyframes logoPulse {
  from {
    transform: scale(0.95);
    opacity: 0.75;
  }
  to {
    transform: scale(1.05);
    opacity: 1;
  }
}

@keyframes spinSpeed {
  to { transform: rotate(360deg); }
}

/* --- Story Caravan Route (Winding Timeline) --- */
.story-route-container {
  background-color: #1a0a0d;
  background-image:
    radial-gradient(ellipse at 20% 30%, rgba(139, 29, 42, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(193, 107, 28, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, #2a0d12 0%, #110508 100%);
  padding: 8rem 0;
  position: relative;
  overflow: hidden;
  color: #f3ece0;
}

/* Ambient shimmer particle layer */
.story-route-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 15%, rgba(212,175,55,0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 40%, rgba(212,175,55,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 70%, rgba(212,175,55,0.15) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 85%, rgba(212,175,55,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 90%, rgba(212,175,55,0.15) 0%, transparent 100%);
  animation: shimmerDrift 12s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

@keyframes shimmerDrift {
  0%   { transform: translateY(0) scale(1); opacity: 0.6; }
  100% { transform: translateY(-20px) scale(1.05); opacity: 1; }
}

.route-heading {
  text-align: center;
  margin-bottom: 7rem;
  /* Prevent any overflow on narrow screens */
  overflow: hidden;
  width: 100%;
}

.route-heading h1 {
  font-family: var(--font-accent);
  font-size: 4.5rem;
  font-weight: 300;
  letter-spacing: 0.3em;
  color: #f5e6cf;
  margin-bottom: 0.5rem;
  line-height: 1;
  animation: headingFadeDown 1.2s cubic-bezier(0.16,1,0.3,1) both;
  text-shadow: 0 0 60px rgba(212, 175, 55, 0.25);
}

.route-heading h2 {
  font-family: var(--font-accent);
  font-size: 2.2rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: #c8922a;
  line-height: 1;
  animation: headingFadeDown 1.4s cubic-bezier(0.16,1,0.3,1) 0.2s both;
}

@keyframes headingFadeDown {
  from { opacity: 0; transform: translateY(-30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Story heading responsive scaling ───────────────────────────── */
@media (max-width: 900px) {
  .route-heading h1 {
    font-size: 4rem;
    letter-spacing: 0.22em;
  }
  .route-heading h2 {
    font-size: 2rem;
    letter-spacing: 0.13em;
  }
}

@media (max-width: 600px) {
  .route-heading {
    margin-bottom: 4rem;
  }
  .route-heading h1 {
    font-size: 3.2rem;
    letter-spacing: 0.15em;
  }
  .route-heading h2 {
    font-size: 1.6rem;
    letter-spacing: 0.1em;
  }
}

@media (max-width: 400px) {
  .route-heading h1 {
    font-size: 2.5rem;
    letter-spacing: 0.09em;
  }
  .route-heading h2 {
    font-size: 1.3rem;
    letter-spacing: 0.07em;
  }
}


.story-route-list {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 0;
}

/* Winding Gold SVG Path */
.route-path-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.route-path-line {
  stroke: rgba(200, 146, 42, 0.18);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
}

.route-path-branch {
  stroke: rgba(200, 146, 42, 0.1);
  stroke-width: 1.2;
  fill: none;
  stroke-linecap: round;
}

/* Route Stops */
.route-stop {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 6rem;
  margin-bottom: 12rem;
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1);
}

.route-stop.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger each stop's delay */
.route-stop[data-stop="1"] { transition-delay: 0.1s; }
.route-stop[data-stop="2"] { transition-delay: 0.2s; }
.route-stop[data-stop="3"] { transition-delay: 0.3s; }
.route-stop[data-stop="4"] { transition-delay: 0.4s; }
.route-stop[data-stop="5"] { transition-delay: 0.5s; }

.route-stop:last-child {
  margin-bottom: 0;
}

/* Odd stops: text LEFT, plate RIGHT */
.route-stop:nth-child(odd) .route-plate-wrapper {
  grid-column: 2;
  grid-row: 1;
}
.route-stop:nth-child(odd) .route-text {
  grid-column: 1;
  grid-row: 1;
  text-align: left;
  justify-self: start;
}

/* Even stops: plate LEFT, text RIGHT */
.route-stop:nth-child(even) .route-plate-wrapper {
  grid-column: 1;
  grid-row: 1;
}
.route-stop:nth-child(even) .route-text {
  grid-column: 2;
  grid-row: 1;
  text-align: left;
  justify-self: start;
}

/* Plates - Organic Wabi-Sabi Stoneware */
.route-plate-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* Clean ceramic plate — perfect circle */
.wabi-sabi-plate {
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: transparent;
  padding: 0;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.6),
    0 0 0 10px rgba(200, 146, 42, 0.08),
    0 0 50px 15px rgba(200, 146, 42, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
  overflow: hidden;
  animation: plateGlow 4s ease-in-out infinite alternate;
}

@keyframes plateGlow {
  0%   { box-shadow: 0 30px 60px rgba(0,0,0,0.6), 0 0 30px 8px rgba(200,146,42,0.1); }
  100% { box-shadow: 0 30px 60px rgba(0,0,0,0.6), 0 0 60px 20px rgba(200,146,42,0.3); }
}

/* All stops: uniform clean circle */
.route-stop[data-stop="1"] .wabi-sabi-plate,
.route-stop[data-stop="2"] .wabi-sabi-plate,
.route-stop[data-stop="3"] .wabi-sabi-plate,
.route-stop[data-stop="4"] .wabi-sabi-plate,
.route-stop[data-stop="5"] .wabi-sabi-plate {
  border-radius: 50%;
}

.wabi-sabi-plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08); /* Slight zoom to fill circle edge-to-edge naturally */
  animation: slowSpin 35s linear infinite; /* Constant elegant rotation */
}

.route-plate-wrapper:hover .wabi-sabi-plate {
  transform: translateY(-10px) scale(1.04);
}

@keyframes slowSpin {
  from { transform: scale(1.08) rotate(0deg); }
  to   { transform: scale(1.08) rotate(360deg); }
}

/* Stop Text Details */
.route-text {
  max-width: 440px;
}

.route-text .section-tag {
  color: #c8922a;
  margin-bottom: 0.8rem;
  display: inline-block;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  animation: tagPulse 3s ease-in-out infinite;
}

@keyframes tagPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

.route-text h3 {
  font-family: var(--font-accent);
  font-size: 2.2rem;
  font-weight: 400;
  color: #f5e6cf;
  margin-bottom: 1.2rem;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-shadow: 0 2px 20px rgba(200, 146, 42, 0.2);
}

.route-text p {
  color: rgba(245, 230, 207, 0.7);
  font-size: 1rem;
  line-height: 1.7;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .route-path-svg {
    display: none;
  }
  
  .story-route-list::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 30px;
    width: 2px;
    background: linear-gradient(to bottom, transparent, rgba(212, 175, 55, 0.3) 5%, rgba(212, 175, 55, 0.3) 95%, transparent);
    z-index: 1;
  }
  
  .route-stop {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 6rem;
    padding-left: 80px;
  }
  
  .route-stop:nth-child(even) .route-plate-wrapper,
  .route-stop:nth-child(odd) .route-plate-wrapper {
    grid-column: 1;
    justify-content: start;
  }
  
  .route-stop:nth-child(even) .route-text,
  .route-stop:nth-child(odd) .route-text {
    grid-column: 1;
    grid-row: 2;
    text-align: left;
    justify-self: start;
  }
  
  .wabi-sabi-plate {
    width: 180px;
    height: 180px;
  }
  
  .route-stop::before {
    content: '';
    position: absolute;
    left: 30px;
    top: 90px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--accent-gold);
    border: 3px solid #0b251a;
    z-index: 3;
    transform: translateX(-50%);
  }
}

/* --- Steam Effect (Hot Food Liveliness) --- */
.steam-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4; /* Overlay on top of image, inside overflow:hidden wabi-sabi plate */
}

.steam-svg {
  width: 100%;
  height: 100%;
  opacity: 0.8;
}

.steam-line {
  stroke: rgba(255, 255, 255, 0.28); /* Soft white steam */
  stroke-width: 4.5;
  fill: none;
  stroke-linecap: round;
  filter: blur(4px);
}

.steam-1 {
  animation: riseAndFade 4s infinite ease-in-out;
}

.steam-2 {
  animation: riseAndFade 3s infinite ease-in-out 1.5s;
}

@keyframes riseAndFade {
  0% {
    transform: translateY(20px) scaleX(0.85);
    opacity: 0;
  }
  15% {
    opacity: 0.35;
  }
  50% {
    transform: translateY(-20px) scaleX(1.1) rotate(4deg);
    opacity: 0.2;
  }
  100% {
    transform: translateY(-50px) scaleX(1.3) rotate(-4deg);
    opacity: 0;
  }
}

/* --- Floating Ingredients on Story Page --- */
.story-floating-ing {
  position: absolute;
  width: 45px;
  height: auto;
  pointer-events: none;
  z-index: 3; /* Float outside the overflow:hidden plate */
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.35));
}

/* Specific orbit alignments per stop */
.route-stop[data-stop="1"] .ing-1 { top: -15px; left: 10px; animation: storyFloat1 6s infinite ease-in-out; }
.route-stop[data-stop="1"] .ing-2 { bottom: 0px; right: 20px; animation: storyFloat2 5s infinite ease-in-out 1s; }
.route-stop[data-stop="1"] .ing-3 { top: 60%; left: -20px; animation: storyFloat3 7s infinite ease-in-out 0.5s; }

.route-stop[data-stop="2"] .ing-1 { top: 0px; right: 10px; animation: storyFloat2 5.5s infinite ease-in-out; }
.route-stop[data-stop="2"] .ing-2 { bottom: -10px; left: 30px; animation: storyFloat1 6.5s infinite ease-in-out 0.8s; }

.route-stop[data-stop="3"] .ing-1 { top: -20px; left: 40px; animation: storyFloat3 6s infinite ease-in-out; }
.route-stop[data-stop="3"] .ing-2 { bottom: 20px; right: -10px; animation: storyFloat2 5.2s infinite ease-in-out 1.2s; }

.route-stop[data-stop="4"] .ing-1 { top: 10%; right: -15px; animation: storyFloat1 5.8s infinite ease-in-out; }
.route-stop[data-stop="4"] .ing-2 { bottom: -20px; left: 20px; animation: storyFloat3 6.4s infinite ease-in-out 0.4s; }

.route-stop[data-stop="5"] .ing-1 { top: -10px; left: 20px; animation: storyFloat2 6.2s infinite ease-in-out; }
.route-stop[data-stop="5"] .ing-2 { bottom: 10px; right: -5px; animation: storyFloat1 5.6s infinite ease-in-out 0.6s; }

/* floating keyframe cycles */
@keyframes storyFloat1 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(8deg); }
}
@keyframes storyFloat2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(10px) rotate(-6deg); }
}
@keyframes storyFloat3 {
  0%, 100% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(-8px) translateY(-8px) rotate(4deg); }
}

/* --- Signatures Page Typography Override (Moonwalk Font) --- */
.signatures-page h1,
.signatures-page h2,
.signatures-page h3,
.signatures-page .section-title,
.signatures-page .dish-title {
  font-family: 'Moonwalk', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* --- Signatures Hero Section --- */
.signatures-hero {
  height: 600px;
  background: url('assets/sig.png') no-repeat center center / cover;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 5rem;
}

.hero-center-content {
  text-align: center;
  color: #FFF9FA;
  max-width: 600px;
  z-index: 10;
  position: relative;
}

.hero-center-content .hero-title {
  font-size: 4rem;
  font-weight: 700;
  color: #FFF9FA;
  margin: 0.5rem 0 1.2rem;
  letter-spacing: 2px;
  line-height: 1.1;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.hero-center-content .hero-desc {
  font-size: 1.05rem;
  color: rgba(255, 249, 250, 0.85);
  line-height: 1.6;
  margin-bottom: 2rem;
}

.hero-divider {
  display: flex;
  justify-content: center;
}

/* Left/Right Staged plates */
.hero-staged-left,
.hero-staged-right {
  position: absolute;
  bottom: -20px;
  width: 380px;
  height: 380px;
  z-index: 5;
}

.hero-staged-left {
  left: 4%;
  animation: rollInFromLeft 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.hero-staged-right {
  right: 4%;
  animation: rollInFromRight 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.hero-plate-container {
  position: relative;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.85));
}

/* Circular clip mask — no border, overflow hidden clips the 2X zoom */
.hero-plate-mask {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}

.hero-plate-mask::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.65) 100%);
  pointer-events: none;
  z-index: 2;
  border-radius: 50%;
}

.hero-food-plate {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.5); /* Zoomed in but not too close */
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-staged-left:hover .hero-food-plate {
  transform: scale(1.6) rotate(-3deg);
}

.hero-staged-right:hover .hero-food-plate {
  transform: scale(1.6) rotate(3deg);
}

/* Scribble text overlay */
.hero-scribble {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  width: 220px;
}

.scribble-left {
  top: -45%;
  right: -15px;
  text-align: left;
}

.scribble-right {
  top: -45%;
  left: -15px;
  text-align: right;
}

.scribble-text {
  font-family: 'Caveat', cursive;
  font-size: 2.2rem;
  color: var(--accent-gold);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  display: block;
  line-height: 1.1;
}

.scribble-arrow {
  width: 45px;
  height: 45px;
  margin-top: 0.5rem;
}

.scribble-left .scribble-arrow {
  transform: rotate(10deg);
  margin-left: 2.5rem;
}

.scribble-right .scribble-arrow {
  transform: rotate(-10deg);
  margin-right: 2.5rem;
}

.scribble-heart {
  position: absolute;
  width: 30px;
  height: 30px;
  opacity: 0.85;
}

.scribble-left .scribble-heart {
  bottom: -20px;
  left: 0px;
}

.scribble-right .scribble-heart {
  bottom: -20px;
  right: 0px;
}

/* Specific button styling on signatures page header CTA */
.signatures-page header .nav-cta .btn-primary {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0px !important; /* Sharp corners like a card */
  padding: 0.8rem 1.8rem !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
}

.signatures-page header .nav-cta .btn-primary:hover {
  background-color: #222222 !important;
}

/* Responsive adjustments for plates to prevent text overlap */
@media (max-width: 1400px) {
  .hero-staged-left,
  .hero-staged-right {
    width: 300px;
    height: 300px;
    bottom: -10px;
  }
  .scribble-left {
    right: -20px;
  }
  .scribble-right {
    left: -20px;
  }
  .scribble-text {
    font-size: 1.9rem;
  }
}

@media (max-width: 1200px) {
  .hero-staged-left,
  .hero-staged-right {
    width: 250px;
    height: 250px;
    bottom: 0px;
  }
  .scribble-left {
    right: -10px;
    top: 10%;
  }
  .scribble-right {
    left: -10px;
    top: 10%;
  }
  .scribble-text {
    font-size: 1.6rem;
  }
}

/* Responsive adjustments */
@media (max-width: 992px) {
  /* Show plates at reduced size on tablet — don't hide */
  .hero-staged-left,
  .hero-staged-right {
    width: 200px;
    height: 200px;
    bottom: 0;
  }

  .hero-staged-left {
    left: 0;
  }

  .hero-staged-right {
    right: 0;
  }

  .scribble-left,
  .scribble-right,
  .hero-arrow {
    display: none;
  }

  .signatures-hero {
    height: auto;
    padding: 12rem 0 6rem;
  }

  .hero-center-content .hero-title {
    font-size: 3rem;
  }
}

@media (max-width: 700px) {
  .hero-staged-left,
  .hero-staged-right {
    width: 150px;
    height: 150px;
  }

  .hero-plate-mask {
    width: 150px;
    height: 150px;
  }

  .hero-center-content .hero-title {
    font-size: 2.4rem;
  }
}

@media (max-width: 480px) {
  .hero-staged-left,
  .hero-staged-right {
    width: 110px;
    height: 110px;
  }

  .hero-plate-mask {
    width: 110px;
    height: 110px;
  }

  /* Bring plates up slightly so they don't clip below fold */
  .hero-staged-left,
  .hero-staged-right {
    bottom: 10px;
  }

  .hero-center-content .hero-title {
    font-size: 2rem;
  }
}

/* --- Roll-in Entry Animations for Signatures Hero Plates --- */
@keyframes rollInFromLeft {
  0% {
    transform: translateX(-120vw) rotate(-540deg);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}

@keyframes rollInFromRight {
  0% {
    transform: translateX(120vw) rotate(540deg);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}

/* --- Redesigned Menu Horizontal Cards Layout (Glo Kitchen Reference) --- */
.menu-grid-rows {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 0;
}

.menu-card-row {
  display: flex;
  align-items: center;
  border-radius: 24px;
  margin-bottom: 5rem;
  min-height: 240px;
  position: relative;
  overflow: visible; /* Allows plate overlap */
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
  padding: 2.5rem 3.5rem !important;
  border-bottom: none !important;
}

.menu-card-row:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55);
}

.menu-card-row.layout-odd {
  flex-direction: row;
}

.menu-card-row.layout-even {
  flex-direction: row-reverse;
}

.menu-card-info {
  flex: 1;
}

.menu-card-row.layout-odd .menu-card-info {
  padding-right: 120px; /* Space for overlapping elements */
  padding-left: 0;
}

.menu-card-row.layout-even .menu-card-info {
  padding-left: 120px;
  padding-right: 0;
}

.menu-card-info h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 3rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  line-height: 0.95;
  margin-bottom: 0.8rem;
}

.menu-card-info p {
  font-size: 1.05rem;
  line-height: 1.5;
  opacity: 0.9;
  font-weight: 400;
}

.menu-card-media {
  position: relative;
  width: 320px;
  height: 320px;
  flex-shrink: 0;
  margin-top: -80px;
  margin-bottom: -80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-card-row.layout-odd .menu-card-media {
  margin-right: -80px;
  margin-left: 20px;
}

.menu-card-row.layout-even .menu-card-media {
  margin-left: -80px;
  margin-right: 20px;
}

.menu-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 5px solid #ffffff;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
  animation: slowSpin 40s linear infinite; /* Constant rotation matching reference */
}

/* Overlapping Circular Pricing/Diet Badges */
.menu-price-badges {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  position: absolute;
  z-index: 10;
}

.menu-card-row.layout-odd .menu-price-badges {
  right: 250px;
}

.menu-card-row.layout-even .menu-price-badges {
  left: 250px;
}

.price-circle-badge {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background-color: #FCAE1E; /* Default Orange */
  color: #4a2211;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  border: 2px solid #ffffff;
}

.price-circle-badge.diet-badge {
  background-color: #C21A22; /* Red */
  color: #ffffff;
}

.price-circle-badge.diet-badge.veg {
  background-color: #8EA72E; /* Green */
  color: #ffffff;
}

.price-circle-badge .badge-label {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.8;
  margin-bottom: 2px;
}

.price-circle-badge .badge-val {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}

/* Bottom Drinks & Desserts Section */
.beverage-section {
  max-width: 960px;
  margin: 5rem auto 2rem auto;
  border-top: 1px dashed rgba(200, 146, 42, 0.3);
  padding-top: 4rem;
}

.beverage-title {
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  color: var(--accent-gold);
  margin-bottom: 3rem;
  letter-spacing: 1px;
}

.beverage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 2.5rem;
  justify-items: center;
}

.beverage-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100%;
  max-width: 240px;
  background-color: #FCAE1E; /* Orange background matching reference */
  color: #4a2211;
  border-radius: 20px;
  padding: 2.5rem 1.5rem 1.8rem 1.5rem !important;
  position: relative;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  margin-top: 40px; /* offset for price badge */
  border-bottom: none !important;
}

.beverage-card .beverage-price-badge {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
}

.beverage-card-img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #ffffff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  margin-bottom: 1rem;
}

.beverage-card h4 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.4rem;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  line-height: 1.1;
}

.beverage-card p {
  font-size: 0.85rem;
  line-height: 1.4;
  opacity: 0.85;
}

.beverage-footer-banner {
  text-align: center;
  margin-top: 5rem;
  font-family: 'Outfit', sans-serif;
  color: var(--text-dim);
}

.beverage-footer-banner h4 {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fcae1e;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Responsive Menu Adapters */
@media (max-width: 860px) {
  .menu-card-row {
    flex-direction: column !important;
    text-align: center;
    padding: 2rem;
    margin-bottom: 6rem;
  }
  
  .menu-card-row.layout-odd .menu-card-info,
  .menu-card-row.layout-even .menu-card-info {
    padding: 0;
    margin-bottom: 2rem;
  }

  .menu-card-media {
    margin: 0 auto -70px auto !important;
    width: 240px;
    height: 240px;
  }

  .menu-price-badges {
    position: relative;
    flex-direction: row;
    justify-content: center;
    right: auto !important;
    left: auto !important;
    margin-top: 1rem;
    gap: 1rem;
  }

  .price-circle-badge {
    width: 70px;
    height: 70px;
  }

  .price-circle-badge .badge-val {
    font-size: 12px;
  }
}

/* --- Fiery 3-Column Menu Card Grid (Supremus Burger Reference) --- */
.menu-fiery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2.5rem;
  max-width: 1040px;
  margin: 0 auto;
  padding: 3rem 0;
}

.menu-fiery-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  border-radius: 28px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
  padding: 3rem 1.8rem 2.2rem 1.8rem !important;
  border-bottom: none !important;
  text-align: center;
  min-height: 480px;
}

.menu-fiery-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.55);
}

.fiery-card-glow {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.25) 0%, transparent 68%);
  pointer-events: none;
  z-index: 1;
}

.fiery-card-header {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 1.5rem;
  z-index: 2;
}

.fiery-plate-wrapper {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  margin-bottom: 2rem;
}

.fiery-plate-wrapper > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #ffffff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
  animation: floatPlate 6s ease-in-out infinite alternate;
}

@keyframes floatPlate {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}

.fiery-plate-accent {
  position: absolute;
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  color: rgba(255, 255, 255, 0.35);
  pointer-events: none;
  user-select: none;
}

.fiery-plate-accent.left {
  left: -24px;
  top: 30%;
  transform: rotate(-15deg);
}

.fiery-plate-accent.right {
  right: -24px;
  bottom: 30%;
  transform: rotate(15deg);
}

.fiery-price-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #FCAE1E; /* Orange badge */
  color: #4a2211;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.35);
  z-index: 3;
}

.fiery-price-badge .badge-label {
  font-size: 6px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.8;
}

.fiery-price-badge .badge-val {
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
}

.fiery-diet-icon {
  position: absolute;
  bottom: -8px;
  left: -8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #8EA72E; /* Veg Green */
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 3;
  font-size: 9px;
  font-weight: 800;
}

.fiery-diet-icon.non-veg {
  background-color: #C21A22; /* Non-Veg Red */
}

.fiery-card-title {
  font-family: 'Zeroarea', 'Outfit', sans-serif;
  font-size: 2.1rem;
  font-weight: normal;
  text-transform: uppercase;
  line-height: 0.95;
  margin-bottom: 0.6rem;
  z-index: 2;
  letter-spacing: -0.2px;
}

.fiery-card-desc {
  font-size: 0.88rem;
  line-height: 1.4;
  color: inherit;
  opacity: 0.85;
  z-index: 2;
  margin-bottom: 1.5rem;
}

.fiery-card-footer {
  margin-top: auto;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  z-index: 2;
  opacity: 0.8;
}

.fiery-card-footer span {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  background-color: rgba(255, 255, 255, 0.15);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

/* --- Floating Orbiting Ingredients --- */
.fiery-ingredients-circle {
  position: absolute;
  top: -22px;
  left: -22px;
  right: -22px;
  bottom: -22px;
  pointer-events: none;
  z-index: 4;
  animation: orbitSpin 30s linear infinite;
}

@keyframes orbitSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.orbit-ing {
  position: absolute;
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5));
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.orbit-ing.ing-1 {
  top: 10%;
  left: 10%;
  animation: counterOrbit 30s linear infinite;
}

.orbit-ing.ing-2 {
  top: 10%;
  right: 10%;
  animation: counterOrbit 30s linear infinite;
}

.orbit-ing.ing-3 {
  bottom: 10%;
  left: 50%;
  margin-left: -22px;
  animation: counterOrbit 30s linear infinite;
}

@keyframes counterOrbit {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

/* Page Banner description text color override for visibility over dark image/green backgrounds */
.page-banner p {
  color: #FFF9FA !important;
}

/* --- Menu Marquee Ticker --- */
.about-preview {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-primary);
  z-index: 1;
  padding-bottom: 2rem;
}

/* Background gold ornament styling */
.about-ornament {
  position: absolute;
  pointer-events: none;
  user-select: none;
  color: var(--accent-gold);
  z-index: 0;
}

.ornament-mandala-left {
  top: -40px;
  left: -60px;
  width: 280px;
  height: 280px;
  opacity: 0.06;
}

.ornament-camel-right {
  bottom: -10px;
  right: -20px;
  width: 320px;
  height: 220px;
  opacity: 0.05;
}

.ornament-leaves-center {
  top: 35%;
  left: 42%;
  width: 150px;
  height: 150px;
  opacity: 0.045;
}

.ornament-route-trace {
  top: 10%;
  right: 35%;
  width: 350px;
  height: 140px;
  opacity: 0.04;
}

.about-preview .container {
  position: relative;
  z-index: 2;
}

.menu-marquee-section {
  padding: 3rem 0 4rem 0;
  background: linear-gradient(rgba(28, 21, 18, 0.55), rgba(28, 21, 18, 0.55)),
              url('assets/mor.png') no-repeat center center / cover;
  overflow: hidden;
  position: relative;
}

.marquee-wrapper {
  overflow: hidden;
  width: 100%;
  display: flex;
  position: relative;
  padding: 1.5rem 0;
}

.marquee-wrapper::before,
.marquee-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 5;
  pointer-events: none;
}

.marquee-wrapper::before {
  left: 0;
  background: linear-gradient(to right, rgba(28,21,18,0.85) 0%, transparent 100%);
}

.marquee-wrapper::after {
  right: 0;
  background: linear-gradient(to left, rgba(28,21,18,0.85) 0%, transparent 100%);
}

.marquee-track {
  display: flex;
  gap: 2.5rem;
  width: max-content;
  animation: marqueeScrolling 38s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}

.marquee-food-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  /* Start with a default base scale */
  transform: scale(0.65);
}

.marquee-food-img {
  flex-shrink: 0;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--accent-gold);
  box-shadow: 0 0 0 2px rgba(197, 168, 128, 0.3), 0 10px 28px rgba(0, 0, 0, 0.35);
  transition: transform var(--transition-smooth), box-shadow var(--transition-fast);
  cursor: pointer;
}

.marquee-food-img:hover {
  transform: scale(1.15) rotate(6deg);
  box-shadow: 0 0 0 4px rgba(197, 168, 128, 0.55), 0 18px 40px rgba(0, 0, 0, 0.45);
}

@keyframes marqueeScrolling {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 1.25rem)); }
}

/* --- Signatures Preview Section Overhaul --- */
.signatures-preview {
  position: relative;
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding: 10rem 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 650px;
}

.sig-preview-path {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.sig-preview-content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 800px;
}

/* Staged absolute plates styling */
.sig-preview-plate {
  position: absolute;
  z-index: 5;
  filter: drop-shadow(0 15px 35px rgba(28, 21, 18, 0.15));
}

.sig-preview-plate img {
  display: block;
  object-fit: cover;
  border-radius: 50%;
  pointer-events: none;
  border: 4px solid var(--border-light);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* JS-driven wave plates: left/top and rotation set by requestAnimationFrame */
.wave-plate {
  position: absolute;
  z-index: 5;
  filter: drop-shadow(0 12px 28px rgba(28, 21, 18, 0.18));
}

.wave-plate img {
  /* GPU-accelerated rotation applied per frame by JS */
  will-change: transform;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.wave-plate:hover img {
  border-color: var(--accent-gold) !important;
  box-shadow: 0 0 30px rgba(197, 168, 128, 0.4);
  filter: brightness(1.1);
}

/* Sketched icon overlay details along the paths */
.sig-preview-icon {
  position: absolute;
  z-index: 2;
  color: var(--accent-gold);
  opacity: 0.65;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Placed on coordinates near dotted lines */
.icon-leaf-left { top: 25%; left: 15%; }
.icon-bean-left { top: 58%; left: 22%; }
.icon-hat-center { bottom: 25%; left: 38%; }
.icon-chilli-right { bottom: 28%; right: 28%; }

/* Soft animations or hover scale on plates */
.sig-preview-plate:hover {
  z-index: 20;
}

.sig-preview-plate:hover img {
  transform: scale(1.12) rotate(5deg);
  border-color: var(--accent-gold);
  filter: drop-shadow(0 20px 45px rgba(197, 168, 128, 0.25));
}

/* Adjust for responsive sizes */
@media (max-width: 1100px) {
  .signatures-preview {
    min-height: 560px;
    padding: 8rem 0;
  }
  /* Wave plates scale down — JS still positions them, CSS just shrinks them */
  .wave-plate {
    transform-origin: center center;
  }
}

@media (max-width: 900px) {
  .signatures-preview {
    padding: 6rem 0;
    min-height: 520px;
  }
  /* Show plates at a reduced scale on tablets — do NOT hide */
  .sig-preview-plate,
  .wave-plate {
    display: block !important;
  }
  /* Reduce the JS-set size visually via CSS scale */
  .wave-plate img {
    width: 110px !important;
    height: 110px !important;
    border-width: 3px;
  }
  .sig-preview-content {
    max-width: 90%;
  }
  .sig-preview-content .section-title {
    font-size: 2.4rem !important;
  }
  /* Keep the SVG path lines visible but subtler */
  .sig-preview-path {
    opacity: 0.5;
  }
}

@media (max-width: 600px) {
  .signatures-preview {
    padding: 5rem 0;
    min-height: 480px;
  }
  .wave-plate img {
    width: 85px !important;
    height: 85px !important;
    border-width: 2px;
  }
  .sig-preview-content .section-title {
    font-size: 1.9rem !important;
  }
  .sig-preview-content p {
    font-size: 0.9rem !important;
  }
  .sig-preview-icon {
    display: none;
  }
}

/* --- Chinese Wok Showcase Grid Section (Wellvo-inspired aesthetic) --- */
.wok-showcase-section {
  padding: 8rem 0;
  background-color: #120608; /* Dark charcoal/blackcurrant background */
  overflow: hidden;
  position: relative;
}

/* Ambient glow colors in background */
.wok-showcase-section::before {
  content: '';
  position: absolute;
  top: 15%;
  left: 10%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(139, 29, 42, 0.22) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.wok-showcase-section::after {
  content: '';
  position: absolute;
  bottom: 10%;
  right: 5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(193, 107, 28, 0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.wok-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  position: relative;
  z-index: 2;
  margin-top: 4rem;
}

.wok-card {
  border-radius: 32px;
  padding: 4rem 3.5rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
  min-height: 520px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
  box-sizing: border-box;
}

.wok-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
}

.wok-span-2 {
  grid-column: span 2;
}

.wok-span-3 {
  grid-column: span 3;
}

/* Custom dimensions for the grand 3-column hero panel */
.wok-span-3 .wok-cutout-frame {
  width: 380px;
  height: 380px;
  bottom: -40px;
  right: -20px;
}

.wok-span-3 .wok-card-desc {
  max-width: 55%;
}

/* Card color themes */
.wok-card-teal {
  background-color: #074736; /* Premium Deep Emerald/Teal */
  color: #fdf7e7;
}

.wok-card-brown {
  background-color: #2b140e; /* Deep Cocoa Brown */
  color: #fdf7e7;
}

.wok-card-yellow {
  background-color: #fcae1e; /* Vibrant Bold Yellow */
  color: #2b140e;
}

.wok-card-cream {
  background-color: #fcf4e3; /* Warm Rich Cream */
  color: #2b140e;
}

/* Watermark background text overlays (Show-stealer detail) */
.wok-card-watermark {
  position: absolute;
  font-family: 'Zeroarea', 'Outfit', sans-serif;
  font-size: 11rem;
  font-weight: 900;
  text-transform: uppercase;
  bottom: -25px;
  left: -20px;
  pointer-events: none;
  user-select: none;
  line-height: 0.85;
  z-index: 1;
  opacity: 0.055;
  color: #fff;
  letter-spacing: -5px;
  will-change: transform;
}

.wok-card-yellow .wok-card-watermark {
  color: #000;
  opacity: 0.045;
}

.wok-card-cream .wok-card-watermark {
  color: #000;
  opacity: 0.04;
}

/* Force high z-index on content elements so they sit over the watermark */
.wok-card-top {
  position: relative;
  z-index: 3;
}

.wok-card-bottom {
  position: relative;
  z-index: 3;
}

/* Typography styles inside cards */
.wok-card-header {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.95;
  margin-bottom: 1.5rem;
}

.wok-card-title {
  font-family: 'Zeroarea', 'Outfit', sans-serif;
  font-size: 4.2rem;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.85;
  margin-bottom: 1.2rem;
  letter-spacing: -1.5px;
  z-index: 3;
}

.wok-card-yellow .wok-card-title {
  color: #2b140e;
}

.wok-card-desc {
  font-size: 1.05rem;
  line-height: 1.5;
  max-width: 65%;
  z-index: 3;
  text-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.wok-card-teal .wok-card-desc,
.wok-card-brown .wok-card-desc {
  color: rgba(253, 247, 231, 0.88) !important;
}

.wok-card-yellow .wok-card-desc,
.wok-card-cream .wok-card-desc {
  color: rgba(43, 20, 14, 0.88) !important;
  text-shadow: none;
}

.wok-card-full-desc {
  max-width: 100%;
}

/* Sticker/Badge overlays */
.wok-badge-sticker {
  position: absolute;
  padding: 0.5rem 1rem;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-radius: 30px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.25);
  transform: rotate(-10deg);
  z-index: 4;
}

.wok-badge-sticker.badge-red {
  background-color: #c21a22;
  color: #fff;
}

.wok-badge-sticker.badge-gold {
  background-color: #c5a880;
  color: #120608;
}

/* Cutout frame style for photos (increased to 310px) */
.wok-cutout-frame {
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 310px;
  height: 310px;
  border-radius: 50%;
  border: 6px solid #fff;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45);
  transform: rotate(-6deg);
  overflow: hidden;
  z-index: 2;
  transition: transform 0.4s ease;
}

.wok-card:hover .wok-cutout-frame {
  transform: rotate(2deg) scale(1.06);
}

.wok-cutout-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Accent shapes */
.wok-star-accent {
  position: absolute;
  color: var(--accent-gold);
  font-size: 2.2rem;
  pointer-events: none;
  animation: starRotate 8s linear infinite;
  z-index: 3;
}

@keyframes starRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Responsive showcase behaviors */
@media (max-width: 992px) {
  .wok-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .wok-span-2,
  .wok-span-3 {
    grid-column: span 1;
  }
  .wok-card {
    min-height: 380px;
    padding: 2.5rem 2rem;
  }
  .wok-card-title {
    font-size: 2.4rem;
  }
  .wok-card-desc {
    max-width: 80%;
  }
  .wok-cutout-frame {
    width: 200px;
    height: 200px;
    bottom: -15px;
    right: -15px;
  }
}

@media (max-width: 576px) {
  .wok-card-title {
    font-size: 2rem;
  }
  .wok-card-desc {
    max-width: 100%;
  }
  .wok-cutout-frame {
    position: relative;
    bottom: auto;
    right: auto;
    margin-top: 2rem;
    align-self: center;
    width: 180px;
    height: 180px;
  }
}

/* --- Enhanced Reservation Preview Section --- */
.reservation-preview {
  position: relative;
  background: linear-gradient(rgba(28, 21, 18, 0.78), rgba(28, 21, 18, 0.78)), 
              url('assets/restaurant_interior.png') no-repeat center center / cover;
  background-attachment: fixed; /* Parallax effect */
  border-top: 1.5px solid var(--accent-gold);
  border-bottom: 1.5px solid var(--accent-gold);
  color: #fff9fa;
  padding: 8rem 0;
}

.reservation-preview .section-tag {
  color: var(--accent-gold) !important;
  font-weight: 600;
  letter-spacing: 2px;
}

.reservation-preview h2 {
  font-family: var(--font-serif);
  font-size: 3.5rem;
  color: #ffffff;
  margin-top: 0.5rem;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
  letter-spacing: -0.5px;
}

.reservation-preview p {
  color: rgba(255, 255, 255, 0.85) !important;
  max-width: 620px;
  margin: 1.5rem auto 2.5rem;
  font-size: 1.08rem;
  line-height: 1.6;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.reservation-preview .btn-outline {
  border-color: #ffffff !important;
  color: #ffffff !important;
}

.reservation-preview .btn-outline:hover {
  background-color: #ffffff !important;
  color: #000000 !important;
  transform: translateY(-2px);
}

/* Adjust for responsive sizes */
@media (max-width: 768px) {
  .reservation-preview {
    padding: 6rem 0;
    background-attachment: scroll; /* Disable fixed bg on mobile to prevent lag */
  }
  .reservation-preview h2 {
    font-size: 2.4rem;
  }
}