@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/f1.woff2) format('woff2')}@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/f2.woff2) format('woff2')}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/f3.woff2) format('woff2')}@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/f4.woff2) format('woff2')}@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/f5.woff2) format('woff2')}@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/f6.woff2) format('woff2')}
:root{
 --cream:#f6ecd6; --cream2:#fdf8ec; --paper:#fffdf7;
 --green:#2f7d33; --green-d:#1c5a2a; --green-dd:#123f1d;
 --red:#d43a2b; --red-d:#b12a1d;
 --orange:#e07b28; --orange-d:#c2661a; --brown:#8a5424;
 --yellow:#f4c33d; --yellow-d:#e7b02a;
 --ink:#2c2118; --muted:#715c46; --border:rgba(44,33,24,.14);
 --shadow:0 20px 60px rgba(44,33,24,.16);
 --radius:20px;
 --font-body:"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
 --font-display:"Montserrat","Arial Black",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);color:var(--ink);
 line-height:1.6;background:var(--cream);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
/* premium SVG icon system */
.icn{width:1em;height:1em;display:inline-block;vertical-align:-0.125em;fill:none;
 stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.icn.fill{fill:currentColor;stroke:none}
.btn .icn{margin-right:2px}
.container{width:min(1180px,calc(100% - 32px));margin:0 auto}

/* top bar + serape stripe */
.topbar{height:14px;background:var(--red)}
.serape{height:16px;background:repeating-linear-gradient(115deg,
 var(--red) 0 14px,var(--orange) 14px 22px,var(--yellow) 22px 32px,
 var(--green) 32px 46px,var(--cream2) 46px 54px,var(--green-d) 54px 64px);}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:40;background:rgba(246,236,214,.94);
 backdrop-filter:blur(10px);border-bottom:2px solid rgba(44,33,24,.08)}
nav{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px}
.brand{display:flex;align-items:center;gap:12px}
.logo-badge{width:58px;height:58px;border-radius:50%;background-size:cover;background-position:center;
 border:3px solid var(--green);box-shadow:0 6px 16px rgba(0,0,0,.2);flex-shrink:0;transform-origin:50% 85%}
.brand-copy{display:flex;flex-direction:column;line-height:1}
.wordmark{font-weight:900;font-size:1.45rem;line-height:.85;letter-spacing:.5px;white-space:nowrap;
 font-family:var(--font-display);text-transform:uppercase}
.wordmark .t1{color:var(--orange)}
.wordmark .t2{color:var(--red)}
.wordmark .t1,.wordmark .t2{text-shadow:1.5px 1.5px 0 var(--green-d)}
.brand-full{font-size:.62rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
 color:var(--green-d);margin-top:3px}
.nav-right{display:flex;align-items:center;gap:12px}
.nav-links{display:flex;flex:1;align-items:center;justify-content:center;gap:30px}
.nav-links a{font-weight:600;color:var(--green-d);font-size:.9rem;text-transform:uppercase;letter-spacing:.6px}
.nav-links a:hover{color:var(--red)}
.phone-pill{display:inline-flex;align-items:center;gap:7px;background:var(--green);color:#fff;
 padding:10px 18px;border-radius:999px;font-weight:700;white-space:nowrap;box-shadow:0 8px 18px rgba(47,125,51,.3)}
.phone-pill:hover{background:var(--green-d);color:#fff}
.phone-pill .icn{font-size:1.05em}
/* mobile hamburger nav (native details, no JS) */
.mnav{position:static;display:none}
.mnav-toggle{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;
 background:var(--cream2);color:var(--green-d);border:1px solid var(--border);border-radius:999px;
 cursor:pointer;font-weight:800;font-size:.9rem;text-transform:uppercase;letter-spacing:.4px;list-style:none}
.mnav-toggle::-webkit-details-marker{display:none}
.mnav-toggle::marker{content:""}
.mnav-drop{position:absolute;right:16px;top:calc(100% + 8px);width:min(240px,calc(100vw - 32px));
 background:var(--paper);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);
 padding:10px;z-index:46;display:flex;flex-direction:column}
.mnav-drop a{padding:11px 14px;border-radius:10px;font-weight:700;color:var(--green-d);
 text-transform:uppercase;letter-spacing:.4px;font-size:.9rem}
.mnav-drop a:hover{background:var(--cream2)}
/* info accordion (native details, no JS) */
.info-acc{position:static}
.info-toggle{display:inline-flex;align-items:center;gap:7px;background:var(--yellow);color:var(--green-dd);
 border:none;cursor:pointer;font-family:inherit;font-weight:800;font-size:.9rem;text-transform:uppercase;
 letter-spacing:.4px;padding:10px 16px;border-radius:999px;box-shadow:0 8px 18px rgba(244,195,61,.35);
 list-style:none;user-select:none}
.info-toggle::-webkit-details-marker{display:none}
.info-toggle::marker{content:""}
.info-toggle .chev{width:.8em;height:.8em;transition:transform .25s ease}
.info-acc[open] .info-toggle .chev{transform:rotate(180deg)}
.info-drop{position:absolute;right:16px;top:calc(100% + 8px);width:min(340px,calc(100vw - 32px));
 background:var(--paper);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);
 padding:16px 18px;z-index:45}
.info-drop .row{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px dashed var(--border)}
.info-drop .row:last-of-type{border-bottom:none}
.info-drop .ic{font-size:1.2rem;flex-shrink:0;color:var(--green);display:inline-flex}
.info-drop .lab{font-weight:800;color:var(--green-d);font-size:.9rem}
.info-drop .val{color:var(--muted);font-size:.86rem}
.info-drop .val a{color:var(--green-d);font-weight:700}
@keyframes logoWiggle{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg) translateY(-2px)}}
@keyframes logoIn{0%{opacity:0;transform:scale(.4) rotate(-30deg)}100%{opacity:1;transform:scale(1) rotate(0)}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:none;
 border-radius:999px;padding:15px 26px;font-weight:800;font-size:1rem;cursor:pointer;
 font-family:inherit;text-transform:uppercase;letter-spacing:.4px;transition:.18s ease}
