/* ==========================================================================
   Malvern Kebabs - QSR direction
   Reference: hungryjacks.com.au structure. Photography-led full-bleed
   sections, two-action utility bar, stacked condensed headlines, one CTA
   per section. Brand tokens stay Malvern Kebabs (ember, not HJ red).
   ========================================================================== */

:root {
  color-scheme: dark;

  --ink:        #14100e;
  --ink-2:      #201a17;
  --ink-3:      #2e2622;
  --white:      #ffffff;
  --bone:       #f4f1ec;
  --mute:       #b3a9a2;

  --ember:      #ff4b23;
  --ember-dk:   #d3320f;
  --gold:       #f5b73c;
  --green:      #35b46b;

  --shell:      1320px;
  --gutter:     clamp(1rem, 4vw, 3rem);

  --font-display: "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;
  --font-body:    "Epilogue", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  touch-action: manipulation;                      /* no 300ms double-tap delay */
  -webkit-tap-highlight-color: rgba(255, 75, 35, 0.24);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; }

.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); width: 100%; }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

.stack {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.82;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin: 0 0 0.9rem;
}

.body-lg { font-size: 1.05rem; line-height: 1.6; color: rgba(255,255,255,0.82); max-width: 52ch; margin: 0; }

.num { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Buttons - QSR: fat, pill, uppercase, high contrast
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: 1.05rem 2.1rem;
  border: 0;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.15s ease, color 0.15s ease;
}
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ink on ember = 5.58:1. White on ember would be 3.36:1 and fail AA. */
.btn--primary { background: var(--ember); color: var(--ink); }
.btn--primary:hover { background: var(--white); color: var(--ink); }

.btn--light { background: var(--white); color: var(--ink); }
.btn--light:hover { background: var(--ember); color: var(--ink); }

.btn--outline { background: transparent; color: var(--white); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.55); }
.btn--outline:hover { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 2px var(--white); }

/* --------------------------------------------------------------------------
   Utility bar - HJ's two-action strip
   -------------------------------------------------------------------------- */

.util {
  background: var(--ember);
  color: var(--ink);
  position: relative;
  z-index: 60;
}
.util__inner {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
}
.util a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  flex: 1 1 0;
  max-width: 320px;
  padding: 0.95rem 1rem;
  font-weight: 800;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.util a:hover { background: rgba(20,16,14,0.12); }
.util a + a { box-shadow: inset 1px 0 0 rgba(20,16,14,0.25); }
.util svg { width: 22px; height: 22px; flex: none; }

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */

.nav {
  background: var(--ink);
  position: sticky;
  top: 0;
  z-index: 55;
  box-shadow: 0 1px 0 rgba(255,255,255,0.09);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 72px; }

.nav__brand {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}
.nav__brand span { color: var(--ember); }

.nav__links { display: flex; align-items: center; gap: 2rem; }
.nav__links a {
  font-weight: 800;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  padding-block: 0.5rem;
}
.nav__links a:hover { color: var(--ember); }

.nav__right { display: flex; align-items: center; gap: 1rem; }

@media (max-width: 900px) { .nav__links { display: none; } .nav__right .btn { padding: 0.8rem 1.3rem; font-size: 0.8rem; } }

