/* ==========================================================================
   Tasty Tingzzz - Baha Connect
   Display: Anton   Body: Mulish
   ========================================================================== */

:root{
  /* ---- colour ---- */
  --ink-900:hsl(24 9% 4%);
  --ink-850:hsl(24 8% 6%);
  --ink-800:hsl(24 7% 8%);
  --ink-700:hsl(24 6% 12%);
  --ink-600:hsl(24 6% 16%);
  --ink-500:hsl(24 5% 23%);
  --ink-400:hsl(24 5% 32%);

  --paper:hsl(36 30% 97%);
  --text-1:hsl(36 30% 97%);
  --text-2:hsl(32 10% 74%);
  --text-3:hsl(30 7% 54%);

  --red:hsl(350 82% 54%);
  --red-hi:hsl(350 88% 62%);
  --red-lo:hsl(350 76% 43%);
  --green:hsl(146 70% 41%);
  --green-hi:hsl(146 66% 49%);
  --green-lo:hsl(146 74% 31%);
  --gold:hsl(43 96% 56%);

  /* ---- type ---- */
  --font-display:'Anton', 'Arial Narrow', sans-serif;
  --font-body:'Mulish', 'Helvetica Neue', sans-serif;

  --text-xs:.75rem;   --text-sm:.875rem;  --text-base:1rem;
  --text-lg:1.125rem; --text-xl:1.25rem;  --text-2xl:1.5rem;
  --text-3xl:2rem;    --text-4xl:2.75rem; --text-5xl:3.75rem;
  --text-6xl:5rem;

  --leading-none:1;    --leading-tight:1.15; --leading-snug:1.35;
  --leading-normal:1.6;

  --w-reg:400; --w-med:600; --w-bold:700; --w-black:900;
  --track-tight:-.025em; --track-wide:.06em; --track-widest:.14em;

  /* ---- space (4pt grid) ---- */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --sec-y:96px;

  /* ---- radius ---- */
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-full:999px;

  /* ---- shadow (5 levels) ---- */
  --sh-1:0 1px 2px hsl(24 40% 2% / .5);
  --sh-2:0 3px 8px hsl(24 40% 2% / .55);
  --sh-3:0 10px 24px hsl(24 40% 2% / .6);
  --sh-4:0 20px 48px hsl(24 40% 2% / .65);
  --sh-5:0 32px 80px hsl(24 40% 2% / .7);

  --ring:0 0 0 3px hsl(350 82% 54% / .45);
}

