/* BTW site styles: shared by every page. */

/* Concept C: Cobalt & Signal.
   Bold complementary pair: deep cobalt (cool) and signal red-orange (warm), with cream.
   Design language: heavy sentence-case grotesque, solid color blocks, rounded cards, pill buttons. */
:root{
  --ink:#0B1531;        /* deep cobalt-navy: page background */
  --ink-rgb:11,21,49;
  --cobalt:#1C3B91;     /* bold cobalt blocks */
  --cobalt-2:#132A66;   /* cards on ink */
  --cobalt-3:#0F2152;   /* deeper cards */
  --line:rgba(245,238,225,.14);
  --cream:#F6EFE2;      /* text */
  --cream-dim:#B7BFD6;  /* secondary text, cool */
  --signal:#F2552C;     /* signal red-orange: primary accent */
  --signal-dk:#CC3F1B;
  --display:'Bricolage Grotesque','Arial Black',Arial,sans-serif;
  --body:'DM Sans',Arial,sans-serif;
  --wrap:1240px;
  --r:26px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--cream);font:400 18px/1.6 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:800;line-height:.95;letter-spacing:-.03em}
p{margin:0 0 1em}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Photo placeholder: warm, so it reads like food against the cobalt */
.ph{position:relative;overflow:hidden;background:
  radial-gradient(55% 50% at 55% 45%,rgba(242,140,70,.55),transparent 70%),
  radial-gradient(35% 35% at 30% 70%,rgba(200,60,30,.5),transparent 70%),
  linear-gradient(160deg,#3A2418,#170E0A)}
.ph span{position:absolute;left:16px;bottom:14px;font:600 12px/1.3 var(--body);letter-spacing:.04em;color:var(--cream);background:rgba(var(--ink-rgb),.7);padding:7px 12px;border-radius:999px}

/* Title block: a solid signal band */
.titlebar{background:var(--signal);color:var(--ink);font:600 14px/1 var(--body)}
.titlebar .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;padding-top:10px;padding-bottom:10px}
.titlebar a{text-decoration:none}
.titlebar a:hover{text-decoration:underline}

/* Seasonal notice: one slim line under the logo and nav block */
/* Fixed Miracle colors (independent of the palette) so the bar always stands apart from the address strip and header */
.notice{--mir-bg:#1F5A3D;--mir-text:#F4F1EB;--mir-dim:#D3E2D8;background:var(--mir-bg);border-bottom:1px solid rgba(0,0,0,.25);font:500 14px/1.35 var(--body);color:var(--mir-dim)}
.notice .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 20px;padding-top:9px;padding-bottom:9px}
.notice p{margin:0}
.notice strong{font:800 15px/1 var(--display);letter-spacing:-.01em;color:var(--mir-text);margin-right:4px}
.notice__links{display:flex;align-items:center;gap:16px;white-space:nowrap}
.notice a{font-weight:700;text-decoration:none}
.notice__call{background:var(--signal);color:#fff;padding:5px 12px;border-radius:999px}
.notice__link{color:var(--mir-text)}
.notice__link:hover{text-decoration:underline}
.notice__call:hover{background:var(--signal-dk)}
@media (max-width:1180px){.notice__more{display:none}}
@media (max-width:560px){.notice .wrap{gap:6px 14px;padding-top:7px;padding-bottom:7px}.notice{font-size:13px}.notice__links{gap:12px;align-items:center}.notice__phone{display:none}}

/* Header */
.header{position:sticky;top:0;z-index:20;background:var(--ink);border-bottom:1px solid var(--line)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:80px;gap:20px}
/* TODO: replace with BTW logo file */
/* Brand: BTW logo badge, then the typed BTW wordmark with its accent dot, then the Burgers Tacos Waffles label */
.brand{display:flex;align-items:center;gap:12px;font:800 38px/1 var(--display);letter-spacing:-.04em;text-decoration:none;color:var(--cream)}
.brand img{display:block;height:72px;width:auto;margin-right:2px}
.brand{flex:none}
/* the accent dot belongs to the wordmark itself, so it sits on the baseline at every size */
.brand__word::after{content:"";display:inline-block;width:.3em;height:.3em;border-radius:50%;background:var(--signal);margin-left:.06em;vertical-align:baseline}
.brand small{display:block;font:600 12px/1.25 var(--body);letter-spacing:.02em;color:var(--cream-dim);max-width:9ch}
@media (max-width:600px){.brand{gap:10px;font-size:32px}.brand img{height:54px}.brand small{font-size:11px}}
.nav{display:flex;align-items:center;gap:6px}
.nav a{text-decoration:none;font:600 16px/1 var(--body);color:var(--cream);padding:11px 16px;border-radius:999px}
.nav a:not(.btn):hover{background:var(--cobalt-2)}

/* Buttons: pills */
.btn{display:inline-flex;align-items:center;justify-content:center;font:700 16px/1 var(--body);text-decoration:none;padding:17px 30px;border-radius:999px;border:2px solid var(--cream);color:var(--cream);background:transparent;transition:background .2s,color .2s,border-color .2s,transform .15s}
.btn:hover{background:var(--cream);color:var(--ink)}
.btn--solid{background:var(--signal);border-color:var(--signal);color:var(--cream)}
.btn--solid:hover{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.btn:active{transform:scale(.98)}
.nav .btn{padding:13px 24px;margin-left:8px}

/* Mobile and tablet menu: full-screen panel */
.mnav{display:none}
.mnav summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;font:700 15px/1 var(--body);color:var(--cream);padding:12px 18px;min-height:48px;border-radius:999px;background:var(--cobalt-2)}
.mnav summary::-webkit-details-marker{display:none}
.mnav__bars{width:20px;height:12px;position:relative;border-top:2px solid var(--signal);border-bottom:2px solid var(--signal)}
.mnav__bars::after{content:"";position:absolute;left:0;right:0;top:3px;border-top:2px solid var(--signal)}
.mnav[open] .mnav__bars{border-color:transparent}
.mnav[open] .mnav__bars::before,.mnav[open] .mnav__bars::after{content:"";position:absolute;left:0;right:0;top:3px;border-top:2px solid var(--signal)}
.mnav[open] .mnav__bars::before{transform:rotate(45deg)}
.mnav[open] .mnav__bars::after{transform:rotate(-45deg)}
.mnav__panel{position:fixed;left:0;right:0;top:var(--hdr,80px);bottom:0;background:var(--ink);padding:20px 24px 120px;overflow-y:auto;display:flex;flex-direction:column}
.mnav__panel a.big{font:800 44px/1 var(--display);letter-spacing:-.03em;text-decoration:none;color:var(--cream);padding:16px 0;border-bottom:1px solid var(--line)}
.mnav__panel a.big:hover{color:var(--signal)}
.mnav__ctas{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.mnav__meta{margin-top:28px;color:var(--cream-dim);font-size:16px}
.mnav__meta a{color:var(--signal);text-decoration:none}
@media (max-width:900px){
  .nav{display:none}
  .mnav{display:block}
  .mnav__panel{z-index:40}
}
@media (max-width:420px){.mnav__ctas{grid-template-columns:1fr}.mnav__panel a.big{font-size:34px;padding:13px 0}}

/* ================= HERO SHOW =================
   Height: the window minus the address strip (34px), logo and nav (80px), and Miracle bar (48px) on desktop.
   Full-width, full-screen slides; the headline changes with every slide and the show just cycles. */
.hero{position:relative;height:calc(100vh - 162px);min-height:440px;max-height:1000px;overflow:hidden;background:var(--ink)}
.hero--menu{height:calc(100vh - 114px)}
.show{position:absolute;inset:0}
.slide{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transition:opacity 1.2s ease,visibility 0s linear 1.2s}
.slide.is-on{opacity:1;visibility:visible;z-index:1;transition:opacity 1.2s ease,visibility 0s}
.slide__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide .ph span{z-index:2;top:24px;bottom:auto;right:auto;left:max(24px, calc((100vw - var(--wrap))/2 + 24px))}
.slide[data-chapter="atmosphere"] .ph{background:radial-gradient(70% 60% at 35% 40%,rgba(242,170,90,.45),transparent 70%),radial-gradient(30% 25% at 72% 30%,rgba(255,220,170,.35),transparent 70%),linear-gradient(170deg,#2E2016,#120C09)}
.slide[data-chapter="awards"] .ph{background:radial-gradient(50% 50% at 70% 50%,rgba(242,85,44,.55),transparent 70%),linear-gradient(160deg,#2A1A12,#110B08)}
.slide__text{position:absolute;z-index:2;left:0;right:0;bottom:150px;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.slide__kicker{display:inline-flex;gap:10px;font:700 14px/1 var(--body);color:var(--cream);background:var(--cobalt);padding:10px 16px;border-radius:999px;margin:0 0 24px}
.slide__kicker span:empty{display:none}
.slide__title{font:800 clamp(46px,min(10.5vw,14.5vh),172px)/.9 var(--display);letter-spacing:-.04em;margin:0;color:var(--cream);overflow-wrap:anywhere}
.slide__title em{font-style:normal;color:var(--signal)}
.slide__desc{max-width:50ch;font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:var(--cream);margin:24px 0 0}
.slide__badge{display:inline-flex;align-items:center;gap:14px;margin-bottom:14px;background:var(--signal);color:var(--cream);border-radius:999px;padding:8px 22px 8px 10px}
.slide__badge b{font:800 44px/1 var(--display);letter-spacing:-.03em;background:var(--ink);border-radius:999px;padding:8px 16px}
.slide__badge small{font:700 13px/1.3 var(--body)}
.slide.is-on .slide__kicker,.slide.is-on .slide__badge{animation:rise .8s .25s ease-out both}
.slide.is-on .slide__title{animation:rise .9s .35s ease-out both}
.slide.is-on .slide__desc{animation:rise .9s .55s ease-out both}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.hero__bar{position:absolute;z-index:4;left:0;right:0;bottom:40px;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.hero__ctas{display:flex;flex-wrap:wrap;gap:14px}
@media (max-width:980px){
  .hero{height:auto;min-height:760px;max-height:none}
  .slide__text{bottom:118px}
  .hero__bar{bottom:32px}
  .slide .ph span{display:none}
}
@media (max-width:560px){
  .hero{min-height:720px}
  .slide__title{font-size:clamp(52px,15vw,82px)}
  .slide__desc{font-size:17px;margin-top:18px}
  .slide__badge b{font-size:32px;padding:6px 12px}
  .hero__ctas .btn{flex:1;padding:16px 14px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .slide{transition:none}
  .slide.is-on .slide__kicker,.slide.is-on .slide__badge,.slide.is-on .slide__title,.slide.is-on .slide__desc{animation:none}
}


/* Sections */
.section{padding:120px 0}
.head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 40px;margin-bottom:56px}
.head h2{font-size:clamp(52px,6.6vw,100px)}
.head p{max-width:42ch;color:var(--cream-dim);margin:0;font-size:19px}

/* Trucks: rounded cards with a signal letter badge */
.trucks{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.truck{position:relative;background:var(--cobalt-2);border-radius:var(--r);padding:12px;display:flex;flex-direction:column}
.truck .ph{aspect-ratio:4/3;border-radius:calc(var(--r) - 8px)}
.truck__letter{position:absolute;top:24px;left:24px;width:78px;height:78px;border-radius:50%;background:var(--signal);color:var(--cream);display:grid;place-items:center;font:800 44px/1 var(--display);letter-spacing:-.03em;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.truck__body{padding:26px 18px 18px;flex:1;display:flex;flex-direction:column}
.truck h3{font-size:46px;margin-bottom:6px}
.truck__tag{color:var(--signal);font:700 15px/1.3 var(--body);margin-bottom:18px}
.menu{list-style:none;margin:0 0 18px;padding:0}
.menu li{padding:14px 0;border-top:1px solid var(--line)}
.menu b{display:block;font:700 19px/1.25 var(--body);color:var(--cream)}
.menu span{color:var(--cream-dim);font-size:16px}
.truck__fine{margin-top:auto;font-size:15px;color:var(--cream-dim);background:var(--cobalt-3);border-radius:16px;padding:14px 16px;margin-bottom:0}
@media (max-width:980px){.trucks{grid-template-columns:1fr;max-width:620px;margin:0 auto}.truck .ph{aspect-ratio:16/10}}
.trucks__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:56px}

/* Taco Tuesday: a solid signal card */
/* TODO: confirm Taco Tuesday is still running */
.special{display:grid;grid-template-columns:1fr 1fr;background:var(--signal);border-radius:var(--r);overflow:hidden}
.special .ph{min-height:400px}
.special__text{padding:56px;display:flex;flex-direction:column;justify-content:center;color:var(--ink)}
.special__text small{align-self:flex-start;font:700 14px/1 var(--body);background:var(--ink);color:var(--cream);padding:10px 16px;border-radius:999px;margin-bottom:22px}
.special__text h2{font-size:clamp(60px,6.6vw,104px);margin-bottom:16px;color:var(--ink)}
.special__text h2 em{font-style:normal;color:var(--cream)}
.special__text p{font-size:20px;font-weight:500;margin:0}
@media (max-width:860px){.special{grid-template-columns:1fr}.special .ph{min-height:300px}.special__text{padding:36px 28px}}

/* Story */
.story{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.story .ph{aspect-ratio:4/5;border-radius:var(--r)}
.story h2{font-size:clamp(52px,6vw,92px);margin-bottom:28px}
.story blockquote{margin:0 0 28px;font:800 clamp(26px,2.6vw,34px)/1.15 var(--display);letter-spacing:-.02em;color:var(--signal)}
.story p{color:var(--cream-dim)}
@media (max-width:900px){.story{grid-template-columns:1fr;gap:40px}}

/* Awards: four cards, the 4x win leads in signal */
.awards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.award{background:var(--cobalt-2);border-radius:var(--r);padding:34px 26px}
.award:first-child{background:var(--signal)}
.award b{display:block;font:800 34px/1 var(--display);letter-spacing:-.03em;color:var(--cream)}
.award span{display:block;margin-top:12px;font:500 15px/1.45 var(--body);color:var(--cream-dim)}
.award:first-child span{color:var(--cream)}
@media (max-width:980px){.awards{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.awards{grid-template-columns:1fr}}

/* Visit */
.visit{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.visit__card{background:var(--cobalt-2);border-radius:var(--r);padding:34px 30px}
.visit__card h3{font-size:34px;margin-bottom:20px}
.hours{width:100%;border-collapse:collapse;font-size:17px}
.hours td{padding:10px 0;border-bottom:1px solid var(--line)}
.hours td:last-child{text-align:right;color:var(--cream);font-weight:600}
.hours td:first-child{color:var(--cream-dim)}
.visit__card address{font-style:normal;font-size:22px;line-height:1.5;margin-bottom:24px}
.visit__card .btn{width:100%;margin-bottom:12px}
.visit .ph{min-height:320px;border-radius:var(--r)}
.note{color:var(--cream-dim);font-size:15px;margin:16px 0 0}
@media (max-width:980px){.visit{grid-template-columns:1fr 1fr}.visit .ph{grid-column:1/-1;min-height:280px}}
@media (max-width:640px){.visit{grid-template-columns:1fr}}

/* FAQ: rounded rows */
.faq{max-width:900px;display:grid;gap:12px}
.faq details{background:var(--cobalt-2);border-radius:20px}
.faq summary{cursor:pointer;list-style:none;padding:24px 72px 24px 28px;font:800 24px/1.2 var(--display);letter-spacing:-.02em;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:700 22px/1 var(--body);background:var(--signal);color:var(--cream)}
.faq details[open] summary::after{content:"\2013"}
.faq .a{padding:0 28px 24px;color:var(--cream-dim);max-width:62ch}
.faq .a p{margin:0}

/* Footer */
.footer{background:var(--cobalt-3);padding:72px 0 120px;color:var(--cream-dim);font-size:16px}
.footer .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.footer .brand{font-size:72px;gap:18px}
.footer .brand img{height:120px}
.footer h4{margin:0 0 14px;font:700 14px/1 var(--body);color:var(--signal)}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin-bottom:8px}
.footer a{text-decoration:none}
.footer a:hover{color:var(--cream)}
@media (max-width:980px){.footer .wrap{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer .wrap{grid-template-columns:1fr}}

/* Mobile and tablet action bar */
.actionbar{display:none}
@media (max-width:900px){
  .actionbar{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;position:fixed;left:10px;right:10px;bottom:10px;z-index:30;background:rgba(var(--ink-rgb),.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:999px;padding:6px}
  .actionbar a{display:flex;align-items:center;justify-content:center;min-height:50px;font:700 15px/1 var(--body);text-decoration:none;border-radius:999px;background:var(--cobalt-2)}
  .actionbar a:first-child{background:var(--signal)}
}

/* Hero photos start where the text column starts and run to the right edge of the screen, so the headline
   and description sit on the photo. On screens narrower than the content width that means edge to edge. */
.slide .ph:has(> img){background:transparent}
.slide .ph > img{inset:0 0 0 auto;width:calc(100% - max(0px, (100% - var(--wrap)) / 2));height:100%;object-fit:cover}
/* Keeps headline and description crisp where they overlap a photo */
.slide__title{text-shadow:0 0 3px rgba(0,0,0,.9), 0 2px 6px rgba(0,0,0,.75), 0 4px 30px rgba(0,0,0,.6)}
.slide__desc{text-shadow:0 0 2px rgba(0,0,0,.95), 0 1px 4px rgba(0,0,0,.9), 0 2px 16px rgba(0,0,0,.75)}
/* Real photos inside placeholder frames: the image fills the frame; the label hides */
.ph > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ph:has(> img) > span{display:none!important}
.ph:has(> img){background:#111}

/* Dish switcher: each truck card shows one dish photo at a time */
.menu__hint{font:600 13px/1 var(--body);color:var(--cream-dim);margin:0 0 6px}
.menu li{padding:0;border-top:1px solid var(--line)}
.dish{display:block;width:100%;text-align:left;background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:13px 12px 13px 14px;margin:0 -4px;border-radius:12px;border-left:3px solid transparent;transition:background .2s,border-color .2s}
.dish:hover{background:rgba(255,255,255,.05)}
.dish[aria-pressed="true"]{background:rgba(255,255,255,.07);border-left-color:var(--signal)}
.dish[aria-pressed="true"] b{color:var(--signal)}
.dish b{display:block;font:700 19px/1.25 var(--body);color:var(--cream)}
.dish span{display:block;color:var(--cream-dim);font-size:16px}
.truck .ph > img{transition:opacity .35s ease}
.truck .ph.is-swapping > img{opacity:0}
.ph-need{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;
  background:repeating-linear-gradient(-45deg,rgba(255,255,255,.04) 0 12px,transparent 12px 24px),var(--cobalt-3);
  font:700 15px/1.35 var(--body);color:var(--cream-dim)}
.ph-need b{display:block;font:800 26px/1.05 var(--display);letter-spacing:-.02em;color:var(--cream);margin-top:6px}
.ph.is-needed .ph-need{display:flex}
.ph.is-needed > img{opacity:0}

/* ================= MENU PAGE ================= */
.mhero__ctas{display:flex;flex-wrap:wrap;gap:12px}

/* Section bar: sticks under the header and scrolls sideways on phones */
.menu-nav{position:sticky;top:80px;z-index:15;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:12px max(24px, calc((100vw - var(--wrap))/2 + 24px));background:rgba(var(--ink-rgb),.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.menu-nav::-webkit-scrollbar{display:none}
.menu-nav a{flex:none;text-decoration:none;font:600 15px/1 var(--body);color:var(--cream-dim);padding:11px 16px;border-radius:999px;transition:background .2s,color .2s}
.menu-nav a:hover{color:var(--cream);background:var(--cobalt-2)}
.menu-nav a.is-on{color:var(--cream);background:var(--signal)}
html[data-palette]:not([data-palette="sign"]):not([data-palette="crimson"]) .menu-nav a.is-on{color:var(--ink)}

.msec{padding:88px 0 8px;scroll-margin-top:var(--menu-offset,150px)}
.msec__head{display:flex;align-items:flex-start;gap:22px;margin-bottom:34px}
.msec__letter{flex:none;width:78px;height:78px;border-radius:50%;background:var(--signal);color:var(--cream);display:grid;place-items:center;font:800 44px/1 var(--display);letter-spacing:-.03em}
html[data-palette]:not([data-palette="sign"]):not([data-palette="crimson"]) .msec__letter{color:var(--ink)}
.msec h2{font-size:clamp(42px,5vw,72px)}
.msec__head p{color:var(--cream-dim);max-width:60ch;margin:12px 0 0;font-size:18px}

/* Items: photo cards when a photo exists, clean text cards otherwise */
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mitem{background:var(--cobalt-2);border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
.mitem--pic{grid-row:span 2}
.mitem__pic{aspect-ratio:4/3;overflow:hidden;background:#111}
.mitem__pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.mitem:hover .mitem__pic img{transform:scale(1.03)}
.mitem__body{padding:22px 22px 24px;flex:1;display:flex;flex-direction:column}
.mitem h3{font:800 24px/1.1 var(--display);letter-spacing:-.02em;margin:0 0 8px}
.mitem p{margin:0;color:var(--cream-dim);font-size:16px;line-height:1.5}
/* tags (21+, Vegetarian, Half portion) sit in the bottom-left corner of every card, so they line up across a row */
.mitem__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:16px}
.tag{font:700 12px/1 var(--body);padding:7px 10px;border-radius:999px;background:var(--cobalt-3);color:var(--cream-dim)}
.tag--veg{color:var(--cream)}
.tag--age{background:var(--signal);color:var(--ink)}
html[data-palette="sign"] .tag--age,html[data-palette="crimson"] .tag--age,html:not([data-palette]) .tag--age{color:var(--cream)}
@media (max-width:980px){.mgrid{grid-template-columns:1fr 1fr}.menu-nav{top:80px}}
@media (max-width:600px){.mgrid{grid-template-columns:1fr}.mitem--pic{grid-row:auto}.msec{padding-top:64px}.msec__letter{width:60px;height:60px;font-size:34px}}

.mnote{margin:96px 0 120px;background:var(--cobalt-2);border-radius:var(--r);padding:40px}
.mnote h2{font-size:40px;margin-bottom:16px}
.mnote p{color:var(--cream-dim);max-width:70ch}
.mnote .mhero__ctas{margin-top:22px}

/* "Just a taste" banner under the truck cards */
.taste{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px;background:var(--cobalt-2);border-radius:var(--r);padding:34px 40px;border-left:6px solid var(--signal)}
.taste__text{flex:1 1 520px}
.taste__kicker{font:700 13px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--signal);margin:0 0 12px}
.taste__title{font:800 clamp(30px,3.2vw,44px)/1.05 var(--display);letter-spacing:-.03em;margin:0 0 12px}
.taste__title span{color:var(--signal)}
.taste__list{margin:0;color:var(--cream-dim);font-size:17px;max-width:70ch}
.taste .btn{flex:none}
.trucks__cta{margin-top:28px}
@media (max-width:600px){.taste{padding:26px 22px;border-left-width:5px}.taste .btn{width:100%}}

/* Mid-size screens: tighten the nav so the full brand and every link fit on one line */
@media (max-width:1180px) and (min-width:901px){.header .wrap{gap:12px}.nav{gap:2px}.nav a{padding:10px 10px}.nav .btn{padding:12px 18px;margin-left:4px}}