/* ==========================================================================
   Tako N' Madre — North Sioux City, SD
   Design language: US interstate guide signage × Southern California taqueria.
   The restaurant lives inside a travel plaza off I-29. Rather than hide that,
   the whole system is built from the road: guide-sign green, reflective white
   and Overpass (the open descendant of the FHWA Highway Gothic lettering used
   on American road signs).

   The palette is the Mexican flag on black, per the owner. It costs nothing to
   reconcile with the highway idea, because an interstate guide sign is already
   green and white — adding the red completes the flag and the concept at once.
   Amber (the old fuel-price-board accent) is retired: a fourth accent muddies
   a tricolour, and the flag has to read as three colours or it reads as none.

   One rule holds the whole palette together: FLAG RED AND FLAG GREEN ARE FILL
   COLOURS, NOT TEXT COLOURS. #CE1126 on this black is about 3.3:1 — it fails
   for body text. Every place colour has to be read as words uses the -lt pair,
   which clears AA. Bars, buttons, panels and rules use the true flag values.
   ========================================================================== */

:root{
  /* Road */
  --asphalt:#14171A;        /* night highway, base surface            */
  --asphalt-2:#1C2024;      /* raised panel                            */
  --sign:#05683A;           /* interstate guide-sign green             */
  --sign-dark:#04512D;
  --reflect:#F4F6F2;        /* reflective sheeting white               */

  /* Flag — fills */
  --green:#006847;          /* deep flag green — large fills           */
  --green-brand:#00A24A;    /* the brighter green in the logo greca    */
  --white:#F7F8F4;          /* flag white / reflective sheeting        */
  --red:#CE1126;            /* Mexican flag red — primary accent       */
  --red-deep:#9C0C1C;

  /* Flag — text-safe on black (both clear AA at body sizes) */
  --red-lt:#FF5C6E;
  --green-lt:#3FB585;

  /* Kitchen */
  --chile:#C4321F;          /* birria consommé                          */
  --lime:#B9D442;           /* cilantro, lime                           */

  /* Text */
  --ink:#F4F6F2;
  --ink-soft:#AEB6B2;
  --ink-faint:#6E7873;
  --rule:#2A3034;

  --shell:min(1240px,100% - clamp(32px,7vw,96px));
  --r:4px;                  /* road signs have tight corners            */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--asphalt);
  color:var(--ink);
  font-family:'Karla',ui-sans-serif,system-ui,sans-serif;
  font-size:clamp(16px,1.05vw,17.5px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

h1,h2,h3,.sign-type{
  font-family:'Overpass',ui-sans-serif,system-ui,sans-serif;
  font-weight:800;
  line-height:.98;
  letter-spacing:-.02em;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(44px,7.4vw,96px)}
h2{font-size:clamp(32px,4.6vw,58px)}
h3{font-size:clamp(20px,2vw,25px);letter-spacing:-.01em}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

/* Utility / data face — prices, labels, distances */
.mono{font-family:'Overpass Mono',ui-monospace,SFMono-Regular,Menlo,monospace}

.eyebrow{
  font-family:'Overpass Mono',ui-monospace,monospace;
  font-size:11.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--red-lt);margin:0 0 18px;
}
.eyebrow.on-green{color:#9FE3BE}

/* skip link — off-screen until focused. It is only on the catering page, which
   is the one page with a long form to tab past; without this rule it renders
   as visible text in the top-left of the layout. */
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{position:fixed;left:12px;top:12px;z-index:200;width:auto;height:auto;
  background:var(--red);color:#FFF;padding:11px 17px;border-radius:var(--r);
  font-family:'Overpass',sans-serif;font-weight:700;font-size:14px;text-decoration:none}

.shell{width:var(--shell);margin-inline:auto}
section{padding:clamp(72px,10vw,132px) 0}
.lede{font-size:clamp(17px,1.5vw,21px);color:var(--ink-soft);max-width:60ch}

/* Visible keyboard focus everywhere — road signs are about legibility */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--red-lt);outline-offset:3px;border-radius:2px;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:'Overpass',sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.04em;text-transform:uppercase;
  padding:15px 26px;border-radius:var(--r);text-decoration:none;
  border:2px solid transparent;cursor:pointer;
  transition:transform .16s ease,background-color .16s ease,color .16s ease,border-color .16s ease;
}
.btn-primary{background:var(--red);color:#FFF;border-color:var(--red)}
.btn-primary:hover{transform:translateY(-2px);background:#E31B31;border-color:#E31B31}
.btn-ghost{
  background:transparent;color:var(--ink);border-color:rgba(244,246,242,.34);
  -webkit-appearance:none;appearance:none;   /* kill UA button background */
}
.btn-ghost:hover{border-color:var(--reflect);transform:translateY(-2px)}

/* ── Nav ─────────────────────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(20,23,26,.88);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule);
}
.nav-in{width:var(--shell);margin-inline:auto;display:flex;align-items:center;gap:22px;
  min-height:70px;padding:10px 0}
.brand{
  font-family:'Overpass',sans-serif;font-weight:900;font-size:19px;letter-spacing:-.02em;
  text-decoration:none;color:var(--ink);white-space:nowrap;display:flex;align-items:center;gap:9px;
}
/* The mark. `.brand .dot` is the placeholder — a small flag bar at the scale
   of the original dot. When the owner's logo file lands, drop an <img
   class="brand-logo"> into the same slot and delete the dot from the markup;
   nothing else in the nav has to move.

   Sized by height so any aspect ratio the file turns out to be still fits the
   bar, and the wordmark next to it is hidden at that point rather than
   repeated — the logo already says the name. */
/* The real lockup, background knocked out so it sits on the nav rather than in
   a black box. Sized by height; the wordmark is inside the artwork so the text
   version is dropped rather than repeated next to it. */
.brand-logo{height:44px;width:auto;flex:none;display:block}
.nav.scrolled .brand-logo{height:36px;transition:height .25s ease}
@media(max-width:820px){ .brand-logo{height:36px} }
@media(max-width:420px){ .brand-logo{height:30px} }
/* the medallion alone, for the footer where the full lockup is too wide */
.brand-mark{height:34px;width:auto;flex:none;display:block}
.nav-links{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav-links a{
  font-family:'Overpass',sans-serif;font-weight:600;font-size:14.5px;letter-spacing:.02em;
  text-decoration:none;color:var(--ink-soft);padding:9px 13px;border-radius:var(--r);
  transition:color .15s ease,background-color .15s ease;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink);background:rgba(244,246,242,.07)}
.nav-tel{
  font-family:'Overpass Mono',monospace;font-weight:600;font-size:14px;
  color:var(--red-lt);text-decoration:none;white-space:nowrap;padding:9px 12px;
}
.nav-tel:hover{text-decoration:underline}
.nav-cta{margin-left:6px;padding:11px 19px;font-size:13.5px}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--rule);
  border-radius:var(--r);color:var(--ink);padding:9px 11px;cursor:pointer}

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:clamp(600px,92vh,860px);display:flex;align-items:flex-end;
  padding:0 0 clamp(48px,7vw,86px);overflow:hidden}
