:root{
  /* THE BRAND RED HAS THREE JOBS AND THREE SHADES. Checklist §4: "keep a separate TEXT
     shade of each brand colour; the raw brand colour is for large display type and
     decoration only." Measured on #ffffff: --red 5.68:1, --red-dark 7.86:1,
     --red-deep 9.62:1.
       --red       DISPLAY + DECORATION ONLY — pins, bullets, dots, borders, map markers,
                   icon tiles, focus-ring colour on form fields. 5.68:1 clears AA for
                   text and the 3:1 that SC 1.4.11 asks of a graphic; it does NOT clear
                   the 7:1 AAA bar, so it must never be small text and never a fill
                   under white text.
       --red-text  every red TEXT use (79 nodes measured at 5.68:1 before this). 7.86:1.
       --red-dark  the fill UNDER white text (.btn-red, .skip-link): white on it is
                   7.86:1 where white on --red was 5.68:1 (14 nodes, all 8 routes).
       --red-deep  the hover/active step of that fill. White on it is 9.62:1.
     Design cost, stated plainly: the CTA and the prices read maroon rather than
     pillar-box red. The brand red itself survives on every decorative surface. */
  --red:#C8202A; --red-text:#A2161F; --red-dark:#A2161F; --red-deep:#8B1016;
  --ink:#000000; --ink-2:#111111;
  /* --muted was #666666 (5.74:1 on white): it passes AA and misses the 7:1 AAA bar on
     116 measured nodes — every dish description, every form label and hint, every
     address and hours line, and the whole order dialog. #525252 is 7.81:1 on #ffffff
     and 7.55:1 on the faintest surface it lands on (#fbfbfb). This is the body/UI grey. */
  --cream:#ffffff; --paper:#ffffff; --muted:#525252; --line:#e5e5e5;
  /* Two colours that were hard-coded literals until the 2026-11-04 pass. Both pass in
     the default scheme (#444444 is 9.73:1 on white; #e6e6e6 is light-on-dark over the
     photo heroes) but neither could follow the SC 1.4.8 colour schemes while it was a
     literal, and checklist §4 wants every text colour stated as a token anyway. */
  --prose:#444444;      /* long-form body prose: .narrow p, .chk li, .loc-hours, .hiring p */
  --nav-ink:#e6e6e6;    /* header nav links, which sit on a dark photo or the page colour */
  /* The amber eyebrow, inline on 3 headings. #ffd21e is 11.93:1 on the near-black
     photo heroes it sits on by default and 1.11:1 on a light band, so it could not
     follow the SC 1.4.8 light scheme as a literal. */
  --eyebrow-ink:#ffd21e;
  /* small interactive surfaces (hover fills, icon tiles) that used to sit on cream.
     The page is pure white now, so they need their own faint step or they vanish. */
  --tint:#f4f4f4;
  /* A11y pass, September 24 2026 (docs/WEB_BUILD_A11Y_CHECKLIST.md; Eddy Verde's
     Nexx fixes 26d56b9 + be21250 are the reference). --line stays the DECORATIVE
     hairline (cards, dividers). --line-strong is the edge of an actual CONTROL —
     inputs, .btn-outline, checkboxes — where SC 1.4.11 needs 3:1: #8a8a8a is 3.45:1
     on white (#d0d0d0 was 1.54:1, --line 1.26:1). */
  --line-strong:#8a8a8a;
  /* The light brand red, for text and accents over dark photos. Was #ff6b62, which
     measured 5.44:1 on the composited pagehero scrim, 6.58:1 on the scrolled-header
     scrim, 6.77:1 on the drawer and 4.45:1 behind the 112px hero <em> — i.e. under the
     7:1 AAA bar on every dark surface it is used on, and a 0.05 miss on the large-text
     4.5:1 bar over the hero. #FF9A94 measures 7.44:1 / 7.45:1 on the two pagehero
     scrims, 9.00:1 on the scrolled header, 9.26:1 on the drawer's --ink-2, 10.30:1 on
     the black .story band and 6.01:1 over the hero poster. The remaining alternative
     was to deepen the scrims to #0D0A07, which hides the storefront photograph.
     NOTE the current-page nav state does NOT depend on this colour: coral against the
     #e6e6e6 sibling links was 2.23:1 and is 1.63:1 now, both under 3:1, which is
     exactly why the state is carried by a 3px underline and weight 800 (SC 1.4.11).
     No single colour can be 7:1 on a near-black header and 3:1 against #e6e6e6. */
  --coral:#FF9A94;
  --shadow:0 18px 50px -18px rgba(0,0,0,.35);
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* scroll-padding keeps the fixed header and the phone Order Now bar from sitting on
   whatever just took focus (SC 2.4.11). Header ~84px, bottom bar measured at 83px.
   scroll-padding-bottom was 88px, i.e. 3px UNDER the checklist's "bar height + 8". The
   focusin handler in site.js covered the gap; 92px removes the dependency. */
html{scroll-behavior:smooth;scroll-padding-top:100px;scroll-padding-bottom:92px}
body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
/* overflow-x:hidden came off body: it CLIPPED anything too wide at 320px instead of
   letting it reflow (SC 1.4.10). The overflow itself is fixed at the source below. */
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,40px)}
.wrap.narrow{max-width:760px}
.display{font-family:'Anton',Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:.95}
.eyebrow{font-weight:700;text-transform:uppercase;letter-spacing:.22em;font-size:.78rem;color:var(--red-text)}

/* 6px, NOT the pill this template shipped with. His ask, September 12 2026, right
   after the same change on the Baby Bros concept: "use rectangle for Louie Burger
   website too."
   NOTE the reason differs from Baby Bros': there, their own live stylesheet settled it
   (every button on babybrospizza.com is 6px). Louie's has NO existing website to match
   — louiesburgers.com is not even theirs — so this is HIS house preference for the
   Earth Tab demos, not a fact about their brand. Do not cite a Louie's source for it.
   Deliberately NOT changed: .step-n and .cthanks .ct-ico stay 999px because they are
   circles, not buttons, and .promo-flag stays a pill because it is a label. */
.btn{display:inline-flex;align-items:center;gap:.55em;font-weight:700;font-size:.95rem;letter-spacing:.02em;text-transform:uppercase;padding:.95em 1.7em;border-radius:6px;transition:transform .18s ease,box-shadow .2s ease,background .2s ease;cursor:pointer;border:2px solid transparent;text-align:center}
/* SC 1.4.6 — white on --red #C8202A is 5.68:1 at 13.12px and 15.2px bold (neither
   reaches the 18.66px that would earn the large-text allowance), on 14 nodes across all
   8 routes: the header Order Now, the hero Order Now, the phone bar, the menu phone CTA,
   the applicant form's Submit and 404's Back to Home. --red-dark is 7.86:1 and
   --red-deep 9.62:1.
   AND the boundary has to survive that. Measured at DPR 4 with the composited pixel just
   outside the header button's left edge against its own fill: /menu.html 2.76:1 at the top
   of the page and 3.22:1 scrolled, / 3.38 and 3.62, /work-with-us.html 3.42 and 3.22.
   Darkening the fill alone would have taken all six readings to 2.0-2.6:1 and traded an
   AA criterion (1.4.11, 3:1 for the edge that identifies the control) for an AAA one.
   So on the dark bands the button gets a real border and the boundary stops depending on
   the fill at all. On the white page the fill itself is the boundary and it IMPROVES:
   5.13:1 measured before, 7.86:1 after. The border uses the same rgba(255,255,255,.7)
   family as the .btn-ghost edge beside it, so the two CTAs read as one pair. */