/* ---- reset ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:132px}
body{
  margin:0;
  background:var(--ink-900);
  color:var(--text-1);
  font-family:var(--font-body);
  font-size:var(--text-base);
  font-weight:var(--w-reg);
  line-height:var(--leading-normal);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:var(--w-reg);
  letter-spacing:var(--track-tight);line-height:var(--leading-tight);text-transform:uppercase}
p{margin:0}
address{font-style:normal}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--red);
  color:#fff;padding:var(--s-3) var(--s-5);border-radius:0 0 var(--r-sm) 0;font-weight:var(--w-bold)}
.skip:focus{left:0}

.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--s-5)}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--w-black);
  letter-spacing:var(--track-wide);text-transform:uppercase;line-height:var(--leading-tight);
  height:48px;padding-inline:var(--s-6);border-radius:var(--r-full);
  border:2px solid transparent;white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease,
             border-color .18s ease, color .18s ease;
}
.btn svg{width:18px;height:18px;fill:currentColor;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.btn-sm{height:40px;padding-inline:var(--s-5);font-size:var(--text-xs)}
.btn-lg{height:58px;padding-inline:var(--s-7);font-size:var(--text-base)}
.btn-block{width:100%}

.btn-wa{background:var(--green);color:#fff;box-shadow:var(--sh-2)}
.btn-wa:hover{background:var(--green-hi);box-shadow:var(--sh-3)}
.btn-wa:active{box-shadow:var(--sh-1)}

.btn-primary{background:var(--red);color:#fff;box-shadow:var(--sh-2)}
.btn-primary:hover{background:var(--red-hi);box-shadow:var(--sh-3)}

.btn-call{background:var(--red);color:#fff;box-shadow:var(--sh-2)}
.btn-call:hover{background:var(--red-hi);box-shadow:var(--sh-3)}

.btn-outline{border-color:var(--ink-400);color:var(--text-1);background:hsl(24 8% 8% / .5)}
.btn-outline:hover{border-color:var(--gold);color:var(--gold);background:hsl(43 96% 56% / .08)}

.btn-ghost{border-color:hsl(36 30% 97% / .28);color:var(--text-1)}
.btn-ghost:hover{border-color:var(--text-1);background:hsl(36 30% 97% / .08)}

.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-head{
  position:sticky;top:0;z-index:90;
  background:hsl(24 9% 4% / .72);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid hsl(36 30% 97% / .08);
  transition:background-color .3s ease, box-shadow .3s ease;
}
.site-head.stuck{background:hsl(24 9% 4% / .93);box-shadow:var(--sh-3)}
.head-in{display:flex;align-items:center;gap:var(--s-5);height:76px}

.brand{display:flex;align-items:center;gap:var(--s-3);margin-right:auto}
.brand img{width:52px;height:52px;border-radius:var(--r-full);
  box-shadow:0 0 0 2px hsl(146 70% 41% / .5);transition:transform .3s ease}
.brand:hover img{transform:rotate(-6deg) scale(1.05)}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-txt strong{font-family:var(--font-display);font-size:var(--text-xl);
  letter-spacing:var(--track-tight);text-transform:uppercase;font-weight:var(--w-reg)}
.brand-txt em{font-style:normal;font-size:10px;font-weight:var(--w-bold);
  letter-spacing:var(--track-widest);text-transform:uppercase;color:var(--gold);margin-top:5px}

.nav-desk ul{display:flex;gap:var(--s-6)}
.nav-desk a{
  position:relative;display:block;padding:var(--s-2) 0;
  font-size:var(--text-sm);font-weight:var(--w-bold);
  letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--text-2);
  transition:color .2s ease;
}
.nav-desk a::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--red);transition:width .25s ease}
.nav-desk a:hover{color:var(--text-1)}
.nav-desk a:hover::after{width:100%}
.nav-desk a.active{color:var(--gold)}
.nav-desk a.active::after{width:100%;background:var(--gold)}

.burger{display:none;width:46px;height:46px;border-radius:var(--r-sm);
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
  border:1px solid hsl(36 30% 97% / .18)}
.burger span{display:block;width:20px;height:2px;background:var(--text-1);
  border-radius:2px;transition:transform .28s ease, opacity .2s ease}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mob-nav{
  position:fixed;inset:76px 0 0;z-index:88;
  background:hsl(24 9% 4% / .98);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  padding:var(--s-7) var(--s-5) var(--s-9);
  transform:translateY(-12px);opacity:0;pointer-events:none;
  transition:opacity .28s ease, transform .28s ease;
  overflow-y:auto;
}
.mob-nav.open{opacity:1;transform:translateY(0);pointer-events:auto}
.mob-nav ul{display:flex;flex-direction:column;gap:var(--s-1)}
.mob-nav a{display:block;padding:var(--s-4) var(--s-2);font-family:var(--font-display);
  font-size:var(--text-3xl);text-transform:uppercase;letter-spacing:var(--track-tight);
  color:var(--text-2);border-bottom:1px solid hsl(36 30% 97% / .07);transition:color .2s ease, padding-left .2s ease}
.mob-nav a:hover,.mob-nav a.active{color:var(--gold);padding-left:var(--s-4)}
.mob-cta{display:flex;flex-direction:column;gap:var(--s-3);margin-top:var(--s-7)}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;min-height:min(94vh,860px);display:flex;align-items:flex-end;
  padding-block:var(--s-10) var(--s-8);overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-media img{width:100%;height:118%;object-fit:cover;object-position:50% 42%;will-change:transform}
.hero-veil{position:absolute;inset:0;
  background:
    linear-gradient(to top, var(--ink-900) 2%, hsl(24 9% 4% / .82) 34%, hsl(24 9% 4% / .35) 72%, hsl(24 9% 4% / .6) 100%),
    linear-gradient(105deg, hsl(24 9% 4% / .85) 0%, hsl(24 9% 4% / .25) 62%);
}
.hero-glow{position:absolute;z-index:-1;inset:auto -20% -40% -20%;height:70%;
  background:radial-gradient(60% 60% at 22% 100%, hsl(350 82% 54% / .38), transparent 70%),
             radial-gradient(52% 52% at 78% 96%, hsl(146 70% 41% / .3), transparent 70%);
  background-size:200% 200%;animation:glowShift 14s ease-in-out infinite;filter:blur(10px)}
@keyframes glowShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.hero-in{position:relative;max-width:820px}
.eyebrow{font-size:var(--text-xs);font-weight:var(--w-black);letter-spacing:var(--track-widest);
  text-transform:uppercase;color:var(--gold);margin-bottom:var(--s-4)}
.hero-title{font-size:clamp(3.25rem,12vw,var(--text-6xl));line-height:.92;
  letter-spacing:-.03em;text-shadow:0 6px 40px hsl(24 40% 2% / .7)}
.hero-title .stroke{color:transparent;-webkit-text-stroke:2px var(--gold);
  paint-order:stroke fill}
.hero-sub{margin-top:var(--s-5);max-width:52ch;font-size:var(--text-lg);
  line-height:var(--leading-snug);color:var(--text-2);font-weight:var(--w-med)}
.hero-btns{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}
.hero-meta{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6);margin-top:var(--s-6);
  padding-top:var(--s-5);border-top:1px solid hsl(36 30% 97% / .14);
  font-size:var(--text-sm);color:var(--text-2)}
.hero-meta b{color:var(--text-1);font-weight:var(--w-black);text-transform:uppercase;
  letter-spacing:var(--track-wide);font-size:var(--text-xs);margin-right:var(--s-1)}
.hero-meta a{color:var(--gold);font-weight:var(--w-bold);transition:color .2s ease}
.hero-meta a:hover{color:var(--text-1)}

/* ==========================================================================
   TICKER
   ========================================================================== */