.hero-img{position:absolute;inset:0;z-index:0}
.hero-img img,.hero-img video{width:100%;height:100%;object-fit:cover;display:block}
/* The still is the reduced-motion path and the no-video fallback. The <video>
   also carries the same frame as its poster, so a slow connection shows the
   photograph rather than a black box. */
/* Specificity note: `.hero-img img` above is (0,1,1). These selectors must
   match or beat it or the still sits on top of the video and nothing moves. */
.hero-img .hero-still{display:none}
@media(prefers-reduced-motion:reduce){
  .hero-img .hero-video{display:none}
  .hero-img .hero-still{display:block}
}
.hero-img::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top,var(--asphalt) 2%,rgba(20,23,26,.72) 38%,rgba(20,23,26,.30) 68%,rgba(20,23,26,.55) 100%);
}
.hero-in{position:relative;z-index:2;width:var(--shell);margin-inline:auto}
.hero h1{max-width:15ch}
.hero h1 em{font-style:normal;color:var(--red-lt)}
.hero .lede{margin-top:22px;max-width:52ch;color:#D6DCD8}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px}

/* The interstate guide sign — the hero's anchor device */
.guide-sign{
  display:inline-block;background:var(--sign);color:var(--reflect);
  border:3px solid var(--reflect);border-radius:9px;
  padding:15px 22px;margin-bottom:30px;box-shadow:0 18px 44px rgba(0,0,0,.5);
  max-width:100%;
}
.guide-sign .gs-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.guide-sign .gs-exit{
  font-family:'Overpass',sans-serif;font-weight:900;font-size:13px;letter-spacing:.14em;
  border:2px solid var(--reflect);border-radius:3px;padding:3px 9px;white-space:nowrap;
}
.guide-sign .gs-name{font-family:'Overpass',sans-serif;font-weight:800;font-size:clamp(19px,2.2vw,26px);
  letter-spacing:-.01em;white-space:nowrap}
.guide-sign .gs-sub{
  font-family:'Overpass Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:#BFE8D2;margin-top:7px;
}

/* ── THE BOARD — the signature ───────────────────────────────────────── */
/* A travel-plaza fuel-price sign that sells tacos instead of gas.        */
.board-sec{background:var(--asphalt);border-top:1px solid var(--rule)}
.board{
  background:linear-gradient(180deg,#0E1114,#171B1F);
  border:3px solid var(--reflect);border-radius:10px;
  padding:clamp(20px,3vw,34px);
  box-shadow:0 30px 70px rgba(0,0,0,.55);
  max-width:860px;margin:44px auto 0;
}
.board-head{
  background:var(--sign);margin:calc(-1 * clamp(20px,3vw,34px));
  margin-bottom:clamp(20px,3vw,30px);
  padding:15px clamp(20px,3vw,34px);
  border-radius:6px 6px 0 0;
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.board-head .bh-name{font-family:'Overpass',sans-serif;font-weight:900;font-size:clamp(17px,2vw,22px);
  letter-spacing:.01em;color:var(--reflect)}
.board-head .bh-note{font-family:'Overpass Mono',monospace;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#A8DEC3}

.brow{
  display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:10px 18px;
  padding:15px 0;border-bottom:1px dashed rgba(244,246,242,.16);
}
.brow:last-of-type{border-bottom:0}
.brow .bl{min-width:0}
.brow .bname{
  font-family:'Overpass',sans-serif;font-weight:800;font-size:clamp(16px,1.7vw,20px);
  letter-spacing:.01em;text-transform:uppercase;color:var(--reflect);
}
.brow .bdesc{font-size:14px;color:var(--ink-faint);margin-top:3px}
.brow .bprice{
  font-family:'Overpass Mono',monospace;font-weight:700;
  font-size:clamp(26px,3.6vw,42px);line-height:1;color:var(--red-lt);
  text-shadow:0 0 22px rgba(255,176,0,.42);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.brow .bprice .cur{font-size:.52em;vertical-align:top;position:relative;top:.34em;margin-right:.08em;
  color:#C98F17;text-shadow:none}
.board-foot{
  margin-top:22px;padding-top:16px;border-top:1px solid rgba(244,246,242,.14);
  font-family:'Overpass Mono',monospace;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
}

/* Price flip-in. Time-based (never tick-based — background tabs throttle
   timers and a tick counter strands the animation mid-way). */
.brow .bprice{opacity:0;transform:translateY(10px)}
.board.lit .brow .bprice{animation:priceIn .5s cubic-bezier(.2,.7,.3,1) forwards}
.board.lit .brow:nth-child(2) .bprice{animation-delay:.06s}
.board.lit .brow:nth-child(3) .bprice{animation-delay:.12s}
.board.lit .brow:nth-child(4) .bprice{animation-delay:.18s}
.board.lit .brow:nth-child(5) .bprice{animation-delay:.24s}
.board.lit .brow:nth-child(6) .bprice{animation-delay:.30s}
@keyframes priceIn{to{opacity:1;transform:translateY(0)}}

/* ── Split blocks ────────────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5.5vw,84px);align-items:center}
.split.flip .split-media{order:2}
.split-media img{border-radius:var(--r);width:100%;aspect-ratio:4/3;object-fit:cover}

.facts{display:grid;gap:2px;margin-top:32px;background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r);overflow:hidden}
.fact{background:var(--asphalt-2);padding:20px 22px}
.fact dt{font-family:'Overpass Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 6px}
.fact dd{margin:0;font-family:'Overpass',sans-serif;font-weight:700;font-size:19px;color:var(--ink)}

/* ── Dish cards ──────────────────────────────────────────────────────── */
.dishes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px);margin-top:52px}
.dish{background:var(--asphalt-2);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s ease,border-color .2s ease}
.dish:hover{transform:translateY(-4px);border-color:rgba(255,176,0,.5)}
.dish img{aspect-ratio:4/3;object-fit:cover;width:100%}
.dish-body{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1}
.dish-body h3{margin:0}
.dish-body p{font-size:14.5px;color:var(--ink-soft);margin:0}
.dish-price{margin-top:auto;padding-top:12px;font-family:'Overpass Mono',monospace;font-weight:700;
  font-size:17px;color:var(--red-lt)}

/* ── Reviews (honest placeholder until real ones arrive) ─────────────── */
/* ── Reviews ──────────────────────────────────────────────────────────────
   Real Google reviews, quoted verbatim including the odd slipped word — a
   tidied-up testimonial reads as written by the restaurant, which is the one
   thing it must not read as.

   Stars are flag red rather than the conventional gold. A fourth colour would
   break the tricolour the whole site is now built on, and red is already the
   accent doing this job everywhere else. */
.revs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,22px);
  margin-top:clamp(28px,4vw,44px);text-align:left}
.rev{
  position:relative;background:var(--asphalt-2);border:1px solid var(--rule);
  border-radius:var(--r);padding:clamp(24px,3vw,34px);
  display:flex;flex-direction:column;
}
/* the flag band ties each card to the greca running under the nav */
.rev::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:var(--r) var(--r) 0 0;
  background:linear-gradient(90deg,var(--green-brand) 0 33.34%,var(--white) 33.34% 66.67%,var(--red) 66.67% 100%);
}
.rev--feature{grid-column:1/-1}
.rev-stars{color:var(--red-lt);font-size:15px;letter-spacing:4px;line-height:1}
.rev p{margin:16px 0 0;font-size:16.5px;line-height:1.7;color:var(--ink)}
.rev--feature p{font-size:clamp(17.5px,1.9vw,21px);line-height:1.65;max-width:64ch}
.rev-who{
  margin-top:auto;padding-top:20px;font-family:'Overpass Mono',ui-monospace,monospace;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
}
.rev-note{
  margin-top:clamp(22px,3vw,32px);font-size:13.5px;color:var(--ink-faint);
}
@media(max-width:820px){ .revs{grid-template-columns:1fr} }

/* ── Visit ───────────────────────────────────────────────────────────── */
.visit{background:var(--asphalt-2);border-top:1px solid var(--rule)}
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.crow{display:flex;gap:18px;padding:16px 0;border-bottom:1px solid var(--rule)}
.crow:last-child{border-bottom:0}
.crow .k{font-family:'Overpass Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);flex:0 0 118px;padding-top:3px}
.crow .v{flex:1;min-width:0;overflow-wrap:anywhere}
.crow a.v,.crow .v a{color:var(--red-lt);text-decoration:none}
.crow .v a:hover{text-decoration:underline}
.hours-row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;
  border-bottom:1px dashed var(--rule);font-size:15px}
.hours-row:last-child{border-bottom:0}
.hours-row .d{color:var(--ink-soft)}
.hours-row .t{font-family:'Overpass Mono',monospace;font-size:14px}
.hours-row.closed .t{color:var(--chile)}

.wayfind{background:var(--sign);border-radius:var(--r);padding:22px 24px;margin-top:28px}
.wayfind p{margin:0;color:#E6F5EC;font-size:15px}
.wayfind strong{color:#fff}

/* ── Footer ──────────────────────────────────────────────────────────── */
.foot{background:var(--asphalt);border-top:1px solid var(--rule);padding:56px 0 40px}
.foot-in{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:flex-start}
.foot a{color:var(--ink-soft);text-decoration:none;font-size:14.5px}
.foot a:hover{color:var(--ink)}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
.foot-legal{margin-top:34px;padding-top:22px;border-top:1px solid var(--rule);
  font-size:12.5px;color:var(--ink-faint);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ── Menu page ───────────────────────────────────────────────────────── */
.page-head{padding:clamp(56px,8vw,104px) 0 clamp(28px,4vw,48px);border-bottom:1px solid var(--rule)}

/* Menu hero band — a wide overhead spread, cropped cinematically */
.menu-hero{position:relative;height:clamp(240px,34vw,400px);overflow:hidden;border-bottom:1px solid var(--rule)}
.menu-hero img{width:100%;height:100%;object-fit:cover}
.menu-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--asphalt) 3%,rgba(20,23,26,.55) 45%,rgba(20,23,26,.30) 100%)}
.menu-hero-in{position:absolute;inset:auto 0 0 0;z-index:2;padding-bottom:clamp(22px,3.5vw,40px)}
.menu-hero h1{font-size:clamp(38px,6.4vw,80px)}

/* Exit-sign section jumper.
   A 56-item menu needs a way in. On the interstate, a guide sign lists what's
   at the next exit — so the section nav IS a row of exit signs, and the one
   you're currently reading lights up. */
.exitnav{
  position:sticky;top:70px;z-index:50;
  background:rgba(20,23,26,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.exitnav-in{
  width:var(--shell);margin-inline:auto;
  display:flex;gap:9px;overflow-x:auto;padding:13px 0;
  scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;
}
.exitnav-in::-webkit-scrollbar{display:none}
.exitnav a{
  flex:none;text-decoration:none;
  background:var(--sign);color:var(--reflect);
  border:2px solid rgba(244,246,242,.85);border-radius:5px;
  padding:7px 14px;
  font-family:'Overpass',sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.exitnav a:hover{transform:translateY(-2px);background:var(--sign-dark)}
.exitnav a.here{background:var(--red);color:#FFF;border-color:var(--red)}

/* Sticky nav (70) + exit bar (~57) — anchors must clear both. */
.mcat{scroll-margin-top:136px}

@media(max-width:940px){
  .exitnav{top:0}          /* main nav is not sticky-stacked on mobile */
  .mcat{scroll-margin-top:76px}
}


.mcat{padding:clamp(40px,5.5vw,68px) 0;border-bottom:1px solid var(--rule)}
.mcat:last-child{border-bottom:0}
.mcat-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin-bottom:8px}
.mcat-head h2{font-size:clamp(26px,3.2vw,40px)}
.mcat-note{font-family:'Overpass Mono',monospace;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint)}

/* Two columns. MUST be display:block — `display:flex` silently kills CSS
   multi-column: columnCount computes as 2 while everything stacks in one. */
.mitems{display:block;columns:2;column-gap:clamp(32px,5vw,72px);margin-top:26px}
.mi{
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  padding:11px 0;border-bottom:1px dashed var(--rule);
}
.mi-top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.mi-name{font-family:'Overpass',sans-serif;font-weight:700;font-size:16.5px;color:var(--ink);
  flex:1;min-width:0}
.mi-dots{flex:1;border-bottom:1px dotted var(--ink-faint);min-width:14px;transform:translateY(-4px)}
.mi-price{font-family:'Overpass Mono',monospace;font-weight:600;font-size:15.5px;color:var(--red-lt);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.mi-desc{font-size:13.5px;color:var(--ink-faint);margin-top:3px}
.mcat > *{min-width:0}

@media(max-width:860px){ .mitems{columns:1} }

/* ── Scroll reveal ───────────────────────────────────────────────────── */
.rise{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.rise.in{opacity:1;transform:none}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media(max-width:940px){
  .split,.vgrid{grid-template-columns:1fr;gap:38px}
  .split.flip .split-media{order:0}
  .dishes{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
  .nav-links{display:none}
  .nav-links.open{
    display:flex;flex-direction:column;align-items:stretch;gap:2px;
    position:absolute;top:100%;left:0;right:0;background:var(--asphalt-2);
    border-bottom:1px solid var(--rule);padding:12px clamp(16px,5vw,48px) 18px;
  }
  .nav-links.open a{padding:13px 10px;font-size:16px}
  .burger{display:inline-flex}
  .nav{position:relative}
  .nav-in{position:relative;flex-wrap:nowrap}
}
@media(max-width:560px){
  .nav-cta{display:none}
  .brow{grid-template-columns:1fr;gap:4px}
  .brow .bprice{font-size:30px}
  .crow{flex-wrap:wrap;gap:4px 16px}
  .crow .k{flex:0 0 100%}
  .board-head{flex-direction:column;gap:6px}
  .guide-sign .gs-top{gap:9px}
  .guide-sign .gs-name{white-space:normal}
}
@media(max-width:380px){
  .nav-tel{display:none}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rise{opacity:1;transform:none}
  .brow .bprice{opacity:1;transform:none}
}

/* -- Greca ----------------------------------------------------------------
   The owner's logo carries a step-fret (greca) band either side of the
   tagline -- green on the left, red on the right. That motif is already the
   brand's, so the plain three-band rule standing in for it gets replaced by
   the real thing: the flag gradient shows THROUGH a repeating greca mask.

   One element, not three. Colour is a gradient on the background and the
   pattern is a mask, so a single <hr class="greca"> carries both with no
   child markup to keep in sync.

   Built from rects, not a stroked spiral: at the 14px height this lives at, a
   stroke turns to mush. -webkit- prefixes stay -- Safari still wants them.
   A browser without mask support falls back to the flat flag bar, which is
   what was there before and is perfectly acceptable, so no fallback rule. */
.greca{
  height:16px;border:0;margin:0;
  background:linear-gradient(90deg,
    var(--green-brand) 0 33.34%,
    var(--white)   33.34% 66.67%,
    var(--red)     66.67% 100%);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2016%22%3E%3Cg%20fill%3D%22%23fff%22%3E%3Crect%20x%3D%220%22%20%20y%3D%2213%22%20width%3D%2230%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%224%22%20%20y%3D%224%22%20%20width%3D%223%22%20%20height%3D%229%22%2F%3E%3Crect%20x%3D%224%22%20%20y%3D%224%22%20%20width%3D%2218%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%2219%22%20y%3D%227%22%20%20width%3D%223%22%20%20height%3D%224%22%2F%3E%3Crect%20x%3D%2211%22%20y%3D%228%22%20%20width%3D%228%22%20%20height%3D%223%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2016%22%3E%3Cg%20fill%3D%22%23fff%22%3E%3Crect%20x%3D%220%22%20%20y%3D%2213%22%20width%3D%2230%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%224%22%20%20y%3D%224%22%20%20width%3D%223%22%20%20height%3D%229%22%2F%3E%3Crect%20x%3D%224%22%20%20y%3D%224%22%20%20width%3D%2218%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%2219%22%20y%3D%227%22%20%20width%3D%223%22%20%20height%3D%224%22%2F%3E%3Crect%20x%3D%2211%22%20y%3D%228%22%20%20width%3D%228%22%20%20height%3D%223%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  -webkit-mask-repeat:repeat-x;  mask-repeat:repeat-x;
  -webkit-mask-size:auto 100%;   mask-size:auto 100%;
  -webkit-mask-position:left center; mask-position:left center;
}
.greca--thin{height:11px}

/* ── Menu: hero cards ─────────────────────────────────────────────────────
   Only the items worth selling become cards. The rest stay a dotted list —
   if every row shouts, nothing does, and a fifty-item menu of photo cards is
   a scroll nobody finishes in a parking lot.

   The photo is a background, so the name and price are real text sitting on
   it: selectable, searchable, and legible without waiting on an image. The
   scrim is a hard requirement, not styling — white type on an unknown photo
   is a coin flip otherwise. */
/* Fixed 3 across rather than auto-fit: six cards under auto-fit land 4+2 at
   desktop width and the orphan row reads like a mistake. Three also gives each
   card enough width that a wide plate survives the crop. */
.mheroes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.5vw,18px);margin:26px 0 0}
@media(max-width:1000px){ .mheroes{grid-template-columns:repeat(2,minmax(0,1fr))} }
.mhero{
  position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r);
  min-height:clamp(210px,24vw,268px);display:flex;flex-direction:column;
  justify-content:flex-end;padding:20px;text-decoration:none;color:var(--ink);
  border:1px solid var(--rule);background:var(--asphalt-2);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),border-color .22s ease;
}
.mhero img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.mhero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,23,26,.18) 0%,rgba(20,23,26,.5) 46%,rgba(20,23,26,.93) 100%);
}
.mhero:hover{transform:translateY(-3px);border-color:rgba(247,248,244,.34)}
.mhero:hover img{transform:scale(1.055)}
/* the flag band anchors each card and is the "colour" the owner asked for */
.mhero::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;z-index:1;
  background:linear-gradient(90deg,var(--green) 0 33.34%,var(--white) 33.34% 66.67%,var(--red) 66.67% 100%);
}
.mhero-tag{
  position:absolute;top:16px;left:16px;z-index:1;
  font-family:'Overpass Mono',ui-monospace,monospace;font-size:10px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:#FFF;
  background:var(--red);padding:5px 9px;border-radius:2px;
}
.mhero-tag--green{background:var(--green)}
.mhero-name{font-family:'Overpass',sans-serif;font-weight:800;font-size:clamp(20px,2vw,25px);
  line-height:1.02;letter-spacing:-.015em;text-wrap:balance}