.btn:hover{transform:translateY(-2px)}
.btn-green{background:var(--green);color:#fff;box-shadow:0 12px 26px rgba(47,125,51,.32)}
.btn-green:hover{background:var(--green-d);color:#fff}
.btn-red{background:var(--red);color:#fff;box-shadow:0 12px 26px rgba(212,58,43,.32)}
.btn-red:hover{background:var(--red-d);color:#fff}
.btn-yellow{background:var(--yellow);color:var(--green-dd);box-shadow:0 12px 26px rgba(244,195,61,.4)}
.btn-yellow:hover{background:var(--yellow-d)}

/* ---------- hero (light cream, animation first) ---------- */
.hero{position:relative;overflow:hidden;padding:38px 0 46px;
 background:
  radial-gradient(circle at 84% 12%,rgba(244,195,61,.28),transparent 42%),
  radial-gradient(circle at 8% 90%,rgba(212,58,43,.12),transparent 40%),
  linear-gradient(180deg,#fbf3e2 0%,var(--cream) 100%)}
.hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center}
.h-eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#fff;
 font-weight:800;font-size:.82rem;text-transform:uppercase;letter-spacing:.6px;
 padding:8px 15px;border-radius:999px;margin:22px 0 12px;box-shadow:0 8px 20px rgba(47,125,51,.25)}
.h-title{font-family:var(--font-display);text-transform:uppercase;line-height:.94;margin:0 0 12px}
.h-title .l1{color:var(--green-d);font-size:clamp(1.3rem,2.6vw,1.7rem);letter-spacing:.5px}
.h-title .l2{color:var(--red);font-size:clamp(2.3rem,5vw,3.2rem);letter-spacing:0;
 text-shadow:2px 2px 0 rgba(28,90,42,.16)}
.h-title .l3{color:var(--green);font-size:clamp(1.4rem,3vw,2rem);letter-spacing:1px}
.h-title .l1,.h-title .l3{display:inline}
.h-sub{font-size:1.05rem;color:var(--muted);font-weight:600;margin:0 0 20px;max-width:48ch}
.h-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-bottom:6px}

/* animated stage (leads the hero) */
.hero-stage{position:relative;width:100%;max-width:620px;min-height:400px;display:grid;place-items:center;margin:0 auto}
.stage-type{position:absolute;inset:0;display:grid;place-items:center;z-index:1;pointer-events:none}
.stage-type span{font-family:var(--font-display);text-transform:uppercase;
 font-size:clamp(4.5rem,13vw,9rem);line-height:.7;letter-spacing:-2px;text-align:center;
 color:rgba(44,33,24,.06);white-space:nowrap}
.blob{position:absolute;width:min(370px,80%);aspect-ratio:1;border-radius:50%;z-index:2;
 background:radial-gradient(circle at 40% 35%,#f7cf55 0%,#e8842a 58%,#d43a2b 100%);
 box-shadow:0 26px 64px rgba(212,58,43,.28),0 0 0 14px rgba(255,255,255,.5)}
.product-wrap{position:relative;z-index:3;width:min(310px,68%);aspect-ratio:1}
.product{width:100%;height:100%;border-radius:50%;overflow:hidden;border:8px solid #fff;
 box-shadow:0 24px 54px rgba(44,33,24,.3)}
.product img{width:100%;height:100%;object-fit:cover}
.spin-badge{position:absolute;top:0;right:2%;z-index:4;width:clamp(116px,16vw,154px);aspect-ratio:1}
.spin-badge .ring{width:100%;height:100%}
.spin-badge .ring text{fill:var(--green-d);font-family:var(--font-display);
 font-size:15px;letter-spacing:5.4px;text-transform:uppercase}
.spin-badge .center{position:absolute;inset:22%;border-radius:50%;
 background-size:cover;background-position:center;
 box-shadow:0 8px 18px rgba(0,0,0,.25);border:3px solid #fff}
.spin-badge.b2{top:auto;right:auto;bottom:4%;left:0}
.spin-badge.b2 .ring text{font-size:15px;letter-spacing:1.6px}
.side-badge.two{left:2%;top:0;right:auto;bottom:auto}
.side-badge{position:absolute;left:0;bottom:6%;z-index:4;width:clamp(92px,13vw,124px);aspect-ratio:1;
 border-radius:50%;overflow:hidden;border:5px solid var(--yellow);box-shadow:0 14px 30px rgba(44,33,24,.28)}
.side-badge img{width:100%;height:100%;object-fit:cover}

/* keyframes */
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{0%{opacity:0;transform:scale(.55)}62%{transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes floatyR{0%,100%{transform:translate(0,0) rotate(-6deg)}50%{transform:translate(0,-16px) rotate(6deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blobPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes driftType{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes favDrift{0%,100%{transform:translate(0,0)}25%{transform:translate(5px,-3px)}
 50%{transform:translate(0,-6px)}75%{transform:translate(-5px,-3px)}}
/* dramatic burst-in for the hero food photos (after a ~6s hold) */
@keyframes explodeIn{0%{opacity:0;transform:scale(0) rotate(-30deg)}
 50%{opacity:1;transform:scale(1.28) rotate(9deg)}72%{transform:scale(.9) rotate(-4deg)}
 88%{transform:scale(1.05) rotate(2deg)}100%{opacity:1;transform:scale(1) rotate(0)}}

@media (prefers-reduced-motion: no-preference){
 .fav-img{animation:favDrift 12s ease-in-out infinite}
 /* The photo drifts forever, which is a nice touch and a poor thing to aim a
    thumb at. Freeze it the instant a finger lands, so what gets tapped is
    exactly what was under the finger when it came down. */
 .fav-img:active,.fav-img:focus-visible{animation-play-state:paused}
 .fav:nth-child(2) .fav-img{animation-duration:14s;animation-delay:-2.5s}
 .fav:nth-child(3) .fav-img{animation-duration:13s;animation-delay:-5s}
 .fav:nth-child(4) .fav-img{animation-duration:15s;animation-delay:-7s}
 .fav:nth-child(5) .fav-img{animation-duration:12.5s;animation-delay:-3.5s}
 .fav:nth-child(6) .fav-img{animation-duration:13.5s;animation-delay:-9s}
 .logo-badge{animation:logoIn .7s .1s both,logoWiggle 3.4s ease-in-out 1.1s infinite}
 /* faint TACO TACO backdrop stays during the hold so the stage isn't fully blank */
 .stage-type{opacity:0;animation:fadeIn 1.1s .25s both,driftType 9s ease-in-out 1.4s infinite}
 /* color blob + food photos: hold ~3s, then burst in together and settle into the float */
 .blob{opacity:0;animation:explodeIn 1s 3s both,blobPulse 7s ease-in-out 4s infinite}
 .product-wrap{animation:explodeIn 1s 3s both}
 .product{animation:floaty 6s ease-in-out 3.9s infinite}
 .spin-badge{opacity:0;animation:explodeIn 1s 3.15s both}
 .spin-badge .ring{animation:spin 18s linear infinite}
 .spin-badge.b2{animation:explodeIn 1s 3.3s both}
 .side-badge{opacity:0;animation:explodeIn 1s 3.3s both}
 .side-badge.two{animation:explodeIn 1s 3.45s both}
 .side-badge img{animation:floaty 5.5s ease-in-out 4.1s infinite}
 .side-badge.two img{animation:floaty 6.2s ease-in-out 4.25s infinite}
 .h-eyebrow{animation:riseIn .7s .55s both}
 .h-title{animation:riseIn .7s .68s both}
 .h-sub{animation:riseIn .7s .8s both}
 .h-actions{animation:riseIn .7s .92s both}
}

/* ---------- section framework ---------- */
section.blk{padding:56px 0}
.sec-head{text-align:center;max-width:720px;margin:0 auto 34px}
.sec-kicker{display:inline-block;color:var(--red);font-weight:800;text-transform:uppercase;
 letter-spacing:2px;font-size:.85rem;margin-bottom:8px}
.sec-title{font-family:var(--font-display);text-transform:uppercase;color:var(--green-d);
 font-size:clamp(1.8rem,3.6vw,2.8rem);margin:0 0 10px;line-height:1.02}
.sec-title .deco{color:var(--red)}
.sec-sub{color:var(--muted);font-size:1.05rem;margin:0}

/* featured favorites */
.fav-wrap{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.fav{text-align:center}
.fav-img{width:100%;aspect-ratio:1;border-radius:50%;background-size:cover;background-position:center;
 border:5px solid var(--yellow);box-shadow:0 12px 24px rgba(44,33,24,.18);margin-bottom:12px;will-change:transform}
.fav-name{font-weight:800;color:var(--green-d);text-transform:uppercase;font-size:.98rem;letter-spacing:.3px}
.fav-desc{color:var(--muted);font-size:.86rem;line-height:1.35;margin-top:4px}

/* menu */
.menu-sec{background:var(--cream2)}
.menu-grid{columns:2;column-gap:26px}
.mcat{break-inside:avoid;margin-bottom:20px;background:var(--paper);border:1px solid var(--border);
 border-radius:16px;padding:0 18px 14px;box-shadow:0 8px 22px rgba(44,33,24,.06);overflow:hidden}
.cat-bar{background:var(--yellow);margin:0 -18px 12px;padding:11px 18px;
 display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cat-name{font-family:var(--font-display);text-transform:uppercase;color:var(--green-d);
 font-size:1.15rem;letter-spacing:.3px}
.cat-sub{color:var(--red-d);font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.5px}
.cat-note{margin:10px 16px 2px;color:var(--muted);font-size:.86rem;line-height:1.5}
.mi{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:7px 0;
 border-bottom:1px dashed rgba(44,33,24,.14)}
.mi:last-child{border-bottom:none}
.mi-name{font-weight:800;color:var(--ink)}
.mi-desc{display:block;color:var(--muted);font-size:.85rem;font-weight:500;line-height:1.35;margin-top:1px}
.mi-price{font-weight:900;color:var(--green);white-space:nowrap}
.menu-note{text-align:center;color:var(--muted);margin:8px auto 26px;max-width:60ch}
.menu-cta{text-align:center;margin-top:10px}
/* collapsible menu: full height without JS; JS collapses to a teaser with a fade + toggle */
.menu-collapse{position:relative}
html.js #menu-collapse{max-height:540px;overflow:hidden}
html.js #menu-collapse.open{max-height:none;overflow:visible}
html.js #menu-collapse:not(.open)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;
 background:linear-gradient(transparent,var(--cream2));pointer-events:none}
.menu-toggle-wrap{display:none;text-align:center;margin-top:16px}
html.js .menu-toggle-wrap{display:block}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gitem{aspect-ratio:1;border-radius:16px;overflow:hidden;box-shadow:0 10px 22px rgba(44,33,24,.12);
 border:3px solid #fff}
.gitem img{width:100%;height:100%;object-fit:cover;transition:.3s ease}
.gitem:hover img{transform:scale(1.06)}

/* about */
.about{background:var(--green-d);color:#fff}
.about .sec-title{color:#fff}
.about .sec-title .deco{color:var(--yellow)}
.about .sec-sub{color:rgba(255,255,255,.86)}
.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.about-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
 border-radius:16px;padding:24px;text-align:center}
.about-card .ac-ic{font-size:2rem;margin-bottom:8px;color:var(--yellow);display:flex;justify-content:center}
.about-card h2,.about-card h3,.about-card h4,.about-card h5,.about-card h6{margin:0 0 6px;text-transform:uppercase;letter-spacing:.5px;font-size:1.05rem;color:var(--yellow)}
.about-card p{margin:0;color:rgba(255,255,255,.85);font-size:.95rem}

/* order CTA */
.order-sec{background:
 radial-gradient(circle at 15% 20%,rgba(244,195,61,.3),transparent 40%),var(--cream)}
.order-card{background:var(--paper);border:2px solid var(--yellow);border-radius:26px;
 box-shadow:var(--shadow);padding:44px;text-align:center;position:relative;overflow:hidden}
.order-card .mascot-sm{width:74px;height:74px;border-radius:50%;background-size:cover;background-position:center;
 border:3px solid var(--green);margin:0 auto 14px;box-shadow:0 8px 18px rgba(0,0,0,.18)}
.order-card h2,.order-card h3,.order-card h4,.order-card h5,.order-card h6{font-family:var(--font-display);text-transform:uppercase;color:var(--green-d);
 font-size:clamp(1.7rem,3.4vw,2.5rem);margin:0 0 10px}
.order-card p{color:var(--muted);max-width:56ch;margin:0 auto 24px;font-size:1.08rem;text-align:justify}
.order-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:720px;margin:26px auto 0;text-align:left}
.ostep{display:flex;gap:12px;align-items:flex-start;background:var(--cream2);border:1px solid var(--border);
 border-radius:14px;padding:14px 16px}
.ostep .n{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--red);color:#fff;
 display:grid;place-items:center;font-weight:900;font-size:.9rem}
.ostep strong{display:block;color:var(--green-d);text-transform:uppercase;font-size:.9rem;letter-spacing:.3px}
.ostep span{color:var(--muted);font-size:.88rem}
/* Taco Taco popup: no-JS 3-state (full / minimized / closed) via :target */
.assist-anchor{position:fixed;top:0;left:0;width:0;height:0;overflow:hidden}
.assist-wrap{display:none}
.assist-backdrop{position:absolute;inset:0;cursor:pointer}
.assist-dialog{position:relative;z-index:1;width:min(440px,100%);height:min(680px,88vh);background:var(--paper);
 border-radius:20px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.assist-dialog iframe{flex:1;width:100%;border:0;background:#fff}
/* open: dim full-screen overlay; dialog centered on mobile, right-aligned on desktop; tap backdrop to close */
#assistant:target ~ .assist-wrap{display:flex;position:fixed;inset:0;z-index:100;align-items:center;
 justify-content:center;padding:16px;background:rgba(20,12,8,.55)}
@media(min-width:768px){#assistant:target ~ .assist-wrap{justify-content:flex-end;padding-right:28px}}
#assistant:target ~ .chat-launch{display:none}

/* ---------- bottom dock: Top (left) | basket (center) | launcher (right) ---------- */
.dock{position:fixed;left:0;right:0;bottom:20px;z-index:60;display:flex;
 justify-content:space-between;align-items:center;gap:8px;padding:0 12px;pointer-events:none}
.dock>*,.dock-end>*{pointer-events:auto}
.dock-end{display:flex;align-items:center;min-width:0}

/* back to top */
.to-top{flex:none;width:48px;height:48px;border-radius:50%;
 background:var(--red);color:#fff;border:2px solid #fff;font-size:.8rem;font-weight:800;
 text-transform:uppercase;letter-spacing:.3px;
 box-shadow:0 12px 28px rgba(212,58,43,.4);display:grid;place-items:center;text-decoration:none}
.to-top:hover{background:var(--red-d);color:#fff}

/* order-now launcher */
.chat-launch{position:relative;display:flex;align-items:center;gap:9px;
 background:var(--red);color:#fff;border:none;cursor:pointer;padding:10px 17px 10px 10px;border-radius:999px;
 font-weight:800;font-family:inherit;font-size:.92rem;box-shadow:0 14px 34px rgba(212,58,43,.45);
 text-transform:uppercase;letter-spacing:.3px;text-decoration:none;white-space:nowrap}
.chat-launch:hover{background:var(--red-d)}
.chat-launch .cl-av{width:34px;height:34px;border-radius:50%;background-size:cover;background-position:center;
 border:2px solid #fff}
.chat-launch .cl-dot{position:absolute;top:8px;left:36px;width:11px;height:11px;background:#38d16a;
 border:2px solid #fff;border-radius:50%}
/* declutter: hide "Order Now" once the basket has items or the assistant is active */
html.has-items .chat-launch,html.chat-active .chat-launch,html.assist-min .chat-launch{display:none}
/* minimized reopen pill */
.oc-reopen{display:none;align-items:center;gap:7px;
 background:var(--red);color:#fff;border:2px solid #fff;cursor:pointer;padding:8px 13px 8px 8px;
 border-radius:999px;font-weight:800;font-family:inherit;font-size:.82rem;text-decoration:none;
 text-transform:uppercase;letter-spacing:.2px;box-shadow:0 14px 34px rgba(212,58,43,.45);white-space:nowrap}
.oc-reopen:hover{background:var(--red-d)}
.oc-reopen .cl-av{width:30px;height:30px;border-radius:50%;background-size:cover;background-position:center;border:2px solid #fff}
html.assist-min .oc-reopen{display:flex}
#oc-min{cursor:pointer;border:0;background:rgba(255,255,255,.18);color:#fff;font-weight:700;
 font-size:.78rem;padding:6px 12px;border-radius:999px}
#oc-min:hover{background:rgba(255,255,255,.32)}
.oc-new{width:100%;border:0;background:transparent;color:var(--muted);font-size:.78rem;
 padding:9px;cursor:pointer;text-decoration:underline;font-family:inherit}
.oc-new:hover{color:var(--ink)}
.oc-msg strong{font-weight:800}
.oc-msg a{color:var(--green-d);font-weight:800;text-decoration:underline;word-break:break-word}
.oc-msg a:hover{color:var(--green)}
.oc-msg a.wa-btn{display:inline-flex;align-items:center;gap:8px;background:#25d366;color:#fff;
 padding:9px 16px;border-radius:999px;font-weight:800;text-decoration:none;margin:4px 0;
 word-break:normal;box-shadow:0 6px 16px rgba(37,211,102,.35)}
.oc-msg a.wa-btn:hover{background:#1eb457;color:#fff}
.wa-ico{width:19px;height:19px;flex:none}
.chat-panel{position:fixed;right:20px;bottom:20px;z-index:61;width:min(370px,calc(100vw - 32px));
 max-height:min(620px,calc(100vh - 40px));background:var(--paper);border-radius:22px;overflow:hidden;
 box-shadow:0 30px 80px rgba(0,0,0,.4);display:none;flex-direction:column;border:1px solid var(--border)}
.chat-panel.open{display:flex}
.chat-head{background:var(--yellow);padding:14px 16px;display:flex;align-items:center;gap:12px}
.chat-head .ch-av{width:44px;height:44px;border-radius:50%;background-size:cover;background-position:center;
 border:2px solid #fff;flex-shrink:0}
.chat-head .ch-name{font-weight:900;color:var(--green-dd);font-size:1.05rem;line-height:1.1}
.chat-head .ch-status{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--green-d);font-weight:700}
.chat-head .ch-status::before{content:"";width:9px;height:9px;border-radius:50%;background:#20a44a}
.chat-head .ch-x{margin-left:auto;background:rgba(0,0,0,.12);border:none;color:var(--green-dd);
 width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:1.1rem;font-weight:800;line-height:1}
.chat-body{padding:16px;overflow-y:auto;background:var(--cream2);flex:1;min-height:220px}
.bubble{background:#fff;border:1px solid var(--border);border-radius:14px;border-top-left-radius:4px;
 padding:13px 15px;font-size:.94rem;box-shadow:0 4px 12px rgba(0,0,0,.05);max-width:92%}
.bubble b{color:var(--green-d)}
.bubble ul{margin:8px 0 0;padding-left:0;list-style:none}
.bubble li{margin:6px 0;display:flex;gap:8px;align-items:center}
.bubble li .icn{color:var(--green);font-size:1.05rem;flex-shrink:0}
.chat-foot{padding:12px;border-top:1px solid var(--border);display:flex;gap:8px;background:var(--paper)}
.chat-foot input{flex:1;border:1px solid var(--border);border-radius:999px;padding:11px 16px;font:inherit;outline:none}
.chat-foot input:focus{border-color:var(--green)}
.chat-foot .send{padding:0 18px;height:44px;border-radius:999px;background:var(--green);color:#fff;border:none;
 cursor:pointer;font-size:.9rem;font-weight:800;text-transform:uppercase;letter-spacing:.3px;flex-shrink:0}
.embed-note{margin-top:12px;font-size:.8rem;color:var(--muted);background:#fff;border:1px dashed var(--green);
 border-radius:12px;padding:10px 12px;line-height:1.4}

/* ---------- footer ---------- */
.foot-banner{background:var(--red);color:#fff;text-align:center;padding:16px;font-family:var(--font-display);
 text-transform:uppercase;letter-spacing:1px;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;font-size:clamp(.9rem,2vw,1.3rem)}
.foot-banner .chili{font-size:1.3rem}
footer{background:var(--green-dd);color:#fff;padding:44px 0 28px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:26px}
.foot-brand .wordmark{font-size:1.7rem;margin-bottom:10px}
.foot-brand p{color:rgba(255,255,255,.8);max-width:38ch;margin:0}
.foot-col h2,.foot-col h3,.foot-col h4,.foot-col h5,.foot-col h6{text-transform:uppercase;letter-spacing:.5px;color:var(--yellow);margin:0 0 12px;font-size:1rem}
.foot-col p,.foot-col a{color:rgba(255,255,255,.85);margin:0 0 8px;font-size:.95rem;display:block}
.foot-col a:hover{color:var(--yellow)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.15);margin-top:30px;padding-top:20px;
 display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;color:rgba(255,255,255,.7);font-size:.88rem}
.foot-bottom a{color:var(--yellow);font-weight:700}

@media(max-width:900px){
 .hero-stage{min-height:360px}
 .fav-wrap{grid-template-columns:repeat(3,1fr)}
 .menu-grid{columns:1}
 .gal{grid-template-columns:repeat(2,1fr)}
 .about-grid,.order-steps{grid-template-columns:1fr}
 .foot-grid{grid-template-columns:1fr}
 .nav-links{display:none}
 .mnav{display:block}
}
@media(max-width:560px){
 .fav-wrap{grid-template-columns:repeat(2,1fr)}
 .btn{width:100%}
 .h-actions{flex-direction:column;width:100%}
 .order-card{padding:28px 20px}
 .hero-stage{min-height:320px}
 .side-badge{left:2%}
 .wordmark{font-size:1.25rem}
 .info-acc{display:none}
 .nav-right{gap:9px}
}

/* ===== Tap-to-order: interactive menu, basket & AI order chat =====
   Everything here is inert without JavaScript. The controls/panels are
   display:none by default and only revealed once the script adds .js to
   <html>, so the no-JS preview renders the static menu exactly as before. */
.menu-hint{display:none;text-align:center;color:var(--green-d);font-weight:700;
 margin:0 auto 18px;max-width:60ch}
html.js .menu-hint{display:block}
.mi{flex-wrap:wrap}
.mi-controls{display:none;flex-basis:100%;gap:8px;align-items:center;margin-top:6px}
html.js .mi-controls{display:flex}
.mi-meat{font-family:var(--font-body);font-size:.82rem;padding:5px 7px;border:1px solid var(--border);
 border-radius:9px;background:#fff;color:var(--ink);max-width:150px}
.add-btn{cursor:pointer;border:0;background:var(--green);color:#fff;font-family:var(--font-display);
 text-transform:uppercase;font-size:.72rem;letter-spacing:.6px;font-weight:800;padding:7px 15px;
 border-radius:999px;transition:background .15s,transform .1s}
.add-btn:hover{background:var(--green-d)}
.add-btn:active{transform:scale(.94)}
.add-btn.added{background:var(--red)}

#basket-bar{display:none;z-index:70;max-width:100%;
 background:var(--red);color:#fff;border-radius:999px;padding:5px 5px 5px 12px;gap:7px;
 align-items:center;box-shadow:0 14px 34px rgba(212,58,43,.4);border:2px solid #fff;white-space:nowrap}
html.js.has-items #basket-bar{display:flex}
#basket-bar .bb-count{font-weight:700;font-size:.72rem}
#basket-bar .bb-total{font-family:var(--font-display);font-weight:800;font-size:.84rem}
#bb-view{cursor:pointer;border:0;background:var(--yellow);color:var(--green-dd);font-family:var(--font-display);
 text-transform:uppercase;font-size:.66rem;letter-spacing:.2px;font-weight:800;padding:6px 10px;border-radius:999px}
#bb-view:hover{background:var(--yellow-d)}

#basket-panel,#order-chat{display:none;position:fixed;inset:0;z-index:115;background:rgba(20,12,8,.55)}
#basket-panel.open,#order-chat.open{display:flex}
#basket-panel{align-items:flex-end;justify-content:center}
.bp-inner{position:relative;background:var(--paper);width:min(560px,100%);max-height:86vh;border-radius:20px 20px 0 0;
 display:flex;flex-direction:column;overflow:hidden;box-shadow:0 -14px 60px rgba(0,0,0,.4)}
@media(min-width:768px){#basket-panel{align-items:center}.bp-inner{border-radius:20px}}
.bp-head,.oc-head{display:flex;align-items:center;gap:10px;padding:15px 18px;background:var(--green-d);color:#fff}
.bp-head span:first-child,.oc-title{flex:1;font-family:var(--font-display);text-transform:uppercase;
 letter-spacing:.4px;font-size:1.05rem}
#bp-close,#oc-close{cursor:pointer;border:0;background:rgba(255,255,255,.18);color:#fff;font-weight:700;
 font-size:.78rem;padding:6px 12px;border-radius:999px}
#bp-close:hover,#oc-close:hover{background:rgba(255,255,255,.32)}
/* The panel is a head that stays, a middle that scrolls, and a foot that
   stays. It used to be a scrolling list with a fixed block under it, and once
   that block grew a name, a fulfilment, an address and a time, it pushed the
   send button off the bottom of the screen: on a short phone the delivery
   fields were there but unreachable. Now everything scrolls together and the
   two things you always need, the total and the button, are pinned. */
.bp-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
 overscroll-behavior:contain}
.bp-list{padding:8px 18px;flex:none}
.bp-empty{color:var(--muted);text-align:center;padding:26px 0}
.bp-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px dashed rgba(44,33,24,.14)}
.bp-row:last-child{border-bottom:none}
.bp-info{flex:1;display:flex;flex-direction:column}
.bp-name{font-weight:700;color:var(--ink)}
.bp-price{color:var(--green);font-weight:800;font-size:.9rem}
.bp-qty{display:flex;align-items:center;gap:10px}
.qbtn{cursor:pointer;width:30px;height:30px;border-radius:50%;border:1px solid var(--border);
 background:#fff;color:var(--ink);font-weight:800;font-size:1.05rem;line-height:1;display:grid;place-items:center}
.qbtn:hover{background:var(--cream)}
.qn{min-width:20px;text-align:center;font-weight:800}
.bp-foot{padding:14px 18px 18px;border-top:1px solid var(--border);background:var(--cream)}
.bp-pay{flex:none;padding:12px 18px calc(14px + env(safe-area-inset-bottom));
 border-top:1px solid var(--border);background:var(--cream);
 box-shadow:0 -8px 18px rgba(44,33,24,.07)}
.bp-total-row{display:flex;justify-content:space-between;font-family:var(--font-display);font-size:1.15rem;
 color:var(--green-d);margin-bottom:12px}
.bp-actions{display:flex;gap:10px}
.btn-ghost{cursor:pointer;border:2px solid var(--border);background:#fff;color:var(--ink);font-weight:800;
 padding:11px 16px;border-radius:999px;font-size:.85rem}
.btn-send{cursor:pointer;flex:1;border:0;background:var(--red);color:#fff;font-family:var(--font-display);
 text-transform:uppercase;letter-spacing:.5px;font-weight:800;padding:12px 16px;border-radius:999px}
.btn-send:hover{background:var(--red-d)}
.btn-send.wa-send{background:#25d366;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-send.wa-send:hover{background:#1eb457}
.btn-send.wa-send .wa-ico{width:18px;height:18px;flex:none}
.bp-fine{color:var(--muted);font-size:.76rem;text-align:center;margin:10px 0 0}

#order-chat{align-items:center;justify-content:center;padding:16px}
@media(min-width:768px){#order-chat{justify-content:flex-end;padding-right:28px}}
.oc-inner{background:var(--paper);width:min(460px,100%);height:min(680px,88vh);border-radius:20px;
 display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.oc-av{width:34px;height:34px;border-radius:50%;background-size:cover;background-position:center;border:2px solid #fff}
.oc-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--cream)}
.oc-msg{max-width:82%;padding:10px 14px;border-radius:16px;line-height:1.4;font-size:.94rem;white-space:pre-wrap}
.oc-msg.user{align-self:flex-end;background:var(--green);color:#fff;border-bottom-right-radius:5px}
.oc-msg.bot{align-self:flex-start;background:#fff;color:var(--ink);border:1px solid var(--border);border-bottom-left-radius:5px}
.oc-msg.typing{color:var(--muted);font-style:italic}
.oc-input-row{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border);background:var(--paper)}
#oc-input{flex:1;border:1px solid var(--border);border-radius:999px;padding:11px 16px;font-family:var(--font-body);
 font-size:.95rem;color:var(--ink)}
#oc-input:focus{outline:2px solid var(--green);outline-offset:1px}
#oc-send{cursor:pointer;border:0;background:var(--green);color:#fff;font-family:var(--font-display);
 text-transform:uppercase;font-weight:800;font-size:.76rem;letter-spacing:.5px;padding:0 18px;border-radius:999px}
#oc-send:hover{background:var(--green-d)}

/* ---------- depth pass: layered parallax, card tilt, scroll reveal (CSS + tiny JS, no libraries) ----------
   Parallax and reveal drive the independent `translate` property, so they compose with the
   existing keyframe transforms on these elements instead of overwriting them. */
.d3-tilt{transition:transform .4s cubic-bezier(.22,.9,.3,1),box-shadow .4s ease}
.d3-tilt.d3-live{transition:transform .09s linear,box-shadow .4s ease}
@media (hover:hover) and (pointer:fine){
 .fav.d3-tilt:hover,.gitem.d3-tilt:hover{z-index:5}
 .about-card.d3-tilt:hover{box-shadow:0 26px 52px rgba(0,0,0,.30)}
 .ostep.d3-tilt:hover{box-shadow:0 20px 40px rgba(44,33,24,.16)}
 .gitem.d3-tilt:hover{box-shadow:0 26px 50px rgba(44,33,24,.30)}
}
/* An unrevealed block is invisible but still shifted 38px down over its
   neighbour, where it used to swallow the tap meant for what you can see. */
html.js .d3-rv{opacity:0;transform:perspective(900px) rotateX(12deg) translateY(38px) scale(.955);
 transform-origin:50% 100%;pointer-events:none;
 transition:opacity .7s ease,transform .85s cubic-bezier(.22,.9,.3,1)}
html.js .d3-rv.in{opacity:1;transform:none;pointer-events:auto}
@media (prefers-reduced-motion: reduce){
 html.js .d3-rv{opacity:1;transform:none;transition:none;pointer-events:auto}
 .d3-tilt{transition:none}
}

/* ---------- scroll-scrubbed showcase: the scroll position IS the play head ----------
   Frames are the gallery photos already embedded in this page, cloned at runtime, so this
   costs no extra bytes. The grid below stays in the markup as the no-JS / reduced-motion view. */
.scrub{position:relative;display:none}
html.js .scrub{display:block}
.scrub-stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;
 overflow:hidden}
.scrub-deck{position:relative;width:min(520px,80vw);aspect-ratio:1;perspective:1200px}
.sf{position:absolute;inset:0;margin:0;border-radius:24px;overflow:hidden;opacity:0;
 box-shadow:0 30px 70px rgba(44,33,24,.38);backface-visibility:hidden}
.sf img{width:100%;height:100%;object-fit:cover;display:block}
.scrub-hud{position:absolute;left:0;right:0;bottom:6%;display:flex;flex-direction:column;
 align-items:center;gap:10px;pointer-events:none}
.scrub-num{font-family:var(--font-display);font-size:.9rem;letter-spacing:2px;color:var(--green-d)}
.scrub-track{width:min(230px,52vw);height:4px;border-radius:99px;background:rgba(44,33,24,.16);overflow:hidden}
.scrub-track i{display:block;height:100%;width:0;background:var(--red);border-radius:99px}
.scrub-skip{pointer-events:auto;cursor:pointer;border:2px solid var(--border);background:#fff;color:var(--ink);
 font-family:inherit;font-weight:800;font-size:.72rem;letter-spacing:1.2px;text-transform:uppercase;
 padding:9px 17px;border-radius:999px;box-shadow:0 8px 20px rgba(44,33,24,.16)}
.scrub-skip:hover{background:var(--cream)}
.gal-label{display:none;text-align:center;color:var(--muted);font-weight:800;text-transform:uppercase;
 letter-spacing:2px;font-size:.76rem;margin:0 0 16px}
html.js.scrub-on .gal-label{display:block}
@media (prefers-reduced-motion: reduce){ html.js .scrub{display:none} html.js .gal-label{display:none} }

/* ================= menu item photos ================= */
.mi{align-items:center}
.mi-thumb{flex:none;width:62px;height:62px;border-radius:12px;background-size:cover;background-position:center;
 background-color:var(--cream2);box-shadow:0 4px 12px rgba(44,33,24,.16)}
.mi-thumb-none{position:relative;background:linear-gradient(150deg,var(--cream),var(--cream2));
 border:1px dashed rgba(44,33,24,.20);box-shadow:none}
.mi-thumb-none::after{content:"";position:absolute;inset:0;opacity:.14;filter:grayscale(1);
 background:url('../img/logo.webp') center/56% no-repeat}
@media(max-width:520px){.mi-thumb{width:54px;height:54px}}

/* ================= category quick nav ================= */
.cat-nav{display:flex;gap:8px;overflow-x:auto;padding:2px 0 14px;margin:0 0 14px;scrollbar-width:none}
.cat-nav::-webkit-scrollbar{display:none}
.cat-nav a{flex:none;background:var(--paper);border:1px solid var(--border);border-radius:999px;
 padding:7px 14px;font-size:.78rem;font-weight:800;color:var(--green-d);white-space:nowrap;
 text-transform:uppercase;letter-spacing:.4px}
.cat-nav a:hover{background:var(--yellow);color:var(--green-dd)}
.mcat{scroll-margin-top:92px}

/* ================= fly to basket ================= */
.fly{position:fixed;z-index:200;border-radius:12px;background-size:cover;background-position:center;
 pointer-events:none;box-shadow:0 14px 32px rgba(44,33,24,.4);
 transition:transform .72s cubic-bezier(.5,-0.25,.4,1),opacity .72s ease}
#basket-bar.bump{animation:bbBump .45s ease}
@keyframes bbBump{0%,100%{transform:scale(1)}38%{transform:scale(1.18)}}

/* ================= basket thumbnails ================= */
.bp-thumb{flex:none;width:48px;height:48px;border-radius:10px;background-size:cover;background-position:center;
 background-color:var(--cream2)}
.bp-thumb.none{position:relative;background:linear-gradient(150deg,var(--cream),var(--cream2));
 border:1px dashed rgba(44,33,24,.20)}
.bp-thumb.none::after{content:"";position:absolute;inset:0;opacity:.14;filter:grayscale(1);
 background:url('../img/logo.webp') center/56% no-repeat}

/* ================= socials ================= */
.socials{display:flex;gap:12px;margin:22px 0 4px;justify-content:center;width:100%}
.soc{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
 border:0;color:#fff;transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;
 box-shadow:0 6px 16px rgba(0,0,0,.28)}
.soc:hover{transform:translateY(-3px);filter:brightness(1.08);color:#fff}
.soc-facebook{background:#1877f2}
.soc-instagram{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.soc-tiktok{background:#010101}
.soc svg{width:19px;height:19px;fill:currentColor}

/* ================= video gallery ================= */
.vid-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:16px}
.vid{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;display:grid;place-items:center;
 background:#16281f center/cover no-repeat;box-shadow:0 12px 26px rgba(44,33,24,.2)}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-play{width:62px;height:62px;border-radius:50%;border:0;cursor:pointer;background:var(--red);
 box-shadow:0 10px 26px rgba(212,58,43,.5);position:relative}
.vid-play:hover{background:var(--red-d)}
.vid-play::after{content:"";position:absolute;top:50%;left:55%;transform:translate(-50%,-50%);
 border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent}
.vid-title{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;color:#fff;font-weight:800;font-size:.9rem;
 background:linear-gradient(transparent,rgba(0,0,0,.78));pointer-events:none}

/* ================= multi-page nav state ================= */
.nav-links a.on{color:var(--red);position:relative}
.nav-links a.on::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:3px;
 background:var(--red);border-radius:2px}
.mnav-drop a.on{color:var(--red)}

@media (prefers-reduced-motion: reduce){.fly{display:none}#basket-bar.bump{animation:none}}

/* keep the photo, the name and the price together on one line; only the
   meat picker and Add button wrap to a second row */
.mi-l{flex:1 1 0;min-width:0}
.mi-price{margin-left:auto}

/* ================= star rating ================= */
.stars{position:relative;display:inline-block;font-size:1.45rem;line-height:1;letter-spacing:3px;
 color:rgba(44,33,24,.18);white-space:nowrap}
.stars::before{content:"\2605\2605\2605\2605\2605"}
.stars .fill{position:absolute;left:0;top:0;overflow:hidden;color:#f2b616}
.rating{display:flex;flex-direction:column;align-items:center;gap:7px}
.rating-num{font-family:var(--font-display);font-size:3.3rem;line-height:.9;color:var(--green-d)}
.rating-sub{font-size:.78rem;letter-spacing:1.2px;text-transform:uppercase;font-weight:800;color:var(--muted)}
.rating.big .rating-num{font-size:clamp(3.6rem,9vw,5rem)}
.rating.big .stars{font-size:1.9rem}

/* ================= reviews band (home) ================= */
.rev-band{background:var(--green-d);color:#fff}
.rev-band-in{display:flex;gap:34px;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center}
.rev-band-copy{max-width:44ch}
.rev-band .sec-title{color:#fff;margin-bottom:8px}
.rev-band .deco{color:var(--yellow)}
.rev-band .sec-sub{color:rgba(255,255,255,.84);margin-bottom:18px}
.rev-band .stars{color:rgba(255,255,255,.26)}
.rev-band .rating-num{color:var(--yellow)}
.rev-band .rating-sub{color:rgba(255,255,255,.78)}

/* ================= September promotion ================= */
/* The card is the site's own cream and green, not a generic overlay: it should
   read as a page of the website that happens to be on top, which is also why
   the mascot sits on the rim rather than inside the text. */
.promo{position:fixed;inset:0;z-index:120;display:grid;place-items:center;
 padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
 background:rgba(18,63,29,.62);backdrop-filter:blur(3px);
 opacity:0;transition:opacity .26s ease;overflow-y:auto}
.promo.on{opacity:1}
.promo[hidden]{display:none}
html.promo-open,html.promo-open body{overflow:hidden}
.promo-card{position:relative;width:min(520px,100%);margin:auto;
 background:linear-gradient(180deg,var(--paper) 0%,var(--cream2) 100%);
 border:3px solid var(--green);border-radius:24px;
 padding:46px 24px 26px;text-align:center;
 box-shadow:0 30px 70px rgba(0,0,0,.42);
 transform:translateY(14px) scale(.97);transition:transform .3s cubic-bezier(.2,.9,.3,1.2)}
.promo.on .promo-card{transform:none}
/* The entry clip. Narrower than the discount card, because the clip is taller
   than it is wide, and capped against the viewport height so the line under it
   and the button are both still on screen on a short phone. */
.intro-card{width:min(400px,100%);padding:42px 18px 20px}
.intro-stage{position:relative;width:fit-content;max-width:100%;margin:0 auto;
 border-radius:16px;overflow:hidden;background:#141210;line-height:0;cursor:pointer}
.intro-v{display:block;width:auto;height:auto;max-width:100%;max-height:min(54vh,480px)}
/* Shown when the clip is paused, or when the browser refused to start it. */
.intro-stage::after{content:"";position:absolute;top:50%;left:50%;
 width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;
 background:var(--red);box-shadow:0 8px 22px rgba(0,0,0,.42);
 opacity:0;transition:opacity .2s ease;pointer-events:none}
.intro-stage::before{content:"";position:absolute;top:50%;left:50%;z-index:2;
 transform:translate(-46%,-50%);
 border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent;
 opacity:0;transition:opacity .2s ease;pointer-events:none}
.intro-stage.paused::after,.intro-stage.paused::before{opacity:1}
.intro-snd{position:absolute;right:10px;bottom:10px;z-index:3;
 width:42px;height:42px;border:0;border-radius:50%;cursor:pointer;
 background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;
 box-shadow:0 4px 14px rgba(0,0,0,.4)}
.intro-snd svg{width:22px;height:22px}
.intro-snd .intro-wave{opacity:0}
.intro-snd.on{background:var(--red)}
.intro-snd.on .intro-wave{opacity:1}
.intro-snd.on .intro-cross{opacity:0}
.intro-snd:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.intro-line{margin:14px 0 4px;font-weight:800;font-size:1.02rem;line-height:1.35;
 color:var(--ink)}
@media (prefers-reduced-motion: reduce){
 .intro-stage::after,.intro-stage::before{transition:none}}
.promo-mark{position:absolute;top:-34px;left:50%;transform:translateX(-50%);
 width:68px;height:68px;border-radius:50%;background-size:cover;background-position:center;
 border:3px solid var(--green);background-color:var(--paper);
 box-shadow:0 8px 20px rgba(0,0,0,.25)}
.promo-x{position:absolute;top:10px;right:10px;width:40px;height:40px;
 display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
 background:rgba(44,33,24,.08);color:var(--ink)}
.promo-x:hover{background:rgba(44,33,24,.16)}
.promo-x svg{width:19px;height:19px;fill:none}
.promo-flag{margin:4px 0 6px;font-size:1.25rem;letter-spacing:10px;line-height:1}
.promo-t{margin:0 0 6px;font-family:var(--font-display);text-transform:uppercase;
 font-size:clamp(1.35rem,5.6vw,1.9rem);line-height:1.04;color:var(--green-d)}
.promo-welcome{margin:0 0 14px;font-weight:800;color:var(--orange-d);font-size:1rem}
.promo-body p{margin:0 0 11px;color:var(--muted);line-height:1.55;font-size:.95rem}
.promo-body strong,.promo-nocode{color:var(--ink)}
.promo-nocode{margin:14px 0 4px;font-weight:800;font-size:.92rem;
 background:var(--yellow);color:var(--green-dd);border-radius:12px;padding:10px 14px}
.promo-cta{margin:18px 0 12px}
.promo-cta .btn{width:100%;max-width:330px;font-size:1.02rem}
.promo-thanks{margin:0 0 4px;color:var(--muted);font-size:.86rem}
.promo-sign{margin:0;font-weight:800;color:var(--green-d);font-size:.92rem}
@media(max-width:420px){
 .promo-card{padding:42px 17px 22px;border-radius:20px}
 .promo-body p{font-size:.9rem}
 .promo-nocode{font-size:.85rem}
}
/* Short screens: let the card scroll inside the backdrop instead of clipping. */
@media(max-height:680px){
 .promo{place-items:start center}
 .promo-card{padding-top:44px}
}
@media(prefers-reduced-motion:reduce){
 .promo,.promo-card{transition:none}
 .promo-card{transform:none}
}

/* the offer, still in front of the customer once the popup is gone */
.bb-promo{background:var(--yellow);color:var(--green-dd);font-weight:800;
 font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;
 padding:4px 9px;border-radius:999px;white-space:nowrap}
.bb-promo[hidden]{display:none}
.bp-sum{margin:0 0 6px}
.bp-sum[hidden]{display:none}
.bp-line{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
 padding:5px 0;color:var(--muted);font-size:.9rem}
.bp-line.bp-disc{color:var(--green-d);font-weight:800}
.bp-line.bp-disc span:last-child{white-space:nowrap}
/* The tax reads as a plain cost, not as a discount and not as a warning: the
   restaurant's point is that it is a line like any other, going somewhere else. */
.bp-line.bp-gst{color:var(--muted)}
.bp-line.bp-gst span:last-child{white-space:nowrap}
/* A row hidden on its own has to beat .bp-line's own display:flex, which the
   [hidden] attribute alone does not. Until the tax arrived the whole summary
   block was shown or hidden together and no single row ever needed this, so
   the discount line was sitting there reading -$0.00 the moment GST gave the
   block a second reason to be open. */
.bp-line[hidden]{display:none}
/* Beside the prices on the menu, permanently, so the basket is never a surprise. */
.tax-note{margin:0 0 16px;padding:9px 13px;border-radius:11px;
 background:var(--cream2);border:1px solid var(--border);
 color:var(--muted);font-size:.83rem;line-height:1.5}
/* The temporary strip under the header. It scrolls away with the page rather
   than sticking, because it is an announcement and not a control. */
.gstbar{background:var(--green);color:#fff}
.gstbar[hidden]{display:none}
.gstbar-in{display:flex;align-items:center;gap:14px;
 padding-top:9px;padding-bottom:9px}
.gstbar-t{margin:0;font-size:.82rem;line-height:1.45;flex:1}
.gstbar-x{flex:none;width:30px;height:30px;border:0;border-radius:50%;cursor:pointer;
 background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center}
.gstbar-x:hover{background:rgba(255,255,255,.28)}
.gstbar-x svg{width:15px;height:15px;fill:none}
.gstbar-x:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
@media (max-width:520px){.gstbar-t{font-size:.76rem}}

/* ================= Taco Taco Connect ================= */
/* Deep green so it lifts off the cream the map band sits on, and the mascot on
   the rim so it is recognisably the same brand rather than a link to somewhere
   else. The host is the second loudest thing after the button, because half
   the point of a one-link page is that somebody can read it aloud. */
.cn-band{background:var(--cream2);padding-top:0}
.cn-card{position:relative;text-align:center;border-radius:26px;
 padding:54px 22px 30px;color:#fff;
 background:
  radial-gradient(circle at 14% 16%,rgba(244,195,61,.26),transparent 46%),
  radial-gradient(circle at 86% 84%,rgba(212,58,43,.28),transparent 48%),
  var(--green-dd);
 box-shadow:0 22px 48px rgba(44,33,24,.26)}
.cn-mark{position:absolute;top:-34px;left:50%;transform:translateX(-50%);
 width:68px;height:68px;border-radius:50%;background-size:cover;background-position:center;
 border:3px solid var(--yellow);background-color:var(--paper);
 box-shadow:0 8px 20px rgba(0,0,0,.3)}
.cn-kicker{background:var(--red);color:#fff}
.cn-band .cn-title{color:#fff;margin-bottom:8px}
.cn-band .deco{color:var(--yellow)}
.cn-sub{margin:0 auto 18px;max-width:46ch;color:rgba(255,255,255,.84);line-height:1.55}
.cn-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 22px}
.cn-chip{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
 border-radius:999px;padding:7px 14px;font-size:.82rem;font-weight:700;
 color:rgba(255,255,255,.92)}
.cn-go{margin:0 0 14px}
.cn-go .btn{width:100%;max-width:340px}
.cn-url{margin:0}
.cn-url a{font-family:var(--font-display);text-transform:lowercase;
 font-size:clamp(1.05rem,4.6vw,1.35rem);letter-spacing:.5px;color:var(--yellow);
 border-bottom:2px solid rgba(244,195,61,.45);padding-bottom:2px}
.cn-url a:hover{border-bottom-color:var(--yellow)}
@media(max-width:420px){
 .cn-card{padding:50px 16px 26px;border-radius:22px}
 .cn-chip{font-size:.76rem;padding:6px 11px}
}

/* ================= who the order is for ================= */
/* Sits above the totals, because it is part of the order rather than an
   afterthought, and the three options are one tap each: a segmented row, not a
   select, so nobody has to open a picker to say Pickup. */
.bp-who{display:flex;flex-direction:column;gap:12px;margin:0 0 14px;
 padding:14px 0 0;border-top:1px solid var(--border)}
.bp-field{display:block;margin:0;padding:0;border:0;min-width:0}
.bp-lab{display:block;margin:0 0 6px;padding:0;font-weight:800;font-size:.82rem;
 text-transform:uppercase;letter-spacing:.5px;color:var(--green-d)}
#bp-who-name{width:100%;min-height:48px;padding:11px 14px;border-radius:14px;
 border:2px solid var(--border);background:var(--paper);color:var(--ink);
 font:inherit;font-size:1rem}
#bp-who-name:focus{outline:none;border-color:var(--green)}
#bp-who-name.bad{border-color:var(--red);background:#fff5f3}
.bp-how-row{display:flex;gap:8px}
.bp-opt{flex:1;position:relative;display:flex}
.bp-opt input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.bp-opt span{flex:1;display:flex;align-items:center;justify-content:center;
 min-height:48px;padding:8px 6px;border-radius:14px;border:2px solid var(--border);
 background:var(--paper);font-weight:800;font-size:.86rem;color:var(--muted);
 text-align:center;line-height:1.2;transition:background-color .15s,border-color .15s,color .15s}
.bp-opt input:checked+span{background:var(--green);border-color:var(--green);color:#fff}
.bp-opt input:focus-visible+span{outline:3px solid var(--yellow);outline-offset:2px}
.bp-how.bad .bp-opt span{border-color:var(--red)}
.bp-warn{margin:0;color:var(--red-d);font-weight:700;font-size:.86rem}
/* delivery only: address, when, and the one thing the total cannot include */
.bp-del{display:flex;flex-direction:column;gap:12px;padding:12px 0 0;
 border-top:1px dashed var(--border)}
.bp-del[hidden]{display:none}
#bp-addr{width:100%;min-height:70px;padding:11px 14px;border-radius:14px;resize:vertical;
 border:2px solid var(--border);background:var(--paper);color:var(--ink);
 font:inherit;font-size:1rem;line-height:1.45}
#bp-addr:focus{outline:none;border-color:var(--green)}
#bp-addr.bad{border-color:var(--red);background:#fff5f3}
.bp-when-row{display:flex;gap:8px}
.bp-del-when.bad .bp-opt span{border-color:var(--red)}
#bp-time{width:100%;min-height:48px;margin-top:8px;padding:10px 14px;border-radius:14px;
 border:2px solid var(--border);background:var(--paper);color:var(--ink);font:inherit;font-size:1rem}
#bp-time[hidden]{display:none}
#bp-time:focus{outline:none;border-color:var(--green)}
.bp-del-note{margin:0;color:var(--muted);font-size:.8rem;line-height:1.5;
 background:rgba(244,195,61,.18);border-radius:12px;padding:10px 12px}
/* what the basket says once the order has gone */
.bp-sent{text-align:center;padding:22px 8px}
.bp-sent p{margin:0 0 14px;color:var(--green-d);font-weight:800}
#bp-undo{cursor:pointer}
.bp-warn[hidden]{display:none}
@media(max-width:380px){
 .bp-opt span{font-size:.78rem;padding:8px 3px}
}

/* ================= "is this your final order?" ================= */
/* One more tap before the order leaves, because the next thing that happens is
   a WhatsApp draft and a customer who forgot the drinks is now in a back and
   forth with the kitchen. It sits inside the basket panel, above it, so the
   order is still behind it rather than replaced by it. */
.bp-ask{position:absolute;inset:0;z-index:2;display:grid;place-items:center;
 padding:18px;background:rgba(18,63,29,.55);backdrop-filter:blur(2px)}
.bp-ask[hidden]{display:none}
.bp-ask-card{width:min(420px,100%);background:var(--paper);border:3px solid var(--green);
 border-radius:20px;padding:22px 20px 18px;text-align:center;
 box-shadow:0 22px 50px rgba(0,0,0,.34)}
.bp-ask-t{margin:0 0 8px;font-family:var(--font-display);text-transform:uppercase;
 letter-spacing:.4px;font-size:1.12rem;line-height:1.15;color:var(--green-d)}
.bp-ask-sum{margin:0 0 6px;font-weight:800;color:var(--ink);font-size:.98rem;line-height:1.45}
.bp-ask-note{margin:0 0 16px;color:var(--muted);font-size:.84rem;line-height:1.45}
.bp-ask .bp-actions{margin:0}

/* ================= reviews page ================= */
.rev-hero{background:var(--cream2)}
/* One file, two shapes. 1200/696 on a wide screen is the whole frame; 3/2 on a
   phone trims the sides only, and the nudge right keeps the road sign in. */
.rev-shot{margin:0 0 26px;border-radius:var(--radius);overflow:hidden;
 border:3px solid var(--paper);box-shadow:0 16px 36px rgba(44,33,24,.18);
 background:var(--cream);aspect-ratio:1200/696}
.rev-shot img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;cursor:zoom-in}
@media(max-width:640px){
 .rev-shot{aspect-ratio:3/2;margin-bottom:20px}
 .rev-shot img{object-position:62% 48%}
}
.rev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(286px,1fr));gap:18px}
.rev{margin:0;background:var(--paper);border:1px solid var(--border);border-radius:18px;padding:22px 22px 20px;
 box-shadow:0 8px 22px rgba(44,33,24,.07);display:flex;flex-direction:column;gap:10px}
.rev-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.rev-top .stars{font-size:1.05rem}
.rev-date{color:var(--muted);font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.6px}
.rev blockquote{margin:0;color:var(--ink);line-height:1.55;flex:1}
.rev figcaption{color:var(--green-d);font-weight:800;font-size:.9rem}

/* ================= visit band (home) ================= */
.visit-sec{background:var(--cream2)}
.visit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.visit-card{background:var(--paper);border:1px solid var(--border);border-radius:18px;padding:22px;text-align:center}
.visit-card h2,.visit-card h3,.visit-card h4,.visit-card h5,.visit-card h6{margin:0 0 8px;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.5px;
 color:var(--green-d);font-size:1rem}
.visit-card p{margin:0 0 14px;color:var(--muted);line-height:1.5}
.visit-card a[href^="tel"]{color:var(--green);font-weight:800}

/* ================= map ================= */
.map-wrap{border-radius:20px;overflow:hidden;border:3px solid var(--paper);
 box-shadow:0 16px 36px rgba(44,33,24,.18);aspect-ratio:16/9;background:var(--cream2)}
@media(max-width:640px){.map-wrap{aspect-ratio:4/5}}
.map-wrap iframe{width:100%;height:100%;border:0;display:block}
.map-cta{text-align:center;margin:18px 0 0}

/* ================= find us: map beside the details ================= */
.visit-split{display:grid;grid-template-columns:1.35fr .65fr;gap:22px;align-items:stretch}
@media(max-width:760px){.visit-split{grid-template-columns:1fr}}
.visit-split .map-wrap{aspect-ratio:auto;min-height:340px}
.visit-facts{display:flex;flex-direction:column;gap:12px}
.fact{background:var(--paper);border:1px solid var(--border);border-radius:16px;padding:16px 18px;flex:1;
 display:flex;flex-direction:column;justify-content:center}
.fact h2,.fact h3,.fact h4,.fact h5,.fact h6{margin:0 0 5px;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.5px;
 color:var(--green-d);font-size:.92rem}
.fact p{margin:0;color:var(--muted);line-height:1.5;font-size:.94rem}

/* ================= 404 ================= */
.nf-sec{padding:72px 0 88px}
.nf-sec .map-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ================= deals: home carousel ================= */
.deals-band{background:var(--cream2)}
.dcar{position:relative;max-width:520px;margin:0 auto}
.dcar-view{height:min(72vh,560px);border-radius:20px;overflow:hidden;background:var(--green-dd);
 box-shadow:0 18px 44px rgba(44,33,24,.26)}
.dcar-track{display:flex;height:100%;transition:transform .55s cubic-bezier(.22,.9,.3,1)}
.dcar-slide{flex:0 0 100%;position:relative;display:block;height:100%;text-decoration:none}
.dcar-slide img{width:100%;height:100%;object-fit:contain;display:block}
.dcar-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 14px;display:flex;
 align-items:baseline;gap:10px;flex-wrap:wrap;justify-content:center;text-align:center;
 background:linear-gradient(transparent,rgba(0,0,0,.82))}
.dcar-cap b{color:#fff;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.4px;font-size:1rem}
.dcar-cap em{color:var(--yellow);font-style:normal;font-weight:900}
.dcar-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
 border:0;cursor:pointer;background:rgba(255,255,255,.92);color:var(--green-dd);font-size:1.7rem;line-height:1;
 box-shadow:0 8px 20px rgba(0,0,0,.28)}
.dcar-nav:hover{background:var(--yellow)}
.dcar-prev{left:-10px}.dcar-next{right:-10px}
@media(max-width:560px){.dcar-prev{left:4px}.dcar-next{right:4px}}
.dcar-dots{display:flex;gap:8px;justify-content:center;margin-top:14px}
.dcar-dot{width:9px;height:9px;padding:0;border-radius:50%;border:0;cursor:pointer;
 background:rgba(44,33,24,.24)}
.dcar-dot.on{background:var(--red);transform:scale(1.25)}

/* ================= deals page ================= */
.deal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:22px;align-items:start}
.deal{background:var(--paper);border:1px solid var(--border);border-radius:20px;overflow:hidden;
 box-shadow:0 10px 26px rgba(44,33,24,.10);transition:transform .3s cubic-bezier(.22,.9,.3,1),box-shadow .3s ease;
 scroll-margin-top:96px}
.deal:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(44,33,24,.20)}
.deal.is-target{border-color:var(--red);box-shadow:0 0 0 3px rgba(212,58,43,.28),0 22px 46px rgba(44,33,24,.22)}
.deal-flyer{background:var(--green-dd);display:block}
.deal-flyer img{width:100%;height:auto;display:block}
.deal-body{padding:18px}
.deal-day{display:inline-block;background:var(--red);color:#fff;font-weight:800;font-size:.7rem;
 text-transform:uppercase;letter-spacing:1px;padding:4px 10px;border-radius:999px;margin-bottom:8px}
.deal-title{font-family:var(--font-display);text-transform:uppercase;color:var(--green-d);
 font-size:1.15rem;margin:0 0 6px;line-height:1.1}
.deal-desc{color:var(--muted);margin:0 0 10px;font-size:.92rem;line-height:1.5}
.deal-price{font-family:var(--font-display);color:var(--red);font-size:1.5rem;margin-bottom:4px}
.deal-note{margin:0 0 10px;color:var(--red-d);font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.5px}
.deal-opts{border-top:1px dashed rgba(44,33,24,.18);padding-top:12px;margin-top:10px;
 display:flex;flex-direction:column;gap:12px}
.opt-head{font-family:var(--font-display);text-transform:uppercase;font-size:.78rem;letter-spacing:1px;color:var(--green-d)}
.opt{display:flex;flex-direction:column;gap:6px}
.opt-label{font-weight:800;font-size:.84rem;color:var(--ink)}
.opt-selects{display:flex;flex-wrap:wrap;gap:8px}
.opt-sel{flex:1 1 130px;min-height:44px;font-family:var(--font-body);font-size:.88rem;padding:8px 10px;
 border:1px solid var(--border);border-radius:12px;background:#fff;color:var(--ink)}
.opt-sel:focus{outline:2px solid var(--green);outline-offset:1px}
.opt-sel.bad{border-color:var(--red);background:#fff6f5}
.opt-radios{display:flex;flex-wrap:wrap;gap:8px}
.opt-radios input{position:absolute;opacity:0;pointer-events:none}
.opt-radios label{cursor:pointer;min-height:44px;display:inline-flex;align-items:center;gap:6px;
 border:2px solid var(--border);background:#fff;border-radius:999px;padding:8px 14px;font-weight:700;font-size:.86rem}
.opt-radios label em{font-style:normal;color:var(--green);font-weight:900}
.opt-radios input:checked+label{border-color:var(--green);background:var(--green);color:#fff}
.opt-radios input:checked+label em{color:var(--yellow)}
.opt-radios input:focus-visible+label{outline:2px solid var(--green);outline-offset:2px}
.deal-warn{margin:10px 0 0;color:var(--red-d);font-weight:800;font-size:.82rem}
.deal-add{width:100%;margin-top:12px;min-height:48px}
.deal-add.added{background:var(--green)}

/* basket lines for a deal: show the chosen options */
.bp-opts{display:block;color:var(--muted);font-size:.78rem;line-height:1.45;margin-top:2px}

/* .opt sets display:flex, which beats the UA's [hidden]{display:none};
   without this a hidden option group stays visible. */
.opt[hidden]{display:none}

/* ================= content hub: post cards ================= */
.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.post{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--border);
 border-radius:20px;overflow:hidden;text-decoration:none;box-shadow:0 10px 26px rgba(44,33,24,.10);
 transition:transform .3s cubic-bezier(.22,.9,.3,1),box-shadow .3s ease}
.post:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(44,33,24,.20)}
.post-img{display:block;background:var(--cream2)}
.post-img img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.post-body{display:flex;flex-direction:column;gap:8px;padding:18px}
.post-date{color:var(--muted);font-weight:800;font-size:.74rem;text-transform:uppercase;letter-spacing:.8px}
.post-title{font-family:var(--font-display);text-transform:uppercase;color:var(--green-d);
 font-size:1.12rem;line-height:1.15}
.post-ex{color:var(--muted);font-size:.92rem;line-height:1.5}
.post-more{color:var(--red);font-weight:800;font-size:.84rem;text-transform:uppercase;letter-spacing:.6px}

/* ================= article ================= */
.art-wrap{max-width:720px}
.art-back{margin:0 0 14px}
.art-back a{color:var(--muted);font-weight:800;font-size:.82rem;text-transform:uppercase;letter-spacing:.6px}
.art-back a:hover{color:var(--red)}
.art-title{font-family:var(--font-display);text-transform:uppercase;color:var(--green-d);
 font-size:clamp(1.7rem,4.4vw,2.6rem);line-height:1.05;margin:6px 0 10px;text-wrap:balance}
.art-date{color:var(--muted);font-weight:700;font-size:.86rem;margin:0 0 22px}
.art-hero{margin:0 0 26px;border-radius:20px;overflow:hidden;box-shadow:0 16px 36px rgba(44,33,24,.20)}
.art-hero img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.art p{color:var(--ink);line-height:1.72;font-size:1.04rem;margin:0 0 18px}
.art p strong{color:var(--green-d)}
.art-h{font-family:var(--font-display);text-transform:uppercase;color:var(--red);
 font-size:1.25rem;letter-spacing:.3px;margin:32px 0 12px}
.art-fig{margin:24px 0;border-radius:18px;overflow:hidden;box-shadow:0 12px 30px rgba(44,33,24,.18)}
/* The column is 720px on a desktop and most of the food is shot portrait, so a
   photograph served whole stands 960px tall here: most of a laptop screen for
   one picture, with the article pushed off the bottom. Cropping to 3:2 keeps
   the dish filling the frame at a size you can read around. The whole
   photograph is still one tap away, because the figure opens the lightbox. */
.art-fig img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover}
.art-kicker{font-family:var(--font-display);text-transform:uppercase;color:var(--green-d);
 font-size:1.15rem;letter-spacing:.5px;text-align:center;background:var(--cream2);
 border-radius:16px;padding:18px;margin:26px 0}
.art-cta{margin:26px 0;text-align:center}
.art-social{display:flex;justify-content:center;margin:26px 0}
.art-social .socials{margin-top:0}
.art-social .soc{background:var(--green-d);border-color:var(--green-d);color:#fff}
.art-social .soc:hover{background:var(--yellow);border-color:var(--yellow);color:var(--green-dd)}

/* seven nav items: tighten the gap on mid widths so they stay on one line */
@media(min-width:861px) and (max-width:1120px){.nav-links{gap:18px}.nav-links a{font-size:.82rem}}

/* ================= rotating review cards (home) ================= */
.rcard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:14px;margin-top:24px}
.rcard{margin:0;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
 border-radius:18px;padding:16px;overflow:hidden;height:264px;display:flex}
/* The old version moved 16px and faded, which on a card this size read as a
   flicker rather than a change. The review now leaves the card completely,
   upward, and the next one comes up from below the bottom edge into its place:
   the card is clipped, so what you see is one sliding out and one sliding in. */
.rcard-in{display:flex;flex-direction:column;gap:9px;width:100%;
 transition:transform .46s cubic-bezier(.2,1.16,.36,1),opacity .3s ease .08s}
.rcard-in.out{transform:translateY(-118%);opacity:0;          /* leaves upward */
 transition:transform .3s cubic-bezier(.45,0,.75,.25),opacity .24s ease}
/* Snapped, not animated, into the starting place below the card: the slide the
   reader should see is the one coming up, not this one going down. */
.rcard-in.in{transform:translateY(118%);opacity:0;transition:none}
.rcard blockquote{margin:0;color:rgba(255,255,255,.93);font-size:.9rem;line-height:1.5;flex:1;
 display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;overflow:hidden}
.rcard figcaption{color:var(--yellow);font-weight:800;font-size:.86rem}
.rcard .stars{font-size:1rem;color:rgba(255,255,255,.26)}
.rev-band .rev-band-in{margin-bottom:4px}
/* One column on a phone means a wider card, so fewer lines hold the same words. */
@media (max-width:560px){.rcard{height:224px}.rcard blockquote{-webkit-line-clamp:6}}

/* shared review chrome */
.rev-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rev-src{font-size:.66rem;text-transform:uppercase;letter-spacing:.9px;font-weight:800;opacity:.72}
.rev-notext{margin:0;color:var(--muted);font-style:italic;font-size:.9rem;flex:1}
.rev figcaption{color:var(--green-d);font-weight:800;font-size:.9rem}

@media (prefers-reduced-motion: reduce){.rcard-in{transition:none}}


/* ================= photo lightbox =================
   Tap any dish photograph to see it full size. The thumbnails are small by
   design; this is how a guest actually inspects the food before ordering. */
[data-zoom]{cursor:zoom-in}
button.mi-thumb,button.fav-img{border:0;padding:0;font:inherit;color:inherit;display:block}
button.mi-thumb:focus-visible,button.fav-img:focus-visible,
[data-zoom]:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
html.lb-open,html.lb-open body{overflow:hidden}

.lb{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
 padding:26px 18px;background:rgba(24,16,8,.88);opacity:0;visibility:hidden;
 transition:opacity .28s ease,visibility .28s ease}
.lb.on{opacity:1;visibility:visible}
.lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;
 max-width:min(1040px,100%);max-height:100%;
 transform:scale(.94);transition:transform .34s cubic-bezier(.22,.9,.3,1)}
.lb.on .lb-fig{transform:none}
.lb-img{display:block;max-width:100%;max-height:76vh;object-fit:contain;
 border-radius:18px;background:var(--cream);box-shadow:0 30px 70px rgba(0,0,0,.52)}
.lb-cap{color:#fff;font-weight:800;font-size:1rem;text-align:center;line-height:1.4;
 text-shadow:0 2px 10px rgba(0,0,0,.5)}
.lb-close{position:absolute;top:14px;right:14px;width:46px;height:46px;border-radius:50%;
 border:0;background:rgba(255,255,255,.16);color:#fff;font-size:1.6rem;line-height:1;
 cursor:pointer;transition:background .2s ease}
.lb-close:hover{background:rgba(255,255,255,.3)}
.lb-close:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
@media (prefers-reduced-motion: reduce){.lb,.lb-fig{transition:none}}

/* ================= what is cooking: drifting video chips =================
   A square stage with the clip thumbnails floating round it, bumping off the
   walls and each other. Without JavaScript they simply sit in a grid, and every
   chip is a real link, so the section works either way. */
.reel-sec .sec-sub{max-width:640px;margin-left:auto;margin-right:auto}
.reel{position:relative;width:min(100%,560px);margin:26px auto 0;
 border-radius:28px;overflow:hidden;
 background:radial-gradient(120% 100% at 50% 0%,rgba(31,92,46,.10),rgba(31,92,46,.02) 60%),
            linear-gradient(160deg,var(--cream),var(--cream2));
 border:1px solid var(--border);
 display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:16px;place-items:center}
/* Square only once the chips are drifting inside it. Without JavaScript the six
   of them sit in a plain grid and the box grows to hold them. */
html.js .reel{display:block;padding:0;aspect-ratio:1;min-height:min(92vw,560px)}

.chip{position:relative;display:block;width:100%;max-width:190px;aspect-ratio:1;border-radius:50%;
 overflow:hidden;text-decoration:none;background:var(--cream2);
 box-shadow:0 14px 30px rgba(44,33,24,.22);border:3px solid rgba(255,255,255,.9)}
/* Six in the box rather than four, so each one is smaller: at 42% they would
   be shoulder to shoulder with nowhere to drift. */
html.js .chip{position:absolute;top:0;left:0;width:30%;max-width:none;
 will-change:transform;transition:box-shadow .25s ease;
 /* keeps the chip on its own compositing layer: iOS was rebuilding the layer on
    every transform change, which is what the flicker looked like */
 -webkit-backface-visibility:hidden;backface-visibility:hidden}
.chip-img{position:absolute;inset:0;background-size:cover;background-position:center}
.chip::after{content:"";position:absolute;inset:0;border-radius:50%;
 background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0) 55%)}
.chip-play{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;
 border-radius:50%;background:var(--red);box-shadow:0 6px 18px rgba(0,0,0,.35);z-index:2}
.chip-play::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
 border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent}
/* The chip is a circle, so near its bottom edge there is far less width than
   the square box suggests: a caption pinned at 9% was being cut off by the
   round mask, not by its own box. Sitting it higher, where the circle is still
   wide, is what lets a long title read. */
.chip-cap{position:absolute;left:11%;right:11%;bottom:15%;z-index:2;text-align:center;color:#fff;
 font-weight:800;font-size:.78rem;line-height:1.2;text-shadow:0 2px 8px rgba(0,0,0,.6);
 overflow-wrap:anywhere}
.chip:hover{box-shadow:0 20px 40px rgba(44,33,24,.34)}
.chip:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.chip-spare{display:none}
html.js .chip-play{width:40px;height:40px;margin:-20px 0 0 -20px}
html.js .chip-cap{font-size:.6rem;line-height:1.15}
@media (max-width:420px){html.js .chip-play{width:32px;height:32px;margin:-16px 0 0 -16px}
 html.js .chip-cap{font-size:.55rem}}

/* the clip swapping in when there are more clips than places to show them */
.chip-img{transition:opacity .45s ease}
.chip.swapping .chip-img{opacity:0}
@media (prefers-reduced-motion: reduce){.chip-img{transition:none}}

/* ================= gallery: the players themselves ================= */
.vplay-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;
 margin-top:22px}
.vplay{margin:0;background:#141210;border-radius:18px;overflow:hidden;
 box-shadow:0 14px 34px rgba(44,33,24,.22)}
.vplay video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;background:#141210}
.vplay figcaption{padding:11px 14px 13px;color:#fff;font-weight:800;font-size:.9rem}
.vplay.cued{outline:3px solid var(--yellow);outline-offset:3px}
/* A clip we host on YouTube rather than in the deploy. The face is our own
   poster at the same 9:16 as the players beside it, so the grid does not jump,
   and the YouTube player is only fetched once somebody taps it. */
.ytface{position:relative;display:block;width:100%;aspect-ratio:9/16;
 background:#141210 center/cover no-repeat;cursor:pointer}
.ytface::after{content:"";position:absolute;inset:0;
 background:linear-gradient(to top,rgba(0,0,0,.45),rgba(0,0,0,0) 55%)}
.ytface-play{position:absolute;top:50%;left:50%;width:62px;height:62px;margin:-31px 0 0 -31px;
 border-radius:50%;background:var(--red);box-shadow:0 8px 22px rgba(0,0,0,.42);z-index:2;
 transition:transform .18s ease}
.ytface-play::after{content:"";position:absolute;top:50%;left:55%;transform:translate(-50%,-50%);
 border-left:19px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent}
.ytface:hover .ytface-play{transform:scale(1.07)}
.ytface:focus-visible{outline:3px solid var(--yellow);outline-offset:-3px}
.vplay iframe{display:block;width:100%;height:auto;aspect-ratio:9/16;border:0;background:#141210}
@media (prefers-reduced-motion: reduce){.ytface-play{transition:none}
 .ytface:hover .ytface-play{transform:none}}

/* ================= about: the spread beside the copy =================
   Two columns on a wide screen with the photograph taking a little under half.
   On a phone it stacks: heading, copy, the tall photograph, then the points. */
.about-wrap{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
@media (min-width:900px){
 .about-wrap{grid-template-columns:1fr 0.85fr;gap:40px}
 .about-copy .sec-kicker,.about-copy .sec-title{text-align:left}
 .about-copy .sec-title{margin-left:0}
}
.about-copy .sec-kicker{display:block;margin-bottom:8px}
.about-copy .sec-title{margin:0 0 14px}
.about-lead{margin:0 0 14px;color:rgba(255,255,255,.90);font-size:1rem;line-height:1.65}
.about .sec-kicker{color:var(--yellow)}
.about-lead:last-child{margin-bottom:0}

.about-shot{margin:0;border-radius:22px;overflow:hidden;
 box-shadow:0 20px 44px rgba(44,33,24,.24);background:var(--cream2)}
.about-shot img{display:block;width:100%;height:auto}

/* three compact points, not the old oversized boxes */
.about-points{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
 gap:14px;margin-top:30px}
.apoint{background:var(--paper);border:1px solid var(--border);border-radius:16px;
 padding:18px 18px 16px}
.apoint h2,.apoint h3,.apoint h4,.apoint h5,.apoint h6{margin:10px 0 6px;text-align:center;font-size:1rem;color:var(--green-d);letter-spacing:.2px}
.apoint p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55}
.apoint-ico{display:flex;align-items:center;justify-content:center;margin:0 auto 2px;
 width:46px;height:46px;border-radius:14px;background:rgba(31,92,46,.09)}
.apoint-ico svg{width:26px;height:26px;color:var(--green-d)}
/* Each mark takes its own colour, and its tile a wash of the same, so the three
   read as a set rather than three unrelated pictures. The orange is a shade
   deeper than the brand orange: at brand strength a solid flame on this cream
   measures 2.9 to 1 against the card, which is under the floor for a shape you
   are meant to be able to make out. This one is 4 to 1 and still plainly orange. */
.apoint-ico.ico-flame{background:rgba(224,123,40,.13)}
.apoint-ico.ico-flame svg{color:var(--orange-d)}
.apoint-ico.ico-chili{background:rgba(212,58,43,.12)}
.apoint-ico.ico-chili svg{color:var(--red)}
.apoint-ico.ico-bag{background:rgba(138,84,36,.13)}
.apoint-ico.ico-bag svg{color:var(--brown)}
.apoint-ico svg .f{fill:currentColor;stroke:none}
.apoint-ico svg .s{fill:none;stroke:currentColor;stroke-width:1.9;
 stroke-linecap:round;stroke-linejoin:round}

.about-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:28px 0 0}
@media (min-width:900px){.about-cta{justify-content:flex-start}}
.about-cta .btn{margin:0}


/* ===== fly in with a pop =====
   Cards start below their place and small, then spring up as they scroll into
   view. Every few seconds they break rank one after the other and jump at the
   reader. Two separate animations rather than one: the entrance runs once and
   hands over to .pop-done, so the repeating jump never fights it for the
   animation shorthand. Anyone who asked their phone for less motion gets the
   cards sitting still, fully visible, with no sound. */
.pop-in{opacity:0;transform:translateY(30px) scale(.8)}
.pop-in.popped{animation:ttPopIn .56s cubic-bezier(.2,1.42,.36,1) both}
.pop-done{opacity:1}
@keyframes ttPopIn{
  0%{opacity:0;transform:translateY(30px) scale(.8)}
 55%{opacity:1;transform:translateY(-9px) scale(1.07)}
 78%{transform:translateY(2px) scale(.985)}
100%{opacity:1;transform:none}}

.pop-jump{animation:ttPopJump .66s cubic-bezier(.24,1.3,.38,1)}
@keyframes ttPopJump{
  0%{transform:none}
 32%{transform:translateY(-12px) scale(1.075)}
 58%{transform:translateY(1px) scale(.982)}
 80%{transform:translateY(-3px) scale(1.012)}
100%{transform:none}}

/* The spring overshoots past the card's own box, so give it room to grow into
   and keep it above its neighbours while it is mid-jump. */
.about-points,.rev-grid{overflow:visible}
.pop-jump,.pop-in.popped{position:relative;z-index:2}

@media (prefers-reduced-motion: reduce){
 .pop-in,.pop-in.popped,.pop-done{opacity:1;transform:none;animation:none}
 .pop-jump{animation:none}}

/* ===== language switch =====
   Between the logo and the menu options, as asked, which on a phone is between
   the logo and Browse. Both languages are always shown with the current one
   filled in, so the reader can see which they are on and reach the other in one
   tap, rather than guessing what a single flag or code would do. */
.lang-switch{display:inline-flex;flex:0 0 auto;margin:0 10px 0 auto;
 border:1.5px solid var(--green-d);border-radius:999px;overflow:hidden;
 background:rgba(255,255,255,.55)}
.lang-switch a{display:block;padding:5px 11px;font-weight:800;font-size:.72rem;
 letter-spacing:.08em;color:var(--green-d);text-decoration:none;line-height:1.15;
 transition:background .18s ease,color .18s ease}
.lang-switch a + a{border-left:1.5px solid var(--green-d)}
.lang-switch a.on{background:var(--green-d);color:#fff}
.lang-switch a:not(.on):hover{background:rgba(31,92,46,.12)}
.lang-switch a:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
/* Desktop puts the links in the middle of the bar, so the switch stops being
   the thing that pushes them off centre. */
@media(min-width:861px){.lang-switch{margin:0 0 0 16px}}
/* On a phone the bar is logo, switch, Browse, and the wordmark was losing its
   second line to the switch. Trim the switch, not the brand. */
@media(max-width:860px){
 .lang-switch{margin:0 auto 0 14px}
 .lang-switch a{padding:5px 8px;font-size:.66rem;letter-spacing:.06em}
 .brand-full{white-space:nowrap}
 .brand{min-width:0}}
@media(max-width:380px){.lang-switch a{padding:4px 7px;font-size:.62rem}}
/* Spanish words are longer than English ones. Keep the two header buttons on
   one line rather than letting the bar grow a second row. */
.mnav-toggle,.info-toggle{white-space:nowrap}
@media(max-width:430px){.mnav-toggle{padding-left:14px;padding-right:14px;font-size:.82rem}}

/* ===== common questions =====
   Answers in the open, not folded into an accordion. A reader scanning on a
   phone will not open ten panels to find the one about delivery, and the whole
   point of the section is that the answer is there without a second tap. */
.faq-sec{background:linear-gradient(180deg,var(--cream2),var(--cream))}
.qa-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:26px}
@media(min-width:820px){.qa-grid{grid-template-columns:1fr 1fr;gap:16px 26px}}
.qa{background:var(--paper);border:1px solid var(--border);border-radius:16px;
 padding:18px 18px 16px}
.qa h2,.qa h3,.qa h4,.qa h5,.qa h6{margin:0 0 7px;font-family:var(--font-display);font-size:1rem;line-height:1.35;
 color:var(--green-d)}
.qa p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.6}

/* A tile that has not been filled in yet is a quiet cream panel rather than a
   hole, so a fast scroll past the gallery never shows the page half built. */
.gitem img.lz-wait{background:linear-gradient(150deg,var(--cream),var(--cream2))}