.ticker{background:var(--red);border-block:2px solid var(--ink-900);overflow:hidden;
  padding-block:var(--s-3)}
.ticker-run{display:flex;align-items:center;gap:var(--s-5);width:max-content;
  animation:tick 42s linear infinite}
.ticker-run span{font-family:var(--font-display);font-size:var(--text-lg);
  text-transform:uppercase;letter-spacing:.02em;color:#fff;white-space:nowrap}
.ticker-run i{color:var(--gold);font-style:normal;font-size:var(--text-sm)}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ==========================================================================
   SECTION SHELL
   ========================================================================== */
.sec{padding-block:var(--sec-y);position:relative}
.sec-head{max-width:64ch;margin-bottom:var(--s-8)}
.kicker{font-size:var(--text-xs);font-weight:var(--w-black);letter-spacing:var(--track-widest);
  text-transform:uppercase;color:var(--red-hi);margin-bottom:var(--s-3)}
.sec-head h2{font-size:clamp(2rem,5.4vw,var(--text-4xl))}
.sec-lede{margin-top:var(--s-4);max-width:60ch;color:var(--text-2);font-size:var(--text-lg);
  line-height:var(--leading-snug)}
.sec-foot{margin-top:var(--s-7);text-align:center}

.sec-why{background:var(--ink-850)}
.sec-feat{background:var(--ink-900)}
.sec-combo{background:var(--ink-850)}
.sec-promo{background:var(--ink-900)}
.sec-quotes{background:var(--ink-850)}

/* ---- why grid ---- */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:hsl(36 30% 97% / .1);border:1px solid hsl(36 30% 97% / .1);border-radius:var(--r-lg);
  overflow:hidden}
.why-grid li{background:var(--ink-850);padding:var(--s-6);transition:background-color .25s ease}
.why-grid li:hover{background:var(--ink-700)}
.why-num{display:block;font-family:var(--font-display);font-size:var(--text-2xl);
  color:var(--gold);margin-bottom:var(--s-3)}
.why-grid h3{font-size:var(--text-xl);margin-bottom:var(--s-2)}
.why-grid p{color:var(--text-3);font-size:var(--text-sm);line-height:var(--leading-normal)}

/* ---- food cards ---- */
.food-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-5)}
.food-card{background:var(--ink-700);border:1px solid hsl(36 30% 97% / .09);
  border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--sh-2);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease}
.food-card:hover{transform:translateY(-8px);box-shadow:var(--sh-4);border-color:hsl(43 96% 56% / .45)}
.food-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink-600)}
.food-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.food-card:hover .food-img img{transform:scale(1.07)}
.food-img::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top, hsl(24 40% 2% / .72), transparent 55%)}
.price-chip{position:absolute;z-index:2;left:var(--s-4);bottom:var(--s-4);
  background:var(--gold);color:var(--ink-900);font-family:var(--font-display);
  font-size:var(--text-base);padding:var(--s-1) var(--s-3);border-radius:var(--r-full);
  box-shadow:var(--sh-2)}
