/* ================================================================
   CCD MULTICOLOR PALETTE — Beyond Temptation Premium
   Exact colors from cafecoffeeday.com website:
   Muted Magenta   #D17FD6  — pink/purple sections, badges
   Vivid Yellow    #FFE300  — hero accent, CTA highlight
   Tangy Teal      #69DFDB  — nav active, cards, links
   Premium Orange  #FA7036  — hot food, CTA buttons, tags
   Charming Green  #75D9A0  — desserts, stats, success states
   Base Dark       #1C1C2E  — premium dark backgrounds
   Chalk White     #FAFAFA  — clean card backgrounds
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Belanosima:wght@400;600;700&family=Montserrat:wght@500;600;700;800;900&family=Quicksand:wght@400;500;600;700&display=swap');

:root {
  /* Simplified 2-tone brand palette — teal/aqua + yellow (was 5-colour CCD rainbow) */
  --c-magenta:  #1A9BAB;
  --c-magenta2: #147A8A;
  --c-magenta-pale: rgba(59,191,204,0.12);

  --c-yellow:   #FFE300;
  --c-yellow2:  #D4BC00;
  --c-yellow-pale: rgba(255,227,0,0.15);

  --c-teal:     #69DFDB;
  --c-teal2:    #3DBFBB;
  --c-teal-pale: rgba(105,223,219,0.12);

  --c-orange:   #1A9BAB;
  --c-orange2:  #147A8A;
  --c-orange-pale: rgba(59,191,204,0.12);

  --c-green:    #69DFDB;
  --c-green2:   #1A9BAB;
  --c-green-pale: rgba(105,223,219,0.12);

  /* Neutral base */
  --c-dark:     #1C1C2E;
  --c-dark2:    #12121F;
  --c-dark3:    #2A2A42;
  --c-chalk:    #FAFAFA;
  --c-white:    #FFFFFF;
  --c-cream:    #FFF9F0;
  --c-ink:      #1C1C2E;
  --c-ink2:     #4A4A6A;
  --c-muted:    #8A8AAA;

  /* Map to existing BT vars */
  --aq:    var(--c-teal);
  --aq2:   var(--c-teal2);
  --aq3:   #1A9BAB;
  --ye:    var(--c-yellow);
  --ye2:   var(--c-yellow2);
  --ink:   var(--c-ink);
  --ink2:  var(--c-ink2);
  --muted: var(--c-muted);
  --b-aqua:   #F0FFFE;
  --b-yellow: #FFFCE0;
  --b-cream:  #FFF9F0;
  --b-white:  #FFFFFF;
  --brd-aq: rgba(105,223,219,0.2);
  --brd-ye: rgba(255,227,0,0.25);
  --aq-pale: var(--c-teal-pale);
  --ye-pale: var(--c-yellow-pale);

  /* Typography — bold, minimal, no cursive */
  --f-brand:  'Berlin Sans FB', 'Belanosima', sans-serif;
  --f-script: 'Berlin Sans FB', 'Belanosima', sans-serif;
  --f-disp:   'Montserrat', sans-serif;
  --f-body:   'Quicksand', sans-serif;
  --f-serif:  'Montserrat', sans-serif;
}

/* ── Global body ── */
body { font-family: var(--f-body) !important; background: var(--c-chalk) !important; }

/* ── Progress bar — teal/yellow ── */
#progress {
  background: linear-gradient(90deg,
    var(--c-yellow) 0%,
    var(--c-teal) 100%) !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar-thumb { background: var(--c-teal2) !important; }
::selection { background: rgba(105,223,219,0.3) !important; }

/* ================================================================
   NAV — clean white, CCD teal active
   ================================================================ */
#nav {
  background: rgba(255,255,255,0.97) !important;
  border-bottom: 2px solid transparent !important;
  box-shadow: 0 2px 24px rgba(28,28,46,0.06) !important;
}
#nav.scrolled {
  border-bottom-color: var(--c-teal) !important;
  box-shadow: 0 4px 30px rgba(105,223,219,0.15) !important;
}
.nav-links a:hover, .nav-links a.active { color: var(--c-teal2) !important; }
.nav-links a::after { background: var(--c-teal) !important; }
.nav-logo img {
  border-color: var(--c-teal) !important;
  box-shadow: 0 4px 16px rgba(105,223,219,0.3) !important;
  animation: navLogoPulse 4s ease-in-out infinite !important;
}
@keyframes navLogoPulse {
  0%,100% { box-shadow: 0 4px 16px rgba(105,223,219,0.3); }
  50% { box-shadow: 0 4px 28px rgba(105,223,219,0.6), 0 0 0 4px rgba(105,223,219,0.08); }
}
.nav-btn {
  background: linear-gradient(135deg, var(--c-orange), var(--c-magenta)) !important;
  border-radius: 100px !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.12em !important;
}
.nav-btn:hover {
  background: linear-gradient(135deg, var(--c-magenta), var(--c-orange)) !important;
  box-shadow: 0 8px 28px rgba(26,155,171,0.4) !important;
}

