/* =========================================================================
   MCBC — MEAL COMBO BOX COMPANY — DESIGN SYSTEM
   Comfort Meals. Properly Made.
   ========================================================================= */


:root {
  /* ---- MCBC brand ---------------------------------------------------
     Core teal comes from the Meal Combo Box Company mark (#0090AD).
     Warm oat + aqua support it so the palette reads "farm to fork"
     rather than "clinical health food". ------------------------------ */
  --mcbc-cream: #EFE7D6;
  --mcbc-cream-warm: #E4D7BC;
  --mcbc-pink: #B3DDE6;
  --mcbc-pink-soft: #E6F6F9;
  --mcbc-charcoal: #131A1C;
  --mcbc-charcoal-soft: #1C2528;
  --mcbc-charcoal-light: #273234;
  --mcbc-white: #FFFFFF;
  --mcbc-off-white: #FAF8F4;
  --mcbc-lemon-bright: #E9C043;
  --mcbc-sky: #D4EEF9;
  --mcbc-coral: #0090AD;
  --mcbc-coral-deep: #006B82;
  --mcbc-coral-glow: rgba(0, 144, 173, 0.42);
  --mcbc-neon-pink: #2FD4E8;
  --mcbc-neon-glow: rgba(47, 212, 232, 0.6);
  --mcbc-leaf: #4FA36B;
  /* The three faces from the MCBC brand page on gliscokitchens.com:
     Playfair Display for display copy, Syne for tracked labels and eyebrows,
     DM Sans for everything you actually read. */
  --display: 'Playfair Display', 'Times New Roman', serif;
  --sans: 'DM Sans', system-ui, sans-serif;
  --mono: 'Syne', 'DM Sans', system-ui, sans-serif;
  --max-width: 1440px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section-y: clamp(5rem, 12vw, 9rem);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--sans); font-weight: 400; color: var(--mcbc-charcoal); background: var(--mcbc-off-white); line-height: 1.5; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }
::selection { background: var(--mcbc-neon-pink); color: var(--mcbc-white); }

.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 200;
  opacity: 0.035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== NAVBAR + LIVE TICKER ===== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 1rem var(--gutter);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: transparent;
  transition: background 0.4s, backdrop-filter 0.4s, padding 0.3s;
}
.nav.scrolled {
  background: rgba(19, 26, 28, 0.85);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0.7rem var(--gutter);
}
/* The wordmark follows the logo: a geometric sans, heavy, uppercase. The mark
   sets MEAL / COMBO / BOX / CO. with the M, C, B and C in the heavy weight and
   the rest of each word light — those four letters ARE the logotype, so this is
   them lifted out. DM Sans is the closest of our three faces to the logo's
   geometry; there is no serif anywhere in the brand. */
.nav__logo {
  font-family: var(--sans); font-weight: 800; font-size: 1.35rem;
  letter-spacing: -0.02em; color: var(--mcbc-white); font-style: normal;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 0.6rem; white-space: nowrap;
}
/* The expansion stays light and tracked out — the weight contrast is the mark. */
.nav__logo span {
  font-family: var(--sans); font-weight: 400; font-style: normal;
  text-transform: uppercase; letter-spacing: 0.2em;
  font-size: 0.7rem; opacity: 0.55;
}
.nav__ticker {
  flex: 1; display: flex; justify-content: center; align-items: center;
  gap: 0.6rem; max-width: 480px;
  padding: 0.5rem 1.1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 100px;
  font-family: var(--mono); font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.02em;
  overflow: hidden;
}
.nav__ticker-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--mcbc-neon-pink);
  box-shadow: 0 0 10px var(--mcbc-neon-glow);
  flex-shrink: 0;
  animation: pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}
.nav__ticker-text { white-space: nowrap; overflow: hidden; transition: opacity 0.4s; }
.nav__links { display: flex; gap: 2rem; align-items: center; }
.nav__link {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--mcbc-white); font-weight: 500; opacity: 0.8;
  transition: opacity 0.2s, color 0.2s;
}
.nav__link:hover { opacity: 1; color: var(--mcbc-pink); }
.nav__cta-cluster {
  display: flex; align-items: center; gap: 0.5rem;
}
.nav__phone {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  color: var(--mcbc-white);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.nav__phone:hover {
  background: var(--mcbc-coral);
  border-color: var(--mcbc-coral);
  transform: translateY(-1px);
}
.nav__phone svg { width: 16px; height: 16px; }
.nav__cta {
  padding: 0.65rem 1.25rem;
  background: var(--mcbc-coral); color: var(--mcbc-white);
  border-radius: 100px;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.15em;
  font-weight: 600;
  transition: transform 0.2s, box-shadow 0.3s;
}
.nav__cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px var(--mcbc-coral-glow); }

@media (max-width: 1100px) { .nav__ticker { display: none; } }
@media (max-width: 768px) { .nav__links { display: none; } .nav__logo { font-size: 1.1rem; } }

/* ===== HERO ===== */
.hero {
  position: relative; min-height: 100vh;
  background: var(--mcbc-charcoal); color: var(--mcbc-white);
  padding: 7rem var(--gutter) 4.5rem;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
}
/* Hero background works as either <img class="hero__bg"> or <div class="hero__bg">.
   When <img>: the tag covers the area, and if it 404s, onerror hides it revealing the parent gradient below.
   The .hero has its own fallback gradient via .hero__bg-fallback. */
.hero__bg {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: brightness(0.55) contrast(1.05);
}
.hero__bg-fallback {
  position: absolute; inset: 0; z-index: 0;
  background-color: #101A1C;
  background-image:
    radial-gradient(ellipse at 70% 30%, rgba(47, 212, 232, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 70%, rgba(179, 221, 230, 0.08) 0%, transparent 50%),
    linear-gradient(135deg, #101A1C 0%, #16262A 50%, #101A1C 100%);
}
.hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(19, 26, 28,0.4) 0%, rgba(19, 26, 28,0.55) 50%, rgba(19, 26, 28,0.95) 100%);
}
.hero__bg-placeholder {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse at 75% 30%, rgba(47, 212, 232, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 70%, rgba(179, 221, 230, 0.08) 0%, transparent 50%),
    linear-gradient(135deg, #101A1C 0%, #16262A 50%, #101A1C 100%);
}
.hero__bg-placeholder::before {
  content: '◣ images/kitchen-neon.jpg ◢';
  position: absolute; top: 1.2rem; left: 1.2rem;
  font-family: var(--mono); font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: 0.1em;
}
.hero__inner { position: relative; z-index: 3; max-width: var(--max-width); margin: 0 auto; width: 100%; }
.hero__eyebrow {
  font-family: var(--mono);
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--mcbc-pink); margin-bottom: 1.75rem;
  opacity: 0; animation: rise 0.9s var(--ease-out-expo) 0.2s forwards;
  display: flex; align-items: center; gap: 0.75rem;
}
.hero__eyebrow::before { content: ''; width: 30px; height: 1px; background: var(--mcbc-pink); }

