/* ============================================================
   DUMPLINGS DELIGHT — Landing page styles
   Loaded AFTER core.css. Page-specific rules only.
   ============================================================ */

/* ---------- hero ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100svh - 70px);
  padding-block: 56px 72px;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(720px 520px at 78% 22%, rgba(252, 76, 2, 0.16), transparent 65%),
    radial-gradient(520px 420px at 92% 78%, rgba(255, 179, 71, 0.07), transparent 60%);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid;
  gap: 44px;
  align-items: center;
  width: 100%;
}
@media (min-width: 940px) {
  .hero-grid { grid-template-columns: 1.08fr 0.92fr; gap: 32px; }
}

.hero-copy { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.hero-copy h1 { font-size: min(clamp(3.4rem, 12vw, 7.4rem), 11vh); max-width: 12ch; }
.hero-script {
  font-size: min(clamp(1.5rem, 4.5vw, 2.3rem), 4.2vh);
  transform: rotate(-2deg);
  margin: -4px 0 0 4px;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }

.hero-trust { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.hero-trust .chip { cursor: default; padding: 9px 15px; font-size: 0.8rem; gap: 8px; }
.hero-trust .chip:hover { transform: none; border-color: var(--line); }
.hero-trust .chip svg { width: 15px; height: 15px; color: var(--orange-hi); flex: none; }

/* ---------- hero dumpling art ---------- */
.hero-art {
  margin: 0;
  width: min(100%, 300px);
  margin-inline: auto;
  position: relative;
}
@media (min-width: 940px) {
  .hero-art { width: min(100%, 500px, 56vh); }
}
.hero-art svg { width: 100%; height: auto; }

/* short laptop viewports: tighten hero so it fits one screen */
@media (max-height: 800px) and (min-width: 940px) {
  .hero { padding-block: 10px 20px; min-height: calc(100svh - 112px); }
  .hero-copy { gap: 8px; }
  .hero-copy h1 { font-size: min(clamp(3.4rem, 12vw, 7.4rem), 9.8vh); }
  .hero-copy .lead { font-size: 0.92rem; }
  .hero-script { margin-top: -6px; font-size: 3.4vh; }
  .hero-ctas { margin-top: 2px; }
  .hero-ctas .btn-lg { padding: 12px 24px; font-size: 0.9rem; }
  .hero-trust { margin-top: 2px; }
  .hero-trust .chip { padding: 6px 12px; font-size: 0.72rem; }
  .hero-art { width: min(100%, 460px, 48vh); }
}

.dumpling-float {
  animation: dd-float 6.5s ease-in-out infinite;
  transform-origin: 240px 300px;
}
@keyframes dd-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.steam {
  fill: none;
  stroke: var(--cream);
  stroke-width: 7;
  stroke-linecap: round;
  opacity: 0;
  animation: dd-steam 3.6s ease-in-out infinite;
}
.steam-2 { animation-delay: 1.2s; }
.steam-3 { animation-delay: 2.4s; }
@keyframes dd-steam {
  0%   { opacity: 0; transform: translateY(16px); }
  30%  { opacity: 0.55; }
  60%  { opacity: 0.3; }
  100% { opacity: 0; transform: translateY(-26px); }
}

/* ---------- marquee (seamless loop: separators live inside each half) ---------- */
.marquee-track { gap: 0; }

/* ---------- section scaffolding ---------- */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 40px;
  max-width: 640px;
}
.section-head .lead { font-size: 1rem; }
.section-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

/* ---------- how it works ---------- */
.step-card { display: flex; flex-direction: column; gap: 14px; }
.step-card h3 { margin: 0; font-size: 1.12rem; }
.step-card p { margin: 0; }
.step-card .step-tag { width: 42px; height: 42px; font-size: 1.35rem; box-shadow: var(--shadow-glow); }

.how-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 20px;
  padding: 22px 26px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(252, 76, 2, 0.35);
  background: linear-gradient(120deg, rgba(252, 76, 2, 0.14), rgba(252, 76, 2, 0.04) 55%, transparent);
  color: var(--cream);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.how-strip:hover {
  color: var(--cream);
  border-color: var(--orange);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}