.food-body{padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-2);flex:1}
.food-body h3{font-size:var(--text-xl)}
.food-body p{color:var(--text-3);font-size:var(--text-sm);flex:1}
.link-order{display:inline-flex;align-items:center;gap:var(--s-2);margin-top:var(--s-2);
  font-size:var(--text-xs);font-weight:var(--w-black);letter-spacing:var(--track-wide);
  text-transform:uppercase;color:var(--green-hi);transition:gap .2s ease, color .2s ease}
.link-order svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.link-order:hover{gap:var(--s-3);color:var(--gold)}

/* ---- stats ---- */
.sec-stats{
  background-image:
    linear-gradient(120deg, hsl(24 9% 4% / .93), hsl(350 82% 24% / .78)),
    url('img/loaded-fries-wings.jpg');
  border-block:1px solid hsl(36 30% 97% / .09);padding-block:var(--s-9)}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-5);text-align:center}
.stat{padding:var(--s-4)}
.stat-num,.stat-suf{font-family:var(--font-display);font-size:clamp(2.25rem,6vw,var(--text-4xl));
  color:var(--gold);line-height:1}
.stat-lbl{display:block;margin-top:var(--s-3);font-size:var(--text-xs);font-weight:var(--w-bold);
  letter-spacing:var(--track-widest);text-transform:uppercase;color:var(--text-3)}

/* ---- combos ---- */
.combo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.combo-card{position:relative;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
  min-height:340px;display:flex;align-items:flex-end;box-shadow:var(--sh-2);
  border:1px solid hsl(36 30% 97% / .09);
  transition:transform .28s ease, box-shadow .28s ease}
.combo-card:hover{transform:translateY(-8px);box-shadow:var(--sh-4)}
.combo-card > img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;transition:transform .6s ease}
.combo-card:hover > img{transform:scale(1.08)}
.combo-card::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top, hsl(24 40% 2% / .95) 12%, hsl(24 40% 2% / .55) 55%, hsl(24 40% 2% / .12))}
.combo-body{padding:var(--s-5);width:100%;display:flex;flex-direction:column;gap:var(--s-3)}
.combo-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3)}
.combo-top h3{font-size:var(--text-2xl)}
.combo-price{font-family:var(--font-display);font-size:var(--text-xl);color:var(--gold);flex:none}
.combo-body p{color:var(--text-2);font-size:var(--text-sm)}
.combo-body .btn{align-self:flex-start}

/* ---- promo ---- */
.promo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
.promo-grid li{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-5);
  background:var(--ink-800);border-left:3px solid var(--green);border-radius:var(--r-sm);
  transition:transform .22s ease, border-color .22s ease, background-color .22s ease}
.promo-grid li:hover{transform:translateX(4px);border-color:var(--gold);background:var(--ink-700)}
.promo-grid b{font-family:var(--font-display);font-size:var(--text-lg);text-transform:uppercase;
  letter-spacing:var(--track-tight);font-weight:var(--w-reg)}
.promo-grid span{color:var(--text-3);font-size:var(--text-sm)}

/* ---- quotes ---- */
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.quote{margin:0;padding:var(--s-6);background:var(--ink-700);border-radius:var(--r-lg);
  border:1px solid hsl(36 30% 97% / .09);display:flex;flex-direction:column;gap:var(--s-4);
  transition:transform .25s ease, box-shadow .25s ease}
.quote:hover{transform:translateY(-6px);box-shadow:var(--sh-3)}
.stars{color:var(--gold);letter-spacing:.16em;font-size:var(--text-lg)}
.quote blockquote{margin:0;font-family:var(--font-display);font-size:var(--text-xl);
  line-height:var(--leading-tight);letter-spacing:var(--track-tight);text-transform:uppercase}
.quote figcaption{font-size:var(--text-xs);font-weight:var(--w-bold);
  letter-spacing:var(--track-widest);text-transform:uppercase;color:var(--text-3)}

/* ---- cta band ---- */
.cta-band{background:linear-gradient(135deg,var(--red-lo),var(--red) 55%,hsl(12 84% 50%));
  padding-block:var(--s-9)}
