/* ============================================================
   FLAVORS JUNCTION — stylesheet
   Palette pulled from the storefront itself: near-black facade,
   warm string-light gold, neon-sign red, chutney green accent.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Permanent+Marker&family=Sacramento&family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root{
  --ink:#15110d;
  --ink-2:#1c1610;
  --panel:#241c15;
  --panel-2:#2c2118;
  --cream:#f6efe2;
  --cream-dim:#cabfaa;
  --marigold:#f2a93b;
  --marigold-dark:#c97f1e;
  --chili:#d6453b;
  --chutney:#8ca35b;
  --line: rgba(246,239,226,.12);
  --line-strong: rgba(246,239,226,.22);
  --shadow: 0 20px 50px rgba(0,0,0,.45);
  --display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --marker: 'Permanent Marker', cursive;
  --script: 'Sacramento', cursive;
  --body: 'Work Sans', sans-serif;
  --container: 1180px;
  --radius: 4px;
  --glow-chili: 0 0 0 rgba(214,69,59,0);
  --glow-marigold: 0 0 0 rgba(242,169,59,0);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:400; letter-spacing:.02em; }

::selection{ background:var(--chili); color:var(--cream); }

:focus-visible{
  outline:2px solid var(--marigold);
  outline-offset:3px;
}

.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

.eyebrow{
  font-family:var(--body);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--marigold);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:'';
  width:22px;
  height:1px;
  background:var(--marigold);
  display:inline-block;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 28px;
  border-radius:999px;
  font-family:var(--body);
  font-weight:700;
  font-size:.9rem;
  letter-spacing:.03em;
  border:1px solid transparent;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn-primary{
  background:var(--chili);
  color:var(--cream);
  box-shadow:0 10px 24px rgba(214,69,59,.35);
}
.btn-primary:hover{ background:#e8564b; box-shadow:0 14px 30px rgba(214,69,59,.45); }
.btn-ghost{
  background:transparent;
  color:var(--cream);
  border-color:var(--line-strong);
}
.btn-ghost:hover{ border-color:var(--marigold); color:var(--marigold); }
.btn-gold{
  background:var(--marigold);
  color:var(--ink);
  box-shadow:0 10px 24px rgba(242,169,59,.3);
}
.btn-gold:hover{ background:#ffc267; }

/* ---------------- Signature motif: the light-rig frame ----------------
   Recreates the angled string-light frame from the shop's own facade.
   Used as a recurring section divider / decorative accent. */
.lightrig{
  display:block;
  width:100%;
  height:auto;
  opacity:.9;
}
.lightrig .wire{ stroke:var(--line-strong); stroke-width:1.5; fill:none; }
.lightrig .bulb{ fill:var(--marigold); }
.lightrig .bulb-glow{ fill:var(--marigold); opacity:.35; }

.divider{
  padding:18px 0;
  max-width:220px;
  margin:0 auto;
}

/* ---------------- Header ---------------- */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  padding:18px 0;
  transition:background .35s ease, padding .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(21,17,13,.92);
  backdrop-filter:blur(10px);
  padding:12px 0;
  border-bottom-color:var(--line);
}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.brand{
  display:flex;
  flex-direction:column;
  line-height:1;
}
.mark{
  display:inline-flex;
  align-items:flex-end;
  gap:.14em;
  font-family:var(--display);
  font-size:1.7rem;
  letter-spacing:.03em;
  color:var(--cream);
  white-space:nowrap;
}
.mark .mark-flavors{
  position:relative;
}
.mark .mark-flavors::after{
  content:'';
  position:absolute;
  left:1px; right:1px; bottom:-3px;
  height:2px;
  background:linear-gradient(90deg, var(--chili), var(--marigold));
  border-radius:2px;
}
.mark .mark-script{
  font-family:var(--script);
  font-weight:400;
  font-size:1.85em;
  line-height:.6;
  color:var(--marigold);
  transform:rotate(-4deg) translateY(2px);
  text-shadow:0 0 18px rgba(242,169,59,.35);
  letter-spacing:0;
}
.brand .tag{
  font-size:.6rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--cream-dim);
  margin-top:6px;
}

/* Footer brand uses the same logotype at a larger size */
.footer-brand .mark{ font-size:2rem; }