.hero__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.75rem, 8vw, 6.75rem);
  line-height: 0.98; letter-spacing: -0.025em;
  max-width: 1200px; margin-bottom: 1.5rem;
}
.hero__title-line { display: block; opacity: 0; animation: rise 1s var(--ease-out-expo) 0.35s forwards; }
.hero__title-line--2 { animation-delay: 0.55s; }
.hero__title-line--3 { animation-delay: 0.75s; }
.cuisine-reel {
  display: inline-block; position: relative;
  min-width: 7ch; vertical-align: baseline;
  text-align: left;
}
.cuisine-reel__word {
  display: inline-block;
  font-style: italic; color: var(--mcbc-pink); font-weight: 400;
  position: relative;
}
.cuisine-reel__word::after {
  content: ''; position: absolute;
  bottom: 0.05em; left: 0;
  width: 100%; height: 3px;
  background: var(--mcbc-neon-pink);
  box-shadow: 0 0 10px var(--mcbc-neon-glow);
}
@keyframes word-swap {
  0% { opacity: 0; transform: translateY(20px); }
  10%, 90% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-20px); }
}
.hero__sub {
  font-size: clamp(1.05rem, 1.4vw, 1.3rem); font-weight: 300;
  max-width: 660px; line-height: 1.55;
  margin-bottom: 3.5rem; color: rgba(255, 255, 255, 0.85);
  opacity: 0; animation: rise 1s var(--ease-out-expo) 0.95s forwards;
}
.hero__ctas {
  display: flex; gap: 1rem; flex-wrap: wrap;
  opacity: 0; animation: rise 1s var(--ease-out-expo) 1.1s forwards;
}
@keyframes rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.scroll-hint {
  position: absolute; bottom: 1.75rem; left: 50%; transform: translateX(-50%);
  z-index: 4;
  font-family: var(--mono); font-size: 0.65rem;
  text-transform: uppercase; letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.5);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  animation: scroll-hint 2.5s ease-in-out infinite;
}
@keyframes scroll-hint {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.5; }
  50% { transform: translate(-50%, 6px); opacity: 1; }
}
.scroll-hint__line { width: 1px; height: 28px; background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent); }

/* ===== GATEWAY ===== */
.gateway-section { background: var(--mcbc-charcoal); padding: 0 0 var(--section-y); color: var(--mcbc-white); }
.gateway-section__inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); }
.gateway-section__heading {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 2rem; margin-bottom: 3rem;
  padding: 2rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.gateway-section__heading h2 {
  font-family: var(--display); font-weight: 400; font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.1;
  letter-spacing: -0.015em; max-width: 600px;
}
.gateway-section__heading p {
  font-family: var(--mono); font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--mcbc-pink); opacity: 0.85;
}
.gateway { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 900px) { .gateway { grid-template-columns: 1fr; gap: 1rem; } }
.gateway__card {
  position: relative; aspect-ratio: 4/5;
  border-radius: 6px; overflow: hidden; cursor: pointer;
  background: var(--mcbc-charcoal-soft);
  transition: transform 0.6s var(--ease-out-expo);
}
.gateway__card:hover { transform: translateY(-6px); }
/* Gateway card image — works as <img> tag, fills the card with object-fit */
.gateway__card-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0;
  transition: transform 1.2s var(--ease-out-expo), filter 0.6s;
  filter: brightness(0.75) saturate(1.1);
}
.gateway__card:hover .gateway__card-img { transform: scale(1.08); filter: brightness(0.9) saturate(1.2); }
/* Card base color shows through if image fails to load */
.gateway__card { background-color: #2A1F1F; }
.gateway__card[aria-label*="Carte"] { background: linear-gradient(135deg, #3A1F1F 0%, #2A1A1F 100%); }
.gateway__card[aria-label*="Meal"] { background: linear-gradient(135deg, #2F2818 0%, #1F1A24 100%); }
.gateway__card[aria-label*="Catering"] { background: linear-gradient(135deg, #2F1A2A 0%, #1F1A24 100%); }
.gateway__card-img-placeholder {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #2A1F1F 0%, #1F1A2A 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.3);
  text-align: center; padding: 1rem;
}
.gateway__card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
}
.gateway__card-content {
  position: absolute; inset: 0;
  padding: 1.5rem;
  display: flex; flex-direction: column; justify-content: space-between;
  color: var(--mcbc-white);
}

/* BOLD CATEGORY BADGE — top of each gateway card */
.gateway__card-badge {
  display: inline-flex;
  align-items: stretch;
  align-self: flex-start;
  background: rgba(19, 26, 28, 0.7);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transition: border-color 0.3s, transform 0.3s;
}
.gateway__card:hover .gateway__card-badge {
  border-color: var(--mcbc-pink);
  transform: translateY(-2px);
}
.gateway__card-badge-num {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.85rem;
  background: var(--mcbc-coral);
  color: var(--mcbc-white);
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
/* Per-card badge colors — coral / neon-pink / lemon — matches brand palette */
.gateway__card:nth-child(1) .gateway__card-badge-num { background: var(--mcbc-coral); }
.gateway__card:nth-child(2) .gateway__card-badge-num { background: var(--mcbc-neon-pink); }
.gateway__card:nth-child(3) .gateway__card-badge-num { background: var(--mcbc-lemon-bright); color: var(--mcbc-charcoal); }
.gateway__card-badge-name {
  display: flex;
  align-items: center;
  padding: 0.55rem 0.95rem 0.55rem 0.85rem;
  color: var(--mcbc-white);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.gateway__card-body { display: flex; flex-direction: column; gap: 0.85rem; }
.gateway__card-tag {
  font-family: var(--mono); font-size: 0.65rem;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--mcbc-pink);
}
.gateway__card-title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.75rem, 2.5vw, 2.4rem);
  line-height: 1.05; letter-spacing: -0.02em;
}
.gateway__card-desc {
  font-size: 0.92rem; line-height: 1.5;
  color: rgba(255, 255, 255, 0.8); max-width: 30ch;
}
.gateway__card-cta {
  margin-top: 0.5rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--mcbc-white); font-weight: 500;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  transition: gap 0.3s, color 0.3s;
}
.gateway__card:hover .gateway__card-cta { gap: 0.85rem; color: var(--mcbc-pink); }
.gateway__card-cta svg { width: 14px; height: 14px; transition: transform 0.3s; }
.gateway__card:hover .gateway__card-cta svg { transform: translateX(4px); }

/* ===== THIS WEEK ===== */
.this-week { background: var(--mcbc-cream); padding: 3.5rem var(--gutter); overflow: hidden; }
.this-week__inner { max-width: var(--max-width); margin: 0 auto; }
.this-week__heading {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem;
}
.this-week__live {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--mcbc-coral);
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--mcbc-coral);
  border-radius: 100px;
  margin-right: 0.85rem;
  vertical-align: middle;
}
.this-week__live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--mcbc-coral);
  animation: pulse-dot 1.8s ease-in-out infinite;
}
.this-week__heading h2 {
  font-family: var(--display); font-weight: 400; font-style: italic;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem); letter-spacing: -0.015em;
}
.this-week__heading p {
  font-family: var(--mono); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.18em; opacity: 0.55;
}
.this-week__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem;
}
.this-week__card {
  aspect-ratio: 1/1; border-radius: 4px; overflow: hidden;
  position: relative; background: var(--mcbc-charcoal-soft);
}
.this-week__card-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  background-color: #2A2025;
  object-fit: cover; object-position: center;
  background-size: cover; background-position: center;
  transition: transform 0.8s var(--ease-out-expo);
}
.this-week__card:hover .this-week__card-img { transform: scale(1.05); }
.this-week__card-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.35);
  text-align: center; padding: 0.5rem;
  background: linear-gradient(135deg, #2A2025 0%, #1F1A24 100%);
}
.this-week__card-meta {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1rem; color: var(--mcbc-white);
  background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
}
.this-week__card-day {
  font-family: var(--mono); font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--mcbc-pink); margin-bottom: 0.25rem;
}
.this-week__card-dish {
  font-family: var(--display); font-weight: 500;
  font-size: 1rem; line-height: 1.2; letter-spacing: -0.01em;
}
.this-week__card-flag {
  position: absolute; top: 0.85rem; right: 0.85rem;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; backdrop-filter: blur(8px);
}

