/* ==========================================================================
   SWABE FOODTRUCK, core stylesheet
   Brand: sticker-decal energy. Red, ink black, bone white, steel, amber.
   ========================================================================== */

:root {
  --red:       #D62128;
  --red-dark:  #A0161C;
  --red-deep:  #6E0F13;
  --ink:       #14110F;
  --ink-2:     #221E1A;
  --ink-3:     #332C27;
  --bone:      #F7F1E6;
  --bone-2:    #EBE0CD;
  --steel:     #8C8C8C;
  --steel-2:   #B8B4AF;
  --amber:     #F5B12E;

  --font-display: 'Titan One', 'Arial Black', sans-serif;
  --font-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --stroke: 3px;
  --radius: 18px;
  --pop: 8px;

  --shell: 1200px;
  --gutter: clamp(20px, 5vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: 0.005em;
  margin: 0 0 0.4em;
}

h1 { font-size: clamp(2.6rem, 7.4vw, 5.4rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.7rem); }

p { margin: 0 0 1.1em; }

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

.shell-wide { max-width: 1440px; }

section { position: relative; }

.pad     { padding-block: clamp(64px, 9vw, 118px); }
.pad-sm  { padding-block: clamp(44px, 6vw, 76px); }

.center { text-align: center; }

/* ---------- Skip link ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--bone);
  padding: 12px 20px; border-radius: 0 0 10px 0; font-weight: 700;
}
.skip:focus { left: 0; }

/* ==========================================================================
   Shared pieces
   ========================================================================== */

/* Eyebrow / kicker label */
.kicker {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}
.kicker--light { color: var(--amber); }

/* Sticker card: hard outline + offset solid shadow */
.sticker {
  background: var(--bone);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--pop) var(--pop) 0 var(--ink);
  transition: transform .18s ease, box-shadow .18s ease;
}
.sticker--hover:hover,
.sticker--hover:focus-within {
  transform: translate(-3px, -3px);
  box-shadow: calc(var(--pop) + 3px) calc(var(--pop) + 3px) 0 var(--ink);
}
.sticker--red   { background: var(--red);   color: var(--bone); }
.sticker--ink   { background: var(--ink-2); color: var(--bone); box-shadow: var(--pop) var(--pop) 0 var(--red); }
.sticker--amber { background: var(--amber); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 15px 28px;
  border: var(--stroke) solid var(--ink);
  border-radius: 999px;
  background: var(--red);
  color: var(--bone);
  box-shadow: 5px 5px 0 var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover {
  text-decoration: none;
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--ink);
}
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.btn--bone  { background: var(--bone);  color: var(--ink); }
.btn--amber { background: var(--amber); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--bone); border-color: var(--bone); box-shadow: 5px 5px 0 var(--red); }
.btn--ghost:hover { box-shadow: 8px 8px 0 var(--red); }
.btn--sm { padding: 11px 20px; font-size: 0.82rem; box-shadow: 4px 4px 0 var(--ink); }

/* Caution-stripe rule */
.stripe {
  height: 16px;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--red) 0 18px,
    var(--ink) 18px 36px
  );
  border-block: var(--stroke) solid var(--ink);
}

/* Halftone dot field */
.dots {
  background-image: radial-gradient(var(--ink) 1.4px, transparent 1.5px);
  background-size: 13px 13px;
}

/* Tag / pill */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 7px 14px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--bone);
  color: var(--ink);
}
.tag--red   { background: var(--red);   color: var(--bone); border-color: var(--ink); }
.tag--amber { background: var(--amber); color: var(--ink); }
.tag--new   { background: var(--amber); color: var(--ink); }

/* Section heading block */
.head { max-width: 720px; margin-bottom: clamp(34px, 4.5vw, 56px); }
.head.center { margin-inline: auto; }
.head p { font-size: 1.06rem; color: var(--ink-3); margin-bottom: 0; }
.head--light p { color: var(--steel-2); }

/* Underline swash beneath headings */
.swash { position: relative; display: inline-block; }
.swash::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.16em;
  height: 0.16em;
  background: var(--amber);
  border-radius: 999px;
  transform: rotate(-0.6deg);
}

/* ==========================================================================
   Notice bar, temporary closures, location changes, sold-out days
   ========================================================================== */

.notice {
  background: var(--amber);
  color: var(--ink);
  border-bottom: var(--stroke) solid var(--ink);
}
.notice__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  padding-block: 11px;
  text-align: center;
}
.notice__text { font-weight: 700; font-size: 0.92rem; }
.notice__link {
  color: var(--ink);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: underline;
  white-space: nowrap;
}