.nav-links{
  display:flex;
  gap:34px;
  align-items:center;
}
.nav-links a{
  font-size:.84rem;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--cream-dim);
  position:relative;
  padding:6px 0;
  transition:color .2s ease;
}
.nav-links a:hover, .nav-links a:focus-visible{ color:var(--cream); }
.nav-links a::after{
  content:'';
  position:absolute; left:0; right:100%; bottom:0;
  height:2px; background:var(--marigold);
  transition:right .25s ease;
}
.nav-links a:hover::after{ right:0; }

.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{
  display:none;
  background:none; border:0; color:var(--cream);
  width:40px; height:40px; position:relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:''; position:absolute; left:9px; right:9px; height:2px; background:var(--cream);
  transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle span{ top:19px; }
.nav-toggle span::before{ top:-7px; }
.nav-toggle span::after{ top:7px; }
.nav-toggle.is-open span{ background:transparent; }
.nav-toggle.is-open span::before{ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open span::after{ transform:translateY(-7px) rotate(-45deg); }

/* ---------------- Hero ---------------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  color:var(--cream);
}
.hero-media{
  position:absolute; inset:0;
  z-index:0;
}
.hero-media video, .hero-media img{
  width:100%; height:100%; object-fit:cover;
}
.hero-media::after{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(21,17,13,.55) 0%, rgba(21,17,13,.35) 30%, rgba(21,17,13,.85) 82%, var(--ink) 100%),
    linear-gradient(90deg, rgba(21,17,13,.55) 0%, transparent 40%);
}
.hero-content{
  position:relative;
  z-index:2;
  padding:160px 0 90px;
  width:100%;
}
.hero-content .eyebrow{ margin-bottom:22px; }
.hero-title{
  font-size:clamp(3rem, 9vw, 6.4rem);
  line-height:.94;
  text-transform:uppercase;
  max-width:16ch;
  text-wrap:balance;
}
.hero-title .line2{ color:var(--marigold); }
.hero-sub{
  margin-top:26px;
  max-width:46ch;
  font-size:clamp(1rem, 1.6vw, 1.15rem);
  color:var(--cream-dim);
  font-weight:300;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:38px;
}
.hero-scroll{
  position:absolute;
  right:24px; bottom:26px;
  z-index:2;
  display:flex; align-items:center; gap:10px;
  color:var(--cream-dim);
  font-size:.72rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  writing-mode:vertical-rl;
}
.hero-scroll::after{
  content:'';
  writing-mode:horizontal-tb;
  width:1px; height:46px;
  background:linear-gradient(var(--marigold), transparent);
  display:block;
}

/* ---------------- Ticker ---------------- */
.ticker{
  background:var(--marigold);
  color:var(--ink);
  overflow:hidden;
  position:relative;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
}
.ticker-track{
  display:flex;
  width:max-content;
  animation: ticker 32s linear infinite;
}
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker-track span{
  font-family:var(--display);
  font-size:1.15rem;
  letter-spacing:.06em;
  padding:14px 28px;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:28px;
}
.ticker-track span::after{ content:'\2726'; font-size:.7rem; opacity:.6; }
@keyframes ticker{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------------- Section basics ---------------- */
section{ position:relative; }
.section-pad{ padding:110px 0; }
.section-head{
  max-width:640px;
  margin-bottom:56px;
}
.section-head h2{
  font-size:clamp(2.2rem, 4.6vw, 3.4rem);
  text-transform:uppercase;
  margin-top:16px;
  line-height:1;
}
.section-head p{
  margin-top:18px;
  color:var(--cream-dim);
  font-size:1.02rem;
  max-width:52ch;
}
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.center .eyebrow::before{ display:none; }

/* reveal-on-scroll */
.reveal{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-delay-1{ transition-delay:.08s; }
.reveal-delay-2{ transition-delay:.16s; }
.reveal-delay-3{ transition-delay:.24s; }
.reveal-delay-4{ transition-delay:.32s; }

/* ---------------- About / Story ---------------- */
.about{
  background:var(--ink);
}
.about-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:64px;
  align-items:center;
}
.about-media{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio: 4/5;
  box-shadow:var(--shadow);
}
.about-media img{ width:100%; height:100%; object-fit:cover; }
.about-media-tag{
  position:absolute; left:18px; bottom:18px;
  background:rgba(21,17,13,.75);
  backdrop-filter:blur(6px);
  border:1px solid var(--line-strong);
  padding:10px 16px;
  border-radius:999px;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--marigold);
}
.about-copy p{
  color:var(--cream-dim);
  font-size:1.05rem;
  margin:20px 0;
  max-width:52ch;
}
.about-copy p:first-of-type{ margin-top:0; }
.stat-row{
  display:flex;
  gap:40px;
  margin-top:38px;
  flex-wrap:wrap;
}
.stat b{
  font-family:var(--display);
  font-size:2.4rem;
  color:var(--marigold);
  display:block;
  line-height:1;
}
.stat span{
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--cream-dim);
}

/* ---------------- Menu ---------------- */
.menu{ background:var(--ink-2); }
.menu-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:48px;
}
.menu-tab{
  background:transparent;
  border:1px solid var(--line-strong);
  color:var(--cream-dim);
  padding:11px 22px;
  border-radius:999px;
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.02em;
  transition:all .25s ease;
}
.menu-tab:hover{ color:var(--cream); border-color:var(--cream-dim); }
.menu-tab.is-active{
  background:var(--chili);
  border-color:var(--chili);
  color:var(--cream);
}
.menu-panels{ position:relative; }
.menu-panel{ display:none; }
.menu-panel.is-active{ display:block; }
.menu-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}
.dish-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.dish-card:hover{
  transform:translateY(-6px);
  border-color:var(--line-strong);
  box-shadow:var(--shadow);
}
.dish-media{
  aspect-ratio: 5/4;
  overflow:hidden;
  position:relative;
}
.dish-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.dish-card:hover .dish-media img{ transform:scale(1.06); }
.dish-badge{
  position:absolute; top:14px; left:14px;
  background:var(--marigold);
  color:var(--ink);
  font-size:.65rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:6px 12px;
  border-radius:999px;
}
.dish-body{ padding:22px 24px 26px; }
.dish-body h3{
  font-size:1.4rem;
  text-transform:uppercase;
  letter-spacing:.01em;
}
.dish-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  margin-top:4px;
}
.dish-price{
  font-family:var(--display);
  color:var(--marigold);
  font-size:1.3rem;
  white-space:nowrap;
}
.dish-body p{
  color:var(--cream-dim);
  font-size:.92rem;
  margin-top:10px;
}
.menu-note{
  margin-top:40px;
  font-size:.85rem;
  color:var(--cream-dim);
  border-top:1px dashed var(--line-strong);
  padding-top:22px;
}

