/* The Green DnB Party Bus — "sound system on wheels"
   Rave flyer meets tech rider. Lime is the bus paint, ink is the night, purple is the booth.
   Square corners everywhere (flight cases, not app cards). Motion runs at 174 BPM. */

:root {
  --ink: #0b0e09;
  --ink-2: #121910;
  --ink-3: #1b2416;
  --line: rgba(214, 255, 190, 0.14);
  --line-2: rgba(214, 255, 190, 0.28);
  --bus: #5ce11e;
  --acid: #d4ff3a;
  --text: #e9f0e2;
  --muted: #9aa890;
  --uv: #9a5cff;

  --display: "Big Shoulders Display", "Archivo", Impact, "Arial Narrow", sans-serif;
  --body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --script: "Permanent Marker", "Marker Felt", cursive;

  color-scheme: dark;
  --beat: 0.3448s; /* 60s / 174 BPM */
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 400 17px/1.6 var(--body);
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
}
/* photocopier grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg { display: block; max-width: 100%; }
picture { display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--bus); outline-offset: 3px; }
::selection { background: var(--bus); color: var(--ink); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 860px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--bus); color: var(--ink); padding: 10px 14px; font-weight: 700; }
.skip:focus { top: 12px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 22px;
  border: 2px solid transparent;
  font: 700 15px/1 var(--body);
  text-transform: uppercase; letter-spacing: 0.05em;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.btn svg { width: 18px; height: 18px; fill: currentColor; transition: transform 0.15s; }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn-lime { background: var(--bus); color: var(--ink); border-color: var(--bus); }
.btn-lime:hover { background: var(--acid); border-color: var(--acid); }
.btn-line { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn-line:hover { border-color: var(--bus); color: var(--bus); }
.btn-ink { background: var(--ink); color: var(--bus); border-color: var(--ink); }
.btn-ink:hover { background: var(--ink-3); border-color: var(--ink-3); }
.btn-sm { padding: 10px 14px; font-size: 13px; }
.btn-block { width: 100%; justify-content: center; }

/* ---------- masthead ---------- */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 14, 9, 0.88);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.masthead-in { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.brand { display: flex; flex-direction: column; text-decoration: none; line-height: 1; margin-right: auto; }
.brand-word { font: 900 28px/0.9 var(--display); text-transform: uppercase; color: var(--bus); letter-spacing: 0.01em; }
.brand-script { font: 400 13px/1.2 var(--script); color: var(--muted); transform: rotate(-2deg); transform-origin: left; margin-top: 3px; }
.nav ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.nav a { font: 600 13px/1 var(--body); text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; color: var(--text); opacity: 0.8; }
.nav a:hover { opacity: 1; color: var(--bus); }
.nav-toggle { display: none; }

/* ---------- hero ---------- */
.hero { padding: clamp(40px, 6vw, 88px) 0 clamp(64px, 8vw, 110px); position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-script { font: 400 clamp(22px, 2.4vw, 30px)/1.1 var(--script); color: var(--bus); transform: rotate(-3deg); transform-origin: left; margin: 0 0 18px; }
.hero-title {
  font: 900 clamp(58px, 8.6vw, 136px)/0.84 var(--display);
  text-transform: uppercase; letter-spacing: -0.005em;
  margin: 0 0 28px;
}
.hero-title span { display: block; }
@media (min-width: 861px) {
  .hero-copy { container-type: inline-size; }
  .hero-title { font-size: min(14.2cqi, 136px); }
  .hero-title span { white-space: nowrap; }
}
.hero-title .hl { color: var(--bus); }
.lede { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; max-width: 34em; color: var(--text); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 34px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 0; list-style: none; padding: 0; margin: 0; font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.hero-meta li { display: flex; align-items: center; gap: 9px; padding: 10px 16px; border: 1px solid var(--line); margin: 0 -1px -1px 0; }
.pulse { width: 9px; height: 9px; background: var(--bus); border-radius: 50%; animation: beat var(--beat) ease-out infinite; }
@keyframes beat { 0% { transform: scale(1.5); box-shadow: 0 0 0 0 rgba(92, 225, 30, 0.6); } 100% { transform: scale(1); box-shadow: 0 0 0 9px rgba(92, 225, 30, 0); } }

.hero-photo { position: relative; margin: 0; }
.hero-photo picture { aspect-ratio: 3 / 4; overflow: hidden; box-shadow: 16px 16px 0 var(--bus); border: 1px solid var(--line-2); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo figcaption, .frame figcaption {
  position: absolute; left: -10px; bottom: 26px;
  background: var(--ink); color: var(--bus); border: 1px solid var(--bus);
  font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.12em;
  padding: 8px 11px;
}

/* ---------- tape (genre marquee) ---------- */
.tape { background: var(--bus); color: var(--ink); transform: rotate(-1.6deg); margin: 0 -40px; padding: 14px 0; overflow: hidden; position: relative; z-index: 2; box-shadow: 0 10px 0 rgba(0, 0, 0, 0.35); }
.tape-run { display: flex; width: max-content; align-items: center; gap: 28px; animation: tape 36s linear infinite; }
.tape span { font: 900 clamp(26px, 3vw, 38px)/1 var(--display); text-transform: uppercase; white-space: nowrap; }
.tape i { font-style: normal; font-size: 12px; }
@keyframes tape { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
.section { padding: clamp(80px, 10vw, 150px) 0; position: relative; }
.eyebrow { display: flex; align-items: center; gap: 12px; font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.16em; color: var(--bus); margin: 0 0 18px; }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.eyebrow-ink { color: var(--ink); }
.h2 { font: 900 clamp(46px, 6.6vw, 96px)/0.88 var(--display); text-transform: uppercase; margin: 0 0 28px; max-width: 13ch; letter-spacing: -0.003em; }
.h2-ink { color: var(--ink); }
.section-lede { font-size: 19px; max-width: 40em; color: var(--muted); margin-bottom: 44px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.split-rev .split-copy { order: 2; }
.split-copy > p { max-width: 34em; }
.split-media { position: relative; }
.frame { margin: 0; position: relative; }
.frame picture { overflow: hidden; border: 1px solid var(--line-2); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame-tilt { transform: rotate(1.4deg); }
.frame-tilt picture { aspect-ratio: 4 / 3; box-shadow: -14px 14px 0 var(--uv); }
.frame-small { position: absolute; width: 44%; left: -6%; bottom: -18%; transform: rotate(-3.5deg); }
.frame-small picture { aspect-ratio: 1; border: 6px solid var(--ink); outline: 1px solid var(--line-2); }
.frame-small figcaption { left: auto; right: -10px; bottom: 12px; }
.frame-wide picture { aspect-ratio: 16 / 9; }
.frame-wide img { object-position: 30% 55%; }
.frame-pano { width: 58%; bottom: -24%; }
.frame-pano picture { aspect-ratio: 2 / 1; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; padding: 0; margin: 36px 0 0; border-top: 1px solid var(--line); }
.stats li { padding: 20px 16px 0 0; }
.stats b { display: block; font: 900 clamp(44px, 5vw, 64px)/0.9 var(--display); color: var(--bus); }
.stats span { font: 500 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }

/* ---------- after-dark band ---------- */
.band { position: relative; background: var(--ink); overflow: hidden; }
.band-media { margin: 0; }
.band-media picture { aspect-ratio: 21 / 9; }
.band-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 14, 9, 0.85) 0%, rgba(11, 14, 9, 0.25) 45%, transparent 70%), linear-gradient(0deg, rgba(11, 14, 9, 0.7) 0%, transparent 35%); pointer-events: none; }
.band-copy { position: absolute; left: 0; right: 0; bottom: clamp(24px, 5vw, 64px); margin: 0 auto; z-index: 1; }
.band-line { font: 900 clamp(40px, 4.4vw, 68px)/0.86 var(--display); text-transform: uppercase; margin: 0; color: var(--text); }

/* ---------- parties, weddings & birthdays ---------- */
.parties-head { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 80px); align-items: end; margin-bottom: 44px; }
.parties-head .h2 { max-width: 12ch; margin-bottom: 0; }
.parties-intro .section-lede { color: var(--text); margin-bottom: 14px; }
.parties-price { font: 900 clamp(48px, 5vw, 72px)/0.9 var(--display); color: var(--bus); margin: 0 0 22px; }
.parties-price span, .parties-price em { font: 500 13px/1 var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); vertical-align: 0.4em; }
.occasions { display: grid; grid-template-columns: 0.85fr 1.15fr; grid-template-rows: repeat(2, minmax(260px, 1fr)); gap: 16px; }
.occasion { position: relative; display: block; overflow: hidden; border: 1px solid var(--line-2); background: var(--ink-3); color: var(--text); text-decoration: none; }
.occasion-tall { grid-row: span 2; }
.occasion picture, .occasion img { position: absolute; inset: 0; width: 100%; height: 100%; }
.occasion img { object-fit: cover; object-position: var(--pos, 50% 50%); transition: transform 0.5s; }
.occasion:hover img { transform: scale(1.04); }
.occasion::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 14, 9, 0.95) 0%, rgba(11, 14, 9, 0.6) 45%, transparent 78%); pointer-events: none; }
.occasion-copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 22px 24px; }
.occasion h3 { font: 900 clamp(34px, 3.4vw, 52px)/0.9 var(--display); text-transform: uppercase; margin: 0 0 8px; }
.occasion p { margin: 0 0 12px; max-width: 34em; font-size: 15.5px; color: #dfe8d6; }
.occasion-cta { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--bus); }
.occasion-cta svg { width: 14px; height: 14px; fill: currentColor; }
.occasion:hover .occasion-cta, .occasion:focus-visible .occasion-cta { color: var(--acid); }