/* ── Mob menu ── */
.mob-cta { background: linear-gradient(135deg, var(--c-orange), var(--c-magenta)) !important; border-radius: 100px !important; }

/* ================================================================
   TYPOGRAPHY — CCD inspired, serif display
   ================================================================ */
.h2 { font-family: var(--f-serif) !important; letter-spacing: 0.01em !important; }
.h2 em { color: var(--c-orange) !important; font-style: italic !important; }
.script { font-family: var(--f-script) !important; color: var(--c-dark) !important; }
.eyebrow { color: var(--c-teal2) !important; font-family: var(--f-disp) !important; }
.eyebrow::before, .eyebrow::after { background: var(--c-teal) !important; }
.rule { background: linear-gradient(90deg, var(--c-teal), var(--c-yellow)) !important; height: 3px !important; width: 64px !important; }
.body-t { color: var(--c-ink2) !important; line-height: 1.85 !important; }

/* ================================================================
   BUTTONS — colour-coded
   ================================================================ */
.btn {
  border-radius: 100px !important;
  font-family: var(--f-disp) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  transition: all 0.35s cubic-bezier(0.16,1,0.3,1) !important;
}
.btn-aq { background: var(--c-teal2) !important; color: #fff !important; }
.btn-aq:hover { background: var(--c-teal) !important; box-shadow: 0 12px 35px rgba(105,223,219,0.4) !important; transform: translateY(-2px) !important; }
.btn-wh { background: var(--c-orange) !important; color: #fff !important; }
.btn-wh:hover { background: var(--c-orange2) !important; box-shadow: 0 12px 35px rgba(26,155,171,0.4) !important; transform: translateY(-2px) !important; }
.btn-ye { background: var(--c-yellow) !important; color: var(--c-dark) !important; }
.btn-ye:hover { background: var(--c-yellow2) !important; box-shadow: 0 12px 35px rgba(255,227,0,0.4) !important; transform: translateY(-2px) !important; }
.btn-o-wh { border: 2px solid rgba(255,255,255,0.6) !important; color: #fff !important; }
.btn-o-wh:hover { background: rgba(255,255,255,0.15) !important; }
.btn-o-aq { border: 2px solid var(--c-teal) !important; color: var(--c-teal2) !important; }
.btn-o-aq:hover { background: var(--c-teal) !important; color: #fff !important; }

/* ================================================================
   TICKER — dark with multicolor separators
   ================================================================ */
.ticker {
  background: var(--c-magenta2) !important;
  border-top: none !important;
  border-bottom: none !important;
}
.tk-item { color: rgba(255,255,255,0.7) !important; font-weight: 500 !important; }
.tk-sep { color: var(--c-yellow) !important; }

/* ================================================================
   HERO — dark cinematic with CCD multicolor accents
   ================================================================ */
.hero-eye {
  background: linear-gradient(135deg, var(--c-yellow), var(--c-orange));
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 700 !important;
}
.hero-script { color: var(--c-yellow) !important; }
.hero-h { color: #fff !important; font-family: var(--f-serif) !important; }
.hero-sub { color: rgba(255,255,255,0.75) !important; }
.hero-glow-l { background: radial-gradient(circle, rgba(105,223,219,0.25), transparent) !important; }
.hero-glow-r { background: radial-gradient(circle, rgba(26,155,171,0.2), transparent) !important; }

/* ================================================================
   SECTION BACKGROUNDS — each section gets its own CCD accent tint
   ================================================================ */

/* Menu categories — teal tint */
.sec.s-aqua { background: linear-gradient(160deg, #F0FFFE 0%, #FAFAFA 100%) !important; }

/* About — white clean */
.sec.s-white { background: #FFFFFF !important; }

/* Products — yellow tint */
.sec.s-yellow, .sec[style*="ccd-latte"] {
  background: linear-gradient(160deg, #FFFCE0 0%, #FAFAFA 100%) !important;
}

/* Why / cream */
.sec.s-cream { background: linear-gradient(160deg, #FFF8F0 0%, #FAFAFA 100%) !important; }

/* Franchise */
.sec.s-aq-ye { background: linear-gradient(160deg, #F0FFFE 0%, #FFFCE0 100%) !important; }

/* Testimonials */
.sec.s-white:last-of-type { background: linear-gradient(160deg, #FFFCE0 0%, #FFFFFF 100%) !important; }

/* Stats strip — dark, teal/yellow accent */
.stats-sec {
  background: var(--c-dark) !important;
  position: relative;
  overflow: hidden;
}
.stats-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(105,223,219,0.08) 0%,
    rgba(255,227,0,0.05) 33%,
    rgba(26,155,171,0.06) 66%,
    rgba(26,155,171,0.08) 100%);
  pointer-events: none;
}
.stat-n {
  font-family: var(--f-serif) !important;
  font-size: clamp(2.5rem,4vw,3.8rem) !important;
  background: linear-gradient(135deg, var(--c-yellow), var(--c-orange));
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 700 !important;
}
.stat-l { color: rgba(255,255,255,0.55) !important; letter-spacing: 0.2em !important; font-size: 0.58rem !important; }
.stat-it { border-color: rgba(255,255,255,0.08) !important; }

/* ================================================================
   ABOUT SECTION
   ================================================================ */
.a-badge {
  background: linear-gradient(135deg, var(--c-orange), var(--c-magenta)) !important;
  border: 3px solid #fff !important;
  box-shadow: 0 8px 30px rgba(26,155,171,0.3) !important;
}
.num { color: var(--c-teal2) !important; font-family: var(--f-serif) !important; }
.a-fact:not(:last-child) { border-color: rgba(105,223,219,0.2) !important; }
.a-facts { border-color: rgba(105,223,219,0.15) !important; }

/* ================================================================
   MENU CATEGORIES (homepage) — coloured icon pills
   ================================================================ */
.mcat-link { border-radius: 0 !important; transition: background 0.3s, transform 0.3s !important; }
.mcat-link:nth-child(1):hover { background: var(--c-teal-pale) !important; }
.mcat-link:nth-child(2):hover { background: var(--c-magenta-pale) !important; }
.mcat-link:nth-child(3):hover { background: var(--c-orange-pale) !important; }
.mcat-link:nth-child(4):hover { background: var(--c-green-pale) !important; }
.mcat-link:hover span:last-child { color: var(--c-dark) !important; }
[style*="--brd-aq"] { border-color: rgba(105,223,219,0.2) !important; }

/* ================================================================
   PRODUCT SLIDER CARDS — CCD premium style
   ================================================================ */
.slider-out {
  border-radius: 24px !important;
  overflow: hidden !important;
}
.p-card {
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 1.5px solid rgba(28,28,46,0.07) !important;
  background: #fff !important;
  box-shadow: 0 4px 20px rgba(28,28,46,0.06) !important;
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1) !important;
}
.p-card:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 24px 60px rgba(28,28,46,0.15) !important;
  border-color: transparent !important;
}
.p-card:nth-child(1) .p-cat { background: var(--c-teal) !important; color: var(--c-dark) !important; }
.p-card:nth-child(2) .p-cat { background: var(--c-magenta) !important; color: #fff !important; }
.p-card:nth-child(3) .p-cat { background: var(--c-orange) !important; color: #fff !important; }
.p-card:nth-child(4) .p-cat { background: var(--c-yellow) !important; color: var(--c-dark) !important; }
.p-card:nth-child(5) .p-cat { background: var(--c-green) !important; color: var(--c-dark) !important; }
.p-card:nth-child(6) .p-cat { background: var(--c-magenta) !important; color: #fff !important; }
.p-cat { border-radius: 100px !important; font-size: 0.5rem !important; font-weight: 700 !important; letter-spacing: 0.14em !important; }
.p-name { font-family: var(--f-serif) !important; font-size: 1.05rem !important; color: var(--c-dark) !important; font-weight: 600 !important; }
.p-desc { color: var(--c-muted) !important; font-size: 0.82rem !important; }
.p-ov { background: linear-gradient(to top, rgba(28,28,46,0.7) 0%, transparent 60%) !important; }

/* Slider controls */
.s-btn {
  border-color: var(--c-teal) !important;
  color: var(--c-teal2) !important;
  border-radius: 50% !important;
}
.s-btn:hover { background: var(--c-teal) !important; color: #fff !important; }
.sdot.active { background: var(--c-orange) !important; border-color: var(--c-orange) !important; }
.sdot { border-color: rgba(28,28,46,0.2) !important; }

/* ================================================================
   WHY SECTION — each card gets a unique CCD colour
   ================================================================ */
.why-c {
  background: #fff !important;
  border: 1.5px solid rgba(28,28,46,0.07) !important;
  border-radius: 20px !important;
  padding: 2.5rem !important;
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1) !important;
}
.why-c:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 24px 60px rgba(28,28,46,0.1) !important;
}
/* Colour-code each card's number and icon */
.why-c:nth-child(1) .why-n { color: rgba(105,223,219,0.15) !important; }
.why-c:nth-child(1) .why-ico { background: var(--c-teal-pale) !important; border-color: var(--c-teal) !important; }
.why-c:nth-child(1):hover { border-color: var(--c-teal) !important; box-shadow: 0 24px 60px rgba(105,223,219,0.15) !important; }
.why-c:nth-child(1):hover .why-ico { background: var(--c-teal) !important; }

.why-c:nth-child(2) .why-n { color: rgba(255,227,0,0.2) !important; }
.why-c:nth-child(2) .why-ico { background: var(--c-yellow-pale) !important; border-color: var(--c-yellow2) !important; }
.why-c:nth-child(2):hover { border-color: var(--c-yellow2) !important; box-shadow: 0 24px 60px rgba(255,227,0,0.15) !important; }
.why-c:nth-child(2):hover .why-ico { background: var(--c-yellow) !important; }

.why-c:nth-child(3) .why-n { color: rgba(26,155,171,0.15) !important; }
.why-c:nth-child(3) .why-ico { background: var(--c-magenta-pale) !important; border-color: var(--c-magenta) !important; }
.why-c:nth-child(3):hover { border-color: var(--c-magenta) !important; box-shadow: 0 24px 60px rgba(26,155,171,0.15) !important; }
.why-c:nth-child(3):hover .why-ico { background: var(--c-magenta) !important; }

.why-c:nth-child(4) .why-n { color: rgba(26,155,171,0.15) !important; }
.why-c:nth-child(4) .why-ico { background: var(--c-orange-pale) !important; border-color: var(--c-orange) !important; }
.why-c:nth-child(4):hover { border-color: var(--c-orange) !important; box-shadow: 0 24px 60px rgba(26,155,171,0.15) !important; }
.why-c:nth-child(4):hover .why-ico { background: var(--c-orange) !important; }

.why-c:nth-child(5) .why-n { color: rgba(105,223,219,0.15) !important; }
.why-c:nth-child(5) .why-ico { background: var(--c-green-pale) !important; border-color: var(--c-green) !important; }
.why-c:nth-child(5):hover { border-color: var(--c-green) !important; box-shadow: 0 24px 60px rgba(105,223,219,0.15) !important; }
.why-c:nth-child(5):hover .why-ico { background: var(--c-green) !important; }

.why-c:nth-child(6) .why-n { color: rgba(105,223,219,0.15) !important; }
.why-c:nth-child(6) .why-ico { background: var(--c-teal-pale) !important; border-color: var(--c-teal) !important; }
.why-c:nth-child(6):hover { border-color: var(--c-teal) !important; box-shadow: 0 24px 60px rgba(105,223,219,0.15) !important; }
.why-c:nth-child(6):hover .why-ico { background: var(--c-teal) !important; }

.why-c h3 { font-family: var(--f-serif) !important; font-size: 1.1rem !important; margin-bottom: 0.6rem; }

/* ================================================================
   FRANCHISE CARDS — CCD colour-coded
   ================================================================ */
.f-card {
  border-radius: 24px !important;
  overflow: hidden !important;
  border: 1.5px solid rgba(28,28,46,0.08) !important;
  background: #fff !important;
}
.f-card:hover { box-shadow: 0 32px 70px rgba(28,28,46,0.12) !important; transform: translateY(-8px) !important; }
.f-card.feat {
  border-color: var(--c-orange) !important;
  box-shadow: 0 20px 60px rgba(26,155,171,0.15) !important;
}
.f-pop {
  background: linear-gradient(135deg, var(--c-orange), var(--c-magenta)) !important;
  border-radius: 0 !important;
}
.f-div { background: linear-gradient(90deg, var(--c-teal), var(--c-yellow)) !important; height: 3px !important; }
.f-price { color: var(--c-orange) !important; font-family: var(--f-serif) !important; }
.f-icon { background: var(--c-orange-pale) !important; border-radius: 16px !important; }
.f-name { font-family: var(--f-serif) !important; }
.f-card:nth-child(1) .f-icon { background: var(--c-teal-pale) !important; }
.f-card:nth-child(1) .f-price { color: var(--c-teal2) !important; }
.f-card:nth-child(3) .f-icon { background: var(--c-green-pale) !important; }
.f-card:nth-child(3) .f-price { color: var(--c-green2) !important; }
.f-list li::before { color: var(--c-green2) !important; }

/* ================================================================
   TESTIMONIALS — premium dark cards
   ================================================================ */
.t-card {
  background: #fff !important;
  border: 1.5px solid rgba(28,28,46,0.07) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 20px rgba(28,28,46,0.05) !important;
}
.t-card:hover {
  border-color: var(--c-magenta) !important;
  box-shadow: 0 16px 50px rgba(26,155,171,0.15) !important;
  transform: translateY(-4px) !important;
}
.t-stars { color: var(--c-yellow2) !important; font-size: 1.1rem !important; letter-spacing: 0.05em !important; }
.t-av {
  background: linear-gradient(135deg, var(--c-teal), var(--c-magenta)) !important;
  border-radius: 50% !important;
  font-family: var(--f-serif) !important;
  font-size: 1rem !important;
}
.t-name { font-family: var(--f-serif) !important; font-weight: 600 !important; color: var(--c-dark) !important; }
.t-btn { border-color: var(--c-teal) !important; color: var(--c-teal2) !important; }
.t-btn:hover { background: var(--c-teal) !important; color: var(--c-dark) !important; }
.t-prog-f { background: linear-gradient(90deg, var(--c-teal), var(--c-yellow)) !important; }

/* ================================================================
   CTA SECTION — dark with CCD multicolour glow
   ================================================================ */
.cta-sec {
  background: var(--c-dark) !important;
  position: relative;
  overflow: hidden;
}
.cta-ye-orb {
  background: radial-gradient(circle, rgba(255,227,0,0.35), transparent) !important;
  animation: orbPulse 5s ease-in-out infinite alternate !important;
}
.cta-wh-orb {
  background: radial-gradient(circle, rgba(26,155,171,0.25), transparent) !important;
  animation: orbPulse 7s ease-in-out infinite alternate-reverse !important;
}
@keyframes orbPulse {
  from { transform: scale(1); opacity: 0.7; }
  to { transform: scale(1.4); opacity: 1; }
}
.cta-h { font-family: var(--f-serif) !important; }
.cta-h .ye { color: var(--c-yellow) !important; font-style: italic !important; }
.cta-p { color: rgba(255,255,255,0.65) !important; }
.cta-trust span {
  border-color: rgba(105,223,219,0.25) !important;
  color: rgba(255,255,255,0.65) !important;
}
.cta-trust span::before { color: var(--c-green) !important; }

/* ================================================================
   FOOTER — deep dark with CCD colours
   ================================================================ */
footer { background: var(--c-dark2) !important; }
.f-strip { background: rgba(255,255,255,0.03) !important; border-bottom-color: rgba(255,255,255,0.06) !important; }
.f-logo-text span:first-child { color: var(--c-yellow) !important; }
.f-logo-wrap img { border-color: var(--c-yellow) !important; }
.f-info a { color: var(--c-teal) !important; }
.f-info a:hover { color: var(--c-yellow) !important; }
.f-grid h4 { color: var(--c-yellow) !important; border-color: rgba(255,227,0,0.15) !important; }
.f-grid ul a:hover { color: var(--c-teal) !important; }
.f-ci a { color: var(--c-teal) !important; }
.f-ci a:hover { color: var(--c-yellow) !important; }
.f-soc:hover { background: var(--c-teal) !important; border-color: var(--c-teal) !important; color: var(--c-dark) !important; }

/* ================================================================
   PAGE HERO (inner pages) — CCD multicolor gradient
   ================================================================ */
.page-hero {
  background: var(--c-dark) !important;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 60%, rgba(105,223,219,0.2) 0%, transparent 50%),
              radial-gradient(ellipse at 80% 40%, rgba(26,155,171,0.15) 0%, transparent 50%);
  pointer-events: none;
}
.ph-orb-bl { background: radial-gradient(circle, rgba(26,155,171,0.25), transparent) !important; }
.stripe { background: linear-gradient(90deg, var(--c-teal), var(--c-yellow)) !important; height: 4px !important; }
.hi { color: var(--c-yellow) !important; font-style: italic; }
.ph-eye { color: var(--c-teal) !important; letter-spacing: 0.28em !important; }

/* ================================================================
   GALLERY — CCD themed overlay
   ================================================================ */
.g-btn { border-color: var(--c-teal) !important; color: var(--c-teal2) !important; }
.g-btn:hover, .g-btn.on {
  background: var(--c-teal) !important;
  border-color: var(--c-teal) !important;
  color: var(--c-dark) !important;
  box-shadow: 0 6px 20px rgba(105,223,219,0.35) !important;
}
.g-ov { background: linear-gradient(to top, rgba(28,28,46,0.8) 0%, transparent 60%) !important; }
.g-tag { background: var(--c-yellow) !important; color: var(--c-dark) !important; }

/* ================================================================
   CONTACT — CCD themed
   ================================================================ */
.c-ico { background: var(--c-teal-pale) !important; border-color: var(--c-teal) !important; }
.c-info strong { color: var(--c-teal2) !important; }
.c-item:hover { border-color: var(--c-teal) !important; box-shadow: 0 8px 30px rgba(105,223,219,0.15) !important; transform: translateX(4px) !important; }
.fg input:focus, .fg select:focus, .fg textarea:focus {
  border-color: var(--c-teal) !important;
  box-shadow: 0 0 0 4px rgba(105,223,219,0.12) !important;
}

/* ================================================================
   FOOD SHOWCASE — CCD multicolor overrides
   ================================================================ */
.fs-eyebrow { color: var(--c-yellow) !important; }
.fs-eyebrow::before { background: linear-gradient(90deg, transparent, var(--c-yellow)) !important; }
.fs-eyebrow::after { background: linear-gradient(90deg, var(--c-yellow), transparent) !important; }
.fs-title { color: #fff !important; }
.fs-slide-label { color: var(--c-yellow) !important; background: rgba(255,227,0,0.15) !important; border-color: rgba(255,227,0,0.35) !important; }
.fs-slide-btn {
  background: linear-gradient(135deg, var(--c-orange), var(--c-magenta)) !important;
  box-shadow: 0 8px 24px rgba(26,155,171,0.4) !important;
}
.fs-slide-btn:hover {
  background: linear-gradient(135deg, var(--c-yellow), var(--c-orange)) !important;
  color: var(--c-dark) !important;
}
.fs-progress-fill { background: linear-gradient(90deg, var(--c-teal), var(--c-yellow)) !important; }
.fs-ring-fill { stroke: var(--c-yellow) !important; }
.fs-orb1 { background: radial-gradient(circle, rgba(105,223,219,0.35), transparent) !important; }
.fs-orb2 { background: radial-gradient(circle, rgba(255,227,0,0.25), transparent) !important; }
.fs-orb3 { background: radial-gradient(circle, rgba(26,155,171,0.2), transparent) !important; }
.fs-thumb.fs-thumb-active {
  border-color: var(--c-yellow) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 30px rgba(255,227,0,0.3) !important;
}
.fs-thumb:hover { border-color: rgba(105,223,219,0.5) !important; }
.fs-thumb-active .fs-thumb-num { background: var(--c-orange) !important; }
.fs-stat-n { background: linear-gradient(135deg, var(--c-yellow), var(--c-orange)) !important; -webkit-background-clip: text !important; background-clip: text !important; }
.fs-nav:hover { background: var(--c-teal) !important; border-color: var(--c-teal) !important; color: var(--c-dark) !important; box-shadow: 0 8px 24px rgba(105,223,219,0.4) !important; }
.fs-stat:hover { background: rgba(255,227,0,0.06) !important; }
.fs-stats { border-color: rgba(255,255,255,0.08) !important; background: rgba(255,255,255,0.04) !important; }
.fs-stat { border-color: rgba(255,255,255,0.07) !important; }

/* ================================================================
   MENU PAGE — CCD full overhaul
   ================================================================ */

/* Stats strip — CCD multicolor */
.m-strip { background: var(--c-dark) !important; }
.m-strip-n {
  font-family: var(--f-serif) !important;
  background: linear-gradient(135deg, var(--c-yellow), var(--c-orange));
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.m-strip-l { color: rgba(255,255,255,0.5) !important; }

/* Signature band */
.m-sig-band {
  background: linear-gradient(135deg, var(--c-dark) 0%, var(--c-dark3) 100%) !important;
  position: relative;
  overflow: hidden;
}
.m-sig-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(255,227,0,0.1) 0%, transparent 60%);
  pointer-events: none;
}
.m-sig-band h3 { font-family: var(--f-serif) !important; color: #fff !important; font-size: 1.6rem !important; }
.m-sig-band p { color: rgba(255,255,255,0.5) !important; }
.m-pill {
  background: rgba(255,255,255,0.06) !important;
  border: 1.5px solid rgba(255,255,255,0.12) !important;
  border-radius: 100px !important;
  transition: all 0.3s !important;
}
.m-pill:nth-child(1):hover { background: var(--c-teal-pale) !important; border-color: var(--c-teal) !important; }
.m-pill:nth-child(2):hover { background: var(--c-yellow-pale) !important; border-color: var(--c-yellow2) !important; }
.m-pill:nth-child(3):hover { background: var(--c-orange-pale) !important; border-color: var(--c-orange) !important; }
.m-pill:nth-child(4):hover { background: var(--c-magenta-pale) !important; border-color: var(--c-magenta) !important; }
.m-pill:nth-child(5):hover { background: var(--c-green-pale) !important; border-color: var(--c-green) !important; }
.m-pill-n { color: rgba(255,255,255,0.8) !important; font-family: var(--f-disp) !important; font-size: 0.7rem !important; }

/* Menu section bg */
.sec.s-aqua { background: #FAFBFF !important; }

/* Tabs — CCD multicolour pills */
.m-tabs {
  display: flex !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
  margin-bottom: 2.5rem !important;
  background: #fff !important;
  padding: 0.5rem !important;
  border-radius: 100px !important;
  border: 1.5px solid rgba(28,28,46,0.08) !important;
  box-shadow: 0 4px 20px rgba(28,28,46,0.06) !important;
  width: fit-content !important;
}
.m-tab {
  font-family: var(--f-disp) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 0.7rem 1.5rem !important;
  border-radius: 100px !important;
  border: none !important;
  background: transparent !important;
  color: var(--c-ink2) !important;
  cursor: pointer !important;
  transition: all 0.3s !important;
}
.m-tab:nth-child(1).active { background: var(--c-teal) !important; color: var(--c-dark) !important; box-shadow: 0 6px 20px rgba(105,223,219,0.4) !important; }
.m-tab:nth-child(2).active { background: var(--c-magenta) !important; color: #fff !important; box-shadow: 0 6px 20px rgba(26,155,171,0.4) !important; }
.m-tab:nth-child(3).active { background: var(--c-orange) !important; color: #fff !important; box-shadow: 0 6px 20px rgba(26,155,171,0.4) !important; }
.m-tab:nth-child(4).active { background: var(--c-green) !important; color: var(--c-dark) !important; box-shadow: 0 6px 20px rgba(105,223,219,0.4) !important; }
.m-tab:hover:not(.active) { background: rgba(28,28,46,0.05) !important; color: var(--c-dark) !important; }

/* Menu cards */
.m-grid { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 1.5rem !important; }
.m-card {
  background: #fff !important;
  border-radius: 20px !important;
  border: 1.5px solid rgba(28,28,46,0.07) !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(28,28,46,0.05) !important;
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1) !important;
}
.m-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 24px 60px rgba(28,28,46,0.12) !important;
}
.m-card.wide { grid-column: span 2 !important; }
.m-card-img { position: relative !important; overflow: hidden !important; aspect-ratio: 4/3 !important; }
.m-card.wide .m-card-img { aspect-ratio: 16/7 !important; }
.m-card-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 0.65s !important; }
.m-card:hover .m-card-img img { transform: scale(1.07) !important; }
.m-card-ov {
  position: absolute !important; inset: 0 !important;
  background: linear-gradient(to top, rgba(28,28,46,0.6) 0%, transparent 55%) !important;
  opacity: 0 !important; transition: opacity 0.4s !important;
}
.m-card:hover .m-card-ov { opacity: 1 !important; }

/* Colour-coded badges per category */
#mp-cold .m-cat-badge { background: var(--c-teal) !important; color: var(--c-dark) !important; }
#mp-cold .m-tag { background: var(--c-yellow) !important; color: var(--c-dark) !important; }
#mp-shakes .m-cat-badge { background: var(--c-magenta) !important; color: #fff !important; }
#mp-shakes .m-tag { background: var(--c-magenta) !important; color: #fff !important; }
#mp-food .m-cat-badge { background: var(--c-orange) !important; color: #fff !important; }
#mp-food .m-tag { background: var(--c-orange) !important; color: #fff !important; }
#mp-desserts .m-cat-badge { background: var(--c-green) !important; color: var(--c-dark) !important; }
#mp-desserts .m-tag { background: var(--c-green) !important; color: var(--c-dark) !important; }

.m-cat-badge, .m-tag { border-radius: 100px !important; font-size: 0.5rem !important; font-weight: 700 !important; letter-spacing: 0.14em !important; z-index: 2 !important; }
.m-name { font-family: var(--f-serif) !important; font-size: 1rem !important; color: var(--c-dark) !important; font-weight: 600 !important; margin-bottom: 0.4rem !important; }
.m-desc { color: var(--c-muted) !important; font-size: 0.83rem !important; line-height: 1.65 !important; margin-bottom: 1rem !important; }
.m-price { font-family: var(--f-serif) !important; font-size: 1.25rem !important; font-weight: 700 !important; color: var(--c-orange) !important; }
#mp-cold .m-price { color: var(--c-teal2) !important; }
#mp-shakes .m-price { color: var(--c-magenta2) !important; }
#mp-food .m-price { color: var(--c-orange2) !important; }
#mp-desserts .m-price { color: var(--c-green2) !important; }

/* Order buttons — colour-coded per tab */
.m-obtn {
  font-family: var(--f-disp) !important;
  font-size: 0.56rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 0.55rem 1.2rem !important;
  border-radius: 100px !important;
  cursor: pointer !important;
  border: none !important;
  transition: all 0.3s !important;
}
#mp-cold .m-obtn { background: var(--c-teal) !important; color: var(--c-dark) !important; box-shadow: 0 4px 14px rgba(105,223,219,0.35) !important; }
#mp-cold .m-obtn:hover { background: var(--c-teal2) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(105,223,219,0.5) !important; }
#mp-shakes .m-obtn { background: var(--c-magenta) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(26,155,171,0.35) !important; }
#mp-shakes .m-obtn:hover { background: var(--c-magenta2) !important; transform: translateY(-2px) !important; }
#mp-food .m-obtn { background: var(--c-orange) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(26,155,171,0.35) !important; }
#mp-food .m-obtn:hover { background: var(--c-orange2) !important; transform: translateY(-2px) !important; }
#mp-desserts .m-obtn { background: var(--c-green) !important; color: var(--c-dark) !important; box-shadow: 0 4px 14px rgba(105,223,219,0.35) !important; }
#mp-desserts .m-obtn:hover { background: var(--c-green2) !important; transform: translateY(-2px) !important; }

/* Category hero banners */
.menu-cat-hero {
  display: flex !important;
  align-items: center !important;
  gap: 1.5rem !important;
  padding: 1.75rem 2.5rem !important;
  border-radius: 20px !important;
  margin-bottom: 2rem !important;
  position: relative !important;
  overflow: hidden !important;
}
#mp-cold .menu-cat-hero { background: linear-gradient(135deg, var(--c-dark) 0%, #0A2A2A 100%) !important; }
#mp-cold .menu-cat-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 50%, rgba(105,223,219,0.2) 0%, transparent 60%); }
#mp-shakes .menu-cat-hero { background: linear-gradient(135deg, var(--c-dark) 0%, #2A0A2A 100%) !important; }
#mp-shakes .menu-cat-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 50%, rgba(26,155,171,0.2) 0%, transparent 60%); }
#mp-food .menu-cat-hero { background: linear-gradient(135deg, var(--c-dark) 0%, #2A1000 100%) !important; }
#mp-food .menu-cat-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 50%, rgba(26,155,171,0.2) 0%, transparent 60%); }
#mp-desserts .menu-cat-hero { background: linear-gradient(135deg, var(--c-dark) 0%, #002A15 100%) !important; }
#mp-desserts .menu-cat-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 50%, rgba(105,223,219,0.2) 0%, transparent 60%); }

#mp-cold .menu-cat-hero-eyebrow { color: var(--c-teal) !important; }
#mp-cold .menu-cat-hero-count span:first-child { color: var(--c-teal) !important; }
#mp-shakes .menu-cat-hero-eyebrow { color: var(--c-magenta) !important; }
#mp-shakes .menu-cat-hero-count span:first-child { color: var(--c-magenta) !important; }
#mp-food .menu-cat-hero-eyebrow { color: var(--c-orange) !important; }
#mp-food .menu-cat-hero-count span:first-child { color: var(--c-orange) !important; }
#mp-desserts .menu-cat-hero-eyebrow { color: var(--c-green) !important; }
#mp-desserts .menu-cat-hero-count span:first-child { color: var(--c-green) !important; }

.menu-cat-hero-title { font-family: var(--f-serif) !important; font-size: clamp(1.5rem,2.5vw,2.2rem) !important; }

/* Menu footer note */
.m-note {
  color: var(--c-muted) !important;
  background: rgba(28,28,46,0.03) !important;
  border: 1.5px solid rgba(28,28,46,0.07) !important;
  border-radius: 12px !important;
  padding: 1rem 1.5rem !important;
  font-size: 0.8rem !important;
}

/* ================================================================
   ABOUT PAGE SPECIFIC
   ================================================================ */
.about-grid img { border-radius: 20px !important; }
.eyebrow-l::before { display: none !important; }

/* ================================================================
   RESPONSIVE MENU GRID
   ================================================================ */
@media(max-width:900px) {
  .m-grid { grid-template-columns: 1fr 1fr !important; }
  .m-card.wide { grid-column: span 2 !important; }
  .m-tabs { width: 100% !important; border-radius: 14px !important; }
}
@media(max-width:600px) {
  .m-grid { grid-template-columns: 1fr !important; }
  .m-card.wide { grid-column: span 1 !important; }
  .m-tabs { border-radius: 12px !important; }
  .m-tab { font-size: 0.62rem !important; padding: 0.6rem 1rem !important; }
}