/* ==========================================================================
   Header / nav
   ========================================================================== */

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ink);
  border-bottom: var(--stroke) solid var(--ink);
}

.masthead__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 12px;
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { height: 46px; width: auto; }
.brand:hover { text-decoration: none; }
.brand__txt {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--steel-2);
  line-height: 1.35;
  max-width: 130px;
}

.nav { display: flex; align-items: center; gap: 6px; }

.nav a {
  font-weight: 700;
  font-size: 0.84rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--bone);
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.nav a:hover { background: var(--ink-3); text-decoration: none; }
.nav a.is-active { color: var(--amber); }
.nav a.is-active::after {
  content: "";
  display: block;
  height: 3px;
  border-radius: 3px;
  background: var(--amber);
  margin-top: 3px;
}

.nav__cta { margin-left: 10px; }

.burger {
  display: none;
  background: var(--red);
  border: 2.5px solid var(--bone);
  border-radius: 12px;
  width: 46px; height: 42px;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.burger span {
  display: block;
  width: 20px; height: 2.5px;
  background: var(--bone);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 940px) {
  .burger { display: flex; }
  .nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--ink);
    border-bottom: var(--stroke) solid var(--red);
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 14px var(--gutter) 22px;
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 13px 8px; font-size: 0.95rem; }
  .nav a.is-active::after { display: none; }
  .nav__cta { margin-left: 0; margin-top: 10px; justify-content: center; }
  .brand__txt { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

/* Flat panel, no photo and no scrim, the depth comes from a halftone print
   texture and a red glow, and the movement comes from the truck below. */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--bone);
  overflow: hidden;
  isolation: isolate;
  /* Fill the first screen and pin the road to the bottom of it, so the truck
     is always visible on load rather than sitting under the fold.
     svh keeps mobile browser chrome from pushing it down. */
  min-height: calc(100vh - var(--mast-h, 84px));
  min-height: calc(100svh - var(--mast-h, 84px));
  display: flex;
  flex-direction: column;
}

/* halftone dot field */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(247,241,230,.10) 1.5px, transparent 1.6px);
  background-size: 15px 15px;
}

/* warm red bloom behind the wordmark */
.hero::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -22%;
  width: min(1150px, 135vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(214,33,40,.40) 0%, rgba(214,33,40,.12) 45%, rgba(214,33,40,0) 68%);
}

.hero__inner {
  flex: 1;
  padding-block: clamp(40px, 5.5vw, 72px) clamp(26px, 3.5vw, 44px);
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
}

/* wordmark, not the full logo, the driving truck below is the truck */
.hero__mark {
  width: clamp(190px, 26vw, 340px);
  margin-bottom: 20px;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.55));
}

/* Slightly tighter than the global h1 so the whole hero, headline, copy,
   buttons and road, fits one screen without the truck dropping below it. */
.hero h1 { font-size: clamp(2.3rem, 6vw, 4.5rem); }

.hero h1 {
  color: var(--bone);
  text-shadow: 0 4px 0 var(--red-deep), 0 10px 32px rgba(0,0,0,.75);
  max-width: 16ch;
  margin-bottom: 0.35em;
}
.hero h1 em { font-style: normal; color: var(--amber); }

.hero__sub {
  font-size: clamp(1.02rem, 2vw, 1.25rem);
  color: var(--bone-2);
  max-width: 54ch;
  margin-bottom: 30px;
  text-shadow: 0 2px 10px rgba(0,0,0,.8);
}

.hero__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* Short viewports (small laptops, landscape phones): compress the hero so the
   road and truck still land on the first screen instead of below it. */
@media (max-height: 820px) {
  .hero__inner { padding-block: clamp(24px, 3vw, 40px) clamp(18px, 2.5vw, 30px); }
  .hero__mark  { width: clamp(160px, 20vw, 250px); margin-bottom: 14px; }
  .hero h1     { font-size: clamp(2rem, 4.6vw, 3.2rem); }
  .hero__sub   { font-size: 1rem; margin-bottom: 22px; }
  .hero .road__strip { height: clamp(92px, 10vw, 120px); }
}

@media (max-height: 700px) {
  .hero__mark  { width: clamp(140px, 17vw, 200px); margin-bottom: 10px; }
  .hero h1     { font-size: clamp(1.75rem, 4vw, 2.6rem); }
  .hero__sub   { font-size: 0.95rem; margin-bottom: 18px; }
  .hero .road__strip { height: clamp(84px, 9vw, 104px); }
}