/* ---------- hire ---------- */
.section-hire { background: var(--ink-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.packs { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 18px; align-items: stretch; }
.pack { display: flex; flex-direction: column; background: var(--ink); border: 1px solid var(--line-2); padding: 28px 26px 26px; }
.pack-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--bus); margin-bottom: 26px; }
.pack-name { font: 800 30px/0.95 var(--display); text-transform: uppercase; margin: 0 0 18px; }
.pack-price { font: 900 clamp(56px, 5.4vw, 76px)/0.85 var(--display); margin: 0 0 6px; letter-spacing: -0.01em; }
.pack-from { font: 500 13px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; vertical-align: 0.35em; }
.pack-unit { font: 800 24px/1 var(--display); text-transform: uppercase; }
.pack-plus { font: 500 13px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 20px; opacity: 0.8; }
.pack-body { font-size: 15.5px; opacity: 0.88; }
.pack .rider { margin: 6px 0 26px; border-top: 1px dotted var(--line-2); }
.pack .rider > div { flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 0; border-bottom: 1px dotted var(--line-2); }
.pack .rider dt { white-space: normal; opacity: 0.75; }
.pack .rider dt::after { display: none; }
.pack .rider dd { text-align: left; max-width: none; }
.pack-feature .rider, .pack-feature .rider > div { border-color: rgba(11, 14, 9, 0.35); }
.pack-cta { margin-top: auto; align-self: flex-start; }
.pack-feature { background: var(--bus); color: var(--ink); border-color: var(--bus); }
.pack-feature .pack-head { color: var(--ink); }
.price-note { display: flex; gap: 10px; align-items: center; font: 500 13px/1.5 var(--mono); color: var(--muted); margin-top: 28px; }
.price-note svg { width: 16px; height: 16px; fill: var(--bus); flex: none; }