/* ===== KITCHEN BAND ===== */
.kitchen-band {
  position: relative; height: 85vh; min-height: 520px;
  overflow: hidden; background: var(--mcbc-charcoal);
}
.kitchen-band__bg {
  position: absolute; inset: 0;
  background-color: #101A1C;
  background-image: url('../images/kitchen-neon.jpg');
  background-size: cover; background-position: center;
}
.kitchen-band__bg-placeholder {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 70% 25%, rgba(47, 212, 232, 0.2) 0%, transparent 45%),
    linear-gradient(135deg, #101A1C, #1B2F33, #101A1C);
  display: flex; align-items: flex-start; justify-content: flex-start;
}
.kitchen-band__bg-placeholder::before {
  content: '◣ images/kitchen-wide.jpg — the full kitchen panorama with neon sign ◢';
  font-family: var(--mono); font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.25);
  padding: 1.5rem; letter-spacing: 0.05em;
}
.kitchen-band__overlay {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(19, 26, 28,0.3) 0%, rgba(19, 26, 28,0.75) 70%, rgba(19, 26, 28,0.9) 100%);
}
.kitchen-band__content {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 0 var(--gutter);
  color: var(--mcbc-white);
}
.kitchen-band__neon {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  color: var(--mcbc-neon-pink);
  text-shadow: 0 0 8px var(--mcbc-neon-pink), 0 0 24px var(--mcbc-neon-glow), 0 0 56px var(--mcbc-neon-glow);
  letter-spacing: 0.01em; line-height: 1; margin-bottom: 1.5rem;
  animation: neon-flicker 5s ease-in-out infinite;
}
@keyframes neon-flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow: 0 0 8px var(--mcbc-neon-pink), 0 0 24px var(--mcbc-neon-glow), 0 0 56px var(--mcbc-neon-glow);
    opacity: 1;
  }
  20%, 24%, 55% { text-shadow: none; opacity: 0.65; }
}
.kitchen-band__sub {
  font-family: var(--mono); font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.3em;
  opacity: 0.75; max-width: 580px; line-height: 1.6;
}

/* ===== MARQUEE ===== */
.marquee-section { background: var(--mcbc-charcoal); color: var(--mcbc-white); padding: var(--section-y) 0; overflow: hidden; }
.marquee-section__heading { text-align: center; margin-bottom: 3rem; padding: 0 var(--gutter); }
.marquee-section__eyebrow {
  font-family: var(--mono); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.25em;
  color: var(--mcbc-pink); margin-bottom: 1rem;
}
.marquee-section__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  letter-spacing: -0.02em; line-height: 1.05;
  max-width: 900px; margin: 0 auto;
}
.marquee-section__title em { font-style: italic; color: var(--mcbc-pink); }
.marquee {
  display: flex; gap: 3rem; white-space: nowrap;
  animation: marquee 45s linear infinite;
  padding: 2rem 0;
  width: max-content;
}
.marquee:hover { animation-play-state: paused; }
.marquee__item {
  display: inline-flex; align-items: center; gap: 1rem;
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(1.75rem, 4vw, 3rem);
  letter-spacing: -0.015em; color: var(--mcbc-white);
}
.marquee__item::after {
  content: '✦'; font-size: 1rem; color: var(--mcbc-pink);
  font-style: normal; margin-left: 3rem;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ===== STORY ===== */
.story { background: var(--mcbc-cream); padding: var(--section-y) var(--gutter); }
.story__inner {
  max-width: var(--max-width); margin: 0 auto;
  display: grid; grid-template-columns: 5fr 6fr; gap: 4rem; align-items: center;
}
@media (max-width: 900px) { .story__inner { grid-template-columns: 1fr; gap: 3rem; } }
.story__image-wrap {
  position: relative; aspect-ratio: 4/5;
  border-radius: 4px; overflow: hidden;
  background: var(--mcbc-charcoal-soft);
}
.story__image-wrap::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 60%, rgba(179, 221, 230, 0.15));
}
.story__image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
}
.story__image-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(0,0,0,0.3);
  font-family: var(--mono); font-size: 0.7rem;
  text-align: center; padding: 1rem;
  background: linear-gradient(135deg, #E5D5B5, #DBC5A0);
}
.story__caption {
  position: absolute; bottom: 1.25rem; left: 1.25rem;
  z-index: 2;
  padding: 0.5rem 0.85rem;
  background: rgba(19, 26, 28, 0.85);
  color: var(--mcbc-white);
  border-radius: 100px;
  font-family: var(--mono); font-size: 0.65rem;
  text-transform: uppercase; letter-spacing: 0.18em;
  backdrop-filter: blur(6px);
}
.story__eyebrow {
  font-family: var(--mono); font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--mcbc-coral); margin-bottom: 1.25rem;
  display: flex; align-items: center; gap: 0.75rem;
}
.story__eyebrow::before { content: ''; width: 30px; height: 1px; background: var(--mcbc-coral); }
.story__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.04; letter-spacing: -0.025em;
  margin-bottom: 2rem;
}
.story__title em { font-style: italic; color: var(--mcbc-coral); }
.story__p {
  font-size: 1.05rem; line-height: 1.65;
  margin-bottom: 1.1rem; opacity: 0.85;
}
.story__quote {
  font-family: var(--display); font-style: italic;
  font-size: 1.45rem; line-height: 1.4;
  color: var(--mcbc-charcoal);
  padding: 1.5rem 0 1.5rem 1.5rem;
  border-left: 2px solid var(--mcbc-coral);
  margin: 2rem 0 1.5rem;
  max-width: 580px;
}
.story__sig {
  font-family: var(--mono); font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--mcbc-coral); margin-top: 1.5rem;
}