/* --------------------------------------------------------------------------
   Live status
   -------------------------------------------------------------------------- */

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.status[data-open="true"]  { color: var(--green); }
.status[data-open="false"] { color: #ff8b7a; }
.status__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.status[data-open="true"] .status__dot { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .status__dot { animation: none !important; } }

@media (max-width: 620px) { .nav .status { display: none; } }

/* --------------------------------------------------------------------------
   Full-bleed media section - the core HJ unit
   Accepts <video> or <img>. Type sits over a scrim.
   -------------------------------------------------------------------------- */

.bleed {
  position: relative;
  min-height: clamp(520px, 78vh, 760px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.bleed--tall { min-height: clamp(600px, 92vh, 900px); }

.bleed__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.bleed__media img, .bleed__media video {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Scrim: keeps every headline legible whatever photo lands behind it. */
.bleed__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(20,16,14,0.94) 0%, rgba(20,16,14,0.72) 34%, rgba(20,16,14,0.22) 66%, rgba(20,16,14,0.45) 100%),
    linear-gradient(to right, rgba(20,16,14,0.75) 0%, rgba(20,16,14,0.1) 62%);
}

.bleed__body {
  position: relative;
  width: 100%;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.bleed__inner { max-width: 640px; }

.bleed__title {
  text-wrap: balance;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(3rem, 9vw, 6.5rem);
  line-height: 0.8;
  margin: 0 0 1.1rem;
  letter-spacing: -0.01em;
}
.bleed__title em { font-style: normal; color: var(--ember); display: block; }

.bleed__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* Hero variant */
.hero .bleed__title { font-size: clamp(3.4rem, 11vw, 8rem); }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(20,16,14,0.72);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  margin-bottom: 1.25rem;
}

/* --------------------------------------------------------------------------
   Deals rail - HJ promo tiles
   -------------------------------------------------------------------------- */

.band { padding-block: clamp(3rem, 7vw, 5.5rem); }
.band--bone { background: var(--bone); color: var(--ink); }
.band--bone .body-lg { color: rgba(20,16,14,0.72); }

.band__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.band__title { text-wrap: balance; font-family: var(--font-display); text-transform: uppercase; font-size: clamp(2.2rem, 5.5vw, 3.75rem); line-height: 0.86; margin: 0; }

.deals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(0.9rem, 2vw, 1.4rem);
}

.deal {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: var(--ink-2);
  color: var(--white);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  min-height: 380px;
  isolation: isolate;
  transition: transform 0.22s cubic-bezier(0.16,1,0.3,1);
}
.deal:hover { transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) { .deal:hover { transform: none; } }

.deal__media { position: absolute; inset: 0; z-index: -2; }
.deal__media img { width: 100%; height: 100%; object-fit: cover; }
.deal::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(20,16,14,0.95) 8%, rgba(20,16,14,0.55) 48%, rgba(20,16,14,0.15) 100%);
}

.deal__body { margin-top: auto; padding: clamp(1.25rem, 2.4vw, 1.75rem); }
.deal__tag {
  display: inline-block;
  background: var(--gold);
  color: var(--ink);
  font-weight: 800;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  margin-bottom: 0.75rem;
}
.deal__name { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 0.95; margin: 0 0 0.35rem; }
.deal__desc { font-size: 0.92rem; color: rgba(255,255,255,0.76); margin: 0 0 1rem; }
.deal__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.deal__price { font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.5rem); line-height: 1; color: var(--ember); }
.deal__cta { font-weight: 800; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; background: var(--white); color: var(--ink); padding: 0.6rem 1.1rem; border-radius: 999px; }

/* --------------------------------------------------------------------------
   Category tiles
   -------------------------------------------------------------------------- */

.cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.15rem);
}

.cat-tile {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
  color: var(--ink);
  background: var(--ink-2);
  isolation: isolate;
  transition: transform 0.22s cubic-bezier(0.16,1,0.3,1);
}
.cat-tile:hover { transform: translateY(-5px); }
@media (prefers-reduced-motion: reduce) { .cat-tile:hover { transform: none; } }

.cat-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cat-tile__label {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--white);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.cat-tile__label span { color: var(--ember); font-size: 1.2em; line-height: 0.7; }