/* tech-rider rows with dotted leaders */
.rider { margin: 0; }
.rider > div { display: flex; align-items: baseline; padding: 7px 0; }
.rider dt { display: flex; flex: 1 1 auto; align-items: baseline; font: 500 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
.rider dt::after { content: ""; flex: 1; min-width: 16px; margin: 0 10px; border-bottom: 1px dotted var(--line-2); transform: translateY(-3px); }
.rider dd { margin: 0; text-align: right; font-size: 14.5px; font-weight: 600; max-width: 62%; }
.rider-big > div { padding: 13px 0; border-bottom: 1px solid var(--line); }
.rider-big dt { color: var(--muted); font-size: 13px; }
.rider-big dt::after { display: none; }
.rider-big dd { font: 800 clamp(20px, 2vw, 26px)/1.1 var(--display); text-transform: uppercase; letter-spacing: 0.01em; }

/* ---------- rig ---------- */
.rig-media { display: grid; place-items: center; min-height: 420px; }
.rig-media .frame { width: min(340px, 72%); z-index: 1; transform: rotate(-2deg); }
.rig-media .frame picture { aspect-ratio: 9 / 14; box-shadow: 14px 14px 0 var(--bus); }
.cone { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.cone span { position: absolute; border-radius: 50%; border: 1px solid var(--line-2); aspect-ratio: 1; animation: cone var(--beat) ease-out infinite; }
.cone span:nth-child(1) { width: 52%; border-color: rgba(92, 225, 30, 0.5); }
.cone span:nth-child(2) { width: 76%; animation-delay: calc(var(--beat) * 0.15); }
.cone span:nth-child(3) { width: 100%; animation-delay: calc(var(--beat) * 0.3); border-style: dashed; }
@keyframes cone { 0% { transform: scale(1.025); } 100% { transform: scale(1); } }

/* ---------- rig video ---------- */
.rig-media .rig-video { width: 100%; transform: rotate(-1.2deg); }
.rig-video video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--line-2); box-shadow: 14px 14px 0 var(--bus); background: var(--ink-3); }
.rig-video figcaption { left: auto; right: -10px; bottom: 18px; }