/* Facts strip under hero */
.facts {
  background: var(--red);
  border-block: var(--stroke) solid var(--ink);
}
.facts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.facts__item {
  padding: 22px 20px;
  text-align: center;
  color: var(--bone);
  border-left: var(--stroke) solid rgba(20,17,15,.28);
}
.facts__item:first-child { border-left: 0; }
.facts__k {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: .82;
  margin-bottom: 5px;
}
.facts__v {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.9vw, 1.32rem);
  line-height: 1.15;
}
.facts__v a { color: var(--bone); }

@media (max-width: 720px) {
  .facts__grid { grid-template-columns: 1fr; }
  .facts__item { border-left: 0; border-top: var(--stroke) solid rgba(20,17,15,.28); }
  .facts__item:first-child { border-top: 0; }
}

/* ==========================================================================
   Page banner (interior pages)
   ========================================================================== */

/* Same treatment as the hero: flat, textured, no photo behind a scrim. */
.banner {
  background: var(--ink);
  color: var(--bone);
  border-bottom: var(--stroke) solid var(--ink);
  position: relative;
  overflow: hidden;
}
.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(247,241,230,.10) 1.5px, transparent 1.6px);
  background-size: 15px 15px;
}
.banner::after {
  content: "";
  position: absolute;
  left: -8%;
  top: -60%;
  width: min(820px, 90vw);
  aspect-ratio: 1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(214,33,40,.38) 0%, rgba(214,33,40,.10) 48%, rgba(214,33,40,0) 70%);
}
.banner .shell { position: relative; z-index: 1; }
.banner__inner { padding-block: clamp(52px, 7.5vw, 90px); max-width: 780px; }
.banner h1 { color: var(--bone); margin-bottom: 0.3em; text-shadow: 0 3px 0 var(--red-deep); }
.banner p { color: var(--steel-2); font-size: 1.08rem; max-width: 56ch; margin-bottom: 0; }

/* ==========================================================================
   Dish cards
   ========================================================================== */

.dishgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 3.4vw, 38px);
}

.dish {
  background: var(--bone);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--pop) var(--pop) 0 var(--ink);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.dish:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--ink); }

.dish__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-2); }
.dish__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.dish:hover .dish__media img { transform: scale(1.05); }

.dish__price {
  position: absolute;
  top: 12px; right: 12px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  background: var(--amber);
  color: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  padding: 5px 15px;
  box-shadow: 3px 3px 0 var(--ink);
}

.dish__badge {
  position: absolute;
  top: 12px; left: 12px;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--red);
  color: var(--bone);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  padding: 5px 12px;
  box-shadow: 3px 3px 0 var(--ink);
}

.dish__body { padding: 22px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.dish__body h3 { margin-bottom: 0.35em; }
.dish__body p { font-size: 0.95rem; color: var(--ink-3); margin-bottom: 0; }
.dish__note {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 2px dashed var(--steel-2);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--red);
}

/* Menu-page rows (no photo) */
.rowlist { display: grid; gap: 18px; }
.rowitem {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  padding: 20px 24px;
  background: var(--bone);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 5px 5px 0 var(--ink);
}
.rowitem__name { font-family: var(--font-display); font-size: 1.22rem; }
.rowitem__price {
  font-family: var(--font-display);
  font-size: 1.22rem;
  color: var(--red);
  margin-left: auto;
  white-space: nowrap;
}
.rowitem__desc { flex-basis: 100%; font-size: 0.95rem; color: var(--ink-3); margin: 0; }

/* Menu section header */
.menusec { margin-bottom: clamp(46px, 6vw, 74px); }
.menusec__head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 28px;
}
.menusec__head h2 { margin: 0; white-space: nowrap; }
.menusec__line { flex: 1; height: 3px; background: var(--ink); border-radius: 3px; }
.menusec__price {
  font-family: var(--font-display);
  font-size: 1.05rem;
  background: var(--ink);
  color: var(--bone);
  border-radius: 999px;
  padding: 6px 18px;
  white-space: nowrap;
}

/* ==========================================================================
   Split feature (image + text)
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(32px, 5vw, 70px);
  align-items: center;
}
.split--flip .split__media { order: 2; }

.split__media {
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 12px 12px 0 var(--red);
  overflow: hidden;
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__media--tall { aspect-ratio: 4 / 5; }

@media (max-width: 720px) {
  .split--flip .split__media { order: 0; }
  .split__media { box-shadow: 8px 8px 0 var(--red); }
}

/* ==========================================================================
   Dark band
   ========================================================================== */