/* Tinted grounds so tiles read as a set even before real photography lands. */
.cat-tile--a { background: #b5321a; }
.cat-tile--b { background: #7a4620; }
.cat-tile--c { background: #2f6a4a; }
.cat-tile--d { background: #8a6a1f; }
.cat-tile--e { background: #4a3550; }
.cat-tile--f { background: #23486b; }

/* --------------------------------------------------------------------------
   Find us
   -------------------------------------------------------------------------- */

.find { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
@media (min-width: 900px) { .find { grid-template-columns: 1fr 1fr; } }

.hourcard { background: var(--ink-2); border-radius: 20px; overflow: hidden; }
.hourrow { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; flex-wrap: wrap; }
.hourrow + .hourrow { box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); }
.hourrow--late { background: var(--ember); color: var(--ink); }
.hourrow__d { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.25rem, 2.6vw, 1.6rem); line-height: 1; }
.hourrow__t { font-family: var(--font-mono); font-weight: 700; font-size: 0.98rem; }

.addr__line { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 0.95; margin: 0 0 0.9rem; }
.addr__meta { color: rgba(255,255,255,0.72); margin: 0 0 1.5rem; }
.addr__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.foot { background: #0d0a09; padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.foot__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 780px) { .foot__grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.foot__brand { font-family: var(--font-display); text-transform: uppercase; font-size: 2rem; line-height: 1; margin: 0 0 0.85rem; }
.foot__brand span { color: var(--ember); }
.foot p { margin: 0 0 0.5rem; color: rgba(255,255,255,0.6); font-size: 0.95rem; }
.foot h4 { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.18em; margin: 0 0 0.9rem; color: rgba(255,255,255,0.45); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.foot ul a { text-decoration: none; font-weight: 600; font-size: 0.95rem; color: rgba(255,255,255,0.82); }
.foot ul a:hover { color: var(--ember); }
.foot__base { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.8rem; color: rgba(255,255,255,0.4); }

/* --------------------------------------------------------------------------
   Mobile order bar
   -------------------------------------------------------------------------- */

.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: grid; grid-template-columns: 1fr 1fr;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.actionbar a { padding: 1rem 0.75rem; text-align: center; font-weight: 800; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; }
.actionbar a:first-child { background: var(--ink-3); color: var(--white); }
.actionbar a:last-child { background: var(--ember); color: var(--ink); }
@media (min-width: 901px) { .actionbar { display: none; } }
@media (max-width: 900px) { body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); } .util a { font-size: 0.78rem; padding: 0.8rem 0.6rem; } }

/* --------------------------------------------------------------------------
   Reveal
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1), transform 0.65s cubic-bezier(0.16,1,0.3,1); }
  .reveal.is-in { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Menu page
   -------------------------------------------------------------------------- */

.jump { position: sticky; top: 72px; z-index: 45; background: var(--ink-2); overflow-x: auto; scrollbar-width: none; box-shadow: 0 1px 0 rgba(255,255,255,0.09); }
.jump::-webkit-scrollbar { display: none; }
.jump__inner { display: flex; min-width: max-content; }
.jump a { padding: 0.9rem 1.2rem; font-weight: 800; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; white-space: nowrap; }
.jump a:hover { background: var(--ember); color: var(--ink); }

.included { background: var(--ink-2); border-radius: 20px; padding: 1.4rem 1.5rem; margin-top: 1.75rem; display: grid; gap: 1rem; }
@media (min-width: 820px) { .included { grid-template-columns: auto 1fr; align-items: center; gap: 1.75rem; } }
.included__title { font-family: var(--font-display); text-transform: uppercase; font-size: 1.3rem; line-height: 1; margin: 0; color: var(--ember); white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.chip { font-size: 0.76rem; font-weight: 600; padding: 0.35rem 0.75rem; border-radius: 999px; background: rgba(255,255,255,0.1); }
.chip--paid { background: transparent; box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold); }

.catsec { padding-block: clamp(2.25rem, 5vw, 3.25rem); scroll-margin-top: 124px; }
.catsec + .catsec { box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); }
.catsec__head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.5rem; }
.catsec__title { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(2rem, 5vw, 3.25rem); line-height: 0.9; margin: 0; }
.catsec__count { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700; color: var(--mute); }

.items { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
@media (min-width: 760px) { .items { grid-template-columns: 1fr 1fr; gap: 0.6rem 1.5rem; } }

.item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; background: var(--ink-2); border-radius: 14px; }
.item__name { font-weight: 700; font-size: 1.02rem; margin: 0; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.item__desc { font-size: 0.88rem; color: var(--mute); margin: 0.15rem 0 0; }
.item__price { font-family: var(--font-display); font-size: 1.45rem; line-height: 1; white-space: nowrap; color: var(--ember); }
.item__from { font-family: var(--font-mono); font-size: 0.62rem; color: var(--mute); display: block; text-align: right; }
.tag { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; background: var(--gold); color: var(--ink); padding: 0.18rem 0.5rem; border-radius: 999px; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Photography adjustments, added once the real assets landed
   -------------------------------------------------------------------------- */

/* The hero footage has the spit on the left and the dark fall-off on the
   right, which is the wrong way round for a left-aligned headline. Mirror it.
   The slight zoom also pushes the generator's corner watermark out of frame. */
.bleed__media video.flip {
  transform: scaleX(-1) scale(1.14);
  transform-origin: center;
}

/* Category tiles carry photos now, so the flat tinted grounds are gone.
   Keep a dark base underneath for the moment before an image decodes. */
.cat-tile { background: var(--ink-2); }
.cat-tile img { transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); }
.cat-tile:hover img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .cat-tile:hover img { transform: none; } }

/* Lift the label off busy photography. */
.cat-tile__label { box-shadow: 0 -18px 30px rgba(20,16,14,0.45); }

/* Shopfront under the address block. */
.find__photo { margin-top: 1.75rem; border-radius: 18px; overflow: hidden; }
.find__photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 42%; }

/* Trailing note row in the hours card. */
.hourrow--note { padding-block: 1rem; }
.hourrow--note .hourrow__t { color: var(--mute); font-size: 0.88rem; line-height: 1.45; }

/* Deal photography sits behind a stronger floor so the price always reads. */
.deal::after {
  background: linear-gradient(to top, rgba(20,16,14,0.97) 6%, rgba(20,16,14,0.72) 42%, rgba(20,16,14,0.12) 100%);
}

/* Six categories, so six cells. auto-fit was leaving a single orphan on
   the second row at desktop widths. */
.cats { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px)  { .cats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .cats { grid-template-columns: repeat(6, 1fr); } }

/* Flat panel variant: breaks the run of photographic sections. */
.bleed--flat { min-height: clamp(420px, 62vh, 620px); }
.bleed__media--flat {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 90% at 88% 18%, rgba(255,75,35,0.30) 0%, rgba(255,75,35,0) 58%),
    radial-gradient(80% 70% at 8% 92%, rgba(245,183,60,0.14) 0%, rgba(245,183,60,0) 60%),
    var(--ink);
}

/* ==========================================================================
   Accessibility pass
   ========================================================================== */

/* Skip link: off-screen until focused, then pinned above everything. */
.skip {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  transform: translateY(-160%);
  background: var(--ember);
  color: var(--ink);
  font-weight: 800;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  transition: transform 0.16s ease;
}
.skip:focus { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .skip { transition: none; } }

/* Anchor targets clear the utility bar plus the sticky nav. */
#usual, #find, #faq, #reviews, #main { scroll-margin-top: 96px; }

/* One focus treatment for every interactive element, not just .btn. */
a:focus-visible,
button:focus-visible,
.deal:focus-visible,
.cat-tile:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible, .deal:focus-visible, .cat-tile:focus-visible { border-radius: inherit; }

/* Background video pause control (WCAG 2.2.2: moving content over 5s needs
   a mechanism to stop it). Sits clear of the headline, bottom right. */
.vidtoggle {
  position: absolute;
  right: clamp(1rem, 4vw, 3rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 16, 14, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  color: var(--white);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background-color 0.15s ease, transform 0.12s ease;
}
.vidtoggle:hover { background: rgba(20, 16, 14, 0.92); }
.vidtoggle:active { transform: scale(0.94); }
.vidtoggle svg { width: 20px; height: 20px; fill: currentColor; }

/* Swap the glyph from the paused state on the button itself. */
.vidtoggle .ico-play { display: none; }
.vidtoggle[data-paused="true"] .ico-pause { display: none; }
.vidtoggle[data-paused="true"] .ico-play { display: inline; }

/* ==========================================================================
   Conversion pass
   ========================================================================== */

/* Hero badges: trading status plus the Google rating carried over from the
   original site. Social proof sits beside the headline, not buried. */
.hero__badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.hero__badges .hero__badge { margin-bottom: 0; }
.hero__badge--rating {
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--white);
}
.hero__badge--rating strong { font-weight: 800; }
.hero__badge--rating svg { width: 15px; height: 15px; fill: var(--gold); flex: none; }

/* Pickup steps. Answers "how does this work" before it becomes a reason
   not to call. */
.howto {
  list-style: none;
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
  counter-reset: step;
}
@media (min-width: 760px) { .howto { grid-template-columns: repeat(3, 1fr); } }

.howto li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.25rem;
  background: rgba(20, 16, 14, 0.06);
  border-radius: 999px;
}
.howto__n {
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ember);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1;
}
.howto__t { font-size: 0.92rem; font-weight: 600; color: var(--ink); }