.cta-in{text-align:center;max-width:64ch;margin-inline:auto}
.cta-in h2{font-size:clamp(2.25rem,6vw,var(--text-5xl));color:#fff}
.cta-in p{margin-top:var(--s-4);color:hsl(36 30% 97% / .92);font-size:var(--text-lg);
  font-weight:var(--w-med)}
.cta-in .hero-btns{justify-content:center}
.cta-band .btn-outline{border-color:hsl(36 30% 97% / .6);background:transparent;color:#fff}
.cta-band .btn-outline:hover{background:#fff;color:var(--red);border-color:#fff}
.cta-band .btn-wa{background:var(--ink-900);color:#fff}
.cta-band .btn-wa:hover{background:var(--green)}

/* ==========================================================================
   PAGE HERO (inner pages)
   ========================================================================== */
.page-hero{padding-block:var(--s-9) var(--s-8);
  background:
    radial-gradient(70% 130% at 12% 0%, hsl(350 82% 54% / .22), transparent 62%),
    radial-gradient(60% 120% at 92% 8%, hsl(146 70% 41% / .18), transparent 60%),
    var(--ink-850);
  border-bottom:1px solid hsl(36 30% 97% / .09)}
.page-hero h1{font-size:clamp(2.75rem,9vw,var(--text-5xl))}
.page-lede{margin-top:var(--s-4);max-width:62ch;color:var(--text-2);font-size:var(--text-lg);
  line-height:var(--leading-snug)}
.page-hero .hero-btns{margin-top:var(--s-6)}

/* ==========================================================================
   MENU PAGE
   ========================================================================== */
.tabbar{position:sticky;top:76px;z-index:80;background:hsl(24 7% 8% / .93);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid hsl(36 30% 97% / .1)}
.tabbar-in{display:flex;gap:var(--s-2);overflow-x:auto;padding-block:var(--s-3);
  scrollbar-width:none}
.tabbar-in::-webkit-scrollbar{display:none}
.tab{flex:none;padding:var(--s-2) var(--s-4);border-radius:var(--r-full);
  background:var(--ink-700);border:1px solid hsl(36 30% 97% / .1);
  font-size:var(--text-xs);font-weight:var(--w-black);letter-spacing:var(--track-wide);
  text-transform:uppercase;color:var(--text-2);white-space:nowrap;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease}
.tab:hover{background:var(--red);color:#fff;border-color:var(--red)}

.m-wrap{display:grid;gap:var(--s-7)}
.m-block{background:var(--ink-800);border:1px solid hsl(36 30% 97% / .09);
  border-radius:var(--r-lg);padding:var(--s-6);scroll-margin-top:150px}
.m-head{padding-bottom:var(--s-4);margin-bottom:var(--s-4);
  border-bottom:2px solid hsl(43 96% 56% / .35)}
.m-head h2{font-size:var(--text-3xl);color:var(--gold)}
.m-head p{margin-top:var(--s-2);color:var(--text-3);font-size:var(--text-sm)}
.m-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-1) var(--s-7)}
.m-item{display:flex;align-items:baseline;gap:var(--s-3);padding:var(--s-3) var(--s-2);
  border-radius:var(--r-sm);transition:background-color .2s ease, padding-left .2s ease}
.m-item:hover{background:hsl(36 30% 97% / .05);padding-left:var(--s-4)}
.m-name{font-weight:var(--w-bold);font-size:var(--text-base);flex:none;max-width:62%}
.m-dots{flex:1;height:1px;border-bottom:2px dotted hsl(36 30% 97% / .24);transform:translateY(-4px)}
.m-price{font-family:var(--font-display);font-size:var(--text-lg);color:var(--gold);flex:none}
.m-item:hover .m-price{color:var(--green-hi)}

.sauce-box,.cater-box{padding:var(--s-6);border-radius:var(--r-lg)}
.sauce-box{background:var(--ink-700);border:1px solid hsl(36 30% 97% / .09)}
.sauce-box h2,.cater-box h2{font-size:var(--text-2xl);margin-bottom:var(--s-3)}
.sauce-box p,.cater-box p{color:var(--text-2);font-size:var(--text-sm);max-width:60ch}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-4)}
.chips li{padding:var(--s-2) var(--s-4);border-radius:var(--r-full);background:var(--ink-600);
  border:1px solid hsl(43 96% 56% / .3);font-size:var(--text-xs);font-weight:var(--w-bold);
  letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--gold)}
.cater-box{background:linear-gradient(130deg,var(--green-lo),var(--ink-700) 70%);
  border:1px solid hsl(146 70% 41% / .4)}
.cater-box .hero-btns{margin-top:var(--s-5)}

/* ==========================================================================
   GALLERY
   ========================================================================== */
.masonry{columns:3;column-gap:var(--s-4)}
.tile{display:block;width:100%;padding:0;margin:0 0 var(--s-4);break-inside:avoid;
  position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--ink-700);
  border:1px solid hsl(36 30% 97% / .09);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease}
