/* Fresh Tires - built portrait-first. Base = the phone; every media query only adds.
   Palette out of his own logo: the navy shield, the water, the lime PESACH, the gold. */

@font-face { font-family: 'Tanker'; src: url('/fonts/Tanker-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/fonts/Satoshi-Variable.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Caveat Brush'; src: url('/fonts/CaveatBrush-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --night: #081330;
  --navy: #0E1F4D;
  --deep: #050B1C;
  --water: #36B4F5;
  --foam: #CDEFFF;
  --lime: #9BE13A;
  --lime-deep: #6FB21F;
  --gold: #F4B53F;
  --paper: #F3F7FB;
  --ink: #0B1633;
  --ink-soft: #3D4B6B;
  --line: rgba(11, 22, 51, .14);
  --display: 'Tanker', 'Impact', 'Arial Narrow', sans-serif;
  --body: 'Satoshi', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --hand: 'Caveat Brush', 'Comic Sans MS', 'Segoe Print', cursive;
}

*, *::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(--night); color: #fff;
  font: 400 17px/1.55 var(--body);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: 20px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--lime); color: var(--ink); padding: 10px 14px; border-radius: 10px; }
.skip:focus { left: 8px; }
.muted { color: rgba(255, 255, 255, .66); }
.lime { color: var(--lime); }
.tiny { font-size: 13px; color: rgba(255, 255, 255, .5); }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 52px; padding: 0 24px; border-radius: 999px; border: 0;
  font: 800 17px/1 var(--body); letter-spacing: .01em; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn-lime { background: var(--lime); color: var(--ink); box-shadow: 0 6px 0 var(--lime-deep); }
.btn-lime:hover { background: #ADEB55; }
.btn-lime:active { box-shadow: 0 2px 0 var(--lime-deep); transform: translateY(4px); }
.btn-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); }
.btn-ghost:hover { box-shadow: inset 0 0 0 2px #fff; }
.btn-ghost-ink { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }
.btn-ghost-ink:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.btn-big { min-height: 60px; font-size: 20px; padding: 0 34px; }
.btn[disabled] { opacity: .55; cursor: default; }
.linkish { background: none; border: 0; padding: 12px 4px; min-height: 44px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 15px; }
:focus-visible { outline: 3px solid var(--water); outline-offset: 3px; }

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 14px 0 120px;
  background:
    radial-gradient(90% 60% at 30% 12%, rgba(54, 180, 245, .22), transparent 70%),
    radial-gradient(120% 80% at 50% 0%, #133276 0%, var(--night) 62%);
}
.grain {
  position: absolute; inset: 0; z-index: -1; opacity: .16; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
}
.hero-grid { position: relative; z-index: 1; }
.hero-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; }
.pesach-chip {
  font: 800 11.5px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); white-space: nowrap;
  padding: 9px 12px; border-radius: 8px; background: rgba(244, 181, 63, .1); box-shadow: inset 0 0 0 1px rgba(244, 181, 63, .35);
}
.call-pill {
  margin-left: auto; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px;
  border-radius: 999px; background: rgba(255, 255, 255, .08); text-decoration: none; font-weight: 700; font-size: 15px; white-space: nowrap;
}
.call-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(155, 225, 58, .22); }
.booked-banner {
  margin: 14px 0 0; padding: 12px 16px; border-radius: 14px 14px 14px 4px; background: var(--lime); color: var(--ink); font-weight: 700;
}
.booked-banner a { font-weight: 800; }
.logo { width: min(88vw, 520px); height: auto; margin: 8px auto 0; filter: drop-shadow(0 22px 40px rgba(0, 0, 0, .5)); }
.hero-words { margin-top: 6px; }
h1 {
  margin: 0; font: 400 clamp(54px, 15.5vw, 126px)/.86 var(--display); text-transform: uppercase; letter-spacing: .005em;
  text-wrap: balance;
}
h1 .lime { display: inline; }
h1 .scrawl {
  display: block; width: max-content; margin: .3em 0 0 .15em;
  font: 400 .5em/.3 var(--hand); text-transform: none; color: var(--gold); letter-spacing: 0;
  transform: rotate(-4deg); transform-origin: left center;
}
/* "all in an hour." gets WRITTEN ON, left to right, once the face has loaded.
   html.motion is set by the script only when motion is welcome, so without it (or
   with reduced motion) the words simply sit there. */