/* ---------- drop it anywhere ---------- */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(150px, 16vw, 230px); gap: 14px; }
.bento-item { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--line-2); background: var(--ink-3); }
.bento-item picture, .bento-item img { width: 100%; height: 100%; }
.bento-item img { object-fit: cover; transition: transform 0.5s; }
.bento-item:hover img { transform: scale(1.04); }
.bento-big { grid-column: span 2; grid-row: span 2; }
.bento-item:nth-child(5):last-child { grid-column: span 2; }
.section-anywhere .h2 { max-width: 18ch; }
.bento-item figcaption { position: absolute; left: 12px; bottom: 12px; background: var(--ink); color: var(--bus); border: 1px solid var(--bus); font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; padding: 7px 10px; }

/* ---------- route + strip ---------- */
.section-route { padding-bottom: clamp(60px, 7vw, 100px); }
.route { list-style: none; margin: 18px 0 56px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.route::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; border-top: 3px dashed var(--bus); opacity: 0.55; }
.stop { position: relative; padding: 36px 20px 0 0; display: flex; flex-direction: column; gap: 6px; }
.stop::before { content: ""; position: absolute; top: 0; left: 0; width: 17px; height: 17px; border-radius: 50%; background: var(--ink); border: 3px solid var(--bus); }
.stop:last-child::before { background: var(--bus); }
.stop-n { font: 500 12px/1 var(--mono); color: var(--bus); letter-spacing: 0.12em; }
.stop-city { font: 900 clamp(36px, 3.6vw, 52px)/0.9 var(--display); text-transform: uppercase; }
.stop-spot { color: var(--muted); font-size: 15px; }

.strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(76vw, 400px); gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  --strip-pad: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  padding: 0 var(--strip-pad) 18px;
  scroll-padding-inline: var(--strip-pad);
  scrollbar-width: thin; scrollbar-color: var(--bus) var(--ink-3);
}
.strip-item { margin: 0; scroll-snap-align: start; }
.strip-item picture { aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--line-2); background: var(--ink-3); }
.strip-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.strip-item:hover img { transform: scale(1.03); }
.strip-item figcaption { font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); padding-top: 12px; }

/* ---------- DJs poster ---------- */
.section-poster {
  background-color: var(--bus); color: var(--ink);
  background-image: radial-gradient(rgba(11, 14, 9, 0.13) 1.4px, transparent 1.6px);
  background-size: 14px 14px;
}
.poster { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: end; }
.poster .h2 { max-width: 11ch; margin-bottom: 0; }
.poster-copy p { font-size: 18px; max-width: 32em; }
.poster-genres { font: 900 clamp(30px, 3.2vw, 44px)/0.95 var(--display) !important; text-transform: uppercase; margin: 26px 0 30px; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line-2); }
.faq-item { border-bottom: 1px solid var(--line-2); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; font: 800 clamp(22px, 2.2vw, 28px)/1.05 var(--display); text-transform: uppercase; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font: 400 30px/1 var(--mono); color: var(--bus); transition: transform 0.2s; flex: none; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--bus); }
.faq-item p { color: var(--muted); max-width: 46em; margin: -6px 0 26px; }