.how-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.how-flow .flow-sep { color: var(--orange-hi); }
.how-strip .badge { flex: none; }

/* ---------- menu: fillings ---------- */
.filling-card { display: flex; flex-direction: column; gap: 10px; min-height: 100%; }
.filling-card .filling-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.filling-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.65rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
}
.filling-card p { margin: 0; flex: 1; }
.filling-card .filling-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.filling-card .pc { font-size: 0.78rem; color: var(--muted); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- menu: flavors ---------- */
.flavor-grid { display: grid; gap: 16px; }
@media (min-width: 720px) { .flavor-grid { grid-template-columns: repeat(2, 1fr); } }

.flavor-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
}
.flavor-card .flavor-body { flex: 1; min-width: 0; }
.flavor-card h3 {
  margin: 0 0 2px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}
.flavor-card p { margin: 0; font-size: 0.86rem; }
.heat-scale {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--orange-hi);
  flex: none;
}
.heat-scale svg { width: 17px; height: 17px; }

/* ---------- combos (brand dark band) ---------- */
.combos-section {
  position: relative;
  background:
    radial-gradient(900px 420px at 85% 0%, rgba(252, 76, 2, 0.10), transparent 60%),
    radial-gradient(700px 380px at 0% 100%, rgba(252, 76, 2, 0.06), transparent 55%),
    var(--coal);
  border-block: 1px solid var(--line-soft);
}

.combo-grid { display: grid; gap: 20px; }
@media (min-width: 720px) {
  .combo-grid { grid-template-columns: repeat(6, 1fr); }
  .combo-grid > .combo-card { grid-column: span 2; }
  .combo-grid > .combo-card.combo-featured { grid-column: span 3; }
}

.combo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 24px 24px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-soft);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.combo-card:hover {
  transform: translateY(-4px);
  border-color: rgba(252, 76, 2, 0.55);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 24px rgba(252, 76, 2, 0.12);
}
.combo-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
}
.combo-card .combo-ribbon {
  position: absolute;
  top: -12px;
  left: 24px;
  box-shadow: var(--shadow-glow);
}
.combo-includes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  font-size: 0.88rem;
  color: #4d483f;
  font-weight: 500;
}
.combo-includes li { display: flex; align-items: center; gap: 9px; }
.combo-includes svg { width: 14px; height: 14px; color: var(--orange); flex: none; }
.combo-card .combo-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
}
.combo-card .price { color: var(--orange-hi); }

.combo-card.combo-dark {
  background: linear-gradient(150deg, var(--orange-hi), var(--orange) 62%, #d84102);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  box-shadow: 0 18px 50px rgba(252, 76, 2, 0.35);
}
.combo-card.combo-dark .combo-includes { color: rgba(255, 255, 255, 0.92); }
.combo-card.combo-dark .combo-includes svg { color: #ffd9c2; }
.combo-card.combo-dark .combo-foot { border-top-color: rgba(255, 255, 255, 0.35); }
.combo-card.combo-dark .price { color: #fff; }
.combo-card.combo-dark .btn-primary { background: var(--ink); color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }
.combo-card.combo-dark .btn-primary:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55); }
.combo-card.combo-dark .combo-ribbon .badge { background: var(--ink); color: var(--orange-hi); border-color: var(--ink); }

/* ---------- add-ons teaser ---------- */
.addon-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px 40px;
}
@media (min-width: 720px) { .addon-list { grid-template-columns: repeat(3, 1fr); } }
.addon-list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-block: 12px;
  border-bottom: 1px dashed var(--line-soft);
  font-weight: 600;
  font-size: 0.95rem;
}
.addon-list li::after { content: none; }
.addon-list .dots {
  flex: 1;
  border-bottom: 2px dotted var(--line);
  transform: translateY(-4px);
  min-width: 20px;
}
.addon-list .addon-price {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: var(--orange-hi);
  white-space: nowrap;
}