/* Call CTA pinned to the end of the sticky menu category bar. */
.jump__cta {
  margin-left: auto;
  background: var(--ember);
  color: var(--ink) !important;
  font-weight: 800;
}
.jump__cta:hover { background: var(--white); color: var(--ink) !important; }
@media (max-width: 700px) { .jump__cta { margin-left: 0; } }

/* ==========================================================================
   Mobile pass
   ========================================================================== */

/* The utility bar labels wrapped to two lines at 375px. Drop the long half. */
@media (max-width: 700px) {
  .util__long { display: none; }
  .util a { font-size: 0.82rem; letter-spacing: 0.05em; gap: 0.45rem; }
  .util svg { width: 18px; height: 18px; }
}

/* Bottom-aligned section copy sat underneath the fixed action bar. Clear it. */
@media (max-width: 900px) {
  .bleed__body { padding-bottom: calc(clamp(2.5rem, 6vw, 4.5rem) + 60px); }
  .bleed--tall { min-height: clamp(560px, 88svh, 860px); }
}

/* Three destinations, with the call given the most width. */
.actionbar--3 { grid-template-columns: 1fr 1fr 1.3fr; }
.actionbar--3 a:first-child,
.actionbar--3 a:nth-child(2) { background: var(--ink-3); color: var(--white); }
.actionbar--3 a:nth-child(2) { box-shadow: inset 1px 0 0 rgba(255,255,255,0.14); }
.actionbar__call { background: var(--ember); color: var(--ink); }
@media (max-width: 380px) {
  .actionbar a { font-size: 0.8rem; letter-spacing: 0.02em; padding-inline: 0.4rem; }
}