.mhero-desc{font-size:13.5px;color:rgba(247,248,244,.8);margin:6px 0 0;max-width:34ch}
.mhero-price{font-family:'Overpass Mono',ui-monospace,monospace;font-weight:700;font-size:17px;
  color:#FFF;margin-top:12px;font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:center;gap:9px}
.mhero-price::before{content:"";width:20px;height:3px;background:var(--red);flex:none}

@media(max-width:560px){
  .mheroes{grid-template-columns:1fr}
  .mhero{min-height:200px}
}

/* Per-photo crop. `cover` centres by default, which buries a dish that sits low
   in its frame behind the caption scrim — the fries were a black card with a
   blurred dining room in it. Nudging the crop is per-image work, not something
   a global rule can guess. */
.mhero--low img{object-position:center 68%}

/* ── Catering estimate ────────────────────────────────────────────────────
   The rules are the product here. Rather than bury "250 people, two weeks,
   45 miles" in a paragraph nobody reads, the form checks them as you type and
   says out loud what you do and do not qualify for — so nobody fills in nine
   fields and then gets told no on the phone. */
.est{background:var(--asphalt-2);border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden}
.est-hd{padding:22px clamp(18px,2.6vw,30px) 18px;border-bottom:1px solid var(--rule)}
.est-body{padding:clamp(18px,2.6vw,30px)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.fld{display:flex;flex-direction:column;gap:7px;min-width:0}
.fld--wide{grid-column:1/-1}
.fld label{font-family:'Overpass Mono',ui-monospace,monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.fld label .opt{letter-spacing:.05em;text-transform:none;font-weight:400;color:var(--ink-faint)}
.fld input,.fld select,.fld textarea{
  font-family:'Karla',sans-serif;font-size:16px;color:var(--ink);
  background:#0F1215;border:1px solid var(--rule);border-radius:var(--r);
  padding:13px 14px;width:100%;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.fld textarea{resize:vertical;min-height:110px}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(206,17,38,.25)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* live verdict — the whole point of the tool */
.verdict{margin:22px 0 0;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.verdict-hd{display:flex;align-items:center;gap:11px;padding:13px 16px;
  background:#0F1215;border-bottom:1px solid var(--rule)}
.verdict-hd .lamp{width:9px;height:9px;border-radius:50%;background:var(--ink-faint);flex:none}
.verdict-hd b{font-family:'Overpass',sans-serif;font-size:14.5px;letter-spacing:.01em}
.verdict.ok  .verdict-hd .lamp{background:var(--green-lt);box-shadow:0 0 0 4px rgba(63,181,133,.2)}
.verdict.no  .verdict-hd .lamp{background:var(--red-lt);box-shadow:0 0 0 4px rgba(255,92,110,.18)}
.verdict ul{list-style:none;margin:0;padding:14px 16px;display:grid;gap:9px}
.verdict li{display:flex;gap:11px;font-size:14.5px;color:var(--ink-soft);line-height:1.5}
.verdict li .m{flex:none;width:17px;font-family:'Overpass Mono',monospace;font-weight:700}
.verdict li.pass .m{color:var(--green-lt)}
.verdict li.fail .m{color:var(--red-lt)}
.verdict li.note .m{color:var(--ink-faint)}
.verdict li b{color:var(--ink);font-weight:700}

.est-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px}
.est-foot .fine{font-size:13px;color:var(--ink-faint);max-width:40ch}
.sent{display:none;gap:12px;align-items:flex-start;margin-bottom:20px;padding:15px 17px;
  border-radius:var(--r);background:rgba(0,104,71,.16);border:1px solid rgba(63,181,133,.45)}
.sent.on{display:flex}
.sent b{display:block;margin-bottom:3px}
.sent p{font-size:14px;color:var(--ink-soft);margin:0}

/* the two services, side by side, with their rules stated as data */
.svc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px)}
.svc-card{background:var(--asphalt-2);border:1px solid var(--rule);border-radius:var(--r);
  padding:clamp(20px,2.4vw,28px);position:relative;overflow:hidden}
.svc-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px}
.svc-card.a::before{background:var(--green)}
.svc-card.b::before{background:var(--red)}
.svc-card h3{margin-bottom:6px}
.svc-rules{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:0}
.svc-rules li{display:flex;justify-content:space-between;gap:14px;padding:11px 0;
  border-bottom:1px dashed var(--rule);font-size:14.5px}
.svc-rules li:last-child{border-bottom:0}
.svc-rules .k{color:var(--ink-faint);font-family:'Overpass Mono',monospace;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;padding-top:2px}
.svc-rules .v{color:var(--ink);font-weight:700;text-align:right}

@media(max-width:820px){ .fields{grid-template-columns:1fr} .svc{grid-template-columns:1fr} }

/* ── Locations ────────────────────────────────────────────────────────────
   Two kitchens now, so the site has to ask which one before it answers
   anything else. Built as a pair of interstate guide signs rather than a
   dropdown, because that is already the language of this site — you do not
   pick a location off a highway, you pick an exit. */
.locs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.2vw,26px);
  margin-top:clamp(30px,4vw,46px)}