/* ---------------- Signature spotlight ---------------- */
.spotlight{
  background: radial-gradient(120% 120% at 15% 10%, rgba(214,69,59,.16), transparent 55%), var(--ink);
}
.spotlight-grid{
  display:grid;
  grid-template-columns: .85fr 1.15fr;
  gap:60px;
  align-items:center;
}
.spotlight-media{
  position:relative;
}
.spotlight-media .frame-main{
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid var(--line-strong);
}
.spotlight-media .frame-main img{ width:100%; display:block; }
.spotlight-media .frame-small{
  position:absolute;
  width:44%;
  right:-8%;
  bottom:-12%;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  border:4px solid var(--ink);
}
.spotlight-media .frame-small img{ width:100%; display:block; }
.spotlight-copy h2{
  font-size:clamp(2.4rem, 5vw, 3.8rem);
  text-transform:uppercase;
  line-height:.98;
}
.spotlight-copy p{
  color:var(--cream-dim);
  margin:22px 0;
  max-width:50ch;
  font-size:1.05rem;
}
.spotlight-copy .btn{ margin-top:10px; }

/* ---------------- Rooftop / Party Hall ---------------- */
.venues{ background:var(--ink-2); }
.venue-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}
.venue-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:34px 30px;
  transition:border-color .3s ease, transform .3s ease;
}
.venue-card:hover{ border-color:var(--marigold); transform:translateY(-4px); }
.venue-icon{
  width:52px; height:52px;
  border-radius:50%;
  background:rgba(242,169,59,.12);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px;
}
.venue-icon svg{ width:24px; height:24px; stroke:var(--marigold); }
.venue-card h3{
  font-size:1.5rem;
  text-transform:uppercase;
}
.venue-card p{
  color:var(--cream-dim);
  margin-top:12px;
  font-size:.95rem;
}