/* ---------- why us ---------- */
.why-tile { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.why-tile h3 { margin: 0; font-size: 1.02rem; line-height: 1.35; }
.why-tile p { margin: 0; font-size: 0.86rem; }

/* ---------- testimonials ---------- */
.quote-card { display: flex; flex-direction: column; gap: 14px; }
.quote-stars { display: flex; gap: 3px; color: var(--amber); }
.quote-stars svg { width: 16px; height: 16px; }
.quote-card blockquote {
  margin: 0;
  font-size: 0.98rem;
  color: var(--cream-dim);
  line-height: 1.65;
  flex: 1;
}
.quote-card blockquote::before { content: "\201C"; color: var(--orange-hi); margin-right: 2px; }
.quote-card blockquote::after { content: "\201D"; color: var(--orange-hi); margin-left: 2px; }
.quote-card figcaption { display: flex; flex-direction: column; gap: 2px; }
.quote-card cite {
  font-style: normal;
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---------- find us ---------- */
.find-grid { display: grid; gap: 20px; align-items: stretch; }
@media (min-width: 940px) { .find-grid { grid-template-columns: 1.15fr 0.85fr; } }

.find-card { display: flex; flex-direction: column; gap: 18px; padding: 34px 28px; }
.find-rows { display: flex; flex-direction: column; gap: 14px; }
.find-row { display: flex; align-items: flex-start; gap: 14px; }
.find-row .icon-tile { width: 46px; height: 46px; border-radius: 13px; }
.find-row .icon-tile svg { width: 22px; height: 22px; }
.find-row strong { display: block; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.find-row a, .find-row span.val { color: var(--cream); font-weight: 600; }
.find-row a:hover { color: var(--orange-hi); }
.find-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

.find-map {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 40px 24px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  background:
    radial-gradient(360px 260px at 50% 30%, rgba(252, 76, 2, 0.16), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(246, 239, 228, 0.045) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(246, 239, 228, 0.045) 39px 40px),
    var(--coal);
  overflow: hidden;
}
.find-map .pin {
  width: 74px;
  height: 74px;
  color: var(--orange);
  filter: drop-shadow(0 12px 24px rgba(252, 76, 2, 0.45));
  animation: dd-float 5s ease-in-out infinite;
}
.find-map .script { font-size: 1.4rem; }

/* ---------- final cta band ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  padding: clamp(48px, 8vw, 88px) 24px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(252, 76, 2, 0.35);
  background:
    radial-gradient(640px 320px at 50% 115%, rgba(252, 76, 2, 0.3), transparent 70%),
    linear-gradient(180deg, var(--panel-2), var(--coal));
}
.cta-band h2 { font-size: clamp(3rem, 9vw, 5.5rem); }
.cta-band .lead { margin-inline: auto; }

/* ---------- reveal stagger ---------- */
.reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal:nth-child(5) { transition-delay: 0.32s; }

/* ---------- 404 page ---------- */
.error-main {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  position: relative;
  overflow: hidden;
}
.error-main::before {
  content: "404";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: clamp(16rem, 48vw, 34rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(246, 239, 228, 0.06);
  pointer-events: none;
  user-select: none;
}
.error-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  max-width: 560px;
}
.error-card img { width: 96px; height: 96px; filter: drop-shadow(0 14px 30px rgba(252, 76, 2, 0.35)); }
.error-card h1 { font-size: clamp(3.4rem, 13vw, 6rem); }
.error-card .lead { margin-inline: auto; }
.error-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 8px; }

/* ---------- FAQ (AEO) ---------- */
.faq-list { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; max-width: 820px; }
.faq-item { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-soft); border-radius: var(--r-md); overflow: hidden; }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 18px 22px; font-weight: 700; font-size: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: var(--orange-hi); transition: transform 0.2s ease; flex: none; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] { border-color: rgba(252, 76, 2, 0.45); }
.faq-item summary:hover { color: var(--orange-soft); }
.faq-item p { margin: 0; padding: 0 22px 18px; color: var(--cream-dim); font-size: 0.95rem; max-width: 70ch; }