/* ===== PILLARS ===== */
.pillars-section {
  background: var(--mcbc-charcoal); color: var(--mcbc-white);
  padding: var(--section-y) var(--gutter);
}
.pillars-section__inner { max-width: var(--max-width); margin: 0 auto; }
.pillars-section__heading { max-width: 850px; margin-bottom: 4rem; }
.pillars-section__eyebrow {
  font-family: var(--mono); font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--mcbc-pink); margin-bottom: 1.5rem;
  display: flex; align-items: center; gap: 0.75rem;
}
.pillars-section__eyebrow::before { content: ''; width: 30px; height: 1px; background: var(--mcbc-pink); }
.pillars-section__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.04; letter-spacing: -0.025em;
}
.pillars-section__title em { font-style: italic; color: var(--mcbc-pink); }
.pillars {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
}
@media (max-width: 1000px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pillars { grid-template-columns: 1fr; } }
.pillar {
  padding: 2.25rem 1.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  transition: background 0.4s, border-color 0.4s;
}
.pillar:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(179, 221, 230, 0.3);
}
.pillar__num {
  font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.2em; color: var(--mcbc-pink);
  margin-bottom: 2rem; display: block;
}
.pillar__title {
  font-family: var(--display); font-weight: 400;
  font-size: 1.5rem; line-height: 1.15;
  letter-spacing: -0.015em; margin-bottom: 1rem;
}
.pillar__title em { font-style: italic; color: var(--mcbc-pink); }
.pillar__desc {
  font-size: 0.95rem; line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
}

/* ===== PROOF ===== */
.proof {
  background: var(--mcbc-charcoal-soft); color: var(--mcbc-white);
  padding: 4rem var(--gutter);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.proof__inner { max-width: var(--max-width); margin: 0 auto; }
.proof__stats {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem;
  margin-bottom: 2.5rem; padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
@media (max-width: 800px) { .proof__stats { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; } }
.proof__stat { display: flex; flex-direction: column; gap: 0.5rem; }
.proof__num {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(2.25rem, 4vw, 3rem);
  color: var(--mcbc-pink); line-height: 1; letter-spacing: -0.02em;
}
.proof__label {
  font-family: var(--mono); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.2em; opacity: 0.6;
}
.proof__trusted {
  text-align: center;
  font-family: var(--mono); font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.18em; opacity: 0.85;
}
.proof__trusted-label {
  display: block; color: var(--mcbc-pink);
  margin-bottom: 0.75rem; font-size: 0.7rem; letter-spacing: 0.25em;
}
.proof__trusted strong {
  color: var(--mcbc-cream); font-weight: 600; margin: 0 0.4rem;
}

/* ===== CTA ===== */
.cta {
  position: relative; background: var(--mcbc-charcoal);
  color: var(--mcbc-white);
  padding: var(--section-y) var(--gutter); text-align: center; overflow: hidden;
}
.cta__orb {
  position: absolute; width: 600px; height: 600px;
  border-radius: 50%; background: var(--mcbc-neon-pink);
  filter: blur(140px); opacity: 0.25;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  pointer-events: none;
}
.cta__inner { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; }
.cta__eyebrow {
  font-family: var(--mono); font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.25em;
  color: var(--mcbc-pink); margin-bottom: 1.5rem;
}
.cta__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1; letter-spacing: -0.025em; margin-bottom: 1.75rem;
}
.cta__title em { font-style: italic; color: var(--mcbc-pink); }
.cta__sub {
  font-size: 1.1rem; opacity: 0.8;
  margin-bottom: 3rem; line-height: 1.55;
  max-width: 580px; margin-left: auto; margin-right: auto;
}
.cta__buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 1.05rem 1.85rem; border-radius: 100px;
  font-family: var(--sans); font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600;
  transition: transform 0.2s, box-shadow 0.3s, background 0.3s;
}
.btn--primary { background: var(--mcbc-coral); color: var(--mcbc-white); }
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px var(--mcbc-coral-glow);
  background: var(--mcbc-coral-deep);
}
.btn--ghost {
  background: transparent; color: var(--mcbc-white);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
}
.btn svg { width: 14px; height: 14px; }