/* ---------------- Gallery ---------------- */
.gallery{ background:var(--ink); }
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:150px;
  gap:16px;
}
.gallery-item{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  cursor:pointer;
  border:1px solid var(--line);
}
.gallery-item img, .gallery-item video{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.gallery-item:hover img, .gallery-item:hover video{ transform:scale(1.07); }
.gallery-item.tall{ grid-row: span 2; }
.gallery-item.wide{ grid-column: span 2; }
.gallery-caption{
  position:absolute; inset:auto 0 0 0;
  padding:14px 16px 12px;
  background:linear-gradient(0deg, rgba(21,17,13,.92), transparent);
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--cream);
  display:flex;
  align-items:center;
  gap:8px;
}
.play-badge{
  width:20px; height:20px;
  border-radius:50%;
  background:var(--chili);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.play-badge svg{ width:8px; height:8px; fill:var(--cream); margin-left:1px; }

/* ---------------- Testimonial strip ---------------- */
.quote-strip{
  background:var(--marigold);
  color:var(--ink);
  padding:70px 0;
}
.quote-strip .wrap{
  display:flex;
  align-items:center;
  gap:40px;
  flex-wrap:wrap;
  justify-content:space-between;
}
.quote-strip blockquote{
  margin:0;
  font-family:var(--display);
  font-size:clamp(1.5rem, 3vw, 2.1rem);
  max-width:18ch;
  line-height:1.15;
  text-transform:uppercase;
}
.quote-strip cite{
  font-style:normal;
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.08em;
  display:block;
  margin-top:16px;
}

/* ---------------- Visit / Contact ---------------- */
.visit{ background:var(--ink-2); }
.visit-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:60px;
}
.info-list{ margin-top:30px; }
.info-item{
  display:flex;
  gap:18px;
  padding:20px 0;
  border-bottom:1px solid var(--line);
}
.info-item:first-child{ padding-top:0; }
.info-icon{
  width:44px;height:44px;flex:0 0 auto;
  border-radius:50%;
  background:rgba(214,69,59,.14);
  display:flex;align-items:center;justify-content:center;
}
.info-icon svg{ width:20px;height:20px;stroke:var(--chili); }
.info-item h4{
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--marigold);
  font-family:var(--body);
  font-weight:700;
}
.info-item p{ margin:6px 0 0; color:var(--cream-dim); font-size:.98rem; }
.info-actions{
  display:flex;
  gap:14px;
  margin-top:34px;
  flex-wrap:wrap;
}
.hours-table{ width:100%; border-collapse:collapse; margin-top:12px; }
.hours-table tr{ border-bottom:1px solid var(--line); }
.hours-table tr:last-child{ border-bottom:none; }
.hours-table td{ padding:11px 0; font-size:.92rem; color:var(--cream-dim); }
.hours-table td:last-child{ text-align:right; color:var(--cream); font-weight:600; }

.map-frame{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line-strong);
  aspect-ratio: 4/5;
  min-height:380px;
}
.map-frame iframe{ width:100%; height:100%; border:0; filter:grayscale(.3) contrast(1.1) invert(.92) brightness(.9); }

/* ---------------- Footer ---------------- */
.site-footer{
  background:var(--ink);
  padding:64px 0 30px;
  border-top:1px solid var(--line);
}
.footer-top{
  display:flex;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
  padding-bottom:40px;
  border-bottom:1px solid var(--line);
}
.footer-brand p{ color:var(--cream-dim); max-width:34ch; margin-top:14px; font-size:.92rem; }
.footer-cols{ display:flex; gap:70px; flex-wrap:wrap; }
.footer-col h5{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--marigold); margin-bottom:16px; font-weight:700;
}
.footer-col a, .footer-col p{
  display:block; color:var(--cream-dim); font-size:.92rem;
  margin-bottom:10px; transition:color .2s ease;
}
.footer-col a:hover{ color:var(--cream); }
.footer-social{ display:flex; gap:12px; margin-top:6px; }
.footer-social a{
  width:38px;height:38px; border-radius:50%;
  border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;
  margin:0;
}
.footer-social a:hover{ border-color:var(--marigold); background:rgba(242,169,59,.08); }
.footer-social svg{ width:16px; height:16px; stroke:var(--cream); }
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding-top:26px;
  font-size:.78rem;
  color:var(--cream-dim);
}

/* ---------------- Lightbox ---------------- */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(10,8,6,.94);
  display:flex; align-items:center; justify-content:center;
  padding:40px;
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox-inner{ max-width:900px; width:100%; }
.lightbox-inner img, .lightbox-inner video{ width:100%; border-radius:var(--radius); max-height:82vh; object-fit:contain; background:#000; }
.lightbox-close{
  position:absolute; top:24px; right:28px;
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line-strong);
  background:rgba(21,17,13,.6);
  display:flex;align-items:center;justify-content:center;
  color:var(--cream);
  font-size:1.4rem;
}

/* ================================================================
   FULL MENU PAGE COMPONENTS
   ================================================================ */