/* Tap targets: footer links and the wordmark were under the 44px minimum. */
.foot ul a, .foot p a {
  display: inline-block;
  padding-block: 0.7rem;
  min-height: 44px;
}
.foot ul { gap: 0; }
/* inline-flex collapses the whitespace between the two words, so the gap
   has to be restored explicitly. */
.nav__brand { display: inline-flex; align-items: center; gap: 0.3em; min-height: 44px; }

/* Below ~420px the wordmark plus a full-length nav button exceed the bar and
   the button gets clipped by the body's overflow guard. Shorten the label. */
@media (max-width: 420px) {
  .nav__cta-long { display: none; }
  .nav__brand { font-size: 1.25rem; }
  .nav__right .btn { padding: 0.75rem 1.15rem; }
}

/* ==========================================================================
   Reviews carousel
   ========================================================================== */

.reviews__score {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
  background: var(--ink-2);
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  white-space: nowrap;
}
.reviews__score strong { font-weight: 800; }
.reviews__score svg { width: 17px; height: 17px; fill: var(--gold); flex: none; }

/* Loud on purpose: this must not survive to production unnoticed. */


/* Star row on each review. */
.rev__stars { color: var(--gold); font-size: 1.05rem; letter-spacing: 0.14em; line-height: 1; }
.rev { min-height: 240px; }

/* Delivery partners: offered, but kept subordinate to the direct call the
   section is arguing for. */
.delivery {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 1.5rem 0 0;
  font-size: 0.95rem;
}
.delivery span { color: rgba(255, 255, 255, 0.7); }
.delivery a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--ember);
  padding-block: 0.55rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.delivery a:hover { color: var(--ember); }

/* --------------------------------------------------------------------------
   Reviews marquee

   Runs continuously with no controls, by request. WCAG 2.2.2 still wants a way
   to stop moving content: that job is carried by pause-on-hover, pause on
   keyboard focus, and a full stop under prefers-reduced-motion, where the row
   becomes a plain horizontal scroller instead.
   -------------------------------------------------------------------------- */

.revmarquee { overflow: hidden; }

.revmarquee__track {
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  width: max-content;
  animation: revslide 62s linear infinite;
  will-change: transform;
}

/* Half the track is the duplicate set, so -50% lands exactly on the seam. */
@keyframes revslide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.revmarquee:hover .revmarquee__track,
.revmarquee:focus-within .revmarquee__track { animation-play-state: paused; }

.revmarquee .rev {
  flex: 0 0 auto;
  width: min(86vw, 430px);
  min-height: 0;
}

@media (prefers-reduced-motion: reduce) {
  .revmarquee { overflow-x: auto; }
  .revmarquee__track { animation: none; }
}