/* ===== FOOTER ===== */
.footer {
  background: var(--mcbc-charcoal);
  color: rgba(255, 255, 255, 0.7);
  padding: 4rem var(--gutter) 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.footer__inner {
  max-width: var(--max-width); margin: 0 auto;
  display: grid; grid-template-columns: 2fr repeat(4, 1fr);
  gap: 2.5rem; margin-bottom: 0;
}
@media (max-width: 800px) { .footer__inner { grid-template-columns: 1fr 1fr; } }
/* Same wordmark, same reasoning as .nav__logo above. */
.footer__brand {
  font-family: var(--sans); font-weight: 800; font-style: normal;
  font-size: 1.55rem; line-height: 1; letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--mcbc-white); margin: 0 0 0.15rem;
}
.footer__brand-expand {
  font-family: var(--sans); font-weight: 300;
  font-size: 0.7rem; line-height: 1.2;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.45); margin: 0;
}
.footer__tagline {
  font-size: 0.95rem; line-height: 1.55;
  opacity: 0.7; margin-bottom: 1.5rem; max-width: 340px;
}
.footer__address { opacity: 0.65; font-size: 0.85rem; line-height: 1.7; }
.footer__col .footer__heading {
  font-family: var(--mono); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--mcbc-pink); font-weight: 500;
  margin-bottom: 1.25rem;
}
.footer__col ul { display: flex; flex-direction: column; gap: 0.75rem; }
.footer__col a {
  font-size: 0.92rem; opacity: 0.75;
  transition: opacity 0.2s, color 0.2s;
}
.footer__col a:hover { opacity: 1; color: var(--mcbc-pink); }
.footer__link--soon {
  color: var(--mcbc-cream);
  opacity: 0.35;
  cursor: not-allowed;
  font-size: inherit;
}
.footer__link--soon em {
  font-style: italic;
  font-size: 0.85em;
  opacity: 0.85;
  margin-inline-start: 0.2rem;
}
/* Credibility badges strip */
.footer__badges {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.footer__badge {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.footer__badge svg {
  width: 28px;
  height: 28px;
  color: var(--mcbc-pink);
  opacity: 0.85;
  flex-shrink: 0;
}
.footer__badge-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.footer__badge-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  opacity: 0.55;
}
.footer__badge-title {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--mcbc-white);
  opacity: 0.9;
}
@media (max-width: 600px) {
  .footer__badges {
    gap: 1.5rem;
    padding: 1.75rem 0;
    flex-direction: column;
    align-items: center;
  }
  .footer__badge {
    width: 100%;
    max-width: 260px;
  }
}

.footer__bottom {
  max-width: var(--max-width); margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-family: var(--mono); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.15em; opacity: 0.45;
}

/* ===== REVEAL ===== */
.reveal {
  opacity: 0; transform: translateY(40px);
  transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-stagger > * {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}
.reveal-stagger.in-view > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: 0.24s; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: 0.32s; }
.reveal-stagger.in-view > *:nth-child(6) { transition-delay: 0.4s; }
.reveal-stagger.in-view > * { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .marquee, .neon-flicker { animation: none; }
}
:focus-visible { outline: 2px solid var(--mcbc-coral); outline-offset: 3px; border-radius: 2px; }

/* =========================================================================
   MOBILE OPTIMIZATIONS — 90% of users
   Designed for: iPhone SE up to iPad Mini
   ========================================================================= */

/* Default tap target safety — Apple iOS guideline */
@media (max-width: 1024px) {
  button, a {
    min-height: 44px;
  }
}

@media (max-width: 768px) {

  /* NAV — tighten and let phone icon be visible */
  .nav {
    padding: 0.85rem 1rem;
    gap: 0.6rem;
  }
  .nav__logo {
    font-size: 1.05rem;
  }
  .nav__logo span {
    display: none; /* "· Gurugram" hidden on small */
  }
  .nav__cta-cluster {
    gap: 0.4rem;
  }
  .nav__phone {
    width: 38px; height: 38px;
  }
  .nav__cta {
    padding: 0.55rem 1rem;
    font-size: 0.68rem;
  }

  /* HERO — make it breathe on small screens */
  .hero {
    padding: 6.5rem 1.25rem 5rem;
    min-height: 100svh; /* small viewport height — handles iOS bars correctly */
  }
  .hero__eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    margin-bottom: 1.25rem;
  }
  .hero__eyebrow::before { width: 20px; }
  .hero__title {
    font-size: clamp(2.5rem, 11vw, 4rem);
    line-height: 1;
  }
  .hero__sub {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
  }
  .hero__ctas {
    flex-direction: column;
    width: 100%;
    gap: 0.6rem;
  }
  .hero__ctas .btn {
    width: 100%;
    justify-content: center;
    padding: 1.05rem 1.25rem;
  }
  .scroll-hint {
    bottom: 1rem;
    font-size: 0.55rem;
  }

  /* CUISINE REEL — prevent layout shift */
  .cuisine-reel {
    min-width: 5ch;
  }

  /* GATEWAY HEADING */
  .gateway-section {
    padding-bottom: 5rem;
  }
  .gateway-section__heading {
    padding: 1.5rem 0;
    margin-bottom: 2rem;
  }
  .gateway-section__heading h2 {
    font-size: 1.3rem;
  }

  /* GATEWAY CARDS — keep the visual impact, but tighter */
  .gateway__card {
    aspect-ratio: 4/4.5;  /* slightly less tall on mobile */
  }
  .gateway__card-content {
    padding: 1.25rem 1rem;
  }
  .gateway__card-badge-num {
    padding: 0.5rem 0.7rem;
    font-size: 0.78rem;
  }
  .gateway__card-badge-name {
    padding: 0.5rem 0.85rem 0.5rem 0.75rem;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
  }
  .gateway__card-title {
    font-size: 1.65rem;
  }
  .gateway__card-desc {
    font-size: 0.88rem;
  }

  /* THIS WEEK — show 2 per row on phones */
  .this-week__heading h2 {
    font-size: 1.25rem;
    line-height: 1.3;
  }
  .this-week__heading p {
    display: none; /* "Updated weekly" too noisy on mobile */
  }
  .this-week__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }
  .this-week__card-dish {
    font-size: 0.85rem;
  }
  .this-week__card-day {
    font-size: 0.55rem;
  }
  .this-week__card-flag {
    width: 24px; height: 24px;
    font-size: 0.85rem;
    top: 0.6rem; right: 0.6rem;
  }
  .this-week__card-meta {
    padding: 0.75rem;
  }
  .this-week__live {
    font-size: 0.6rem;
    padding: 0.25rem 0.65rem;
  }

  /* KITCHEN BAND — keep the neon moment, scale type */
  .kitchen-band {
    height: 70vh;
    min-height: 420px;
  }
  .kitchen-band__neon {
    font-size: clamp(2rem, 10vw, 3.5rem);
  }
  .kitchen-band__sub {
    font-size: 0.7rem;
    letter-spacing: 0.22em;
  }

  /* MARQUEE — slow down + smaller text */
  .marquee-section {
    padding: 4rem 0;
  }
  .marquee-section__title {
    font-size: 1.75rem;
  }
  .marquee {
    animation-duration: 28s;
    gap: 2rem;
    padding: 1.25rem 0;
  }
  .marquee__item {
    font-size: 1.5rem;
  }
  .marquee__item::after {
    font-size: 0.75rem;
    margin-left: 2rem;
  }

  /* STORY — photo first, then text */
  .story {
    padding: 4rem 1.25rem;
  }
  .story__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .story__image-wrap {
    aspect-ratio: 4/4.5;
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .story__title {
    font-size: 1.85rem;
  }
  .story__p { font-size: 1rem; }
  .story__quote {
    font-size: 1.1rem;
    padding: 1rem 0 1rem 1rem;
  }

  /* PILLARS — single column with more breath */
  .pillars-section {
    padding: 4rem 1.25rem;
  }
  .pillars-section__heading {
    margin-bottom: 2.5rem;
  }
  .pillars-section__title {
    font-size: 1.85rem;
  }
  .pillars {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .pillar {
    padding: 1.75rem 1.5rem;
  }
  .pillar__num {
    margin-bottom: 1.25rem;
  }
  .pillar__title {
    font-size: 1.25rem;
  }
  .pillar__desc {
    font-size: 0.9rem;
  }

  /* PROOF — 3 columns on phones, not 5 */
  .proof {
    padding: 2.5rem 1.25rem;
  }
  .proof__stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem 1rem;
    margin-bottom: 1.75rem;
    padding-bottom: 1.75rem;
  }
  .proof__num {
    font-size: 1.8rem;
  }
  .proof__label {
    font-size: 0.58rem;
  }
  .proof__trusted {
    font-size: 0.68rem;
    line-height: 1.5;
  }
  .proof__trusted strong {
    margin: 0 0.25rem;
  }

  /* CTA — stack cleanly */
  .cta {
    padding: 4.5rem 1.25rem;
  }
  .cta__title {
    font-size: 2.25rem;
  }
  .cta__sub {
    font-size: 0.98rem;
    margin-bottom: 2.25rem;
  }
  .cta__buttons {
    flex-direction: column;
    width: 100%;
  }
  .cta__buttons .btn {
    width: 100%;
    justify-content: center;
    padding: 1.05rem 1.25rem;
  }

  /* FOOTER — single column, generous spacing */
  .footer {
    padding: 3rem 1.25rem 2rem;
  }
  .footer__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .footer__brand {
    font-size: 1.4rem;
  }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.65rem;
    text-align: left;
    padding-top: 1.5rem;
  }
}