.menu-hero{
  padding:150px 0 60px;
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(214,69,59,.14), transparent 60%),
    radial-gradient(700px 400px at 100% 0%, rgba(242,169,59,.12), transparent 55%),
    var(--ink);
  border-bottom:1px solid var(--line);
}
.menu-hero .eyebrow{ margin-bottom:18px; }
.menu-hero h1{
  font-size:clamp(2.6rem, 6vw, 4.6rem);
  text-transform:uppercase;
  line-height:.96;
}
.menu-hero p{ color:var(--cream-dim); max-width:56ch; margin-top:20px; font-size:1.05rem; }
.veg-badge{
  display:inline-flex; align-items:center; gap:8px;
  border:1.5px solid var(--chutney);
  color:var(--chutney);
  padding:6px 14px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-top:22px;
}
.veg-badge .dot{
  width:9px;height:9px;border-radius:2px;border:1.5px solid var(--chutney);
  display:inline-flex;align-items:center;justify-content:center;
}
.veg-badge .dot::after{ content:''; width:5px;height:5px;border-radius:50%;background:var(--chutney); }

.menu-search{
  position:relative;
  max-width:420px;
  margin-top:34px;
}
.menu-search input{
  width:100%;
  background:var(--panel);
  border:1px solid var(--line-strong);
  color:var(--cream);
  padding:14px 18px 14px 46px;
  border-radius:999px;
  font-family:var(--body);
  font-size:.95rem;
}
.menu-search input::placeholder{ color:var(--cream-dim); }
.menu-search input:focus{ outline:none; border-color:var(--marigold); }
.menu-search svg{
  position:absolute; left:18px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; stroke:var(--cream-dim); fill:none; stroke-width:2;
}

.cat-nav{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(21,17,13,.95);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  padding:14px 0;
}
.cat-nav-scroll{
  display:flex;
  gap:10px;
  overflow-x:auto;
  scrollbar-width:none;
  padding-bottom:2px;
}
.cat-nav-scroll::-webkit-scrollbar{ display:none; }
.cat-pill{
  flex:0 0 auto;
  border:1px solid var(--line-strong);
  color:var(--cream-dim);
  padding:9px 18px;
  border-radius:999px;
  font-size:.82rem;
  font-weight:600;
  white-space:nowrap;
  transition:all .2s ease;
}
.cat-pill:hover{ color:var(--cream); border-color:var(--marigold); }
.cat-pill.is-active{ background:var(--chili); border-color:var(--chili); color:var(--cream); }

.menu-body{ padding:70px 0 100px; background:var(--ink-2); }
.menu-cat{
  padding:52px 0;
  border-bottom:1px solid var(--line);
  scroll-margin-top:86px;
}
.menu-cat:last-child{ border-bottom:none; }
.menu-cat-head h2{
  font-size:clamp(1.8rem, 3.4vw, 2.5rem);
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:14px;
}
.cat-icon{ font-size:1.5rem; }
.cat-note{
  color:var(--marigold);
  font-size:.85rem;
  margin-top:10px;
  font-style:italic;
}

.photo-mi-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
  margin-top:30px;
}
.photo-mi{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .3s ease, border-color .3s ease;
}
.photo-mi:hover{ transform:translateY(-4px); border-color:var(--line-strong); }
.photo-mi-media{ aspect-ratio:4/3; overflow:hidden; }
.photo-mi-media img{ width:100%; height:100%; object-fit:cover; }
.photo-mi-body{
  padding:14px 16px 16px;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
}
.photo-mi-body span{ font-size:.92rem; font-weight:600; }
.photo-mi-body b{ font-family:var(--display); color:var(--marigold); font-size:1.1rem; white-space:nowrap; }

.mi-list{ margin-top:28px; }
.mi-line{
  display:flex;
  align-items:center;
  gap:8px;
  padding:11px 0;
  border-bottom:1px dashed var(--line);
}
.mi-line.is-hidden{ display:none; }
.mi-name{ font-size:.98rem; color:var(--cream); }
.mi-dots{
  flex:1;
  border-bottom:2px dotted var(--line-strong);
  transform:translateY(-5px);
  min-width:20px;
}
.mi-price{ font-family:var(--display); color:var(--marigold); font-size:1.05rem; white-space:nowrap; }

.menu-empty{
  display:none;
  text-align:center;
  padding:60px 0;
  color:var(--cream-dim);
}
.menu-empty.is-visible{ display:block; }