/* Sauces and extras now close the menu rather than open it, so it needs its
   own breathing room off the last category. */
.included--end {
  margin-top: 0;
  margin-bottom: clamp(2rem, 5vw, 3rem);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.catsec:last-of-type { padding-bottom: clamp(1.5rem, 3vw, 2rem); }

/* Sub-heading inside a menu category (Crave Blasts / Velour Shakes). */
.catsec__sub {
  margin: 1.5rem 0 0.75rem;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
}
.catsec__sub:first-of-type { margin-top: 0; }

/* Eight categories, so the grid is 4x2 or 2x4 and never leaves an orphan. */
.cats { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .cats { grid-template-columns: repeat(4, 1fr); } }


/* Specials runs full width, which keeps the remaining eight squares dividing
   cleanly into 4 columns on desktop and 2 on mobile. Nine equal tiles only
   fit a 3-column grid, and that forces ~106px tiles on a phone. */
.cat-tile--wide {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 4;
  background: linear-gradient(100deg, var(--ember) 0%, var(--ember-dk) 62%, #8d2409 100%);
  align-items: stretch;
}
.cat-tile--wide .cat-tile__label {
  background: transparent;
  color: var(--ink);
  align-items: center;
  padding-inline: clamp(1.1rem, 3vw, 2rem);
}
.cat-tile__lead { display: inline-flex; align-items: center; gap: 0.5rem; }
.cat-tile__lead span { color: var(--ink); font-size: 1.2em; line-height: 0.7; }
.cat-tile__sub {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(20, 16, 14, 0.78);
  text-align: right;
}
@media (max-width: 700px) {
  .cat-tile--wide { aspect-ratio: 5 / 2; }
  .cat-tile--wide .cat-tile__label { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.3rem; }
  .cat-tile__sub { text-align: left; }
}

/* Specials banner now carries a photo, so the ember fill becomes a scrim and
   the label flips to white. Text sits left over the darkest part. */
.cat-tile--wide { background: var(--ink-2); }
.cat-tile--wide img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: center 45%;
}
.cat-tile__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(20,16,14,0.92) 0%, rgba(20,16,14,0.72) 38%, rgba(20,16,14,0.15) 78%);
}
.cat-tile--wide .cat-tile__label {
  background: transparent;
  color: var(--white);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.3rem;
  box-shadow: none;
}
.cat-tile--wide .cat-tile__lead span { color: var(--ember); }
.cat-tile--wide .cat-tile__sub { color: rgba(255,255,255,0.82); text-align: left; }

/* Delivery links in the hero sit under the buttons, so the direct-order CTAs
   stay adjacent to the copy they belong to. */
.delivery--hero { margin-top: 1.1rem; font-size: 0.9rem; }
@media (max-width: 900px) { .delivery--hero { margin-top: 0.85rem; gap: 0.35rem 0.9rem; } }

/* Footer gained a fourth column for social profiles. */
@media (min-width: 640px) and (max-width: 899px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .foot__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }

/* Social profiles as icon buttons. The SVG carries no text, so each link needs
   its own aria-label and the glyph is hidden from assistive tech. */
.socials { display: flex; flex-direction: row; gap: 0.6rem; list-style: none; margin: 0; padding: 0; }
.social {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 999px;
  color: var(--white);
  /* Dashed ring, matching the supplied reference. border-style does the dashes;
     box-shadow cannot. box-sizing: border-box keeps the box at 48px. */
  border: 2px dashed rgba(255, 255, 255, 0.5);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.social svg { width: 23px; height: 23px; fill: currentColor; }
.social:hover {
  background: var(--ember);
  color: var(--ink);
  border-color: var(--ember);
  border-style: solid;
}

/* Desktop nav links measured 37px tall. Above the 24px WCAG 2.5.8 minimum,
   but under the 44px comfortable-target figure, and they sit close together. */
.nav__links a { display: inline-flex; align-items: center; min-height: 44px; }

/* The Facebook mark is a tall narrow letterform on a 320x512 viewBox, so a
   fixed square would squash it. Constrain height and let width follow. */
.social svg { width: auto; height: 22px; max-width: 24px; }

/* Specificity fix.
   `.foot ul` (0,1,1) and `.foot ul a` (0,1,2) outrank plain `.socials` (0,1,0)
   and `.social` (0,1,0), so the earlier tap-target rules were overriding the
   icon row: it fell back to display:grid (icons stacked) and the anchors to
   inline-block (place-items ignored, glyphs pushed left). Scoping these to
   `.foot ul.socials` (0,2,1) and `.foot ul.socials a` (0,2,2) wins cleanly. */
.foot ul.socials {
  display: flex;
  flex-direction: row;
  gap: 0.6rem;
}
.foot ul.socials a.social {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
}

/* ---- FAQ ----------------------------------------------------------------- */
.faq { max-width: 72ch; }
.faq__item { border-top: 1px solid rgba(20,16,14,0.14); }
.faq__item:last-of-type { border-bottom: 1px solid rgba(20,16,14,0.14); }

.faq__q {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  line-height: 1.15;
  padding: clamp(1rem, 2.4vw, 1.4rem) 3rem clamp(1rem, 2.4vw, 1.4rem) 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--ember);
}
.faq__item[open] .faq__q::after { content: "\2013"; }
.faq__q:hover { color: var(--ember-dk); }
.faq__q:focus-visible { outline: 3px solid var(--ember); outline-offset: 4px; }