/* ---------- book ---------- */
.section-book { background: var(--ink-2); border-top: 1px solid var(--line); }
.book { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.book-intro > p { color: var(--muted); max-width: 30em; }
.call { display: inline-flex; align-items: center; gap: 14px; margin: 18px 0 26px; text-decoration: none; color: var(--bus); font: 900 clamp(40px, 4.6vw, 60px)/1 var(--display); letter-spacing: 0.01em; }
.call svg { width: 34px; height: 34px; fill: currentColor; }
.call:hover { color: var(--acid); }
.contact-list, .footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.contact-list a, .footer-links a { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
.contact-list svg, .footer-links svg { width: 20px; height: 20px; fill: var(--bus); flex: none; }
.contact-list a:hover, .footer-links a:hover { color: var(--bus); }

.quote { background: var(--ink); border: 1px solid var(--line-2); padding: clamp(20px, 3vw, 34px); }
.quote fieldset { border: 0; margin: 0 0 6px; padding: 0; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field label { font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.opt { text-transform: none; letter-spacing: 0; opacity: 0.7; }
.field input, .field select, .field textarea, .sent textarea {
  width: 100%; background: var(--ink-2); color: var(--text);
  border: 1px solid var(--line-2); border-radius: 0;
  padding: 13px 14px; font: 500 16px/1.3 var(--body);
  -webkit-appearance: none; appearance: none;
}
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--bus) 50%), linear-gradient(-45deg, transparent 50%, var(--bus) 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--bus); outline: none; box-shadow: 0 0 0 1px var(--bus); }
.field input[type="date"] { color-scheme: dark; min-height: 47px; }
.field .invalid { border-color: #ff6b5c; }
.check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; margin: 4px 0 22px; font-weight: 600; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--bus); flex: none; }
.check em { font-style: normal; color: var(--muted); font-weight: 400; }
.guide { display: grid; gap: 6px; border: 1px dashed var(--bus); padding: 16px 18px; margin: 4px 0 18px; }
.guide-label { font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.guide-total { font: 900 40px/0.95 var(--display); color: var(--bus); text-transform: uppercase; }
.guide-parts { font: 500 12.5px/1.4 var(--mono); color: var(--muted); }
.form-error { color: #ff8d80; font-weight: 600; margin: 0 0 14px; }
.sent { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 20px; }
.sent p { font-size: 15px; color: var(--muted); }
.sent b { color: var(--text); }
.sent textarea { font: 400 13px/1.5 var(--mono); margin-bottom: 14px; resize: vertical; }
.sent-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 0 0 36px; overflow: hidden; }
.footer-road { position: relative; height: 120px; margin-bottom: 36px; border-bottom: 3px dashed var(--line-2); }
.footer-road .bus-svg { position: absolute; bottom: -6px; width: 260px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
.footer-word { font: 900 clamp(44px, 5vw, 64px)/0.85 var(--display); text-transform: uppercase; color: var(--bus); margin: 0; }
.footer-script { font-size: 18px; margin: 8px 0 18px; color: var(--text); }
.footer-grid .muted { max-width: 30em; font-size: 15px; }
.footer-small { font: 400 12px/1.5 var(--mono); margin: 40px 0 0; padding-top: 20px; border-top: 1px solid var(--line); }

/* ---------- the bus drawing ---------- */
.bus-svg .bus-body { fill: var(--bus); }
.bus-svg .bus-glass { fill: var(--ink); }
.bus-svg .bus-word { font: 900 34px var(--display); text-transform: uppercase; fill: var(--ink); }
.bus-svg .bus-sub { font: 500 11px var(--mono); letter-spacing: 0.16em; fill: var(--ink); }
.bus-svg .bus-wheel circle { fill: #050605; stroke: #2c3528; stroke-width: 3; }
.bus-svg .bus-wheel .hub { fill: #8a9580; stroke: none; }
.bus-svg .bus-lamp { fill: #fff6b8; }
@keyframes drive { from { left: -280px; } to { left: 100%; } }
.bus-drive, .bus-bounce { will-change: transform; }
.bus-drive { animation: drive 22s linear infinite, bounce calc(var(--beat) * 2) ease-in-out infinite; }
.bus-bounce { animation: bounce calc(var(--beat) * 2) ease-in-out infinite; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

.nf { min-height: 60vh; }
.nf-bus { max-width: 520px; margin: 30px 0 40px; }

.img-missing { aspect-ratio: 4 / 3; background: repeating-linear-gradient(45deg, var(--ink-2) 0 12px, var(--ink-3) 12px 24px); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .nav { display: none; }
  .nav-toggle {
    display: inline-grid; place-items: center; width: 46px; height: 46px;
    background: transparent; border: 1px solid var(--line-2); color: var(--text); cursor: pointer;
  }
  .bars, .bars::before, .bars::after { display: block; width: 20px; height: 2px; background: currentColor; position: relative; transition: transform 0.2s, background-color 0.2s; }
  .bars::before, .bars::after { content: ""; position: absolute; left: 0; }
  .bars::before { top: -6px; }
  .bars::after { top: 6px; }
  .nav-open .bars { background: transparent; }
  .nav-open .bars::before { transform: translateY(6px) rotate(45deg); }
  .nav-open .bars::after { transform: translateY(-6px) rotate(-45deg); }
  .nav-open .nav {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--ink); border-bottom: 1px solid var(--line-2);
  }
  .nav-open .nav ul { flex-direction: column; gap: 0; padding: 8px var(--gutter) 20px; }
  .nav-open .nav a { display: block; padding: 16px 0; font: 900 30px/1 var(--display); border-bottom: 1px solid var(--line); opacity: 1; }
  .masthead-in { gap: 12px; }
  .packs { grid-template-columns: 1fr 1fr; }
  .pack-feature { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  body { font-size: 16.5px; }
  .hero-grid, .split, .poster, .book, .footer-grid { grid-template-columns: 1fr; }
  .split-rev .split-copy { order: 0; }
  .hero-photo { max-width: 460px; width: calc(100% - 16px); }
  .split-media { margin-bottom: 70px; }
  .frame-small { width: 48%; left: auto; right: -2%; bottom: -22%; }
  .rig-media { min-height: 380px; }
  .route { grid-template-columns: 1fr; margin-bottom: 40px; }
  .band-media picture { aspect-ratio: 4 / 3; }
  .band-media img { object-position: 45% 60%; }
  .route::before { top: 0; bottom: 0; left: 7px; right: auto; border-top: 0; border-left: 3px dashed var(--bus); }
  .stop { padding: 0 0 28px 42px; }
  .stop:last-child { padding-bottom: 0; }
  .packs { grid-template-columns: 1fr; }
  .h2 { max-width: none; }
  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 38vw; }
  .parties-head { grid-template-columns: 1fr; align-items: start; }
  .occasions { grid-template-columns: 1fr; grid-template-rows: none; }
  .occasion { aspect-ratio: 4 / 3; }
  .occasion-tall { grid-row: auto; aspect-ratio: 4 / 5; }
  .bento-big { grid-column: span 2; grid-row: span 1; }
  .bento-item:nth-child(5):last-child { grid-column: span 2; }
  .frame-pano { width: 64%; right: -2%; left: auto; bottom: -20%; }
}

@media (max-width: 520px) {
  .masthead-cta { display: none; }
  .brand-word { font-size: 24px; }
  .hero-title { font-size: clamp(50px, 15.5vw, 70px); }
  .hero-cta .btn { flex: 1 1 auto; justify-content: center; }
  .hero-meta li { padding: 9px 12px; }
  .stats b { font-size: 40px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .pack { padding: 24px 20px; }
  .rider dd { max-width: 58%; font-size: 14px; }
  .call { font-size: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .footer-road .bus-svg { left: 8%; }
}