.loc{
  display:flex;flex-direction:column;
  background:var(--sign);color:var(--reflect);
  border:3px solid var(--reflect);border-radius:9px;
  padding:clamp(20px,2.6vw,28px);box-shadow:0 18px 44px rgba(0,0,0,.45);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease;
}
.loc:hover{transform:translateY(-3px);box-shadow:0 24px 54px rgba(0,0,0,.55)}
.loc-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.loc-badge{
  font-family:'Overpass',sans-serif;font-weight:900;font-size:12px;letter-spacing:.14em;
  border:2px solid var(--reflect);border-radius:3px;padding:3px 9px;white-space:nowrap;
}
.loc h3{
  font-family:'Overpass',sans-serif;font-weight:800;font-size:clamp(21px,2.4vw,29px);
  letter-spacing:-.01em;margin:0;
}
.loc-sub{
  font-family:'Overpass Mono',monospace;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;opacity:.85;margin:10px 0 0;
}
.loc-rows{margin:18px 0 0;border-top:1px solid rgba(244,246,242,.3)}
.loc-rows div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;
  border-bottom:1px solid rgba(244,246,242,.3);font-size:14.5px}
.loc-rows div:last-child{border-bottom:0}
.loc-rows .k{font-family:'Overpass Mono',monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;opacity:.8;padding-top:2px;white-space:nowrap}
.loc-rows .v{text-align:right}
.loc-rows a{color:var(--reflect);text-decoration:none;border-bottom:1px solid rgba(244,246,242,.45)}
.loc-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:20px}
/* on the green sign the usual red button disappears — white on green is the
   actual guide-sign contrast pair, so the buttons invert here */
.loc .btn-primary{background:var(--reflect);color:var(--sign);border-color:var(--reflect)}
.loc .btn-primary:hover{background:#fff;border-color:#fff}
.loc .btn-ghost{border-color:rgba(244,246,242,.55);color:var(--reflect)}
.loc .btn-ghost:hover{border-color:var(--reflect);background:rgba(244,246,242,.12)}

@media(max-width:820px){ .locs{grid-template-columns:1fr} }