.tile img{width:100%;transition:transform .55s ease}
.tile:hover{transform:translateY(-5px);box-shadow:var(--sh-4);border-color:hsl(43 96% 56% / .5)}
.tile:hover img{transform:scale(1.09)}
.tile-cap{position:absolute;inset:auto 0 0 0;padding:var(--s-6) var(--s-4) var(--s-4);
  background:linear-gradient(to top,hsl(24 40% 2% / .92),transparent);
  font-size:var(--text-sm);font-weight:var(--w-bold);text-align:left;color:var(--text-1);
  opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .3s ease}
.tile:hover .tile-cap,.tile:focus-visible .tile-cap{opacity:1;transform:translateY(0)}

.lb{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  background:hsl(24 40% 2% / .94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:var(--s-5)}
.lb[hidden]{display:none}
.lb-fig{margin:0;max-width:min(1100px,92vw);max-height:88vh;display:flex;flex-direction:column;
  gap:var(--s-3);align-items:center}
.lb-fig img{max-height:78vh;width:auto;border-radius:var(--r-md);box-shadow:var(--sh-5)}
.lb-fig figcaption{font-size:var(--text-sm);color:var(--text-2);text-align:center}
.lb-close,.lb-prev,.lb-next{position:absolute;display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:var(--r-full);background:hsl(36 30% 97% / .1);
  border:1px solid hsl(36 30% 97% / .22);color:var(--text-1);font-size:var(--text-2xl);
  line-height:1;transition:background-color .2s ease, transform .2s ease}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:var(--red);transform:scale(1.08)}
.lb-close{top:var(--s-5);right:var(--s-5)}
.lb-prev{left:var(--s-4)}
.lb-next{right:var(--s-4)}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.sec-story{background:var(--ink-850)}
.story-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s-8);align-items:center}
.story-copy h2{font-size:clamp(1.85rem,4.4vw,var(--text-4xl));margin-block:var(--s-3) var(--s-5)}
.story-copy p{color:var(--text-2);margin-bottom:var(--s-4);max-width:60ch}
.story-copy .hero-btns{margin-top:var(--s-6)}
.story-media{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-4)}
.story-media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.story-badge{position:absolute;left:var(--s-5);bottom:var(--s-5);padding:var(--s-4) var(--s-5);
  border-radius:var(--r-md);background:hsl(24 9% 4% / .82);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);border:1px solid hsl(43 96% 56% / .4);
  display:flex;flex-direction:column;gap:var(--s-1)}
.story-badge b{font-family:var(--font-display);font-size:var(--text-lg);color:var(--gold);
  text-transform:uppercase;letter-spacing:var(--track-tight);font-weight:var(--w-reg)}
.story-badge span{font-size:var(--text-xs);letter-spacing:var(--track-wide);
  text-transform:uppercase;color:var(--text-3);font-weight:var(--w-bold)}

.sec-vals{background:var(--ink-900)}
.val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
.val-card{padding:var(--s-6);background:var(--ink-800);border-radius:var(--r-lg);
  border:1px solid hsl(36 30% 97% / .09);border-top:3px solid var(--red);
  transition:transform .25s ease, box-shadow .25s ease, border-top-color .25s ease}
.val-card:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-top-color:var(--gold)}
.val-card h3{font-size:var(--text-xl);margin-bottom:var(--s-3)}
.val-card p{color:var(--text-3);font-size:var(--text-sm)}

.sec-visit{
  background-image:
    linear-gradient(140deg, hsl(24 9% 4% / .94), hsl(146 70% 16% / .8)),
    url('img/bbq-wings-shrimp.jpg');
  border-block:1px solid hsl(36 30% 97% / .09)}
.visit-in{max-width:70ch}
.visit-in h2{font-size:clamp(2rem,5.4vw,var(--text-4xl));margin-bottom:var(--s-6)}
.visit-list{display:grid;gap:var(--s-4)}
.visit-list li{display:grid;grid-template-columns:110px 1fr;gap:var(--s-4);
  padding-bottom:var(--s-4);border-bottom:1px solid hsl(36 30% 97% / .1)}
.visit-list b{font-family:var(--font-display);font-size:var(--text-base);color:var(--gold);
  text-transform:uppercase;letter-spacing:var(--track-wide);font-weight:var(--w-reg)}
.visit-list span{color:var(--text-2)}
.visit-in .hero-btns{margin-top:var(--s-6)}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.sec-contact{background:var(--ink-900)}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--s-8);align-items:start}
.c-actions{display:grid;gap:var(--s-3);margin-bottom:var(--s-7)}
.c-list{display:grid;gap:var(--s-4)}
.c-list li{display:grid;grid-template-columns:110px 1fr;gap:var(--s-4);
  padding-bottom:var(--s-4);border-bottom:1px solid hsl(36 30% 97% / .1)}