/* TINY PHONES — iPhone SE width 375 and smaller */
@media (max-width: 380px) {
  .hero {
    padding: 6rem 1rem 4rem;
  }
  .hero__title {
    font-size: 2.25rem;
  }
  .hero__pill-text {
    font-size: 0.75rem;
  }
  .kitchen-band__neon {
    font-size: 2rem;
  }
  .marquee__item {
    font-size: 1.25rem;
  }
  .this-week__grid {
    grid-template-columns: 1fr; /* one per row on very small screens */
  }
  .proof__stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ENSURE SMOOTH SCROLL ON MOBILE iOS */
html {
  -webkit-overflow-scrolling: touch;
}

/* PREVENT TEXT INFLATION ON iOS LANDSCAPE */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ============================================================================
   MOBILE-FIRST RESPONSIVE OVERRIDES (v16)
   All targeting (max-width: 768px). Loaded LAST so they override everything.
   Built from real iPhone 16 Pro user testing feedback.
   ============================================================================ */

/* ----- Mobile Nav: Hamburger toggle (hidden on desktop, visible on mobile) ----- */
.nav__mobile-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--mcbc-white, #ffffff);
  width: 44px;
  height: 44px;
  border-radius: 10px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.nav__mobile-toggle:active { transform: scale(0.95); }
.nav__mobile-toggle-icon {
  width: 22px;
  height: 22px;
  transition: opacity 0.2s, transform 0.2s;
}
.nav__mobile-toggle-icon--close {
  position: absolute;
  opacity: 0;
}
.nav__mobile-toggle[aria-expanded="true"] .nav__mobile-toggle-icon--open { opacity: 0; }
.nav__mobile-toggle[aria-expanded="true"] .nav__mobile-toggle-icon--close { opacity: 1; }

/* ----- Mobile Slide-down Menu (hidden by default, shown when toggle is open) ----- */
.nav__mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--mcbc-charcoal, #131A1C);
  padding-top: calc(72px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  animation: mcbc-mobile-menu-slide 0.3s cubic-bezier(0.5, 0, 0, 1);
}
.nav__mobile-menu[aria-hidden="false"] { display: block; }
@keyframes mcbc-mobile-menu-slide {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.nav__mobile-menu-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px 24px 32px;
}
.nav__mobile-link {
  font-family: var(--display, serif);
  font-size: 1.75rem;
  color: var(--mcbc-cream, #EFE7D6);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid rgba(239, 231, 214, 0.1);
  transition: color 0.2s, padding-left 0.2s;
}
.nav__mobile-link:hover,
.nav__mobile-link:focus-visible {
  color: var(--mcbc-pink, #B3DDE6);
  padding-left: 6px;
  outline: none;
}
.nav__mobile-menu-divider {
  height: 1px;
  background: rgba(239, 231, 214, 0.15);
  margin: 18px 0 12px;
}
.nav__mobile-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  font-family: var(--mono, monospace);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  text-decoration: none;
  margin-top: 6px;
  -webkit-tap-highlight-color: transparent;
}
.nav__mobile-cta svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav__mobile-cta--call {
  background: rgba(239, 231, 214, 0.08);
  border: 1px solid rgba(239, 231, 214, 0.3);
  color: var(--mcbc-cream, #EFE7D6);
}
.nav__mobile-cta--whatsapp {
  background: #25D366;
  color: #fff;
}

/* Body lock when menu is open */
body.nav-mobile-menu-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* ============== MOBILE BREAKPOINT — Everything under 768px ============== */
@media (max-width: 768px) {

  /* ----- Show the hamburger, hide the desktop nav clutter ----- */
  .nav__mobile-toggle { display: inline-flex; margin-left: auto; flex-shrink: 0; }
  .nav__cta-cluster { display: none !important; }
  .nav__links { display: none !important; }
  .nav__ticker { display: none !important; }

  /* Tighter nav bar on mobile — guaranteed no overflow */
  .nav {
    padding: 12px 16px !important;
    padding-right: calc(16px + env(safe-area-inset-right, 0px)) !important;
    padding-left: calc(16px + env(safe-area-inset-left, 0px)) !important;
    gap: 12px;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    justify-content: space-between;
  }
  .nav__logo {
    font-size: 1.05rem;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nav__logo span { display: none; }

  /* ----- HERO: smaller, tighter typography ----- */
  .hero {
    min-height: 88vh;
    padding-top: 80px;
    padding-bottom: 32px;
  }
  .hero__inner {
    padding: 0 20px;
  }
  .hero__eyebrow {
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    margin-bottom: 18px;
  }
  .hero__title {
    font-size: clamp(1.9rem, 9vw, 2.6rem) !important;
    line-height: 1.05 !important;
    margin-bottom: 18px;
  }
  .hero__subtitle,
  .hero p {
    font-size: 1rem !important;
    line-height: 1.55 !important;
    margin-bottom: 24px !important;
  }

  /* ----- HERO CTAs: Collapse 3 buttons → 1 primary + small text links ----- */
  /* Hide the 2nd and 3rd hero buttons on mobile (WhatsApp + Call live in FAB) */
  .hero__ctas {
    flex-direction: column;
    gap: 12px !important;
    align-items: stretch !important;
  }
  .hero__ctas > .btn:nth-child(n+2) { display: none; }
  .hero__ctas > .btn:first-child {
    width: 100%;
    height: 56px;
    font-size: 0.95rem;
  }

  /* Add a small "or WhatsApp / or call" text link below the primary hero CTA */
  .hero__ctas::after {
    content: "Or use the chat button (bottom right) to WhatsApp or call.";
    display: block;
    font-family: var(--mono, monospace);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: rgba(239, 231, 214, 0.78);
    text-align: center;
    margin-top: 10px;
    line-height: 1.5;
    text-transform: none;
    padding: 0 8px;
  }

  /* ----- Section spacing: MORE whitespace as user requested ----- */
  section { padding-top: 64px; padding-bottom: 64px; }
  section.gateway,
  section.story,
  section.proof,
  section.cta,
  section.tiers,
  section.this-week,
  section.process,
  section.faq,
  section.tracks,
  section.snack-boxes,
  section.team-lunch,
  section.affair {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  /* ----- Section headings ----- */
  h2,
  .section__heading h2,
  .gateway h2,
  .cta h2 {
    font-size: clamp(1.6rem, 6.5vw, 2rem) !important;
    line-height: 1.12 !important;
    margin-bottom: 16px;
  }
  h3 {
    font-size: clamp(1.15rem, 5vw, 1.4rem) !important;
    line-height: 1.2 !important;
  }
  p {
    font-size: 1rem;
    line-height: 1.55;
  }
  .eyebrow {
    font-size: 0.65rem;
    letter-spacing: 0.12em;
  }

  /* ----- Final CTA blocks: collapse 3-4 buttons → 1 primary + text links ----- */
  .cta__buttons {
    flex-direction: column;
    gap: 12px !important;
    align-items: stretch !important;
  }
  .cta__buttons > .btn:nth-child(n+2) { display: none; }
  .cta__buttons > .btn:first-child {
    width: 100%;
    height: 56px;
    font-size: 0.95rem;
  }
  .cta__buttons::after {
    content: "Or tap the chat button (bottom right) to WhatsApp or call.";
    display: block;
    font-family: var(--mono, monospace);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: rgba(19, 26, 28, 0.65);
    text-align: center;
    margin-top: 10px;
    line-height: 1.5;
    text-transform: none;
    padding: 0 8px;
  }
  /* Dark CTA sections need lighter text color for the secondary text */
  .cta--dark .cta__buttons::after,
  section.cta[style*="background"] .cta__buttons::after {
    color: rgba(239, 231, 214, 0.7);
  }

  /* ----- General buttons: smaller, more touch-friendly ----- */
  .btn {
    min-height: 48px;
    padding: 12px 20px !important;
    font-size: 0.88rem !important;
    letter-spacing: 0.06em;
  }
  .btn svg { width: 18px; height: 18px; }

  /* ----- Cards & containers: tighter padding ----- */
  .gateway__card,
  .tier-card,
  .proof__stat,
  .pillar,
  .step,
  .this-week__card {
    padding: 20px !important;
  }
  .gateway__card-img,
  .this-week__card-img {
    height: 200px !important;
  }

  /* ----- Footer: stack everything, generous spacing, safe-area padding ----- */
  .footer {
    padding-top: 56px;
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  }
  .footer__inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    text-align: left;
  }
  .footer__brand h3 {
    font-size: 1.4rem;
  }

  /* ----- Hide the FAB "Talk to MCBC →" nudge tooltip on mobile entirely ----- */
  /* It was overlapping content on smaller viewports. The FAB button alone is enough. */
  .fab-nudge { display: none !important; }

  /* ----- FAB: slightly smaller, raised above iOS Safari toolbar ----- */
  .fab {
    width: 54px;
    height: 54px;
  }
  .fab__icon { width: 24px; height: 24px; }
  .fab-root {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    right: 14px !important;
  }
  .fab-option {
    padding: 10px 14px 10px 12px;
    font-size: 0.82rem;
  }

  /* ----- Hero contact ticker / proof tickers: smaller font ----- */
  .proof__stat-number { font-size: 2rem !important; }
  .proof__stat-label { font-size: 0.65rem; }

  /* ----- Form fields: bigger touch targets, more whitespace ----- */
  .lead-form { padding: 24px 18px !important; }
  .field__input, .field__select, .field__textarea {
    min-height: 48px;
    font-size: 16px !important; /* iOS won't zoom on focus when >=16px */
    padding: 12px 14px !important;
  }
  .field__textarea { min-height: 96px; }
  .field { margin-bottom: 14px !important; }
  .field-grid--2 { grid-template-columns: 1fr !important; }
  .form__submit {
    width: 100%;
    min-height: 54px;
    font-size: 0.95rem;
  }

  /* ----- Modal: full screen on mobile ----- */
  .modal__panel {
    margin: 16px !important;
    padding: 24px 20px !important;
    max-height: calc(100vh - 32px) !important;
  }
}

/* ----- Extra-small phones (< 380px) ----- */
@media (max-width: 380px) {
  .hero__title { font-size: clamp(1.7rem, 9vw, 2.2rem) !important; }
  h2 { font-size: clamp(1.4rem, 6.5vw, 1.8rem) !important; }
  .nav__logo { font-size: 0.95rem; }
  .btn { padding: 10px 16px !important; font-size: 0.82rem !important; }
  .nav__mobile-link { font-size: 1.55rem; }
}

/* ----- Landscape orientation tweaks (e.g. iPhone in landscape) ----- */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .hero { min-height: 100vh; padding-top: 70px; padding-bottom: 24px; }
  .hero__title { font-size: clamp(1.5rem, 5vw, 2rem) !important; }
  .nav__mobile-menu-inner { padding: 12px 24px; }
  .nav__mobile-link { font-size: 1.2rem; padding: 8px 0; }
}


/* ==========================================================================
   PHASE 7E — ADDITIONS
   New styles for: order button in nav, 4-quadrant gateway, opt-in checkbox,
   instant-order banner (corporate), brand-voice paragraph, sig footnote,
   footer credits, mobile founder image (already fixed above).
   ========================================================================== */

/* ---------- 🔥 ORDER NOW button (desktop nav) ---------- */
.nav__order {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1.15rem;
  background: linear-gradient(135deg, var(--mcbc-coral), #22C7A9);
  color: var(--mcbc-white);
  font-family: var(--mono); font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  border-radius: 100px;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 4px 14px rgba(0, 144, 173, 0.25);
  position: relative;
  overflow: hidden;
}
.nav__order::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent 50%);
  pointer-events: none;
}
.nav__order:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 144, 173, 0.4);
}
.nav__order-flame {
  font-size: 1.05rem;
  line-height: 1;
  animation: mcbcFlameFlicker 1.8s ease-in-out infinite;
}
@keyframes mcbcFlameFlicker {
  0%, 100% { transform: rotate(-2deg) scale(1); }
  25%      { transform: rotate(3deg) scale(1.08); }
  50%      { transform: rotate(-1deg) scale(0.96); }
  75%      { transform: rotate(2deg) scale(1.04); }
}