@media (max-width: 980px){
  .photo-mi-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 760px){
  .menu-hero{ padding:130px 0 44px; }
  .photo-mi-grid{ grid-template-columns:repeat(2,1fr); }
  .menu-cat{ padding:38px 0; scroll-margin-top:70px; }
}

.menu-loading{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  padding:80px 0;
  color:var(--cream-dim);
}
.menu-loading-spinner{
  width:34px; height:34px;
  border-radius:50%;
  border:3px solid var(--line-strong);
  border-top-color:var(--marigold);
  animation: spin 0.8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.menu-error{
  background:rgba(214,69,59,.1);
  border:1px solid rgba(214,69,59,.4);
  border-radius:var(--radius);
  padding:16px 20px;
  margin-bottom:30px;
  color:var(--cream);
  font-size:.92rem;
}
.menu-error p{ margin:0; }

/* ================================================================
   ATTENTION & MOTION LAYER
   ================================================================ */

/* ---- Scroll progress bar ---- */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--chili), var(--marigold));
  z-index:300;
  box-shadow:0 0 12px rgba(242,169,59,.6);
  transition:width .08s linear;
}

/* ---- Floating WhatsApp button ---- */
.float-whatsapp{
  position:fixed;
  right:22px; bottom:22px;
  z-index:150;
  width:60px; height:60px;
  border-radius:50%;
  background:#25d366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(37,211,102,.45);
  opacity:0; transform:translateY(20px) scale(.8);
  pointer-events:none;
  transition:opacity .4s ease, transform .4s ease;
}
.float-whatsapp.is-visible{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.float-whatsapp svg{ width:28px; height:28px; fill:#fff; }
.float-whatsapp::before{
  content:'';
  position:absolute; inset:0; border-radius:50%;
  border:2px solid #25d366;
  animation: pulse-ring 2.2s cubic-bezier(.2,.6,.3,1) infinite;
}
@keyframes pulse-ring{
  0%{ transform:scale(1); opacity:.7; }
  100%{ transform:scale(1.6); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .float-whatsapp::before{ animation:none; } }

/* ---- Rotating seal badge ---- */
.seal{
  position:absolute;
  width:118px; height:118px;
  z-index:3;
  animation: seal-spin 16s linear infinite;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.4));
}
@keyframes seal-spin{ to{ transform:rotate(360deg); } }
.seal-center{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem;
}
@media (prefers-reduced-motion: reduce){ .seal{ animation:none; } }
@media (max-width: 760px){ .seal{ width:88px; height:88px; } .seal-center{ font-size:1.2rem; } }

/* ---- Neon flicker on hero highlight ---- */
.neon-flicker{
  animation: neon-flicker 5s infinite;
}
@keyframes neon-flicker{
  0%, 3%, 6%, 100%{ text-shadow: 0 0 18px rgba(242,169,59,.85), 0 0 42px rgba(242,169,59,.4); }
  4%, 5%{ text-shadow: 0 0 4px rgba(242,169,59,.3); }
}
@media (prefers-reduced-motion: reduce){ .neon-flicker{ animation:none; text-shadow:0 0 18px rgba(242,169,59,.85); } }

/* ---- Hero cursor spotlight ---- */
.hero-spotlight{
  position:absolute; inset:0; z-index:1;
  pointer-events:none;
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,30%), rgba(242,169,59,.16), transparent 60%);
  opacity:0;
  transition:opacity .4s ease;
}
.hero:hover .hero-spotlight{ opacity:1; }

/* ---- Marker-font accent tag ---- */
.marker-tag{
  font-family:var(--marker);
  color:var(--marigold);
  font-size:1.1rem;
  display:inline-block;
  transform:rotate(-3deg);
  line-height:1;
}

/* ---- Floating decorative shapes ---- */
.float-deco{
  position:absolute;
  pointer-events:none;
  opacity:.5;
  animation: float-updown 6s ease-in-out infinite;
  z-index:1;
}
.float-deco.d2{ animation-duration:7.5s; animation-delay:-2s; }
.float-deco.d3{ animation-duration:5.5s; animation-delay:-4s; }
@keyframes float-updown{
  0%, 100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-16px) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce){ .float-deco{ animation:none; } }
@media (max-width: 760px){ .float-deco{ display:none; } }

/* ---- Two-row energetic ticker ---- */
.ticker-row2{
  background:var(--chili);
  color:var(--cream);
}
.ticker-row2 .ticker-track{ animation-direction:reverse; animation-duration:26s; }
.ticker-row2 .ticker-track span::after{ content:'\1F336'; font-size:.8rem; opacity:.85; }