/* ---------- cinematic photo hero ---------- */
.hero-photo { position: relative; min-height: calc(100svh - 112px); }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; filter: saturate(1.22) contrast(1.05) brightness(1.12); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,12,0.6) 0%, rgba(10,10,12,0.38) 30%, rgba(10,10,12,0.1) 62%, rgba(10,10,12,0.03) 100%), linear-gradient(180deg, rgba(10,10,12,0.38) 0%, transparent 24%, transparent 66%, rgba(10,10,12,0.9) 100%); }
.hero-photo .hero-grid { grid-template-columns: 1fr; }
.hero-photo .hero-copy { max-width: 680px; position: relative; z-index: 1; }
.hero-photo .hero-trust .chip { background: rgba(14,14,17,0.78); }
@media (max-width: 720px) {
  /* restaurant hero: the food, the truck and the sunset stay bright and
     appetising. The copy carries its own contrast (see the block below), so the
     scrim only has to feather the navbar at the top and the section seam at the
     bottom -- the middle, where the truck sits, is left almost untouched. */
  .hero-shade { background: linear-gradient(180deg, rgba(10,10,12,0.44) 0%, rgba(10,10,12,0.06) 30%, rgba(10,10,12,0.08) 60%, rgba(10,10,12,0.72) 100%); }
  .hero-bg { filter: saturate(1.3) brightness(1.34) contrast(1.06); }
  .hero-photo .hero-copy .lead { font-size: 0.95rem; }
}

/* ---------- small hero copy legibility below the desktop "tucked copy" layout ----------
   A restaurant hero has to look bright and appetising, so the small copy carries
   its own contrast rather than a scrim dimming the photo: bright glyphs over a
   dark stroke drawn *behind* the fill (paint-order: stroke fill) plus a tight
   shadow halo. The ring is ~0.86 opaque, so it holds up even where the sunset
   sky and the lit truck signage clip to pure white, and the photo keeps all of
   its brightness.
   Deliberately limited to the eyebrow and the lead. Measured worst-case contrast
   was 1.35:1 on the eyebrow (amber lettering on an amber sky) and 1.00:1 on the
   lead -- its luminance exactly matched the photo behind it, so the sentence
   disappeared. The display h1 is legible at its size and weight, so it keeps the
   plain drop shadow and gets no outline.
   Covers every width below 940px, where full-width copy sits over the brightest
   part of the photo; the >=940px layout tucks the copy into its own dark corner. */