.c-lbl{font-size:var(--text-xs);font-weight:var(--w-black);letter-spacing:var(--track-widest);
  text-transform:uppercase;color:var(--text-3);padding-top:3px}
.c-val{color:var(--text-1);font-weight:var(--w-med);line-height:var(--leading-snug)}
.c-val em{font-style:normal;color:var(--red-hi);font-weight:var(--w-bold)}
a.c-val{color:var(--gold);transition:color .2s ease}
a.c-val:hover{color:var(--green-hi)}

.contact-form{background:var(--ink-800);border:1px solid hsl(36 30% 97% / .09);
  border-radius:var(--r-lg);padding:var(--s-6)}
.contact-form h2{font-size:var(--text-2xl)}
.form-note{margin-top:var(--s-2);margin-bottom:var(--s-6);color:var(--text-3);font-size:var(--text-sm)}
.field{margin-bottom:var(--s-5)}
.field label{display:block;margin-bottom:var(--s-2);font-size:var(--text-xs);
  font-weight:var(--w-black);letter-spacing:var(--track-widest);text-transform:uppercase;
  color:var(--text-2)}
.field input,.field textarea{
  width:100%;padding:var(--s-3) var(--s-4);background:var(--ink-900);
  border:1px solid hsl(36 30% 97% / .16);border-radius:var(--r-sm);
  color:var(--text-1);font-family:var(--font-body);font-size:var(--text-base);
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease}
.field textarea{resize:vertical;min-height:130px}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.field input:hover,.field textarea:hover{border-color:hsl(36 30% 97% / .3)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--red);
  box-shadow:var(--ring);background:var(--ink-850)}
.field.bad input,.field.bad textarea{border-color:var(--red-hi)}
.err{display:block;margin-top:var(--s-2);font-size:var(--text-xs);font-weight:var(--w-bold);
  color:var(--red-hi);min-height:14px}
.form-status{margin-top:var(--s-4);font-size:var(--text-sm);font-weight:var(--w-bold);
  text-align:center;min-height:20px}
.form-status.ok{color:var(--green-hi)}
.form-status.bad{color:var(--red-hi)}

.sec-map{background:var(--ink-850)}
.map-frame{position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid hsl(36 30% 97% / .12);box-shadow:var(--sh-3);aspect-ratio:16/9}
.map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  filter:grayscale(.35) contrast(1.05)}

/* ==========================================================================
   FLOATING BUTTONS
   ========================================================================== */
.float-stack{position:fixed;right:var(--s-4);bottom:var(--s-4);z-index:95;
  display:flex;flex-direction:column;gap:var(--s-3)}