.btn-red{background:var(--red-dark);color:#fff;box-shadow:0 10px 24px -8px rgba(139,16,22,.6)}
.btn-red:hover{background:var(--red-deep);transform:translateY(-2px);box-shadow:0 16px 30px -10px rgba(139,16,22,.7)}
header .btn-red,.hero .btn-red,.pagehero .btn-red,.story .btn-red,
.mobile-order .btn-red,footer .btn-red{border-color:rgba(255,255,255,.7)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff;transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000;transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-outline:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn-sm{padding:.7em 1.25em;font-size:.82rem}

header{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s ease,box-shadow .3s ease,padding .3s ease;padding:16px 0}
header.scrolled,header.solid{background:rgba(0,0,0,.92);backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(255,255,255,.06);padding:8px 0}
/* The open drawer lives inside <header>, so the header is what has to lift above
   the fixed Order Now bar (60) and the deploy's concept ribbon (80). */
header:has(#navlinks.open){z-index:85}
/* flex-wrap + min-width:0: at a 200% browser font size the row outgrows the viewport;
   it now wraps and the header grows instead of clipping the CTA (SC 1.4.4). */
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;font-family:'Anton',sans-serif;text-transform:uppercase;color:#fff;font-size:1.15rem;letter-spacing:.04em}
/* The FULL diamond logo, no circle crop (his ask, October 13, 2026). It is wider than the old circle,
   so it shrinks on narrow phones (full size from 390px) and the menu button stays on the same row
   wherever it did before. */
.brand img{height:clamp(30px,calc(59.8vw - 178px),52px);width:auto;transition:height .3s ease}
header.scrolled .brand img{height:clamp(30px,calc(59.8vw - 178px),46px)}
.nav-links{display:flex;align-items:center;gap:30px;min-width:0;flex-wrap:wrap}
/* The final colour, not opacity:.9 on white — same look, measurable contrast. */
.nav-links a{color:var(--nav-ink);font-weight:600;font-size:.92rem;letter-spacing:.02em;transition:color .2s}
.nav-links a:hover{color:#fff}
/* SC 1.4.1 + 1.4.11 — the current page used to be a colour swap and nothing else.
   Coral against the #e6e6e6 siblings measured 2.23:1 as #ff6b62 and measures 1.63:1 as
   #FF9A94, under the 3:1 a state indicator needs either way, so a reader with a
   colour-vision deficiency got no cue at all. The colour stays; a SHAPE carries the
   state. Keyed to aria-current (the exact page being served) as well as .on, because
   the footer navs emit aria-current with no class and had no visual mark whatsoever.
   NOT fixable with a colour: the coral has to reach 7:1 against a near-black header AND
   3:1 against #e6e6e6 siblings, and no single value does both — anything light enough
   for the header is within 2:1 of the siblings. The underline is the mechanism; the
   colour is decoration on top of it, which is why the AAA coral swap does not weaken
   this fix. Re-measured after the swap: underline 3px, weight 800, present on every
   aria-current node on 7 of 8 routes. */
.nav-links a.on{color:var(--coral)}
.nav-links a[aria-current="page"],
.footcol a[aria-current="page"],
.foot-bottom a[aria-current="page"]{
  font-weight:800;text-decoration:underline;text-decoration-thickness:3px;
  text-underline-offset:6px;text-decoration-skip-ink:none}
.nav-cta{display:flex;align-items:center;gap:14px}
.hamb{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.hamb span{width:26px;height:2.5px;background:#fff;border-radius:2px;transition:.25s}

/* hero (home) */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* Photo hero (Louie's, September 11 2026). The Nexx hero painted its background
   with a <video> child; this site has no video, so the photo is painted on the
   section itself from the --hero custom property — the same mechanism .pagehero
   below already uses with --bg. WITHOUT this rule the markup sets a property that
   nothing reads, the veil sits over an empty box, and the hero renders as a flat
   grey wash. That is exactly how it looked in two rounds of screenshots before
   this rule existed, and the HTML gave no hint: hero-storefront-wide.jpg was
   present in the markup the whole time. Position 38% keeps the lit sign and the
   building in frame as the viewport gets shorter. */
.hero-photo{background:var(--hero) center 38%/cover no-repeat;background-color:var(--ink)}
/* Scrim .55/.35/.82 -> .76/.80/.92, Eddy's measured Nexx values. The rule is text
   must pass against PURE WHITE showing through: at .35 a bright patch of the photo
   left the white h1 near 2.4:1. At .76 the worst case composites to rgb(61,61,61):
   white 9.9:1, the yellow eyebrow 7.2:1, --coral 4.0:1 (large text, 3:1 needed). */
/* Video hero (October 15 2026): the owner's own footage under a lighter veil than the
   photo hero, so the video reads while the white headline keeps its contrast. */
.hero-video{background:var(--ink)}
.hero-video .veil{background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,.55) 22%,rgba(0,0,0,.55) 60%,rgba(0,0,0,.62) 100%)}
/* Lighter video (October 20, 2026, review call: the owner wanted the top video lighter and more
   see-through). The footage itself is brightened, and the veil is lightest where there is no
   text (the top strip) and, on wide screens, to the right of the headline. The text zone keeps
   the .55 floor that the white copy needs (white 4.5:1 with pure white showing through). */
.hero-video video{filter:brightness(1.3) saturate(1.1)}
@media (min-width:900px){.hero-video .veil{background:linear-gradient(90deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.26) 100%),linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,.3) 100%)}}
.hero-pause{margin-top:26px}
.inside-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.inside-grid figure{margin:0}
.inside-grid img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:20px;box-shadow:var(--shadow);display:block}
.inside-grid figcaption{margin-top:10px;font-weight:600;font-size:.95rem}
@media (max-width:760px){.inside-grid{grid-template-columns:1fr}}
.hero .veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.76) 0%,rgba(0,0,0,.80) 50%,rgba(0,0,0,.92) 100%)}
.hero .wrap{position:relative;z-index:2;color:#fff;padding-top:120px;padding-bottom:60px;width:100%}
.hero h1{font-size:clamp(3rem,9vw,7rem);color:#fff;text-shadow:0 6px 40px rgba(0,0,0,.4);max-width:14ch}
/* --coral, not --red: never brand red on a photo — #C8202A cannot reach 3:1 over it. */
.hero h1 em{color:var(--coral);font-style:normal}
.hero p.lede{margin:22px 0 34px;font-size:clamp(1.05rem,2.2vw,1.35rem);max-width:44ch;color:rgba(255,255,255,.92);font-weight:500}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap}
.hero .badges{margin-top:38px;display:flex;gap:26px;flex-wrap:wrap;font-size:.82rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.hero .badges span{display:flex;align-items:center;gap:8px}
.hero .badges span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red)}
.scrollcue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:3;color:rgba(255,255,255,.7);font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px}
.scrollcue::after{content:"";width:1px;height:34px;background:linear-gradient(rgba(255,255,255,.7),transparent);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}

/* inner page hero banner */
/* Scrim .72/.86 -> .84/.92 (Eddy's Nexx values): the coral and yellow eyebrows and the
   active nav link sit on these photos and need 4.5:1 over their brightest part. */
