/* ============================================================
   JS CATERER — COMPLETE DESIGN SYSTEM v7
   Light Luxury Theme | Alternating Soft Warm, Ivory & Soft Gold Sections
   Logo: assets/logo.png
   Fonts: Fraunces · Plus Jakarta Sans · Sora · Noto Sans Tamil
   ============================================================ */

/* ---------- DESIGN TOKENS ---------- */
:root {
  --bg:           #FCFAF7; /* Clean Soft Ivory */
  --bg-card:      #FFFFFF; /* Pure White */
  --bg-warm:      #F5EFEB; /* Very Soft Warm Sand/Clay */
  --bg-soft-gold: #FAF3E6; /* Pale Gold Hue */

  --emerald:      #1B3828;
  --emerald-mid:  #2A5440;
  --emerald-lt:   #3B7A58;
  --gold:         #C09B2A;
  --gold-lt:      #E8C84D;
  --gold-dim:     rgba(192, 155, 42, 0.12);
  
  --dark-text:    #F3EAD0;
  --dark-overlay: rgba(14, 32, 24, 0.85);
  
  --text:         #1A221E;
  --text-mid:     #4A5E53;
  --text-lt:      #7A9085;
  
  --shadow-sm:    0 2px 12px rgba(27,56,40,.04);
  --shadow-md:    0 8px 32px rgba(27,56,40,.07);
  --shadow-lg:    0 18px 50px rgba(27,56,40,.10);
  
  --border:       rgba(192, 155, 42, 0.20);
  
  --font-head:    'Fraunces', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-label:   'Sora', sans-serif;
  --font-tamil:   'Noto Sans Tamil', sans-serif;
  
  --radius-sm:    12px;
  --radius-md:    20px;
  --radius-lg:    28px;
}

/* ---------- RESET & BASE ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font-body);
  line-height: 1.75; overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* ---------- TYPOGRAPHY ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head); font-weight: 700;
  color: var(--emerald); line-height: 1.25;
}
h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); }
h4 { font-size: 1.15rem; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 400; color: var(--gold); }
p { color: var(--text-mid); }
a { text-decoration: none; transition: color .25s; }

/* ---------- SORA ACCENT LABELS & LUXURY PILL BADGES ---------- */
.accent-label, .card-tag, .section-gold-tag, .slide-tag, .story-chapter-tag,
.visual-badge, .dot-label, .page-breadcrumb, .summary-badge, .wa-sim-header,
.sub-tag, .hero-pill-badge, .storyboard-time-badge, .label, .section-tag-pill {
  font-family: var(--font-label) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  white-space: nowrap !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

/* Glassmorphism Luxury Section Badges */
.story-chapter-tag,
.section-gold-tag,
.section-tag-pill {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(12px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
  border: 1.5px solid rgba(192, 155, 42, 0.65) !important;
  color: #1B3828 !important;
  padding: 6px 18px 6px 8px !important;
  border-radius: 30px !important;
  margin-bottom: 20px !important;
  gap: 10px !important;
  box-shadow: 0 8px 24px -4px rgba(27, 56, 40, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  white-space: nowrap !important;
  transition: all 0.3s ease !important;
}

.story-chapter-tag:hover,
.section-gold-tag:hover,
.section-tag-pill:hover {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(192, 155, 42, 0.9) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px -4px rgba(27, 56, 40, 0.12), inset 0 1px 0 #FFFFFF !important;
}

/* Embedded Circular Icon Bullet inside Section Badges */
.story-chapter-tag > i,
.section-gold-tag > i,
.section-tag-pill > i {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  border-radius: 50% !important;
  background: #1B3828 !important;
  color: #E8C84D !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

/* Fullstretch / Dark Section Pill Overrides */
.fullstretch-content .story-chapter-tag,
.fullstretch-content .section-gold-tag,
.dark-section .story-chapter-tag {
  background: rgba(14, 32, 24, 0.94) !important;
  border: 1.5px solid #E8C84D !important;
  color: #F3EAD0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}

.fullstretch-content .story-chapter-tag > i,
.fullstretch-content .section-gold-tag > i,
.dark-section .story-chapter-tag > i {
  background: #E8C84D !important;
  color: #1B3828 !important;
}

/* ---------- CONTAINER & SECTION HEADERS ---------- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; }
.text-center { text-align: center; }
.full-btn { width: 100%; display: block; text-align: center; }

.section-header-center {
  text-align: center;
  max-width: 768px;
  margin: 0 auto 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section-header-center .story-chapter-tag,
.section-header-center .section-gold-tag {
  margin: 0 auto 16px !important;
}

.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }
.mt-56 { margin-top: 56px; }

/* ============================================================
   SECTION SPACING & TRANSITIONS
   ============================================================ */
.section-light {
  background: var(--bg);
  padding: 100px 0;
  border-bottom: 1px solid var(--border);
}
.section-light-warm {
  background: var(--bg-warm);
  padding: 100px 0;
  border-bottom: 1px solid var(--border);
}
.section-soft-gold {
  background: var(--bg-soft-gold);
  padding: 100px 0;
  border-bottom: 1px solid var(--border);
}

/* ============================================================
   MODERN BRAND HEADER WITH LOGO
   ============================================================ */
.luxury-header {
  background: rgba(252, 250, 247, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 800;
  box-shadow: var(--shadow-sm);
}
.header-inner {
  display: flex; justify-content: space-between;
  align-items: center; padding: 12px 24px;
}
.brand-logo-group {
  display: flex; align-items: center; gap: 14px;
}
.brand-logo-img {
  width: 52px; height: 52px;
  object-fit: contain;
  border-radius: 50%;
  border: 1px solid var(--gold);
}
.brand-text {
  display: flex; flex-direction: column;
}
.brand-name {
  font-family: var(--font-head); font-size: 20px;
  font-weight: 800; color: var(--emerald);
  letter-spacing: 0.5px; line-height: 1.1;
}
.brand-motto-en {
  font-family: var(--font-label); font-size: 8.5px;
  color: var(--text-lt); letter-spacing: 0.12em;
  text-transform: uppercase; margin-top: 3px;
}
.brand-motto-ta {
  font-family: var(--font-tamil); font-size: 9.5px;
  color: var(--gold); font-weight: 700; margin-top: 2px;
}
.nav-links {
  display: flex; align-items: center; gap: 24px;
}
.nav-item {
  font-family: var(--font-label); font-size: 12px;
  font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-mid);
  padding: 6px 0; position: relative;
}
.nav-item:hover, .nav-item.active { color: var(--emerald); }
.nav-item.active::after {
  content: ''; position: absolute;
  bottom: -2px; left: 0; width: 100%; height: 2px;
  background: var(--emerald); border-radius: 2px;
}
.btn-gold-nav {
  background: var(--emerald); color: #fff !important;
  padding: 10px 24px; border-radius: 30px;
  font-family: var(--font-label); font-size: 12px;
  font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(27,56,40,0.15);
  transition: all 0.25s;
}
.btn-gold-nav:hover { background: var(--gold); transform: translateY(-1px); }

/* ---------- GRADIENT TEXT UTILITY ---------- */
.gradient-text {
  background: linear-gradient(135deg, #1B3828 0%, #C09B2A 60%, #E8C84D 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   TOP ANNOUNCEMENT BAR
   ============================================================ */
.top-bar {
  background: var(--emerald); color: rgba(255, 255, 255, 0.9);
  font-size: 13px; padding: 10px 0; position: relative; z-index: 850;
}
.top-bar-inner {
  display: flex; justify-content: space-between;
  align-items: center; gap: 12px;
}
.top-contacts span { margin-right: 24px; }
.top-contacts span i { color: var(--gold-lt); margin-right: 6px; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.btn-top-wa {
  background: #25D366; color: #fff; padding: 6px 16px;
  border-radius: 20px; font-family: var(--font-label); font-size: 11px;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.btn-top-wa:hover { background: #1EB558; }

/* ============================================================
   HERO / MAIN STORYBOARD BANNER & RUNNING PROGRESS BAR
   ============================================================ */
.video-hero-section {
  position: relative; width: 100%; min-height: 100vh;
  overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
}

/* Top Running Progress Bar */
.hero-top-progress-bar {
  position: absolute; top: 0; left: 0; width: 100%; height: 4px;
  background: rgba(255, 255, 255, 0.12); z-index: 15;
}
.hero-top-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #C09B2A 0%, #E8C84D 100%);
  box-shadow: 0 0 12px #E8C84D;
  transition: width 0.05s linear;
}

.hero-video-bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.hero-slideshow { position: absolute; inset: 0; z-index: 1; }
.hero-slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.2s ease-in-out;
}
.hero-slide.active { opacity: 1; }
.hero-overlay {
  position: absolute; inset: 0; z-index: 2;
  background: 
    linear-gradient(180deg, rgba(14, 32, 24, 0.2) 0%, rgba(14, 32, 24, 0.35) 50%, rgba(14, 32, 24, 0.85) 100%),
    linear-gradient(90deg, rgba(14, 32, 24, 0.55) 0%, rgba(14, 32, 24, 0.25) 50%, rgba(14, 32, 24, 0.05) 100%);
  pointer-events: none;
}
.hero-text-layer {
  position: relative; z-index: 3; padding: 0 0 90px; width: 100%;
}
.hero-text-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Razor-Sharp High-Contrast Hero Pill Badge */
.hero-pill-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(14, 32, 24, 0.94) !important;
  border: 1.5px solid #E8C84D !important;
  padding: 6px 18px 6px 8px !important;
  border-radius: 30px !important;
  margin-bottom: 22px !important;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.8), 0 0 16px rgba(232, 200, 77, 0.35) !important;
  color: #F3EAD0 !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}

.hero-pill-badge > i {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #E8C84D 0%, #C09B2A 100%) !important;
  color: #1B3828 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  margin: 0 !important;
}

.hero-main-title {
  font-family: var(--font-head); font-weight: 800; color: #FFFFFF !important;
  margin-bottom: 14px; font-size: clamp(2.6rem, 5.5vw, 4.4rem); line-height: 1.15;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.95), 0 1px 3px rgba(0, 0, 0, 0.9);
}
.hero-main-title em {
  color: #E8C84D !important; font-style: italic; font-weight: 400;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.95);
}
.hero-tamil {
  font-family: var(--font-tamil); font-size: clamp(1.15rem, 2.5vw, 1.6rem);
  font-weight: 700; color: #E8C84D !important; margin-bottom: 18px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
}
.hero-sub {
  max-width: 720px; font-size: 1.05rem; color: rgba(255, 255, 255, 0.95) !important;
  margin-bottom: 32px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
}
.hero-cta-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }

/* Centered Bottom Scroll & Mouse Indicator */
.scroll-down-indicator {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.9);
  z-index: 10;
  text-align: center;
  pointer-events: none;
}
.scroll-down-indicator .accent-label {
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
.mouse-scroll-icon {
  width: 22px; height: 36px;
  border: 2px solid rgba(232, 200, 77, 0.85);
  border-radius: 12px;
  position: relative;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  background: rgba(14, 32, 24, 0.3);
}
.mouse-wheel {
  width: 4px; height: 8px;
  background: var(--gold-lt);
  border-radius: 2px;
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  animation: mouseScroll 1.6s infinite ease-in-out;
}
@keyframes mouseScroll {
  0% { opacity: 1; transform: translate(-50%, 0); }
  50% { opacity: 0.4; transform: translate(-50%, 12px); }
  100% { opacity: 0; transform: translate(-50%, 16px); }
}

/* ============================================================
   INTERACTIVE CAROUSEL
   ============================================================ */
/* Carousel Section Header & Top-Right Nav Arrows */
.carousel-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 28px;
  gap: 20px;
}
.carousel-header-text {
  max-width: 680px;
}
.carousel-nav-arrows {
  display: flex;
  gap: 12px;
  align-items: center;
}
.carousel-arrow-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid var(--border);
  color: var(--emerald);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(27, 56, 40, 0.06);
  transition: all 0.25s ease;
}
.carousel-arrow-btn:hover {
  background: var(--emerald);
  color: var(--gold-lt);
  border-color: var(--emerald);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(27, 56, 40, 0.2);
}

.drag-carousel-wrapper { width: 100%; overflow-x: auto; cursor: grab; padding: 12px 0 24px; scrollbar-width: none; }
.drag-carousel-wrapper::-webkit-scrollbar { display: none; }
.drag-carousel-track { display: flex; gap: 28px; width: max-content; align-items: stretch; }
.carousel-slide-card {
  width: 350px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden;
  box-shadow: 0 4px 16px rgba(27, 56, 40, 0.04);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
  display: flex; flex-direction: column;
}
.carousel-slide-card:hover {
  transform: translateY(-4px);
  border-color: rgba(204, 163, 83, 0.5);
  box-shadow: 0 14px 32px -8px rgba(27, 56, 40, 0.09), 0 4px 10px -2px rgba(27, 56, 40, 0.03);
}
.slide-img-box { height: 230px; position: relative; overflow: hidden; flex-shrink: 0; }
.slide-img-box img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.slide-tag {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  background: #1B3828 !important;
  color: #FFFFFF !important;
  padding: 5px 14px !important;
  border-radius: 8px !important;
  font-family: var(--font-label) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  z-index: 3 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
.slide-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.slide-body h3 {
  font-size: 1.2rem;
  color: var(--emerald);
  margin-bottom: 10px;
  line-height: 1.35;
  min-height: 2.7em;
}
.slide-body p {
  font-size: 0.9rem;
  color: var(--text-mid);
  margin-bottom: 20px;
  flex-grow: 1;
  line-height: 1.55;
}
.slide-link {
  color: var(--emerald) !important;
  font-size: 11px;
  margin-top: auto;
  align-self: flex-start;
}
.slide-link:hover { color: var(--gold) !important; }

/* ============================================================
   PILLARS & INFRASTRUCTURE GRIDS
   ============================================================ */
.story-pillars-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 40px; }
.story-pillar-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 32px 28px; box-shadow: var(--shadow-sm);
}
.pillar-tamil { font-family: var(--font-tamil); font-size: 1.8rem; font-weight: 800; color: var(--emerald); margin-bottom: 8px; }
.story-pillar-card h4 { margin-bottom: 8px; color: var(--emerald); }
.story-pillar-card p { font-size: 0.9rem; color: var(--text-mid); }

/* ============================================================
   SERVICES LAYOUT & DETAILS
   ============================================================ */
.services-3d-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; margin-top: 40px; }
.service-box-luxury {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 36px 28px; position: relative;
}
.box-icon-wrap {
  width: 52px; height: 52px; background: var(--emerald); border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  color: #fff; margin-bottom: 20px;
}
.box-num { position: absolute; top: 18px; right: 24px; font-family: var(--font-head); font-size: 2rem; font-weight: 900; color: rgba(27,56,40,0.05); }

/* Detailed services.html card spacing */
.service-cat-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 44px; margin-bottom: 36px;
  box-shadow: var(--shadow-sm);
}
.service-cat-header { display: flex; gap: 20px; align-items: center; margin-bottom: 24px; }
.service-cat-card > p { margin-bottom: 24px; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.tag-pill {
  background: var(--bg-warm); border: 1px solid var(--border);
  color: var(--emerald-mid); padding: 6px 16px; border-radius: 30px;
  font-family: var(--font-label); font-size: 11px; font-weight: 700;
}
.combo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 24px; }
.combo-card { background: var(--bg-warm); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 20px; }
.combo-card h4 { font-size: 1.05rem; margin-bottom: 8px; }
.combo-card p { font-size: 0.85rem; }

/* ============================================================
   MENU AND CALCULATOR
   ============================================================ */
.menu-cat-block {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 44px; margin-bottom: 36px;
}
.menu-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; }
.menu-col h4 { font-size: 1.1rem; color: var(--emerald-mid); margin-bottom: 10px; }
.menu-col p { font-size: 0.92rem; line-height: 1.7; }

.calc-card-glass {
  background: var(--bg-card); border: 1.5px solid var(--gold);
  border-radius: var(--radius-lg); padding: 48px; box-shadow: var(--shadow-lg);
}
.calc-body-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; }
@media (max-width: 900px) { .calc-body-grid { grid-template-columns: 1fr; } }
.calc-group { margin-bottom: 24px; }
.calc-group label { display: block; margin-bottom: 12px; }
.radio-pill-group { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   MEDIA GALLERY & STORYBOARD
   ============================================================ */
.storyboard-block { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 44px; }
.storyboard-screen {
  background: linear-gradient(135deg, var(--emerald) 0%, #0D2016 100%);
  border-radius: var(--radius-md); padding: 48px; text-align: center;
  min-height: 240px; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 28px;
}
.storyboard-nav-timeline { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }

.gallery-masonry-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.masonry-item { position: relative; border-radius: var(--radius-md); overflow: hidden; height: 290px; box-shadow: var(--shadow-sm); }
.masonry-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.masonry-item:hover img { transform: scale(1.05); }

/* ============================================================
   CONTACT LAYOUTS
   ============================================================ */
.contact-two-col { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; }
@media (max-width: 900px) { .contact-two-col { grid-template-columns: 1fr; } }
.contact-info-card, .contact-form-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 44px; }

/* ============================================================
   PAGE HERO BANNER (INNER PAGES HERO)
   ============================================================ */
.page-hero-banner {
  padding: 90px 0 70px;
  background: var(--bg-soft-gold);
  text-align: center;
  border-bottom: 1px solid var(--border);
}

/* ============================================================
   FULL-STRETCH & MEDIA OVERLAYS
   ============================================================ */
.fullstretch-section {
  width: 100%; height: 80vh; min-height: 520px;
  position: relative; overflow: hidden;
  display: flex; align-items: center;
}
.fullstretch-section img.fs-bg,
.fullstretch-section video.fs-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.fullstretch-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: 
    linear-gradient(180deg, rgba(14, 32, 24, 0.2) 0%, rgba(14, 32, 24, 0.35) 50%, rgba(14, 32, 24, 0.75) 100%),
    linear-gradient(90deg, rgba(14, 32, 24, 0.55) 0%, rgba(14, 32, 24, 0.25) 50%, rgba(14, 32, 24, 0.05) 100%);
  pointer-events: none;
}
.fullstretch-content { position: relative; z-index: 2; width: 100%; padding: 40px 24px; max-width: 1200px; margin: 0 auto; }
.fullstretch-content .story-chapter-tag,
.fullstretch-content .section-gold-tag {
  margin-bottom: 24px !important;
}
.fullstretch-content h2 {
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  color: #FFFFFF !important;
  margin-bottom: 20px;
  line-height: 1.2;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.95);
}
.fullstretch-content h2 em {
  color: #E8C84D !important;
  font-style: italic;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.95);
}
.fullstretch-content p {
  color: rgba(255, 255, 255, 0.95) !important;
  max-width: 640px;
  font-size: 1.08rem;
  line-height: 1.75;
  margin-bottom: 36px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95);
}

/* ============================================================
   PREMIUM MODERN FOOTER
   ============================================================ */
.luxury-footer {
  background: #0E2018; /* Rich dark forest green */
  color: rgba(255, 255, 255, 0.7);
  padding: 80px 0 0;
  border-top: 1px solid rgba(192, 155, 42, 0.3);
}
.footer-grid {
  display: grid; grid-template-columns: 1.40fr 0.80fr 1.40fr;
  gap: 48px; padding-bottom: 60px;
}
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr; gap: 36px; padding-bottom: 40px; }
}
.footer-logo {
  font-family: var(--font-head); font-size: 24px;
  font-weight: 800; color: #F3EAD0;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
}
.footer-logo-img {
  width: 44px; height: 44px;
  object-fit: contain;
  border-radius: 50%;
  border: 1px solid var(--gold);
}
.footer-brand p { font-size: 0.92rem; line-height: 1.7; color: rgba(255, 255, 255, 0.75); }
.footer-links h4, .footer-seo h4 {
  font-family: var(--font-head); font-size: 1.1rem;
  color: var(--gold-lt); margin-bottom: 18px;
}
.footer-links ul { list-style: none; }
.footer-links ul li { margin-bottom: 10px; }
.footer-links ul li a { color: rgba(255, 255, 255, 0.8); font-size: 0.92rem; transition: color 0.25s; }
.footer-links ul li a:hover { color: var(--gold-lt); }
.footer-seo .keywords-list { font-size: 0.88rem; color: rgba(255, 255, 255, 0.5); line-height: 1.8; }
.footer-bottom {
  border-top: 1px solid rgba(192, 155, 42, 0.15);
  padding: 24px 0; font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5); text-align: center;
}

/* ============================================================
   RESPONSIVE DESIGN ADAPTATIONS
   ============================================================ */
@media (max-width: 1024px) {
  .nav-links { gap: 16px; }
  .nav-item { font-size: 11px; }
  .header-inner { padding: 12px 16px; }
  .footer-grid { grid-template-columns: 1.2fr 0.8fr 1.2fr; gap: 32px; }
}

@media (max-width: 850px) {
  .footer-grid { grid-template-columns: 1fr; gap: 36px; padding-bottom: 40px; }
}

@media (max-width: 768px) {
  .section-light, .section-light-warm, .section-soft-gold { padding: 80px 0; }
  .service-cat-card, .menu-cat-block, .storyboard-block, .contact-info-card, .contact-form-card, .calc-card-glass {
    padding: 32px 24px; margin-bottom: 24px;
  }
  .combo-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   JS CATERER — ADDITIONAL COMPONENT & INTERACTIVE STYLES
   ============================================================ */

/* ---------- CUSTOM CURSOR & CANVAS ---------- */
.cursor-dot {
  width: 8px;
  height: 8px;
  background: var(--gold);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s;
}
.cursor-ring {
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease-out;
}
#particleCanvas {
  display: none !important;
}
@media (max-width: 768px) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ---------- PREMIUM BUTTONS & CTAs ---------- */
.btn-primary-gold {
  background: var(--gold);
  color: #fff !important;
  padding: 12px 28px;
  border-radius: 30px;
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--gold);
  box-shadow: 0 4px 15px rgba(192, 155, 42, 0.2);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.btn-primary-gold:hover {
  background: var(--emerald);
  border-color: var(--emerald);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(27, 56, 40, 0.25);
}

.btn-glass-gold {
  background: rgba(192, 155, 42, 0.08);
  color: var(--gold) !important;
  padding: 12px 28px;
  border-radius: 30px;
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--gold);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.btn-glass-gold:hover {
  background: var(--gold);
  color: #fff !important;
  transform: translateY(-2px);
}

.btn-glass-dark {
  background: rgba(27, 56, 40, 0.05);
  color: var(--emerald) !important;
  padding: 12px 28px;
  border-radius: 30px;
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--emerald);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.btn-glass-dark:hover {
  background: var(--emerald);
  color: #fff !important;
  transform: translateY(-2px);
}

.btn-wa-emerald {
  background: #25D366;
  color: #fff !important;
  padding: 12px 28px;
  border-radius: 30px;
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid #25D366;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.2);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  cursor: pointer;
}
.btn-wa-emerald:hover {
  background: #1EB558;
  border-color: #1EB558;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(30, 181, 88, 0.3);
}

.floating-wa-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 56px;
  height: 56px;
  background: #25D366;
  color: #fff !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 4px 15px rgba(37,211,102,0.3);
  z-index: 999;
  transition: transform 0.3s, background-color 0.3s;
}
.floating-wa-btn:hover {
  transform: scale(1.1);
  background: #1EB558;
}

/* ---------- GENERAL TYPOGRAPHY & HEADER ---------- */
.page-hero-title {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--emerald);
  margin-top: 10px;
}
.page-hero-slogan {
  font-family: var(--font-tamil);
  color: var(--gold);
  font-weight: 600;
  margin-top: 10px;
  font-size: 1.1rem;
}
.section-title {
  margin-bottom: 12px;
}
.section-desc {
  max-width: 600px;
  margin: 0 auto;
  color: var(--text-mid);
}
.section-header-center {
  text-align: center;
  margin-bottom: 50px;
}
.lang-toggle-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  padding: 6px 16px;
  border-radius: 20px;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s;
}
.lang-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: #fff;
}
.phone-link {
  color: inherit;
  transition: color 0.25s;
}
.phone-link:hover {
  color: var(--gold-lt);
}

/* ---------- SIDE STORYBOARD NAV (HOMEPAGE) ---------- */
.side-story-nav {
  position: fixed;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 700;
}
.story-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(27, 56, 40, 0.3);
  position: relative;
  transition: all 0.3s;
}
.story-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px solid transparent;
  border-radius: 50%;
  transition: all 0.3s;
}
.story-dot.active {
  background: var(--gold);
}
.story-dot.active::after {
  border-color: var(--gold);
}
.story-dot .dot-label {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(27, 56, 40, 0.9);
  color: #fff !important;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 9px !important;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s;
  white-space: nowrap;
  pointer-events: none;
}
.story-dot:hover .dot-label {
  opacity: 1;
  visibility: visible;
  right: 24px;
}
@media (max-width: 1024px) {
  .side-story-nav { display: none; }
}

/* ---------- ABOUT PAGE ---------- */
.about-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.about-img-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  height: 480px;
}
.about-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-pillars-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 28px;
}
.pillar-mini {
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.pillar-mini .pillar-tamil {
  font-size: 1.4rem;
  margin-bottom: 4px;
}
.pillar-mini h4 {
  font-size: 1rem;
  margin-bottom: 4px;
  color: var(--emerald);
}
.pillar-mini p {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-mid);
}
@media (max-width: 900px) {
  .about-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .about-img-wrap {
    height: 320px;
  }
}
@media (max-width: 500px) {
  .about-pillars-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- CONTACT PAGE & CHAT SIMULATOR ---------- */
.modal-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.modal-form-grid .full-width {
  grid-column: span 2;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-group label {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-mid);
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
  transition: border-color 0.3s, background-color 0.3s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--bg-card);
}
.contact-detail-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 20px;
}
.contact-detail-row i {
  font-size: 18px;
  color: var(--gold);
  margin-top: 4px;
  width: 24px;
  text-align: center;
}
.contact-detail-row strong {
  font-family: var(--font-label);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-lt);
  display: block;
  margin-bottom: 2px;
}
.contact-detail-row p {
  color: var(--emerald-mid);
  font-size: 1rem;
  font-weight: 500;
}
.contact-tamil {
  font-family: var(--font-tamil);
  color: var(--gold);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 24px;
}
.wa-sim-card {
  background: #E5DDD5;
  border: 1px solid #c0c0c0;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  padding: 0 0 20px;
}
.wa-sim-header {
  background: #075E54;
  color: #fff !important;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
}
.chat-bubble {
  background: #fff;
  border-radius: 0 12px 12px 12px;
  padding: 14px;
  margin: 20px 20px 24px;
  font-size: 13px;
  color: #303030;
  line-height: 1.5;
  position: relative;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.chat-bubble::before {
  content: '';
  position: absolute;
  top: 0;
  left: -10px;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: #fff;
  border-right-color: #fff;
}
.wa-sim-card .btn-wa-emerald,
.wa-sim-card .btn-glass-dark {
  margin: 0 20px 10px;
  width: calc(100% - 40px);
}
@media (max-width: 600px) {
  .modal-form-grid {
    grid-template-columns: 1fr;
  }
  .modal-form-grid .full-width {
    grid-column: span 1;
  }
}

/* ---------- GALLERY STORYBOARD & OVERLAYS ---------- */
.storyboard-scene-title {
  font-family: var(--font-head);
  font-size: 1.8rem;
  color: var(--gold-lt);
  margin-top: 12px;
  margin-bottom: 8px;
}
.storyboard-voiceover {
  font-family: var(--font-tamil);
  color: rgba(255,255,255,0.75);
  font-size: 1.1rem;
  margin-bottom: 12px;
}
.storyboard-visual-desc {
  color: rgba(255,255,255,0.9);
  font-size: 0.95rem;
  max-width: 600px;
}
.scene-node {
  background: rgba(192, 155, 42, 0.1);
  border: 1px solid var(--border);
  color: var(--emerald-mid);
  padding: 8px 16px;
  border-radius: 20px;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s;
}
.scene-node:hover, .scene-node.active {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}
.item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(360deg, rgba(14,32,24,0.9) 0%, rgba(14,32,24,0.3) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}
.masonry-item:hover .item-overlay {
  opacity: 1;
}
.item-overlay h4 {
  color: var(--gold-lt);
  font-size: 1.25rem;
  margin-bottom: 4px;
  font-family: var(--font-head);
}
.item-overlay p {
  color: rgba(255,255,255,0.8) !important;
  font-size: 0.85rem;
}
.social-channels-bar {
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  text-align: center;
}
.social-channels-bar h3 {
  font-size: 1.5rem;
  color: var(--emerald);
  margin-bottom: 24px;
}
.social-btn-group {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.social-link {
  padding: 12px 24px;
  border-radius: 30px;
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s;
  box-shadow: var(--shadow-sm);
}
.social-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: #fff !important;
}
.social-link.insta { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.social-link.yt { background: #FF0000; }
.social-link.fb { background: #1877F2; }

/* ---------- MENU & PRICE CALCULATOR ---------- */
.menu-divider {
  height: 1px;
  background: var(--border);
  margin: 20px 0 28px;
}
.calc-controls {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.calc-input {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition: border-color 0.3s;
}
.calc-input:focus {
  border-color: var(--gold);
}
.radio-pill {
  background: var(--bg-warm);
  border: 1px solid var(--border);
  padding: 10px 20px;
  border-radius: 30px;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.radio-pill input {
  display: none;
}
.radio-pill:hover, .radio-pill.active {
  background: var(--gold);
  color: #fff !important;
  border-color: var(--gold);
}
.range-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  outline: none;
  margin-top: 10px;
}
.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  transition: transform 0.1s;
  border: 2px solid #fff;
  box-shadow: var(--shadow-sm);
}
.range-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}
.calc-summary-box {
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 32px;
}
.summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}
.summary-header h3 {
  font-size: 1.3rem;
  color: var(--emerald);
}
.sum-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
  font-size: 0.95rem;
}
.sum-row span {
  color: var(--text-mid);
}
.sum-row strong {
  color: var(--emerald);
  font-weight: 600;
}
.sum-row.highlight {
  background: rgba(192,155,42,0.08);
  border: 1px solid var(--border);
  padding: 14px;
  border-radius: var(--radius-sm);
  margin-top: 20px;
}
.sum-row.highlight span {
  color: var(--emerald);
  font-weight: 700;
}
.sum-row.highlight strong {
  color: var(--gold);
  font-size: 1.1rem;
  font-weight: 800;
}
.gold-count {
  color: var(--gold);
  font-weight: 800;
  font-size: 1.1rem;
}

/* ---------- SERVICE LOCAL CHIPS & COVERAGE ---------- */
.areas-grid-interactive {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 32px;
}
.area-chip {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 30px;
  padding: 8px 20px;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-mid);
  cursor: pointer;
  transition: all 0.25s;
  box-shadow: var(--shadow-sm);
}
.area-chip:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-1px);
}
.area-chip.active-hq {
  background: var(--emerald);
  border-color: var(--emerald);
  color: #fff !important;
}
.area-chip.active-hq i {
  color: var(--gold-lt);
}
.area-info-banner {
  background: rgba(27, 56, 40, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 24px;
  text-align: center;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 800px;
  margin: 24px auto 0;
}
.area-info-banner i {
  font-size: 18px;
  color: var(--gold);
  margin-right: 10px;
}

/* ============================================================
   GSAP & MODERN RESPONSIVE NAVIGATION OVERHAUL
   ============================================================ */

/* ---------- MOBILE HAMBURGER BUTTON ---------- */
.mobile-toggle-btn {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  width: 42px;
  height: 42px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  z-index: 950;
  border-radius: 8px;
  transition: background 0.25s;
}
.mobile-toggle-btn:hover {
  background: rgba(27, 56, 40, 0.05);
}
.mobile-toggle-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--emerald);
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s, width 0.25s;
}
.mobile-toggle-btn.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mobile-toggle-btn.is-active span:nth-child(2) {
  opacity: 0;
  transform: translateX(-10px);
}
.mobile-toggle-btn.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- MOBILE NAVIGATION DRAWER ---------- */
.mobile-nav-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  width: 85% !important;
  max-width: 380px !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: #FCFAF7 !important;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.3) !important;
  z-index: 100000 !important;
  transform: translateX(100%) !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, visibility 0.35s ease !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 24px 28px !important;
  overflow-y: auto !important;
  border-left: 1px solid var(--border) !important;
}
.mobile-nav-drawer.is-open {
  transform: translateX(0) !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.mobile-nav-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid var(--border) !important;
  background: #FCFAF7 !important;
}
.mobile-drawer-close {
  background: rgba(27, 56, 40, 0.06) !important;
  border: 1px solid var(--border) !important;
  color: var(--emerald) !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  font-size: 18px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}
.mobile-drawer-close:hover {
  background: var(--gold) !important;
  color: #fff !important;
  transform: rotate(90deg) !important;
}
.mobile-nav-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin: 28px 0 !important;
}
.mobile-nav-item {
  font-family: var(--font-label) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--emerald) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  transition: all 0.25s !important;
}
.mobile-nav-item i {
  color: var(--gold) !important;
  font-size: 16px !important;
  width: 20px !important;
  text-align: center !important;
}
.mobile-nav-item:hover, .mobile-nav-item.active {
  background: rgba(192, 155, 42, 0.12) !important;
  color: var(--gold) !important;
  transform: translateX(6px) !important;
}
.btn-gold-mobile {
  background: var(--emerald) !important;
  color: #fff !important;
  padding: 14px 20px !important;
  border-radius: 30px !important;
  font-family: var(--font-label) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-shadow: 0 6px 20px rgba(27,56,40,0.2) !important;
  margin-top: 8px !important;
}
.btn-gold-mobile i {
  color: var(--gold-lt) !important;
}
.mobile-drawer-footer {
  margin-top: auto !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--border) !important;
}
.mobile-drawer-contact p {
  font-size: 13px !important;
  color: var(--text-mid) !important;
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.mobile-nav-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: rgba(3, 15, 10, 0.65) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  z-index: 99999 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.35s ease !important;
}
.mobile-nav-backdrop.is-active {
  opacity: 1 !important;
  pointer-events: auto !important;
}
body.menu-open {
  overflow: hidden !important;
}
body.menu-open .site-header {
  pointer-events: none !important;
}
body.menu-open .mobile-menu-toggle {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ---------- GSAP HARDWARE ACCELERATION & HELPER CLASSES ---------- */
.gsap-reveal,
.gsap-stagger-item,
.gsap-scale-item,
.gsap-split-text {
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

/* Smooth Image Parallax Container */
.parallax-img-wrap {
  overflow: hidden;
  position: relative;
}
.parallax-img-wrap img {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ---------- RESPONSIVE BREAKPOINT ADAPTATIONS ---------- */
@media (max-width: 992px) {
  .nav-links { display: none !important; }
  .mobile-toggle-btn { display: flex !important; }
  .header-inner {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 16px !important;
  }
}

@media (max-width: 768px) {
  .top-bar { display: none !important; }
  
  .hero-main-title { font-size: clamp(2rem, 8vw, 3rem) !important; }
  .hero-sub-text { font-size: 0.95rem !important; }
  .side-story-nav { display: none !important; }
  
  .grid-2, .grid-3, .grid-4, .combo-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  .section-light, .section-light-warm, .section-soft-gold {
    padding: 60px 0 !important;
  }
  
  .container { padding: 16px !important; }
  
  button, a.btn-gold-nav, .area-chip, .radio-pill {
    min-height: 44px;
  }
}

@media (max-width: 600px) {
  .brand-motto-en, .brand-motto-ta { display: none !important; }
  .brand-name { font-size: 17px !important; }
  .brand-logo-img { width: 40px !important; height: 40px !important; }
  
  /* Single-line responsive badge scaling with circular icon bullet */
  .hero-pill-badge, .story-chapter-tag, .section-gold-tag, .card-tag, .slide-tag, .accent-label, .section-tag-pill {
    font-size: clamp(8.5px, 2.4vw, 10px) !important;
    padding: 4px 12px 4px 6px !important;
    letter-spacing: 0.08em !important;
    gap: 8px !important;
  }
  .story-chapter-tag > i, .section-gold-tag > i, .hero-pill-badge > i, .section-tag-pill > i {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    font-size: 9px !important;
  }
}

@media (max-width: 480px) {
  .hero-actions { flex-direction: column; width: 100%; gap: 12px; }
  .hero-actions a { width: 100%; text-align: center; justify-content: center; }
}





/* ================================================================
   100% PIXEL PERFECT DETAIL PAGE STYLES (.service-detail-page)
   ================================================================ */

.service-detail-body {
  background: #FAF8F2 !important;
}

.service-detail-page .breadcrumb-bar {
  background: #FAF8F2;
  padding: 14px 0;
  border-bottom: 1px solid rgba(170, 130, 10, 0.15);
}
.service-detail-page .breadcrumb-links {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-label);
  font-size: 0.8rem;
  color: var(--text-dark-muted);
}
.service-detail-page .breadcrumb-links a {
  color: var(--text-dark-muted);
  text-decoration: none;
  font-weight: 500;
}
.service-detail-page .breadcrumb-links a:hover {
  color: #AA820A;
}
.service-detail-page .breadcrumb-links i {
  font-size: 0.65rem;
  color: #AA820A;
}
.service-detail-page .breadcrumb-links .current {
  color: #AA820A;
  font-weight: 700;
}

/* Detail Hero Section */
.service-detail-page .detail-hero-section {
  padding: 42px 0 56px;
  background: #FAF8F2;
}
.service-detail-page .detail-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
}
.service-detail-page .detail-hero-text {
  display: flex;
  flex-direction: column;
}
.service-detail-page .hero-category-tag {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #AA820A;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.service-detail-page .detail-hero-title {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 800;
  color: #0E2018;
  line-height: 1.15;
  margin-bottom: 16px;
}
.service-detail-page .detail-hero-title em {
  font-style: italic;
  font-family: var(--font-head);
  color: #AA820A;
}
.service-detail-page .detail-hero-desc {
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: rgba(14, 32, 24, 0.75);
  line-height: 1.6;
  margin-bottom: 28px;
}

.service-detail-page .hero-value-badges-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.service-detail-page .value-badge-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-label);
  font-size: 0.82rem;
  font-weight: 700;
  color: #0E2018;
}
.service-detail-page .badge-icon-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #F3EAD0;
  color: #AA820A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  flex-shrink: 0;
}

.service-detail-page .hero-cta-buttons {
  display: flex;
  align-items: center;
  gap: 16px;
}
.service-detail-page .btn-hero-gold {
  background: #AA820A;
  color: #FFFFFF;
  font-family: var(--font-label);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 14px 28px;
  border-radius: 30px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(170, 130, 10, 0.3);
  transition: transform 0.2s ease, background 0.2s ease;
}
.service-detail-page .btn-hero-gold:hover {
  background: #8A6806;
  transform: translateY(-1px);
}
.service-detail-page .btn-hero-wa-outline {
  background: #FFFFFF;
  border: 1.5px solid #0E2018;
  color: #0E2018;
  font-family: var(--font-label);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 13px 28px;
  border-radius: 30px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.service-detail-page .btn-hero-wa-outline:hover {
  background: #0E2018;
  color: #FFFFFF;
}

.service-detail-page .detail-hero-media {
  display: flex;
  justify-content: center;
}
.service-detail-page .hero-image-frame {
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(14, 32, 24, 0.12);
}
.service-detail-page .hero-banner-img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
}

/* Ornamental Header */
.service-detail-page .ornamental-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 6px;
}
.service-detail-page .ornamental-header.inline-header {
  margin-bottom: 4px;
}
.service-detail-page .flourish-icon {
  color: #AA820A;
  font-size: 0.85rem;
}
.service-detail-page .ornamental-header h2 {
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  font-weight: 800;
  color: #0E2018;
  text-align: center;
}
.service-detail-page .section-subtitle {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--text-dark-muted);
  text-align: center;
  margin-bottom: 32px;
}

/* Occasions Carousel */
.service-detail-page .section-occasions {
  padding: 54px 0;
  background: #FFFFFF;
}
.service-detail-page .occasions-carousel-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
.service-detail-page .carousel-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(170, 130, 10, 0.3);
  background: #FFFFFF;
  color: #0E2018;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}
.service-detail-page .carousel-arrow:hover {
  background: #0E2018;
  color: #FFFFFF;
}
.service-detail-page .occasions-scroll-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 8px 4px 16px;
  scrollbar-width: none;
}
.service-detail-page .occasions-scroll-track::-webkit-scrollbar {
  display: none;
}
.service-detail-page .occ-card {
  min-width: 140px;
  width: 140px;
  background: #FFFFFF;
  border: 1px solid rgba(170, 130, 10, 0.2);
  border-radius: 14px;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.service-detail-page .occ-card.active,
.service-detail-page .occ-card:hover {
  transform: translateY(-3px);
  border-color: #AA820A;
}
.service-detail-page .occ-img-box {
  width: 100%;
  height: 95px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px;
}
.service-detail-page .occ-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-detail-page .occ-card h4 {
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 700;
  color: #0E2018;
  line-height: 1.25;
}
.service-detail-page .carousel-dots-indicator {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}
.service-detail-page .carousel-dots-indicator .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(170, 130, 10, 0.3);
  cursor: pointer;
}
.service-detail-page .carousel-dots-indicator .dot.active {
  width: 18px;
  border-radius: 8px;
  background: #AA820A;
}

/* Cuisine Switcher */
.service-detail-page .section-cuisine-switch {
  padding: 48px 0;
  background: #FAF8F2;
}
.service-detail-page .cuisine-toggle-stage {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 780px;
  margin: 0 auto;
}
.service-detail-page .cuisine-toggle-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #FFFFFF;
  border: 1.5px solid rgba(170, 130, 10, 0.25);
  border-radius: 14px;
  padding: 16px 20px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
}
.service-detail-page .cuisine-toggle-btn.active[data-type="Veg"] {
  background: #0E2018;
  border-color: #0E2018;
}
.service-detail-page .cuisine-toggle-btn.active[data-type="Veg"] .green-circle {
  background: #25D366;
  color: #FFFFFF;
}
.service-detail-page .cuisine-toggle-btn.active[data-type="Veg"] .btn-title {
  color: #FFFFFF;
}
.service-detail-page .cuisine-toggle-btn.active[data-type="Veg"] .btn-sub {
  color: #E8C84D;
}
.service-detail-page .cuisine-toggle-btn.active[data-type="NonVeg"] {
  background: #2B150A;
  border-color: #2B150A;
}
.service-detail-page .cuisine-toggle-btn.active[data-type="NonVeg"] .btn-title {
  color: #FFFFFF;
}
.service-detail-page .cuisine-toggle-btn.active[data-type="NonVeg"] .btn-sub {
  color: #E8C84D;
}
.service-detail-page .btn-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #F3EAD0;
  color: #0E2018;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.service-detail-page .btn-text-content {
  display: flex;
  flex-direction: column;
}
.service-detail-page .btn-title {
  font-family: var(--font-head);
  font-size: 0.98rem;
  font-weight: 800;
  color: #0E2018;
  letter-spacing: 0.04em;
}
.service-detail-page .btn-sub {
  font-family: var(--font-label);
  font-size: 0.75rem;
  color: var(--text-dark-muted);
}

/* Menu Display */
.service-detail-page .section-menu-display {
  padding: 48px 0 64px;
  background: #FFFFFF;
}
.service-detail-page .menu-display-header {
  text-align: center;
  margin-bottom: 28px;
}
.service-detail-page .menu-display-header h2 {
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  font-weight: 800;
  color: #0E2018;
  margin-bottom: 4px;
}
.service-detail-page .menu-display-header p {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--text-dark-muted);
}

/* Meal Tabs Wrapper */
.service-detail-page .meal-tabs-wrapper {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.service-detail-page .meal-tab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid rgba(170, 130, 10, 0.25);
  border-radius: 10px;
  padding: 10px 18px;
  font-family: var(--font-label);
  font-size: 0.82rem;
  font-weight: 700;
  color: #0E2018;
  cursor: pointer;
  transition: all 0.2s ease;
}
.service-detail-page .meal-tab-btn i {
  color: #AA820A;
}
.service-detail-page .meal-tab-btn.active,
.service-detail-page .meal-tab-btn:hover {
  background: #AA820A;
  border-color: #AA820A;
  color: #FFFFFF;
}
.service-detail-page .meal-tab-btn.active i,
.service-detail-page .meal-tab-btn:hover i {
  color: #FFFFFF;
}

/* Detailed Menu Display Card */
.service-detail-page .detailed-menu-card {
  background: #FAF8F2;
  border: 1.5px solid rgba(170, 130, 10, 0.3);
  border-radius: 20px;
  padding: 28px;
}
.service-detail-page .card-top-banner {
  text-align: center;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px dashed rgba(170, 130, 10, 0.3);
}
.service-detail-page .card-top-banner.nonveg p {
  color: #AA820A;
}
.service-detail-page .card-top-banner h3 {
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 800;
  color: #0E2018;
}
.service-detail-page .card-top-banner p {
  font-family: var(--font-label);
  font-size: 0.82rem;
  color: #AA820A;
  font-weight: 600;
  margin-top: 4px;
}

.service-detail-page .menu-columns-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 210px;
  gap: 16px;
  margin-bottom: 24px;
}
.service-detail-page .menu-column-box {
  background: #FFFFFF;
  border: 1px solid rgba(170, 130, 10, 0.15);
  border-radius: 14px;
  padding: 16px 14px;
  position: relative;
}
.service-detail-page .col-heading {
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 800;
  color: #0E2018;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.service-detail-page .item-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.service-detail-page .item-list li {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: rgba(14, 32, 24, 0.85);
  display: flex;
  align-items: center;
  gap: 6px;
}
.service-detail-page .item-list li i {
  font-size: 0.3rem;
  color: #AA820A;
}
.service-detail-page .col-illustration {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 1.2rem;
  color: rgba(170, 130, 10, 0.1);
  pointer-events: none;
}

.service-detail-page .menu-photo-column .photo-container {
  height: 100%;
  min-height: 220px;
  border-radius: 14px;
  overflow: hidden;
}
.service-detail-page .menu-photo-column img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-detail-page .card-footer-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--text-dark-muted);
}
.service-detail-page .card-footer-note i {
  color: #AA820A;
}

/* Customization & Special Menu Section */
.service-detail-page .section-customization {
  padding: 54px 0;
  background: #FAF8F2;
}
.service-detail-page .custom-stage-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 24px;
  align-items: center;
}
.service-detail-page .custom-pills-card {
  background: #FFFFFF;
  border: 1px solid rgba(170, 130, 10, 0.2);
  border-radius: 18px;
  padding: 24px;
}
.service-detail-page .custom-pills-card h3 {
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 800;
  color: #0E2018;
  margin-bottom: 18px;
}
.service-detail-page .pills-flex-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.service-detail-page .custom-pill-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FAF8F2;
  border: 1px solid rgba(170, 130, 10, 0.25);
  border-radius: 20px;
  padding: 6px 14px;
  font-family: var(--font-label);
  font-size: 0.78rem;
  font-weight: 700;
  color: #0E2018;
}
.service-detail-page .pill-icon-outline {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid #AA820A;
  color: #AA820A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
}

.service-detail-page .special-menu-card {
  background: #FFFFFF;
  border: 1.5px solid #AA820A;
  border-radius: 18px;
  padding: 24px;
  text-align: center;
}
.service-detail-page .special-card-inner h3 {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 800;
  color: #0E2018;
  margin-bottom: 6px;
}
.service-detail-page .special-card-inner p {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--text-dark-muted);
  margin-bottom: 16px;
}
.service-detail-page .btn-gold-special {
  background: #AA820A;
  color: #FFFFFF;
  font-family: var(--font-label);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 10px 20px;
  border-radius: 20px;
  text-decoration: none;
  display: inline-block;
}

/* Why Choose JS Caterer */
.service-detail-page .section-why-choose {
  padding: 54px 0;
  background: #FFFFFF;
}
.service-detail-page .why-choose-5grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 32px;
}
.service-detail-page .why-item-card {
  background: #FAF8F2;
  border: 1px solid rgba(170, 130, 10, 0.15);
  border-radius: 14px;
  padding: 18px 12px;
  text-align: center;
}
.service-detail-page .why-icon-badge {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #F3EAD0;
  color: #AA820A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  margin: 0 auto 10px;
}
.service-detail-page .why-item-card h4 {
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 800;
  color: #0E2018;
  margin-bottom: 4px;
}
.service-detail-page .why-item-card p {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--text-dark-muted);
  line-height: 1.35;
}

/* Plan Quote Dark Box */
.service-detail-page .section-plan-quote {
  padding: 54px 0 72px;
  background: #FAF8F2;
}
.service-detail-page .plan-quote-box-dark {
  background: #0E2018;
  border: 2px solid rgba(212, 175, 55, 0.4);
  border-radius: 24px;
  padding: 36px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 36px;
  align-items: center;
}
.service-detail-page .plan-copy-col {
  display: flex;
  flex-direction: column;
}
.service-detail-page .plan-title {
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.2;
  margin-bottom: 8px;
}
.service-detail-page .plan-title em {
  font-style: italic;
  color: #E8C84D;
}
.service-detail-page .plan-sub {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 20px;
}
.service-detail-page .plan-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 28px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.service-detail-page .plan-checklist li {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  gap: 8px;
}
.service-detail-page .plan-checklist li i {
  color: #25D366;
}
.service-detail-page .plan-mandapam-illustration {
  font-size: 3.5rem;
  color: rgba(232, 200, 77, 0.08);
}

.service-detail-page .plan-form-col {
  background: #FFFFFF;
  border-radius: 18px;
  padding: 28px;
}
.service-detail-page .plan-form-col h3 {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 800;
  color: #0E2018;
  margin-bottom: 16px;
}
.service-detail-page .quote-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.service-detail-page .form-field-wrap label {
  display: block;
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 700;
  color: #0E2018;
  margin-bottom: 4px;
}
.service-detail-page .form-input {
  width: 100%;
  background: #FAF8F2;
  border: 1px solid rgba(170, 130, 10, 0.25);
  border-radius: 8px;
  padding: 9px 12px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: #0E2018;
  outline: none;
}
.service-detail-page .select-wrap {
  position: relative;
}
.service-detail-page .select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem;
  color: #AA820A;
  pointer-events: none;
}
.service-detail-page .btn-submit-gold-wa {
  grid-column: 1 / -1;
  background: #AA820A;
  color: #FFFFFF;
  font-family: var(--font-label);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 12px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
}

/* ================================================================
   FOOTER & COMMON UI UTILITY CLASSES (FIX FOR BROKEN FOOTER & ICONS)
   ================================================================ */

.glow-icon {
  color: #AA820A !important;
}

/* Footer Grid & Columns */
.luxury-footer {
  background: #061D12;
  color: #FFFFFF;
  padding: 60px 0 0;
  border-top: 2px solid rgba(212, 175, 55, 0.3);
}

.footer-inner-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.1fr 1.3fr;
  gap: 40px;
  padding-bottom: 50px;
}

.footer-col-brand .brand-logo-group {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  margin-bottom: 16px;
}

.footer-desc {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
  margin-bottom: 20px;
}

.footer-social-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-social-row a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: #E8C84D;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.footer-social-row a:hover {
  background: #AA820A;
  color: #FFFFFF;
  transform: translateY(-2px);
}

.footer-col-links h4,
.footer-col-services h4,
.footer-col-contact h4 {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 800;
  color: #E8C84D;
  margin-bottom: 20px;
  letter-spacing: 0.04em;
}

.footer-col-links ul,
.footer-col-services ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col-links ul a,
.footer-col-services ul a {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.footer-col-links ul a:hover,
.footer-col-services ul a:hover {
  color: #E8C84D;
  padding-left: 4px;
}

.footer-col-contact p {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}

.footer-col-contact p a {
  color: #E8C84D;
  text-decoration: none;
  font-weight: 600;
}

.footer-bottom-bar {
  background: #04140C;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px 0;
}

.footer-bottom-bar p {
  font-family: var(--font-label);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  text-align: center;
}

/* Arrow & Icon Utilities */
.arrow-prev, .arrow-next {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(170, 130, 10, 0.3);
  background: #FFFFFF;
  color: #0E2018;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.light-circle {
  background: #F3EAD0 !important;
  color: #0E2018 !important;
}

@media (max-width: 992px) {
  .footer-inner-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

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

/* ================================================================
   100% DESIGN SYSTEM ALIGNED TYPOGRAPHY & DROPDOWNS (.service-detail-page)
   ================================================================ */

/* Global Body Font Alignment */
.service-detail-body {
  background: var(--cream) !important;
  font-family: var(--font-body) !important;
  color: var(--text-dark) !important;
  -webkit-font-smoothing: antialiased;
}

/* Breadcrumb Bar */
.service-detail-page .breadcrumb-bar {
  background: var(--sand-lt);
  padding: 14px 0;
  border-bottom: 1px solid rgba(197, 155, 39, 0.18);
}
.service-detail-page .breadcrumb-links {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-label);
  font-size: 0.82rem;
  color: var(--text-dark-muted);
}
.service-detail-page .breadcrumb-links a {
  color: var(--emerald);
  text-decoration: none;
  font-weight: 600;
}
.service-detail-page .breadcrumb-links a:hover {
  color: var(--gold-dark);
}
.service-detail-page .breadcrumb-links i {
  font-size: 0.65rem;
  color: var(--gold);
}
.service-detail-page .breadcrumb-links .current {
  color: var(--gold-dark);
  font-weight: 700;
}

/* Hero Section Typography & Spacing */
.service-detail-page .detail-hero-section {
  padding: 56px 0 64px;
  background: linear-gradient(180deg, var(--sand-lt) 0%, var(--cream) 100%);
}
.service-detail-page .detail-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}
.service-detail-page .hero-category-tag {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: var(--gold-dark);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.service-detail-page .detail-hero-title {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 800;
  color: var(--emerald-dark);
  line-height: 1.18;
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}
.service-detail-page .detail-hero-title em {
  font-style: italic;
  font-family: var(--font-head);
  color: var(--gold-dark);
}
.service-detail-page .detail-hero-desc {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-dark-muted);
  line-height: 1.65;
  margin-bottom: 30px;
}

/* 4 Value Badges Row */
.service-detail-page .hero-value-badges-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}
.service-detail-page .value-badge-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-label);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--emerald-dark);
}
.service-detail-page .badge-icon-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sand-lt);
  border: 1px solid rgba(197, 155, 39, 0.3);
  color: var(--gold-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  flex-shrink: 0;
}

/* Hero CTA Buttons */
.service-detail-page .hero-cta-buttons {
  display: flex;
  align-items: center;
  gap: 16px;
}
.service-detail-page .btn-hero-gold {
  background: linear-gradient(135deg, #D4AF37 0%, #AA820A 100%);
  color: #FFFFFF;
  font-family: var(--font-label);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 15px 32px;
  border-radius: 30px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(170, 130, 10, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.service-detail-page .btn-hero-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(170, 130, 10, 0.45);
}
.service-detail-page .btn-hero-wa-outline {
  background: transparent;
  border: 1.5px solid var(--emerald-dark);
  color: var(--emerald-dark);
  font-family: var(--font-label);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 14px 32px;
  border-radius: 30px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.service-detail-page .btn-hero-wa-outline:hover {
  background: var(--emerald-dark);
  color: #FFFFFF;
}

/* Form Dropdown Un-Collapse Fix */
.service-detail-page .select-wrap {
  position: relative;
  width: 100%;
  display: block;
}

.service-detail-page select.form-input {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  width: 100% !important;
  height: 46px !important;
  background-color: var(--cream) !important;
  border: 1.5px solid rgba(197, 155, 39, 0.35) !important;
  border-radius: 10px !important;
  padding: 0 38px 0 14px !important;
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  color: var(--emerald-dark) !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: none !important;
  line-height: 44px !important;
}

.service-detail-page select.form-input:focus {
  border-color: var(--gold-dark) !important;
  box-shadow: 0 0 0 3px rgba(197, 155, 39, 0.15) !important;
}

.service-detail-page .select-arrow {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 0.8rem !important;
  color: var(--gold-dark) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.service-detail-page select.form-input option {
  background: #FFFFFF !important;
  color: var(--emerald-dark) !important;
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  padding: 10px !important;
}

/* Text Input Alignment */
.service-detail-page input.form-input {
  width: 100% !important;
  height: 46px !important;
  background-color: var(--cream) !important;
  border: 1.5px solid rgba(197, 155, 39, 0.35) !important;
  border-radius: 10px !important;
  padding: 0 14px !important;
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  color: var(--emerald-dark) !important;
  outline: none !important;
}
.service-detail-page input.form-input:focus {
  border-color: var(--gold-dark) !important;
  box-shadow: 0 0 0 3px rgba(197, 155, 39, 0.15) !important;
}


/* ================================================================
   100% LUXURY SERVICES HUB STYLES (#services-hub-page)
   ================================================================ */

.services-hub-body {
  background: var(--cream) !important;
  font-family: var(--font-body) !important;
  color: var(--text-dark) !important;
  -webkit-font-smoothing: antialiased;
}

/* Services Hero Hub */
#services-hub-page .services-hero-hub {
  padding: 64px 0 48px;
  background: linear-gradient(180deg, var(--sand-lt) 0%, var(--cream) 100%);
  border-bottom: 1px solid rgba(197, 155, 39, 0.18);
  position: relative;
}

/* Quick Jump Navigation Bar */
#services-hub-page .quick-jump-nav-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 32px;
}

#services-hub-page .jump-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border: 1.5px solid rgba(197, 155, 39, 0.35);
  border-radius: 30px;
  padding: 10px 22px;
  font-family: var(--font-label);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--emerald-dark);
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(14, 32, 24, 0.05);
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#services-hub-page .jump-pill i {
  color: var(--gold-dark);
}

#services-hub-page .jump-pill:hover {
  background: var(--emerald-dark);
  border-color: var(--emerald-dark);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(14, 32, 24, 0.15);
}

#services-hub-page .jump-pill:hover i {
  color: #E8C84D;
}

/* Division Cards Section */
#services-hub-page .section-divisions-list {
  padding: 64px 0 80px;
  background: var(--cream);
}

#services-hub-page .catering-division-card {
  background: #FFFFFF;
  border: 1.5px solid rgba(197, 155, 39, 0.22);
  border-radius: 28px;
  padding: 36px;
  margin-bottom: 48px;
  box-shadow: 0 10px 30px rgba(14, 32, 24, 0.05);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

#services-hub-page .catering-division-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold-dark);
  box-shadow: 0 18px 42px rgba(197, 155, 39, 0.16);
}

#services-hub-page .division-card-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 40px;
  align-items: center;
}

#services-hub-page .division-card-grid.reverse {
  grid-template-columns: 1.05fr 0.95fr;
}

#services-hub-page .division-media-col {
  width: 100%;
}

#services-hub-page .division-content-col {
  display: flex;
  flex-direction: column;
}

#services-hub-page .division-image-wrap {
  position: relative;
  width: 100%;
  height: 340px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(14, 32, 24, 0.1);
}

#services-hub-page .division-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

#services-hub-page .catering-division-card:hover .division-image-wrap img {
  transform: scale(1.03);
}

#services-hub-page .division-badge-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(14, 32, 24, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #E8C84D;
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 7px 16px;
  border-radius: 20px;
  border: 1px solid rgba(232, 200, 77, 0.4);
}

#services-hub-page .division-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

#services-hub-page .division-icon-badge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sand-lt);
  border: 1.5px solid rgba(197, 155, 39, 0.35);
  color: var(--gold-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(197, 155, 39, 0.12);
}

#services-hub-page .division-sub-tag {
  display: block;
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--gold-dark);
  text-transform: uppercase;
}

#services-hub-page .division-header h3 {
  font-family: var(--font-head);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--emerald-dark);
  line-height: 1.2;
  margin-top: 2px;
}

#services-hub-page .division-content-col p {
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--text-dark-muted);
  line-height: 1.65;
  margin-bottom: 22px;
}

#services-hub-page .tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

#services-hub-page .tag-pill {
  background: var(--sand-lt);
  border: 1px solid rgba(197, 155, 39, 0.25);
  border-radius: 20px;
  padding: 6px 14px;
  font-family: var(--font-label);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--emerald-dark);
  transition: background 0.2s ease, color 0.2s ease;
}

#services-hub-page .tag-pill:hover {
  background: var(--emerald-dark);
  color: #FFFFFF;
}

#services-hub-page .division-action-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* 5 Pillars Guarantee Section */
#services-hub-page .section-catering-guarantee {
  padding: 64px 0;
  background: #FFFFFF;
  border-top: 1px solid rgba(197, 155, 39, 0.15);
  border-bottom: 1px solid rgba(197, 155, 39, 0.15);
}

#services-hub-page .guarantee-5grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-top: 36px;
}

#services-hub-page .guarantee-card {
  background: var(--cream);
  border: 1.5px solid rgba(197, 155, 39, 0.22);
  border-radius: 18px;
  padding: 24px 16px;
  text-align: center;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

#services-hub-page .guarantee-card:hover {
  transform: translateY(-5px);
  border-color: var(--gold-dark);
  box-shadow: 0 10px 24px rgba(197, 155, 39, 0.15);
}

#services-hub-page .guarantee-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--sand-lt);
  border: 1px solid rgba(197, 155, 39, 0.3);
  color: var(--gold-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin: 0 auto 14px;
}

#services-hub-page .guarantee-card h4 {
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--emerald-dark);
  margin-bottom: 6px;
}

#services-hub-page .guarantee-card p {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--text-dark-muted);
  line-height: 1.45;
}

@media (max-width: 992px) {
  #services-hub-page .division-card-grid,
  #services-hub-page .division-card-grid.reverse {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  #services-hub-page .guarantee-5grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  #services-hub-page .guarantee-5grid {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   SHARED FORM & SERVICES HERO FIX (APPLIES TO ALL PAGES)
   ================================================================ */

/* Shared Dark Quote Console Box */
.section-plan-quote {
  padding: 64px 0 80px;
  background: var(--sand-lt);
}

.plan-quote-box-dark {
  background: #0E2018 !important;
  border: 2px solid rgba(212, 175, 55, 0.4) !important;
  border-radius: 28px !important;
  padding: 42px !important;
  display: grid !important;
  grid-template-columns: 1fr 1.15fr !important;
  gap: 40px !important;
  align-items: center !important;
  box-shadow: 0 16px 48px rgba(14, 32, 24, 0.25) !important;
}

.plan-copy-col {
  display: flex !important;
  flex-direction: column !important;
}

.plan-title {
  font-family: var(--font-head) !important;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem) !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  line-height: 1.2 !important;
  margin-bottom: 10px !important;
}

.plan-title em {
  font-style: italic !important;
  color: #E8C84D !important;
}

.plan-sub {
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  color: rgba(255, 255, 255, 0.8) !important;
  margin-bottom: 24px !important;
}

.plan-checklist {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 28px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.plan-checklist li {
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  color: rgba(255, 255, 255, 0.92) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.plan-checklist li i {
  color: #25D366 !important;
  font-size: 1rem !important;
}

.plan-mandapam-illustration {
  font-size: 3.5rem !important;
  color: rgba(232, 200, 77, 0.12) !important;
}

/* White Form Container on Right */
.plan-form-col {
  background: #FFFFFF !important;
  border-radius: 20px !important;
  padding: 32px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}

.plan-form-col h3 {
  font-family: var(--font-head) !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
  margin-bottom: 20px !important;
}

/* 2-Column Form Grid */
.quote-form-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
}

.form-field-wrap {
  display: flex !important;
  flex-direction: column !important;
}

.form-field-wrap label {
  display: block !important;
  font-family: var(--font-label) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #0E2018 !important;
  margin-bottom: 6px !important;
}

.form-input {
  width: 100% !important;
  height: 46px !important;
  background-color: #FAF8F2 !important;
  border: 1.5px solid rgba(170, 130, 10, 0.3) !important;
  border-radius: 10px !important;
  padding: 0 14px !important;
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  color: #0E2018 !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.form-input:focus {
  border-color: #AA820A !important;
  box-shadow: 0 0 0 3px rgba(170, 130, 10, 0.15) !important;
}

.select-wrap {
  position: relative !important;
  width: 100% !important;
  display: block !important;
}

select.form-input {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  padding-right: 38px !important;
  cursor: pointer !important;
  line-height: 44px !important;
}

.select-arrow {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 0.8rem !important;
  color: #AA820A !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* Services Hero Section Alignment */
#services-hub-page .services-hero-hub {
  padding: 60px 0 44px !important;
  background: linear-gradient(180deg, var(--sand-lt) 0%, var(--cream) 100%) !important;
  text-align: center !important;
  border-bottom: 1px solid rgba(197, 155, 39, 0.18) !important;
}

#services-hub-page .services-hero-hub .section-title {
  text-align: center !important;
  margin: 12px auto 16px !important;
}

#services-hub-page .services-hero-hub .section-desc {
  text-align: center !important;
  margin: 0 auto 28px !important;
}

@media (max-width: 992px) {
  .plan-quote-box-dark {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 28px !important;
  }
  .quote-form-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================================
   100% GLOBAL BREADCRUMB & HERO FIX (UN-SCOPED FOR ALL PAGES)
   ================================================================ */

.breadcrumb-bar {
  background: var(--sand-lt) !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid rgba(197, 155, 39, 0.18) !important;
  display: block !important;
  width: 100% !important;
}

.breadcrumb-links {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: var(--font-label) !important;
  font-size: 0.85rem !important;
  color: var(--text-dark-muted) !important;
}

.breadcrumb-links a {
  color: var(--emerald-dark) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

.breadcrumb-links a:hover {
  color: var(--gold-dark) !important;
}

.breadcrumb-links i {
  font-size: 0.65rem !important;
  color: var(--gold-dark) !important;
}

.breadcrumb-links .current {
  color: var(--gold-dark) !important;
  font-weight: 700 !important;
}

/* Services Hero Hub - Explicit Styling */
.services-hero-hub {
  display: block !important;
  width: 100% !important;
  padding: 54px 0 48px !important;
  background: linear-gradient(180deg, var(--sand-lt) 0%, var(--cream) 100%) !important;
  text-align: center !important;
  border-bottom: 1px solid rgba(197, 155, 39, 0.18) !important;
  box-sizing: border-box !important;
}

.services-hero-hub .container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.services-hero-hub .story-chapter-tag {
  display: inline-flex !important;
  margin-bottom: 14px !important;
}

.services-hero-hub .section-title {
  font-family: var(--font-head) !important;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem) !important;
  font-weight: 800 !important;
  color: var(--emerald-dark) !important;
  text-align: center !important;
  margin: 0 0 16px 0 !important;
  line-height: 1.18 !important;
}

.services-hero-hub .section-title em {
  font-style: italic !important;
  color: var(--gold-dark) !important;
}

.services-hero-hub .section-desc {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  color: var(--text-dark-muted) !important;
  text-align: center !important;
  max-width: 680px !important;
  margin: 0 auto 28px !important;
  line-height: 1.65 !important;
}

/* Quick Jump Pill Navigation Bar */
.quick-jump-nav-bar {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-top: 16px !important;
}

.jump-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #FFFFFF !important;
  border: 1.5px solid rgba(197, 155, 39, 0.35) !important;
  border-radius: 30px !important;
  padding: 10px 22px !important;
  font-family: var(--font-label) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: var(--emerald-dark) !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(14, 32, 24, 0.05) !important;
  transition: all 0.2s ease !important;
}

.jump-pill i {
  color: var(--gold-dark) !important;
}

.jump-pill:hover {
  background: var(--emerald-dark) !important;
  border-color: var(--emerald-dark) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(14, 32, 24, 0.15) !important;
}

.jump-pill:hover i {
  color: #E8C84D !important;
}

/* ================================================================
   CATERING-THEMED GSAP-STYLE SCROLL & ANIMATION ENGINE
   ================================================================ */

/* Scroll Progress Bar at Top */
#siteScrollProgressBar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3.5px;
  background: linear-gradient(90deg, #D4AF37 0%, #E8C84D 50%, #AA820A 100%);
  width: 0%;
  z-index: 9999;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.8);
  transition: width 0.1s linear;
}

/* Scroll-Driven Reveal Class */
.scroll-reveal {
  opacity: 0;
  transform: translateY(36px) scale(0.98);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

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

/* Floating Culinary Spice Particles */
.floating-spice-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.spice-particle {
  position: absolute;
  color: rgba(197, 155, 39, 0.18);
  font-size: 1.4rem;
  animation: floatSpice 8s ease-in-out infinite alternate;
}

.spice-particle:nth-child(1) { top: 15%; left: 8%; animation-delay: 0s; font-size: 1.8rem; }
.spice-particle:nth-child(2) { top: 45%; right: 6%; animation-delay: 2s; font-size: 1.5rem; }
.spice-particle:nth-child(3) { bottom: 20%; left: 12%; animation-delay: 4s; font-size: 1.6rem; }
.spice-particle:nth-child(4) { top: 75%; right: 14%; animation-delay: 1s; font-size: 1.3rem; }

@keyframes floatSpice {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(12deg); }
  100% { transform: translateY(6px) rotate(-8deg); }
}

/* Steam Wisp & Fire Glow Effect for Kitchen Cards */
.steam-glow-wrap {
  position: relative;
  overflow: hidden;
}

.steam-glow-wrap::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(232, 200, 77, 0.12) 0%, transparent 65%);
  animation: rotateGlow 12s linear infinite;
  pointer-events: none;
}

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

/* 3D Magnetic Interactive Buttons */
.magnetic-btn {
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s ease !important;
}

.magnetic-btn:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 10px 28px rgba(170, 130, 10, 0.4) !important;
}

/* ================================================================
   LUXURY SOFT & WARM BG THEME + CRISP JUMP PILL HOVER FIX
   ================================================================ */

/* Site-wide Soft Warm Luxury Background */
body, .service-detail-body, .services-hub-body {
  background-color: #FAF8F2 !important;
  color: #0E2018 !important;
}

#services-hub-page, .service-detail-page {
  background-color: #FAF8F2 !important;
}

/* Fix Jump Pill Hover Invisible Text */
.quick-jump-nav-bar .jump-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #FFFFFF !important;
  border: 1.5px solid rgba(197, 155, 39, 0.4) !important;
  border-radius: 30px !important;
  padding: 11px 24px !important;
  font-family: var(--font-label) !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(14, 32, 24, 0.06) !important;
  transition: all 0.25s ease !important;
}

.quick-jump-nav-bar .jump-pill i {
  color: #AA820A !important;
  font-size: 0.95rem !important;
  transition: color 0.25s ease !important;
}

.quick-jump-nav-bar .jump-pill:hover {
  background: linear-gradient(135deg, #0E2018 0%, #163628 100%) !important;
  border-color: #AA820A !important;
  color: #FFFFFF !important;
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 10px 24px rgba(14, 32, 24, 0.25) !important;
}

.quick-jump-nav-bar .jump-pill:hover i {
  color: #E8C84D !important;
}

/* Ensure any internal spans also turn white on hover */
.quick-jump-nav-bar .jump-pill:hover * {
  color: #FFFFFF !important;
}

.quick-jump-nav-bar .jump-pill:hover i {
  color: #E8C84D !important;
}

/* Soft Warm Hero Hub Styling */
#services-hub-page .services-hero-hub {
  background: linear-gradient(180deg, #F3EAD0 0%, #FAF8F2 100%) !important;
  padding: 64px 0 52px !important;
}

/* Catering Division Card Warm Background */
#services-hub-page .catering-division-card {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(197, 155, 39, 0.3) !important;
  box-shadow: 0 12px 32px rgba(14, 32, 24, 0.06) !important;
}

/* ================================================================
   100% EQUAL HEIGHT CARDS & CRISP TAG PILL HOVER FIX
   ================================================================ */

/* Equal Height Grid Alignment */
#services-hub-page .division-card-grid,
#services-hub-page .division-card-grid.reverse {
  display: grid !important;
  grid-template-columns: 0.95fr 1.05fr !important;
  gap: 40px !important;
  align-items: stretch !important;
}

#services-hub-page .division-card-grid.reverse {
  grid-template-columns: 1.05fr 0.95fr !important;
}

#services-hub-page .division-media-col {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

#services-hub-page .division-image-wrap {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  flex: 1 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(14, 32, 24, 0.1) !important;
}

#services-hub-page .division-image-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Crisp Tag Pill Hover Text Fix */
#services-hub-page .tag-pill {
  background: var(--sand-lt) !important;
  border: 1.5px solid rgba(197, 155, 39, 0.3) !important;
  border-radius: 20px !important;
  padding: 7px 16px !important;
  font-family: var(--font-label) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: #0E2018 !important;
  transition: all 0.2s ease !important;
}

#services-hub-page .tag-pill:hover {
  background: #AA820A !important;
  border-color: #AA820A !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(170, 130, 10, 0.3) !important;
}

#services-hub-page .tag-pill:hover * {
  color: #FFFFFF !important;
}

@media (max-width: 992px) {
  #services-hub-page .division-card-grid,
  #services-hub-page .division-card-grid.reverse {
    grid-template-columns: 1fr !important;
  }
  #services-hub-page .division-image-wrap {
    height: 320px !important;
    min-height: 320px !important;
  }
}

/* ================================================================
   5 ROYAL CULINARY SEALS UI/UX (#services-hub-page)
   ================================================================ */

.royal-seals-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 18px !important;
  margin-top: 40px !important;
  position: relative !important;
}

.seal-pillar-card {
  position: relative !important;
  background: #FFFFFF !important;
  border-top: 4px solid #AA820A !important;
  border-left: 1.5px solid rgba(197, 155, 39, 0.25) !important;
  border-right: 1.5px solid rgba(197, 155, 39, 0.25) !important;
  border-bottom: 1.5px solid rgba(197, 155, 39, 0.25) !important;
  border-radius: 20px !important;
  padding: 32px 18px 24px !important;
  text-align: center !important;
  box-shadow: 0 8px 24px rgba(14, 32, 24, 0.05) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.seal-pillar-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: #AA820A !important;
  box-shadow: 0 16px 36px rgba(170, 130, 10, 0.22) !important;
}

.seal-number-badge {
  position: absolute !important;
  top: -12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: #0E2018 !important;
  color: #E8C84D !important;
  font-family: var(--font-label) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  padding: 3px 12px !important;
  border-radius: 14px !important;
  border: 1.5px solid #AA820A !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) !important;
}

.seal-icon-wrap {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #F3EAD0 0%, #FAF8F2 100%) !important;
  border: 1.5px solid rgba(197, 155, 39, 0.4) !important;
  color: #AA820A !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.35rem !important;
  margin: 8px auto 14px !important;
  box-shadow: inset 0 2px 6px rgba(197, 155, 39, 0.15) !important;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease !important;
}

.seal-pillar-card:hover .seal-icon-wrap {
  background: #AA820A !important;
  color: #FFFFFF !important;
  transform: scale(1.1) rotate(6deg) !important;
}

.seal-pillar-card h4 {
  font-family: var(--font-head) !important;
  font-size: 0.98rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
  line-height: 1.25 !important;
  margin-bottom: 8px !important;
}

.seal-pillar-card p {
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  color: var(--text-dark-muted) !important;
  line-height: 1.45 !important;
  margin-bottom: 12px !important;
}

.seal-verified-stamp {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--font-label) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #AA820A !important;
  letter-spacing: 0.06em !important;
  background: rgba(197, 155, 39, 0.1) !important;
  border: 1px solid rgba(197, 155, 39, 0.3) !important;
  padding: 4px 10px !important;
  border-radius: 12px !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.seal-pillar-card:hover .seal-verified-stamp {
  background: #0E2018 !important;
  color: #E8C84D !important;
  border-color: #AA820A !important;
}

@media (max-width: 992px) {
  .royal-seals-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .royal-seals-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================================
   INLINE SELF-FITTING PILL BADGE FIX (.plan-copy-col .story-chapter-tag)
   ================================================================ */

.plan-copy-col .story-chapter-tag {
  display: inline-flex !important;
  align-self: flex-start !important;
  width: auto !important;
  max-width: max-content !important;
  padding: 6px 16px !important;
  border-radius: 30px !important;
  margin-bottom: 16px !important;
  box-sizing: border-box !important;
}

/* ================================================================
   EQUAL HEIGHT & DARK GREEN FRAMED BOOKING CONSOLE (.plan-quote-box-dark)
   ================================================================ */

.plan-quote-box-dark {
  background: #0E2018 !important;
  border: 2px solid rgba(212, 175, 55, 0.4) !important;
  border-radius: 28px !important;
  padding: 40px !important;
  display: grid !important;
  grid-template-columns: 1fr 1.15fr !important;
  gap: 36px !important;
  align-items: stretch !important;
  box-shadow: 0 16px 48px rgba(14, 32, 24, 0.25) !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.plan-copy-col {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  height: 100% !important;
}

.plan-form-col {
  background: #FFFFFF !important;
  border-radius: 20px !important;
  padding: 28px 26px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18) !important;
  height: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.plan-copy-col .story-chapter-tag {
  display: inline-flex !important;
  align-self: flex-start !important;
  width: auto !important;
  max-width: max-content !important;
  padding: 6px 16px !important;
  border-radius: 30px !important;
  margin-bottom: 16px !important;
  box-sizing: border-box !important;
  background: rgba(232, 200, 77, 0.15) !important;
  color: #E8C84D !important;
  border: 1px solid rgba(232, 200, 77, 0.35) !important;
}

@media (max-width: 992px) {
  .plan-quote-box-dark {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 24px !important;
  }
}

/* ================================================================
   10PX SLIM DARK GREEN MARGIN FRAME FOR BOOKING FORM BOX
   ================================================================ */

.plan-quote-box-dark {
  background: #0E2018 !important;
  border: 2px solid rgba(212, 175, 55, 0.4) !important;
  border-radius: 24px !important;
  padding: 10px !important;
  display: grid !important;
  grid-template-columns: 1fr 1.15fr !important;
  gap: 20px !important;
  align-items: stretch !important;
  box-shadow: 0 16px 48px rgba(14, 32, 24, 0.25) !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.plan-copy-col {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  height: 100% !important;
  padding: 24px 28px !important;
}

.plan-form-col {
  background: #FFFFFF !important;
  border-radius: 18px !important;
  padding: 24px 24px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18) !important;
  height: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

@media (max-width: 992px) {
  .plan-quote-box-dark {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 10px !important;
  }
}

/* ================================================================
   WORLD-CLASS LUXURY CATERING FOOTER STYLES
   ================================================================ */

.luxury-footer {
  background: #061D12 !important;
  color: #FFFFFF !important;
  padding: 64px 0 0 !important;
  border-top: 3px solid #D4AF37 !important;
  position: relative !important;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3) !important;
}

.footer-inner-grid {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1.1fr 1.3fr !important;
  gap: 40px !important;
  padding-bottom: 54px !important;
}

/* Brand Column */
.footer-col-brand .brand-logo-group {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
  margin-bottom: 18px !important;
}

.footer-col-brand .brand-name {
  color: #FFFFFF !important;
  font-family: var(--font-head) !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
}

.footer-col-brand .brand-motto-en {
  color: #E8C84D !important;
  font-family: var(--font-label) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
}

.footer-desc {
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  color: rgba(255, 255, 255, 0.88) !important;
  line-height: 1.65 !important;
  margin-bottom: 22px !important;
}

/* Catering Live Kitchen GIF Badge */
.footer-catering-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(212, 175, 55, 0.12) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  border-radius: 20px !important;
  padding: 6px 14px !important;
  margin-bottom: 22px !important;
}

.footer-catering-badge i {
  color: #E8C84D !important;
  font-size: 0.9rem !important;
  animation: pulseFire 1.5s infinite alternate !important;
}

@keyframes pulseFire {
  0% { transform: scale(1); color: #E8C84D; }
  100% { transform: scale(1.2); color: #FF4500; }
}

.footer-catering-badge span {
  font-family: var(--font-label) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  letter-spacing: 0.04em !important;
}

.footer-social-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.footer-social-row a {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.35) !important;
  color: #E8C84D !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.95rem !important;
  text-decoration: none !important;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease !important;
}

.footer-social-row a:hover {
  background: #D4AF37 !important;
  color: #061D12 !important;
  transform: translateY(-3px) !important;
}

/* Headings in Footer */
.footer-col-links h4,
.footer-col-services h4,
.footer-col-contact h4 {
  font-family: var(--font-head) !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #E8C84D !important;
  margin-bottom: 20px !important;
  letter-spacing: 0.04em !important;
  position: relative !important;
  padding-bottom: 8px !important;
}

.footer-col-links h4::after,
.footer-col-services h4::after,
.footer-col-contact h4::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 32px !important;
  height: 2.5px !important;
  background: #D4AF37 !important;
  border-radius: 2px !important;
}

.footer-col-links ul,
.footer-col-services ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.footer-col-links ul a,
.footer-col-services ul a {
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none !important;
  transition: color 0.25s ease, transform 0.25s ease !important;
  display: inline-block !important;
}

.footer-col-links ul a:hover,
.footer-col-services ul a:hover {
  color: #E8C84D !important;
  transform: translateX(4px) !important;
}

/* Contact Column */
.footer-col-contact p {
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  color: rgba(255, 255, 255, 0.9) !important;
  margin-bottom: 14px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  line-height: 1.55 !important;
}

.footer-col-contact p i {
  color: #E8C84D !important;
  font-size: 0.95rem !important;
  margin-top: 3px !important;
}

.footer-col-contact p a {
  color: #E8C84D !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

.btn-footer-gold-wa {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  background: linear-gradient(135deg, #D4AF37 0%, #AA820A 100%) !important;
  color: #FFFFFF !important;
  font-family: var(--font-label) !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  padding: 12px 20px !important;
  border-radius: 30px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(170, 130, 10, 0.3) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  margin-top: 10px !important;
}

.btn-footer-gold-wa:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(170, 130, 10, 0.45) !important;
  color: #FFFFFF !important;
}

.footer-bottom-bar {
  background: #04140C !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 18px 0 !important;
}

.footer-bottom-bar p {
  font-family: var(--font-label) !important;
  font-size: 0.82rem !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin: 0 !important;
  text-align: center !important;
}

@media (max-width: 992px) {
  .footer-inner-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 36px !important;
  }
}

@media (max-width: 640px) {
  .footer-inner-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================================
   SLEEK SINGLE-LINE LUXURY FOOTER CATERING BADGE
   ================================================================ */

.footer-catering-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  max-width: max-content !important;
  white-space: nowrap !important;
  background: rgba(212, 175, 55, 0.1) !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 20px !important;
  padding: 5px 14px !important;
  margin-bottom: 18px !important;
  box-sizing: border-box !important;
}

.footer-catering-badge i {
  color: #E8C84D !important;
  font-size: 0.85rem !important;
  animation: none !important;
}

.footer-catering-badge span {
  font-family: var(--font-label) !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  letter-spacing: 0.03em !important;
  white-space: nowrap !important;
}

/* ================================================================
   INNOVATIVE ULTRA-LUXURY FOOTER BACKGROUND & TEXTURE
   ================================================================ */

.luxury-footer {
  position: relative !important;
  background: #061D12 !important;
  background-image: 
    radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.15) 0%, rgba(6, 29, 18, 0.98) 75%),
    radial-gradient(circle at 10% 90%, rgba(14, 50, 32, 0.8) 0%, transparent 50%),
    radial-gradient(circle at 90% 90%, rgba(14, 50, 32, 0.8) 0%, transparent 50%) !important;
  color: #FFFFFF !important;
  padding: 64px 0 0 !important;
  border-top: 3px solid !important;
  border-image: linear-gradient(90deg, transparent 0%, #D4AF37 25%, #E8C84D 50%, #D4AF37 75%, transparent 100%) 1 !important;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.4) !important;
  overflow: hidden !important;
}

/* Subtle Golden Watermark Overlay Background */
.luxury-footer::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image: radial-gradient(rgba(212, 175, 55, 0.12) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
  opacity: 0.4 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.luxury-footer .container {
  position: relative !important;
  z-index: 1 !important;
}

/* ================================================================
   100% IMPECCABLE RESPONSIVE SUITE FOR SERVICES.HTML & SITE-WIDE
   ================================================================ */

@media (max-width: 1024px) {
  #services-hub-page .catering-division-card {
    padding: 24px !important;
    margin-bottom: 32px !important;
  }
  #services-hub-page .division-header h3 {
    font-size: 1.45rem !important;
  }
}

@media (max-width: 992px) {
  /* Division Cards Grid Stack */
  #services-hub-page .division-card-grid,
  #services-hub-page .division-card-grid.reverse {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  #services-hub-page .division-image-wrap {
    height: 260px !important;
    min-height: 260px !important;
    border-radius: 16px !important;
  }

  /* Royal Seals Grid Stack */
  .royal-seals-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  /* Dark Booking Console Stack */
  .plan-quote-box-dark {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 10px !important;
    border-radius: 20px !important;
  }
  .plan-copy-col {
    padding: 16px 14px !important;
  }
  .plan-form-col {
    padding: 20px 16px !important;
    border-radius: 16px !important;
  }

  /* Footer 2-Column Grid */
  .footer-inner-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 36px !important;
  }
}

@media (max-width: 640px) {
  /* Hero Hub Responsive Padding */
  #services-hub-page .services-hero-hub {
    padding: 42px 14px 36px !important;
  }
  #services-hub-page .services-hero-hub .section-title {
    font-size: 1.95rem !important;
    margin-bottom: 12px !important;
  }
  #services-hub-page .services-hero-hub .section-desc {
    font-size: 0.9rem !important;
    margin-bottom: 20px !important;
  }

  /* Quick Jump Pills Stack */
  #services-hub-page .quick-jump-nav-bar {
    gap: 8px !important;
  }
  #services-hub-page .jump-pill {
    padding: 7px 14px !important;
    font-size: 0.78rem !important;
    width: auto !important;
  }

  /* Division Cards Mobile Refinements */
  #services-hub-page .catering-division-card {
    padding: 18px 14px !important;
    border-radius: 18px !important;
  }
  #services-hub-page .division-image-wrap {
    height: 210px !important;
    min-height: 210px !important;
  }
  #services-hub-page .division-header h3 {
    font-size: 1.3rem !important;
  }
  #services-hub-page .division-content-col p {
    font-size: 0.88rem !important;
    margin-bottom: 16px !important;
  }
  #services-hub-page .tag-cloud {
    gap: 6px !important;
    margin-bottom: 20px !important;
  }
  #services-hub-page .tag-pill {
    font-size: 0.72rem !important;
    padding: 4px 10px !important;
  }
  #services-hub-page .division-action-row .btn-primary-gold {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 13px !important;
  }

  /* Royal Seals Single Column Stack */
  .royal-seals-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Booking Form 1-Column Grid */
  .quote-form-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Footer Mobile Alignment */
  .footer-inner-grid {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 32px !important;
  }
  .footer-col-brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .footer-social-row {
    justify-content: center !important;
  }
  .footer-col-links h4::after,
  .footer-col-services h4::after,
  .footer-col-contact h4::after {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  .footer-col-contact p {
    justify-content: center !important;
  }
}

/* ================================================================
   100% SINGLE-LINE RESPONSIVE BUTTON FIX (.btn-primary-gold)
   ================================================================ */

.btn-primary-gold, .btn-glass-gold, .btn-hero-gold {
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

@media (max-width: 640px) {
  .btn-primary-gold, .btn-glass-gold, .btn-hero-gold {
    font-size: 0.78rem !important;
    padding: 10px 16px !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 400px) {
  .btn-primary-gold, .btn-glass-gold, .btn-hero-gold {
    font-size: 0.72rem !important;
    padding: 9px 12px !important;
  }
}

/* ================================================================
   STICKY HEADER JUMP SCROLL OFFSET FIX (scroll-margin-top)
   ================================================================ */

#services-hub-page .catering-division-card,
#services-hub-page section[id],
#services-hub-page div[id] {
  scroll-margin-top: 140px !important;
}

html {
  scroll-behavior: smooth !important;
}

/* ================================================================
   DISTINCT RESPONSIVE SPACING & SECTION SEPARATION FOR FOOTER
   ================================================================ */

.luxury-footer {
  padding: 72px 0 0 !important;
}

.footer-inner-grid {
  display: grid !important;
  grid-template-columns: 1.45fr 1fr 1.15fr 1.3fr !important;
  gap: 52px !important;
  padding-bottom: 64px !important;
}

/* Tablet Spacing Refinement */
@media (max-width: 992px) {
  .luxury-footer {
    padding: 56px 0 0 !important;
  }
  .footer-inner-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 48px 40px !important;
    padding-bottom: 52px !important;
  }
}

/* Mobile Distinct Section Separators & Spacing */
@media (max-width: 640px) {
  .luxury-footer {
    padding: 48px 0 0 !important;
  }
  .footer-inner-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    padding-bottom: 40px !important;
  }

  .footer-col-brand,
  .footer-col-links,
  .footer-col-services {
    border-bottom: 1px dashed rgba(212, 175, 55, 0.22) !important;
    padding-bottom: 32px !important;
  }

  .footer-col-contact {
    padding-bottom: 12px !important;
  }

  .footer-col-links h4,
  .footer-col-services h4,
  .footer-col-contact h4 {
    margin-bottom: 22px !important;
  }

  .footer-col-links ul,
  .footer-col-services ul {
    gap: 14px !important;
  }
}

/* ================================================================
   FULL-WIDTH LUXURY CATERING BACKGROUND IMAGE FOR SERVICES HERO
   ================================================================ */

#services-hub-page .services-hero-hub {
  position: relative !important;
  background: linear-gradient(180deg, rgba(14, 32, 24, 0.82) 0%, rgba(6, 29, 18, 0.88) 100%), 
              url('assets/wedding_feast.jpg') center/cover no-repeat !important;
  color: #FFFFFF !important;
  padding: 88px 0 68px !important;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.3) !important;
  overflow: hidden !important;
  border-bottom: 3px solid #AA820A !important;
}

#services-hub-page .services-hero-hub .accent-label {
  background: rgba(232, 200, 77, 0.18) !important;
  color: #E8C84D !important;
  border-color: rgba(232, 200, 77, 0.4) !important;
}

#services-hub-page .services-hero-hub .section-title {
  color: #FFFFFF !important;
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

#services-hub-page .services-hero-hub .section-title em {
  color: #E8C84D !important;
  font-style: italic !important;
}

#services-hub-page .services-hero-hub .section-desc {
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  max-width: 760px !important;
  margin: 0 auto 32px !important;
}

#services-hub-page .jump-pill {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #0E2018 !important;
  border: 1.5px solid #AA820A !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
  font-weight: 700 !important;
}

#services-hub-page .jump-pill:hover {
  background: #AA820A !important;
  color: #FFFFFF !important;
  border-color: #AA820A !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 20px rgba(170, 130, 10, 0.4) !important;
}

#services-hub-page .jump-pill:hover * {
  color: #FFFFFF !important;
}

@media (max-width: 640px) {
  #services-hub-page .services-hero-hub {
    padding: 56px 16px 44px !important;
  }
}

/* ================================================================
   PERFECT BALANCE: VIBRANT BACKGROUND IMAGE + CRYSTAL CLEAR TEXT
   ================================================================ */

#services-hub-page .services-hero-hub {
  position: relative !important;
  background: linear-gradient(180deg, rgba(14, 32, 24, 0.48) 0%, rgba(6, 29, 18, 0.68) 100%), 
              url('assets/wedding_feast.jpg') center/cover no-repeat !important;
  color: #FFFFFF !important;
  padding: 88px 0 68px !important;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.3) !important;
  overflow: hidden !important;
  border-bottom: 3px solid #AA820A !important;
}

#services-hub-page .services-hero-hub .accent-label {
  background: rgba(14, 32, 24, 0.75) !important;
  backdrop-filter: blur(8px) !important;
  color: #E8C84D !important;
  border: 1.5px solid rgba(232, 200, 77, 0.6) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

#services-hub-page .services-hero-hub .section-title {
  color: #FFFFFF !important;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

#services-hub-page .services-hero-hub .section-title em {
  color: #E8C84D !important;
  font-style: italic !important;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.85) !important;
}

#services-hub-page .services-hero-hub .section-desc {
  color: #FFFFFF !important;
  font-weight: 500 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9), 0 1px 4px rgba(0, 0, 0, 0.9) !important;
  max-width: 760px !important;
  margin: 0 auto 32px !important;
  background: rgba(14, 32, 24, 0.35) !important;
  backdrop-filter: blur(4px) !important;
  padding: 12px 24px !important;
  border-radius: 16px !important;
  display: inline-block !important;
}

#services-hub-page .jump-pill {
  background: rgba(14, 32, 24, 0.82) !important;
  backdrop-filter: blur(8px) !important;
  color: #FFFFFF !important;
  border: 1.5px solid #AA820A !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
  font-weight: 700 !important;
}

#services-hub-page .jump-pill * {
  color: #E8C84D !important;
}

#services-hub-page .jump-pill:hover {
  background: #AA820A !important;
  color: #FFFFFF !important;
  border-color: #AA820A !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 20px rgba(170, 130, 10, 0.5) !important;
}

#services-hub-page .jump-pill:hover * {
  color: #FFFFFF !important;
}

/* ================================================================
   SMOOTH & SOFT DARK LUXURY COLOR PALETTE (SITE-WIDE OVERRIDE)
   ================================================================ */

:root {
  --sand-lt: #18241F !important;
  --sand-mid: #1C2B25 !important;
  --sand-dk: #111915 !important;
  --emerald-dark: #111915 !important;
  --emerald-mid: #18241F !important;
  --text-dark: #F4EFE6 !important;
  --text-dark-muted: rgba(244, 239, 230, 0.78) !important;
  --gold: #D4B366 !important;
  --gold-accent: #E5C87E !important;
  --gold-border: rgba(212, 179, 102, 0.25) !important;
}

body, html {
  background-color: #111915 !important;
  color: #F4EFE6 !important;
}

/* Services Page Body & Main Containers */
#services-hub-page {
  background-color: #111915 !important;
}

/* Section Backgrounds Soft Dark */
#services-hub-page .section-catering-divisions,
.section-catering-guarantee,
.section-plan-quote,
.section-infographic-process {
  background: #111915 !important;
  color: #F4EFE6 !important;
}

/* Division Cards Soft Dark Containers */
#services-hub-page .catering-division-card {
  background: #18241F !important;
  border: 1.5px solid rgba(212, 179, 102, 0.22) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35) !important;
}

#services-hub-page .division-header h3 {
  color: #F4EFE6 !important;
}

#services-hub-page .division-content-col p {
  color: rgba(244, 239, 230, 0.82) !important;
}

/* Tag Pills Soft Dark Style */
#services-hub-page .tag-pill {
  background: rgba(212, 179, 102, 0.12) !important;
  border: 1.5px solid rgba(212, 179, 102, 0.3) !important;
  color: #E5C87E !important;
}

#services-hub-page .tag-pill:hover {
  background: #D4B366 !important;
  color: #111915 !important;
  border-color: #D4B366 !important;
}

/* 5 Royal Seals Soft Dark Style */
.seal-pillar-card {
  background: #18241F !important;
  border-top: 4px solid #D4B366 !important;
  border-left: 1.5px solid rgba(212, 179, 102, 0.2) !important;
  border-right: 1.5px solid rgba(212, 179, 102, 0.2) !important;
  border-bottom: 1.5px solid rgba(212, 179, 102, 0.2) !important;
  color: #F4EFE6 !important;
}

.seal-pillar-card h4 {
  color: #F4EFE6 !important;
}

.seal-pillar-card p {
  color: rgba(244, 239, 230, 0.78) !important;
}

.seal-number-badge {
  background: #111915 !important;
  color: #E5C87E !important;
  border: 1.5px solid #D4B366 !important;
}

.seal-icon-wrap {
  background: rgba(212, 179, 102, 0.15) !important;
  color: #E5C87E !important;
  border-color: rgba(212, 179, 102, 0.35) !important;
}

.seal-pillar-card:hover .seal-icon-wrap {
  background: #D4B366 !important;
  color: #111915 !important;
}

/* Booking Form Soft Dark Style */
.plan-quote-box-dark {
  background: #141E19 !important;
  border: 1.5px solid rgba(212, 179, 102, 0.35) !important;
}

.plan-form-col {
  background: #1C2B25 !important;
  color: #F4EFE6 !important;
  border: 1px solid rgba(212, 179, 102, 0.25) !important;
}

.plan-form-col h3, 
.plan-form-col label {
  color: #F4EFE6 !important;
}

.plan-form-col .form-input {
  background: #141E19 !important;
  border: 1px solid rgba(212, 179, 102, 0.3) !important;
  color: #F4EFE6 !important;
}

.plan-form-col .form-input::placeholder {
  color: rgba(244, 239, 230, 0.5) !important;
}

/* Section Headers Soft Light Text */
.section-title {
  color: #F4EFE6 !important;
}

.section-title em {
  color: #E5C87E !important;
}

.section-desc {
  color: rgba(244, 239, 230, 0.8) !important;
}

/* Primary Buttons Soft Gold */
.btn-primary-gold {
  background: linear-gradient(135deg, #D4B366 0%, #B89445 100%) !important;
  color: #111915 !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3) !important;
}

.btn-primary-gold:hover {
  background: linear-gradient(135deg, #E5C87E 0%, #D4B366 100%) !important;
  color: #111915 !important;
}

/* ================================================================
   SOFT LUXURY ALTERNATING COLOR PALETTE (ALABASTER / CASHMERE / DARK FOREST)
   ================================================================ */

:root {
  --sand-lt: #FAFAF6 !important;
  --sand-mid: #F4EEE4 !important;
  --sand-dk: #EAE2D5 !important;
  --emerald-dark: #0E2018 !important;
  --emerald-mid: #163628 !important;
  --text-dark: #0E2018 !important;
  --text-dark-muted: rgba(14, 32, 24, 0.78) !important;
  --gold: #AA820A !important;
  --gold-accent: #D4AF37 !important;
  --gold-border: rgba(197, 155, 39, 0.3) !important;
}

body, html {
  background-color: #FAFAF6 !important;
  color: #0E2018 !important;
}

/* Services Page Body & Main Containers */
#services-hub-page {
  background-color: #FAFAF6 !important;
}

/* Section 01: 4 Division Cards Section (Soft Alabaster) */
#services-hub-page .section-catering-divisions {
  background: #FAFAF6 !important;
  color: #0E2018 !important;
  padding: 64px 0 !important;
}

/* Division Cards Soft White Containers */
#services-hub-page .catering-division-card {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(197, 155, 39, 0.28) !important;
  box-shadow: 0 8px 24px rgba(14, 32, 24, 0.06) !important;
  border-radius: 24px !important;
}

#services-hub-page .division-header h3 {
  color: #0E2018 !important;
}

#services-hub-page .division-content-col p {
  color: var(--text-dark-muted) !important;
}

/* Tag Pills Soft Light Style */
#services-hub-page .tag-pill {
  background: #F4EEE4 !important;
  border: 1.5px solid rgba(197, 155, 39, 0.3) !important;
  color: #0E2018 !important;
}

#services-hub-page .tag-pill:hover {
  background: #AA820A !important;
  color: #FFFFFF !important;
  border-color: #AA820A !important;
}

/* Section 02: 5 Royal Seals Section (Soft Cashmere) */
.section-catering-guarantee {
  background: #F4EEE4 !important;
  border-top: 1px solid rgba(197, 155, 39, 0.18) !important;
  border-bottom: 1px solid rgba(197, 155, 39, 0.18) !important;
  padding: 64px 0 72px !important;
}

.seal-pillar-card {
  background: #FFFFFF !important;
  border-top: 4px solid #AA820A !important;
  border-left: 1.5px solid rgba(197, 155, 39, 0.25) !important;
  border-right: 1.5px solid rgba(197, 155, 39, 0.25) !important;
  border-bottom: 1.5px solid rgba(197, 155, 39, 0.25) !important;
  color: #0E2018 !important;
}

.seal-pillar-card h4 {
  color: #0E2018 !important;
}

.seal-pillar-card p {
  color: var(--text-dark-muted) !important;
}

.seal-number-badge {
  background: #0E2018 !important;
  color: #E8C84D !important;
  border: 1.5px solid #AA820A !important;
}

.seal-icon-wrap {
  background: linear-gradient(135deg, #F3EAD0 0%, #FAF8F2 100%) !important;
  color: #AA820A !important;
  border-color: rgba(197, 155, 39, 0.4) !important;
}

.seal-pillar-card:hover .seal-icon-wrap {
  background: #AA820A !important;
  color: #FFFFFF !important;
}

/* Section 03: Booking Console (Rich Dark Forest Anchor Box) */
.section-plan-quote {
  background: #FAFAF6 !important;
  padding: 64px 0 72px !important;
}

.plan-quote-box-dark {
  background: #0E2018 !important;
  border: 2px solid rgba(212, 175, 55, 0.4) !important;
}

.plan-form-col {
  background: #FFFFFF !important;
  color: #0E2018 !important;
  border: none !important;
}

.plan-form-col h3, 
.plan-form-col label {
  color: #0E2018 !important;
}

.plan-form-col .form-input {
  background: #FAF8F2 !important;
  border: 1px solid rgba(197, 155, 39, 0.3) !important;
  color: #0E2018 !important;
}

.plan-form-col .form-input::placeholder {
  color: rgba(14, 32, 24, 0.5) !important;
}

/* Section Headers Soft Dark Text */
.section-title {
  color: #0E2018 !important;
}

.section-title em {
  color: #AA820A !important;
}

.section-desc {
  color: var(--text-dark-muted) !important;
}

/* Primary Buttons Royal Gold */
.btn-primary-gold {
  background: linear-gradient(135deg, #D4AF37 0%, #AA820A 100%) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 18px rgba(170, 130, 10, 0.3) !important;
}

.btn-primary-gold:hover {
  background: linear-gradient(135deg, #E8C84D 0%, #D4AF37 100%) !important;
  color: #FFFFFF !important;
}

/* ================================================================
   GRAND HEIGHT EXPANSION FOR SERVICES HERO HEADER (.services-hero-hub)
   ================================================================ */

#services-hub-page .services-hero-hub {
  padding: 140px 0 120px !important;
  min-height: 520px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

@media (max-width: 992px) {
  #services-hub-page .services-hero-hub {
    padding: 100px 20px 84px !important;
    min-height: 440px !important;
  }
}

@media (max-width: 640px) {
  #services-hub-page .services-hero-hub {
    padding: 84px 16px 64px !important;
    min-height: 380px !important;
  }
}

/* ================================================================
   MARRIAGE DETAIL HERO: EQUAL HEIGHT, FADED IMAGE & PILL BADGE FIX
   ================================================================ */

.detail-hero-section {
  padding: 64px 0 54px !important;
  background: #FAFAF6 !important;
}

.detail-hero-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.05fr !important;
  gap: 48px !important;
  align-items: stretch !important;
}

.detail-hero-text {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  height: 100% !important;
}

.detail-hero-text .story-chapter-tag {
  display: inline-flex !important;
  align-self: flex-start !important;
  width: auto !important;
  max-width: max-content !important;
  padding: 6px 16px !important;
  border-radius: 30px !important;
  margin-bottom: 20px !important;
  box-sizing: border-box !important;
  background: rgba(197, 155, 39, 0.14) !important;
  color: #AA820A !important;
  border: 1px solid rgba(197, 155, 39, 0.35) !important;
  font-family: var(--font-label) !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
}

.detail-hero-title {
  font-family: var(--font-head) !important;
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
  line-height: 1.18 !important;
  margin-bottom: 18px !important;
}

.detail-hero-title em {
  font-style: italic !important;
  color: #AA820A !important;
  font-weight: 400 !important;
}

.detail-hero-desc {
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  color: var(--text-dark-muted) !important;
  line-height: 1.65 !important;
  margin-bottom: 28px !important;
}

/* Hero Value Badges */
.hero-value-badges-row {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px 18px !important;
  margin-bottom: 32px !important;
}

.value-badge-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: #0E2018 !important;
}

.badge-icon-circle {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(197, 155, 39, 0.15) !important;
  color: #AA820A !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.8rem !important;
}

/* Hero CTA Buttons Styling */
.hero-cta-buttons {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.hero-cta-buttons .btn-glass-gold {
  background: #FFFFFF !important;
  border: 1.5px solid #AA820A !important;
  color: #0E2018 !important;
  font-weight: 800 !important;
  padding: 13px 26px !important;
  border-radius: 30px !important;
  transition: all 0.25s ease !important;
}

.hero-cta-buttons .btn-glass-gold:hover {
  background: #0E2018 !important;
  color: #FFFFFF !important;
  border-color: #0E2018 !important;
}

/* Detail Hero Media: 100% Equal Height & Soft Left Fade */
.detail-hero-media {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.hero-image-frame {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  flex: 1 !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 36px rgba(14, 32, 24, 0.12) !important;
}

.hero-banner-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Soft Faded Left Edge Effect */
.hero-image-left-fade {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 35% !important;
  height: 100% !important;
  background: linear-gradient(90deg, rgba(250, 250, 246, 0.55) 0%, transparent 100%) !important;
  pointer-events: none !important;
}

@media (max-width: 992px) {
  .detail-hero-section {
    padding: 50px 0 40px !important;
  }
  .detail-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .hero-image-frame {
    height: 320px !important;
    min-height: 320px !important;
  }
  .hero-image-left-fade {
    width: 100% !important;
    height: 35% !important;
    background: linear-gradient(180deg, rgba(250, 250, 246, 0.55) 0%, transparent 100%) !important;
  }
}

@media (max-width: 640px) {
  .detail-hero-section {
    padding: 36px 0 32px !important;
  }
  .detail-hero-text .story-chapter-tag {
    font-size: 0.72rem !important;
    padding: 5px 12px !important;
    margin-bottom: 14px !important;
    white-space: normal !important;
    line-height: 1.35 !important;
    max-width: 100% !important;
  }
  .detail-hero-title {
    font-size: clamp(1.65rem, 5.5vw, 2.1rem) !important;
    line-height: 1.22 !important;
    margin-bottom: 14px !important;
  }
  .detail-hero-desc {
    font-size: 0.92rem !important;
    line-height: 1.65 !important;
    margin-bottom: 22px !important;
  }
  .hero-value-badges-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 24px !important;
  }
  .value-badge-item {
    font-size: 0.88rem !important;
    gap: 10px !important;
  }
  .badge-icon-circle {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.88rem !important;
  }
  .hero-cta-buttons {
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
  }
  .hero-cta-buttons a,
  .hero-cta-buttons .btn-primary-gold,
  .hero-cta-buttons .btn-whatsapp-green,
  .hero-cta-buttons .btn-glass-gold {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    padding: 14px 18px !important;
    border-radius: 14px !important;
    font-size: 0.85rem !important;
  }
  .hero-image-frame {
    height: 240px !important;
    min-height: 240px !important;
    border-radius: 20px !important;
  }
}

/* ================================================================
   AUTHENTIC WHATSAPP GREEN BUTTON STYLING (#25D366 / #128C7E)
   ================================================================ */

.btn-top-wa,
.btn-footer-gold-wa,
.btn-hero-wa-outline,
a[href*="wa.me"] {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  font-family: var(--font-label) !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.btn-top-wa:hover,
.btn-footer-gold-wa:hover,
.btn-hero-wa-outline:hover,
a[href*="wa.me"]:hover {
  background: linear-gradient(135deg, #20BD5A 0%, #0E7569 100%) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.45) !important;
}

.btn-top-wa i,
.btn-footer-gold-wa i,
.btn-hero-wa-outline i,
a[href*="wa.me"] i {
  color: #FFFFFF !important;
}

/* ================================================================
   100% ICONIC VIBRANT WHATSAPP GREEN BUTTON (.btn-whatsapp-green)
   ================================================================ */

.btn-whatsapp-green {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  color: #FFFFFF !important;
  border: 1.5px solid #20BD5A !important;
  border-radius: 30px !important;
  padding: 13px 26px !important;
  font-family: var(--font-label) !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.42) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
}

.btn-whatsapp-green i {
  color: #FFFFFF !important;
  font-size: 1.25rem !important;
  display: inline-block !important;
  margin-right: 2px !important;
}

.btn-whatsapp-green:hover {
  background: linear-gradient(135deg, #20BD5A 0%, #0E7569 100%) !important;
  color: #FFFFFF !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.55) !important;
}

.btn-whatsapp-green:hover i {
  color: #FFFFFF !important;
  transform: scale(1.1) !important;
}

/* ================================================================
   WORLD-CLASS MODERN LUXURY OCCASIONS CAROUSEL STYLES
   ================================================================ */

.section-occasions {
  padding: 64px 0 !important;
  background: #FAFAF6 !important;
  position: relative !important;
}

.occasions-carousel-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  margin-top: 36px !important;
}

.occasions-scroll-track {
  display: flex !important;
  gap: 22px !important;
  overflow-x: auto !important;
  scroll-behavior: smooth !important;
  padding: 16px 8px 24px !important;
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important;  /* IE 10+ */
}

.occasions-scroll-track::-webkit-scrollbar {
  display: none !important; /* Chrome/Safari */
}

.occ-card {
  flex: 0 0 calc(25% - 17px) !important;
  min-width: 250px !important;
  height: 330px !important;
  background: #FFFFFF !important;
  border: 1.5px solid rgba(197, 155, 39, 0.3) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  box-shadow: 0 8px 24px rgba(14, 32, 24, 0.06) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease !important;
  display: flex !important;
  flex-direction: column !important;
}

.occ-card.active,
.occ-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: #AA820A !important;
  box-shadow: 0 16px 36px rgba(170, 130, 10, 0.22) !important;
}

.occ-img-box {
  width: 100% !important;
  height: 220px !important;
  position: relative !important;
  overflow: hidden !important;
}

.occ-img-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.4s ease !important;
}

.occ-card:hover .occ-img-box img {
  transform: scale(1.08) !important;
}

.occ-card h4 {
  font-family: var(--font-head) !important;
  font-size: 1.02rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
  text-align: center !important;
  padding: 16px 12px !important;
  margin: auto 0 !important;
  line-height: 1.3 !important;
}

/* Floating Navigation Arrows */
.carousel-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  border: 1.5px solid #AA820A !important;
  color: #AA820A !important;
  font-size: 1.1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 10 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) !important;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease !important;
}

.arrow-prev { left: -20px !important; }
.arrow-next { right: -20px !important; }

.carousel-arrow:hover {
  background: #AA820A !important;
  color: #FFFFFF !important;
  transform: translateY(-50%) scale(1.1) !important;
}

/* Dots Indicator */
.carousel-dots-indicator {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-top: 24px !important;
}

.carousel-dots-indicator .dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: rgba(197, 155, 39, 0.3) !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.carousel-dots-indicator .dot.active {
  width: 28px !important;
  border-radius: 12px !important;
  background: #AA820A !important;
}

@media (max-width: 1024px) {
  .occ-card {
    flex: 0 0 calc(33.33% - 15px) !important;
  }
}

@media (max-width: 768px) {
  .occ-card {
    flex: 0 0 calc(50% - 11px) !important;
  }
  .arrow-prev { left: 4px !important; }
  .arrow-next { right: 4px !important; }
}

@media (max-width: 480px) {
  .occ-card {
    flex: 0 0 82% !important;
  }
}

/* ================================================================
   BALANCED SIZE & CIRCULAR LOOP OCCASIONS CAROUSEL STYLES
   ================================================================ */

.occ-card {
  flex: 0 0 calc(20% - 16px) !important;
  min-width: 205px !important;
  height: 275px !important;
  background: #FFFFFF !important;
  border: 1.5px solid rgba(197, 155, 39, 0.3) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(14, 32, 24, 0.05) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease !important;
  display: flex !important;
  flex-direction: column !important;
}

.occ-img-box {
  width: 100% !important;
  height: 175px !important;
  position: relative !important;
  overflow: hidden !important;
}

.occ-card h4 {
  font-family: var(--font-head) !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
  text-align: center !important;
  padding: 10px 8px !important;
  margin: auto 0 !important;
  line-height: 1.25 !important;
}

@media (max-width: 1200px) {
  .occ-card {
    flex: 0 0 calc(25% - 15px) !important;
    min-width: 195px !important;
  }
}

@media (max-width: 992px) {
  .occ-card {
    flex: 0 0 calc(33.33% - 14px) !important;
  }
}

@media (max-width: 640px) {
  .occ-card {
    flex: 0 0 65% !important;
    height: 260px !important;
  }
  .occ-img-box {
    height: 165px !important;
  }
}

/* ================================================================
   100% RESPONSIVE & CLICKABLE CAROUSEL DOTS (#occDots)
   ================================================================ */

.carousel-dots-indicator {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-top: 28px !important;
  padding: 8px 0 !important;
}

.carousel-dots-indicator .dot {
  display: inline-block !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: rgba(197, 155, 39, 0.3) !important;
  border: 1.5px solid rgba(197, 155, 39, 0.5) !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  padding: 0 !important;
}

.carousel-dots-indicator .dot:hover {
  background: rgba(170, 130, 10, 0.6) !important;
  transform: scale(1.2) !important;
}

.carousel-dots-indicator .dot.active {
  width: 32px !important;
  border-radius: 14px !important;
  background: #AA820A !important;
  border-color: #AA820A !important;
  box-shadow: 0 3px 8px rgba(170, 130, 10, 0.35) !important;
}

/* ================================================================
   100% PERFECTLY CENTERED & BALANCED OCCASIONS CAROUSEL & CARDS
   ================================================================ */

.section-occasions {
  padding: 64px 0 !important;
  background: #FAFAF6 !important;
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
}

.occasions-carousel-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 36px auto 0 !important;
  padding: 0 48px !important;
  box-sizing: border-box !important;
}

.occasions-scroll-track {
  display: flex !important;
  gap: 18px !important;
  overflow-x: auto !important;
  scroll-behavior: smooth !important;
  padding: 16px 4px 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.occasions-scroll-track::-webkit-scrollbar {
  display: none !important;
}

/* Individual Card: Flawless Edge-to-Edge Image & Centered Text */
.occ-card {
  flex: 0 0 calc(20% - 15px) !important;
  min-width: 200px !important;
  height: 275px !important;
  background: #FFFFFF !important;
  border: 1.5px solid rgba(197, 155, 39, 0.3) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(14, 32, 24, 0.05) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease !important;
  box-sizing: border-box !important;
}

.occ-card.active,
.occ-card:hover {
  transform: translateY(-6px) scale(1.02) !important;
  border-color: #AA820A !important;
  box-shadow: 0 14px 32px rgba(170, 130, 10, 0.22) !important;
}

/* Image Fills Top Edge-to-Edge with 0 Uneven Margin */
.occ-img-box {
  width: 100% !important;
  height: 180px !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
}

.occ-img-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}

.occ-card:hover .occ-img-box img {
  transform: scale(1.08) !important;
}

/* Card Title: 100% Vertically and Horizontally Centered */
.occ-card h4 {
  width: 100% !important;
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-family: var(--font-head) !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
  line-height: 1.3 !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Side Navigation Arrows (Outside Card Bounds) */
.carousel-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  border: 1.5px solid #AA820A !important;
  color: #AA820A !important;
  font-size: 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 10 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1) !important;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease !important;
}

.arrow-prev { left: 0px !important; }
.arrow-next { right: 0px !important; }

.carousel-arrow:hover {
  background: #AA820A !important;
  color: #FFFFFF !important;
  transform: translateY(-50%) scale(1.1) !important;
}

/* Media Breakpoints */
@media (max-width: 1200px) {
  .occ-card {
    flex: 0 0 calc(25% - 14px) !important;
    min-width: 195px !important;
  }
}

@media (max-width: 992px) {
  .occasions-carousel-wrap {
    padding: 0 36px !important;
  }
  .occ-card {
    flex: 0 0 calc(33.33% - 12px) !important;
  }
}

@media (max-width: 768px) {
  .occasions-carousel-wrap {
    padding: 0 28px !important;
  }
  .occ-card {
    flex: 0 0 calc(50% - 10px) !important;
    height: 260px !important;
  }
  .occ-img-box {
    height: 165px !important;
  }
}

@media (max-width: 480px) {
  .occasions-carousel-wrap {
    padding: 0 20px !important;
  }
  .occ-card {
    flex: 0 0 78% !important;
    height: 255px !important;
  }
  .occ-img-box {
    height: 160px !important;
  }
}

/* ================================================================
   4-CONCEPT MENU SHOWCASE TESTING SUITE STYLES
   ================================================================ */

.section-concept-suite {
  padding: 64px 0 !important;
  background: #FAFAF6 !important;
  width: 100% !important;
}

/* Concept Testing Floating Switcher Bar */
.concept-testing-bar {
  background: #0E2018 !important;
  border: 2px solid #AA820A !important;
  border-radius: 24px !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 36px !important;
  box-shadow: 0 12px 36px rgba(14, 32, 24, 0.25) !important;
  flex-wrap: wrap !important;
}

.concept-bar-label {
  font-family: var(--font-label) !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  color: #E8C84D !important;
  letter-spacing: 0.08em !important;
}

.concept-tab-buttons {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.concept-tab-btn {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(232, 200, 77, 0.4) !important;
  border-radius: 20px !important;
  padding: 8px 16px !important;
  color: #FFFFFF !important;
  font-family: var(--font-label) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  white-space: nowrap !important;
}

.concept-tab-btn.active,
.concept-tab-btn:hover {
  background: #AA820A !important;
  color: #FFFFFF !important;
  border-color: #AA820A !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(170, 130, 10, 0.4) !important;
}

/* Master Cuisine Switcher */
.cuisine-master-bar {
  text-align: center !important;
  margin-bottom: 28px !important;
}

.cuisine-toggle-stage {
  display: flex !important;
  justify-content: center !important;
  gap: 20px !important;
  margin-top: 20px !important;
  flex-wrap: wrap !important;
}

.cuisine-toggle-btn {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  background: #FFFFFF !important;
  border: 2px solid rgba(197, 155, 39, 0.35) !important;
  border-radius: 24px !important;
  padding: 14px 28px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 6px 18px rgba(14, 32, 24, 0.05) !important;
}

.cuisine-toggle-btn.active {
  background: #0E2018 !important;
  border-color: #AA820A !important;
  box-shadow: 0 10px 28px rgba(14, 32, 24, 0.2) !important;
  transform: translateY(-3px) !important;
}

.cuisine-toggle-btn.active .btn-title {
  color: #FFFFFF !important;
}

.cuisine-toggle-btn.active .btn-sub {
  color: #E8C84D !important;
}

.btn-icon-wrap {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.1rem !important;
  background: rgba(197, 155, 39, 0.15) !important;
  color: #AA820A !important;
}

.cuisine-toggle-btn.active .btn-icon-wrap {
  background: #AA820A !important;
  color: #FFFFFF !important;
}

.btn-title {
  font-family: var(--font-head) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
  display: block !important;
}

.btn-sub {
  font-family: var(--font-label) !important;
  font-size: 0.76rem !important;
  color: var(--text-dark-muted) !important;
}

/* Meal Progression Time Tabs */
.meal-progression-bar {
  margin-bottom: 32px !important;
}

.meal-tabs-wrapper {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.meal-tab-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #FFFFFF !important;
  border: 1.5px solid rgba(197, 155, 39, 0.35) !important;
  border-radius: 30px !important;
  padding: 10px 20px !important;
  font-family: var(--font-label) !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(14, 32, 24, 0.05) !important;
  transition: all 0.25s ease !important;
  white-space: nowrap !important;
}

.meal-tab-btn:hover,
.meal-tab-btn.active {
  background: #AA820A !important;
  color: #FFFFFF !important;
  border-color: #AA820A !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(170, 130, 10, 0.3) !important;
}

/* ============================================================
   CONCEPT 1: ROYAL BANQUET MAGAZINE STYLING
   ============================================================ */
.royal-magazine-card {
  background: #FFFFFF !important;
  border: 2px solid rgba(197, 155, 39, 0.35) !important;
  border-radius: 32px !important;
  padding: 36px 32px !important;
  box-shadow: 0 18px 48px rgba(14, 32, 24, 0.08) !important;
}

.mag-header-strip {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 24px !important;
  margin-bottom: 28px !important;
  border-bottom: 1.5px dashed rgba(197, 155, 39, 0.35) !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.mag-course-badge {
  display: inline-block !important;
  background: rgba(197, 155, 39, 0.12) !important;
  color: #AA820A !important;
  border: 1px solid rgba(197, 155, 39, 0.35) !important;
  padding: 4px 14px !important;
  border-radius: 20px !important;
  font-family: var(--font-label) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 8px !important;
}

.mag-title {
  font-family: var(--font-head) !important;
  font-size: 1.85rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
  margin-bottom: 4px !important;
}

.mag-sub {
  font-family: var(--font-body) !important;
  font-size: 0.92rem !important;
  color: var(--text-dark-muted) !important;
}

.mag-pax-stamp {
  background: #0E2018 !important;
  color: #E8C84D !important;
  border: 1.5px solid #AA820A !important;
  border-radius: 20px !important;
  padding: 12px 20px !important;
  text-align: center !important;
}

.stamp-count {
  display: block !important;
  font-family: var(--font-head) !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
}

.stamp-label {
  font-family: var(--font-label) !important;
  font-size: 0.7rem !important;
  opacity: 0.9 !important;
}

.mag-grid-layout {
  display: grid !important;
  grid-template-columns: 2.2fr 1fr !important;
  gap: 28px !important;
  align-items: stretch !important;
}

.mag-bento-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 18px !important;
}

.mag-bento-card {
  background: #FAFAF6 !important;
  border: 1.5px solid rgba(197, 155, 39, 0.28) !important;
  border-top: 4px solid #AA820A !important;
  border-radius: 20px !important;
  padding: 20px 18px !important;
  box-shadow: 0 6px 16px rgba(14, 32, 24, 0.03) !important;
}

.mag-bento-card h4 {
  font-family: var(--font-head) !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
  margin-bottom: 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(197, 155, 39, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.mag-bento-card ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.mag-bento-card li {
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #0E2018 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.mag-bento-card li i {
  color: #AA820A !important;
  font-size: 0.45rem !important;
}

.mag-photo-stage {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.stage-img-frame {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 240px !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  border: 2px solid #AA820A !important;
  box-shadow: 0 10px 28px rgba(14, 32, 24, 0.14) !important;
}

.stage-img-frame img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.stage-badge-tag {
  position: absolute !important;
  bottom: 14px !important;
  left: 14px !important;
  background: rgba(14, 32, 24, 0.88) !important;
  color: #E8C84D !important;
  padding: 6px 12px !important;
  border-radius: 16px !important;
  font-family: var(--font-label) !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
}

/* ============================================================
   CONCEPT 2: SPLIT-SCREEN CHEF STUDIO STYLING
   ============================================================ */
.split-studio-container {
  display: grid !important;
  grid-template-columns: 320px 1fr !important;
  gap: 28px !important;
  background: #FFFFFF !important;
  border: 1.5px solid rgba(197, 155, 39, 0.3) !important;
  border-radius: 28px !important;
  padding: 28px !important;
  box-shadow: 0 16px 42px rgba(14, 32, 24, 0.08) !important;
}

.studio-timeline-panel {
  background: #0E2018 !important;
  border-radius: 22px !important;
  padding: 24px 20px !important;
  color: #FFFFFF !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.studio-panel-heading {
  font-family: var(--font-head) !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: #E8C84D !important;
  margin-bottom: 8px !important;
}

.timeline-steps-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.timeline-step {
  padding: 10px 14px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.timeline-step.active,
.timeline-step:hover {
  background: #AA820A !important;
  border-color: #AA820A !important;
  transform: translateX(4px) !important;
}

.step-time {
  display: block !important;
  font-family: var(--font-label) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #E8C84D !important;
}

.timeline-step.active .step-time {
  color: #FFFFFF !important;
}

.step-name {
  font-family: var(--font-body) !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
}

.studio-action-card {
  margin-top: auto !important;
  padding-top: 14px !important;
  border-top: 1px dashed rgba(255, 255, 255, 0.2) !important;
}

.studio-action-card p {
  font-size: 0.78rem !important;
  margin-bottom: 10px !important;
}

.studio-main-stage {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

.studio-hero-banner {
  position: relative !important;
  height: 180px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}

.studio-hero-banner img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.studio-banner-copy {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 16px 20px !important;
  background: linear-gradient(180deg, transparent 0%, rgba(14, 32, 24, 0.92) 100%) !important;
  color: #FFFFFF !important;
}

.studio-banner-copy h3 {
  font-family: var(--font-head) !important;
  font-size: 1.35rem !important;
  margin-bottom: 2px !important;
}

.studio-banner-copy p {
  font-size: 0.85rem !important;
  color: #E8C84D !important;
}

.studio-courses-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
}

/* ============================================================
   CONCEPT 3: VISUAL BANANA LEAF & THALI EXPERIENCE STYLING
   ============================================================ */
.leaf-thali-container {
  background: #FFFFFF !important;
  border: 2px solid #20BD5A !important;
  border-radius: 32px !important;
  padding: 36px 32px !important;
  box-shadow: 0 16px 42px rgba(14, 32, 24, 0.08) !important;
}

.thali-intro-header {
  text-align: center !important;
  margin-bottom: 24px !important;
}

.thali-intro-header h3 {
  font-family: var(--font-head) !important;
  font-size: 1.8rem !important;
  color: #0E2018 !important;
}

.thali-intro-header p {
  font-size: 0.9rem !important;
  color: var(--text-dark-muted) !important;
}

.thali-leaf-board {
  background: linear-gradient(135deg, #183C25 0%, #0E2416 100%) !important;
  border: 3px solid #25D366 !important;
  border-radius: 28px !important;
  padding: 28px 24px !important;
  color: #FFFFFF !important;
  box-shadow: inset 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

.thali-leaf-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 16px !important;
  margin-bottom: 20px !important;
  border-bottom: 1px dashed rgba(37, 211, 102, 0.4) !important;
  font-family: var(--font-label) !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
}

.thali-seal-badge {
  background: rgba(232, 200, 77, 0.15) !important;
  color: #E8C84D !important;
  border: 1px solid #E8C84D !important;
  padding: 4px 12px !important;
  border-radius: 16px !important;
  font-size: 0.74rem !important;
}

.thali-dishes-deck {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
}

.thali-cluster-box {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 18px !important;
  padding: 16px 14px !important;
}

.thali-cluster-box h5 {
  font-family: var(--font-head) !important;
  font-size: 0.86rem !important;
  color: #E8C84D !important;
  margin-bottom: 10px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid rgba(232, 200, 77, 0.3) !important;
}

.thali-cluster-box ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.thali-cluster-box li {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.thali-footer-bar {
  display: flex !important;
  justify-content: space-around !important;
  margin-top: 24px !important;
  padding-top: 16px !important;
  border-top: 1px dashed rgba(255, 255, 255, 0.2) !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.thali-spec-pill {
  background: rgba(0, 0, 0, 0.3) !important;
  padding: 6px 14px !important;
  border-radius: 14px !important;
  font-family: var(--font-label) !important;
  font-size: 0.76rem !important;
  color: #E8C84D !important;
}

/* ============================================================
   CONCEPT 4: MODERN LUXURY BENTO DECK STYLING
   ============================================================ */
.bento-deck-container {
  background: #FFFFFF !important;
  border: 2px solid rgba(197, 155, 39, 0.35) !important;
  border-radius: 32px !important;
  padding: 36px 32px !important;
  box-shadow: 0 16px 42px rgba(14, 32, 24, 0.08) !important;
}

.bento-deck-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 28px !important;
  padding-bottom: 20px !important;
  border-bottom: 1.5px dashed rgba(197, 155, 39, 0.3) !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.bento-lead-tag {
  font-family: var(--font-label) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #AA820A !important;
  letter-spacing: 0.08em !important;
}

.bento-deck-header h3 {
  font-family: var(--font-head) !important;
  font-size: 1.8rem !important;
  color: #0E2018 !important;
}

.bento-deck-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 18px !important;
}

.bento-dish-card {
  background: #FAFAF6 !important;
  border: 1.5px solid rgba(197, 155, 39, 0.25) !important;
  border-radius: 20px !important;
  padding: 20px 16px !important;
  transition: transform 0.25s ease !important;
}

.bento-dish-card:hover {
  transform: translateY(-4px) !important;
  border-color: #AA820A !important;
}

.bento-dish-card h4 {
  font-family: var(--font-head) !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
  margin-bottom: 14px !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid #AA820A !important;
}

.bento-chip-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.bento-dish-chip {
  background: #FFFFFF !important;
  border: 1px solid rgba(197, 155, 39, 0.3) !important;
  padding: 6px 12px !important;
  border-radius: 16px !important;
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: #0E2018 !important;
}

/* ============================================================
   RESPONSIVE MEDIA QUERIES FOR ALL 4 CONCEPTS
   ============================================================ */
@media (max-width: 1100px) {
  .mag-grid-layout {
    grid-template-columns: 1fr !important;
  }
  .split-studio-container {
    grid-template-columns: 1fr !important;
  }
  .thali-dishes-deck {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .bento-deck-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .concept-testing-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .concept-tab-buttons {
    width: 100% !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 6px !important;
  }
  .mag-bento-grid {
    grid-template-columns: 1fr !important;
  }
  .studio-courses-grid {
    grid-template-columns: 1fr !important;
  }
  .thali-dishes-deck {
    grid-template-columns: 1fr !important;
  }
  .bento-deck-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================================
   FINALIZED CONCEPT 2: SPLIT-SCREEN CHEF'S CULINARY STUDIO
   ================================================================ */

.section-culinary-studio {
  padding: 64px 0 !important;
  background: #FAFAF6 !important;
  width: 100% !important;
}

/* Master Cuisine Toggle Bar */
.cuisine-master-bar {
  text-align: center !important;
  margin-bottom: 32px !important;
}

.cuisine-toggle-stage {
  display: flex !important;
  justify-content: center !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
}

.cuisine-toggle-btn {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  background: #FFFFFF !important;
  border: 2px solid rgba(197, 155, 39, 0.35) !important;
  border-radius: 24px !important;
  padding: 14px 28px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 6px 18px rgba(14, 32, 24, 0.05) !important;
}

.cuisine-toggle-btn.active {
  background: #0E2018 !important;
  border-color: #AA820A !important;
  box-shadow: 0 10px 28px rgba(14, 32, 24, 0.2) !important;
  transform: translateY(-3px) !important;
}

.cuisine-toggle-btn.active .btn-title {
  color: #FFFFFF !important;
}

.cuisine-toggle-btn.active .btn-sub {
  color: #E8C84D !important;
}

/* Split-Screen Studio Main Grid */
.split-studio-container {
  display: grid !important;
  grid-template-columns: 340px 1fr !important;
  gap: 32px !important;
  background: #FFFFFF !important;
  border: 2px solid rgba(197, 155, 39, 0.35) !important;
  border-radius: 32px !important;
  padding: 32px !important;
  box-shadow: 0 20px 50px rgba(14, 32, 24, 0.08) !important;
  align-items: start !important;
}

/* Left Sticky Timeline Panel */
.studio-timeline-panel {
  position: sticky !important;
  top: 100px !important;
  background: #0E2018 !important;
  border: 1.5px solid #AA820A !important;
  border-radius: 24px !important;
  padding: 24px 20px !important;
  color: #FFFFFF !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

.panel-tag {
  display: inline-block !important;
  font-family: var(--font-label) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #E8C84D !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 4px !important;
}

.studio-panel-heading {
  font-family: var(--font-head) !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
}

.timeline-steps-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.timeline-step {
  padding: 12px 16px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.timeline-step:hover {
  background: rgba(170, 130, 10, 0.25) !important;
  border-color: #AA820A !important;
  transform: translateX(4px) !important;
}

.timeline-step.active {
  background: #AA820A !important;
  border-color: #E8C84D !important;
  transform: translateX(6px) !important;
  box-shadow: 0 6px 18px rgba(170, 130, 10, 0.4) !important;
}

.step-time-badge {
  font-family: var(--font-label) !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  color: #E8C84D !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.timeline-step.active .step-time-badge {
  color: #FFFFFF !important;
}

.step-name {
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
}

.studio-action-card {
  margin-top: 8px !important;
  padding-top: 16px !important;
  border-top: 1.5px dashed rgba(232, 200, 77, 0.3) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.action-card-text {
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  color: rgba(255, 255, 255, 0.85) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Right Interactive Studio Stage */
.studio-main-stage {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

.studio-hero-banner {
  position: relative !important;
  height: 220px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  border: 2px solid rgba(197, 155, 39, 0.3) !important;
  box-shadow: 0 10px 28px rgba(14, 32, 24, 0.12) !important;
}

.studio-hero-banner img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.studio-banner-copy {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 20px 24px !important;
  background: linear-gradient(180deg, transparent 0%, rgba(14, 32, 24, 0.95) 100%) !important;
  color: #FFFFFF !important;
}

.banner-top-pill {
  display: inline-block !important;
  background: rgba(232, 200, 77, 0.25) !important;
  color: #E8C84D !important;
  border: 1px solid #E8C84D !important;
  padding: 4px 12px !important;
  border-radius: 14px !important;
  font-family: var(--font-label) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  margin-bottom: 6px !important;
}

.studio-banner-copy h3 {
  font-family: var(--font-head) !important;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin-bottom: 4px !important;
}

.studio-banner-copy p {
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  color: #E8C84D !important;
}

/* 4 Course Bento Box Grid */
.studio-courses-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
}

.studio-course-box {
  background: #FAFAF6 !important;
  border: 1.5px solid rgba(197, 155, 39, 0.3) !important;
  border-top: 4px solid #AA820A !important;
  border-radius: 20px !important;
  padding: 22px 20px !important;
  box-shadow: 0 6px 18px rgba(14, 32, 24, 0.04) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.studio-course-box:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 24px rgba(170, 130, 10, 0.15) !important;
}

.studio-course-box h4 {
  font-family: var(--font-head) !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
  margin-bottom: 14px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(197, 155, 39, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.studio-course-box ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.studio-course-box li {
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #0E2018 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.studio-course-box li i {
  color: #AA820A !important;
  font-size: 0.45rem !important;
}

.studio-footer-note {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(170, 130, 10, 0.08) !important;
  border: 1px solid rgba(170, 130, 10, 0.25) !important;
  border-radius: 16px !important;
  padding: 14px 20px !important;
  font-family: var(--font-body) !important;
  font-size: 0.84rem !important;
  color: #0E2018 !important;
}

.studio-footer-note i {
  color: #AA820A !important;
  font-size: 1.1rem !important;
}

/* Responsive Media Breakpoints for Split Studio */
@media (max-width: 1024px) {
  .split-studio-container {
    grid-template-columns: 1fr !important;
    padding: 24px 20px !important;
  }
  .studio-timeline-panel {
    position: static !important;
  }
  .timeline-steps-list {
    flex-direction: row !important;
    overflow-x: auto !important;
    padding-bottom: 6px !important;
    scrollbar-width: none !important;
  }
  .timeline-steps-list::-webkit-scrollbar {
    display: none !important;
  }
  .timeline-step {
    flex: 0 0 auto !important;
    min-width: 180px !important;
  }
}

@media (max-width: 640px) {
  .split-studio-container {
    padding: 18px 14px !important;
    border-radius: 20px !important;
  }
  .studio-courses-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .studio-hero-banner {
    height: 180px !important;
  }
  .studio-banner-copy h3 {
    font-size: 1.3rem !important;
  }
}

/* ================================================================
   100% BULLETPROOF RESPONSIVE ENHANCEMENTS FOR SPLIT STUDIO
   ================================================================ */

@media (max-width: 1024px) {
  .timeline-steps-list {
    -webkit-overflow-scrolling: touch !important;
    gap: 12px !important;
  }
}

@media (max-width: 640px) {
  .cuisine-toggle-stage {
    flex-direction: column !important;
    width: 100% !important;
  }
  .cuisine-toggle-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px 18px !important;
  }
  .studio-banner-copy {
    padding: 14px 16px !important;
  }
  .studio-banner-copy h3 {
    font-size: clamp(1.15rem, 5vw, 1.4rem) !important;
    line-height: 1.25 !important;
  }
  .studio-banner-copy p {
    font-size: 0.8rem !important;
  }
  .studio-course-box {
    padding: 16px 14px !important;
    border-radius: 16px !important;
  }
  .studio-course-box h4 {
    font-size: 0.9rem !important;
  }
  .studio-course-box li {
    font-size: 0.84rem !important;
  }
  .studio-footer-note {
    flex-direction: column !important;
    text-align: center !important;
    font-size: 0.8rem !important;
    padding: 12px 14px !important;
  }
}

/* ================================================================
   CRITICAL CSS GRID MIN-WIDTH OVERFLOW SAFETY LOCK FOR SPLIT STUDIO
   ================================================================ */

/* 1. Prevent CSS Grid item expansion bug on mobile */
.split-studio-container {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.studio-timeline-panel,
.studio-main-stage {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.timeline-steps-list {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* 2. Strict Mobile Overrides (< 1024px) */
@media (max-width: 1024px) {
  .split-studio-container {
    grid-template-columns: 100% !important;
    padding: 20px 16px !important;
    gap: 20px !important;
  }

  .studio-timeline-panel {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 14px !important;
  }

  .timeline-steps-list {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    padding: 4px 2px 10px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .timeline-step {
    flex: 0 0 200px !important;
    min-width: 200px !important;
    max-width: 220px !important;
    padding: 10px 14px !important;
  }

  .studio-main-stage {
    width: 100% !important;
    max-width: 100% !important;
  }

  .studio-hero-banner {
    width: 100% !important;
    max-width: 100% !important;
  }

  .studio-courses-grid {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* 3. Small Mobile Devices (< 640px) */
@media (max-width: 640px) {
  .split-studio-container {
    padding: 14px 10px !important;
    border-radius: 18px !important;
  }

  .timeline-step {
    flex: 0 0 170px !important;
    min-width: 170px !important;
    padding: 8px 12px !important;
  }

  .step-name {
    font-size: 0.8rem !important;
  }

  .studio-hero-banner {
    height: 160px !important;
    border-radius: 16px !important;
  }

  .studio-banner-copy {
    padding: 12px 14px !important;
  }

  .studio-banner-copy h3 {
    font-size: 1.15rem !important;
  }

  .studio-courses-grid {
    grid-template-columns: 100% !important;
    gap: 12px !important;
  }

  .studio-course-box {
    width: 100% !important;
    padding: 14px 12px !important;
  }
}

/* ================================================================
   LUXURY COMPACT ON/OFF STYLE CUISINE TOGGLE SWITCH
   ================================================================ */

.luxury-cuisine-toggle-wrap {
  display: flex !important;
  justify-content: center !important;
  margin: 0 auto 32px !important;
  width: 100% !important;
}

.luxury-toggle-track {
  background: #0E2018 !important;
  border: 2px solid #AA820A !important;
  border-radius: 50px !important;
  padding: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 8px 28px rgba(14, 32, 24, 0.18), 0 0 16px rgba(170, 130, 10, 0.25) !important;
  max-width: 440px !important;
  width: auto !important;
  position: relative !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cuisine-toggle-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 22px !important;
  border-radius: 40px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  font-family: var(--font-label) !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
  outline: none !important;
}

.cuisine-toggle-pill:hover {
  color: #FFFFFF !important;
}

.cuisine-toggle-pill.active {
  background: #AA820A !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(170, 130, 10, 0.45) !important;
  transform: scale(1.02) !important;
}

.pill-icon-circle {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.8rem !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
  transition: all 0.3s ease !important;
}

.pill-icon-circle.green {
  color: #48E085 !important;
}

.pill-icon-circle.red {
  color: #FF8F8F !important;
}

.cuisine-toggle-pill.active .pill-icon-circle {
  background: #FFFFFF !important;
}

.cuisine-toggle-pill.active .pill-icon-circle.green {
  color: #108A45 !important;
}

.cuisine-toggle-pill.active .pill-icon-circle.red {
  color: #B82828 !important;
}

@media (max-width: 480px) {
  .luxury-toggle-track {
    width: 100% !important;
    max-width: 340px !important;
    justify-content: space-between !important;
    padding: 4px !important;
  }
  .cuisine-toggle-pill {
    flex: 1 !important;
    justify-content: center !important;
    padding: 9px 12px !important;
    font-size: 0.78rem !important;
    gap: 6px !important;
  }
  .pill-icon-circle {
    width: 24px !important;
    height: 24px !important;
    font-size: 0.72rem !important;
  }
}

/* ================================================================
   MODERN ON/OFF PHYSICAL SLIDING TOGGLE SWITCH
   ================================================================ */

.modern-cuisine-switch-wrap {
  display: flex !important;
  justify-content: center !important;
  margin: 0 auto 32px !important;
  width: 100% !important;
}

.modern-toggle-box {
  display: inline-flex !important;
  align-items: center !important;
  gap: 16px !important;
  background: #0E2018 !important;
  border: 2px solid #AA820A !important;
  border-radius: 40px !important;
  padding: 8px 22px !important;
  box-shadow: 0 8px 28px rgba(14, 32, 24, 0.18), 0 0 16px rgba(170, 130, 10, 0.25) !important;
}

.toggle-side-label {
  font-family: var(--font-label) !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  color: rgba(255, 255, 255, 0.45) !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  user-select: none !important;
  white-space: nowrap !important;
}

.toggle-side-label:hover {
  color: #FFFFFF !important;
}

.toggle-side-label.veg.active {
  color: #48E085 !important;
  transform: scale(1.05) !important;
  text-shadow: 0 0 12px rgba(72, 224, 133, 0.45) !important;
}

.toggle-side-label.nonveg.active {
  color: #FF8F8F !important;
  transform: scale(1.05) !important;
  text-shadow: 0 0 12px rgba(255, 143, 143, 0.45) !important;
}

/* The ON/OFF Physical Slider */
.modern-switch-track {
  position: relative !important;
  display: inline-block !important;
  width: 64px !important;
  height: 34px !important;
  cursor: pointer !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.modern-switch-track input {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

.switch-slider-round {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: #183C25 !important;
  border: 1.5px solid #25D366 !important;
  border-radius: 34px !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.switch-slider-round:before {
  position: absolute !important;
  content: "" !important;
  height: 24px !important;
  width: 24px !important;
  left: 4px !important;
  bottom: 3.5px !important;
  background: linear-gradient(135deg, #48E085 0%, #108A45 100%) !important;
  border-radius: 50% !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Checked (Non-Veg ON) State */
.modern-switch-track input:checked + .switch-slider-round {
  background: #4A1A1A !important;
  border-color: #FF8F8F !important;
}

.modern-switch-track input:checked + .switch-slider-round:before {
  transform: translateX(30px) !important;
  background: linear-gradient(135deg, #FF8F8F 0%, #B82828 100%) !important;
}

@media (max-width: 480px) {
  .modern-toggle-box {
    padding: 6px 16px !important;
    gap: 12px !important;
  }
  .toggle-side-label {
    font-size: 0.8rem !important;
  }
  .modern-switch-track {
    width: 54px !important;
    height: 30px !important;
  }
  .switch-slider-round:before {
    width: 20px !important;
    height: 20px !important;
    left: 4px !important;
    bottom: 3.5px !important;
  }
  .modern-switch-track input:checked + .switch-slider-round:before {
    transform: translateX(24px) !important;
  }
}

/* ================================================================
   CRITICAL GLOBAL MOBILE RIGHT-SIDE GAP FIX & INTEGRATED TOGGLE
   ================================================================ */

/* 1. Global Viewport & Root Lock */
html, body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  position: relative !important;
  box-sizing: border-box !important;
}

*, *:before, *:after {
  box-sizing: border-box !important;
}

/* 2. Fix Offscreen Mobile Drawer from expanding document width */
.mobile-nav-drawer {
  visibility: hidden !important;
  pointer-events: none !important;
}

.mobile-nav-drawer.is-open {
  visibility: visible !important;
  pointer-events: auto !important;
}

.mobile-nav-backdrop {
  width: 100% !important;
  max-width: 100% !important;
}

/* 3. Fix Occasions Carousel bounds & right gap */
.section-occasions {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.occasions-carousel-wrap {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.occasions-scroll-track {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* 4. Integrated Cuisine Switch in Left Studio Panel */
.panel-cuisine-switch-box {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(232, 200, 77, 0.25) !important;
  border-radius: 20px !important;
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 6px !important;
}

.panel-cuisine-switch-box .modern-toggle-box {
  width: 100% !important;
  justify-content: space-between !important;
  padding: 6px 14px !important;
  background: rgba(0, 0, 0, 0.3) !important;
}

@media (max-width: 1024px) {
  .studio-timeline-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  .panel-cuisine-switch-box {
    margin-bottom: 0 !important;
    padding: 10px 14px !important;
  }
  .panel-cuisine-switch-box .modern-toggle-box {
    max-width: 320px !important;
    margin: 0 auto !important;
  }
}

/* ================================================================
   MODERN LUXURY MOBILE & TABLET MEAL SESSION DROPDOWN
   ================================================================ */

/* Hidden on desktop (> 1024px) */
.mobile-meal-dropdown-wrap {
  display: none !important;
  position: relative !important;
  width: 100% !important;
  z-index: 50 !important;
}

.luxury-custom-select {
  background: #183C28 !important;
  border: 1.5px solid #AA820A !important;
  border-radius: 20px !important;
  padding: 12px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.25s ease !important;
  user-select: none !important;
}

.luxury-custom-select:hover {
  background: #1F4D34 !important;
  border-color: #E8C84D !important;
}

.select-current-val {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.select-time-badge {
  font-family: var(--font-label) !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  color: #E8C84D !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.select-label-text {
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
}

.select-chevron {
  color: #E8C84D !important;
  font-size: 0.9rem !important;
  transition: transform 0.3s ease !important;
}

.luxury-custom-select.is-open .select-chevron {
  transform: rotate(180deg) !important;
}

/* Dropdown Menu Popup */
.luxury-dropdown-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  background: #0E2018 !important;
  border: 2px solid #AA820A !important;
  border-radius: 20px !important;
  padding: 8px !important;
  display: none !important;
  flex-direction: column !important;
  gap: 4px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
  max-height: 320px !important;
  overflow-y: auto !important;
  z-index: 100 !important;
}

.luxury-dropdown-menu.is-open {
  display: flex !important;
  animation: dropdownFadeSlide 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

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

.dropdown-option {
  padding: 10px 14px !important;
  border-radius: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  background: transparent !important;
}

.dropdown-option:hover {
  background: rgba(170, 130, 10, 0.25) !important;
}

.dropdown-option.active {
  background: #AA820A !important;
}

.dropdown-option .opt-time {
  font-family: var(--font-label) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #E8C84D !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.dropdown-option.active .opt-time {
  color: #FFFFFF !important;
}

.dropdown-option .opt-name {
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
}

/* Responsive Switch: Show dropdown on Tablet & Mobile (<= 1024px) */
@media (max-width: 1024px) {
  .timeline-steps-list {
    display: none !important;
  }
  .mobile-meal-dropdown-wrap {
    display: block !important;
  }
}

/* ================================================================
   CLEAN LUXURY STAGE HEADER (TEXT & BADGE FOCUS - NO CLUTTERED PHOTO)
   ================================================================ */

.studio-stage-header {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(197, 155, 39, 0.35) !important;
  border-left: 5px solid #AA820A !important;
  border-radius: 20px !important;
  padding: 22px 26px !important;
  box-shadow: 0 8px 24px rgba(14, 32, 24, 0.05) !important;
  margin-bottom: 8px !important;
}

.stage-badge-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(197, 155, 39, 0.14) !important;
  color: #AA820A !important;
  border: 1px solid rgba(197, 155, 39, 0.35) !important;
  padding: 4px 14px !important;
  border-radius: 20px !important;
  font-family: var(--font-label) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 8px !important;
}

.stage-main-title {
  font-family: var(--font-head) !important;
  font-size: 1.7rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
  line-height: 1.25 !important;
  margin-bottom: 4px !important;
}

.stage-sub-title {
  font-family: var(--font-body) !important;
  font-size: 0.92rem !important;
  color: var(--text-dark-muted) !important;
  margin: 0 !important;
}

@media (max-width: 640px) {
  .studio-stage-header {
    padding: 16px 18px !important;
    border-radius: 16px !important;
  }
  .stage-main-title {
    font-size: 1.3rem !important;
  }
  .stage-sub-title {
    font-size: 0.85rem !important;
  }
}

/* ================================================================
   FLUID CLAMP TYPOGRAPHY & TEXT-WRAP BALANCE (PREVENTS UGLY MULTI-LINE BREAKS)
   ================================================================ */

.studio-stage-header {
  padding: 18px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.stage-badge-pill {
  font-size: clamp(0.65rem, 1.6vw, 0.72rem) !important;
  padding: 3px 12px !important;
  align-self: flex-start !important;
  white-space: nowrap !important;
  margin-bottom: 4px !important;
}

.stage-main-title {
  font-family: var(--font-head) !important;
  font-size: clamp(1.15rem, 2.5vw, 1.55rem) !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  text-wrap: balance !important;
  word-break: normal !important;
}

.stage-sub-title {
  font-family: var(--font-body) !important;
  font-size: clamp(0.78rem, 1.8vw, 0.88rem) !important;
  color: var(--text-dark-muted) !important;
  line-height: 1.4 !important;
  margin: 2px 0 0 !important;
  text-wrap: balance !important;
}

@media (max-width: 768px) {
  .studio-stage-header {
    padding: 14px 16px !important;
    border-radius: 14px !important;
  }
  .stage-main-title {
    font-size: clamp(1.08rem, 4.5vw, 1.25rem) !important;
    line-height: 1.28 !important;
  }
  .stage-sub-title {
    font-size: 0.8rem !important;
    line-height: 1.35 !important;
  }
}

/* ================================================================
   STRICT FIT OVERFLOW LOCK FOR CUISINE TOGGLE & STAGE BADGES
   ================================================================ */

.panel-cuisine-switch-box {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  padding: 10px 12px !important;
}

.panel-cuisine-switch-box .modern-toggle-box {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 6px 10px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.panel-cuisine-switch-box .toggle-side-label {
  font-size: 0.78rem !important;
  gap: 4px !important;
}

.panel-cuisine-switch-box .modern-switch-track {
  width: 48px !important;
  height: 26px !important;
  flex-shrink: 0 !important;
}

.panel-cuisine-switch-box .switch-slider-round:before {
  width: 18px !important;
  height: 18px !important;
  left: 3px !important;
  bottom: 2.5px !important;
}

.panel-cuisine-switch-box .modern-switch-track input:checked + .switch-slider-round:before {
  transform: translateX(22px) !important;
}

/* Stage Header Card & Badge Strict Fit */
.studio-stage-header {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.stage-badge-pill {
  max-width: 100% !important;
  white-space: normal !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: clamp(0.62rem, 3vw, 0.72rem) !important;
  padding: 4px 10px !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
}

@media (max-width: 480px) {
  .studio-timeline-panel {
    padding: 14px 10px !important;
  }
  .panel-cuisine-switch-box .modern-toggle-box {
    gap: 8px !important;
    padding: 4px 6px !important;
  }
  .panel-cuisine-switch-box .toggle-side-label {
    font-size: 0.74rem !important;
  }
  .studio-stage-header {
    padding: 12px 14px !important;
  }
}

/* ================================================================
   COMPACT 1-ROW TRUST RIBBON (OPTION 2)
   ================================================================ */

.quote-trust-ribbon {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(197, 155, 39, 0.35) !important;
  border-radius: 24px !important;
  padding: 18px 24px !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 28px !important;
  box-shadow: 0 10px 30px rgba(14, 32, 24, 0.05) !important;
  align-items: center !important;
}

.trust-ribbon-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 4px 8px !important;
  border-right: 1px solid rgba(197, 155, 39, 0.2) !important;
}

.trust-ribbon-item:last-child {
  border-right: none !important;
}

.trust-icon-circle {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 50% !important;
  background: rgba(197, 155, 39, 0.12) !important;
  border: 1px solid rgba(197, 155, 39, 0.3) !important;
  color: #AA820A !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
}

.trust-text-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}

.trust-text-block strong {
  font-family: var(--font-label) !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
  line-height: 1.2 !important;
}

.trust-text-block span {
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  color: var(--text-dark-muted) !important;
  line-height: 1.2 !important;
}

@media (max-width: 1100px) {
  .quote-trust-ribbon {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
    padding: 16px !important;
  }
  .trust-ribbon-item:nth-child(3) {
    border-right: none !important;
  }
}

@media (max-width: 768px) {
  .quote-trust-ribbon {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 14px 12px !important;
    border-radius: 18px !important;
    gap: 12px !important;
  }
  .trust-ribbon-item {
    border-right: none !important;
    padding: 4px 0 !important;
  }
  .trust-icon-circle {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    font-size: 0.85rem !important;
  }
  .trust-text-block strong {
    font-size: 0.76rem !important;
  }
  .trust-text-block span {
    font-size: 0.68rem !important;
  }
}

@media (max-width: 480px) {
  .quote-trust-ribbon {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .trust-ribbon-item {
    padding: 6px 4px !important;
    border-bottom: 1px dashed rgba(197, 155, 39, 0.2) !important;
  }
  .trust-ribbon-item:last-child {
    border-bottom: none !important;
  }
}


/* ================================================================
   GUARANTEED LUXURY FOOTER & QUOTE FORM REFINEMENTS
   ================================================================ */
footer.luxury-footer,
footer.luxury-footer-wrap,
.luxury-footer-wrap,
.luxury-footer {
  background: #061D12 !important;
  color: #FFFFFF !important;
  padding: 60px 0 0 !important;
  border-top: 2px solid rgba(212, 175, 55, 0.3) !important;
  width: 100% !important;
}

.luxury-footer-wrap .footer-desc,
.luxury-footer .footer-desc {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 0.88rem !important;
  line-height: 1.6 !important;
}

.luxury-footer-wrap .footer-col-links h4,
.luxury-footer-wrap .footer-col-services h4,
.luxury-footer-wrap .footer-col-contact h4,
.luxury-footer .footer-col-links h4,
.luxury-footer .footer-col-services h4,
.luxury-footer .footer-col-contact h4 {
  color: #E8C84D !important;
  font-weight: 800 !important;
}

.luxury-footer-wrap .footer-col-links ul a,
.luxury-footer-wrap .footer-col-services ul a,
.luxury-footer .footer-col-links ul a,
.luxury-footer .footer-col-services ul a {
  color: rgba(255, 255, 255, 0.8) !important;
  text-decoration: none !important;
}

.luxury-footer-wrap .footer-col-links ul a:hover,
.luxury-footer-wrap .footer-col-services ul a:hover,
.luxury-footer .footer-col-links ul a:hover,
.luxury-footer .footer-col-services ul a:hover {
  color: #E8C84D !important;
}

.luxury-footer-wrap .footer-col-contact p,
.luxury-footer .footer-col-contact p {
  color: rgba(255, 255, 255, 0.85) !important;
}

.luxury-footer-wrap .footer-col-contact a.phone-link,
.luxury-footer .footer-col-contact a.phone-link {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

.luxury-footer-wrap .footer-catering-badge,
.luxury-footer .footer-catering-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(197, 155, 39, 0.15) !important;
  color: #E8C84D !important;
  border: 1px solid rgba(197, 155, 39, 0.35) !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
}

.luxury-footer-wrap .footer-bottom-bar,
.luxury-footer .footer-bottom-bar {
  background: #030F09 !important;
  border-top: 1px solid rgba(212, 175, 55, 0.15) !important;
  padding: 20px 0 !important;
  margin-top: 40px !important;
}

.luxury-footer-wrap .footer-bottom-bar p,
.luxury-footer .footer-bottom-bar p {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 0.8rem !important;
  margin: 0 !important;
}

/* Quote Form Grid Full-Width Fields */
.quote-form-grid .full-width-field,
.quote-form-grid .form-field-wrap.full-width-field {
  grid-column: 1 / -1 !important;
}

.quote-form-grid textarea.form-input {
  width: 100% !important;
  box-sizing: border-box !important;
}

.btn-submit-gold-wa {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

/* ================================================================
   CONTACT PAGE: LUXURY TWO-COLUMN RESPONSIVE LAYOUT
   ================================================================ */
.contact-two-col {
  display: grid !important;
  grid-template-columns: 1fr 1.05fr !important;
  gap: 36px !important;
  align-items: stretch !important;
}

.contact-info-card {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(197, 155, 39, 0.3) !important;
  border-radius: 20px !important;
  padding: 36px 32px !important;
  box-shadow: 0 10px 30px rgba(14, 32, 24, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

.contact-form-card {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(197, 155, 39, 0.3) !important;
  border-radius: 20px !important;
  padding: 36px 32px !important;
  box-shadow: 0 10px 30px rgba(14, 32, 24, 0.05) !important;
  box-sizing: border-box !important;
}

.contact-info-card h2 {
  font-family: var(--font-head) !important;
  font-size: 1.85rem !important;
  color: #0E2018 !important;
  font-weight: 800 !important;
  margin: 12px 0 4px !important;
  line-height: 1.25 !important;
}

.contact-info-card .contact-tamil {
  font-family: var(--font-tamil) !important;
  color: #AA820A !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  margin-bottom: 24px !important;
}

.contact-detail-row {
  display: flex !important;
  gap: 16px !important;
  align-items: flex-start !important;
  margin-bottom: 18px !important;
}

.contact-detail-row i {
  font-size: 16px !important;
  color: #AA820A !important;
  margin-top: 4px !important;
  width: 22px !important;
  text-align: center !important;
}

.contact-detail-row strong {
  font-family: var(--font-label) !important;
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #718096 !important;
  display: block !important;
  margin-bottom: 2px !important;
}

.contact-detail-row p {
  color: #0E2018 !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

.contact-detail-row p a.phone-link {
  color: #0E2018 !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}

.contact-detail-row p a.phone-link:hover {
  color: #AA820A !important;
}

/* WhatsApp Simulator Box inside Contact Info */
.wa-sim-card {
  background: #ECE5DD !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
  padding: 0 0 16px !important;
  margin-top: auto !important;
}

.wa-sim-header {
  background: #075E54 !important;
  color: #FFFFFF !important;
  padding: 10px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.75rem !important;
  font-family: var(--font-label) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
}

.chat-bubble {
  background: #FFFFFF !important;
  border-radius: 0 12px 12px 12px !important;
  padding: 12px 16px !important;
  margin: 14px 16px 16px !important;
  font-size: 0.85rem !important;
  color: #2D3748 !important;
  line-height: 1.5 !important;
  position: relative !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

.chat-bubble::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -8px !important;
  width: 0 !important;
  height: 0 !important;
  border: 8px solid transparent !important;
  border-top-color: #FFFFFF !important;
  border-right-color: #FFFFFF !important;
}

.wa-sim-card .btn-wa-emerald,
.btn-wa-emerald {
  background: #25D366 !important;
  color: #FFFFFF !important;
  font-family: var(--font-label) !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.04em !important;
  padding: 12px 20px !important;
  border-radius: 25px !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
  margin: 0 16px !important;
  width: calc(100% - 32px) !important;
  box-sizing: border-box !important;
}

.wa-sim-card .btn-wa-emerald:hover,
.btn-wa-emerald:hover {
  background: #1EBE5D !important;
  transform: translateY(-2px) !important;
}

/* Contact Form Grid */
.modal-form-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px !important;
}

.modal-form-grid .form-group.full-width {
  grid-column: 1 / -1 !important;
}

.form-group label {
  display: block !important;
  font-family: var(--font-label) !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  color: #0E2018 !important;
  margin-bottom: 5px !important;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100% !important;
  background: #FAF8F2 !important;
  border: 1px solid rgba(170, 130, 10, 0.25) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-family: var(--font-body) !important;
  font-size: 0.86rem !important;
  color: #0E2018 !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #AA820A !important;
  background: #FFFFFF !important;
}

/* Responsive Media Queries */
@media (max-width: 992px) {
  .contact-two-col {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
}

@media (max-width: 600px) {
  .modal-form-grid {
    grid-template-columns: 1fr !important;
  }
  .contact-info-card,
  .contact-form-card {
    padding: 24px 18px !important;
    border-radius: 16px !important;
  }
  .contact-info-card h2 {
    font-size: 1.45rem !important;
  }
}


/* ================================================================
   100X MODERN LUXURY ACT 08: BUSINESS PROFILE & PROPOSAL STUDIO
   ================================================================ */

.section-luxury-contact {
  padding: 64px 0 72px !important;
  background: #FAF8F2 !important;
  position: relative !important;
  overflow: hidden !important;
}

.lux-contact-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.1fr !important;
  gap: 36px !important;
  align-items: stretch !important;
  margin-top: 14px !important;
}

/* 1. Left Column: Google Business Profile Card */
.lux-business-profile-card {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(197, 155, 39, 0.35) !important;
  border-radius: 24px !important;
  padding: 32px 30px !important;
  box-shadow: 0 12px 36px rgba(14, 32, 24, 0.06) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  box-sizing: border-box !important;
}

.lux-business-profile-card:hover {
  box-shadow: 0 16px 44px rgba(14, 32, 24, 0.09) !important;
}

.google-badge-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(197, 155, 39, 0.12) !important;
  border: 1px solid rgba(197, 155, 39, 0.35) !important;
  color: #0E2018 !important;
  padding: 5px 14px !important;
  border-radius: 20px !important;
  font-family: var(--font-label) !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 12px !important;
}

.google-badge-pill .rating-badge {
  background: #AA820A !important;
  color: #FFFFFF !important;
  padding: 2px 8px !important;
  border-radius: 12px !important;
  font-size: 0.7rem !important;
  margin-left: 4px !important;
}

.lux-card-title {
  font-family: var(--font-head) !important;
  font-size: 1.95rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
  line-height: 1.2 !important;
  margin: 0 0 4px !important;
}

.lux-tamil-motto {
  font-family: var(--font-tamil) !important;
  color: #AA820A !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  margin: 0 0 24px !important;
}

.lux-contact-details-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}

.lux-detail-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
}

.detail-icon-circle {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 50% !important;
  background: rgba(197, 155, 39, 0.12) !important;
  border: 1px solid rgba(197, 155, 39, 0.3) !important;
  color: #AA820A !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.9rem !important;
}

.detail-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.detail-label {
  font-family: var(--font-label) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  color: #718096 !important;
  letter-spacing: 0.08em !important;
}

.detail-value {
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #0E2018 !important;
  font-style: normal !important;
  line-height: 1.35 !important;
}

.detail-phone-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.detail-phone-group a.phone-link {
  color: #0E2018 !important;
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.detail-phone-group a.phone-link:hover {
  color: #AA820A !important;
}

.phone-sep {
  color: rgba(197, 155, 39, 0.5) !important;
}

/* WhatsApp Simulator Card */
.lux-wa-simulator-box {
  background: #ECE5DD !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  display: flex !important;
  flex-direction: column !important;
  padding-bottom: 16px !important;
}

.wa-sim-topbar {
  background: #075E54 !important;
  color: #FFFFFF !important;
  padding: 10px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.wa-avatar-wrap {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #128C7E !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #FFFFFF !important;
  position: relative !important;
  font-size: 0.85rem !important;
}

.pulse-online-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #25D366 !important;
  border: 1.5px solid #075E54 !important;
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
}

.wa-user-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}

.wa-user-meta strong {
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
}

.wa-user-meta span {
  font-size: 0.68rem !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.wa-chat-bubble-body {
  background: #FFFFFF !important;
  border-radius: 0 14px 14px 14px !important;
  padding: 14px 16px 8px !important;
  margin: 14px 14px 14px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
  position: relative !important;
}

.wa-chat-bubble-body::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -8px !important;
  width: 0 !important;
  height: 0 !important;
  border: 8px solid transparent !important;
  border-top-color: #FFFFFF !important;
  border-right-color: #FFFFFF !important;
}

.wa-bubble-text {
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  color: #2D3748 !important;
  line-height: 1.45 !important;
  margin: 0 0 6px !important;
}

.wa-bubble-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
}

.wa-time {
  font-size: 0.65rem !important;
  color: #718096 !important;
}

.text-blue {
  color: #34B7F1 !important;
  font-size: 0.72rem !important;
}

.lux-wa-cta-btn {
  background: #25D366 !important;
  color: #FFFFFF !important;
  font-family: var(--font-label) !important;
  font-weight: 800 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.05em !important;
  padding: 12px 18px !important;
  border-radius: 25px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  margin: 0 14px !important;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3) !important;
  transition: all 0.25s ease !important;
}

.lux-wa-cta-btn:hover {
  background: #1EBE5D !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.4) !important;
}

/* 2. Right Column: Luxury Proposal Request Form Card */
.lux-booking-form-card {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(197, 155, 39, 0.35) !important;
  border-radius: 24px !important;
  padding: 32px 30px !important;
  box-shadow: 0 12px 36px rgba(14, 32, 24, 0.06) !important;
  box-sizing: border-box !important;
}

.form-badge-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(197, 155, 39, 0.14) !important;
  color: #AA820A !important;
  border: 1px solid rgba(197, 155, 39, 0.35) !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-family: var(--font-label) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 8px !important;
}

.form-heading {
  font-family: var(--font-head) !important;
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
  line-height: 1.2 !important;
  margin: 0 0 4px !important;
}

.form-subheading {
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  color: var(--text-dark-muted) !important;
  margin: 0 0 20px !important;
  line-height: 1.4 !important;
}

.lux-form-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px !important;
}

.lux-input-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.lux-input-wrap.full-span {
  grid-column: 1 / -1 !important;
}

.lux-input-wrap label {
  font-family: var(--font-label) !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
  letter-spacing: 0.02em !important;
}

.input-with-icon {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.input-icon {
  position: absolute !important;
  left: 12px !important;
  color: #AA820A !important;
  font-size: 0.85rem !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.text-area-icon {
  top: 14px !important;
}

.lux-input {
  width: 100% !important;
  background: #FAF8F2 !important;
  border: 1.5px solid rgba(197, 155, 39, 0.25) !important;
  border-radius: 12px !important;
  padding: 10px 12px 10px 36px !important;
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  color: #0E2018 !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

.lux-input:focus {
  border-color: #AA820A !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(170, 130, 10, 0.12) !important;
}

.select-container {
  position: relative !important;
}

.lux-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  padding-right: 32px !important;
}

.lux-select-chevron {
  position: absolute !important;
  right: 12px !important;
  color: #AA820A !important;
  font-size: 0.72rem !important;
  pointer-events: none !important;
}

.lux-textarea {
  min-height: 60px !important;
  resize: vertical !important;
}

.lux-submit-gold-btn {
  background: linear-gradient(135deg, #AA820A 0%, #C59B27 50%, #8E6C05 100%) !important;
  color: #FFFFFF !important;
  font-family: var(--font-label) !important;
  font-weight: 800 !important;
  font-size: 0.86rem !important;
  letter-spacing: 0.06em !important;
  padding: 13px 20px !important;
  border-radius: 14px !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-shadow: 0 6px 20px rgba(170, 130, 10, 0.3) !important;
  transition: all 0.25s ease !important;
  margin-top: 4px !important;
}

.lux-submit-gold-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 26px rgba(170, 130, 10, 0.4) !important;
}

.form-trust-subtext {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: 8px !important;
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  color: #718096 !important;
  text-align: center !important;
}

/* Responsive Rules for Act 08 */
@media (max-width: 1024px) {
  .lux-contact-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}

@media (max-width: 600px) {
  .section-luxury-contact {
    padding: 44px 0 54px !important;
  }
  .lux-business-profile-card,
  .lux-booking-form-card {
    padding: 22px 18px !important;
    border-radius: 18px !important;
  }
  .lux-card-title {
    font-size: 1.55rem !important;
  }
  .form-heading {
    font-size: 1.45rem !important;
  }
  .lux-form-grid {
    grid-template-columns: 1fr !important;
  }
  .google-badge-pill {
    font-size: 0.68rem !important;
    flex-wrap: wrap !important;
  }
}


/* ================================================================
   PHYSICAL EXECUTIVE BUSINESS CARD & NATIVE WHATSAPP CHAT FLOW
   ================================================================ */

.section-executive-contact {
  padding: 64px 0 72px !important;
  background: #FAF8F2 !important;
  position: relative !important;
  overflow: hidden !important;
}

.exec-contact-two-col {
  display: grid !important;
  grid-template-columns: 1fr 1.08fr !important;
  gap: 36px !important;
  align-items: stretch !important;
  margin-top: 24px !important;
}

/* ================================================================
   1. PHYSICAL LUXURY BUSINESS CARD
   ================================================================ */
.business-card-showcase-wrap {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.executive-physical-card {
  background: linear-gradient(145deg, #091D13 0%, #0E291C 50%, #06180E 100%) !important;
  border-radius: 24px !important;
  padding: 34px 30px !important;
  color: #FFFFFF !important;
  box-shadow: 
    0 20px 45px rgba(10, 28, 20, 0.25),
    0 2px 8px rgba(0, 0, 0, 0.3) !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  box-sizing: border-box !important;
  border: 1.5px solid rgba(212, 175, 55, 0.4) !important;
}

/* Golden Foil Accent Inner Rim */
.card-foil-border {
  position: absolute !important;
  inset: 8px !important;
  border: 1px solid rgba(232, 200, 77, 0.25) !important;
  border-radius: 18px !important;
  pointer-events: none !important;
}

.card-brand-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
}

.card-brand-group {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.card-logo-img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  border: 1.5px solid #AA820A !important;
  background: #FFFFFF !important;
  padding: 2px !important;
  object-fit: cover !important;
}

.card-brand-text {
  display: flex !important;
  flex-direction: column !important;
}

.card-brand-name {
  font-family: var(--font-head) !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #E8C84D !important;
  letter-spacing: 0.08em !important;
}

.card-brand-sub {
  font-family: var(--font-label) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  letter-spacing: 0.12em !important;
}

.card-rating-badge {
  background: rgba(197, 155, 39, 0.18) !important;
  border: 1px solid rgba(197, 155, 39, 0.4) !important;
  border-radius: 20px !important;
  padding: 4px 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.card-rating-badge .star-rating {
  font-family: var(--font-label) !important;
  font-weight: 800 !important;
  color: #E8C84D !important;
  font-size: 0.75rem !important;
}

.card-rating-badge .reviews-count {
  font-family: var(--font-body) !important;
  font-size: 0.68rem !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.card-holder-block {
  margin-bottom: 16px !important;
}

.holder-name {
  font-family: var(--font-head) !important;
  font-size: 1.85rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  letter-spacing: 0.04em !important;
  margin: 0 0 2px !important;
}

.holder-title {
  font-family: var(--font-label) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: #E8C84D !important;
  margin: 0 0 8px !important;
  letter-spacing: 0.05em !important;
}

.card-tamil-motto {
  font-family: var(--font-tamil) !important;
  font-size: 0.88rem !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-style: italic !important;
  margin: 0 !important;
}

.card-gold-divider {
  height: 1px !important;
  background: linear-gradient(90deg, rgba(232, 200, 77, 0.6) 0%, rgba(232, 200, 77, 0.1) 100%) !important;
  margin: 16px 0 !important;
}

.card-contact-rows {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  margin-bottom: 24px !important;
}

.card-row-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

.row-icon-box {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 50% !important;
  background: rgba(232, 200, 77, 0.15) !important;
  border: 1px solid rgba(232, 200, 77, 0.3) !important;
  color: #E8C84D !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.85rem !important;
}

.row-text-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.row-label {
  font-family: var(--font-label) !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  color: rgba(232, 200, 77, 0.8) !important;
  letter-spacing: 0.08em !important;
}

.row-phone-links {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.card-link {
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.card-link:hover {
  color: #E8C84D !important;
}

.row-val {
  font-family: var(--font-body) !important;
  font-size: 0.86rem !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

.card-quick-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin-top: auto !important;
  position: relative !important;
  z-index: 2 !important;
}

.card-action-btn {
  padding: 10px 14px !important;
  border-radius: 12px !important;
  font-family: var(--font-label) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
}

.btn-card-call {
  background: #AA820A !important;
  color: #FFFFFF !important;
}

.btn-card-call:hover {
  background: #C59B27 !important;
  transform: translateY(-2px) !important;
}

.btn-card-maps {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.btn-card-maps:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-2px) !important;
}


/* ================================================================
   2. NATIVE WHATSAPP CHAT FLOW INTERFACE
   ================================================================ */
.native-wa-phone-container {
  background: #EFEAE2 !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 
    0 16px 40px rgba(14, 32, 24, 0.08),
    0 2px 6px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

/* App Header */
.wa-app-header {
  background: #075E54 !important;
  color: #FFFFFF !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

.wa-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.wa-back-btn {
  font-size: 0.9rem !important;
  color: rgba(255, 255, 255, 0.85) !important;
  cursor: pointer !important;
}

.wa-avatar-box {
  width: 40px !important;
  height: 40px !important;
  position: relative !important;
}

.wa-avatar-img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background: #FFFFFF !important;
  padding: 2px !important;
}

.wa-online-status-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #25D366 !important;
  border: 2px solid #075E54 !important;
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
}

.wa-contact-info {
  display: flex !important;
  flex-direction: column !important;
}

.wa-contact-name {
  font-family: var(--font-body) !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.wa-verified-icon {
  font-size: 0.72rem !important;
  color: #25D366 !important;
}

.wa-contact-status {
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0 !important;
}

.wa-header-right-icons {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  color: #FFFFFF !important;
}

.wa-icon-btn {
  font-size: 0.95rem !important;
  color: #FFFFFF !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

/* Chat Viewport & Messages */
.wa-chat-viewport {
  padding: 16px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  background-image: 
    radial-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 0) !important;
  background-size: 16px 16px !important;
  flex: 1 !important;
  overflow-y: auto !important;
}

.wa-date-divider-pill {
  align-self: center !important;
  background: rgba(225, 245, 254, 0.92) !important;
  color: #555555 !important;
  padding: 3px 12px !important;
  border-radius: 8px !important;
  font-size: 0.68rem !important;
  font-family: var(--font-label) !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08) !important;
  margin-bottom: 6px !important;
}

.wa-chat-bubble {
  max-width: 85% !important;
  padding: 10px 14px 6px !important;
  border-radius: 12px !important;
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  line-height: 1.45 !important;
  position: relative !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important;
}

.wa-incoming-bubble {
  align-self: flex-start !important;
  background: #FFFFFF !important;
  color: #111B21 !important;
  border-top-left-radius: 0 !important;
}

.wa-incoming-bubble::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -8px !important;
  width: 0 !important;
  height: 0 !important;
  border: 8px solid transparent !important;
  border-top-color: #FFFFFF !important;
  border-right-color: #FFFFFF !important;
}

.wa-outgoing-bubble {
  align-self: flex-end !important;
  background: #E7FFDB !important;
  color: #111B21 !important;
  border-top-right-radius: 0 !important;
  margin-top: 4px !important;
}

.wa-outgoing-bubble::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: -8px !important;
  width: 0 !important;
  height: 0 !important;
  border: 8px solid transparent !important;
  border-top-color: #E7FFDB !important;
  border-left-color: #E7FFDB !important;
}

.bubble-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  margin-top: 2px !important;
}

.msg-time {
  font-size: 0.64rem !important;
  color: #667781 !important;
}

.msg-ticks i {
  font-size: 0.7rem !important;
}

.text-blue {
  color: #53BDEB !important;
}

/* Interactive Service Chips in Chat */
.wa-interactive-chips-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 2px 0 6px !important;
}

.wa-chip {
  background: #FFFFFF !important;
  border: 1px solid rgba(7, 94, 84, 0.25) !important;
  color: #075E54 !important;
  font-family: var(--font-body) !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  padding: 6px 12px !important;
  border-radius: 16px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

.wa-chip:hover {
  background: #E7FFDB !important;
  border-color: #25D366 !important;
}

.wa-chip.active {
  background: #075E54 !important;
  color: #FFFFFF !important;
  border-color: #075E54 !important;
}

/* Embedded Form Card inside Chat */
.wa-chat-input-form-card {
  background: #FFFFFF !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  border-left: 4px solid #075E54 !important;
}

.wa-form-row {
  display: flex !important;
  gap: 10px !important;
}

.wa-field-half {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.wa-field-full {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.wa-form-row label {
  font-family: var(--font-label) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  color: #075E54 !important;
}

.wa-chat-input-field {
  width: 100% !important;
  background: #F0F2F5 !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  color: #111B21 !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.wa-chat-input-field:focus {
  border-color: #25D366 !important;
  background: #FFFFFF !important;
}

.wa-select-field {
  cursor: pointer !important;
}

/* Bottom Bar */
.wa-bottom-bar {
  padding: 8px 12px !important;
  background: #F0F2F5 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.wa-input-pill-wrap {
  flex: 1 !important;
  background: #FFFFFF !important;
  border-radius: 20px !important;
  display: flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  gap: 6px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

.wa-bar-icon-btn {
  background: transparent !important;
  border: none !important;
  color: #667781 !important;
  font-size: 0.95rem !important;
  cursor: pointer !important;
  padding: 2px !important;
}

.wa-bottom-text-input {
  flex: 1 !important;
  border: none !important;
  outline: none !important;
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  color: #111B21 !important;
  background: transparent !important;
}

.wa-send-circle-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: #25D366 !important;
  border: none !important;
  color: #FFFFFF !important;
  font-size: 0.9rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(37, 211, 102, 0.4) !important;
  transition: all 0.2s ease !important;
}

.wa-send-circle-btn:hover {
  background: #1EBE5D !important;
  transform: scale(1.06) !important;
}

/* Base Launch CTA Strip */
.wa-launch-cta-strip {
  padding: 8px 12px 12px !important;
  background: #F0F2F5 !important;
}

.btn-whatsapp-launch-banner {
  width: 100% !important;
  background: linear-gradient(135deg, #075E54 0%, #128C7E 100%) !important;
  color: #FFFFFF !important;
  font-family: var(--font-label) !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  padding: 11px 16px !important;
  border-radius: 12px !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.25s ease !important;
}

.btn-whatsapp-launch-banner:hover {
  background: linear-gradient(135deg, #064942 0%, #0D6E63 100%) !important;
  box-shadow: 0 4px 14px rgba(7, 94, 84, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* Responsive Rules for Contact Two Column */
@media (max-width: 992px) {
  .exec-contact-two-col {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
}

@media (max-width: 600px) {
  .section-executive-contact {
    padding: 44px 0 54px !important;
  }
  .executive-physical-card {
    padding: 24px 20px !important;
    border-radius: 20px !important;
  }
  .holder-name {
    font-size: 1.5rem !important;
  }
  .wa-form-row {
    flex-direction: column !important;
    gap: 6px !important;
  }
}


/* ================================================================
   RAZOR-SHARP BUSINESS CARD & CRYSTAL CLEAR WHATSAPP CHAT FLOW
   ================================================================ */

.section-executive-contact {
  padding: 64px 0 76px !important;
  background: #FAF8F2 !important;
  position: relative !important;
  overflow: hidden !important;
}

.exec-contact-two-col {
  display: grid !important;
  grid-template-columns: 1fr 1.1fr !important;
  gap: 36px !important;
  align-items: stretch !important;
  margin-top: 24px !important;
}

/* ================================================================
   1. RAZOR-SHARP LUXURY PHYSICAL BUSINESS CARD
   ================================================================ */
.business-card-showcase-wrap {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.executive-physical-card {
  background: linear-gradient(145deg, #071910 0%, #0C261A 55%, #05140C 100%) !important;
  border-radius: 24px !important;
  padding: 36px 32px !important;
  color: #FFFFFF !important;
  box-shadow: 
    0 24px 50px rgba(7, 25, 16, 0.28),
    0 4px 12px rgba(0, 0, 0, 0.25) !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  box-sizing: border-box !important;
  border: 1.5px solid rgba(212, 175, 55, 0.45) !important;
}

/* Subtle Inner Metallic Trim */
.card-foil-border {
  position: absolute !important;
  inset: 8px !important;
  border: 1px solid rgba(232, 200, 77, 0.22) !important;
  border-radius: 18px !important;
  pointer-events: none !important;
}

.card-brand-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
}

.card-brand-group {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.card-logo-img {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  border: 1.5px solid #E8C84D !important;
  background: #FFFFFF !important;
  padding: 2px !important;
  object-fit: cover !important;
}

.card-brand-text {
  display: flex !important;
  flex-direction: column !important;
}

.card-brand-name {
  font-family: var(--font-head) !important;
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  color: #E8C84D !important;
  letter-spacing: 0.08em !important;
}

.card-brand-sub {
  font-family: var(--font-label) !important;
  font-size: 0.64rem !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.72) !important;
  letter-spacing: 0.1em !important;
}

.card-rating-badge {
  background: rgba(197, 155, 39, 0.18) !important;
  border: 1px solid rgba(232, 200, 77, 0.4) !important;
  border-radius: 20px !important;
  padding: 4px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.card-rating-badge .star-rating {
  font-family: var(--font-label) !important;
  font-weight: 800 !important;
  color: #E8C84D !important;
  font-size: 0.78rem !important;
}

.card-rating-badge .reviews-count {
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

.card-holder-block {
  margin-bottom: 14px !important;
}

.card-role-pill {
  display: inline-block !important;
  background: rgba(232, 200, 77, 0.15) !important;
  color: #E8C84D !important;
  font-family: var(--font-label) !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  margin-bottom: 6px !important;
}

.holder-name {
  font-family: var(--font-head) !important;
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  letter-spacing: 0.04em !important;
  margin: 0 0 4px !important;
  line-height: 1.15 !important;
}

.card-tamil-motto {
  font-family: var(--font-tamil) !important;
  font-size: 0.92rem !important;
  color: #E8C84D !important;
  font-style: italic !important;
  margin: 0 !important;
}

.card-gold-divider {
  height: 1px !important;
  background: linear-gradient(90deg, rgba(232, 200, 77, 0.65) 0%, rgba(232, 200, 77, 0.15) 100%) !important;
  margin: 18px 0 !important;
}

.card-contact-rows {
  display: flex !important;
  flex-direction: column !important;
  gap: 15px !important;
  margin-bottom: 24px !important;
}

.card-row-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

.row-icon-box {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 50% !important;
  background: rgba(232, 200, 77, 0.15) !important;
  border: 1px solid rgba(232, 200, 77, 0.35) !important;
  color: #E8C84D !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.85rem !important;
}

.row-text-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.row-label {
  font-family: var(--font-label) !important;
  font-size: 0.64rem !important;
  font-weight: 800 !important;
  color: rgba(232, 200, 77, 0.85) !important;
  letter-spacing: 0.08em !important;
}

.row-phone-links {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.card-link {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.card-link:hover {
  color: #E8C84D !important;
}

.row-val {
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  color: rgba(255, 255, 255, 0.9) !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  font-style: normal !important;
}

.card-quick-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin-top: auto !important;
  position: relative !important;
  z-index: 2 !important;
}

.card-action-btn {
  padding: 11px 16px !important;
  border-radius: 12px !important;
  font-family: var(--font-label) !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
}

.btn-card-call {
  background: #AA820A !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(170, 130, 10, 0.35) !important;
}

.btn-card-call:hover {
  background: #C59B27 !important;
  transform: translateY(-2px) !important;
}

.btn-card-maps {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.btn-card-maps:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  transform: translateY(-2px) !important;
}


/* ================================================================
   2. CLEAN, NON-CONFUSING NATIVE WHATSAPP CHAT FLOW
   ================================================================ */
.native-wa-phone-container {
  background: #EFEAE2 !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  border: 1.5px solid rgba(0, 0, 0, 0.14) !important;
  box-shadow: 
    0 18px 45px rgba(14, 32, 24, 0.09),
    0 2px 8px rgba(0, 0, 0, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

/* App Header */
.wa-app-header {
  background: #075E54 !important;
  color: #FFFFFF !important;
  padding: 12px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18) !important;
}

.wa-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.wa-avatar-box {
  width: 42px !important;
  height: 42px !important;
  position: relative !important;
}

.wa-avatar-img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background: #FFFFFF !important;
  padding: 2px !important;
}

.wa-online-status-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #25D366 !important;
  border: 2px solid #075E54 !important;
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
}

.wa-contact-info {
  display: flex !important;
  flex-direction: column !important;
}

.wa-contact-name {
  font-family: var(--font-body) !important;
  font-size: 0.96rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.wa-verified-icon {
  font-size: 0.76rem !important;
  color: #25D366 !important;
}

.wa-contact-status {
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  color: rgba(255, 255, 255, 0.88) !important;
  margin: 0 !important;
}

.wa-header-right-icons {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  color: #FFFFFF !important;
}

.wa-icon-btn {
  font-size: 1rem !important;
  color: #FFFFFF !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: transform 0.2s ease !important;
}

.wa-icon-btn:hover {
  transform: scale(1.1) !important;
}

/* Chat Viewport & Messages */
.wa-chat-viewport {
  padding: 18px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  background-image: 
    radial-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 0) !important;
  background-size: 16px 16px !important;
  flex: 1 !important;
  overflow-y: auto !important;
}

.wa-date-divider-pill {
  align-self: center !important;
  background: rgba(225, 245, 254, 0.95) !important;
  color: #555555 !important;
  padding: 4px 14px !important;
  border-radius: 8px !important;
  font-size: 0.68rem !important;
  font-family: var(--font-label) !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
  margin-bottom: 4px !important;
}

.wa-chat-bubble {
  max-width: 88% !important;
  padding: 10px 14px 6px !important;
  border-radius: 12px !important;
  font-family: var(--font-body) !important;
  font-size: 0.84rem !important;
  line-height: 1.45 !important;
  position: relative !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important;
}

.wa-incoming-bubble {
  align-self: flex-start !important;
  background: #FFFFFF !important;
  color: #111B21 !important;
  border-top-left-radius: 0 !important;
}

.wa-incoming-bubble::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -8px !important;
  width: 0 !important;
  height: 0 !important;
  border: 8px solid transparent !important;
  border-top-color: #FFFFFF !important;
  border-right-color: #FFFFFF !important;
}

.wa-outgoing-bubble {
  align-self: flex-end !important;
  background: #E7FFDB !important;
  color: #111B21 !important;
  border-top-right-radius: 0 !important;
}

.wa-outgoing-bubble::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: -8px !important;
  width: 0 !important;
  height: 0 !important;
  border: 8px solid transparent !important;
  border-top-color: #E7FFDB !important;
  border-left-color: #E7FFDB !important;
}

/* Step 1: Category Chips */
.wa-step-box {
  background: #FFFFFF !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.wa-step-label {
  display: block !important;
  font-family: var(--font-label) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  color: #075E54 !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 8px !important;
}

.wa-interactive-chips-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

.wa-chip {
  background: #F0F2F5 !important;
  border: 1px solid rgba(7, 94, 84, 0.2) !important;
  color: #075E54 !important;
  font-family: var(--font-body) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.wa-chip:hover {
  background: #E7FFDB !important;
  border-color: #25D366 !important;
}

.wa-chip.active {
  background: #075E54 !important;
  color: #FFFFFF !important;
  border-color: #075E54 !important;
}

/* Step 2: Clean Guided Inputs */
.wa-clean-guided-form {
  background: #FFFFFF !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.wa-input-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

.wa-clean-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.field-title {
  font-family: var(--font-label) !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  color: #075E54 !important;
  letter-spacing: 0.04em !important;
}

.wa-field-input {
  width: 100% !important;
  background: #F0F2F5 !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 8px !important;
  padding: 7px 10px !important;
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  color: #111B21 !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.wa-field-input:focus {
  border-color: #25D366 !important;
  background: #FFFFFF !important;
}

.wa-select-clean {
  cursor: pointer !important;
}

/* Bottom Action Launch Strip */
.wa-bottom-action-strip {
  padding: 14px 16px !important;
  background: #FFFFFF !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.btn-whatsapp-direct-send {
  width: 100% !important;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  color: #FFFFFF !important;
  font-family: var(--font-label) !important;
  font-size: 0.86rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  padding: 13px 20px !important;
  border-radius: 14px !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4) !important;
  transition: all 0.25s ease !important;
}

.btn-whatsapp-direct-send:hover {
  background: linear-gradient(135deg, #1EBE5D 0%, #0E7A6E 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5) !important;
}

.wa-guarantee-note {
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  color: #667781 !important;
  text-align: center !important;
  margin: 0 !important;
}

/* Responsive Breakpoints */
@media (max-width: 992px) {
  .exec-contact-two-col {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
}

@media (max-width: 600px) {
  .section-executive-contact {
    padding: 44px 0 54px !important;
  }
  .executive-physical-card {
    padding: 24px 20px !important;
    border-radius: 20px !important;
  }
  .holder-name {
    font-size: 1.6rem !important;
  }
  .wa-interactive-chips-row,
  .wa-input-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
}


/* ================================================================
   VELVET VIP BOOKING LOUNGE (ZERO GAPS, EQUAL HEIGHT, ULTRA-SEAMLESS)
   ================================================================ */

.section-vip-lounge {
  padding: 64px 0 76px !important;
  background: #FAF8F2 !important;
  position: relative !important;
}

.vip-lounge-enclosure {
  background: #061910 !important;
  border-radius: 28px !important;
  padding: 32px !important;
  border: 1.5px solid rgba(212, 175, 55, 0.4) !important;
  box-shadow: 
    0 24px 60px rgba(6, 25, 16, 0.25),
    0 4px 16px rgba(0, 0, 0, 0.3) !important;
  margin-top: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

.vip-lounge-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.08fr !important;
  gap: 28px !important;
  align-items: stretch !important;
}

.vip-card-wing,
.vip-wa-wing {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.vip-trust-footer-ribbon {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(212, 175, 55, 0.25) !important;
}

.trust-pill-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-family: var(--font-body) !important;
  font-size: 0.78rem !important;
}

.trust-pill-item i {
  font-size: 1.1rem !important;
  color: #E8C84D !important;
}

.trust-pill-item span strong {
  display: block !important;
  color: #FFFFFF !important;
  font-family: var(--font-label) !important;
  font-size: 0.8rem !important;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .vip-lounge-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .vip-trust-footer-ribbon {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

@media (max-width: 600px) {
  .vip-lounge-enclosure {
    padding: 20px 14px !important;
    border-radius: 20px !important;
  }
  .vip-trust-footer-ribbon {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}


/* ================================================================
   BUSINESS CARD VIP METRICS & LIVE STATUS (ZERO GAP ENHANCEMENT)
   ================================================================ */

.card-metrics-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin: 12px 0 16px !important;
  background: rgba(0, 0, 0, 0.25) !important;
  padding: 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(212, 175, 55, 0.2) !important;
}

.metric-box {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.metric-box i {
  font-size: 1.1rem !important;
  color: #E8C84D !important;
}

.metric-box div strong {
  display: block !important;
  font-family: var(--font-label) !important;
  font-size: 0.82rem !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

.metric-box div span {
  display: block !important;
  font-family: var(--font-body) !important;
  font-size: 0.68rem !important;
  color: rgba(255, 255, 255, 0.72) !important;
}

.card-live-status-banner {
  background: rgba(37, 211, 102, 0.12) !important;
  border: 1px solid rgba(37, 211, 102, 0.3) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 18px !important;
  font-family: var(--font-body) !important;
  font-size: 0.76rem !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.pulse-live-green {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  border-radius: 50% !important;
  background: #25D366 !important;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.3) !important;
}

.card-live-status-banner strong {
  color: #25D366 !important;
  font-weight: 700 !important;
}


/* ================================================================
   RECREATED CONTACT SECTION: OPTION 1 & OPTION 2
   ================================================================ */

.section-recreated-contact {
  padding: 64px 0 76px !important;
  background: #FAF8F2 !important;
  position: relative !important;
}

.design-switcher-bar {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 0 auto 32px !important;
  max-width: 680px !important;
}

.design-tab-btn {
  flex: 1 !important;
  background: #FFFFFF !important;
  border: 1.5px solid rgba(197, 155, 39, 0.35) !important;
  color: #0E2018 !important;
  font-family: var(--font-label) !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  padding: 10px 18px !important;
  border-radius: 25px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 14px rgba(14, 32, 24, 0.05) !important;
  transition: all 0.25s ease !important;
}

.design-tab-btn:hover {
  background: rgba(197, 155, 39, 0.1) !important;
  border-color: #AA820A !important;
}

.design-tab-btn.active {
  background: #0E2018 !important;
  color: #E8C84D !important;
  border-color: #0E2018 !important;
  box-shadow: 0 6px 20px rgba(14, 32, 24, 0.2) !important;
}

.contact-design-view {
  display: none !important;
}

.contact-design-view.active {
  display: block !important;
  animation: fadeInDesign 0.35s ease forwards !important;
}

@keyframes fadeInDesign {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   OPTION 1: ROYAL EXECUTIVE CONCIERGE
   ================================================================ */
.royal-concierge-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.15fr !important;
  gap: 32px !important;
  align-items: stretch !important;
}

.royal-anchor-card,
.royal-form-card {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(197, 155, 39, 0.3) !important;
  border-radius: 24px !important;
  padding: 36px 32px !important;
  box-shadow: 0 16px 45px rgba(14, 32, 24, 0.06) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}

.royal-badge-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(197, 155, 39, 0.12) !important;
  border: 1px solid rgba(197, 155, 39, 0.35) !important;
  color: #AA820A !important;
  font-family: var(--font-label) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  margin-bottom: 12px !important;
  align-self: flex-start !important;
}

.royal-title {
  font-family: var(--font-head) !important;
  font-size: 1.95rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
  line-height: 1.2 !important;
  margin: 0 0 16px !important;
}

.royal-title em {
  color: #AA820A !important;
  font-style: italic !important;
}

.royal-quote-box {
  background: #FAF8F2 !important;
  border-left: 3px solid #AA820A !important;
  padding: 14px 16px !important;
  border-radius: 0 14px 14px 0 !important;
  margin-bottom: 20px !important;
}

.quote-text {
  font-family: var(--font-body) !important;
  font-size: 0.86rem !important;
  color: #2D3748 !important;
  line-height: 1.45 !important;
  font-style: italic !important;
  margin: 0 0 10px !important;
}

.quote-author {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.author-avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  border: 1px solid #AA820A !important;
  object-fit: cover !important;
  background: #FFFFFF !important;
}

.quote-author strong {
  display: block !important;
  font-family: var(--font-label) !important;
  font-size: 0.78rem !important;
  color: #0E2018 !important;
  font-weight: 800 !important;
}

.quote-author span {
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  color: #718096 !important;
}

.royal-contact-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}

.royal-contact-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
}

.icon-circle-gold {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 50% !important;
  background: rgba(197, 155, 39, 0.12) !important;
  border: 1px solid rgba(197, 155, 39, 0.3) !important;
  color: #AA820A !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.85rem !important;
}

.item-label {
  font-family: var(--font-label) !important;
  font-size: 0.66rem !important;
  font-weight: 800 !important;
  color: #718096 !important;
  letter-spacing: 0.08em !important;
  display: block !important;
  margin-bottom: 2px !important;
}

.phone-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.phone-group a.phone-link {
  color: #0E2018 !important;
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.phone-group a.phone-link:hover {
  color: #AA820A !important;
}

.phone-pipe {
  color: rgba(197, 155, 39, 0.5) !important;
}

.item-val {
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #0E2018 !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

.royal-action-row {
  display: grid !important;
  grid-template-columns: 1.3fr 1fr !important;
  gap: 12px !important;
}

.btn-royal-wa {
  background: #25D366 !important;
  color: #FFFFFF !important;
  font-family: var(--font-label) !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3) !important;
  transition: all 0.2s ease !important;
}

.btn-royal-wa:hover {
  background: #1EBE5D !important;
  transform: translateY(-2px) !important;
}

.btn-royal-call {
  background: #0E2018 !important;
  color: #E8C84D !important;
  border: 1px solid #AA820A !important;
  font-family: var(--font-label) !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
}

.btn-royal-call:hover {
  background: #183327 !important;
  transform: translateY(-2px) !important;
}

/* Form Styles */
.form-title {
  font-family: var(--font-head) !important;
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
  margin: 0 0 4px !important;
}

.form-subtitle {
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  color: #718096 !important;
  margin: 0 0 20px !important;
}

.royal-input-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}

.royal-field-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.royal-field-wrap.full-width {
  grid-column: 1 / -1 !important;
}

.royal-field-wrap label {
  font-family: var(--font-label) !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
}

.input-container {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.field-icon {
  position: absolute !important;
  left: 12px !important;
  color: #AA820A !important;
  font-size: 0.85rem !important;
  pointer-events: none !important;
}

.textarea-icon {
  top: 12px !important;
}

.royal-input {
  width: 100% !important;
  background: #FAF8F2 !important;
  border: 1.5px solid rgba(197, 155, 39, 0.25) !important;
  border-radius: 12px !important;
  padding: 10px 12px 10px 36px !important;
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  color: #0E2018 !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

.royal-input:focus {
  border-color: #AA820A !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(170, 130, 10, 0.12) !important;
}

.select-box {
  position: relative !important;
}

.royal-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  padding-right: 30px !important;
}

.select-chevron {
  position: absolute !important;
  right: 12px !important;
  color: #AA820A !important;
  font-size: 0.72rem !important;
  pointer-events: none !important;
}

.royal-textarea {
  min-height: 60px !important;
  resize: vertical !important;
}

.btn-royal-submit {
  background: linear-gradient(135deg, #AA820A 0%, #C59B27 50%, #8E6C05 100%) !important;
  color: #FFFFFF !important;
  font-family: var(--font-label) !important;
  font-weight: 800 !important;
  font-size: 0.86rem !important;
  letter-spacing: 0.06em !important;
  padding: 13px 20px !important;
  border-radius: 14px !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-shadow: 0 6px 20px rgba(170, 130, 10, 0.3) !important;
  transition: all 0.25s ease !important;
  width: 100% !important;
  margin-top: 4px !important;
}

.btn-royal-submit:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 26px rgba(170, 130, 10, 0.4) !important;
}

.royal-form-trust-note {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: 8px !important;
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  color: #718096 !important;
  text-align: center !important;
}


/* ================================================================
   OPTION 2: MODERN LUXURY BENTO GRID
   ================================================================ */
.bento-modern-grid {
  display: grid !important;
  grid-template-columns: 1.25fr 1fr 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 20px !important;
}

.bento-form-hero {
  grid-row: span 2 !important;
}

.bento-founder-card {
  grid-column: span 2 !important;
}

.bento-card {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(197, 155, 39, 0.3) !important;
  border-radius: 20px !important;
  padding: 26px !important;
  box-shadow: 0 12px 36px rgba(14, 32, 24, 0.05) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.bento-card:hover {
  box-shadow: 0 16px 44px rgba(14, 32, 24, 0.08) !important;
  transform: translateY(-2px) !important;
}

.bento-title {
  font-family: var(--font-head) !important;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
  margin: 0 0 4px !important;
}

.bento-desc {
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  color: #718096 !important;
  margin: 0 0 16px !important;
}

.bento-service-chips-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}

.bento-chip {
  background: #FAF8F2 !important;
  border: 1px solid rgba(197, 155, 39, 0.3) !important;
  color: #0E2018 !important;
  font-family: var(--font-label) !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  padding: 8px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
}

.bento-chip.active {
  background: #0E2018 !important;
  color: #E8C84D !important;
  border-color: #0E2018 !important;
}

.bento-input-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.bento-field-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

.bento-field,
.bento-field-full {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.bento-field label,
.bento-field-full label {
  font-family: var(--font-label) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
}

.bento-input {
  width: 100% !important;
  background: #FAF8F2 !important;
  border: 1px solid rgba(197, 155, 39, 0.25) !important;
  border-radius: 10px !important;
  padding: 9px 12px !important;
  font-family: var(--font-body) !important;
  font-size: 0.84rem !important;
  color: #0E2018 !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.bento-input:focus {
  border-color: #AA820A !important;
  background: #FFFFFF !important;
}

.btn-bento-submit {
  background: #25D366 !important;
  color: #FFFFFF !important;
  font-family: var(--font-label) !important;
  font-size: 0.84rem !important;
  font-weight: 800 !important;
  padding: 12px 18px !important;
  border-radius: 12px !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3) !important;
  transition: all 0.2s ease !important;
  margin-top: 4px !important;
}

.btn-bento-submit:hover {
  background: #1EBE5D !important;
  transform: translateY(-2px) !important;
}

/* Bento Founder Tile */
.bento-founder-top {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 10px !important;
}

.bento-avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  border: 1.5px solid #AA820A !important;
  object-fit: cover !important;
  background: #FFFFFF !important;
}

.bento-online-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(37, 211, 102, 0.15) !important;
  color: #128C7E !important;
  font-family: var(--font-label) !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  margin-bottom: 2px !important;
}

.pulse-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #25D366 !important;
}

.founder-heading {
  font-family: var(--font-head) !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
  margin: 0 !important;
}

.founder-sub {
  font-family: var(--font-body) !important;
  font-size: 0.74rem !important;
  color: #718096 !important;
  margin: 0 !important;
}

.founder-quote {
  font-family: var(--font-body) !important;
  font-size: 0.84rem !important;
  font-style: italic !important;
  color: #4A5568 !important;
  margin: 0 0 14px !important;
}

.bento-phones {
  display: flex !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.bento-phone-btn {
  flex: 1 !important;
  background: #FAF8F2 !important;
  border: 1px solid rgba(197, 155, 39, 0.3) !important;
  color: #0E2018 !important;
  font-family: var(--font-label) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

.bento-phone-btn:hover {
  background: rgba(197, 155, 39, 0.15) !important;
  color: #AA820A !important;
}

.bento-wa-btn {
  background: #0E2018 !important;
  color: #E8C84D !important;
  border: 1px solid #AA820A !important;
  font-family: var(--font-label) !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.bento-wa-btn:hover {
  background: #1A382B !important;
}

/* Location & Rating Bento Tiles */
.bento-icon-badge {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(197, 155, 39, 0.15) !important;
  color: #AA820A !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.9rem !important;
  margin-bottom: 10px !important;
}

.bento-location-card h4,
.bento-rating-card h4 {
  font-family: var(--font-head) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
  margin: 0 0 4px !important;
}

.bento-location-card p,
.bento-rating-card p {
  font-family: var(--font-body) !important;
  font-size: 0.78rem !important;
  color: #718096 !important;
  margin: 0 0 10px !important;
  line-height: 1.35 !important;
}

.bento-coverage-tag {
  font-family: var(--font-label) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #128C7E !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.rating-huge {
  font-family: var(--font-head) !important;
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  color: #AA820A !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  line-height: 1 !important;
  margin-bottom: 6px !important;
}

.rating-huge .stars {
  font-size: 1rem !important;
  color: #E8C84D !important;
}

/* Responsive Rules */
@media (max-width: 992px) {
  .royal-concierge-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .bento-modern-grid {
    grid-template-columns: 1fr !important;
  }
  .bento-form-hero,
  .bento-founder-card {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
}

@media (max-width: 600px) {
  .section-recreated-contact {
    padding: 44px 0 54px !important;
  }
  .design-switcher-bar {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .royal-anchor-card,
  .royal-form-card,
  .bento-card {
    padding: 22px 18px !important;
    border-radius: 18px !important;
  }
  .royal-input-grid,
  .bento-field-row {
    grid-template-columns: 1fr !important;
  }
  .royal-action-row {
    grid-template-columns: 1fr !important;
  }
}


/* ================================================================
   MASTER MODERN LUXURY BENTO GRID SECTION
   ================================================================ */

.section-luxury-bento {
  padding: 64px 0 76px !important;
  background: #FAF8F2 !important;
  position: relative !important;
}

.bento-modern-grid {
  display: grid !important;
  grid-template-columns: 1.25fr 1fr 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 22px !important;
  margin-top: 24px !important;
}

.bento-form-hero {
  grid-row: span 2 !important;
}

.bento-founder-card {
  grid-column: span 2 !important;
}

.bento-card {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(197, 155, 39, 0.35) !important;
  border-radius: 24px !important;
  padding: 30px !important;
  box-shadow: 0 14px 40px rgba(14, 32, 24, 0.06) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.bento-card:hover {
  box-shadow: 0 20px 50px rgba(14, 32, 24, 0.1) !important;
  transform: translateY(-3px) !important;
}

.bento-trust-subtext {
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  color: #718096 !important;
  text-align: center !important;
  margin-top: 8px !important;
}

.btn-bento-submit {
  background: linear-gradient(135deg, #AA820A 0%, #C59B27 50%, #8E6C05 100%) !important;
  color: #FFFFFF !important;
  font-family: var(--font-label) !important;
  font-size: 0.86rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  padding: 13px 20px !important;
  border-radius: 14px !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-shadow: 0 6px 20px rgba(170, 130, 10, 0.3) !important;
  transition: all 0.25s ease !important;
  margin-top: 4px !important;
  width: 100% !important;
}

.btn-bento-submit:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 26px rgba(170, 130, 10, 0.4) !important;
}


/* ================================================================
   100% ROCK-SOLID RESPONSIVE BENTO GRID SYSTEM
   ================================================================ */

.section-luxury-bento {
  padding: 64px 0 76px !important;
  background: #FAF8F2 !important;
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.bento-modern-grid {
  display: grid !important;
  grid-template-columns: 1.25fr 1fr 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 22px !important;
  margin-top: 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.bento-form-hero {
  grid-row: span 2 !important;
}

.bento-founder-card {
  grid-column: span 2 !important;
}

.bento-card {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(197, 155, 39, 0.35) !important;
  border-radius: 24px !important;
  padding: 30px !important;
  box-shadow: 0 14px 40px rgba(14, 32, 24, 0.06) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.bento-card:hover {
  box-shadow: 0 20px 50px rgba(14, 32, 24, 0.1) !important;
  transform: translateY(-3px) !important;
}

.bento-trust-subtext {
  font-family: var(--font-body) !important;
  font-size: 0.74rem !important;
  color: #718096 !important;
  text-align: center !important;
  margin-top: 10px !important;
}

.btn-bento-submit {
  background: linear-gradient(135deg, #AA820A 0%, #C59B27 50%, #8E6C05 100%) !important;
  color: #FFFFFF !important;
  font-family: var(--font-label) !important;
  font-size: 0.86rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  padding: 13px 20px !important;
  border-radius: 14px !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-shadow: 0 6px 20px rgba(170, 130, 10, 0.3) !important;
  transition: all 0.25s ease !important;
  margin-top: 6px !important;
  width: 100% !important;
}

.btn-bento-submit:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 26px rgba(170, 130, 10, 0.4) !important;
}

/* ================================================================
   RESPONSIVE BREAKPOINTS (TABLET & MOBILE)
   ================================================================ */

/* Tablet Landscape & Medium Screens (769px - 1024px) */
@media (max-width: 1024px) {
  .bento-modern-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
    gap: 18px !important;
  }
  
  .bento-form-hero {
    grid-column: span 2 !important;
    grid-row: auto !important;
  }
  
  .bento-founder-card {
    grid-column: span 2 !important;
  }
  
  .bento-location-card,
  .bento-rating-card {
    grid-column: span 1 !important;
  }
}

/* Mobile & Small Tablet (max-width: 768px) */
@media (max-width: 768px) {
  .section-luxury-bento {
    padding: 44px 0 54px !important;
  }
  
  .bento-modern-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 18px !important;
  }
  
  .bento-form-hero,
  .bento-founder-card,
  .bento-location-card,
  .bento-rating-card {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
  
  .bento-card {
    padding: 22px 18px !important;
    border-radius: 18px !important;
  }
  
  .bento-title {
    font-size: 1.45rem !important;
  }
  
  .bento-service-chips-row {
    grid-template-columns: 1fr 1fr !important;
  }
  
  .bento-field-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

/* Extra Small Phones (max-width: 480px) */
@media (max-width: 480px) {
  .bento-service-chips-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  
  .bento-phones {
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  .bento-avatar {
    width: 42px !important;
    height: 42px !important;
  }
  
  .founder-heading {
    font-size: 1.15rem !important;
  }
}


/* ================================================================
   ANIMATED MULTI-STEP CATERING FEAST CONCIERGE
   ================================================================ */

.section-catering-concierge {
  padding: 64px 0 76px !important;
  background: #FAF8F2 !important;
  position: relative !important;
  overflow: hidden !important;
}

.concierge-master-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.25fr !important;
  gap: 32px !important;
  align-items: stretch !important;
  margin-top: 24px !important;
}

/* ================================================================
   1. LEFT WING: CHEF'S LIVE KITCHEN PASS CARD
   ================================================================ */
.concierge-kitchen-pass-card {
  position: relative !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  border: 1.5px solid rgba(212, 175, 55, 0.45) !important;
  box-shadow: 0 20px 50px rgba(10, 28, 20, 0.25) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 520px !important;
}

.kitchen-pass-bg-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 0 !important;
  transition: transform 0.6s ease !important;
}

.concierge-kitchen-pass-card:hover .kitchen-pass-bg-img {
  transform: scale(1.04) !important;
}

.kitchen-card-bg-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(8, 28, 19, 0.9) 0%, rgba(6, 22, 15, 0.95) 100%) !important;
  z-index: 1 !important;
}

.kitchen-card-content {
  position: relative !important;
  z-index: 2 !important;
  padding: 32px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  box-sizing: border-box !important;
  gap: 20px !important;
}

.chef-live-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(37, 211, 102, 0.15) !important;
  border: 1px solid rgba(37, 211, 102, 0.35) !important;
  padding: 5px 14px !important;
  border-radius: 20px !important;
  font-family: var(--font-label) !important;
  font-size: 0.72rem !important;
  color: #FFFFFF !important;
  align-self: flex-start !important;
}

.pulse-live-green-ring {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #25D366 !important;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.3) !important;
  animation: pulseGreenRing 2s infinite !important;
}

@keyframes pulseGreenRing {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.kitchen-gold-pill {
  display: inline-block !important;
  font-family: var(--font-label) !important;
  font-size: 0.64rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  color: #E8C84D !important;
  margin-bottom: 4px !important;
}

.kitchen-hero-title {
  font-family: var(--font-head) !important;
  font-size: 1.9rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  line-height: 1.15 !important;
  margin: 0 0 4px !important;
}

.kitchen-tamil-quote {
  font-family: var(--font-tamil) !important;
  font-size: 0.92rem !important;
  color: #E8C84D !important;
  font-style: italic !important;
  margin: 0 !important;
}

/* Live Summary Box inside Left Card */
.live-feast-summary-box {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
}

.summary-box-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--font-label) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: #E8C84D !important;
  margin-bottom: 8px !important;
}

.summary-dynamic-items {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.summary-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 0.8rem !important;
}

.item-tag {
  font-family: var(--font-label) !important;
  font-size: 0.65rem !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-weight: 700 !important;
}

.summary-item strong {
  color: #FFFFFF !important;
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  transition: all 0.3s ease !important;
}

/* Trust Badges Grid */
.kitchen-trust-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

.trust-mini-chip {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  padding: 6px 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  color: #FFFFFF !important;
}

/* Hotline */
.kitchen-direct-hotline {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: rgba(232, 200, 77, 0.12) !important;
  border: 1px solid rgba(232, 200, 77, 0.3) !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
}

.kitchen-direct-hotline i {
  font-size: 1.1rem !important;
}

.hotline-sub {
  font-family: var(--font-label) !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: #E8C84D !important;
  display: block !important;
}

.hotline-links {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.hotline-links a.phone-link {
  color: #FFFFFF !important;
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.hotline-links a.phone-link:hover {
  color: #E8C84D !important;
}

/* ================================================================
   2. RIGHT WING: ANIMATED MULTI-STEP CONVERSATIONAL FEAST STUDIO
   ================================================================ */
.concierge-studio-card {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(197, 155, 39, 0.35) !important;
  border-radius: 26px !important;
  padding: 32px 28px !important;
  box-shadow: 0 16px 45px rgba(14, 32, 24, 0.06) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  min-height: 520px !important;
}

/* Progress Tracker */
.studio-progress-tracker {
  margin-bottom: 20px !important;
}

.progress-bar-fill-track {
  height: 6px !important;
  background: #F0EDE5 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin-bottom: 10px !important;
}

.progress-bar-indicator {
  height: 100% !important;
  background: linear-gradient(90deg, #AA820A 0%, #E8C84D 100%) !important;
  border-radius: 10px !important;
  transition: width 0.35s ease !important;
}

.progress-steps-label-row {
  display: flex !important;
  justify-content: space-between !important;
}

.step-label-pill {
  font-family: var(--font-label) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  color: #A0AEC0 !important;
  letter-spacing: 0.04em !important;
  transition: color 0.3s ease !important;
}

.step-label-pill.active {
  color: #0E2018 !important;
  font-weight: 900 !important;
}

/* Dialogue Speech Bubble */
.step-dialogue-bubble {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  background: #FAF8F2 !important;
  border: 1px solid rgba(197, 155, 39, 0.25) !important;
  border-radius: 16px !important;
  padding: 12px 16px !important;
  margin-bottom: 18px !important;
}

.chef-bubble-avatar img {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  border: 1px solid #AA820A !important;
  object-fit: cover !important;
  background: #FFFFFF !important;
}

.bubble-speech {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.chef-name-tag {
  font-family: var(--font-label) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  color: #AA820A !important;
  letter-spacing: 0.05em !important;
}

.bubble-speech p {
  font-family: var(--font-body) !important;
  font-size: 0.86rem !important;
  color: #0E2018 !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
}

/* Step Containers */
.concierge-step-container {
  display: none !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.concierge-step-container.active {
  display: flex !important;
  animation: fadeInStep 0.35s ease forwards !important;
}

@keyframes fadeInStep {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* STEP 1: OCCASION IMAGE CARDS */
.occasion-cards-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

.occasion-select-card {
  background: #FAF8F2 !important;
  border: 2px solid transparent !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.25s ease !important;
}

.occasion-select-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(14, 32, 24, 0.08) !important;
}

.occasion-select-card.active {
  border-color: #AA820A !important;
  background: #FFFFFF !important;
  box-shadow: 0 8px 24px rgba(170, 130, 10, 0.18) !important;
}

.card-image-wrap {
  position: relative !important;
  height: 90px !important;
  overflow: hidden !important;
}

.card-image-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.4s ease !important;
}

.occasion-select-card:hover .card-image-wrap img {
  transform: scale(1.06) !important;
}

.card-image-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%) !important;
}

.check-badge {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  color: #FFFFFF !important;
  font-size: 1.1rem !important;
  opacity: 0.5 !important;
  transition: all 0.2s ease !important;
}

.occasion-select-card.active .check-badge {
  color: #25D366 !important;
  opacity: 1 !important;
}

.card-caption {
  padding: 10px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.card-caption strong {
  font-family: var(--font-body) !important;
  font-size: 0.84rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
}

.card-caption span {
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  color: #718096 !important;
}

/* STEP 2: GUEST PILLS & DATE */
.step2-interactive-controls {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.control-heading {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--font-label) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 8px !important;
}

.guest-pills-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.guest-pill {
  flex: 1 1 calc(33.333% - 8px) !important;
  background: #FAF8F2 !important;
  border: 1.5px solid rgba(197, 155, 39, 0.3) !important;
  color: #0E2018 !important;
  font-family: var(--font-label) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  padding: 10px 8px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
}

.guest-pill:hover {
  background: rgba(197, 155, 39, 0.15) !important;
}

.guest-pill.active {
  background: #0E2018 !important;
  color: #E8C84D !important;
  border-color: #0E2018 !important;
}

.date-input-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.date-icon {
  position: absolute !important;
  left: 14px !important;
  color: #AA820A !important;
  font-size: 0.9rem !important;
  pointer-events: none !important;
}

.step-date-input {
  width: 100% !important;
  background: #FAF8F2 !important;
  border: 1.5px solid rgba(197, 155, 39, 0.3) !important;
  border-radius: 12px !important;
  padding: 11px 14px 11px 40px !important;
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  color: #0E2018 !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.step-date-input:focus {
  border-color: #AA820A !important;
  background: #FFFFFF !important;
}

/* STEP 3: CUISINE CARDS */
.cuisine-options-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.cuisine-option-card {
  background: #FAF8F2 !important;
  border: 1.5px solid rgba(197, 155, 39, 0.25) !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.cuisine-option-card:hover {
  background: #FFFFFF !important;
  border-color: #AA820A !important;
}

.cuisine-option-card.active {
  background: #FFFFFF !important;
  border-color: #AA820A !important;
  box-shadow: 0 4px 16px rgba(170, 130, 10, 0.15) !important;
}

.cuisine-icon-circle {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 50% !important;
  background: rgba(197, 155, 39, 0.12) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.95rem !important;
}

.cuisine-card-text {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}

.cuisine-card-text strong {
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
}

.cuisine-card-text span {
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  color: #718096 !important;
}

.cuisine-radio-dot {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  border: 2px solid #CBD5E0 !important;
  transition: all 0.2s ease !important;
}

.cuisine-option-card.active .cuisine-radio-dot {
  border-color: #AA820A !important;
  background: #AA820A !important;
  box-shadow: inset 0 0 0 3px #FFFFFF !important;
}

/* STEP 4: FINAL DISPATCH FORM */
.final-step-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.final-fields-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

.final-input-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.final-input-wrap label {
  font-family: var(--font-label) !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
}

.field-with-icon {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.icon-gold {
  position: absolute !important;
  left: 12px !important;
  color: #AA820A !important;
  font-size: 0.85rem !important;
  pointer-events: none !important;
}

.final-text-input {
  width: 100% !important;
  background: #FAF8F2 !important;
  border: 1.5px solid rgba(197, 155, 39, 0.3) !important;
  border-radius: 12px !important;
  padding: 10px 12px 10px 36px !important;
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  color: #0E2018 !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.final-text-input:focus {
  border-color: #AA820A !important;
  background: #FFFFFF !important;
}

.btn-whatsapp-grand-dispatch {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  color: #FFFFFF !important;
  font-family: var(--font-label) !important;
  font-size: 0.86rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  padding: 14px 20px !important;
  border-radius: 14px !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-shadow: 0 6px 22px rgba(37, 211, 102, 0.4) !important;
  transition: all 0.25s ease !important;
  margin-top: 6px !important;
}

.btn-whatsapp-grand-dispatch:hover {
  background: linear-gradient(135deg, #1EBE5D 0%, #0E7A6E 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.5) !important;
}

.final-trust-subtext {
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  color: #718096 !important;
  text-align: center !important;
  margin-top: 4px !important;
}

/* Step Navigation Footer Buttons */
.step-nav-footer {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  margin-top: 14px !important;
}

.step-nav-footer.between {
  justify-content: space-between !important;
}

.btn-step-next {
  background: #0E2018 !important;
  color: #E8C84D !important;
  border: 1px solid #AA820A !important;
  font-family: var(--font-label) !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  padding: 10px 20px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
}

.btn-step-next:hover {
  background: #1C3E2F !important;
  transform: translateX(2px) !important;
}

.btn-step-prev {
  background: #FAF8F2 !important;
  color: #0E2018 !important;
  border: 1px solid rgba(197, 155, 39, 0.3) !important;
  font-family: var(--font-label) !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  padding: 10px 16px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
}

.btn-step-prev:hover {
  background: rgba(197, 155, 39, 0.15) !important;
}

/* ================================================================
   RESPONSIVE BREAKPOINTS (TABLET & MOBILE)
   ================================================================ */

@media (max-width: 1024px) {
  .concierge-master-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

@media (max-width: 600px) {
  .section-catering-concierge {
    padding: 44px 0 54px !important;
  }
  
  .concierge-kitchen-pass-card,
  .concierge-studio-card {
    padding: 22px 18px !important;
    border-radius: 20px !important;
  }
  
  .occasion-cards-grid {
    grid-template-columns: 1fr !important;
  }
  
  .final-fields-row {
    grid-template-columns: 1fr !important;
  }
  
  .guest-pills-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
  
  .progress-steps-label-row {
    font-size: 0.62rem !important;
  }
}


/* ================================================================
   CATERING-THEMED MOTION & STEAMING ANIMATIONS
   ================================================================ */

.animated-steaming-pot-watermark {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 90px !important;
  height: 90px !important;
  z-index: 2 !important;
  opacity: 0.85 !important;
  pointer-events: none !important;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4)) !important;
  animation: floatCauldron 3s infinite ease-in-out !important;
}

@keyframes floatCauldron {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

.steaming-pot-icon {
  width: 100% !important;
  height: 100% !important;
}

.live-flame-tag {
  background: rgba(255, 149, 0, 0.2) !important;
  border: 1px solid rgba(255, 149, 0, 0.4) !important;
  color: #FFA500 !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  padding: 1px 7px !important;
  border-radius: 10px !important;
  margin-left: 4px !important;
}

.live-dot-pulse {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #25D366 !important;
  box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.4) !important;
  animation: pulseLiveDot 1.5s infinite !important;
  margin-left: auto !important;
}

@keyframes pulseLiveDot {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

/* Shimmer Highlight on Selected Occasion Cards */
.occasion-select-card.active {
  position: relative !important;
  overflow: hidden !important;
}

.occasion-select-card.active::after {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: linear-gradient(60deg, transparent 40%, rgba(232, 200, 77, 0.15) 50%, transparent 60%) !important;
  transform: rotate(25deg) !important;
  animation: shimmerCard 3s infinite !important;
  pointer-events: none !important;
}

@keyframes shimmerCard {
  0% { transform: translateX(-100%) rotate(25deg); }
  100% { transform: translateX(100%) rotate(25deg); }
}

/* Pulsing Submit Button Animation */
.btn-whatsapp-grand-dispatch {
  position: relative !important;
  overflow: hidden !important;
  animation: pulseButtonGlow 3s infinite alternate ease-in-out !important;
}

@keyframes pulseButtonGlow {
  0% { box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35); }
  100% { box-shadow: 0 10px 30px rgba(37, 211, 102, 0.6); }
}


/* ================================================================
   3D GAMIFIED VIRTUAL KITCHEN METAVERSE & MENU STUDIO
   ================================================================ */

.section-3d-kitchen-world {
  padding: 68px 0 80px !important;
  background: #061A12 !important;
  color: #FFFFFF !important;
  position: relative !important;
  overflow: hidden !important;
}

.section-3d-kitchen-world .ornamental-header h2 {
  color: #FAF8F2 !important;
}

.section-3d-kitchen-world .section-subtitle {
  color: rgba(255, 255, 255, 0.75) !important;
}

.kitchen-3d-metaverse-wrap {
  position: relative !important;
  border-radius: 30px !important;
  border: 1.5px solid rgba(212, 175, 55, 0.4) !important;
  background: radial-gradient(circle at 50% 30%, rgba(14, 45, 32, 0.85) 0%, rgba(6, 22, 15, 0.98) 100%) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), inset 0 0 40px rgba(212, 175, 55, 0.1) !important;
  padding: 32px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  margin-top: 24px !important;
}

.kitchen-3d-bg-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 0.6 !important;
}

.kitchen-hud-top {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 24px !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
  padding-bottom: 16px !important;
}

.hud-status-badge {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--font-label) !important;
  font-size: 0.72rem !important;
  color: #E8C84D !important;
  letter-spacing: 0.06em !important;
}

.hud-guest-counter {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.hud-label {
  font-family: var(--font-label) !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  letter-spacing: 0.08em !important;
}

.hud-level-tag {
  background: rgba(232, 200, 77, 0.15) !important;
  border: 1px solid rgba(232, 200, 77, 0.35) !important;
  color: #E8C84D !important;
  font-family: var(--font-label) !important;
  font-size: 0.64rem !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 8px !important;
}

/* ================================================================
   3D INTERACTIVE KITCHEN STATIONS GRID
   ================================================================ */
.kitchen-stations-3d-grid {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 18px !important;
  perspective: 1200px !important;
  margin-bottom: 28px !important;
}

.station-3d-card {
  background: rgba(14, 38, 27, 0.7) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.25) !important;
  border-radius: 20px !important;
  padding: 18px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  backdrop-filter: blur(8px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transform-style: preserve-3d !important;
}

.station-3d-card:hover {
  transform: translateY(-8px) scale(1.03) rotateX(4deg) !important;
  border-color: #E8C84D !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 20px rgba(232, 200, 77, 0.25) !important;
  background: rgba(20, 52, 38, 0.85) !important;
}

.station-3d-card.active {
  border-color: #25D366 !important;
  box-shadow: 0 0 24px rgba(37, 211, 102, 0.35) !important;
  background: rgba(18, 48, 34, 0.9) !important;
}

.station-card-inner {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.station-3d-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.station-num-pill {
  font-family: var(--font-label) !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  color: #E8C84D !important;
  background: rgba(232, 200, 77, 0.12) !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(232, 200, 77, 0.25) !important;
}

.station-temp-tag {
  font-family: var(--font-label) !important;
  font-size: 0.6rem !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-weight: 700 !important;
}

.station-visual-wrap {
  position: relative !important;
  height: 110px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: rgba(0, 0, 0, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.station-thumb-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.4s ease !important;
}

.station-3d-card:hover .station-thumb-img {
  transform: scale(1.1) !important;
}

.station-3d-icon-svg {
  width: 75px !important;
  height: 75px !important;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5)) !important;
}

.station-title {
  font-family: var(--font-head) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #FAF8F2 !important;
  margin: 0 0 4px !important;
  line-height: 1.2 !important;
}

.station-desc {
  font-family: var(--font-body) !important;
  font-size: 0.74rem !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin: 0 0 10px !important;
  line-height: 1.35 !important;
}

.station-action-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  padding: 7px 10px !important;
  border-radius: 10px !important;
  font-family: var(--font-label) !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  transition: all 0.2s ease !important;
}

.station-3d-card:hover .station-action-btn {
  background: #E8C84D !important;
  color: #0E2018 !important;
  border-color: #E8C84D !important;
}

.station-3d-card.active .station-action-btn {
  background: #25D366 !important;
  color: #FFFFFF !important;
  border-color: #25D366 !important;
}

/* ================================================================
   FLOATING 3D HUD TRAY & BOOKING CONTROLS
   ================================================================ */
.kitchen-gamified-tray-hud {
  position: relative !important;
  z-index: 2 !important;
  background: rgba(10, 28, 19, 0.9) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.4) !important;
  border-radius: 22px !important;
  padding: 22px 24px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(12px) !important;
}

.tray-hud-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding-bottom: 12px !important;
}

.tray-title-group {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.tray-title-group strong {
  display: block !important;
  font-family: var(--font-head) !important;
  font-size: 0.95rem !important;
  color: #FAF8F2 !important;
  letter-spacing: 0.05em !important;
}

.tray-title-group span {
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  color: #E8C84D !important;
}

.tray-items-pills {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.tray-item-pill {
  background: rgba(232, 200, 77, 0.15) !important;
  border: 1px solid rgba(232, 200, 77, 0.4) !important;
  color: #FAF8F2 !important;
  font-family: var(--font-label) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: 12px !important;
  animation: popInPill 0.3s ease forwards !important;
}

@keyframes popInPill {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.tray-booking-controls {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1.5fr auto !important;
  gap: 12px !important;
  align-items: flex-end !important;
}

.tray-input-box {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.tray-input-box label {
  font-family: var(--font-label) !important;
  font-size: 0.64rem !important;
  font-weight: 800 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  letter-spacing: 0.06em !important;
}

.tray-select,
.tray-date-input,
.tray-text-input {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  border-radius: 10px !important;
  padding: 9px 12px !important;
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  color: #FFFFFF !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.tray-select:focus,
.tray-date-input:focus,
.tray-text-input:focus {
  border-color: #E8C84D !important;
  background: rgba(0, 0, 0, 0.6) !important;
}

.btn-game-whatsapp-launch {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  color: #FFFFFF !important;
  font-family: var(--font-label) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  padding: 11px 18px !important;
  border-radius: 12px !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 18px rgba(37, 211, 102, 0.4) !important;
  transition: all 0.25s ease !important;
  white-space: nowrap !important;
}

.btn-game-whatsapp-launch:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.6) !important;
}

/* Responsive 3D Grid */
@media (max-width: 1024px) {
  .kitchen-stations-3d-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .tray-booking-controls {
    grid-template-columns: 1fr 1fr !important;
  }
  .btn-game-whatsapp-launch {
    grid-column: 1 / -1 !important;
    justify-content: center !important;
  }
}

@media (max-width: 640px) {
  .kitchen-stations-3d-grid {
    grid-template-columns: 1fr !important;
  }
  .tray-booking-controls {
    grid-template-columns: 1fr !important;
  }
  .kitchen-3d-metaverse-wrap {
    padding: 20px 16px !important;
    border-radius: 20px !important;
  }
  .hud-status-badge {
    font-size: 0.64rem !important;
  }
  .tray-hud-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
}


/* ================================================================
   MASTER 3-WAY EXPERIENCE SWITCHER BAR
   ================================================================ */

.section-all-experiences-master {
  padding: 68px 0 80px !important;
  background: #FAF8F2 !important;
  position: relative !important;
}

.master-experience-switcher {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 0 auto 32px !important;
  max-width: 820px !important;
}

.exp-switch-btn {
  flex: 1 !important;
  background: #FFFFFF !important;
  border: 1.5px solid rgba(197, 155, 39, 0.35) !important;
  color: #0E2018 !important;
  font-family: var(--font-label) !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  padding: 12px 18px !important;
  border-radius: 25px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 16px rgba(14, 32, 24, 0.06) !important;
  transition: all 0.25s ease !important;
}

.exp-switch-btn:hover {
  background: rgba(197, 155, 39, 0.12) !important;
  border-color: #AA820A !important;
}

.exp-switch-btn.active {
  background: #0E2018 !important;
  color: #E8C84D !important;
  border-color: #0E2018 !important;
  box-shadow: 0 8px 24px rgba(14, 32, 24, 0.25) !important;
}

.master-experience-view {
  display: none !important;
}

.master-experience-view.active {
  display: block !important;
  animation: fadeInExp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes fadeInExp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .master-experience-switcher {
    flex-direction: column !important;
    gap: 8px !important;
  }
}


/* ================================================================
   REFINED RESPONSIVE & HIGH-CONTRAST TYPOGRAPHY SYSTEM
   ================================================================ */

.kitchen-pass-top-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
}

.chef-live-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(14, 38, 27, 0.85) !important;
  border: 1px solid rgba(37, 211, 102, 0.4) !important;
  padding: 6px 12px !important;
  border-radius: 20px !important;
  font-family: var(--font-label) !important;
  font-size: 0.76rem !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.status-name {
  font-weight: 800 !important;
  color: #FFFFFF !important;
}

.compact-steaming-badge {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 50% !important;
  background: rgba(14, 38, 27, 0.85) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  animation: floatCauldron 3s infinite ease-in-out !important;
}

.compact-pot-icon {
  width: 32px !important;
  height: 32px !important;
}

/* Typography Clarity for Left Card */
.kitchen-gold-pill {
  display: inline-block !important;
  font-family: var(--font-label) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  color: #E8C84D !important;
  margin-bottom: 6px !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.kitchen-hero-title {
  font-family: var(--font-head) !important;
  font-size: 1.85rem !important;
  font-weight: 800 !important;
  color: #FAF8F2 !important;
  line-height: 1.2 !important;
  margin: 0 0 6px !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
}

.kitchen-tamil-quote {
  font-family: var(--font-tamil) !important;
  font-size: 0.95rem !important;
  color: #E8C84D !important;
  font-style: italic !important;
  margin: 0 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Live Feast Summary Box Alignment */
.live-feast-summary-box {
  background: rgba(6, 22, 15, 0.75) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  border-radius: 16px !important;
  padding: 16px !important;
  backdrop-filter: blur(8px) !important;
}

.summary-box-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--font-label) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: #E8C84D !important;
  margin-bottom: 10px !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
  padding-bottom: 6px !important;
}

.summary-dynamic-items {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.summary-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  text-align: left !important;
}

.item-tag {
  font-family: var(--font-label) !important;
  font-size: 0.65rem !important;
  color: #E8C84D !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
}

.summary-item strong {
  color: #FAF8F2 !important;
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

/* Hotline Clickable Pills */
.kitchen-direct-hotline {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: rgba(6, 22, 15, 0.75) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
}

.hotline-icon-box {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 50% !important;
  background: rgba(212, 175, 55, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
}

.hotline-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.hotline-links {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.phone-chip-btn {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  color: #FFFFFF !important;
  font-family: var(--font-body) !important;
  font-size: 0.84rem !important;
  font-weight: 800 !important;
  padding: 5px 10px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
}

.phone-chip-btn:hover {
  background: #E8C84D !important;
  color: #0E2018 !important;
}

/* ================================================================
   MOBILE & TABLET RESPONSIVE PERFECTION
   ================================================================ */

@media (max-width: 768px) {
  .concierge-master-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
  
  .concierge-kitchen-pass-card,
  .concierge-studio-card {
    padding: 24px 18px !important;
    border-radius: 20px !important;
    min-height: auto !important;
  }

  .kitchen-pass-top-row {
    flex-wrap: wrap !important;
    justify-content: space-between !important;
  }

  .chef-live-status-badge {
    font-size: 0.72rem !important;
  }

  .kitchen-hero-title {
    font-size: 1.55rem !important;
  }

  .kitchen-tamil-quote {
    font-size: 0.88rem !important;
  }

  .kitchen-trust-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  .trust-mini-chip {
    padding: 6px 8px !important;
    font-size: 0.68rem !important;
  }

  .hotline-links {
    flex-direction: column !important;
    gap: 6px !important;
  }

  .phone-chip-btn {
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }

  .occasion-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .guest-pills-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .final-fields-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

@media (max-width: 420px) {
  .guest-pills-row {
    grid-template-columns: 1fr !important;
  }
  
  .progress-steps-label-row {
    font-size: 0.6rem !important;
  }
}


/* ================================================================
   PRISTINE 5-STAR LUXURY CATERING CONCIERGE (EDITORIAL & HIGH CONTRAST)
   ================================================================ */

.section-catering-concierge {
  padding: 68px 0 80px !important;
  background: #FAF8F2 !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.concierge-master-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.25fr !important;
  gap: 32px !important;
  align-items: stretch !important;
  margin-top: 20px !important;
}

/* ================================================================
   LEFT WING: EXECUTIVE CHEF PASS
   ================================================================ */
.concierge-kitchen-pass-card {
  position: relative !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  border: 1.5px solid rgba(212, 175, 55, 0.4) !important;
  box-shadow: 0 20px 48px rgba(10, 28, 20, 0.22) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background: #082016 !important;
  min-height: 540px !important;
  box-sizing: border-box !important;
}

.kitchen-pass-bg-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 0 !important;
  opacity: 0.25 !important;
}

.kitchen-card-bg-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(8, 30, 21, 0.94) 0%, rgba(5, 18, 12, 0.98) 100%) !important;
  z-index: 1 !important;
}

.kitchen-card-content {
  position: relative !important;
  z-index: 2 !important;
  padding: 32px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  box-sizing: border-box !important;
  gap: 20px !important;
}

/* Top Meta Row */
.pass-header-meta {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25) !important;
  padding-bottom: 14px !important;
}

.pass-founder-badge {
  font-family: var(--font-label) !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  color: #E8C84D !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.pass-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(37, 211, 102, 0.15) !important;
  border: 1px solid rgba(37, 211, 102, 0.4) !important;
  padding: 3px 10px !important;
  border-radius: 12px !important;
  font-family: var(--font-label) !important;
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  color: #25D366 !important;
}

.pulse-dot-green {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #25D366 !important;
  box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.3) !important;
}

/* Brand Identity */
.pass-brand-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.pass-title {
  font-family: var(--font-head) !important;
  font-size: 1.95rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.pass-title em {
  color: #E8C84D !important;
  font-style: italic !important;
}

.pass-tamil-motto {
  font-family: var(--font-tamil) !important;
  font-size: 0.98rem !important;
  color: #E8C84D !important;
  font-style: italic !important;
  margin: 0 !important;
}

.pass-sub-text {
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  color: rgba(255, 255, 255, 0.72) !important;
  margin: 2px 0 0 !important;
  line-height: 1.4 !important;
}

/* Itinerary Card */
.pass-itinerary-card {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  border-radius: 16px !important;
  padding: 16px 18px !important;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.3) !important;
}

.itinerary-card-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--font-label) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: #E8C84D !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding-bottom: 8px !important;
  margin-bottom: 12px !important;
}

.itinerary-live-tag {
  margin-left: auto !important;
  font-size: 0.58rem !important;
  background: rgba(37, 211, 102, 0.15) !important;
  color: #25D366 !important;
  padding: 2px 6px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(37, 211, 102, 0.3) !important;
}

.itinerary-rows {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.itinerary-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.itinerary-row .row-label {
  font-family: var(--font-label) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.itinerary-row .row-value {
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  text-align: right !important;
}

/* Trust Highlights Grid */
.pass-trust-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

.trust-pill {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
  border-radius: 10px !important;
  padding: 7px 10px !important;
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: #FAF8F2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Hotline Bar */
.pass-hotline-bar {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  background: rgba(212, 175, 55, 0.1) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  padding: 12px 16px !important;
  border-radius: 16px !important;
}

.hotline-lead-text {
  font-family: var(--font-label) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  color: #E8C84D !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.hotline-buttons-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

.hotline-btn {
  background: #FFFFFF !important;
  color: #0E2018 !important;
  font-family: var(--font-body) !important;
  font-size: 0.86rem !important;
  font-weight: 800 !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.2s ease !important;
}

.hotline-btn:hover {
  background: #E8C84D !important;
  transform: translateY(-2px) !important;
}

/* ================================================================
   RIGHT WING: STUDIO CARD (CLEAN WHITE EDITORIAL)
   ================================================================ */
.concierge-studio-card {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(197, 155, 39, 0.35) !important;
  border-radius: 26px !important;
  padding: 32px 28px !important;
  box-shadow: 0 16px 45px rgba(14, 32, 24, 0.06) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  min-height: 540px !important;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .concierge-master-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  
  .concierge-kitchen-pass-card,
  .concierge-studio-card {
    padding: 24px 20px !important;
    border-radius: 22px !important;
    min-height: auto !important;
  }

  .pass-title {
    font-size: 1.65rem !important;
  }

  .pass-trust-row {
    grid-template-columns: 1fr 1fr !important;
  }

  .hotline-buttons-row {
    grid-template-columns: 1fr !important;
  }
}


/* ================================================================
   EQUAL-HEIGHT & ZERO-GAP MULTI-STEP STUDIO PERFECTION
   ================================================================ */

.concierge-studio-card {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(197, 155, 39, 0.35) !important;
  border-radius: 26px !important;
  padding: 30px 28px !important;
  box-shadow: 0 16px 45px rgba(14, 32, 24, 0.06) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  box-sizing: border-box !important;
  min-height: 540px !important;
}

.concierge-step-container {
  display: none !important;
  flex-direction: column !important;
  flex: 1 !important;
  justify-content: flex-start !important;
  gap: 14px !important;
}

.concierge-step-container.active {
  display: flex !important;
}

.step-nav-footer {
  margin-top: auto !important;
  padding-top: 10px !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
}

.step-nav-footer.between {
  justify-content: space-between !important;
}

/* Date & Session Row in Step 2 */
.date-session-row {
  display: grid !important;
  grid-template-columns: 1fr 1.15fr !important;
  gap: 12px !important;
}

.flex-1 {
  flex: 1 !important;
}

.step-select-input {
  width: 100% !important;
  background: #FAF8F2 !important;
  border: 1.5px solid rgba(197, 155, 39, 0.3) !important;
  border-radius: 12px !important;
  padding: 11px 12px !important;
  font-family: var(--font-body) !important;
  font-size: 0.84rem !important;
  color: #0E2018 !important;
  outline: none !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

.step-select-input:focus {
  border-color: #AA820A !important;
  background: #FFFFFF !important;
}

@media (max-width: 600px) {
  .date-session-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}


/* ================================================================
   MOBILE-FIRST MASTER RESPONSIVE OVERHAUL FOR CATERING CONCIERGE
   ================================================================ */

/* Desktop Base (>1024px) */
@media (min-width: 1025px) {
  .concierge-master-grid {
    display: grid !important;
    grid-template-columns: 1fr 1.25fr !important;
    gap: 32px !important;
    align-items: stretch !important;
  }

  .concierge-kitchen-pass-card {
    order: 1 !important;
    min-height: 560px !important;
  }

  .concierge-studio-card {
    order: 2 !important;
    min-height: 560px !important;
  }
}

/* Tablet & Mobile Breakpoint (max-width: 1024px) */
@media (max-width: 1024px) {
  .section-catering-concierge {
    padding: 48px 0 60px !important;
  }

  .concierge-master-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  /* STEP STUDIO COMES FIRST ON MOBILE FOR INSTANT ENGAGEMENT */
  .concierge-studio-card {
    order: 1 !important;
    padding: 24px 18px !important;
    border-radius: 22px !important;
    min-height: auto !important;
    box-shadow: 0 10px 30px rgba(14, 32, 24, 0.08) !important;
  }

  /* KITCHEN PASS COMES SECOND AS A STREAMLINED VIP TRUST STRIP */
  .concierge-kitchen-pass-card {
    order: 2 !important;
    padding: 22px 18px !important;
    border-radius: 22px !important;
    min-height: auto !important;
    gap: 16px !important;
  }

  .pass-header-meta {
    padding-bottom: 10px !important;
  }

  .pass-title {
    font-size: 1.5rem !important;
  }

  .pass-tamil-motto {
    font-size: 0.88rem !important;
  }

  .pass-sub-text {
    font-size: 0.76rem !important;
  }

  /* High-Contrast 1-Column Key-Value Itinerary on Mobile */
  .itinerary-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }

  .itinerary-row .row-label {
    color: #E8C84D !important;
    font-size: 0.62rem !important;
  }

  .itinerary-row .row-value {
    text-align: left !important;
    font-size: 0.84rem !important;
    color: #FFFFFF !important;
    line-height: 1.25 !important;
  }

  /* Trust Pills */
  .pass-trust-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  .trust-pill {
    padding: 6px 8px !important;
    font-size: 0.68rem !important;
  }

  /* Hotline Buttons */
  .hotline-buttons-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .hotline-btn {
    font-size: 0.8rem !important;
    padding: 9px 8px !important;
  }

  /* Studio Form Elements on Mobile */
  .step-dialogue-bubble {
    padding: 10px 12px !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  .bubble-speech p {
    font-size: 0.82rem !important;
  }

  .occasion-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .occasion-select-card {
    display: flex !important;
    align-items: center !important;
    padding: 6px !important;
  }

  .card-image-wrap {
    width: 80px !important;
    height: 65px !important;
    min-width: 80px !important;
    border-radius: 10px !important;
  }

  .card-caption {
    padding: 4px 10px !important;
  }

  .card-caption strong {
    font-size: 0.82rem !important;
  }

  .card-caption span {
    font-size: 0.68rem !important;
  }

  .guest-pills-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  .guest-pill {
    padding: 8px 6px !important;
    font-size: 0.74rem !important;
  }

  .date-session-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .cuisine-options-grid {
    gap: 8px !important;
  }

  .cuisine-option-card {
    padding: 10px 12px !important;
  }

  .final-fields-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .btn-whatsapp-grand-dispatch {
    padding: 12px 14px !important;
    font-size: 0.8rem !important;
  }
}

@media (max-width: 440px) {
  .hotline-buttons-row {
    grid-template-columns: 1fr !important;
  }

  .pass-trust-row {
    grid-template-columns: 1fr !important;
  }
}


/* ================================================================
   MOBILE SPACE & TYPOGRAPHY EXPANSION FOR CATERING PASS CARD
   ================================================================ */

@media (max-width: 768px) {
  /* Give the container and card full breathing room */
  .section-catering-concierge {
    padding: 36px 0 48px !important;
  }

  .concierge-master-grid {
    gap: 16px !important;
  }

  .concierge-kitchen-pass-card {
    padding: 20px 16px !important;
    border-radius: 20px !important;
    gap: 14px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .kitchen-card-content {
    padding: 0 !important;
    gap: 14px !important;
  }

  .pass-header-meta {
    padding-bottom: 8px !important;
    gap: 8px !important;
  }

  .pass-founder-badge {
    font-size: 0.68rem !important;
  }

  .pass-status-pill {
    font-size: 0.64rem !important;
    padding: 2px 8px !important;
  }

  .pass-title {
    font-size: 1.55rem !important;
    line-height: 1.15 !important;
  }

  .pass-tamil-motto {
    font-size: 0.88rem !important;
  }

  .pass-sub-text {
    font-size: 0.76rem !important;
    line-height: 1.35 !important;
  }

  /* De-clutter Itinerary: Make it a clean, open, high-contrast block */
  .pass-itinerary-card {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
  }

  .itinerary-card-title {
    margin-bottom: 8px !important;
    padding-bottom: 6px !important;
    font-size: 0.68rem !important;
  }

  .itinerary-rows {
    gap: 8px !important;
  }

  .itinerary-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding-bottom: 4px !important;
  }

  .itinerary-row:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }

  .itinerary-row .row-label {
    font-size: 0.62rem !important;
    color: #E8C84D !important;
    letter-spacing: 0.08em !important;
  }

  .itinerary-row .row-value {
    font-size: 0.88rem !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-align: left !important;
    word-break: normal !important;
  }

  /* Compact Horizontal Trust Ribbon (Zero Box Clutter) */
  .pass-trust-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 6px !important;
    background: transparent !important;
  }

  .trust-pill {
    flex: 1 1 calc(50% - 6px) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
    border-radius: 8px !important;
    padding: 5px 8px !important;
    font-size: 0.68rem !important;
    color: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    box-sizing: border-box !important;
  }

  /* Streamlined Hotline Bar */
  .pass-hotline-bar {
    padding: 10px 12px !important;
    border-radius: 12px !important;
    gap: 6px !important;
  }

  .hotline-lead-text {
    font-size: 0.65rem !important;
  }

  .hotline-buttons-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .hotline-btn {
    font-size: 0.82rem !important;
    padding: 8px 6px !important;
    border-radius: 8px !important;
  }
}


/* ================================================================
   PERFECTED STICKY HEADER & SCROLL BEHAVIOR
   ================================================================ */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 85px;
}

.luxury-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: rgba(252, 250, 247, 0.94) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.header-inner {
  transition: padding 0.3s ease !important;
}

.brand-logo-img {
  transition: all 0.3s ease !important;
}

.brand-name {
  transition: all 0.3s ease !important;
}

/* Active Scrolled State */
.luxury-header.is-scrolled {
  background: rgba(255, 253, 249, 0.98) !important;
  box-shadow: 0 10px 30px rgba(10, 28, 20, 0.1) !important;
  border-bottom: 1.5px solid rgba(212, 175, 55, 0.35) !important;
}

.luxury-header.is-scrolled .header-inner {
  padding: 8px 24px !important;
}

.luxury-header.is-scrolled .brand-logo-img {
  width: 44px !important;
  height: 44px !important;
}

.luxury-header.is-scrolled .brand-name {
  font-size: 18px !important;
}

@media (max-width: 992px) {
  .luxury-header.is-scrolled .header-inner {
    padding: 8px 16px !important;
  }
}


/* ================================================================
   DUAL-DIRECTION CONTINUOUS INFINITE MARQUEE (NON-SELECTABLE)
   ================================================================ */

.localities-marquee-container {
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 10px 0 !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  pointer-events: none !important;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent) !important;
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent) !important;
}

.marquee-row {
  display: flex !important;
  overflow: hidden !important;
  width: 100% !important;
}

.marquee-track {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: max-content !important;
  will-change: transform !important;
}

.marquee-track-left {
  animation: scrollMarqueeLeft 34s linear infinite !important;
}

.marquee-track-right {
  animation: scrollMarqueeRight 36s linear infinite !important;
}

@keyframes scrollMarqueeLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes scrollMarqueeRight {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

.marquee-chip {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(197, 155, 39, 0.35) !important;
  border-radius: 30px !important;
  padding: 10px 22px !important;
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #0E2018 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 14px rgba(10, 28, 20, 0.05) !important;
  cursor: default !important;
}

.marquee-chip i {
  color: #AA820A !important;
  font-size: 0.85rem !important;
}

.marquee-chip.hq-chip {
  background: #082016 !important;
  border: 1.5px solid #E8C84D !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 18px rgba(8, 32, 22, 0.25) !important;
}

.marquee-chip.hq-chip i {
  color: #E8C84D !important;
}

@media (max-width: 768px) {
  .localities-marquee-container {
    gap: 12px !important;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent) !important;
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent) !important;
  }

  .marquee-chip {
    padding: 8px 16px !important;
    font-size: 0.8rem !important;
    border-radius: 20px !important;
  }

  .marquee-track-left {
    animation-duration: 26s !important;
  }

  .marquee-track-right {
    animation-duration: 28s !important;
  }
}


/* ================================================================
   100% BULLETPROOF STICKY / FIXED HEADER SYSTEM
   ================================================================ */

html {
  scroll-behavior: smooth !important;
  scroll-padding-top: 90px !important;
}

body {
  overflow-x: clip !important;
}

.luxury-header {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  background: rgba(252, 250, 247, 0.96) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
}

/* Bulletproof Fixed State on Scroll */
.luxury-header.is-scrolled,
.luxury-header.is-sticky-fixed {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  background: rgba(255, 253, 249, 0.98) !important;
  box-shadow: 0 10px 30px rgba(10, 28, 20, 0.12) !important;
  border-bottom: 1.5px solid rgba(212, 175, 55, 0.35) !important;
  animation: slideDownHeader 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes slideDownHeader {
  from {
    transform: translateY(-8px);
    opacity: 0.9;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.luxury-header.is-scrolled .header-inner,
.luxury-header.is-sticky-fixed .header-inner {
  padding: 8px 24px !important;
}

.luxury-header.is-scrolled .brand-logo-img,
.luxury-header.is-sticky-fixed .brand-logo-img {
  width: 42px !important;
  height: 42px !important;
}

.luxury-header.is-scrolled .brand-name,
.luxury-header.is-sticky-fixed .brand-name {
  font-size: 18px !important;
}

@media (max-width: 992px) {
  .luxury-header.is-scrolled .header-inner,
  .luxury-header.is-sticky-fixed .header-inner {
    padding: 8px 16px !important;
  }
}


/* ================================================================
   MOBILE DRAWER INSTANT DISMISSAL & BFCACHE FLASH PREVENTION
   ================================================================ */

.mobile-nav-drawer {
  visibility: hidden;
  will-change: transform, visibility;
}

.mobile-nav-drawer.is-open {
  visibility: visible !important;
  transform: translateX(0) !important;
}


/* ================================================================
   INFOGRAPHIC ARCHITECTURE FOR 4 PILLARS (QUALITY PIPELINE)
   ================================================================ */

.section-pillars-infographic {
  padding: 76px 0 90px !important;
  background: linear-gradient(180deg, #FAF8F2 0%, #F5EFE0 100%) !important;
  position: relative !important;
}

.pillars-infographic-pipeline {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 22px !important;
  position: relative !important;
  margin-top: 20px !important;
}

/* Connecting Flowline (Desktop) */
.pillars-infographic-pipeline::before {
  content: '' !important;
  position: absolute !important;
  top: 36px !important;
  left: 60px !important;
  right: 60px !important;
  height: 2px !important;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.8) 50%, rgba(212, 175, 55, 0.2) 100%) !important;
  z-index: 0 !important;
}

/* Infographic Card */
.pillar-infographic-card {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(197, 155, 39, 0.35) !important;
  border-radius: 24px !important;
  padding: 24px 20px 22px !important;
  box-shadow: 0 10px 30px rgba(14, 32, 24, 0.05) !important;
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.pillar-infographic-card:hover {
  transform: translateY(-8px) !important;
  border-color: #D4AF37 !important;
  box-shadow: 0 20px 45px rgba(14, 32, 24, 0.12) !important;
}

/* Top Node Badge */
.pillar-node-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
}

.node-number {
  font-family: var(--font-label) !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  color: #AA820A !important;
  letter-spacing: 0.1em !important;
  background: rgba(212, 175, 55, 0.12) !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  padding: 3px 10px !important;
  border-radius: 12px !important;
}

.node-icon-circle {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: #0A261A !important;
  border: 2px solid #E8C84D !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #E8C84D !important;
  font-size: 1.15rem !important;
  box-shadow: 0 6px 16px rgba(10, 38, 26, 0.25) !important;
  transition: transform 0.3s ease !important;
}

.pillar-infographic-card:hover .node-icon-circle {
  transform: scale(1.1) rotate(6deg) !important;
  background: #E8C84D !important;
  color: #0A261A !important;
}

/* Tamil Calligraphy Seal */
.pillar-tamil-seal {
  font-family: var(--font-tamil) !important;
  font-size: 1.7rem !important;
  font-weight: 800 !important;
  color: var(--emerald) !important;
  line-height: 1 !important;
  margin-bottom: 4px !important;
}

.pillar-card-title {
  font-family: var(--font-head) !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
  margin: 0 0 2px !important;
  line-height: 1.25 !important;
}

.pillar-card-sub {
  font-family: var(--font-label) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  color: #AA820A !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 10px !important;
}

.pillar-card-desc {
  font-family: var(--font-body) !important;
  font-size: 0.84rem !important;
  color: #4A5550 !important;
  line-height: 1.5 !important;
  margin: 0 0 14px !important;
}

/* Metric / Fact Badge */
.pillar-metric-chip {
  background: rgba(14, 38, 27, 0.05) !important;
  border: 1px solid rgba(197, 155, 39, 0.3) !important;
  border-radius: 10px !important;
  padding: 6px 10px !important;
  font-family: var(--font-label) !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 12px !important;
}

/* Specs List */
.pillar-specs-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  padding-top: 10px !important;
}

.pillar-specs-list li {
  font-family: var(--font-body) !important;
  font-size: 0.76rem !important;
  color: #2D3E35 !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  line-height: 1.3 !important;
}

.pillar-specs-list li i {
  color: #25D366 !important;
  font-size: 0.72rem !important;
  flex-shrink: 0 !important;
}

/* ================================================================
   RESPONSIVE BREAKPOINTS FOR INFOGRAPHIC
   ================================================================ */

@media (max-width: 1100px) {
  .pillars-infographic-pipeline {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  
  .pillars-infographic-pipeline::before {
    display: none !important;
  }
}

@media (max-width: 600px) {
  .pillars-infographic-pipeline {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .pillar-infographic-card {
    padding: 20px 16px !important;
    border-radius: 20px !important;
  }

  .pillar-tamil-seal {
    font-size: 1.5rem !important;
  }

  .pillar-card-title {
    font-size: 1.15rem !important;
  }
}


/* ================================================================
   360° CIRCULAR INTERACTIVE INFOGRAPHIC SYSTEM
   ================================================================ */

.section-circular-infographic {
  padding: 80px 0 96px !important;
  background: radial-gradient(circle at 50% 50%, #FFFDF9 0%, #FAF6ED 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

.circular-infographic-stage {
  position: relative !important;
  width: 100% !important;
  max-width: 960px !important;
  height: 600px !important;
  margin: 24px auto 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Background Orbital Concentric Rings */
.orbit-rings-bg {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.orbit-ring-outer {
  width: 540px !important;
  height: 540px !important;
  border-radius: 50% !important;
  border: 1.5px dashed rgba(212, 175, 55, 0.35) !important;
  position: absolute !important;
  animation: rotateClockwise 60s linear infinite !important;
}

.orbit-ring-middle {
  width: 440px !important;
  height: 440px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
  position: absolute !important;
}

.orbit-ring-inner {
  width: 340px !important;
  height: 340px !important;
  border-radius: 50% !important;
  border: 1.5px dotted rgba(27, 56, 40, 0.2) !important;
  position: absolute !important;
  animation: rotateCounterClockwise 45s linear infinite !important;
}

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

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

/* ================================================================
   CENTRAL CORE HUB
   ================================================================ */
.circular-hub-core {
  position: relative !important;
  z-index: 5 !important;
  width: 360px !important;
  height: 360px !important;
  border-radius: 50% !important;
  background: #082016 !important;
  border: 2px solid #E8C84D !important;
  box-shadow: 0 20px 60px rgba(8, 32, 22, 0.35), inset 0 0 30px rgba(0, 0, 0, 0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

.hub-aura-glow {
  position: absolute !important;
  inset: -12px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  box-shadow: 0 0 35px rgba(212, 175, 55, 0.25) !important;
  animation: pulseHubGlow 3s infinite ease-in-out !important;
  pointer-events: none !important;
}

@keyframes pulseHubGlow {
  0% { transform: scale(0.98); opacity: 0.5; }
  50% { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(0.98); opacity: 0.5; }
}

.hub-inner-screen {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  gap: 4px !important;
}

.hub-emblem-badge {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 4px !important;
}

.hub-logo-img {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1px solid #E8C84D !important;
}

.hub-live-tag {
  font-family: var(--font-label) !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  color: #E8C84D !important;
  background: rgba(212, 175, 55, 0.15) !important;
  padding: 2px 8px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
}

.hub-dynamic-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  transition: opacity 0.25s ease, transform 0.25s ease !important;
}

.hub-tamil-title {
  font-family: var(--font-tamil) !important;
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  color: #E8C84D !important;
  line-height: 1 !important;
  margin-bottom: 2px !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}

.hub-title {
  font-family: var(--font-head) !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin: 0 0 4px !important;
  line-height: 1.2 !important;
}

.hub-desc {
  font-family: var(--font-body) !important;
  font-size: 0.76rem !important;
  color: rgba(255, 255, 255, 0.8) !important;
  line-height: 1.35 !important;
  margin: 0 0 8px !important;
  max-width: 280px !important;
}

.hub-metric-badge {
  background: rgba(212, 175, 55, 0.15) !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  border-radius: 10px !important;
  padding: 4px 10px !important;
  font-family: var(--font-label) !important;
  font-size: 0.66rem !important;
  font-weight: 800 !important;
  color: #FAF8F2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 6px !important;
}

.hub-proof-bullets {
  display: flex !important;
  gap: 10px !important;
  font-family: var(--font-body) !important;
  font-size: 0.68rem !important;
  color: #FAF8F2 !important;
}

.hub-proof-bullets span {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* ================================================================
   ORBITING SATELLITE PODS (4 CORNERS)
   ================================================================ */
.orbit-nodes-wrapper {
  position: absolute !important;
  inset: 0 !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

.orbit-satellite-node {
  position: absolute !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Positioning the 4 nodes around the 540px perimeter */
.orbit-satellite-node.node-1 {
  top: 35px !important;
  left: 20px !important;
}

.orbit-satellite-node.node-2 {
  top: 35px !important;
  right: 20px !important;
}

.orbit-satellite-node.node-3 {
  bottom: 35px !important;
  right: 20px !important;
}

.orbit-satellite-node.node-4 {
  bottom: 35px !important;
  left: 20px !important;
}

/* Satellite Pill Card */
.satellite-pill-card {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(197, 155, 39, 0.35) !important;
  border-radius: 20px !important;
  padding: 14px 18px !important;
  width: 240px !important;
  box-shadow: 0 8px 24px rgba(10, 28, 20, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  position: relative !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sat-node-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
}

.sat-num {
  font-family: var(--font-label) !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  color: #AA820A !important;
  background: rgba(212, 175, 55, 0.12) !important;
  padding: 2px 6px !important;
  border-radius: 6px !important;
}

.sat-tamil {
  font-family: var(--font-tamil) !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: var(--emerald) !important;
  line-height: 1 !important;
}

.sat-icon-wrap {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 50% !important;
  background: #082016 !important;
  border: 1.5px solid #E8C84D !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #E8C84D !important;
  font-size: 1.05rem !important;
  box-shadow: 0 4px 12px rgba(8, 32, 22, 0.2) !important;
  transition: transform 0.3s ease !important;
}

.sat-text-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  text-align: left !important;
}

.sat-text-wrap strong {
  font-family: var(--font-head) !important;
  font-size: 0.95rem !important;
  color: #0E2018 !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

.sat-text-wrap span {
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  color: #6A7570 !important;
}

/* Hover and Active State on Satellite */
.orbit-satellite-node:hover .satellite-pill-card,
.orbit-satellite-node.active .satellite-pill-card {
  transform: scale(1.05) !important;
  border-color: #D4AF37 !important;
  box-shadow: 0 16px 36px rgba(14, 32, 24, 0.16) !important;
  background: #FFFDF9 !important;
}

.orbit-satellite-node.active .sat-icon-wrap {
  background: #E8C84D !important;
  color: #082016 !important;
  transform: scale(1.1) rotate(6deg) !important;
}

/* ================================================================
   4-WAY DIAL SELECTOR CONTROLS (DESKTOP & MOBILE)
   ================================================================ */
.circular-dial-controls {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-top: 32px !important;
  flex-wrap: wrap !important;
}

.dial-btn {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(197, 155, 39, 0.35) !important;
  border-radius: 30px !important;
  padding: 8px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 12px rgba(10, 28, 20, 0.05) !important;
}

.dial-btn-num {
  font-family: var(--font-label) !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  color: #AA820A !important;
  background: rgba(212, 175, 55, 0.12) !important;
  padding: 1px 6px !important;
  border-radius: 6px !important;
}

.dial-btn-tamil {
  font-family: var(--font-tamil) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: var(--emerald) !important;
}

.dial-btn-label {
  font-family: var(--font-head) !important;
  font-size: 0.84rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
}

.dial-btn:hover,
.dial-btn.active {
  background: #082016 !important;
  border-color: #E8C84D !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(8, 32, 22, 0.2) !important;
}

.dial-btn:hover .dial-btn-label,
.dial-btn.active .dial-btn-label,
.dial-btn:hover .dial-btn-tamil,
.dial-btn.active .dial-btn-tamil {
  color: #E8C84D !important;
}

/* ================================================================
   MOBILE RESPONSIVENESS (<992px)
   ================================================================ */
@media (max-width: 992px) {
  .circular-infographic-stage {
    height: auto !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  .orbit-rings-bg {
    display: none !important;
  }

  .orbit-nodes-wrapper {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    inset: auto !important;
  }

  .orbit-satellite-node {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
  }

  .satellite-pill-card {
    width: 100% !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
  }

  .circular-hub-core {
    width: 100% !important;
    max-width: 380px !important;
    height: auto !important;
    min-height: 280px !important;
    border-radius: 26px !important;
    padding: 22px 18px !important;
    order: -1 !important;
  }
}

@media (max-width: 540px) {
  .orbit-nodes-wrapper {
    grid-template-columns: 1fr !important;
  }

  .circular-dial-controls {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .dial-btn {
    justify-content: center !important;
  }
}


/* ================================================================
   360° LUXURY RADIAL WHEEL & EDITORIAL LENS SYSTEM
   ================================================================ */

.section-pillars-radial-master {
  padding: 84px 0 96px !important;
  background: radial-gradient(circle at 30% 50%, #FFFDF9 0%, #FAF5EA 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

.pillars-radial-split-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.2fr !important;
  gap: 40px !important;
  align-items: center !important;
  margin-top: 24px !important;
}

/* ================================================================
   LEFT WING: RADIAL WHEEL STAGE
   ================================================================ */
.radial-wheel-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

.radial-dial-stage {
  position: relative !important;
  width: 440px !important;
  height: 440px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Radial Concentric Tracks & Gauge */
.radial-gauge-track {
  position: absolute !important;
  width: 380px !important;
  height: 380px !important;
  border-radius: 50% !important;
  border: 2px dashed rgba(212, 175, 55, 0.4) !important;
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.12), inset 0 0 30px rgba(212, 175, 55, 0.08) !important;
  animation: rotateTrackSlow 90s linear infinite !important;
}

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

.radial-ambient-spokes {
  position: absolute !important;
  width: 420px !important;
  height: 420px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(27, 56, 40, 0.15) !important;
  background: radial-gradient(circle, transparent 65%, rgba(212, 175, 55, 0.06) 100%) !important;
}

/* Rotating Needle Pointer Beam */
.radial-dial-pointer {
  position: absolute !important;
  width: 320px !important;
  height: 320px !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 3 !important;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.dial-pointer-head {
  position: absolute !important;
  top: -8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #E8C84D !important;
  box-shadow: 0 0 16px #E8C84D, 0 0 30px rgba(232, 200, 77, 0.8) !important;
}

.pointer-spark-glow {
  position: absolute !important;
  inset: -6px !important;
  border-radius: 50% !important;
  border: 1.5px solid #E8C84D !important;
  animation: pulseSparkle 1.5s infinite !important;
}

@keyframes pulseSparkle {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Central Golden Emblem Hub */
.radial-center-seal {
  position: relative !important;
  z-index: 4 !important;
  width: 170px !important;
  height: 170px !important;
  border-radius: 50% !important;
  background: #082016 !important;
  border: 2px solid #E8C84D !important;
  box-shadow: 0 16px 45px rgba(8, 32, 22, 0.35), inset 0 0 20px rgba(0, 0, 0, 0.6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.seal-inner-emblem {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
}

.seal-logo {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  border: 1.5px solid #E8C84D !important;
  margin-bottom: 2px !important;
}

.seal-brand {
  font-family: var(--font-head) !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: #FFFFFF !important;
}

.seal-tag {
  font-family: var(--font-label) !important;
  font-size: 0.58rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  color: #E8C84D !important;
}

/* 4 Radial Sector Buttons */
.radial-sector-node {
  position: absolute !important;
  z-index: 10 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  outline: none !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Node Positioning */
.radial-sector-node.sector-top {
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.radial-sector-node.sector-right {
  top: 50% !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
}

.radial-sector-node.sector-bottom {
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.radial-sector-node.sector-left {
  top: 50% !important;
  left: 0 !important;
  transform: translateY(-50%) !important;
}

.sector-node-inner {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(197, 155, 39, 0.35) !important;
  border-radius: 18px !important;
  padding: 8px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  box-shadow: 0 8px 24px rgba(10, 28, 20, 0.08) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sector-node-num {
  font-family: var(--font-label) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  color: #AA820A !important;
  background: rgba(212, 175, 55, 0.12) !important;
  padding: 2px 6px !important;
  border-radius: 6px !important;
}

.sector-node-icon {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 50% !important;
  background: #082016 !important;
  border: 1.5px solid #E8C84D !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #E8C84D !important;
  font-size: 0.95rem !important;
  transition: all 0.3s ease !important;
}

.sector-node-label {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 1px !important;
}

.sector-tamil {
  font-family: var(--font-tamil) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: var(--emerald) !important;
  line-height: 1 !important;
}

.sector-title {
  font-family: var(--font-label) !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: #5A6660 !important;
}

/* Active & Hover Sector Styles */
.radial-sector-node:hover .sector-node-inner,
.radial-sector-node.active .sector-node-inner {
  background: #FFFDF9 !important;
  border-color: #D4AF37 !important;
  transform: scale(1.08) !important;
  box-shadow: 0 14px 32px rgba(14, 32, 24, 0.18) !important;
}

.radial-sector-node.active .sector-node-icon {
  background: #E8C84D !important;
  color: #082016 !important;
  transform: rotate(10deg) scale(1.1) !important;
  box-shadow: 0 0 16px rgba(232, 200, 77, 0.6) !important;
}

.dial-hint-text {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--font-body) !important;
  font-size: 0.76rem !important;
  color: #7A8580 !important;
  margin-top: 18px !important;
}

/* ================================================================
   RIGHT WING: EDITORIAL SHOWCASE LENS CARD
   ================================================================ */
.radial-editorial-lens-card {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(197, 155, 39, 0.35) !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 50px rgba(14, 32, 24, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  transition: all 0.35s ease !important;
}

.lens-hero-photo-wrap {
  position: relative !important;
  width: 100% !important;
  height: 200px !important;
  overflow: hidden !important;
}

.lens-hero-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.6s ease, opacity 0.3s ease !important;
}

.radial-editorial-lens-card:hover .lens-hero-img {
  transform: scale(1.04) !important;
}

.lens-hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(8, 32, 22, 0.2) 0%, rgba(8, 32, 22, 0.8) 100%) !important;
}

.lens-badge-row {
  position: absolute !important;
  bottom: 14px !important;
  left: 18px !important;
  right: 18px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  z-index: 2 !important;
}

.lens-node-tag {
  font-family: var(--font-label) !important;
  font-size: 0.66rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  color: #E8C84D !important;
  background: rgba(8, 32, 22, 0.85) !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
}

.lens-tamil-pill {
  font-family: var(--font-tamil) !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7) !important;
}

/* Lens Body */
.lens-body-content {
  padding: 24px 26px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.lens-title-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.lens-headline {
  font-family: var(--font-head) !important;
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.lens-sub-heading {
  font-family: var(--font-label) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  color: #AA820A !important;
  text-transform: uppercase !important;
}

.lens-story-text {
  font-family: var(--font-body) !important;
  font-size: 0.86rem !important;
  color: #4A5550 !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* 3 Proven Micro-Metrics */
.lens-metrics-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  background: #FAF8F2 !important;
  border: 1px solid rgba(197, 155, 39, 0.25) !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
}

.lens-metric-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.lens-metric-item i {
  font-size: 1.1rem !important;
}

.metric-text {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.15 !important;
}

.metric-text strong {
  font-family: var(--font-head) !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
}

.metric-text span {
  font-family: var(--font-body) !important;
  font-size: 0.65rem !important;
  color: #6A7570 !important;
}

/* Quick Jump Tabs */
.lens-quick-tabs {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  margin-top: 4px !important;
}

.tab-chip {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(197, 155, 39, 0.3) !important;
  border-radius: 12px !important;
  padding: 8px 6px !important;
  font-family: var(--font-body) !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  color: #0E2018 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
}

.tab-chip span {
  color: #AA820A !important;
  font-weight: 800 !important;
  font-size: 0.68rem !important;
}

.tab-chip:hover,
.tab-chip.active {
  background: #082016 !important;
  border-color: #E8C84D !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
}

.tab-chip.active span {
  color: #E8C84D !important;
}

/* ================================================================
   MOBILE & TABLET RESPONSIVENESS
   ================================================================ */
@media (max-width: 1024px) {
  .pillars-radial-split-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .radial-dial-stage {
    width: 360px !important;
    height: 360px !important;
  }

  .radial-gauge-track {
    width: 300px !important;
    height: 300px !important;
  }

  .radial-ambient-spokes {
    width: 340px !important;
    height: 340px !important;
  }

  .radial-dial-pointer {
    width: 250px !important;
    height: 250px !important;
  }

  .radial-center-seal {
    width: 140px !important;
    height: 140px !important;
  }

  .seal-logo {
    width: 36px !important;
    height: 36px !important;
  }

  .sector-node-inner {
    padding: 6px 10px !important;
    gap: 6px !important;
  }

  .sector-node-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    font-size: 0.8rem !important;
  }

  .sector-tamil {
    font-size: 0.95rem !important;
  }

  .sector-title {
    font-size: 0.55rem !important;
  }
}

@media (max-width: 600px) {
  .radial-dial-stage {
    width: 320px !important;
    height: 320px !important;
  }

  .radial-center-seal {
    width: 120px !important;
    height: 120px !important;
  }

  .lens-metrics-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .lens-quick-tabs {
    grid-template-columns: 1fr 1fr !important;
  }
}


/* ================================================================
   BANANA LEAF CONCEPT ENHANCEMENTS FOR 360° RADIAL SYSTEM
   ================================================================ */

/* Quad Banana Leaf Petals */
.radial-banana-leaves-bg {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.banana-leaf-petal {
  position: absolute !important;
  width: 90px !important;
  height: 130px !important;
  background: radial-gradient(ellipse at center, rgba(34, 139, 34, 0.18) 0%, rgba(20, 90, 45, 0.08) 70%, transparent 100%) !important;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% !important;
  border: 1px solid rgba(46, 125, 50, 0.25) !important;
  box-shadow: inset 0 0 15px rgba(76, 175, 80, 0.12) !important;
  transition: all 0.4s ease !important;
}

.banana-leaf-petal.petal-top {
  top: 15px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
}

.banana-leaf-petal.petal-right {
  top: 50% !important;
  right: 15px !important;
  transform: translateY(-50%) rotate(90deg) !important;
}

.banana-leaf-petal.petal-bottom {
  bottom: 15px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(180deg) !important;
}

.banana-leaf-petal.petal-left {
  top: 50% !important;
  left: 15px !important;
  transform: translateY(-50%) rotate(270deg) !important;
}

/* Organic Leaf Shaped Sector Nodes */
.sector-node-inner.leaf-styled {
  border-radius: 20px 6px 20px 6px !important;
  border: 1.5px solid rgba(46, 125, 50, 0.35) !important;
}

.radial-sector-node:hover .sector-node-inner.leaf-styled,
.radial-sector-node.active .sector-node-inner.leaf-styled {
  border-color: #2E7D32 !important;
  background: #F4FBF7 !important;
  border-radius: 22px 4px 22px 4px !important;
}

/* Pointer Leaf Icon */
.pointer-leaf-icon {
  position: absolute !important;
  top: -16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  color: #25D366 !important;
  font-size: 0.95rem !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)) !important;
  animation: swayLeaf 2s infinite ease-in-out !important;
}

@keyframes swayLeaf {
  0%, 100% { transform: translateX(-50%) rotate(-6deg); }
  50% { transform: translateX(-50%) rotate(6deg); }
}

/* Banana Leaf Protocol Ribbon on Editorial Card */
.lens-banana-ribbon {
  position: absolute !important;
  top: 14px !important;
  left: 18px !important;
  right: 18px !important;
  background: rgba(8, 32, 22, 0.88) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  border-radius: 20px !important;
  padding: 5px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  z-index: 3 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

.lens-banana-ribbon span {
  font-family: var(--font-label) !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  color: #F3EAD0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


/* ================================================================
   CLEAN LUXURY BANANA LEAF CIRCULAR INFOGRAPHIC (ACT 04)
   ================================================================ */

.section-banana-leaf-infographic {
  padding: 80px 0 92px !important;
  background: radial-gradient(circle at 50% 50%, #FFFDF9 0%, #FAF5EA 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

.banana-leaf-infographic-wrap {
  position: relative !important;
  max-width: 1080px !important;
  margin: 10px auto 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 340px 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 28px 36px !important;
  align-items: center !important;
}

/* Positioning Cards around Central Circle */
.card-top-left {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.card-bottom-left {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

.card-top-right {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

.card-bottom-right {
  grid-column: 3 !important;
  grid-row: 2 !important;
}

.infographic-center-wheel {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

/* Center Feast Circular Frame */
.wheel-image-frame {
  position: relative !important;
  width: 320px !important;
  height: 320px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 4px solid #FFFFFF !important;
  box-shadow: 0 16px 45px rgba(10, 28, 20, 0.2), 0 0 0 2px rgba(212, 175, 55, 0.6) !important;
  z-index: 2 !important;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.wheel-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.6s ease !important;
}

.banana-leaf-infographic-wrap:hover .wheel-img {
  transform: scale(1.05) rotate(2deg) !important;
}

.wheel-glass-sheen {
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.25) 0%, transparent 60%) !important;
  pointer-events: none !important;
}

/* Floating Center Badge */
.wheel-center-badge {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  background: rgba(8, 32, 22, 0.92) !important;
  border: 1.5px solid #E8C84D !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  z-index: 3 !important;
}

.center-badge-logo {
  font-family: var(--font-head) !important;
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  color: #E8C84D !important;
  line-height: 1 !important;
}

.center-badge-sub {
  font-family: var(--font-tamil) !important;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
}

/* Animated Rotating Halo Orbit */
.wheel-orbit-halo {
  position: absolute !important;
  width: 360px !important;
  height: 360px !important;
  border-radius: 50% !important;
  border: 2px dashed rgba(212, 175, 55, 0.45) !important;
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.15) !important;
  animation: rotateHaloSlow 60s linear infinite !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

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

/* ================================================================
   INFOGRAPHIC CARDS
   ================================================================ */
.infographic-card {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(197, 155, 39, 0.32) !important;
  border-radius: 20px !important;
  padding: 20px 22px !important;
  box-shadow: 0 8px 24px rgba(10, 28, 20, 0.05) !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.info-card-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 12px !important;
}

.info-card-badge {
  font-family: var(--font-label) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #AA820A !important;
  background: rgba(212, 175, 55, 0.12) !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  padding: 2px 8px !important;
  border-radius: 8px !important;
}

.info-card-tamil {
  font-family: var(--font-tamil) !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: var(--emerald) !important;
  line-height: 1 !important;
}

.info-card-body {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
}

.info-icon-disc {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 50% !important;
  background: #082016 !important;
  border: 1.5px solid #E8C84D !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #E8C84D !important;
  font-size: 1.1rem !important;
  box-shadow: 0 4px 14px rgba(8, 32, 22, 0.2) !important;
  transition: transform 0.3s ease !important;
}

.info-text h3 {
  font-family: var(--font-head) !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
  margin: 0 0 4px !important;
  line-height: 1.25 !important;
}

.info-text p {
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  color: #5A6660 !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

.info-highlight-bar {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: transparent !important;
  transition: background 0.3s ease !important;
}

/* Card Hover and Active Styles */
.infographic-card:hover,
.infographic-card.active {
  transform: translateY(-6px) !important;
  border-color: #2E7D32 !important;
  box-shadow: 0 16px 36px rgba(14, 32, 24, 0.12) !important;
  background: #FCFDFB !important;
}

.infographic-card.active .info-icon-disc,
.infographic-card:hover .info-icon-disc {
  background: #E8C84D !important;
  color: #082016 !important;
  transform: scale(1.08) rotate(6deg) !important;
}

.infographic-card.active .info-highlight-bar,
.infographic-card:hover .info-highlight-bar {
  background: linear-gradient(90deg, #2E7D32, #E8C84D) !important;
}

/* Mobile Quick Navigation Chips */
.infographic-mobile-nav {
  display: none !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 24px !important;
  flex-wrap: wrap !important;
}

.mob-pillar-chip {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(197, 155, 39, 0.35) !important;
  border-radius: 20px !important;
  padding: 6px 14px !important;
  font-family: var(--font-body) !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  color: #0E2018 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.mob-pillar-chip span {
  color: #AA820A !important;
  font-weight: 800 !important;
  margin-right: 4px !important;
}

.mob-pillar-chip:hover,
.mob-pillar-chip.active {
  background: #082016 !important;
  border-color: #E8C84D !important;
  color: #FFFFFF !important;
}

.mob-pillar-chip.active span {
  color: #E8C84D !important;
}

/* ================================================================
   RESPONSIVE BREAKPOINTS
   ================================================================ */
@media (max-width: 992px) {
  .banana-leaf-infographic-wrap {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto auto !important;
    gap: 16px !important;
  }

  .infographic-center-wheel {
    grid-column: 1 / span 2 !important;
    grid-row: 1 !important;
    margin-bottom: 8px !important;
  }

  .card-top-left {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .card-top-right {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  .card-bottom-left {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  .card-bottom-right {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  .wheel-image-frame {
    width: 260px !important;
    height: 260px !important;
  }

  .wheel-orbit-halo {
    width: 290px !important;
    height: 290px !important;
  }

  .infographic-mobile-nav {
    display: flex !important;
  }
}

@media (max-width: 600px) {
  .banana-leaf-infographic-wrap {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }

  .infographic-center-wheel {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .card-top-left { grid-column: 1 !important; grid-row: 2 !important; }
  .card-top-right { grid-column: 1 !important; grid-row: 3 !important; }
  .card-bottom-left { grid-column: 1 !important; grid-row: 4 !important; }
  .card-bottom-right { grid-column: 1 !important; grid-row: 5 !important; }

  .infographic-card {
    padding: 16px 18px !important;
  }

  .wheel-image-frame {
    width: 220px !important;
    height: 220px !important;
  }

  .wheel-orbit-halo {
    width: 240px !important;
    height: 240px !important;
  }
}


/* ================================================================
   BANANA LEAF PLATTER WITH 4 DISH POINTS (ACT 04)
   ================================================================ */

.section-banana-leaf-platter {
  padding: 80px 0 92px !important;
  background: radial-gradient(circle at 50% 50%, #FFFDF9 0%, #FAF5EA 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

.banana-leaf-platter-stage {
  position: relative !important;
  max-width: 1040px !important;
  min-height: 480px !important;
  margin: 16px auto 0 !important;
  border-radius: 36px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 60px rgba(14, 32, 24, 0.12), 0 0 0 1.5px rgba(212, 175, 55, 0.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px 32px !important;
  box-sizing: border-box !important;
}

/* Background Banana Leaf Image Layer */
.leaf-platter-bg-wrap {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
}

.leaf-platter-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: scale(1.02) !important;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.banana-leaf-platter-stage:hover .leaf-platter-img {
  transform: scale(1.05) !important;
}

.leaf-platter-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 50% 50%, rgba(10, 32, 22, 0.15) 0%, rgba(10, 32, 22, 0.55) 100%) !important;
}

/* 4 Dishes Grid Over the Banana Leaf */
.leaf-dishes-grid {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 28px 40px !important;
  width: 100% !important;
  max-width: 920px !important;
}

/* Individual Dish Point Card */
.leaf-dish-point {
  background: rgba(255, 253, 248, 0.94) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.45) !important;
  border-radius: 22px !important;
  padding: 18px 22px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18) !important;
  cursor: pointer !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.leaf-dish-point:hover,
.leaf-dish-point.active {
  transform: translateY(-6px) scale(1.02) !important;
  border-color: #D4AF37 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28), 0 0 0 2px rgba(232, 200, 77, 0.5) !important;
}

.dish-badge-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 10px !important;
}

.dish-num {
  font-family: var(--font-label) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #AA820A !important;
  background: rgba(212, 175, 55, 0.15) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  padding: 2px 8px !important;
  border-radius: 8px !important;
}

.dish-tamil {
  font-family: var(--font-tamil) !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: var(--emerald) !important;
  line-height: 1 !important;
}

.dish-content-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
}

.dish-icon-brass {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 50% !important;
  background: #082016 !important;
  border: 1.5px solid #E8C84D !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #E8C84D !important;
  font-size: 1.1rem !important;
  box-shadow: 0 4px 12px rgba(8, 32, 22, 0.25) !important;
  transition: transform 0.3s ease !important;
}

.leaf-dish-point:hover .dish-icon-brass,
.leaf-dish-point.active .dish-icon-brass {
  background: #E8C84D !important;
  color: #082016 !important;
  transform: scale(1.1) rotate(6deg) !important;
}

.dish-info h3 {
  font-family: var(--font-head) !important;
  font-size: 1.18rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
  margin: 0 0 3px !important;
  line-height: 1.2 !important;
}

.dish-info p {
  font-family: var(--font-body) !important;
  font-size: 0.84rem !important;
  color: #4A5550 !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

/* ================================================================
   RESPONSIVE BREAKPOINTS
   ================================================================ */
@media (max-width: 860px) {
  .banana-leaf-platter-stage {
    min-height: auto !important;
    padding: 28px 20px !important;
    border-radius: 24px !important;
  }

  .leaf-dishes-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .leaf-dish-point {
    padding: 16px 18px !important;
  }

  .dish-tamil {
    font-size: 1.2rem !important;
  }

  .dish-info h3 {
    font-size: 1.1rem !important;
  }
}


/* ================================================================
   FULL SECTION BANANA LEAF BACKGROUND WITH 4 DISH CARDS (ACT 04)
   ================================================================ */

.section-full-banana-leaf {
  position: relative !important;
  padding: 88px 0 100px !important;
  background-image: url('assets/fresh_banana_leaf_platter.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  overflow: hidden !important;
}

/* Semi-transparent Emerald & Vignette Tint for readability */
.full-leaf-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 50% 50%, rgba(8, 32, 22, 0.55) 0%, rgba(6, 24, 16, 0.85) 100%) !important;
  z-index: 1 !important;
}

.relative-z {
  position: relative !important;
  z-index: 2 !important;
}

.gold-border-tag {
  background: rgba(212, 175, 55, 0.18) !important;
  border: 1px solid rgba(212, 175, 55, 0.5) !important;
  color: #F3EAD0 !important;
}

.text-white {
  color: #FFFFFF !important;
}

.text-gold-light {
  color: #E8C84D !important;
  font-style: italic !important;
}

.text-white-sub {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* 4 Dishes Horizontal Grid */
.banana-leaf-dishes-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 22px !important;
  margin-top: 20px !important;
}

/* Individual Dish Card placed over Banana Leaf */
.leaf-dish-card {
  background: rgba(255, 253, 248, 0.95) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.45) !important;
  border-radius: 22px !important;
  padding: 24px 20px !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.3) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

.leaf-dish-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: #E8C84D !important;
  background: #FFFFFF !important;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.45), 0 0 20px rgba(232, 200, 77, 0.3) !important;
}

.dish-card-header {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 14px !important;
}

.dish-pill-num {
  font-family: var(--font-label) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #AA820A !important;
  background: rgba(212, 175, 55, 0.15) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  padding: 2px 8px !important;
  border-radius: 8px !important;
}

.dish-tamil-seal {
  font-family: var(--font-tamil) !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: var(--emerald) !important;
  line-height: 1 !important;
}

.dish-brass-circle {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: #082016 !important;
  border: 2px solid #E8C84D !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #E8C84D !important;
  font-size: 1.15rem !important;
  box-shadow: 0 4px 14px rgba(8, 32, 22, 0.3) !important;
  margin-bottom: 12px !important;
  transition: transform 0.3s ease !important;
}

.leaf-dish-card:hover .dish-brass-circle {
  background: #E8C84D !important;
  color: #082016 !important;
  transform: scale(1.1) rotate(6deg) !important;
}

.dish-card-title {
  font-family: var(--font-head) !important;
  font-size: 1.22rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
  margin: 0 0 2px !important;
  line-height: 1.2 !important;
}

.dish-card-sub {
  font-family: var(--font-label) !important;
  font-size: 0.66rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  color: #AA820A !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
  display: block !important;
}

.dish-card-desc {
  font-family: var(--font-body) !important;
  font-size: 0.84rem !important;
  color: #4A5550 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* ================================================================
   RESPONSIVE BREAKPOINTS
   ================================================================ */
@media (max-width: 1100px) {
  .banana-leaf-dishes-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }
}

@media (max-width: 600px) {
  .section-full-banana-leaf {
    padding: 60px 0 72px !important;
  }

  .banana-leaf-dishes-row {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .leaf-dish-card {
    padding: 18px 16px !important;
    border-radius: 18px !important;
  }

  .dish-card-title {
    font-size: 1.15rem !important;
  }
}


/* ================================================================
   ISOLATED BANANA LEAF WITH 4 DISH CARDS (ACT 04)
   ================================================================ */

.section-isolated-banana-leaf {
  padding: 84px 0 96px !important;
  background: radial-gradient(circle at 50% 50%, #FFFDF9 0%, #FAF5EA 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

.isolated-leaf-stage {
  position: relative !important;
  max-width: 1040px !important;
  min-height: 520px !important;
  margin: 16px auto 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Banana Leaf Cutout Layer */
.leaf-cutout-wrap {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.isolated-leaf-img {
  width: 100% !important;
  max-width: 1020px !important;
  height: auto !important;
  max-height: 500px !important;
  object-fit: contain !important;
  mix-blend-mode: multiply !important;
  filter: drop-shadow(0 20px 45px rgba(10, 38, 22, 0.16)) !important;
  transform: rotate(-1deg) scale(1.02) !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.isolated-leaf-stage:hover .isolated-leaf-img {
  transform: rotate(0deg) scale(1.04) !important;
}

/* 4 Dishes Overlay Grid */
.leaf-dishes-overlay-grid {
  position: relative !important;
  z-index: 3 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 32px 60px !important;
  width: 100% !important;
  max-width: 960px !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

/* Individual Dish Card */
.leaf-dish-card {
  background: rgba(255, 253, 248, 0.94) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.45) !important;
  border-radius: 22px !important;
  padding: 20px 22px !important;
  box-shadow: 0 10px 30px rgba(10, 32, 22, 0.1) !important;
  cursor: pointer !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.leaf-dish-card:hover,
.leaf-dish-card.active {
  transform: translateY(-6px) scale(1.02) !important;
  border-color: #2E7D32 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 18px 42px rgba(10, 32, 22, 0.18), 0 0 0 2px rgba(232, 200, 77, 0.5) !important;
}

.dish-card-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 10px !important;
}

.dish-pill-num {
  font-family: var(--font-label) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #AA820A !important;
  background: rgba(212, 175, 55, 0.14) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  padding: 2px 8px !important;
  border-radius: 8px !important;
}

.dish-tamil-seal {
  font-family: var(--font-tamil) !important;
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  color: var(--emerald) !important;
  line-height: 1 !important;
}

.dish-card-body {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
}

.dish-brass-circle {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 50% !important;
  background: #082016 !important;
  border: 1.5px solid #E8C84D !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #E8C84D !important;
  font-size: 1.1rem !important;
  box-shadow: 0 4px 12px rgba(8, 32, 22, 0.25) !important;
  transition: transform 0.3s ease !important;
}

.leaf-dish-card:hover .dish-brass-circle,
.leaf-dish-card.active .dish-brass-circle {
  background: #E8C84D !important;
  color: #082016 !important;
  transform: scale(1.1) rotate(6deg) !important;
}

.dish-card-text h3 {
  font-family: var(--font-head) !important;
  font-size: 1.18rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
  margin: 0 0 3px !important;
  line-height: 1.2 !important;
}

.dish-card-text p {
  font-family: var(--font-body) !important;
  font-size: 0.84rem !important;
  color: #4A5550 !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

/* ================================================================
   RESPONSIVE BREAKPOINTS
   ================================================================ */
@media (max-width: 992px) {
  .isolated-leaf-stage {
    min-height: auto !important;
  }

  .leaf-dishes-overlay-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 18px 20px !important;
    padding: 12px !important;
  }

  .leaf-dish-card {
    padding: 16px 16px !important;
  }

  .dish-tamil-seal {
    font-size: 1.25rem !important;
  }

  .dish-card-text h3 {
    font-size: 1.08rem !important;
  }
}

@media (max-width: 650px) {
  .leaf-dishes-overlay-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .leaf-dish-card {
    padding: 16px 18px !important;
    border-radius: 18px !important;
  }
}


/* ================================================================
   PURE CIRCULAR INFOGRAPHIC — 100% BULLETPROOF RESPONSIVE SYSTEM
   ================================================================ */

.section-pure-circular-infographic {
  padding: 60px 0 76px !important;
  background: radial-gradient(circle at 50% 50%, #FFFDF9 0%, #FAF5EA 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* ================================================================
   MOBILE-FIRST (DEFAULT FOR ALL PHONES & TABLETS < 992px)
   ================================================================ */

.pure-circle-stage {
  position: relative !important;
  width: 100% !important;
  max-width: 600px !important;
  margin: 16px auto 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 14px !important;
  height: auto !important;
}

/* Hide SVG rings on mobile/tablet to avoid overflow */
.circle-orbit-svg-wrap {
  display: none !important;
}

/* Mobile Center Hub */
.circle-center-hub {
  position: relative !important;
  width: 130px !important;
  height: 130px !important;
  border-radius: 50% !important;
  background: #082016 !important;
  border: 2px solid #E8C84D !important;
  box-shadow: 0 12px 32px rgba(8, 32, 22, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin-bottom: 8px !important;
  order: -1 !important;
}

.hub-radar-ripple {
  position: absolute !important;
  inset: -10px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(212, 175, 55, 0.4) !important;
  animation: pulseHubRipple 2.5s infinite ease-out !important;
}

@keyframes pulseHubRipple {
  0% { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.3); opacity: 0; }
}

.hub-disc-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
}

.hub-logo {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1.5px solid #E8C84D !important;
}

.hub-brand-name {
  font-family: var(--font-head) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: #FFFFFF !important;
}

.hub-tagline {
  font-family: var(--font-label) !important;
  font-size: 0.54rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  color: #E8C84D !important;
  transition: all 0.3s ease !important;
}

/* Mobile Clean Full-Width Cards */
.circle-node {
  position: static !important;
  width: 100% !important;
  transform: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

.node-glass-card {
  background: rgba(255, 253, 248, 0.96) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.4) !important;
  border-radius: 18px !important;
  padding: 16px 18px !important;
  width: 100% !important;
  box-shadow: 0 8px 24px rgba(10, 32, 22, 0.06) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.node-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.node-badge {
  font-family: var(--font-label) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  color: #AA820A !important;
  background: rgba(212, 175, 55, 0.14) !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  padding: 2px 8px !important;
  border-radius: 8px !important;
}

.node-tamil {
  font-family: var(--font-tamil) !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: var(--emerald) !important;
  line-height: 1 !important;
}

.node-icon-circle {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 50% !important;
  background: #082016 !important;
  border: 1.5px solid #E8C84D !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #E8C84D !important;
  font-size: 1rem !important;
  box-shadow: 0 4px 12px rgba(8, 32, 22, 0.2) !important;
  transition: transform 0.3s ease !important;
}

.node-text h3 {
  font-family: var(--font-head) !important;
  font-size: 1.08rem !important;
  font-weight: 800 !important;
  color: #0E2018 !important;
  margin: 0 0 2px !important;
  line-height: 1.2 !important;
}

.node-text p {
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  color: #5A6660 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

/* Card Hover / Active */
.circle-node:hover .node-glass-card,
.circle-node.active .node-glass-card {
  border-color: #2E7D32 !important;
  background: #FFFFFF !important;
  box-shadow: 0 14px 36px rgba(10, 32, 22, 0.14), 0 0 0 2px rgba(232, 200, 77, 0.5) !important;
}

.circle-node:hover .node-icon-circle,
.circle-node.active .node-icon-circle {
  background: #E8C84D !important;
  color: #082016 !important;
  transform: scale(1.08) rotate(6deg) !important;
}

/* Mobile Quick Touch Dial Chips */
.circle-mobile-dial-chips {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-top: 16px !important;
  width: 100% !important;
  max-width: 480px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.circle-chip {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(197, 155, 39, 0.35) !important;
  border-radius: 20px !important;
  padding: 8px 10px !important;
  font-family: var(--font-body) !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  color: #0E2018 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
}

.circle-chip span {
  color: #AA820A !important;
  font-weight: 800 !important;
  margin-right: 4px !important;
}

.circle-chip:hover,
.circle-chip.active {
  background: #082016 !important;
  border-color: #E8C84D !important;
  color: #FFFFFF !important;
}

.circle-chip.active span {
  color: #E8C84D !important;
}

/* ================================================================
   TABLET GRID ENHANCEMENT (601px to 992px)
   ================================================================ */
@media (min-width: 601px) and (max-width: 992px) {
  .pure-circle-stage {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    max-width: 720px !important;
  }

  .circle-center-hub {
    grid-column: 1 / span 2 !important;
    margin: 0 auto 12px !important;
  }

  .circle-mobile-dial-chips {
    grid-template-columns: repeat(4, 1fr) !important;
    max-width: 680px !important;
  }
}

/* ================================================================
   DESKTOP ONLY (>= 993px): 360° RADIAL CIRCULAR ORBITAL GEOMETRY
   ================================================================ */
@media (min-width: 993px) {
  .section-pure-circular-infographic {
    padding: 84px 0 96px !important;
  }

  .pure-circle-stage {
    max-width: 860px !important;
    height: 640px !important;
    margin: 20px auto 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .circle-orbit-svg-wrap {
    display: flex !important;
    position: absolute !important;
    inset: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  .orbit-svg-canvas {
    width: 540px !important;
    height: 540px !important;
    animation: spinOuterRing 50s linear infinite !important;
  }

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

  .circle-ambient-glow {
    position: absolute !important;
    width: 380px !important;
    height: 380px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%) !important;
    filter: blur(20px) !important;
    animation: pulseAmbientGlow 4s infinite ease-in-out !important;
  }

  @keyframes pulseAmbientGlow {
    0%, 100% { transform: scale(0.95); opacity: 0.6; }
    50% { transform: scale(1.08); opacity: 1; }
  }

  .circle-center-hub {
    position: relative !important;
    z-index: 5 !important;
    width: 170px !important;
    height: 170px !important;
    border-radius: 50% !important;
    background: #082016 !important;
    border: 2px solid #E8C84D !important;
    box-shadow: 0 16px 45px rgba(8, 32, 22, 0.35), inset 0 0 20px rgba(0, 0, 0, 0.6) !important;
    order: 0 !important;
    margin: 0 !important;
  }

  .hub-logo {
    width: 44px !important;
    height: 44px !important;
  }

  .hub-brand-name {
    font-size: 0.8rem !important;
  }

  .hub-tagline {
    font-size: 0.58rem !important;
  }

  /* Desktop Absolute Symmetrical Cardinal Quadrants */
  .circle-node {
    position: absolute !important;
    z-index: 10 !important;
    width: auto !important;
  }

  .circle-node.node-top {
    top: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .circle-node.node-right {
    top: 50% !important;
    right: 10px !important;
    transform: translateY(-50%) !important;
  }

  .circle-node.node-bottom {
    bottom: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .circle-node.node-left {
    top: 50% !important;
    left: 10px !important;
    transform: translateY(-50%) !important;
  }

  .node-glass-card {
    width: 260px !important;
    padding: 16px 20px !important;
  }

  .circle-node:hover .node-glass-card,
  .circle-node.active .node-glass-card {
    transform: scale(1.06) !important;
  }

  .circle-mobile-dial-chips {
    display: none !important;
  }
}


/* ================================================================
   AWWARDS-GRADE KINETIC VISUAL CURTAIN REEL (ACT 05)
   ================================================================ */

.section-kinetic-offerings {
  padding: 80px 0 96px !important;
  background: #FAF8F2 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Desktop Container */
.kinetic-curtain-container {
  display: flex !important;
  gap: 16px !important;
  height: 520px !important;
  width: 100% !important;
  max-width: 1160px !important;
  margin: 16px auto 0 !important;
}

.kinetic-panel {
  position: relative !important;
  flex: 1 !important;
  height: 100% !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  border: 1.5px solid rgba(212, 175, 55, 0.35) !important;
  box-shadow: 0 16px 40px rgba(10, 32, 22, 0.1) !important;
  cursor: pointer !important;
  transition: flex 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s ease, border-color 0.4s ease !important;
  box-sizing: border-box !important;
}

.kinetic-panel.active {
  flex: 3.2 !important;
  border-color: #E8C84D !important;
  box-shadow: 0 24px 60px rgba(10, 32, 22, 0.25), 0 0 25px rgba(232, 200, 77, 0.25) !important;
}

/* Background Photo with Zoom on Hover */
.panel-bg-photo {
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center center !important;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 1 !important;
}

.kinetic-panel:hover .panel-bg-photo,
.kinetic-panel.active .panel-bg-photo {
  transform: scale(1.06) !important;
}

/* Dark Emerald Glass Gradient Overlay */
.panel-glass-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(8, 32, 22, 0.35) 0%, rgba(6, 24, 16, 0.85) 60%, rgba(4, 18, 12, 0.96) 100%) !important;
  z-index: 2 !important;
  transition: background 0.4s ease !important;
}

.kinetic-panel.active .panel-glass-overlay {
  background: linear-gradient(180deg, rgba(8, 32, 22, 0.2) 0%, rgba(6, 24, 16, 0.75) 50%, rgba(4, 18, 12, 0.94) 100%) !important;
}

/* ================================================================
   COLLAPSED STATE (UNIFORM, CLEAN 01, 02, 03, 04 & EMBEDDED TITLE)
   ================================================================ */
.panel-collapsed-badge {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 24px 12px !important;
  z-index: 4 !important;
  transition: opacity 0.35s ease, transform 0.35s ease !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
}

.panel-num-pill {
  font-family: var(--font-label) !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  color: #082016 !important;
  background: #E8C84D !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  letter-spacing: 0.05em !important;
}

.panel-collapsed-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(8, 32, 22, 0.85) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #E8C84D !important;
  font-size: 1.15rem !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
  transition: transform 0.3s ease !important;
}

.panel-collapsed-title {
  font-family: var(--font-head) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  background: rgba(6, 24, 16, 0.8) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  padding: 6px 14px !important;
  border-radius: 16px !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
  max-width: 92% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.kinetic-panel.active .panel-collapsed-badge {
  opacity: 0 !important;
  transform: scale(0.95) !important;
}

/* ================================================================
   EXPANDED STATE CONTENT
   ================================================================ */
.panel-expanded-content {
  position: absolute !important;
  inset: 0 !important;
  padding: 28px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  z-index: 4 !important;
  opacity: 0 !important;
  transform: translateY(12px) !important;
  pointer-events: none !important;
  transition: opacity 0.4s ease 0.15s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.15s !important;
  box-sizing: border-box !important;
}

.kinetic-panel.active .panel-expanded-content {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

.panel-top-pill {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
}

.pill-category {
  font-family: var(--font-label) !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  color: #E8C84D !important;
  background: rgba(8, 32, 22, 0.85) !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
}

.pill-capacity {
  font-family: var(--font-label) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
}

.panel-main-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: auto !important;
  margin-bottom: 14px !important;
}

.panel-icon-brass {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #E8C84D !important;
  color: #082016 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.15rem !important;
  box-shadow: 0 6px 18px rgba(232, 200, 77, 0.4) !important;
}

.panel-title {
  font-family: var(--font-head) !important;
  font-size: 1.65rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin: 0 !important;
  line-height: 1.15 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;
}

.panel-desc {
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  color: rgba(255, 255, 255, 0.85) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  max-width: 480px !important;
}

.panel-specs-chips {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 18px !important;
}

.panel-specs-chips span {
  font-family: var(--font-body) !important;
  font-size: 0.76rem !important;
  color: #FAF8F2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(0, 0, 0, 0.3) !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.panel-action-row {
  display: flex !important;
  width: 100% !important;
}

.btn-panel-action {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: linear-gradient(135deg, #D4AF37 0%, #AA820A 100%) !important;
  color: #082016 !important;
  font-family: var(--font-label) !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 12px 24px !important;
  border-radius: 30px !important;
  text-decoration: none !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.25s ease !important;
}

.btn-panel-action:hover {
  transform: translateX(4px) !important;
  background: linear-gradient(135deg, #E8C84D 0%, #C59B27 100%) !important;
  box-shadow: 0 12px 28px rgba(232, 200, 77, 0.4) !important;
}

/* ================================================================
   AUTOPLAY PROGRESS INDICATORS
   ================================================================ */
.curtain-autoplay-indicators {
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-top: 24px !important;
}

.indicator-bar {
  width: 50px !important;
  height: 4px !important;
  border-radius: 4px !important;
  background: rgba(212, 175, 55, 0.25) !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  transition: width 0.3s ease !important;
}

.indicator-bar.active {
  width: 70px !important;
  background: rgba(212, 175, 55, 0.35) !important;
}

.indicator-bar .bar-fill {
  position: absolute !important;
  inset: 0 !important;
  background: #AA820A !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
}

.indicator-bar.active .bar-fill {
  background: #E8C84D !important;
  animation: fillProgressBar 4.5s linear infinite !important;
}

@keyframes fillProgressBar {
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* ================================================================
   MOBILE & TABLET RESPONSIVE STACK (<992px) — 100% READABILITY & AIRY LUXURY
   ================================================================ */
@media (max-width: 992px) {
  .section-kinetic-offerings {
    padding: 56px 0 68px !important;
  }

  .kinetic-curtain-container {
    flex-direction: column !important;
    height: auto !important;
    gap: 20px !important;
    max-width: 580px !important;
    margin: 16px auto 0 !important;
  }

  .kinetic-panel {
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    border-radius: 24px !important;
    border: 1.5px solid rgba(212, 175, 55, 0.45) !important;
    box-shadow: 0 12px 32px rgba(10, 32, 22, 0.12) !important;
    background: #082016 !important;
  }

  .kinetic-panel.active {
    flex: none !important;
    border-color: #E8C84D !important;
  }

  /* High-Contrast Deep Obsidian Overlay on Mobile for Crystal Clear Text */
  .panel-glass-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(6, 24, 16, 0.75) 0%, rgba(4, 18, 12, 0.94) 40%, #030F0A 100%) !important;
    z-index: 2 !important;
  }

  .panel-collapsed-badge {
    display: none !important;
  }

  /* Airy, Well-Padded Content Container */
  .panel-expanded-content {
    position: relative !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    padding: 24px 20px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    z-index: 4 !important;
  }

  /* Top Badges Row */
  .panel-top-pill {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 2px !important;
  }

  .pill-category {
    font-size: 0.68rem !important;
    padding: 3px 10px !important;
    background: rgba(232, 200, 77, 0.15) !important;
    border-color: rgba(232, 200, 77, 0.5) !important;
  }

  .pill-capacity {
    font-size: 0.72rem !important;
    padding: 3px 10px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #F7E7B4 !important;
  }

  /* Main Title & Description */
  .panel-main-info {
    margin: 0 !important;
    gap: 10px !important;
  }

  .panel-icon-brass {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.05rem !important;
    margin-bottom: 2px !important;
  }

  .panel-title {
    font-size: 1.38rem !important;
    line-height: 1.25 !important;
    color: #FFFFFF !important;
    margin: 0 !important;
  }

  .panel-desc {
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.88) !important;
    margin: 0 !important;
  }

  /* Specs Chips: Clean Inline Row / Wrap with Soft Background */
  .panel-specs-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 4px 0 6px !important;
  }

  .panel-specs-chips span {
    font-size: 0.74rem !important;
    padding: 5px 10px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(212, 175, 55, 0.25) !important;
    border-radius: 8px !important;
    color: #E6E1D3 !important;
  }

  /* Action Button: Full Width, Comfortable Touch Height */
  .panel-action-row {
    margin-top: 4px !important;
  }

  .btn-panel-action {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px 20px !important;
    font-size: 0.8rem !important;
    border-radius: 24px !important;
  }

  .curtain-autoplay-indicators {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .section-kinetic-offerings {
    padding: 48px 0 60px !important;
  }

  .panel-expanded-content {
    padding: 20px 16px 18px !important;
    gap: 12px !important;
  }

  .panel-title {
    font-size: 1.25rem !important;
  }

  .panel-desc {
    font-size: 0.84rem !important;
    line-height: 1.55 !important;
  }

  .pill-category,
  .pill-capacity {
    font-size: 0.64rem !important;
    padding: 2px 8px !important;
  }
}


/* ================================================================
   SPECIFIC OCCASION DEPENDENT DROPDOWN STYLES
   ================================================================ */

.specific-occasion-selector-row {
  margin-top: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.select-wrap-gold {
  position: relative !important;
  width: 100% !important;
}

.step-select-input-gold {
  width: 100% !important;
  background: #082016 !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(212, 175, 55, 0.45) !important;
  border-radius: 12px !important;
  padding: 12px 38px 12px 14px !important;
  font-family: var(--font-body) !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.25s ease !important;
}

.step-select-input-gold:focus,
.step-select-input-gold:hover {
  border-color: #E8C84D !important;
  box-shadow: 0 6px 20px rgba(232, 200, 77, 0.25) !important;
}

.step-select-input-gold option {
  background: #082016 !important;
  color: #FFFFFF !important;
  padding: 10px !important;
}

.select-gold-arrow {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #E8C84D !important;
  font-size: 0.85rem !important;
  pointer-events: none !important;
}


/* ================================================================
   HOME PAGE SOCIAL SECTION FOOTER BLEND
   ================================================================ */

.home-social-blend {
  background: linear-gradient(180deg, #051A12 0%, #030F0A 100%) !important;
  padding: 60px 0 50px !important;
  position: relative !important;
  border-top: 1px solid rgba(212, 175, 55, 0.15) !important;
}

.home-social-glass-box {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 24px !important;
  padding: 42px 32px !important;
  text-align: center !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4) !important;
  max-width: 960px !important;
  margin: 0 auto !important;
}

.social-hub-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 16px !important;
  background: rgba(232, 200, 77, 0.12) !important;
  border: 1px solid rgba(232, 200, 77, 0.3) !important;
  border-radius: 30px !important;
  color: #E8C84D !important;
  font-family: var(--font-label) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
}

.social-hub-title {
  font-family: var(--font-title) !important;
  font-size: clamp(1.4rem, 2.5vw, 1.85rem) !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  margin-bottom: 10px !important;
  letter-spacing: -0.01em !important;
}

.social-hub-sub {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.95rem !important;
  margin: 0 auto 28px !important;
  max-width: 580px !important;
  line-height: 1.5 !important;
}

@media (max-width: 768px) {
  .home-social-blend {
    padding: 40px 16px 36px !important;
  }
  .home-social-glass-box {
    padding: 30px 18px !important;
    border-radius: 18px !important;
  }
  .social-btn-group {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .social-link {
    width: 100% !important;
    justify-content: center !important;
  }
}


/* ================================================================
   ACT 05 — 2x2 BENTO SUITE GRID STYLES (PERFECT PHOTO & TEXT HARMONY)
   ================================================================ */

.section-bento-solutions {
  padding: 80px 0 !important;
  background: var(--bg-soft-gold, #F8F5EC) !important;
}

.bento-solutions-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 28px !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
}

.bento-solution-card {
  position: relative !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  min-height: 470px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  border: 1.5px solid rgba(212, 175, 55, 0.35) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  background: #030F0A !important;
}

.bento-solution-card:hover {
  transform: translateY(-6px) !important;
  border-color: #E8C84D !important;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28), 0 0 24px rgba(232, 200, 77, 0.25) !important;
}

.bento-bg-photo {
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 1 !important;
  filter: brightness(0.95) contrast(1.06) saturate(1.15) !important;
}

.bento-solution-card:hover .bento-bg-photo {
  transform: scale(1.06) !important;
}

/* Natural Bottom-Concentrated Luxury Vignette (Top is bright & clear, bottom provides solid contrast) */
.bento-card-scrim {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(3, 15, 10, 0.12) 0%, rgba(3, 15, 10, 0.32) 32%, rgba(3, 15, 10, 0.82) 65%, rgba(3, 15, 10, 0.97) 100%) !important;
  z-index: 2 !important;
}

.bento-card-inner {
  position: relative !important;
  z-index: 3 !important;
  padding: 32px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  gap: 16px !important;
  height: 100% !important;
}

.bento-top-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: auto !important;
  padding-bottom: 24px !important;
  flex-wrap: wrap !important;
}

.bento-category-pill {
  padding: 5px 14px !important;
  background: rgba(3, 15, 10, 0.82) !important;
  border: 1px solid rgba(232, 200, 77, 0.55) !important;
  border-radius: 20px !important;
  color: #E8C84D !important;
  font-family: var(--font-label) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

.bento-capacity-pill {
  padding: 5px 14px !important;
  background: rgba(3, 15, 10, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 20px !important;
  color: #FFFFFF !important;
  font-family: var(--font-label) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

.bento-main-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.bento-icon-brass {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #E8C84D 0%, #D4AF37 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #030F0A !important;
  font-size: 1.2rem !important;
  box-shadow: 0 4px 14px rgba(232, 200, 77, 0.3) !important;
  margin-bottom: 2px !important;
}

.bento-title {
  font-family: var(--font-title) !important;
  font-size: 1.55rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95), 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

.bento-desc {
  color: #F8F5EC !important;
  font-size: 0.94rem !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95), 0 1px 3px rgba(0, 0, 0, 0.85) !important;
}

.bento-specs-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.bento-specs-chips span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 12px !important;
  background: rgba(3, 15, 10, 0.82) !important;
  border: 1px solid rgba(232, 200, 77, 0.35) !important;
  border-radius: 20px !important;
  color: #FFFFFF !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.bento-action-row {
  margin-top: 6px !important;
}

.btn-bento-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 13px 22px !important;
  background: linear-gradient(135deg, #E8C84D 0%, #D4AF37 100%) !important;
  color: #030F0A !important;
  font-family: var(--font-label) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  border-radius: 12px !important;
  border: none !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 14px rgba(232, 200, 77, 0.25) !important;
  width: 100% !important;
}

.btn-bento-action:hover {
  background: #FFFFFF !important;
  color: #030F0A !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(255, 255, 255, 0.3) !important;
}

@media (max-width: 900px) {
  .section-bento-solutions {
    padding: 50px 0 !important;
  }
  .bento-solutions-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .bento-solution-card {
    min-height: auto !important;
    border-radius: 20px !important;
  }
  .bento-card-inner {
    padding: 26px 20px 22px !important;
    gap: 14px !important;
  }
  .bento-card-scrim {
    background: linear-gradient(180deg, rgba(3, 15, 10, 0.15) 0%, rgba(3, 15, 10, 0.4) 30%, rgba(3, 15, 10, 0.85) 60%, rgba(3, 15, 10, 0.98) 100%) !important;
  }
  .bento-top-row {
    padding-bottom: 18px !important;
    gap: 8px !important;
  }
  .bento-category-pill, .bento-capacity-pill {
    font-size: 0.7rem !important;
    padding: 4px 10px !important;
  }
  .bento-title {
    font-size: 1.38rem !important;
    line-height: 1.25 !important;
  }
  .bento-desc {
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
  }
  .bento-specs-chips {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  .bento-specs-chips span {
    font-size: 0.76rem !important;
    padding: 5px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .btn-bento-action {
    padding: 13px 18px !important;
    font-size: 0.82rem !important;
  }
}


/* ================================================================
   PAGE HERO BANNER LUXURY BACKGROUND STYLES
   ================================================================ */

.page-hero-banner {
  position: relative !important;
  padding: 115px 0 95px !important;
  background: #030F0A !important;
  text-align: center !important;
  overflow: hidden !important;
  border-bottom: 1.5px solid rgba(212, 175, 55, 0.3) !important;
}

.page-hero-banner .hero-bg-overlay-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
  opacity: 0.58 !important;
  filter: brightness(0.85) contrast(1.12) saturate(1.1) !important;
  transform: scale(1.02) !important;
}

.page-hero-banner .hero-scrim-gradient {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(3, 15, 10, 0.42) 0%, rgba(3, 15, 10, 0.68) 55%, rgba(3, 15, 10, 0.96) 100%) !important;
  z-index: 2 !important;
}

.page-hero-banner .container {
  position: relative !important;
  z-index: 3 !important;
}

.page-hero-banner .page-breadcrumb {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 18px !important;
  background: rgba(232, 200, 77, 0.12) !important;
  border: 1px solid rgba(232, 200, 77, 0.35) !important;
  border-radius: 30px !important;
  color: #E8C84D !important;
  font-family: var(--font-label) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
}

.page-hero-banner .page-hero-title {
  font-family: var(--font-title) !important;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem) !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  margin-bottom: 12px !important;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.7) !important;
}

.page-hero-banner .page-hero-title em {
  color: #E8C84D !important;
  font-style: italic !important;
}

.page-hero-banner .page-hero-slogan {
  color: #E8C84D !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  margin: 0 auto !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}


/* ================================================================
   ABOUT PAGE LUXURY MODERN UPGRADE STYLES
   ================================================================ */

.section-luxury-about {
  padding: 85px 0 !important;
  background: var(--bg-cream, #FFFDF8) !important;
}

.about-hero-grid {
  display: grid !important;
  grid-template-columns: 460px 1fr !important;
  gap: 52px !important;
  align-items: center !important;
}

.founder-card-frame {
  position: relative !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  border: 1.5px solid rgba(212, 175, 55, 0.4) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.16) !important;
  min-height: 520px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  background: #030F0A !important;
}

.founder-card-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
}

.founder-card-gradient {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(3, 15, 10, 0.2) 0%, rgba(3, 15, 10, 0.6) 50%, rgba(3, 15, 10, 0.95) 100%) !important;
  z-index: 2 !important;
}

.founder-floating-badge {
  position: relative !important;
  z-index: 3 !important;
  margin: 0 24px 12px 24px !important;
  padding: 12px 18px !important;
  background: rgba(3, 15, 10, 0.88) !important;
  border: 1px solid rgba(232, 200, 77, 0.45) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(12px) !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.badge-crown-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #E8C84D 0%, #D4AF37 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #030F0A !important;
  font-size: 1.1rem !important;
}

.founder-floating-badge strong {
  display: block !important;
  color: #FFFFFF !important;
  font-size: 1.05rem !important;
  font-family: var(--font-title) !important;
}

.founder-floating-badge span {
  display: block !important;
  color: #E8C84D !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
}

.founder-stat-chip {
  position: relative !important;
  z-index: 3 !important;
  margin: 0 24px 24px 24px !important;
  padding: 8px 14px !important;
  background: rgba(0, 0, 0, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 30px !important;
  color: #FFFFFF !important;
  font-size: 0.8rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.about-lead-p {
  font-size: 1.05rem !important;
  line-height: 1.65 !important;
  color: var(--text-dark, #1A2621) !important;
  margin-bottom: 12px !important;
}

.about-secondary-p {
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: var(--text-muted, #4A5D54) !important;
  margin-bottom: 28px !important;
}

.about-pillars-bento-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 32px !important;
}

.pillar-bento-card {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(212, 175, 55, 0.25) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.3s ease !important;
}

.pillar-bento-card:hover {
  transform: translateY(-4px) !important;
  border-color: #E8C84D !important;
  box-shadow: 0 12px 28px rgba(232, 200, 77, 0.18) !important;
}

.pillar-top-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 10px !important;
}

.pillar-seal-ta {
  padding: 3px 10px !important;
  background: rgba(232, 200, 77, 0.15) !important;
  border: 1px solid rgba(232, 200, 77, 0.35) !important;
  border-radius: 8px !important;
  color: #B38E22 !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
}

.pillar-icon {
  color: #0E3D2A !important;
  font-size: 1.1rem !important;
}

.pillar-bento-card h4 {
  font-size: 1.05rem !important;
  color: var(--emerald, #0E3D2A) !important;
  margin-bottom: 6px !important;
}

.pillar-bento-card p {
  font-size: 0.85rem !important;
  line-height: 1.45 !important;
  color: #556B61 !important;
  margin: 0 !important;
}

.about-milestones-row {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  padding: 18px 24px !important;
  background: #F3EFE6 !important;
  border-radius: 16px !important;
  border: 1px solid rgba(212, 175, 55, 0.2) !important;
}

.milestone-item strong {
  display: block !important;
  font-family: var(--font-title) !important;
  font-size: 1.4rem !important;
  color: #0E3D2A !important;
}

.milestone-item span {
  font-size: 0.8rem !important;
  color: #556B61 !important;
  font-weight: 600 !important;
}

.milestone-divider {
  width: 1px !important;
  height: 32px !important;
  background: rgba(212, 175, 55, 0.3) !important;
}

/* CPU HUD SECTION */
.cpu-hud-top-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 16px !important;
  background: rgba(232, 200, 77, 0.15) !important;
  border: 1px solid rgba(232, 200, 77, 0.35) !important;
  border-radius: 30px !important;
  color: #E8C84D !important;
  font-family: var(--font-label) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  margin-bottom: 18px !important;
}

.cpu-live-hud-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.hud-pill-box {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 18px !important;
  background: rgba(3, 15, 10, 0.75) !important;
  border: 1px solid rgba(232, 200, 77, 0.3) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(8px) !important;
}

.hud-pill-box i {
  font-size: 1.2rem !important;
}

.hud-pill-box strong {
  display: block !important;
  color: #FFFFFF !important;
  font-size: 0.95rem !important;
}

.hud-pill-box span {
  display: block !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 0.75rem !important;
}

/* INFRASTRUCTURE SECTION */
.section-infrastructure-suite {
  padding: 85px 0 !important;
  background: var(--bg-soft-gold, #F8F5EC) !important;
}

.infra-bento-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}

.infra-card {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 20px !important;
  padding: 32px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.35s ease !important;
}

.infra-card:hover {
  transform: translateY(-6px) !important;
  border-color: #E8C84D !important;
  box-shadow: 0 18px 40px rgba(232, 200, 77, 0.2) !important;
}

.infra-icon-circle {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #E8C84D 0%, #D4AF37 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #030F0A !important;
  font-size: 1.3rem !important;
  margin-bottom: 16px !important;
  box-shadow: 0 4px 14px rgba(232, 200, 77, 0.3) !important;
}

.infra-category-badge {
  font-family: var(--font-label) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #B38E22 !important;
  letter-spacing: 1px !important;
  margin-bottom: 8px !important;
}

.infra-card h3 {
  font-family: var(--font-title) !important;
  font-size: 1.35rem !important;
  color: #0E3D2A !important;
  margin-bottom: 12px !important;
}

.infra-card p {
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
  color: #556B61 !important;
  margin-bottom: 20px !important;
  flex-grow: 1 !important;
}

.infra-chip-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  background: rgba(14, 61, 42, 0.06) !important;
  border: 1px solid rgba(14, 61, 42, 0.15) !important;
  border-radius: 20px !important;
  color: #0E3D2A !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
}

@media (max-width: 992px) {
  .about-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .founder-card-frame {
    min-height: 400px !important;
  }
  .infra-bento-grid {
    grid-template-columns: 1fr !important;
  }
}


/* Mobile Drawer Subitem Enhancements */
.mobile-drawer-section-title {
  font-family: var(--font-label) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #B38E22 !important;
  margin: 10px 0 4px 14px !important;
}

.mobile-nav-subitem {
  font-family: var(--font-body) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--emerald, #0E3D2A) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 14px 8px 24px !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.mobile-nav-subitem i {
  font-size: 13px !important;
  width: 18px !important;
  text-align: center !important;
}

.mobile-nav-subitem:hover, .mobile-nav-subitem.active {
  background: rgba(232, 200, 77, 0.15) !important;
  color: #B38E22 !important;
  transform: translateX(4px) !important;
}


/* ================================================================
   ABOUT US PAGE — COMPREHENSIVE MOBILE RESPONSIVE STYLES
   ================================================================ */

@media (max-width: 768px) {
  /* 1. Page Hero Banner */
  .page-hero-banner {
    padding: 85px 16px 65px !important;
  }
  .page-hero-banner .page-breadcrumb {
    font-size: 0.68rem !important;
    padding: 4px 12px !important;
    margin-bottom: 12px !important;
  }
  .page-hero-banner .page-hero-title {
    font-size: clamp(1.75rem, 6vw, 2.2rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 8px !important;
  }
  .page-hero-banner .page-hero-slogan {
    font-size: 0.92rem !important;
    line-height: 1.45 !important;
  }

  /* 2. Section 1: Leadership & Heritage */
  .section-luxury-about,
  .section-luxury-heritage {
    padding: 50px 0 40px !important;
  }
  .about-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .founder-card-frame,
  .founder-main-frame {
    height: 380px !important;
    min-height: 360px !important;
    border-radius: 20px !important;
  }
  .founder-floating-badge {
    margin: 0 12px 8px 12px !important;
    padding: 10px 14px !important;
    gap: 10px !important;
    border-radius: 14px !important;
  }
  .badge-crown-icon {
    width: 34px !important;
    height: 34px !important;
    font-size: 0.95rem !important;
  }
  .founder-floating-badge strong {
    font-size: 0.95rem !important;
  }
  .founder-floating-badge span {
    font-size: 0.72rem !important;
  }
  .founder-stat-chip,
  .founder-guarantee-pill {
    margin: 0 12px 14px 12px !important;
    padding: 6px 12px !important;
    font-size: 0.74rem !important;
  }
  .about-content-col .section-title {
    font-size: clamp(1.5rem, 5vw, 1.85rem) !important;
    line-height: 1.25 !important;
    margin-top: 6px !important;
    margin-bottom: 12px !important;
  }
  .about-lead-p {
    font-size: 0.96rem !important;
    line-height: 1.6 !important;
    margin-bottom: 10px !important;
  }
  .about-secondary-p {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    margin-bottom: 20px !important;
  }
  .about-pillars-bento-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }
  .pillar-bento-card {
    padding: 16px 14px !important;
    border-radius: 14px !important;
  }
  .pillar-bento-card h4 {
    font-size: 0.98rem !important;
    margin-bottom: 4px !important;
  }
  .pillar-bento-card p {
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
  }
  .about-milestones-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding: 14px 8px !important;
    border-radius: 14px !important;
  }
  .milestone-item strong {
    font-size: 1.25rem !important;
  }
  .milestone-item span {
    font-size: 0.68rem !important;
  }
  .milestone-divider {
    display: none !important;
  }

  /* 3. Section 2: Full-Stretch CPU Banner */
  .section-cpu-hud,
  .section-cpu-console {
    height: auto !important;
    min-height: auto !important;
    padding: 60px 0 !important;
  }
  .fullstretch-content,
  .cpu-console-container {
    padding: 0 16px !important;
  }
  .cpu-hud-top-tag,
  .cpu-console-badge {
    font-size: 0.68rem !important;
    padding: 4px 12px !important;
    margin-bottom: 12px !important;
  }
  .section-cpu-hud h2,
  .cpu-console-title {
    font-size: clamp(1.55rem, 5vw, 1.95rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
  }
  .section-cpu-hud p,
  .cpu-console-desc {
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
    margin-bottom: 20px !important;
  }
  .cpu-live-hud-grid,
  .cpu-matrix-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .hud-pill-box,
  .matrix-card {
    width: 100% !important;
    padding: 12px 14px !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
  }
  .hud-pill-box strong,
  .matrix-card-content strong {
    font-size: 0.88rem !important;
  }
  .hud-pill-box span,
  .matrix-card-content span {
    font-size: 0.72rem !important;
  }
  .cpu-action-row,
  .cpu-cta-wrap {
    margin-top: 22px !important;
  }
  .cpu-action-row .btn-primary-gold,
  .cpu-cta-wrap .btn-primary-gold {
    width: 100% !important;
    justify-content: center !important;
    font-size: 0.8rem !important;
    padding: 13px 16px !important;
    text-align: center !important;
  }

  /* 4. Section 3: Kitchen Infrastructure Suite */
  .section-infrastructure-suite,
  .section-infra-bento {
    padding: 50px 0 45px !important;
  }
  .infra-bento-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .infra-card {
    padding: 24px 18px !important;
    border-radius: 18px !important;
  }
  .infra-card h3 {
    font-size: 1.25rem !important;
    margin-bottom: 8px !important;
  }
  .infra-card p {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    margin-bottom: 16px !important;
  }
  .infra-chip-tag {
    font-size: 0.76rem !important;
    padding: 6px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* ================================================================
   SUB-MENU NAVIGATION STYLES (DESKTOP DROPDOWN & MOBILE ACCORDION)
   ================================================================ */

/* ---------- DESKTOP DROPDOWN SUBMENU ---------- */
.nav-item-dropdown {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

.nav-dropdown-trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.nav-chevron {
  font-size: 10px !important;
  transition: transform 0.3s ease !important;
}

.nav-item-dropdown:hover .nav-chevron {
  transform: rotate(180deg) !important;
}

.nav-dropdown-menu {
  position: absolute !important;
  top: calc(100% + 14px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(10px) !important;
  width: 390px !important;
  background: rgba(3, 15, 10, 0.97) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.35) !important;
  border-radius: 20px !important;
  padding: 12px !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4), 0 0 20px rgba(232, 200, 77, 0.15) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 1000 !important;
}

.nav-item-dropdown:hover .nav-dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
}

.dropdown-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
}

.dropdown-item:hover, .dropdown-item.active {
  background: rgba(232, 200, 77, 0.14) !important;
  transform: translateX(4px) !important;
}

.dropdown-item i {
  font-size: 16px !important;
  margin-top: 3px !important;
}

.dropdown-item strong {
  display: block !important;
  color: #FFFFFF !important;
  font-size: 13.5px !important;
  font-family: var(--font-title) !important;
  margin-bottom: 2px !important;
}

.dropdown-item span {
  display: block !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 11.5px !important;
  line-height: 1.35 !important;
}

.dropdown-footer {
  border-top: 1px solid rgba(212, 175, 55, 0.2) !important;
  padding-top: 10px !important;
  margin-top: 6px !important;
  text-align: center !important;
}

.dropdown-all-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #E8C84D !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.dropdown-all-link:hover {
  color: #FFFFFF !important;
}

/* ---------- MOBILE ACCORDION SUBMENU ---------- */
.mobile-nav-accordion {
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
}

.mobile-nav-accordion.is-expanded {
  border-color: rgba(232, 200, 77, 0.45) !important;
  background: rgba(232, 200, 77, 0.06) !important;
}

.mobile-nav-accordion-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 14px !important;
  cursor: pointer !important;
  user-select: none !important;
}

.mobile-nav-accordion-header .header-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-family: var(--font-label) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--emerald, #0E3D2A) !important;
}

.mobile-nav-accordion-header .header-left i {
  color: var(--gold, #D4AF37) !important;
  font-size: 16px !important;
  width: 20px !important;
  text-align: center !important;
}

.accordion-chevron {
  color: var(--gold, #D4AF37) !important;
  font-size: 12px !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.mobile-nav-accordion.is-expanded .accordion-chevron {
  transform: rotate(180deg) !important;
}

.mobile-submenu-collapse {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.mobile-nav-accordion.is-expanded .mobile-submenu-collapse {
  max-height: 500px !important;
}

.mobile-submenu-inner {
  padding: 8px 10px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  border-top: 1px dashed rgba(212, 175, 55, 0.25) !important;
}

.mobile-submenu-link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.mobile-submenu-link:hover, .mobile-submenu-link.active {
  background: rgba(232, 200, 77, 0.15) !important;
  transform: translateX(4px) !important;
}

.sub-icon-pill {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: rgba(14, 61, 42, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  flex-shrink: 0 !important;
}

.mobile-submenu-link strong {
  display: block !important;
  color: var(--emerald, #0E3D2A) !important;
  font-size: 13px !important;
  font-family: var(--font-title) !important;
}

.mobile-submenu-link span {
  display: block !important;
  color: var(--text-muted, #556B61) !important;
  font-size: 11px !important;
}

.mobile-submenu-all {
  display: block !important;
  text-align: center !important;
  padding: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #B38E22 !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  background: rgba(232, 200, 77, 0.12) !important;
  margin-top: 4px !important;
}


/* ================================================================
   ABOUT US — SECTION 2 CPU HUD (RELAXED, ULTRA-LEGIBLE MOBILE & DESKTOP)
   ================================================================ */

#about-cpu-section {
  position: relative !important;
  min-height: 560px !important;
  display: flex !important;
  align-items: center !important;
  padding: 85px 0 !important;
}

#about-cpu-section .cpu-hud-top-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 16px !important;
  background: rgba(3, 15, 10, 0.85) !important;
  border: 1px solid rgba(232, 200, 77, 0.45) !important;
  border-radius: 30px !important;
  color: #E8C84D !important;
  font-family: var(--font-label) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

#about-cpu-section .cpu-hero-heading {
  color: #FFFFFF !important;
  font-family: var(--font-title) !important;
  font-size: clamp(2rem, 4.5vw, 3.2rem) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin-bottom: 16px !important;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.9) !important;
}

#about-cpu-section .text-gold-italic {
  color: #E8C84D !important;
  font-style: italic !important;
}

#about-cpu-section .cpu-hero-desc {
  color: rgba(255, 255, 255, 0.9) !important;
  max-width: 660px !important;
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
  margin-bottom: 28px !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
}

#about-cpu-section .cpu-hero-desc strong {
  color: #FFFFFF !important;
}

#about-cpu-section .cpu-live-hud-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 1140px !important;
  margin-bottom: 28px !important;
}

#about-cpu-section .hud-pill-box {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  background: rgba(3, 15, 10, 0.88) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.38) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.3s ease !important;
  box-sizing: border-box !important;
}

#about-cpu-section .hud-pill-box:hover {
  border-color: #E8C84D !important;
  transform: translateY(-3px) !important;
  background: rgba(3, 15, 10, 0.95) !important;
}

#about-cpu-section .hud-icon-gem {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #E8C84D 0%, #D4AF37 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #030F0A !important;
  font-size: 1.2rem !important;
  box-shadow: 0 4px 14px rgba(232, 200, 77, 0.3) !important;
  flex-shrink: 0 !important;
}

#about-cpu-section .hud-text-block strong {
  display: block !important;
  color: #FFFFFF !important;
  font-size: 1.02rem !important;
  font-family: var(--font-title) !important;
  margin-bottom: 2px !important;
  letter-spacing: 0.2px !important;
}

#about-cpu-section .hud-text-block span {
  display: block !important;
  color: #E8C84D !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px !important;
}

#about-cpu-section .cpu-action-row {
  margin-top: 10px !important;
  width: 100% !important;
}

#about-cpu-section .btn-cpu-wa-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 16px 30px !important;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  color: #FFFFFF !important;
  font-family: var(--font-label) !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  border-radius: 16px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

#about-cpu-section .btn-cpu-wa-action i {
  font-size: 1.35rem !important;
  color: #FFFFFF !important;
}

#about-cpu-section .btn-cpu-wa-action:hover {
  background: linear-gradient(135deg, #2BF076 0%, #15A392 100%) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.6) !important;
}

/* Tablet Device Optimizations (2 Columns) */
@media (max-width: 1023px) and (min-width: 769px) {
  #about-cpu-section .cpu-live-hud-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}

/* Mobile Device Optimizations (1 Column) */
@media (max-width: 768px) {
  #about-cpu-section {
    padding: 45px 0 40px !important;
    min-height: auto !important;
    height: auto !important;
  }
  
  #about-cpu-section .fullstretch-content {
    background: rgba(3, 15, 10, 0.9) !important;
    border: 1.5px solid rgba(212, 175, 55, 0.4) !important;
    border-radius: 22px !important;
    padding: 26px 18px !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
    margin: 0 14px !important;
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  #about-cpu-section .cpu-hud-top-tag {
    font-size: 0.72rem !important;
    padding: 5px 12px !important;
    margin-bottom: 14px !important;
    letter-spacing: 0.5px !important;
  }
  
  #about-cpu-section .cpu-hero-heading {
    font-size: 1.55rem !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
  }
  
  #about-cpu-section .cpu-hero-desc {
    font-size: 0.92rem !important;
    line-height: 1.65 !important;
    margin-bottom: 20px !important;
    color: #F8F5EC !important;
  }
  
  #about-cpu-section .cpu-live-hud-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 22px !important;
  }
  
  #about-cpu-section .hud-pill-box {
    padding: 12px 14px !important;
    gap: 12px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(212, 175, 55, 0.25) !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  
  #about-cpu-section .hud-icon-gem {
    width: 36px !important;
    height: 36px !important;
    font-size: 1rem !important;
    border-radius: 10px !important;
  }
  
  #about-cpu-section .hud-text-block strong {
    font-size: 0.92rem !important;
    line-height: 1.25 !important;
    margin-bottom: 2px !important;
  }
  
  #about-cpu-section .hud-text-block span {
    font-size: 0.76rem !important;
    line-height: 1.2 !important;
  }
  
  #about-cpu-section .cpu-action-row {
    margin-top: 24px !important;
    padding-top: 2px !important;
  }
  
  #about-cpu-section .btn-cpu-wa-action {
    width: 100% !important;
    font-size: 0.85rem !important;
    padding: 15px 18px !important;
    box-sizing: border-box !important;
    border-radius: 14px !important;
    gap: 10px !important;
  }

  #about-cpu-section .btn-cpu-wa-action i {
    font-size: 1.25rem !important;
  }
}


/* ================================================================
   ABOUT US — SECTION 1: LEADERSHIP & HERITAGE LUXURY BALANCED GRID
   Strictly Scoped under #about-leadership-section
   ================================================================ */

#about-leadership-section {
  padding: 90px 0 !important;
  background: linear-gradient(180deg, #FFFDF8 0%, #FAF5E8 100%) !important;
  position: relative !important;
}

#about-leadership-section .about-hero-grid {
  display: grid !important;
  grid-template-columns: 470px 1fr !important;
  gap: 48px !important;
  align-items: stretch !important;
}

/* Left Column: Flex Column Stretching 100% to Match Right Column Height */
#about-leadership-section .about-media-col {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 20px !important;
  height: 100% !important;
}

#about-leadership-section .founder-card-frame {
  position: relative !important;
  flex: 1 1 auto !important;
  min-height: 440px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  border: 2px solid rgba(212, 175, 55, 0.55) !important;
  box-shadow: 0 22px 50px rgba(3, 15, 10, 0.2), 0 0 0 6px rgba(212, 175, 55, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background: #030F0A !important;
}

#about-leadership-section .founder-card-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 25% !important;
  z-index: 1 !important;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#about-leadership-section .founder-card-frame:hover .founder-card-img {
  transform: scale(1.04) !important;
}

#about-leadership-section .founder-card-gradient {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    180deg,
    rgba(3, 15, 10, 0.45) 0%,
    rgba(3, 15, 10, 0.15) 35%,
    rgba(3, 15, 10, 0.65) 70%,
    rgba(3, 15, 10, 0.96) 100%
  ) !important;
  z-index: 2 !important;
}

/* Top Editorial Pills inside Portrait Card */
#about-leadership-section .founder-card-top-bar {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 18px 20px 0 20px !important;
}

#about-leadership-section .founder-origin-pill,
#about-leadership-section .founder-fssai-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  background: rgba(3, 15, 10, 0.78) !important;
  border: 1px solid rgba(232, 200, 77, 0.42) !important;
  border-radius: 30px !important;
  color: #F8F5EC !important;
  font-family: var(--font-label) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

#about-leadership-section .founder-origin-pill i,
#about-leadership-section .founder-fssai-pill i {
  color: #E8C84D !important;
  font-size: 0.72rem !important;
}

/* Bottom Unified Luxury Founder Plaque */
#about-leadership-section .founder-card-bottom-wrap {
  position: relative !important;
  z-index: 3 !important;
  padding: 0 20px 20px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

#about-leadership-section .founder-floating-badge {
  margin: 0 !important;
  padding: 14px 16px !important;
  background: rgba(5, 22, 15, 0.9) !important;
  border: 1.5px solid rgba(232, 200, 77, 0.48) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4) !important;
}

#about-leadership-section .founder-badge-meta {
  flex: 1 1 auto !important;
}

#about-leadership-section .founder-exp-seal {
  padding: 6px 11px !important;
  background: linear-gradient(135deg, rgba(232, 200, 77, 0.2) 0%, rgba(212, 175, 55, 0.08) 100%) !important;
  border: 1px solid rgba(232, 200, 77, 0.45) !important;
  border-radius: 12px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

#about-leadership-section .founder-exp-seal strong {
  display: block !important;
  color: #E8C84D !important;
  font-family: var(--font-title) !important;
  font-size: 1rem !important;
  line-height: 1.1 !important;
}

#about-leadership-section .founder-exp-seal span {
  display: block !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 0.62rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  margin-top: 2px !important;
}

#about-leadership-section .founder-stat-chip {
  margin: 0 !important;
  padding: 9px 14px !important;
  background: rgba(3, 15, 10, 0.82) !important;
  border: 1px solid rgba(232, 200, 77, 0.28) !important;
  border-radius: 12px !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Royal Dark-Emerald & Gold Milestones Counter Box (Anchored in Left Column) */
#about-leadership-section .about-milestones-row {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr auto 1fr !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 20px 22px !important;
  background: linear-gradient(135deg, #07271B 0%, #03130D 100%) !important;
  border-radius: 20px !important;
  border: 1.5px solid rgba(212, 175, 55, 0.5) !important;
  box-shadow: 0 16px 36px rgba(3, 15, 10, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  margin: 0 !important;
}

#about-leadership-section .milestone-item {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
}

#about-leadership-section .milestone-icon-dot {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(232, 200, 77, 0.14) !important;
  border: 1px solid rgba(232, 200, 77, 0.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #E8C84D !important;
  font-size: 0.72rem !important;
  margin-bottom: 4px !important;
}

#about-leadership-section .milestone-item strong {
  display: block !important;
  font-family: var(--font-title) !important;
  font-size: 1.5rem !important;
  line-height: 1.15 !important;
  color: #E8C84D !important;
  letter-spacing: 0.3px !important;
}

#about-leadership-section .milestone-item span {
  font-size: 0.76rem !important;
  color: rgba(255, 255, 255, 0.86) !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
}

#about-leadership-section .milestone-divider {
  width: 1px !important;
  height: 44px !important;
  background: linear-gradient(180deg, transparent 0%, rgba(232, 200, 77, 0.45) 50%, transparent 100%) !important;
}

/* Right Column: Flex Column Aligned Top-to-Bottom with Left Column */
#about-leadership-section .about-content-col {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  gap: 22px !important;
}

#about-leadership-section .about-secondary-p {
  margin-bottom: 18px !important;
}

/* Luxury Sanctity & Craft Assurance Ribbon */
#about-leadership-section .about-sanctity-ribbon {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 13px 18px !important;
  background: linear-gradient(90deg, rgba(14, 61, 42, 0.06) 0%, rgba(232, 200, 77, 0.14) 50%, rgba(14, 61, 42, 0.06) 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  border-left: 4px solid #0E3D2A !important;
  border-radius: 14px !important;
}

#about-leadership-section .sanctity-ribbon-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 0.86rem !important;
  color: #1A2621 !important;
}

#about-leadership-section .sanctity-ribbon-item i {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: #0E3D2A !important;
  color: #E8C84D !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.78rem !important;
  flex-shrink: 0 !important;
}

#about-leadership-section .sanctity-ribbon-sep {
  width: 1px !important;
  height: 24px !important;
  background: rgba(212, 175, 55, 0.4) !important;
}

/* 4 Heritage Pillars Luxury Bento Grid */
#about-leadership-section .about-pillars-bento-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 0 !important;
}

#about-leadership-section .pillar-bento-card {
  position: relative !important;
  background: #FFFFFF !important;
  border: 1.5px solid rgba(212, 175, 55, 0.32) !important;
  border-radius: 18px !important;
  padding: 20px 22px !important;
  box-shadow: 0 10px 26px rgba(3, 15, 10, 0.05) !important;
  transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden !important;
}

#about-leadership-section .pillar-bento-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #0E3D2A 0%, #D4AF37 50%, #0E3D2A 100%) !important;
  opacity: 0.75 !important;
}

#about-leadership-section .pillar-bento-card:hover {
  transform: translateY(-5px) !important;
  border-color: #D4AF37 !important;
  box-shadow: 0 16px 34px rgba(212, 175, 55, 0.2) !important;
}

#about-leadership-section .pillar-icon-medallion {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(14, 61, 42, 0.08) 0%, rgba(232, 200, 77, 0.18) 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#about-leadership-section .pillar-icon {
  color: #0E3D2A !important;
  font-size: 0.98rem !important;
}

/* Responsive Breakpoints for #about-leadership-section */
@media (max-width: 992px) {
  #about-leadership-section .about-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  #about-leadership-section .founder-card-frame {
    min-height: 420px !important;
  }
}

@media (max-width: 768px) {
  #about-leadership-section {
    padding: 50px 0 42px !important;
  }

  #about-leadership-section .founder-card-frame {
    min-height: 370px !important;
    height: auto !important;
  }

  #about-leadership-section .founder-card-top-bar {
    padding: 14px 14px 0 14px !important;
  }

  #about-leadership-section .founder-origin-pill,
  #about-leadership-section .founder-fssai-pill {
    font-size: 0.62rem !important;
    padding: 5px 10px !important;
  }

  #about-leadership-section .founder-card-bottom-wrap {
    padding: 0 14px 14px 14px !important;
  }

  #about-leadership-section .about-sanctity-ribbon {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  #about-leadership-section .sanctity-ribbon-sep {
    display: none !important;
  }

  #about-leadership-section .about-pillars-bento-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #about-leadership-section .about-milestones-row {
    grid-template-columns: repeat(3, 1fr) !important;
    padding: 16px 10px !important;
    gap: 8px !important;
  }

  #about-leadership-section .milestone-divider {
    display: none !important;
  }

  #about-leadership-section .milestone-item strong {
    font-size: 1.25rem !important;
  }

  #about-leadership-section .milestone-item span {
    font-size: 0.68rem !important;
  }
}