html.motion h1 .scrawl { clip-path: inset(-40% 100% -60% -2%); }
html.motion.ready h1 .scrawl { animation: write-on 1.5s cubic-bezier(.45, .05, .35, 1) .45s forwards; }
@keyframes write-on { to { clip-path: inset(-40% -6% -60% -2%); } }
.lede { max-width: 34ch; margin: 26px 0 0; font-size: 19px; color: rgba(255, 255, 255, .86); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: 26px; }

.crumbs { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.crumb { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.nozzle {
  position: absolute; z-index: 3; right: -12px; width: 260px; height: auto; pointer-events: none;
  transform: translateX(110%); will-change: transform; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .45));
}
@media (prefers-reduced-motion: reduce) { .crumbs, .nozzle { display: none; } }
/* ?motion=1 shows the vacuum even with reduced motion on - for looking at it, never linked */
html.force-motion .crumbs, html.force-motion .nozzle { display: block; }

/* ── everything ──────────────────────────────────────────────────────────── */
.everything { position: relative; isolation: isolate; background: var(--deep); overflow: hidden; }
.everything-img, .everything-img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.everything-img img { object-fit: cover; object-position: 50% 70%; }
.everything::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 11, 28, .92) 0%, rgba(5, 11, 28, .55) 42%, rgba(5, 11, 28, .05) 70%, rgba(5, 11, 28, .5) 100%);
}
.everything-words { position: relative; z-index: 1; padding-block: 72px 360px; }
.stack { margin: 0; display: flex; flex-direction: column; font: 400 clamp(46px, 13vw, 118px)/.9 var(--display); text-transform: uppercase; }
.stack span { display: block; }
.stack .all { position: relative; color: var(--lime); font-size: 1.28em; margin-top: .08em; width: max-content; max-width: 100%; }
.swoosh { position: absolute; left: 2%; right: 0; bottom: -.2em; width: 96%; height: auto; overflow: visible; pointer-events: none; }
/* The list lands one line at a time, then the underline under EVERYTHING is written
   on - slowly enough to watch the pen go. */
html.motion [data-reveal] .swoosh path { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.motion [data-reveal].in .swoosh path { transition: stroke-dashoffset 1.6s cubic-bezier(.55, .05, .3, 1) var(--pen-delay, .2s); stroke-dashoffset: 0; }
html.motion .stack span { opacity: 0; transform: translateY(.35em) rotate(-3deg); }
html.motion .stack.in span { animation: land .55s cubic-bezier(.2, 1.5, .4, 1) forwards; }
html.motion .stack.in span:nth-child(2) { animation-delay: .14s; }
html.motion .stack.in span:nth-child(3) { animation-delay: .28s; }
html.motion .stack.in span:nth-child(4) { animation-delay: .42s; }
html.motion .stack.in span:nth-child(5) { animation-delay: .62s; }
html.motion .stack { --pen-delay: 1.15s; }
@keyframes land { to { opacity: 1; transform: none; } }
.marked { position: relative; display: inline-block; }
.swoosh-sm { bottom: -.1em; left: -2%; width: 104%; }
.everything-note { margin: 34px 0 0; font-weight: 700; font-size: 19px; max-width: 30ch; }

/* ── bands ───────────────────────────────────────────────────────────────── */
.band { padding-block: 72px; position: relative; }
.band-night { background: var(--night); }
.band-lime { background: var(--lime); color: var(--ink); }
.section-head { margin-bottom: 30px; }
.title { margin: 0; font: 400 clamp(46px, 12.5vw, 96px)/.9 var(--display); text-transform: uppercase; text-wrap: balance; }
.title.ink { color: var(--ink); }
.title-sm { margin: 34px 0 6px; font: 400 clamp(30px, 8vw, 44px)/.95 var(--display); text-transform: uppercase; color: var(--gold); }
.section-lede { margin: 14px 0 0; font-size: 18px; color: rgba(255, 255, 255, .78); }
.ink-soft { color: var(--ink-soft) !important; }
.kicker { margin: 0 0 18px; font: 800 13px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; }

/* ── carousel ────────────────────────────────────────────────────────────── */
.carousel { position: relative; }
.slides {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--deep);
  border-radius: 26px 26px 26px 6px; touch-action: pan-y;
}
/* No buttons: the photos move on their own, one every three seconds. The new one
   wipes in from the right over the old one, slowly pushing in, and its words slide up. */