.float-btn{display:flex;align-items:center;justify-content:center;width:58px;height:58px;
  border-radius:var(--r-full);box-shadow:var(--sh-4);
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease}
.float-btn svg{width:28px;height:28px;fill:#fff}
.float-wa{background:var(--green)}
.float-call{background:var(--red)}
.float-btn:hover{transform:scale(1.1) translateY(-2px);box-shadow:var(--sh-5);filter:brightness(1.1)}
.float-btn:active{transform:scale(.96)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-foot{background:var(--ink-850);border-top:1px solid hsl(36 30% 97% / .1);
  padding-top:var(--s-9)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1.1fr 1.2fr;gap:var(--s-7);
  padding-bottom:var(--s-8)}
.foot-brand img{border-radius:var(--r-full);box-shadow:0 0 0 2px hsl(146 70% 41% / .5)}
.foot-tag{margin-top:var(--s-4);color:var(--text-3);font-size:var(--text-sm);max-width:34ch}
.foot-social{display:flex;gap:var(--s-3);margin-top:var(--s-5)}
.foot-social a{display:flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:var(--r-full);background:var(--ink-700);border:1px solid hsl(36 30% 97% / .12);
  transition:background-color .22s ease, transform .22s ease}
.foot-social svg{width:20px;height:20px;fill:var(--text-2);transition:fill .22s ease}
.foot-social a:hover{background:var(--green);transform:translateY(-3px)}
.foot-social a:hover svg{fill:#fff}
.foot-col h3{font-size:var(--text-base);color:var(--gold);margin-bottom:var(--s-4);
  letter-spacing:var(--track-wide)}
.foot-links li{margin-bottom:var(--s-3)}
.foot-links a{color:var(--text-3);font-size:var(--text-sm);transition:color .2s ease, padding-left .2s ease}
.foot-links a:hover{color:var(--text-1);padding-left:var(--s-2)}
.foot-hours li{display:flex;justify-content:space-between;gap:var(--s-3);
  padding-block:var(--s-2);border-bottom:1px solid hsl(36 30% 97% / .08);font-size:var(--text-sm)}
.foot-hours span{color:var(--text-3)}
.foot-hours b{color:var(--text-1);font-weight:var(--w-bold)}
.foot-note{margin-top:var(--s-4);font-size:var(--text-xs);color:var(--text-3);
  letter-spacing:var(--track-wide);text-transform:uppercase;font-weight:var(--w-bold)}
.foot-note a{color:var(--gold)}
.site-foot address{color:var(--text-3);font-size:var(--text-sm);line-height:var(--leading-normal)}
.site-foot address a{color:var(--text-2);transition:color .2s ease}
.site-foot address a:hover{color:var(--gold)}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-3);
  padding-block:var(--s-5);border-top:1px solid hsl(36 30% 97% / .1);
  font-size:var(--text-xs);color:var(--text-3);letter-spacing:var(--track-wide)}
.foot-base a{color:var(--text-2);transition:color .2s ease}
.foot-base a:hover{color:var(--gold)}

/* ==========================================================================
   MOTION
   ========================================================================== */
.reveal,.reveal-left,.reveal-right{opacity:0;transition:opacity .65s ease, transform .65s ease}
.reveal{transform:translateY(30px)}
.reveal-left{transform:translateX(-38px)}
.reveal-right{transform:translateX(38px)}
.reveal.vis,.reveal-left.vis,.reveal-right.vis{opacity:1;transform:none}
.reveal-group > .reveal:nth-child(1){transition-delay:0s}
.reveal-group > .reveal:nth-child(2){transition-delay:.07s}
.reveal-group > .reveal:nth-child(3){transition-delay:.14s}
.reveal-group > .reveal:nth-child(4){transition-delay:.21s}
.reveal-group > .reveal:nth-child(5){transition-delay:.28s}
.reveal-group > .reveal:nth-child(6){transition-delay:.35s}
.reveal-group > .reveal:nth-child(7){transition-delay:.42s}
.reveal-group > .reveal:nth-child(8){transition-delay:.49s}

.parallax{background-attachment:fixed;background-size:cover;background-position:center}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .food-grid{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:var(--s-7)}
}
@media (max-width:920px){
  :root{--sec-y:72px}
  .nav-desk,.head-cta{display:none}
  .burger{display:flex}
  .why-grid,.combo-grid,.promo-grid,.quote-grid,.val-grid{grid-template-columns:repeat(2,1fr)}
  .story-grid,.contact-grid{grid-template-columns:1fr;gap:var(--s-7)}
  .masonry{columns:2}
  .m-list{grid-template-columns:1fr}
  .stat-row{grid-template-columns:repeat(2,1fr);gap:var(--s-6)}
}
@media (max-width:680px){
  :root{--sec-y:60px}
  .head-in{height:68px}
  .mob-nav{inset:68px 0 0}
  html{scroll-padding-top:120px}
  .tabbar{top:68px}
  .brand img{width:44px;height:44px}
  .brand-txt strong{font-size:var(--text-lg)}
  .food-grid,.why-grid,.combo-grid,.promo-grid,.quote-grid,.val-grid{grid-template-columns:1fr}
  .masonry{columns:1}
  .hero{min-height:auto;padding-block:var(--s-9) var(--s-7)}
  .hero-media img{height:100%}
  .parallax{background-attachment:scroll}
  .m-block,.sauce-box,.cater-box,.contact-form{padding:var(--s-5)}
  .visit-list li,.c-list li{grid-template-columns:1fr;gap:var(--s-1)}
  .lb-prev,.lb-next{width:44px;height:44px}
  .lb-prev{left:var(--s-2)}
  .lb-next{right:var(--s-2)}
  .float-btn{width:52px;height:52px}
  .float-btn svg{width:25px;height:25px}
  .btn-lg{height:52px;padding-inline:var(--s-5);font-size:var(--text-sm)}
  .hero-btns .btn{flex:1 1 100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  .reveal,.reveal-left,.reveal-right{opacity:1;transform:none}
  .ticker-run{animation:none}
  .parallax{background-attachment:scroll}
}

@media print{
  .site-head,.mob-nav,.float-stack,.ticker,.cta-band,.lb{display:none !important}
  body{background:#fff;color:#000}
}