.band-ink {
  background: var(--ink);
  color: var(--bone);
  border-block: var(--stroke) solid var(--ink);
}
.band-ink h2, .band-ink h3 { color: var(--bone); }
.band-ink p { color: var(--steel-2); }

.band-red {
  background: var(--red);
  color: var(--bone);
  border-block: var(--stroke) solid var(--ink);
}
.band-red h2, .band-red h3 { color: var(--bone); }
.band-red p { color: rgba(247,241,230,.9); }

/* ==========================================================================
   Press quotes
   ========================================================================== */

.pressgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 26px;
}
.press {
  background: var(--ink-2);
  border: var(--stroke) solid var(--bone);
  border-radius: var(--radius);
  box-shadow: 7px 7px 0 var(--red);
  padding: 26px 26px 24px;
  display: flex;
  flex-direction: column;
}
.press__q {
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--bone);
  margin-bottom: 18px;
  flex: 1;
}
.press__src {
  font-family: var(--font-display);
  font-size: 0.98rem;
  color: var(--amber);
}
.press__src a { color: var(--amber); }
.press__meta {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  margin-top: 4px;
}

/* ==========================================================================
   Team
   ========================================================================== */

.teamgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 26px;
}
.member {
  background: var(--bone);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 7px 7px 0 var(--ink);
  padding: 28px 24px;
  text-align: center;
}
.member__initials {
  width: 74px; height: 74px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--red);
  color: var(--bone);
  border: var(--stroke) solid var(--ink);
  font-family: var(--font-display);
  font-size: 1.5rem;
  box-shadow: 4px 4px 0 var(--ink);
}
.member h3 { margin-bottom: 0.2em; font-size: 1.28rem; }
.member__role {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
}
.member p { font-size: 0.92rem; color: var(--ink-3); margin-bottom: 0; }

/* ==========================================================================
   Steps / numbered list
   ========================================================================== */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 26px; }
.step {
  background: var(--bone);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 7px 7px 0 var(--ink);
  padding: 26px 24px;
}
.step__n {
  font-family: var(--font-display);
  font-size: 2.1rem;
  color: var(--red);
  line-height: 1;
  margin-bottom: 10px;
}
.step h3 { font-size: 1.2rem; margin-bottom: 0.35em; }
.step p { font-size: 0.94rem; color: var(--ink-3); margin-bottom: 0; }

/* Dark variant, for steps sitting on an ink band */
.step--dark {
  background: var(--ink-2);
  border-color: var(--bone);
  box-shadow: 7px 7px 0 var(--red);
}
.step--dark h3 { color: var(--bone); }
.step--dark p { color: var(--steel-2); }
.step--dark .step__n { color: var(--amber); }

/* ==========================================================================
   Info cards (visit page)
   ========================================================================== */

.infogrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; }

.infocard {
  background: var(--bone);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 7px 7px 0 var(--ink);
  padding: 28px 26px;
}
.infocard h3 { font-size: 1.25rem; margin-bottom: 0.5em; }
.infocard p { font-size: 0.97rem; margin-bottom: 0.6em; }
.infocard p:last-child { margin-bottom: 0; }

/* Hours table */
.hours { width: 100%; border-collapse: collapse; font-size: 0.97rem; }
.hours th, .hours td { text-align: left; padding: 10px 0; border-bottom: 2px dashed var(--steel-2); }
.hours th { font-weight: 800; }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }
.hours .closed { color: var(--red); font-weight: 800; }

/* Map */
.mapwrap {
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 10px 10px 0 var(--red);
  overflow: hidden;
  background: var(--ink-2);
  line-height: 0;
}
.mapwrap iframe { width: 100%; height: 420px; border: 0; display: block; }

/* Order-app links */
.applinks { display: flex; flex-wrap: wrap; gap: 12px; }
.applink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 12px 20px;
  background: var(--bone);
  color: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--ink);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.applink:hover { text-decoration: none; transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }

/* ==========================================================================
   Form
   ========================================================================== */

.form { display: grid; gap: 20px; }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }

.field { display: grid; gap: 7px; }
.field label {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--bone);
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  padding: 13px 15px;
  width: 100%;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 4px 4px 0 var(--red);
}
.field select { appearance: none; background-image: none; cursor: pointer; }

.form__note { font-size: 0.85rem; color: var(--ink-3); margin: 0; }

.formstatus {
  display: none;
  padding: 15px 20px;
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  background: var(--amber);
  font-weight: 700;
  font-size: 0.94rem;
}
.formstatus.is-shown { display: block; }