.slide { position: absolute; inset: 0; margin: 0; opacity: 0; z-index: 0; }
.slide.on { opacity: 1; z-index: 2; }
.slide.was { opacity: 1; z-index: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(5, 11, 28, .8)); }
.slide figcaption { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 18px; font: 400 clamp(40px, 11vw, 76px)/.9 var(--display); text-transform: uppercase; }
html.motion .slide.on { animation: wipe-in .85s cubic-bezier(.7, 0, .25, 1) both; }
html.motion .slide.on img { animation: push-in 3.6s linear both; }
html.motion .slide.on figcaption { animation: cap-up .6s cubic-bezier(.2, 1.3, .4, 1) .45s both; }
@keyframes wipe-in { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes push-in { from { transform: scale(1.12); } to { transform: scale(1.02); } }
@keyframes cap-up { from { opacity: 0; transform: translateY(40%); } to { opacity: 1; transform: none; } }

/* ── prices ──────────────────────────────────────────────────────────────── */
.prices { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.prices li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 2px solid rgba(11, 22, 51, .18); }
.prices .p-name { font: 400 clamp(38px, 10vw, 72px)/1 var(--display); text-transform: uppercase; }
.prices .p-price { position: relative; display: inline-block; justify-self: start; padding: 0 .12em; font: 400 clamp(44px, 12vw, 88px)/1 var(--display); }
/* A marker circle scribbled round each price as the band comes into view. */
.scribble { position: absolute; left: -26%; top: -30%; width: 152%; height: 160%; overflow: visible; pointer-events: none; }
.scribble path { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; }
html.motion .scribble path { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.motion .in .scribble path { transition: stroke-dashoffset 1s cubic-bezier(.5, 0, .3, 1); stroke-dashoffset: 0; }
html.motion .in li:nth-child(2) .scribble path { transition-delay: .35s; }
html.motion .in li:nth-child(3) .scribble path { transition-delay: .7s; }
.price-extras { margin: 20px 0 0; font-weight: 700; font-size: 18px; max-width: 46ch; }

/* ── where ───────────────────────────────────────────────────────────────── */
.where-grid { display: grid; gap: 34px; }
.map { margin: 0; }
.map img, .map-svg svg { display: block; width: 100%; height: auto; border-radius: 28px; }
html.motion .map-ring { transform-box: fill-box; transform-origin: center; animation: ring-turn 60s linear infinite; }
@keyframes ring-turn { to { transform: rotate(360deg); } }
.map figcaption { margin-top: 8px; font-size: 12px; color: rgba(255, 255, 255, .5); }
.map figcaption a { color: inherit; }
.where-words p { margin: 12px 0 0; font-size: 18px; max-width: 40ch; }

/* ── booking ─────────────────────────────────────────────────────────────── */
.book { background: var(--paper); color: var(--ink); padding-block: 72px 96px; }
.ticket {
  position: relative; background: #fff; border-radius: 22px; padding: 22px 18px 26px;
  box-shadow: 0 1px 0 var(--line), 0 30px 60px -30px rgba(11, 22, 51, .35);
}
/* the perforated edge along the top, like a car-wash ticket */
.ticket::before {
  content: ''; position: absolute; left: 14px; right: 14px; top: -7px; height: 14px;
  background: radial-gradient(circle at 7px 7px, var(--paper) 6px, transparent 6.5px) 0 0 / 20px 14px repeat-x;
}
.ticket-loading { padding: 40px 0; text-align: center; color: var(--ink-soft); }
.closed { padding: 30px 4px; }
.closed-big { font: 400 clamp(34px, 9vw, 56px)/.95 var(--display); text-transform: uppercase; margin: 0 0 14px; }
.closed a { font-weight: 800; }

.step { border: 0; margin: 0; padding: 18px 0 22px; border-bottom: 2px dashed var(--line); min-width: 0; }
.step legend { float: left; width: 100%; display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font: 400 30px/1 var(--display); text-transform: uppercase; }
.step legend + * { clear: both; }
.num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--lime); font: 800 16px/1 var(--body); }
.step.done .num { background: var(--lime); color: var(--ink); }
.hint { margin: 0 0 10px; color: var(--ink-soft); font-size: 15px; }