.faq__a {
  margin: 0 0 clamp(1rem, 2.4vw, 1.4rem);
  padding-right: 3rem;
  max-width: 62ch;
  color: rgba(20,16,14,0.75);
  line-height: 1.6;
}
.faq__a a { color: var(--ember-dk); }
.faq__a .num { font-family: var(--font-mono); }

/* ---- Hero subline (local keywords under the brand line) ------------------ */
.hero__sub {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(0.92rem, 1.9vw, 1.12rem);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  margin: 0.9rem 0 0.35rem;
  text-wrap: balance;
}

/* ---- Embedded map -------------------------------------------------------- */
.findmap {
  margin-top: clamp(1.25rem, 3vw, 2rem);
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--ink-2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09);
}
.findmap iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 620px) { .findmap { aspect-ratio: 4 / 3; } }

/* Tier labels inside the sauces block: sauces now come at two prices. */
.chips__label {
  margin: 1rem 0 0.5rem;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--mute);
}
.chips__label:first-child { margin-top: 0; }

/* Phone links inside FAQ answers measured 18px tall. Inline links in prose are
   exempt from WCAG 2.5.8, but this is the main conversion action, so give it a
   real tap target. Vertical padding on an inline element enlarges the hit area
   without changing the line box, so the paragraph does not reflow. */
.faq__a a {
  color: var(--white);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--ember);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  padding-block: 0.85rem;
}
.faq__a a:hover { color: var(--ember); }

/* Unclassed inline links in running copy (list items and paragraphs) get the
   same treatment as the FAQ phone links: visible as links, and a tap area that
   meets 44px without reflowing the line. Buttons and tiles all carry classes,
   so :not([class]) leaves them alone. */
main li > a:not([class]),
main p > a:not([class]) {
  color: var(--white);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--ember);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  padding-block: 0.85rem;
}
main li > a:not([class]):hover,
main p > a:not([class]):hover { color: var(--ember); }

/* Delivery block after the storefront photo: the destination for the hero's
   "Get delivered" button. */
.deliverbox {
  margin-top: 1.75rem;
  padding: 1.4rem 1.5rem;
  border-radius: 18px;
  background: var(--ink-2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.deliverbox__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  line-height: 1;
  margin: 0 0 0.5rem;
}
.deliverbox__note { margin: 0 0 1.1rem; color: rgba(255, 255, 255, 0.75); font-size: 0.95rem; }
.deliverbox__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.deliverbox__actions .btn { flex: 1 1 10rem; }

/* The hero jumps here, so clear the sticky nav when it lands. */
#delivery { scroll-margin-top: 96px; }

/* Three hero buttons stacked cost ~68px of height, which pushed them below the
   fold on short phones. On narrow screens, keep the call full width and put
   the two secondary buttons side by side, so the group takes two rows, not
   three. Padding and type come down slightly so both labels stay on one line. */
@media (max-width: 560px) {
  .hero .bleed__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
  }
  .hero .bleed__actions .btn--primary { grid-column: 1 / -1; }
  .hero .bleed__actions .btn--outline {
    padding-inline: 0.75rem;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
  }
}