/* ==========================================================================
   CTA band
   ========================================================================== */

.cta { text-align: center; }
.cta h2 { max-width: 18ch; margin-inline: auto; }
.cta p { max-width: 52ch; margin-inline: auto; font-size: 1.06rem; }
.cta__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 26px; }

.cta__truck {
  width: clamp(200px, 33vw, 380px);
  margin: 0 auto 26px;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.4));
}

/* ==========================================================================
   Footer
   ========================================================================== */

.foot {
  background: var(--ink);
  color: var(--steel-2);
  border-top: var(--stroke) solid var(--ink);
}
.foot__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-block: clamp(48px, 6vw, 70px);
}
@media (max-width: 880px) { .foot__grid { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 520px) { .foot__grid { grid-template-columns: 1fr; } }

.foot img.foot__logo { width: 168px; margin-bottom: 16px; }
.foot h4 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 16px;
}
.foot p { font-size: 0.93rem; margin-bottom: 0.7em; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 9px; }
.foot a { color: var(--bone); font-size: 0.93rem; }
.foot a:hover { color: var(--amber); }

.foot__bottom {
  border-top: 2px solid var(--ink-3);
  padding-block: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
}
.foot__bottom p { margin: 0; }

.foot__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.foot__legal li { margin: 0; }
.foot__legal a { font-size: 0.8rem; color: var(--steel-2); }
.foot__legal a:hover { color: var(--amber); }

.foot__credit { color: var(--steel); }
.foot__credit a { font-size: 0.8rem; color: var(--amber); font-weight: 700; }

/* Legal / long-form prose pages */
.prose { max-width: 74ch; }
.prose h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  margin-top: 1.9em;
  margin-bottom: 0.5em;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  margin-top: 1.5em;
  margin-bottom: 0.4em;
}
.prose ul { padding-left: 1.25em; margin-bottom: 1.1em; }
.prose li { margin-bottom: 0.5em; }
.prose a { text-decoration: underline; }
.prose__updated {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 2px dashed var(--steel-2);
  border-radius: 999px;
  padding: 7px 16px;
  margin-bottom: 34px;
}

.social { display: flex; gap: 10px; flex-wrap: wrap; }
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 15px;
  border: 2.5px solid var(--ink-3);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.social a:hover { background: var(--red); border-color: var(--red); color: var(--bone); }

/* ==========================================================================
   Road band, the truck drives across
   Only the truck moves; the headline and the road stay put, so the motion
   reads as a fixed camera watching it drive past.
   ========================================================================== */

.road__strip {
  position: relative;
  width: 100%;
  height: clamp(104px, 12vw, 160px);
  flex: none;
}

/* asphalt */
.road__strip::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 36%;
  background: linear-gradient(180deg, var(--ink-3) 0%, var(--ink-2) 100%);
  border-top: 3px solid var(--steel);
}

/* dashed centre line */
.road__line {
  position: absolute;
  left: 0; right: 0;
  bottom: 15%;
  height: 5px;
  border-radius: 3px;
  opacity: .8;
  background-image: repeating-linear-gradient(
    90deg,
    var(--amber) 0 44px,
    transparent 44px 88px
  );
}

/* the mover: horizontal travel only */
.road__truck {
  position: absolute;
  left: 0;
  bottom: 21%;
  width: clamp(168px, 25vw, 330px);
  will-change: transform;
  animation: drive 15s linear infinite;
}

/* the bob lives on the inner image so the two transforms never fight */
.road__truck img {
  display: block;
  width: 100%;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.55));
  animation: bob .62s ease-in-out infinite alternate;
}

/* -100% is the truck's own width, so it starts exactly off the left edge at
   any size, no guessing with vw, and no dead gap where the road sits empty. */
@keyframes drive {
  from { transform: translateX(-100%); }
  to   { transform: translateX(calc(100vw + 40px)); }
}

@keyframes bob {
  from { transform: translateY(0)    rotate(-0.5deg); }
  to   { transform: translateY(-7px) rotate(0.5deg); }
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

/* Content is visible by default. Only once JS has confirmed it is running
   (the .js class) do we hide it to animate it in, so a script failure or a
   no-JS visitor still sees every section. */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s ease, transform .55s ease;
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .js .reveal, .js .reveal.is-in { opacity: 1; transform: none; }

  /* Park the truck mid-road rather than letting the blanket rule above
     freeze it at its off-screen start position. */
  .road__truck {
    animation: none !important;
    transform: translateX(36vw);
  }
  .road__truck img { animation: none !important; transform: none; }
}

/* Focus visibility */
:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
}