/* ---------- 🔥 ORDER NOW block (mobile menu top) ---------- */
.nav__mobile-order {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 1.1rem 1.25rem;
  background: linear-gradient(135deg, var(--mcbc-coral), #22C7A9);
  color: var(--mcbc-white);
  text-decoration: none;
  border-radius: 12px;
  margin-bottom: 0.75rem;
  position: relative;
  box-shadow: 0 8px 24px rgba(0, 144, 173, 0.3);
}
.nav__mobile-order-flame {
  display: inline-block;
  font-size: 1.4rem;
  line-height: 1;
  animation: mcbcFlameFlicker 1.8s ease-in-out infinite;
  margin-bottom: 0.15rem;
}
.nav__mobile-order-text {
  font-family: var(--display); font-weight: 600;
  font-size: 1.5rem; line-height: 1.1;
  letter-spacing: -0.01em;
}
.nav__mobile-order-sub {
  font-family: var(--mono); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.14em;
  opacity: 0.92;
}

/* ---------- GATEWAY 4-QUADRANT (replaces 3-card) ---------- */
.gateway--quad {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
@media (max-width: 768px) {
  .gateway--quad { grid-template-columns: 1fr; gap: 1.25rem; }
}
@media (min-width: 1200px) {
  .gateway--quad { gap: 2rem; }
}

/* ---------- Follow-up notification (informational, no checkbox) ---------- */
.form__notice {
  margin-top: 1.5rem;
  padding: 0.95rem 1.15rem;
  background: rgba(179, 221, 230, 0.15);
  border-left: 3px solid var(--mcbc-pink);
  border-radius: 4px;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.form__notice-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--mcbc-coral);
  margin-top: 0.15rem;
}
.form__notice-text {
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(19, 26, 28, 0.78);
  margin: 0;
}
.form__notice-text strong {
  display: block;
  color: var(--mcbc-charcoal);
  font-weight: 600;
  margin-bottom: 0.2rem;
}
@media (max-width: 600px) {
  .form__notice { padding: 0.85rem 1rem; gap: 0.6rem; }
  .form__notice-text { font-size: 0.85rem; }
}

/* ---------- Hint text (used by homepage router) ---------- */
.field__hint {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: var(--mcbc-coral);
  font-style: italic;
  line-height: 1.4;
}

/* ---------- Instant Order banner (Corporate page) ---------- */
.instant-order {
  padding: 3rem 1.5rem;
  background: linear-gradient(135deg, var(--mcbc-charcoal) 0%, #2a2a2c 100%);
  position: relative;
  overflow: hidden;
}
.instant-order::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 90% 20%, rgba(0, 144, 173, 0.18), transparent 50%),
    radial-gradient(circle at 10% 80%, rgba(179, 221, 230, 0.12), transparent 50%);
  pointer-events: none;
}
.instant-order__inner {
  position: relative;
  max-width: var(--max-width); margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
}
@media (max-width: 900px) {
  .instant-order__inner { grid-template-columns: 1fr; gap: 1.5rem; }
}
.instant-order__copy {
  display: flex; gap: 1.25rem; align-items: flex-start;
}
.instant-order__flame {
  font-size: 2.25rem;
  line-height: 1;
  animation: mcbcFlameFlicker 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
.instant-order__eyebrow {
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mcbc-coral);
  margin-bottom: 0.6rem;
}
.instant-order__eyebrow em {
  color: var(--mcbc-pink);
  font-style: italic;
  font-family: var(--display);
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.1rem;
}
.instant-order__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.1;
  color: var(--mcbc-cream);
  letter-spacing: -0.02em;
  margin-bottom: 0.65rem;
}
.instant-order__title em {
  font-style: italic;
  color: var(--mcbc-pink);
}
.instant-order__desc {
  font-size: 0.95rem;
  color: rgba(239, 231, 214, 0.78);
  line-height: 1.55;
  max-width: 520px;
}
.instant-order__cta {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, var(--mcbc-coral), #22C7A9);
  color: var(--mcbc-white);
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  border-radius: 100px;
  box-shadow: 0 8px 24px rgba(0, 144, 173, 0.3);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap;
}
.instant-order__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 144, 173, 0.45);
}
.instant-order__cta svg {
  width: 18px; height: 18px;
}
@media (max-width: 900px) {
  .instant-order__cta { justify-self: center; width: 100%; max-width: 360px; justify-content: center; }
}

/* ---------- Story: brand-voice paragraph (factual, not founder voice) ---------- */
.story__p--brand {
  border-left: 3px solid var(--mcbc-pink);
  padding-left: 1.15rem;
  font-style: italic;
  font-size: 0.98rem;
  color: rgba(19, 26, 28, 0.72);
  background: rgba(179, 221, 230, 0.08);
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  padding-right: 0.8rem;
  margin: 1.25rem 0;
}
.story__p--brand strong {
  font-style: normal;
  color: var(--mcbc-charcoal);
  font-weight: 600;
}

/* ---------- Sig footnote (Marriott attribution) ---------- */
.story__sig-note {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.04em;
  font-style: italic;
  color: rgba(19, 26, 28, 0.55);
}

/* ---------- Footer credits (sassy attribution) ---------- */
.footer__credits {
  text-align: center;
  padding: 1rem 1.5rem 1.5rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.03em;
  line-height: 1.6;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 0.5rem;
}
.footer__credits strong {
  color: var(--mcbc-pink);
  font-weight: 600;
}

/* ---------- Submit button — alternate "routing" label state ---------- */
.form__submit-text { display: inline-block; }
.form__submit-text--routing { color: var(--mcbc-cream); }