@media (max-width: 939px) {
  .hero-photo .hero-copy { text-shadow: 0 2px 16px rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.7); }
  .hero-photo .eyebrow,
  .hero-photo .hero-copy .lead {
    paint-order: stroke fill;
    -webkit-text-stroke: 2.5px rgba(6, 6, 8, 0.86);
    text-shadow:
      0 0 4px rgba(6, 6, 8, 0.9),
      0 0 4px rgba(6, 6, 8, 0.9),
      0 1px 3px rgba(6, 6, 8, 0.95);
  }
  /* amber lettering on an amber sky measured 2.19:1 -- use full white */
  .hero-photo .eyebrow { color: #fff; }
  .hero-photo .hero-copy .lead { color: #fff; font-weight: 500; }

  /* The ghost button is a transparent box with a near-black 1px border, which
     vanishes over a bright photo. Give it the same translucent dark backing the
     hero trust chips already use so it still reads as a secondary button. */
  .hero-photo .hero-ctas .btn-ghost {
    background: rgba(14, 14, 17, 0.72);
    border-color: rgba(246, 239, 228, 0.42);
    color: #fff;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    text-shadow: none;
  }
}

/* ---------- food imagery cards ---------- */
.food-img { margin: -24px -24px 14px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0; background: #000; }
.food-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.card-hover:hover .food-img img { transform: scale(1.05); }

/* ---------- sushi band ---------- */
.sushi-band { display: grid; gap: 20px; margin-top: 20px; overflow: hidden; }
.sushi-img { margin: -24px -24px 0; min-height: 210px; overflow: hidden; background: #000; }
.sushi-img img { width: 100%; height: 100%; object-fit: cover; }
.sushi-body { display: flex; flex-direction: column; gap: 8px; }
.sushi-body .filling-foot { margin-top: 8px; }
@media (min-width: 860px) {
  .sushi-band { grid-template-columns: 1.1fr 0.9fr; align-items: center; }
  .sushi-img { margin: -24px 0 -24px -24px; height: calc(100% + 48px); }
}

/* ---------- addon photo tiles ---------- */
.addon-tiles { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .addon-tiles { grid-template-columns: repeat(3, 1fr); } }
.addon-tile { display: flex; flex-direction: column; padding: 0; color: var(--cream); overflow: hidden; }
.addon-tile:hover { color: var(--cream); }
.addon-tile figure { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.addon-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.addon-tile:hover img { transform: scale(1.06); }
.addon-tile-body { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 18px; }
.addon-tile-body h3 { margin: 0; font-size: 0.92rem; }
.addon-tile .addon-price { color: var(--orange-hi); font-weight: 700; white-space: nowrap; font-size: 0.9rem; }

/* ---------- cta band night patio ---------- */
.cta-band { background: linear-gradient(rgba(10,10,12,0.82), rgba(10,10,12,0.9)), url("/assets/food/cta-crowd.webp") center / cover no-repeat, var(--panel) !important; }

.combo-card .combo-includes { color: var(--cream-dim); }

/* ---------- mobile polish ---------- */
@media (max-width: 720px) {
  .hero { padding-block: 8px 18px; min-height: calc(100svh - 112px); }
  .hero-copy { gap: 9px; }
  .hero-copy h1 { font-size: clamp(2.5rem, 10.5vw, 3.6rem); }
  .hero-script { font-size: clamp(1.2rem, 5vw, 1.6rem); margin-top: -4px; }
  .hero-copy .lead { font-size: 0.92rem; }
  .hero-ctas .btn-lg { padding: 13px 26px; font-size: 0.92rem; }
  .hero-trust .chip { padding: 6px 11px; font-size: 0.7rem; }
  .section { padding-block: 52px; }
  .hero-bg { object-position: center 38%; }
  .marquee-track { font-size: 0.9rem; padding-block: 8px; gap: 32px; }
  .combo-card { padding: 22px 18px 18px; }
  .combo-card .combo-foot { flex-wrap: wrap; gap: 10px; }
  .food-img { margin: -24px -24px 12px; }
  .sushi-img { min-height: 170px; }
  .addon-tile-body { padding: 11px 14px; }
  .addon-tile-body h3 { font-size: 0.84rem; }
  .addon-tile .addon-price { font-size: 0.82rem; }
  .cta-band { background-position: center 30%; }
}

/* ---------- desktop: copy tucked into dark foreground, truck unobstructed ---------- */
@media (min-width: 940px) {
  .hero-photo { align-items: flex-end; padding-block: 12px 30px; }
  .hero-photo .hero-grid { max-width: none; padding-inline: 36px; }
  .hero-photo .hero-copy { max-width: 500px; }
  .hero-photo .hero-copy .lead { max-width: 44ch; }
  .hero-photo .hero-copy { gap: 8px; max-width: 620px; }
  .hero-photo .hero-copy h1 { font-size: min(clamp(2.6rem, 5.2vw, 4.6rem), 7.6vh); }
  .hero-photo .hero-script { font-size: min(2.6vw, 3.2vh); }
  .hero-photo .hero-copy .lead { font-size: 0.95rem; max-width: 52ch; }
  .hero-photo .hero-bg { object-position: center 42%; }
}

/* ---------- combos: banner + photo deal cards ---------- */
.combo-banner { position: relative; border-radius: var(--r-lg); overflow: hidden; margin-bottom: 30px; min-height: 360px; display: flex; align-items: flex-end; border: 1px solid var(--line-soft); }
.combo-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.combo-banner-copy { position: relative; z-index: 1; padding: 32px 34px; max-width: 640px; background: linear-gradient(180deg, transparent, rgba(10,10,12,0.55) 40%); border-radius: 0 var(--r-lg) 0 0; }
.combo-banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,12,0.15) 0%, rgba(10,10,12,0.72) 78%, rgba(10,10,12,0.88) 100%); z-index: 0; }
.combo-banner .lead { color: var(--cream); }
@media (max-width: 720px) { .combo-banner { min-height: 300px; } .combo-banner-copy { padding: 20px 18px; } }

.combo-img { position: relative; margin: -26px -24px 14px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0; background: #000; }
.combo-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.combo-card:hover .combo-img img { transform: scale(1.05); }
.combo-save { position: absolute; right: 12px; bottom: 12px; background: var(--ink); color: var(--amber); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 179, 71, 0.45); }
.combo-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.combo-hook { margin: -4px 0 0; }
.combo-card.combo-dark .combo-hook { color: rgba(255, 255, 255, 0.88); }
.combo-card.combo-dark .badge-neutral { background: rgba(10,10,12,0.5); color: #fff; border-color: rgba(255,255,255,0.3); }
.combo-card .combo-ribbon { z-index: 2; }

/* ---------- flavor wok banner ---------- */
.flavor-banner { position: relative; margin: 30px 0 34px; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 21 / 9; border: 1px solid var(--line-soft); background: #000; }
.flavor-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.flavor-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(10,10,12,0.78) 100%); }
.flavor-banner-cap { position: absolute; left: 24px; right: 24px; bottom: 16px; z-index: 1; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.flavor-banner-cap .script { font-size: clamp(1.3rem, 2.6vw, 1.8rem); }
.flavor-banner-cap span:last-child { color: var(--cream-dim); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 720px) { .flavor-banner { aspect-ratio: 16 / 10; } .flavor-banner-cap { left: 16px; bottom: 12px; gap: 8px; } }

/* ---------- why-us photo tiles ---------- */
.why-tile h3 { margin: 0 0 6px; font-size: 1.02rem; }
.why-tile .muted { font-size: 0.88rem; line-height: 1.55; margin: 0; }
.why-img { aspect-ratio: 4 / 3; margin-bottom: 16px; }

/* ---------- signature sauces band ---------- */
.sauce-band { display: grid; gap: 22px; margin-bottom: 22px; overflow: hidden; }
.sauce-img { margin: -24px -24px 0; background: #000; }
.sauce-img img { width: 100%; height: 100%; object-fit: cover; }
.sauce-body { display: flex; flex-direction: column; gap: 10px; }
.sauce-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sauce-list li { padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(252, 76, 2, 0.4); background: rgba(252, 76, 2, 0.1); color: var(--orange-soft); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; }
@media (min-width: 860px) {
  .sauce-band { grid-template-columns: 1.15fr 0.85fr; align-items: center; }
  .sauce-img { margin: -24px 0 -24px -24px; height: calc(100% + 48px); }
}

/* ---------- how-it-works photo journey ---------- */
.how-photo { display: block; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-soft); background: #000; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.how-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
.how-photo:hover { transform: translateY(-4px); border-color: rgba(252, 76, 2, 0.55); box-shadow: var(--shadow-lg); }
.how-photo:hover img { transform: scale(1.03); }
/* refined journey strip */
.how-strip { margin-top: 22px; }
.how-strip .how-flow { font-family: var(--font-display); font-size: clamp(1.05rem, 2.2vw, 1.5rem); letter-spacing: 0.06em; text-transform: uppercase; }
.how-strip .flow-sep { color: var(--orange-hi); margin-inline: 6px; }

/* ---------- visit the truck ---------- */
.find-grid { display: grid; gap: 26px; }
@media (min-width: 940px) { .find-grid { grid-template-columns: 1.12fr 0.88fr; align-items: center; } }
.find-photo { margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-soft); background: #000; }
.find-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.review-invite { display: flex; flex-direction: column; gap: 18px; }

/* ---------- mobile image compositions ---------- */
@media (max-width: 720px) {
  .cta-band { background: linear-gradient(rgba(10,10,12,0.7), rgba(10,10,12,0.88)), url("/assets/food/cta-crowd-mobile.webp") center 30% / cover no-repeat, var(--panel) !important; }
  .combo-banner { min-height: 420px; }
  .combo-banner img { object-position: center 30%; }
  .find-photo { aspect-ratio: 4 / 5; }
  .find-photo img { object-position: center 40%; }
}