.brand-mark {
  font-size: 0;
  letter-spacing: 0;
}
.brand-mark::after {
  content: "?";
  font-size: 1.85rem;
  line-height: 1;
  letter-spacing: 0;
}

.hero-image {
  background-image: url("assets/mobile-commissary.webp");
  background-position: 50% center;
}

.kitchen { padding: 130px 0; }
.kitchen-heading { margin-bottom: 70px; display: grid; grid-template-columns: 1fr 310px; gap: 90px; align-items: end; }
.kitchen-heading h2 { margin: 0; font-size: clamp(3.4rem, 6.5vw, 7rem); line-height: .86; font-weight: 950; text-transform: uppercase; }
.capacity-card { min-height: 290px; padding: 28px; display: flex; flex-direction: column; justify-content: flex-end; color: var(--ink); background: var(--gold); border-radius: var(--radius); transform: rotate(1.5deg); }
.capacity-card > span { font-size: .64rem; font-weight: 900; letter-spacing: .15em; }
.capacity-card strong { margin-top: auto; font-size: clamp(5rem, 9vw, 8rem); line-height: .76; letter-spacing: -.08em; }
.capacity-card p { margin: 12px 0 16px; font-size: 1.1rem; font-weight: 900; text-transform: uppercase; }
.capacity-card small { color: rgba(16,16,15,.62); font-size: .67rem; line-height: 1.45; }
.kitchen-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.kitchen-grid article { min-height: 290px; padding: 30px 34px 34px 0; border-right: 1px solid var(--line-dark); }
.kitchen-grid article + article { padding-left: 34px; }
.kitchen-grid article:last-child { padding-right: 0; border-right: 0; }
.kitchen-number { color: var(--red); font-size: .64rem; font-weight: 900; letter-spacing: .14em; }
.kitchen-grid h3 { margin: 70px 0 18px; font-size: 1.8rem; line-height: 1; }
.kitchen-grid p { margin: 0; color: rgba(255,255,255,.58); font-size: .82rem; line-height: 1.6; }
.kitchen-note { margin-top: 34px; display: grid; grid-template-columns: 230px 1fr; gap: 60px; }
.kitchen-note strong { color: var(--gold); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.kitchen-note p { max-width: 800px; margin: 0; color: rgba(255,255,255,.64); font-size: .88rem; line-height: 1.65; }

.service-band {
  position: relative;
  padding-top: 690px;
  overflow: hidden;
}
.service-band::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 570px;
  background:
    linear-gradient(90deg, rgba(16,16,15,.9) 0%, rgba(16,16,15,.25) 45%, rgba(16,16,15,.08) 100%),
    url("assets/delivery-van.webp") center 48% / cover no-repeat;
}
.service-band::after {
  content: "HOT BOXES. ALL-BLACK VAN. ONE CLEAR MARK.";
  position: absolute;
  z-index: 1;
  top: 415px;
  left: max(20px, calc((100vw - 1180px) / 2));
  max-width: 650px;
  color: #fff;
  font-size: clamp(2.3rem, 4.8vw, 5.2rem);
  line-height: .88;
  font-weight: 950;
  letter-spacing: -.055em;
}
.service-band .eyebrow::after { content: " · HOT-BOX DELIVERY"; }

@media (max-width: 980px) {
  .hero-image { background-position: 60% center; }
  .kitchen-heading { grid-template-columns: 1fr; gap: 40px; }
  .capacity-card { max-width: 420px; }
  .kitchen-grid { grid-template-columns: 1fr; }
  .kitchen-grid article,
  .kitchen-grid article + article { min-height: auto; padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .kitchen-grid article:last-child { border-bottom: 0; }
  .kitchen-grid h3 { margin-top: 36px; }
  .service-band { padding-top: 600px; }
  .service-band::before { height: 500px; background-position: 58% center; }
  .service-band::after { top: 370px; right: 20px; }
}

@media (max-width: 640px) {
  .hero-image { background-position: 66% center; }
  .kitchen { padding: 84px 0; }
  .kitchen-heading { margin-bottom: 48px; }
  .capacity-card { min-height: 240px; }
  .kitchen-note { grid-template-columns: 1fr; gap: 12px; }
  .service-band { padding-top: 520px; }
  .service-band::before { height: 420px; background-position: 66% center; }
  .service-band::after { top: 305px; left: 14px; right: 14px; font-size: clamp(2rem, 11vw, 3.5rem); }
}