.vehicles { display: grid; grid-template-columns: 1fr; gap: 10px; }
.veh {
  display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 14px; width: 100%; text-align: left;
  min-height: 76px; padding: 10px 16px 10px 12px; border-radius: 16px; border: 2px solid var(--line); background: #fff; cursor: pointer;
}
.veh svg { width: 92px; height: auto; color: var(--ink); }
.veh .v-name { font: 400 30px/1 var(--display); text-transform: uppercase; }
.veh .v-price { font: 400 32px/1 var(--display); }
.veh[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.veh[aria-pressed="true"] svg { color: var(--lime); }

.extras { display: grid; gap: 10px; margin-top: 14px; }
.extra { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 8px 10px 8px 16px; border-radius: 14px; background: var(--paper); }
.extra-name { font-weight: 700; }
.extra-name small { display: block; font-weight: 500; color: var(--ink-soft); font-size: 14px; }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line); background: #fff; cursor: pointer; font-size: 22px; font-weight: 800; line-height: 1; }
.stepper output { min-width: 28px; text-align: center; font: 400 26px/1 var(--display); }
.toggle { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--line); background: #fff; cursor: pointer; font-weight: 800; }
.toggle[aria-pressed="true"] { background: var(--ink); color: var(--lime); border-color: var(--ink); }