/* ---- Glow hover on cards ---- */
.dish-card, .venue-card, .photo-mi{
  transition:transform .35s ease, border-color .35s ease, box-shadow .4s ease;
}
.dish-card:hover{
  box-shadow:0 20px 48px rgba(214,69,59,.28), 0 0 0 1px rgba(242,169,59,.25);
}
.venue-card:hover{
  box-shadow:0 20px 48px rgba(242,169,59,.22);
}
.photo-mi:hover{
  box-shadow:0 16px 36px rgba(214,69,59,.24);
}

/* ---- Pulsing primary CTA ---- */
.btn-pulse{
  position:relative;
}
.btn-pulse::after{
  content:'';
  position:absolute; inset:0;
  border-radius:999px;
  border:2px solid var(--chili);
  animation:pulse-ring 2.4s cubic-bezier(.2,.6,.3,1) infinite;
}
@media (prefers-reduced-motion: reduce){ .btn-pulse::after{ animation:none; } }

/* ---- Count-up stat emphasis ---- */
.stat b{ font-variant-numeric:tabular-nums; }

/* ---- "Live" badge with pulsing dot ---- */
.live-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--chutney);
}
.live-badge .pulse-dot{
  width:8px; height:8px; border-radius:50%; background:var(--chutney);
  position:relative;
}
.live-badge .pulse-dot::after{
  content:''; position:absolute; inset:-4px; border-radius:50%;
  border:1.5px solid var(--chutney);
  animation:pulse-ring 1.8s cubic-bezier(.2,.6,.3,1) infinite;
}

/* ================================================================
   ORDERING CART
   ================================================================ */

/* ---- Cart floating action button (bottom-left, mirrors WhatsApp fab) ---- */
.cart-fab{
  position:fixed;
  left:22px; bottom:22px;
  z-index:150;
  width:60px; height:60px;
  border-radius:50%;
  background:var(--chili);
  border:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(214,69,59,.4);
  cursor:pointer;
  transition:transform .25s ease;
}
.cart-fab:hover{ transform:translateY(-2px); }
.cart-fab svg{ width:24px; height:24px; stroke:var(--cream); fill:none; stroke-width:1.8; }
.cart-fab-badge{
  position:absolute; top:-4px; right:-4px;
  min-width:22px; height:22px; padding:0 5px;
  border-radius:999px;
  background:var(--marigold); color:var(--ink);
  font-family:var(--display); font-size:.85rem;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--ink);
}
.cart-fab.pulse-once{ animation: cart-pop .4s ease; }
@keyframes cart-pop{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.18); }
  100%{ transform:scale(1); }
}
@media (prefers-reduced-motion: reduce){ .cart-fab.pulse-once{ animation:none; } }

/* ---- Drawer ---- */
.cart-drawer-backdrop{
  position:fixed; inset:0; z-index:190;
  background:rgba(10,8,6,.6);
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.cart-drawer-backdrop.is-open{ opacity:1; pointer-events:auto; }

.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:191;
  width:min(420px, 92vw);
  background:var(--ink-2);
  border-left:1px solid var(--line-strong);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.cart-drawer.is-open{ transform:translateX(0); }

.cart-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 24px;
  border-bottom:1px solid var(--line);
}
.cart-drawer-head h3{
  font-size:1.5rem; text-transform:uppercase;
}
.cart-drawer-close{
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line-strong);
  background:transparent; color:var(--cream);
  font-size:1.3rem; line-height:1;
  cursor:pointer;
}

.cart-drawer-body{
  flex:1; overflow-y:auto;
  padding:10px 24px;
}
.cart-empty{ color:var(--cream-dim); font-size:.95rem; padding:30px 0; }