.pagehero{position:relative;padding:130px 0 44px;color:#fff;overflow:hidden;background:linear-gradient(rgba(18,15,14,.84),rgba(18,15,14,.92)),var(--bg) center/cover no-repeat;background-color:var(--ink)}
.pagehero h1{font-size:clamp(2.6rem,7vw,5rem);margin:.2em 0 .25em}
.pagehero p{max-width:52ch;color:rgba(255,255,255,.85);font-size:1.1rem}

section{position:relative}
.pad{padding:clamp(40px,5vw,64px) 0}
.sec-head{text-align:center;max-width:640px;margin:0 auto clamp(22px,3vw,34px)}
.sec-head h2{font-size:clamp(2.2rem,5.5vw,3.6rem);margin:.35em 0 .3em}
.sec-head p{color:var(--muted);font-size:1.08rem}
.lead-p{font-size:1.3rem;font-weight:500;color:var(--ink);margin-bottom:20px;line-height:1.5}
.narrow p{margin-bottom:16px;color:var(--prose);font-size:1.05rem}

/* favorites grid */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.card{position:relative;border-radius:20px;overflow:hidden;background:var(--ink);box-shadow:var(--shadow);aspect-ratio:4/5}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .45s ease}
.card .cap h3,.card .cap span{transition:opacity .45s ease;will-change:opacity;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.card:hover img{transform:scale(1.06)}
/* Scrim .85 -> .92 and the caption's alpha dropped: rgba(255,255,255,.82) measured
   5.75-6.86:1 against the lightest pixel actually behind the glyphs, and the 24px <h3>
   above it cleared the large-text bar by 0.05 (4.55 against 4.5) — which a brighter
   photo entering the rotation pool would have taken away. Same rule as everywhere:
   state the final colour instead of thinning it with alpha. */
.card .cap{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;background:linear-gradient(180deg,transparent 35%,rgba(15,12,11,.92) 100%);color:#fff}
.card .cap h3{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:1.5rem;letter-spacing:.02em;line-height:1}
.card .cap span{font-size:.9rem;color:#fff;margin-top:5px}
.menu-cta{text-align:center;margin-top:46px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* story */
.story{background:var(--ink);color:#fff}
.story .split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,6vw,72px);align-items:center}
.story img{border-radius:20px;box-shadow:var(--shadow);aspect-ratio:3/2;object-fit:cover;width:100%}
.story h2{font-size:clamp(2.1rem,5vw,3.4rem);color:#fff;margin:.35em 0 .5em}
.story p{color:rgba(255,255,255,.82);font-size:1.08rem;margin-bottom:16px;max-width:52ch}
.story .eyebrow{color:var(--coral)}

/* values row */
.values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.value{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:32px 28px}
.value h2,.value h3{font-size:1.5rem;color:var(--red-text);margin-bottom:10px}
.value p{color:var(--muted)}

/* catering band */
.catering{position:relative;color:#fff;overflow:hidden;background:linear-gradient(120deg,var(--red-dark),var(--red))}
.catering .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,60px);align-items:center}
.catering h2{font-size:clamp(2rem,5vw,3.2rem);color:#fff;margin-bottom:.4em}
.catering p{color:rgba(255,255,255,.92);font-size:1.1rem;margin-bottom:26px;max-width:44ch}
.catering img{border-radius:18px;filter:drop-shadow(0 20px 40px rgba(0,0,0,.35))}
.catering-split{align-items:center}
.catering-split img{filter:drop-shadow(0 16px 30px rgba(0,0,0,.25));margin-bottom:8px}
.chk{list-style:none;margin:8px 0 0}
.chk li{position:relative;padding-left:30px;margin:12px 0;color:var(--prose);font-size:1.05rem}
.chk li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--red);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>");background-size:14px;background-position:center;background-repeat:no-repeat}

/* menu page */
.menu-wrap .menu-block{margin-bottom:clamp(48px,7vw,84px)}
.mb-head{border-bottom:2px solid var(--line);padding-bottom:16px;margin-bottom:30px}
.mb-head h2{font-size:clamp(1.8rem,4.5vw,2.7rem)}
.mb-head p{color:var(--muted);margin-top:4px}
.menu-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 40px}
.menu-item{display:flex;gap:18px;align-items:center;padding:14px;border-radius:16px;transition:background .2s}
.menu-item:hover{background:#fff}
.menu-item img{width:92px;height:92px;object-fit:cover;border-radius:12px;flex-shrink:0;box-shadow:var(--shadow)}
.menu-item .mi-noimg{width:92px;height:92px;border-radius:12px;flex-shrink:0;background:linear-gradient(135deg,#f0f0f0,#e2e2e2);display:flex;align-items:center;justify-content:center}
.menu-item .mi-noimg::after{content:"";width:34px;height:34px;background:var(--red);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 10h16a0 0 0 0 1 0 0 8 8 0 0 1-8 8 8 8 0 0 1-8-8zM6 14h12M5 20h14'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 10h16a8 8 0 0 1-16 0zM6 14h12M5 20h14'/></svg>") center/contain no-repeat;opacity:.5}
/* min-width:0 + wrap: a long name and a nowrap price could push the row past 320px
   (SC 1.4.10) — it was only hidden by body{overflow-x:hidden}. */
.mi-body{flex:1;min-width:0}
.mi-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.mi-head h3{min-width:0}
.mi-head h3{font-size:1.15rem;font-weight:800;letter-spacing:-.01em}
.mi-price{font-family:'Anton',sans-serif;color:var(--red-text);font-size:1.15rem;white-space:nowrap}
.mi-body p{color:var(--muted);font-size:.92rem;margin-top:2px}

/* locations page */
.loc-list{display:flex;flex-direction:column;gap:34px}
.loc-full{display:grid;grid-template-columns:1.1fr 1fr;gap:0;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--paper);box-shadow:var(--shadow);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease}
.loc-full:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.15)}
.loc-full:nth-child(even){grid-template-columns:1fr 1.1fr}
.loc-full:nth-child(even) .loc-map{order:2}
.loc-map{position:relative;min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;color:#fff;background:linear-gradient(135deg,#1a1a1a,#000000);overflow:hidden;transition:filter .2s ease}
.loc-map::before{content:"";position:absolute;inset:0;opacity:.16;background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);background-size:34px 34px}
.loc-map:hover{filter:brightness(1.12)}
.loc-map .pin-xl{width:56px;height:56px;fill:var(--red);position:relative;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.loc-map .map-name{position:relative;font-family:'Anton',sans-serif;text-transform:uppercase;font-size:1.5rem;letter-spacing:.03em}
.loc-map .map-cta{position:relative;font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.75)}
.loc-info{padding:clamp(26px,4vw,44px);display:flex;flex-direction:column;justify-content:center}
.loc-info h2{font-size:clamp(1.8rem,4vw,2.6rem);color:var(--ink)}
.loc-info address{font-style:normal;color:var(--muted);font-size:1.1rem;margin:8px 0 18px;line-height:1.5}
.loc-hours{display:flex;flex-direction:column;gap:2px;margin-bottom:24px;color:var(--prose)}
.loc-hours strong{text-transform:uppercase;letter-spacing:.1em;font-size:.75rem;color:var(--red-text);margin-bottom:4px}
.loc-actions{display:flex;gap:12px;flex-wrap:wrap}

/* homepage locations cards */
.locs .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Only one location: it sits in the middle column, same size, instead of the left one
   (his ask, October 13, 2026). A second store turns this off by itself. */
.locs .grid>.loc:only-child{grid-column:2}
.loc{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:30px 28px;transition:transform .2s ease,box-shadow .2s ease;display:flex;flex-direction:column}
.loc:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.loc .pin{width:44px;height:44px;border-radius:12px;background:var(--red);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.loc .pin svg{width:22px;height:22px;fill:#fff}
.loc h3{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:1.55rem;letter-spacing:.02em}
.loc address{font-style:normal;color:var(--muted);margin:8px 0 6px;font-size:1rem;line-height:1.5}
.loc .hours{font-size:.9rem;color:var(--muted);margin-bottom:22px}
.loc .loc-actions{margin-top:auto}
.loc .loc-actions .btn{flex:1;justify-content:center}

/* footer */
footer{background:#000000;color:rgba(255,255,255,.72);padding:64px 0 30px}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-brand{display:flex;align-items:center;gap:14px;margin-bottom:16px;color:#fff;font-family:'Anton',sans-serif;text-transform:uppercase;font-size:1.3rem}
/* The full diamond here too, no circle crop (his tap on the preview, October 13, 2026: "swap the bottom one too"). */
.foot-brand img{height:52px;width:auto}
.footcol h2,.footcol h4{color:#fff;font-size:.8rem;text-transform:uppercase;letter-spacing:.18em;margin-bottom:16px}
.footcol a,.footcol p{display:block;color:rgba(255,255,255,.7);font-size:.95rem;margin-bottom:10px;transition:color .2s}
.footcol a:hover{color:#fff}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-top:24px;font-size:.85rem;flex-wrap:wrap}
.footer-credit{margin-top:12px;font-size:.75rem;color:rgba(255,255,255,.7)}
/* A standalone link needs a 24px target (SC 2.5.8); at .85rem the line box was ~22px. */
.foot-bottom a{display:inline-block;padding:.15rem 0}
.footer-credit a{color:inherit;text-decoration:underline}
.footer-credit a:hover{color:#fff}

.mobile-order{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(0,0,0,.96);backdrop-filter:blur(10px);display:none}
.mobile-order .btn{width:100%;justify-content:center;padding:1em}
/* The bar now sits INSIDE <footer> (no content outside a landmark) and permanently
   covers the last ~75px of the page, so the footer reserves that room — otherwise
   the last footer links take focus underneath it (SC 2.4.11). */
@media(max-width:720px){ footer{padding-bottom:calc(30px + 82px)} }

.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
/* Tab can reach a control inside a block that has not faded in yet — show it at once. */
.reveal:focus-within{opacity:1;transform:none;transition:none}
@media (scripting:none){ .reveal{opacity:1;transform:none} }

@media(max-width:900px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .story .split,.catering .split,.catering-split{grid-template-columns:1fr}
  .menu-list{grid-template-columns:1fr}
  .values{grid-template-columns:1fr}
  .locs .grid{grid-template-columns:1fr}
  .locs .grid>.loc:only-child{grid-column:auto}
  .loc-full,.loc-full:nth-child(even){grid-template-columns:1fr}
  .loc-full:nth-child(even) .loc-map{order:0}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  /* CLOSED = visibility:hidden, not just translated off-screen: a transform alone left
     every drawer link in the Tab order, focused where no one could see it (SC 2.4.3/
     2.4.7). visibility flips instantly on open and only after the 0.3s slide on close.
     overflow-y + `safe center` + nowrap: at 320x256 the links outgrow the screen and
     must scroll, not clip above the top edge (SC 1.4.10). */
  .nav-links{position:fixed;inset:0 0 0 auto;width:min(78vw,320px);max-height:100dvh;background:var(--ink-2);flex-direction:column;flex-wrap:nowrap;justify-content:safe center;gap:26px;padding:40px;transform:translateX(100%);visibility:hidden;transition:transform .3s ease,visibility 0s linear .3s;box-shadow:-20px 0 60px rgba(0,0,0,.5);overflow-y:auto;overscroll-behavior:contain}
  .nav-links.open{transform:none;visibility:visible;transition:transform .3s ease,visibility 0s}
  .nav-links a{font-size:1.15rem;flex:0 0 auto}
  /* backdrop-filter on the scrolled header makes it the containing block of the fixed
     drawer, which then collapses to the header's height (Eddy, be21250). Drop the blur
     only while the drawer is open. */
  header:has(#navlinks.open){backdrop-filter:none;-webkit-backdrop-filter:none}
  /* The Order Now bar is hidden while the drawer is open so nothing sits over it. */
  body:has(#navlinks.open) .mobile-order{visibility:hidden}
  /* SC 2.4.11 / 2.4.12 — .nav-links is the header's only POSITIONED child while it is
     open, so it painted over the statically-positioned toggle: Tab out of the drawer
     landed on #hamb with 121 of 121 hit-test points covered and no ring on screen.
     site.js keeps #hamb in the tab cycle as the close control, so it has to be visible;
     one explicit layer on the open-state toggle is enough. */
  header:has(#navlinks.open) .hamb{position:relative;z-index:1}
  .nav-cta .btn:not(.hamb){display:none}
  .hamb{display:flex}
  .mobile-order{display:block}
  .foot-top{grid-template-columns:1fr}
  .hero .wrap{padding-bottom:110px}
  .grid{grid-template-columns:1fr}
}

/* ===== catering order builder ===== */
.corder-intro{background:var(--ink);color:#fff;border-radius:20px;padding:clamp(22px,4vw,34px);display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between;margin-bottom:38px}
.corder-intro .ci-min{font-family:'Anton',sans-serif;font-size:clamp(1.6rem,4vw,2.2rem);line-height:1;color:#fff}
.corder-intro .ci-min small{display:block;font-family:'Inter',sans-serif;font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--coral);margin-bottom:6px}
.corder-intro p{color:rgba(255,255,255,.8);max-width:40ch;margin:0}
.corder-intro a{color:#fff;font-weight:700;white-space:nowrap}
.cbuild{display:grid;grid-template-columns:1.5fr .95fr;gap:44px;align-items:start}
.ccat{margin-bottom:30px}
.ccat>h2,.ccat>h3{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:1.5rem;letter-spacing:.02em;margin-bottom:4px}
.ccat>.cc-sub{color:var(--muted);font-size:.92rem;margin-bottom:12px}
.citem{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.citem .ci-name{font-weight:600;line-height:1.2}
.citem .ci-price{color:var(--muted);font-size:.88rem;margin-top:2px}
/* (catering stepper — unused on this site, kept template-correct) no overflow:hidden:
   it clipped the focus ring; the end buttons carry the rounding instead. */
.qty{display:flex;align-items:center;border:1px solid var(--line-strong);border-radius:999px;background:#fff;flex:0 0 auto}
.qty button:first-child{border-radius:999px 0 0 999px}
.qty button:last-child{border-radius:0 999px 999px 0}
.qty button{width:36px;height:36px;background:#fff;border:none;font-size:1.15rem;line-height:1;cursor:pointer;color:var(--ink);transition:background .15s}
.qty button:hover{background:var(--tint)}
.qty button:disabled{opacity:.35;cursor:default}
.qty input{width:42px;text-align:center;border:none;font-weight:700;font-size:1rem;background:#fff;-moz-appearance:textfield;color:var(--ink)}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* summary + form panel */
.cpanel{position:sticky;top:88px;display:flex;flex-direction:column;gap:18px}
.csummary{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow)}
.csummary h2,.csummary h3{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:1.25rem;margin-bottom:12px}
.csum-list{list-style:none;margin:0 0 12px;max-height:210px;overflow:auto}
.csum-list li{display:flex;justify-content:space-between;gap:12px;font-size:.9rem;padding:5px 0;color:var(--ink)}
.csum-list li span:last-child{color:var(--muted);white-space:nowrap}
.csum-empty{color:var(--muted);font-size:.9rem;padding:6px 0}
.csum-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.csum-total .ct-label{font-weight:700}
.csum-total .ct-val{font-family:'Anton',sans-serif;font-size:1.6rem;color:var(--red-text)}
.min-wrap{margin-top:14px}
.min-bar{height:8px;background:var(--line-strong);border-radius:999px;overflow:hidden}
.min-bar>span{display:block;height:100%;width:0;background:var(--red);border-radius:999px;transition:width .35s ease}
.min-note{font-size:.82rem;margin-top:7px;color:var(--muted)}
.min-note.met{color:#15753E;font-weight:600}   /* was #1a8f4c = 4.14:1 at 13.1px; this is 5.76:1 */
/* form */
.cform{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow)}
.cform h2,.cform h3{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:1.25rem;margin-bottom:14px}
.cform .frow{display:grid;gap:12px;margin-bottom:12px}
.cform .frow.two{grid-template-columns:1fr 1fr}
.cform .frow.three{grid-template-columns:2fr 1fr 1fr}
.cf-fieldset{border:1px solid var(--line-strong);border-radius:12px;padding:12px 14px 6px;margin:0}
.cf-fieldset legend{font-size:.8rem;font-weight:600;letter-spacing:.02em;color:var(--ink);padding:0 6px}
.cf-fieldset legend .req{color:var(--red-text)}
.cf-radios{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin-top:6px}
.cf-radio{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:500;margin-bottom:8px;cursor:pointer}
.cf-radio input{width:auto;margin:0;accent-color:var(--red);flex:0 0 auto}
.cf-radio span{color:var(--ink)}
.cform label{display:block;font-size:.8rem;font-weight:600;letter-spacing:.02em;color:var(--ink);margin-bottom:5px}
.cform label .req{color:var(--red-text)}
.cform input,.cform select,.cform textarea{width:100%;font-family:inherit;font-size:.95rem;padding:11px 13px;border:1px solid var(--line-strong);border-radius:10px;background:#fff;color:var(--ink)}
.cform input:focus,.cform select:focus,.cform textarea:focus{border-color:var(--red)}
.cform textarea{min-height:78px;resize:vertical}
.cform .btn{width:100%;justify-content:center;padding:1em;margin-top:6px}
.cf-hide{display:none}
/* Honeypot: display:none, never parked off-screen (off-screen stays focusable). */
.cf-hp{display:none}
.cthanks{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:40px 26px;text-align:center;box-shadow:var(--shadow)}
.cthanks .ct-ico{width:58px;height:58px;border-radius:999px;background:var(--red);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.cthanks .ct-ico svg{width:30px;height:30px;fill:#fff}
.cthanks h2,.cthanks h3{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:1.6rem;margin-bottom:8px}
.cthanks p{color:var(--muted);max-width:40ch;margin:0 auto}
/* mobile sticky total */
.cbar{position:fixed;left:0;right:0;bottom:0;z-index:55;background:rgba(0,0,0,.97);backdrop-filter:blur(10px);color:#fff;display:none;justify-content:space-between;align-items:center;gap:14px;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
.cbar .cb-total{font-family:'Anton',sans-serif;font-size:1.3rem}
.cbar .cb-total small{display:block;font-family:'Inter',sans-serif;font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.cbar .btn{padding:.8em 1.4em}
@media(max-width:900px){
  .cbuild{grid-template-columns:1fr;gap:28px}
  .cpanel{position:static}
  .csum-list{max-height:none}
}
@media(max-width:720px){
  .cform .frow.two,.cform .frow.three{grid-template-columns:1fr}
  .cf-radios{grid-template-columns:1fr}
  .cbar{display:flex}
  .cbuild{padding-bottom:70px}
}

/* catering: green when food minimum met */
.min-bar>span.met{background:#1a8f4c}
.csum-total .ct-val.met{color:#1a8f4c}
.cbar .cb-total.met{color:#54dd8b}
/* clickable store addresses — underlined, not colour-only (SC 1.4.1) */
.addr-link{color:inherit;text-decoration:underline;text-underline-offset:2px;transition:color .18s ease}
.addr-link:hover{color:var(--red-text)}
/* Links inside running text are underlined, not told apart by colour alone (SC 1.4.1).
   Buttons are excluded — a filled or outlined button already reads as a control. */
/* .foot-bottom a added 2026-11-03 (SC 1.4.1): this selector was keyed to `p`, and the
   Accessibility and Privacy links sit in a <span>, so they fell through it — measured
   rgba(255,255,255,.7) against the sibling copyright text at .72, i.e. rgb(178,178,178)
   vs rgb(184,184,184) = 1.11:1, with no underline either. Nothing at all marked them as
   links, and they are the two links an accessibility-needing visitor is hunting for. */
a[href^="tel:"]:not(.btn):not(.ord-tile),a[href^="mailto:"]:not(.btn),
main p a:not(.btn),footer p a:not(.btn),
.foot-bottom a{text-decoration:underline;text-underline-offset:2px}

/* story page two-column intro (fills dead space) */
.split-2{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,6vw,64px);align-items:center}
.split-2 img{border-radius:20px;box-shadow:var(--shadow);aspect-ratio:4/5;object-fit:cover;width:100%}
@media(max-width:900px){ .split-2{grid-template-columns:1fr;gap:28px} .split-2 img{aspect-ratio:16/10;order:-1} }

/* ===== homepage: order online band + daily promos ===== */
.order-band{background:var(--cream);border-bottom:1px solid var(--line)}
.order-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:38px}
.promos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:820px;margin:0 auto}
/* Promo cards read as an OFFER, not a price table (improvement #4).
   A torn-ticket notch on each side plus a dashed rule under the price is the
   visual language of a coupon — it costs nothing, needs no new artwork, and it
   is the difference between "here are three numbers" and "here is a deal". */
.promo{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:30px 20px 26px;text-align:center;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.promo:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.16)}
/* Ticket notches were tried here and removed: rendered at card edges they read
   as stray floating dots — worst of all in the gap between two adjacent cards —
   rather than as a punched ticket. The DAILY pill and the dashed rule under the
   price already do the coupon job without the artefact. */
.promo .promo-price{position:relative;padding-bottom:10px}
.promo .promo-price::after{content:"";position:absolute;left:22%;right:22%;bottom:0;border-bottom:2px dashed rgba(0,0,0,.16)}
.promo-flag{display:inline-block;font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:.66rem;color:#fff;background:var(--red-dark);padding:4px 12px;border-radius:999px;margin-bottom:10px}
.promo .promo-price{font-family:'Anton',sans-serif;font-size:clamp(2.2rem,5vw,3rem);color:var(--red-text);line-height:1}
.promo .promo-label{font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.86rem;color:var(--ink)}
.promo.promo-tag{background:var(--ink);border-color:var(--ink)}
.promo.promo-tag .promo-flag{background:#fff;color:var(--ink)}
.promo.promo-tag span{font-family:'Anton',sans-serif;text-transform:uppercase;color:#fff;font-size:clamp(1.4rem,3.4vw,1.9rem);line-height:1.05;letter-spacing:.02em}
.promo.promo-tag span:last-child{color:var(--red-text)}
@media(max-width:640px){ .promos{grid-template-columns:1fr;max-width:420px} .order-btns .btn{flex:1;justify-content:center} }

/* ===== homepage: we are hiring band ===== */
.hiring{background:var(--paper)}
.hiring .split{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,6vw,72px);align-items:center}
.hiring img{border-radius:20px;box-shadow:var(--shadow);aspect-ratio:3/2;object-fit:cover;width:100%}
.hiring h2{font-size:clamp(2.1rem,5vw,3.4rem);margin:.3em 0 .5em}
.hiring p{color:var(--prose);font-size:1.08rem;margin-bottom:22px;max-width:48ch}
@media(max-width:900px){ .hiring .split{grid-template-columns:1fr} .hiring img{order:-1} }

/* ===== footer socials ===== */
.socials{display:flex;gap:12px;margin-top:20px}
.socials a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;transition:background .2s ease,transform .2s ease}
.socials a:hover{background:var(--red);border-color:var(--red);transform:translateY(-2px)}
.socials svg{width:19px;height:19px;fill:#fff}

/* menu hero — 4-cutout foursome level with the title */
.menuhero-inner{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:clamp(24px,5vw,60px)}
.menuhero-foursome{margin-top:-22px}
.menuhero-text{flex:1 1 auto;max-width:56%}
.menuhero-foursome{flex:0 0 auto;width:min(58%,660px);filter:drop-shadow(0 16px 26px rgba(0,0,0,.45))}
@media(max-width:900px){
  .menuhero-inner{flex-direction:column;align-items:flex-start}
  .menuhero-text{max-width:100%}
  .menuhero-foursome{width:min(92%,520px);margin:24px auto 0;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
  .menuhero{padding-bottom:40px}
}

/* ---- Jul 20 2026 audit batch ---- */
/* failsafe: if site.js never ran (load error), force content visible */
html.no-js .reveal, html.nojs-reveal .reveal{opacity:1;transform:none}
/* catering builder page: the generic Order Online bar hid the .cbar total on
   mobile (z 60 vs 55) — the builder's own bar owns the bottom there */
body.page-cbar .mobile-order{display:none!important}
/* menu rows without a real photo read as clean text rows, no placeholder tile */
.menu-item.no-photo{padding-left:20px}
/* footer phone lines */
.foot-phones{margin-top:10px;color:rgba(255,255,255,.6);font-size:.92rem;line-height:1.7}
.foot-phones a{color:rgba(255,255,255,.85)}
.foot-phones a:hover{color:#fff}
/* catering page minimum note */
.cat-note{margin-top:14px;padding:12px 16px;background:#fff;border-left:4px solid var(--red);border-radius:8px;font-size:.98rem}
/* page-hero eyebrow legibility over photos */
.pagehero .eyebrow,.hero .eyebrow{text-shadow:0 1px 10px rgba(0,0,0,.6)}
/* careers résumé picker styled like the rest of the form */
input[type=file]::file-selector-button{font:inherit;font-weight:700;background:var(--ink,#000000);color:#fff;border:0;border-radius:8px;padding:.6em 1.1em;margin-right:12px;cursor:pointer}
input[type=file]::file-selector-button:hover{background:var(--red)}

/* ---- Accessibility (ADA lawsuit remediation, Aug 7 2026) -----------------
   Keyed to "Nexx Burger - ADA Improvements and Violations Explanation".
   .sr-only carries the spoken-only text (item 8, full day names). The skip
   link answers items 3/4 (a banner that trapped the start of the tab order).
   :focus-visible replaces the outlines the design suppresses (WCAG 2.4.7). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* SC 1.4.6 — the skip link is 16px bold white on a red fill, the same relationship as
   .btn-red and the same correction: --red was 5.68:1, --red-dark is 7.86:1. It is off
   screen until :focus, which is why no scanner ever reported it. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--red-dark);
  color:#fff;padding:12px 20px;font-weight:700;border-radius:0 0 8px 0;text-decoration:none}
.skip-link:focus{left:0}
/* tabindex=-1 on <main> makes the skip link MOVE focus, not just scroll (SC 2.4.1).
   No ring on it: <main> is not a control. */
main[tabindex]:focus,main[tabindex]:focus-visible{outline:none}
/* ONE sitewide ring, TWO-TONE so it shows on every surface: a dark 3px outline with a
   light halo on the light page, inverted on the dark bands (header, hero, story,
   footer, phone order bar). The old single red ring vanished on red buttons. */
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 6px #fff}
header :focus-visible,footer :focus-visible,.hero :focus-visible,.pagehero :focus-visible,
.story :focus-visible,.catering :focus-visible,.corder-intro :focus-visible,
.mobile-order :focus-visible,.cbar :focus-visible{outline-color:#fff;box-shadow:0 0 0 6px var(--ink)}
/* Flush against the viewport edge an outset ring is cut off — draw it inset. */
.skip-link:focus-visible{outline:3px solid #fff;outline-offset:-6px;box-shadow:none}
.loc-map:focus-visible{outline:3px solid #fff;outline-offset:-6px;box-shadow:inset 0 0 0 9px var(--ink)}
.cform input:focus-visible,.cform select:focus-visible,.cform textarea:focus-visible{
  outline:3px solid var(--red);outline-offset:2px}
.field-hint{display:block;font-size:.78rem;color:var(--muted);font-weight:400;margin-top:2px}
/* The visible panel is VISUAL ONLY — announcing is #form-live's job, a permanently
   rendered .sr-only role=status region at the top of <main> (one per page, never
   display:none). An empty panel collapses to nothing instead of being hidden. */
p.form-status:empty{border:0;padding:0;margin:0;background:none}
p.form-status{display:block;background:#fff4f4;border:2px solid var(--red);border-radius:8px;
  padding:12px 16px;margin-bottom:14px;font-size:.9rem;font-weight:600;color:#8b0000}
p.form-status.ok{background:#f1fbf4;border-color:#178744;color:#0f5c30}
/* Per-field error, written by site.js and tied to its field by aria-describedby. */
/* p.field-error: `.narrow p` would otherwise repaint it as body copy. */
p.field-error{font-size:.85rem;font-weight:600;color:#a2161f;margin:0}
.req{color:var(--red-text)}
[aria-invalid="true"]{border-color:var(--red)!important;box-shadow:0 0 0 3px rgba(200,32,42,.14)}

/* ── ORDER NOW DIALOG ───────────────────────────────────────────────────────
   His ask, September 11 2026: one Order Now button that opens the delivery
   platforms and the phone number together, so the customer picks. Built to the
   Tom's Jr. pattern (a card per way to order) collapsed to Louie's one location.
   :target keeps it working with JavaScript off — the button is a real #order
   link, JS only upgrades it to a dialog that traps focus and closes on Esc. */
.ord-back{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(12,10,9,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ord-back.is-open,.ord-back:target{display:flex}
body.ord-open{overflow:hidden}
.ord-card{position:relative;width:100%;max-width:520px;max-height:calc(100svh - 40px);overflow-y:auto;background:var(--paper);color:var(--ink);border-radius:22px;padding:34px clamp(20px,4vw,34px) 28px;box-shadow:0 40px 90px -30px rgba(0,0,0,.7);animation:ordIn .22s ease-out}
@keyframes ordIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ord-card{animation:none}}
.ord-card h2{font-size:clamp(1.6rem,4.4vw,2.1rem);margin:6px 0 8px}
.ord-sub{color:var(--muted);font-size:.97rem;margin-bottom:22px}
.ord-x{position:absolute;top:12px;right:14px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:1.7rem;line-height:1;color:var(--muted);background:transparent;border:0;cursor:pointer;text-decoration:none}
.ord-x:hover{background:var(--tint);color:var(--ink)}
.ord-h{font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.7rem;color:var(--muted);margin:0 0 10px}
/* SC 1.4.11 — the tile is white-on-white, so its border is the ONLY thing that draws
   the control. It used --line (the DECORATIVE hairline token) at 1.26:1. --line-strong
   is the CONTROL-edge token this stylesheet already defines for exactly this at :12,
   and the form inputs already use it correctly: #8a8a8a is 3.45:1 on white. */
.ord-tile{display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:10px;border:2px solid var(--line-strong);border-radius:14px;background:var(--paper);transition:border-color .18s ease,transform .18s ease,box-shadow .2s ease}
.ord-tile:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 14px 28px -16px rgba(0,0,0,.4)}
.ord-tile:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.ord-mark{flex:0 0 auto;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--tint);color:var(--ink)}
.ord-mark svg{width:21px;height:21px}
.ord-text{display:flex;flex-direction:column;min-width:0;flex:1}
.ord-name{font-weight:700;font-size:1.02rem;line-height:1.25}
.ord-tag{font-size:.8rem;color:var(--muted)}
.ord-go{flex:0 0 auto;color:var(--muted);font-size:1.15rem}
.ord-tile:hover .ord-go{color:var(--red-text)}
.ord-phone .ord-mark{background:var(--red);color:#fff}
/* SC 1.4.11 — FIXED AHEAD OF THE TRAP. ORDER_PLATFORMS (build_site.py) still has no
   live URL, so these three tiles render on 0 of 8 pages and no scanner can reach them —
   but the glyph on each partner fill measured 2.38:1 (Uber Eats #06C167), 3.70:1
   (DoorDash #FF3008) and 3.83:1 (Grubhub #F63440) against the 3:1 an icon needs, so all
   three became live failures the moment someone pasted a URL in. These are the measured
   replacements: Uber Eats keeps its own green and darkens the GLYPH to #05351d (5.76:1);
   DoorDash and Grubhub keep white glyphs on a one-step-darker fill, #C42405 (5.83:1) and
   #C4222C (5.81:1). Each fill also clears 3:1 against the tile's white background
   (5.83 and 5.81; the Uber Eats green is 2.38:1 there, which is why its glyph, not its
   fill, carries the contrast). Partner brand marks are the partner's call, so this is
   still flagged for the client at Q-005 — but it now fails safe rather than fails open. */
.ord-ubereats .ord-mark{background:#06C167;color:#05351d}
.ord-doordash .ord-mark{background:#C42405;color:#fff}
.ord-grubhub  .ord-mark{background:#C4222C;color:#fff}
.ord-or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.18em;font-weight:700}
.ord-or::before,.ord-or::after{content:"";flex:1;height:1px;background:var(--line)}
.ord-foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:.84rem;color:var(--muted);line-height:1.5}
.ord-foot a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:520px){
  .ord-back{padding:0;align-items:flex-end}
  .ord-card{max-width:none;border-radius:22px 22px 0 0;max-height:92svh;padding-bottom:34px}
}


/* ---- Forms (Work with us). Ported from the Baby Bros concept, September 12 2026,
   and re-tinted: theirs is a dark page with #0f0f0f inputs, this one is pure white,
   so the fields are white on white and carry their weight with a border instead.
   --line at #e5e5e5 is a divider, too faint to read as an input edge, so the field
   border is its own darker value. */
.et-form{display:grid;gap:18px;margin-top:26px}
/* align-items:end -- only some fields carry a .field-hint (Email does, Phone does
   not), and a hint is an extra line ABOVE the input. Stretched, the two inputs in a
   row sit at different heights. Bottom-aligning lines the INPUTS up. */
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:end}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.field input,.field select,.field textarea{font-family:inherit;font-size:1rem;color:var(--ink);background:var(--paper);border:1px solid var(--line-strong);border-radius:12px;padding:14px 15px;width:100%;transition:border-color .18s ease,background .18s ease}
.field textarea{min-height:130px;resize:vertical}
.field select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23525252' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:44px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#5c5c5c}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-color:var(--red);background:var(--tint)}
/* ="true", not attribute-presence: the validator now writes aria-invalid="false" on a
   corrected field instead of removing the attribute (a <select required> with an empty
   option is :invalid forever, so a removed attribute re-exposes AX invalid=true), and a
   presence selector would have painted every corrected field red. */
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--red);border-width:2px}
.field-hint{display:block;font-size:.8rem;color:var(--muted);font-weight:400;margin-top:-2px}
.form-note{color:var(--muted);font-size:.86rem;line-height:1.5}
.et-form .btn{justify-self:start}
/* The resume step. A checkbox, not a file input: mailto: cannot carry an
   attachment, so a file field would swallow the file silently. 20px box, 44px
   hit area on the label. Re-tinted from the Baby Bros original for a white page. */
.checkfield{gap:9px}
label.checkline{display:flex;align-items:center;gap:12px;cursor:pointer;min-height:44px;
  font-size:.95rem;font-weight:500;letter-spacing:normal;text-transform:none;color:var(--ink)}
label.checkline input{appearance:none;flex:0 0 auto;width:20px;height:20px;margin:0;border:2px solid var(--line-strong);
  border-radius:5px;background:var(--paper);cursor:pointer;transition:border-color .15s ease,background .15s ease}
label.checkline input:hover{border-color:#5c5c5c}
label.checkline input:checked{background:var(--red);border-color:var(--red);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:14px}
label.checkline input:focus-visible{outline:3px solid var(--red);outline-offset:2px}
label.checkline em{font-style:normal;color:var(--muted)}
@media(max-width:720px){.fgrid{grid-template-columns:1fr}}

/* ===== work with us — roles row =====
   `.grid` is three equal columns, so the two roles sat hard left with a dead
   third column (his screenshot, September 12 2026: "center in between what we
   hire for"). Sized auto-fit tracks collapse to the number of roles that
   actually exist and `justify-content:center` centers the set under the
   heading — so a third role, if he ever adds one, still centers itself.
   `.grid.roles-grid` (two classes) is deliberate: it has to outrank the
   `.grid{grid-template-columns:1fr}` inside the narrow media query above. */
.grid.roles-grid{grid-template-columns:repeat(auto-fit,minmax(0,240px));justify-content:center;text-align:center;gap:22px 48px}
.role-card{padding:6px 4px}
.role-card h3{font-size:1.15rem;margin:0;letter-spacing:.01em}

/* ---- Accessibility pass, September 24 2026 ---------------------------------------
   Rules: itsdimitrios-bots/docs/WEB_BUILD_A11Y_CHECKLIST.md. Reference fixes: Eddy
   Verde's Nexx commits 26d56b9 + be21250 (this site is a pre-fix fork of that
   template). Keep this block LAST — forced-colors has to win. */

/* The page topic goes INSIDE the <h1>. The eyebrow that used to sit above a slogan-only
   h1 is now the h1's first line — same words, same look, but a screen reader's heading
   list reads "Find Us: Lower Azusa & Santa Anita", not just the slogan. */
.h1-label{display:block;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.6}
.pagehero h1:has(>.h1-label){margin-top:0}
/* 1.1rem, not the .eyebrow .78rem: as a <p> the page-hero eyebrow picked up
   `.pagehero p{font-size:1.1rem}`, so that is the size it has always rendered at. The
   margin is the h1's own .2em top margin, which used to sit between the two. */
.pagehero h1>.h1-label{font-size:1.1rem;margin-bottom:clamp(.52rem,1.4vw,1rem)}

/* SC 2.2.2 — the Fan Favorites cards re-deal every 4.5s, forever, so there is a way to
   stop them. The label IS the state ("Pause motion" / "Play motion"). */
.motion-toggle[hidden]{display:none}

/* SC 2.3.3 — honour the preference. The rotator is stopped in JS (it starts paused). */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
  .card:hover img{transform:none}
  .btn:hover,.promo:hover,.loc:hover,.loc-full:hover,.socials a:hover,.ord-tile:hover{transform:none}
}

/* ---- Audit 2026-11-03 ------------------------------------------------------------
   SC 2.5.5 Target Size (Enhanced): 111 nodes across 9 shared components measured under
   44x44 CSS px at 375x812 — .hamb 42x33.5 (and at <=720px it is the ONLY route to the
   nav, so no equivalent exists), .nav-links a 23.5 tall, .btn-sm 43.3, #heroPause 37.3,
   .footcol a 24.3, .foot-bottom a 26.5, .socials a 40x40, .foot-phones a 18 tall,
   .menu-jump a 40.9, .ord-x 40x40. Hit area only: every rule below grows padding or
   min-height, none sets a width, so the 320px reflow is untouched (verified: document
   width == viewport width at 320 and 375 on /, /menu.html, /locations.html and
   /work-with-us.html after this block).
   Deliberately NOT inflated, because they are inline in a sentence and exempt: the
   "Earth Tab" footer credit inside "Site by Earth Tab", the order dialog's "Directions"
   inside its address line, and the tel:/mailto: links inside running body copy. */
.hamb{padding:13px 9px;min-width:44px;min-height:44px;align-items:center;justify-content:center}
.nav-links a{display:inline-flex;align-items:center;min-height:44px}
.btn-sm{padding:.75em 1.25em;min-height:44px}
footer .footcol a{display:flex;align-items:center;min-height:44px;margin-bottom:0}
footer .foot-bottom a{display:inline-flex;align-items:center;min-height:44px;padding:0}
footer .foot-phones a{display:inline-flex;align-items:center;min-height:44px}
footer .socials a{width:44px;height:44px}
.ord-x{width:44px;height:44px}

/* SC 1.4.8 — running prose ran up to 137 characters a line (.mb-head p over the full
   1100px .wrap) against the 80-character limit. Capped in `em`, not `px` and not `ch`:
   1ch for Inter at 16.8px is 10.59px while the real prose advance is 7.73px, so a
   ch-based cap under-shoots by about a quarter. 34em lands at 74-80 characters across
   all four sizes involved. */
.narrow p,.sec-head p,.mb-head p,.field-hint,.form-note{max-width:34em}
.sec-head p{margin-left:auto;margin-right:auto}

/* SC 1.4.8 — paragraph spacing must be at least 1.5x the line spacing. Body line-height
   is 1.6, so 1.5 x 1.6 = 2.4em. Measured before: .wrap.narrow p pairs 16px against a
   26.88px line box (needed 40.3), .story p pairs 16px against 27.65 (needed 41.5), the
   footer blurb pair 10px against 25.6 (needed 38.4). Written as `p + p` margin-top so
   it is the gap BETWEEN paragraphs that grows, and single paragraphs, form notes and
   error lines keep their own spacing. */
.narrow p + p,.story p + p{margin-top:2.4em}
/* The footer blurb pair and the special card's tag+description run a 1.7 and a 1.6
   line-height on a smaller type size, so 2.4em of their own font-size lands just under
   the bar (35px against 38, 38px against 40). 2.6em clears both. */
.foot-top > div > p + p,.special .sp-tag + .sp-desc{margin-top:2.6em}
/* The plain-language summary is running prose in list form, so it takes the same cap. */
.plain-summary li{max-width:34em}

/* The hero video's text alternative (SC 1.2.1 / 1.2.8). <details>, not a .sr-only
   paragraph: the description is as useful to someone who has paused the video, or who
   is on a metered connection seeing only the poster, as it is to a screen-reader user. */
.hero-alt{margin-top:18px;max-width:52ch;color:rgba(255,255,255,.92);font-size:.92rem}
.hero-alt summary{cursor:pointer;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  font-size:.78rem;padding:.35em 0;min-height:44px;display:flex;align-items:center}
.hero-alt p{margin-top:8px;line-height:1.6}

/* The site map page (SC 2.4.5) and the plain-language summary on /accessibility.html
   (SC 3.1.5). role="list" is on the markup because both are list-style:none. */
.sitemap-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:18px}
.sitemap-list li{border-bottom:1px solid var(--line);padding-bottom:18px}
.sitemap-list li:last-child{border-bottom:0}
.sitemap-list a{display:inline-flex;align-items:center;min-height:44px;font-family:'Anton',Impact,sans-serif;
  text-transform:uppercase;font-size:1.3rem;letter-spacing:.02em;text-decoration:underline;text-underline-offset:4px}
.sitemap-list p{color:var(--muted);margin-top:2px}
.plain-summary{background:var(--tint);border-left:6px solid var(--red);border-radius:8px;
  padding:20px 22px;margin:0 0 28px}
.plain-summary ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.plain-summary li{padding-left:26px;position:relative;line-height:1.6}
.plain-summary li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;
  border-radius:50%;background:var(--red)}

/* Windows High Contrast / forced colours: filled buttons lose their fill, so give them
   a real border; the ring uses the system Highlight colour. */
@media (forced-colors: active){
  .btn,.ord-tile,.hamb{border:2px solid ButtonText}
  .hamb span{forced-color-adjust:none;background:CanvasText}
  :focus-visible{outline:3px solid Highlight!important;box-shadow:none!important}
  /* The current-page mark must survive a forced palette, where the coral is discarded
     and only the underline is left to carry the state. */
  .nav-links a[aria-current="page"],.footcol a[aria-current="page"],
  .foot-bottom a[aria-current="page"]{text-decoration:underline;text-decoration-color:Highlight}
}

/* Louie's Special — top of Combos (his call, Sep 24 2026). Contrast on #111:
   white 18.9:1, #FFD21E 13.0:1, #d6d6d6 13.0:1; red edge is decoration only. */
.special{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:#111;color:#fff;border-radius:18px;padding:clamp(20px,4vw,32px);margin:0 0 30px;
  border-left:8px solid var(--red);box-shadow:var(--shadow)}
.special .sp-img{display:block;flex:0 0 auto;width:auto;max-width:100%;height:auto;max-height:min(440px,70vw);object-fit:contain;border-radius:12px;margin:0 auto 4px}
/* SC 2.4.6 — the eyebrow moved INSIDE the <h3> (build_site.py special_card), because
   /menu.html emitted "Double Cheeseburger" as an <h3> twice inside <h2>Burgers — the
   $4.95 all-day deal and the $12.49/$6.50 board row — and the only words telling them
   apart sat in a <p> outside the heading. Same pattern the home <h1> already uses with
   .h1-label. It is a block-level span now, so the rendering is unchanged. */
.special h3 .sp-eyebrow{display:block;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-weight:800;text-transform:uppercase;letter-spacing:.2em;font-size:.8rem;color:#FFD21E;margin:0 0 6px;line-height:1.4}
.special h3{font-size:clamp(1.6rem,4.5vw,2.4rem);line-height:1.1;margin:0;color:#fff}
.special .sp-tag{font-weight:700;color:#FFD21E;margin:6px 0 0;font-size:1.05rem}
.special .sp-desc{color:#d6d6d6;margin:8px 0 0;max-width:52ch;line-height:1.5}
.special .sp-price{font-size:clamp(2.6rem,9vw,4rem);font-weight:900;color:#FFD21E;margin:0;line-height:1}
@media (forced-colors: active){.special{border:2px solid CanvasText}}
.specials{display:grid;gap:18px;margin:0 0 30px}
.specials .special{margin:0}

/* New menu (October 15 2026): two-price rows and the jump list. */
.mi-price{display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1.1}
@media (min-width:640px){.mi-price{align-items:flex-end}}
.mi-price .pp{display:block}
.mi-price .pp em{font-family:'Inter',system-ui,sans-serif;font-style:normal;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* Checklist §4: never lighten text with `opacity` — state the final colour. opacity:.9
   composited --red #C8202A down to #CE363F = 4.97:1 on white across 44 nodes (the 22
   second prices and the 22 combo/alone labels), the lowest ratios measured anywhere on
   the site, on the one thing a customer has to read before ordering. Stating the colour
   puts it back to the token's own 5.68:1 and changes nothing else. */
.mi-price .pp+.pp{font-size:.95rem;color:var(--red-text)}
.menu-jump ul{list-style:none;margin:0 0 clamp(28px,5vw,48px);padding:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
/* SC 1.4.11 — same correction as .ord-tile: a white pill on a white page whose only
   boundary was the decorative --line hairline, measured at 1.26:1 from rendered pixels
   (#ffffff x23 -> #e5e5e5 x4 -> #ffffff x37 at DPR 4). --line-strong is 3.45:1. */
.menu-jump a{display:inline-flex;align-items:center;min-height:44px;padding:.55em 1em;border:1.5px solid var(--line-strong);border-radius:999px;font-weight:700;font-size:.9rem;text-decoration:none;color:inherit;background:#fff}
.menu-jump a:hover{border-color:var(--red);color:var(--red-text)}
.menu-block{scroll-margin-top:90px}

/* Tagline band under the hero (hip pass, October 19 2026): static on purpose, no
   marquee, so there is nothing moving to pause (SC 2.2.2). Every phrase is already on
   the page or on their own posters. */
.stripe{background:#ffd21e;color:#000;border-block:3px solid #000;padding:14px 0;overflow:hidden}
.stripe-in{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 26px;font-size:clamp(1.05rem,2.6vw,1.6rem);letter-spacing:.04em;padding:0 20px;text-align:center}
.stripe-in span[aria-hidden]{color:var(--red)}
@media (forced-colors: active){.stripe{border-block:2px solid CanvasText}}

/* Subscribe box (October 20 2026) — sits between the footer columns and the legal row. */
.subscribe{display:grid;grid-template-columns:1.4fr 1.2fr auto;gap:18px 24px;align-items:end;padding:32px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.subscribe .sub-copy h2{margin-bottom:8px}
.subscribe .sub-copy p{color:rgba(255,255,255,.7);font-size:.95rem;margin:0}
.subscribe .field label{color:rgba(255,255,255,.75)}
.subscribe .form-status{grid-column:1/-1;color:#2b0b0d}
.subscribe .btn{justify-self:start}
.subscribe .sub-fields{display:grid;gap:6px}
.subscribe label.checkline{color:rgba(255,255,255,.85)}
.subscribe label.checkline input{border-color:rgba(255,255,255,.7);background-color:transparent}
.subscribe label.checkline input:checked{background-color:var(--red);border-color:var(--red)}
.subscribe label.checkline input:focus-visible{outline-color:#fff}
.subscribe .field-error{color:#ffb4b4}
@media (max-width:760px){.subscribe{grid-template-columns:1fr}}

/* Chicken-tenders popup (October 20, 2026). Reuses the Order Now dialog shell. */
.promo-img{display:block;width:calc(100% + 2*clamp(20px,4vw,34px));max-width:none;margin:-34px calc(-1*clamp(20px,4vw,34px)) 20px;aspect-ratio:16/9;object-fit:cover;border-radius:22px 22px 0 0}
.promo-card .ord-x{background:rgba(255,255,255,.92);color:var(--ink)}
.promo-card .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
/* The popup is centered on every screen (his ask, October 20, 2026). The Order Now dialog becomes a
   bottom sheet under 520px; this one stays a centered card at every width. */
.promo-back{align-items:center;justify-content:center}
.promo-card{max-width:480px;margin:auto}
@media (max-width:520px){
  .promo-back{padding:16px;align-items:center}
  .promo-card{max-width:none;border-radius:22px;max-height:calc(100svh - 32px);padding-bottom:28px}
}

/* menu page hero: the spread photo shows through; darker on the left where the text sits (Oct 29, 2026, his ask) */
.pagehero.menuhero{background:linear-gradient(90deg,rgba(18,15,14,.9) 0,rgba(18,15,14,.74) 45%,rgba(18,15,14,.38) 100%),var(--bg) center 66%/cover no-repeat}

/* Find Us hero: the storefront photo shows through, darker on the left under the text (Oct 29, 2026, his ask) */
.pagehero.photohero{background:linear-gradient(90deg,rgba(18,15,14,.88) 0,rgba(18,15,14,.7) 50%,rgba(18,15,14,.35) 100%),var(--bg) center/cover no-repeat}

/* Favourites cards: lift the two dishes that sat low under the caption (Oct 29, 2026, his ask). Matches by file name so the rotating pool is covered too. */
.card img[src$="fav-sourdough-chicken.jpg"],.card img[src$="fav-breakfast-burrito.jpg"]{object-position:50% 100%}
/* ============================================================================
   SC 1.4.8 — user-selectable foreground / background colours (AAA).
   Audit 2026-11-03, follow-up 2026-11-04. The site had no mechanism at all.

   Both schemes are token-level overrides, so every block of text inherits them
   without a single component needing to know. Measured on the resulting surfaces:
     dark   #ffffff on #000000 = 21.00:1   body #e6e6e6 on #000000 = 17.40:1
     light  #000000 on #ffffff = 21.00:1   body #333333 on #ffffff = 12.63:1
   Control edges are raised to >=3:1 in both (SC 1.4.11), and the decorative photo
   backdrops are dropped — text at 21:1 over a photograph is not a real choice.
   ========================================================================= */
:root[data-colours="dark"]{
  --cream:#000000; --paper:#000000; --tint:#1a1a1a;
  --prose:#e6e6e6; --nav-ink:#f2f2f2; --eyebrow-ink:#ffd21e;
  --ink:#ffffff; --ink-2:#f2f2f2; --muted:#e6e6e6;
  --line:#4d4d4d; --line-strong:#9e9e9e;
  --red:#FF9A94; --red-text:#FF9A94; --red-dark:#8B1016; --red-deep:#6E0C11;
  --coral:#FF9A94;
}
:root[data-colours="light"]{
  --cream:#ffffff; --paper:#ffffff; --tint:#f0f0f0;
  --prose:#333333; --nav-ink:#000000; --eyebrow-ink:#000000;
  --ink:#000000; --ink-2:#000000; --muted:#333333;
  --line:#767676; --line-strong:#595959;
  --red:#8B1016; --red-text:#8B1016; --red-dark:#8B1016; --red-deep:#6E0C11;
  --coral:#8B1016;
}
/* A photo behind 21:1 text defeats the point of asking for 21:1 text. Scrims and
   hero imagery go; the scrim's own solid colour takes over as the band background. */
:root[data-colours] .pagehero,
:root[data-colours] .hero,
:root[data-colours] .story,
:root[data-colours] [style*="--bg:url"]{background-image:none !important}
:root[data-colours="dark"] .pagehero,
:root[data-colours="dark"] .hero,
:root[data-colours="dark"] .story{background-color:#000 !important;color:#fff}
:root[data-colours="light"] .pagehero,
:root[data-colours="light"] .hero,
:root[data-colours="light"] .story{background-color:#fff !important;color:#000}
:root[data-colours] video{display:none}

/* The control itself. Inherits the footer's own colours so it restyles with the
   scheme it sets, and keeps a >=3:1 edge in every scheme (SC 1.4.11). */
.colour-pick{display:flex;flex-wrap:wrap;align-items:center;gap:.5em;
  margin:18px 0 0;font-size:.84rem}
.colour-pick label{font-weight:700}
.colour-pick select{min-height:44px;padding:.35em 2em .35em .6em;
  border:1.5px solid var(--line-strong);border-radius:10px;
  background:var(--paper);color:var(--ink);font:inherit;font-size:.84rem}
/* The footer is a dark band in the default scheme, so the select needs its own
   light-on-dark pair there rather than the page tokens. */
:root:not([data-colours]) .colour-pick select{background:#1a1a1a;color:#fff;border-color:#9e9e9e}
@media (forced-colors: active){
  .colour-pick select{border-color:ButtonText;background:ButtonFace;color:ButtonText}
}