.days { display: grid; gap: 14px; }
.week-label { margin: 0 0 6px; font: 800 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.day-chip {
  min-width: 88px; min-height: 64px; padding: 8px 12px; border-radius: 14px; border: 2px solid var(--line); background: #fff; cursor: pointer;
  display: grid; justify-items: start; text-align: left; line-height: 1.15;
}
.day-chip b { font: 400 22px/1 var(--display); text-transform: uppercase; }
.day-chip small { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
.day-chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.day-chip[aria-pressed="true"] small { color: var(--lime); }
.day-chip:disabled { cursor: default; opacity: .45; text-decoration: line-through; }
.hours { display: flex; flex-wrap: wrap; gap: 8px; }
.hour-chip { min-width: 84px; min-height: 52px; padding: 0 14px; border-radius: 12px; border: 2px solid var(--line); background: #fff; cursor: pointer; font: 400 24px/1 var(--display); }
.hour-chip[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); }
.hour-chip:disabled { cursor: default; color: rgba(11, 22, 51, .35); text-decoration: line-through; }

.place { display: grid; gap: 10px; }
.place-btn { display: grid; gap: 2px; text-align: left; min-height: 72px; padding: 12px 16px; border-radius: 16px; border: 2px solid var(--line); background: #fff; cursor: pointer; }
.place-btn strong { font: 400 28px/1 var(--display); text-transform: uppercase; }
.place-btn span { color: var(--ink-soft); font-size: 15px; }
.place-btn[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.place-btn[aria-pressed="true"] span { color: var(--lime); }
.come { margin-top: 14px; display: grid; gap: 12px; }

.field { display: grid; gap: 6px; margin-top: 12px; }
.field > span { font-weight: 700; font-size: 15px; }
.field em { font-style: normal; font-weight: 500; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--line); background: #fff; color: var(--ink); font-size: 17px;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--water); outline: none; box-shadow: 0 0 0 4px rgba(54, 180, 245, .2); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.stub {
  margin-top: 22px; padding: 16px 18px; border-radius: 16px; background: var(--ink); color: #fff;
  display: grid; gap: 12px;
}
.stub-lines { display: grid; gap: 3px; font-size: 16px; }
.stub-lines b { font-weight: 800; }
.stub-total { display: flex; align-items: baseline; justify-content: space-between; border-top: 2px dashed rgba(255, 255, 255, .25); padding-top: 10px; }
.stub-total span { font-weight: 700; color: rgba(255, 255, 255, .7); }
.stub-total strong { font: 400 40px/1 var(--display); color: var(--lime); }
.form-error { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: #FFF3D6; color: #5A3B00; font-weight: 700; }
.book-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 20px; }

.done { position: relative; padding: 16px 4px 6px; }
.done p { margin: 8px 0 0; font-size: 18px; }
.done-ref { font-size: 15px !important; color: var(--ink-soft); }
.done-when { margin: 6px 0 4px; font: 400 clamp(40px, 11vw, 70px)/.92 var(--display); text-transform: uppercase; max-width: 12ch; }
.done-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.stamp {
  position: absolute; right: 8px; top: 4px; padding: 6px 14px; border: 4px solid var(--lime-deep); border-radius: 10px;
  color: var(--lime-deep); font: 400 38px/1 var(--display); text-transform: uppercase; transform: rotate(9deg);
  animation: stamp .45s cubic-bezier(.2, 1.6, .4, 1) both;
}
@keyframes stamp { from { opacity: 0; transform: rotate(9deg) scale(2.4); } to { opacity: .9; transform: rotate(9deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .stamp { animation: none; opacity: .9; } }

/* ── quotes ──────────────────────────────────────────────────────────────── */
.quote-list { display: grid; gap: 22px; }
.quote { margin: 0; font: 400 clamp(26px, 7vw, 44px)/1.05 var(--hand); color: #fff; }
.quote cite { display: block; margin-top: 8px; font: 800 13px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--lime); font-style: normal; }

/* ── footer ──────────────────────────────────────────────────────────────── */
.foot { background: var(--deep); padding-block: 56px calc(96px + env(safe-area-inset-bottom)); }
.foot-grid { display: grid; gap: 24px; }
.foot-logo { width: 190px; height: auto; }
.foot p { margin: 8px 0 0; }
.foot-big { font: 400 clamp(34px, 9vw, 54px)/1 var(--display); text-transform: uppercase; }
.foot-big a { text-decoration: none; }
.foot a:hover { color: var(--lime); }

.sticky-book {
  position: fixed; z-index: 20; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px; border-radius: 999px;
  background: var(--lime); color: var(--ink); font-weight: 800; text-decoration: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

/* ── wider: add, never undo ──────────────────────────────────────────────── */
@media (min-width: 600px) {
  .wrap { padding-inline: 32px; }
  .vehicles { grid-template-columns: repeat(3, 1fr); }
  .veh { grid-template-columns: 1fr; justify-items: start; gap: 6px; padding: 16px; min-height: 0; }
  .veh svg { width: 100%; max-width: 170px; }
  .place { grid-template-columns: 1fr 1fr; }
  .come { grid-template-columns: 2fr 1fr; align-items: end; }
  .come .hint { grid-column: 1 / -1; }
  .field-short { margin-top: 0; }
  .come .field { margin-top: 0; }
  .extras { grid-template-columns: 1fr 1fr; }
  .slides { aspect-ratio: 16 / 10; }
  .ticket { padding: 30px 34px 34px; }
}
@media (min-width: 900px) {
  .hero { padding: 20px 0 110px; }
  .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: 44px; align-items: center; }
  .hero-top, .booked-banner { grid-column: 1 / -1; }
  .logo { width: 100%; max-width: 520px; margin: 30px 0 0; }
  .hero-words { margin-top: 30px; }
  .nozzle { width: 380px; }
  .everything { min-height: 760px; }
  .everything-img img { object-position: 70% 50%; }
  .everything::after { background: linear-gradient(90deg, rgba(5, 11, 28, .94) 0%, rgba(5, 11, 28, .7) 38%, rgba(5, 11, 28, .05) 70%); }
  .everything-words { padding-block: 110px; }
  .band { padding-block: 110px; }
  .section-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 40px; }
  .section-head .section-lede { margin: 0 0 8px; max-width: 28ch; text-align: right; }
  .prices { grid-template-columns: repeat(3, 1fr); gap: 0 34px; }
  .prices li { display: grid; gap: 6px; border-bottom: 0; border-top: 3px solid var(--ink); padding-top: 16px; }
  .where-grid { grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; }
  .book-form { display: grid; grid-template-columns: minmax(0, 1fr) 320px; column-gap: 40px; align-items: start; }
  .book-form .step { grid-column: 1; }
  .book-form .stub { grid-column: 2; grid-row: 1 / span 5; position: sticky; top: 24px; margin-top: 18px; }
  .book-form .form-error, .book-form .book-actions { grid-column: 1; }
  .foot-grid { grid-template-columns: 240px 1fr; align-items: center; gap: 40px; }
  .foot-logo { width: 100%; }
  .sticky-book { display: none; }
  .quote-list { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}

/* ── the booking page ────────────────────────────────────────────────────── */
.booking-page { background: var(--paper); }
.mini-head { background: var(--night); padding-block: 10px; }
.mini-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mini-logo img { width: 120px; height: auto; }
.book-solo { padding-block: 36px 80px; }
.muted-ink { color: var(--ink-soft); }
.btn-dark { background: var(--ink); color: #fff; }
.cancel-box { margin-top: 30px; padding-top: 20px; border-top: 2px dashed var(--line); }
.cancel-q { margin: 0 0 10px !important; font: 400 26px/1 var(--display) !important; text-transform: uppercase; }
.cancel-sure { margin-top: 14px; padding: 16px; border-radius: 14px; background: var(--paper); }
.cancel-sure p { margin: 0; }
.cancel-box .hint { margin-top: 14px; }
.stamp-off { border-color: #9AA3B5; color: #6B7488; }
@media (min-width: 900px) { .book-solo .ticket { max-width: 720px; margin: 0 auto; } .mini-logo img { width: 150px; } }