.cart-row{
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:14px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
}
.cart-row-info{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.cart-row-name{ font-size:.94rem; font-weight:600; color:var(--cream); }
.cart-row-price{ font-family:var(--display); color:var(--marigold); font-size:.95rem; }
.cart-row-qty{
  display:flex; align-items:center; gap:10px;
  background:var(--panel);
  border:1px solid var(--line-strong);
  border-radius:999px;
  padding:4px 10px;
}
.cart-row-qty button{
  width:22px; height:22px; border-radius:50%;
  border:none; background:transparent; color:var(--cream);
  font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.cart-row-qty button:hover{ color:var(--marigold); }
.cart-row-qty span{ min-width:14px; text-align:center; font-size:.9rem; }
.cart-row-remove{
  background:none; border:none; color:var(--cream-dim);
  font-size:1.2rem; cursor:pointer; line-height:1;
}
.cart-row-remove:hover{ color:var(--chili); }

.cart-drawer-footer{
  padding:20px 24px 26px;
  border-top:1px solid var(--line);
}
.cart-unpriced-note{
  font-size:.78rem; color:var(--cream-dim); margin:0 0 12px;
}
.cart-total-row{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:16px;
}
.cart-total-row span:first-child{ color:var(--cream-dim); font-size:.9rem; }
.cart-total-value{ font-family:var(--display); font-size:1.7rem; color:var(--marigold); }
.cart-checkout-btn{ width:100%; }
.cart-clear-btn{
  width:100%; margin-top:10px;
  background:none; border:none; color:var(--cream-dim);
  font-size:.82rem; text-decoration:underline; cursor:pointer;
  padding:6px;
}
.cart-clear-btn:hover{ color:var(--chili); }

/* ---- "+" add-to-cart button, used inline everywhere ---- */
.add-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:4px;
  width:30px; height:30px; border-radius:50%;
  background:var(--panel-2);
  border:1px solid var(--line-strong);
  color:var(--cream);
  font-size:1.1rem; line-height:1;
  cursor:pointer;
  flex:0 0 auto;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.add-btn:hover{ border-color:var(--marigold); color:var(--marigold); transform:scale(1.08); }
.add-btn.in-cart{ background:var(--chili); border-color:var(--chili); color:var(--cream); }
.add-btn .add-btn-count{
  font-family:var(--display); font-size:.8rem;
}

/* Wide "Add to Order" pill, used on homepage popular-picks cards */
.add-pill{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%;
  padding:10px 16px;
  margin-top:14px;
  border-radius:999px;
  background:var(--panel-2);
  border:1px solid var(--line-strong);
  color:var(--cream);
  font-family:var(--body); font-weight:700; font-size:.85rem;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.add-pill:hover{ border-color:var(--marigold); color:var(--marigold); }
.add-pill.in-cart{ background:var(--chili); border-color:var(--chili); color:var(--cream); }

/* Variant chips, for menu items priced Mini/Jumbo style */
.variant-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.variant-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px;
  border-radius:999px;
  background:var(--panel-2);
  border:1px solid var(--line-strong);
  color:var(--cream-dim);
  font-size:.78rem; font-weight:600;
  cursor:pointer;
}
.variant-chip:hover{ border-color:var(--marigold); color:var(--cream); }
.variant-chip.in-cart{ background:var(--chili); border-color:var(--chili); color:var(--cream); }

@media (max-width: 480px){
  .cart-drawer{ width:100vw; }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 980px){
  .about-grid, .spotlight-grid, .visit-grid{ grid-template-columns:1fr; }
  .spotlight-grid{ display:flex; flex-direction:column-reverse; }
  .menu-grid{ grid-template-columns:repeat(2,1fr); }
  .venue-grid{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; }
  .gallery-item.wide{ grid-column:span 2; }
  .gallery-item.tall{ grid-row:span 1; }
  .spotlight-media .frame-small{ display:none; }
}

@media (max-width: 760px){
  .nav-links{
    position:fixed; top:0; right:0; height:100svh; width:min(78vw, 320px);
    background:var(--ink-2);
    flex-direction:column; align-items:flex-start;
    padding:110px 30px 40px;
    gap:26px;
    transform:translateX(100%);
    transition:transform .35s ease;
    border-left:1px solid var(--line);
  }
  .nav-links.is-open{ transform:translateX(0); }
  .nav-links a{ font-size:1.1rem; }
  .nav-toggle{ display:block; }
  .nav-cta .btn-ghost{ display:none; }
  .hero-content{ padding:140px 0 70px; }
  .hero-actions .btn{ width:100%; }
  .section-pad{ padding:76px 0; }
  .menu-grid{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:160px; }
  .quote-strip .wrap{ flex-direction:column; align-items:flex-start; }
  .footer-top{ flex-direction:column; gap:34px; }
  .footer-cols{ gap:40px; }
  .stat-row{ gap:28px; }
  .hero-scroll{ display:none; }
}

.mi-line .add-btn{ width:26px; height:26px; font-size:1rem; }
.mi-line .variant-chips{ flex:0 0 auto; }

@media (max-width: 480px){
  .gallery-grid{ grid-template-columns:1fr 1fr; }
  .dish-body{ padding:18px 18px 22px; }
}