:root {
  color-scheme: light;
  --bg: #F2F3F4;
  --surface: #FFFFFF;
  --ink: #15171A;
  --text-muted: #4A4F55;
  --text-dim: #6B7075;
  --text-faint: #A3A8AD;
  --text-faint-alt: #9BA1A6;
  --border: #D8DBDE;
  --dot-hero: #CFD3D7;
  --dot-booking: #E1E4E6;
  --accent: #D62111;
  --accent-soft: rgba(214, 33, 17, 0.12);
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --sans: 'Archivo', system-ui, -apple-system, sans-serif;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
}

img { max-width: 100%; }
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

input, textarea, button { font: inherit; color: inherit; }
input::placeholder, textarea::placeholder { color: var(--text-dim); }

.accent { color: var(--accent); }
.accent-text { color: var(--accent); }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 16px clamp(16px, 4vw, 56px);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.brand-group {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.wordmark {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.wordmark:hover { color: var(--ink); }

.brand-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.nav-status {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nav-unit { color: var(--text-dim); }

.fleet-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-dim);
}

.fleet-dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  display: inline-block;
}

.btn-nav {
  background: var(--accent);
  color: #FFFFFF;
  padding: 10px 16px;
  letter-spacing: 0.14em;
}

.btn-nav:hover { background: var(--ink); color: #FFFFFF; }


/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: clamp(14px, 2vw, 30px) clamp(16px, 4vw, 56px) clamp(36px, 4.5vw, 68px);
  border-bottom: 1px solid var(--border);
}

.hero-dotgrid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--dot-hero) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.5;
  pointer-events: none;
}

.hero-inner { position: relative; }

.hero-kicker-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(10px, 1.4vw, 20px);
}

.hero-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.kicker-rule {
  width: 28px;
  height: 2px;
  background: var(--accent);
  display: inline-block;
  flex: none;
}

.kicker-label {
  font-family: var(--mono);
  font-size: clamp(9px, 0.8vw, 10.5px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.hero-fig-label {
  font-family: var(--mono);
  font-size: clamp(8px, 0.72vw, 10px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-right: 0.4em;
}

.hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  --h1-size: clamp(27px, 4.4vw, 62px);
  --sub-size: clamp(14px, 1.3vw, 16px);
  gap: clamp(24px, 3.4vw, 56px);
  align-items: start;
  margin-top: clamp(16px, 2.2vw, 40px);
}

.hero-headline {
  font-weight: 700;
  font-size: var(--h1-size);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}

.hero-sub {
  max-width: 54ch;
  font-size: var(--sub-size);
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0 0 26px;
  text-wrap: pretty;
}

/* Equal box tops do not give equal-looking text. Archivo sets its capitals
   0.194em below the font's ascender, and each element adds half its own
   leading above that: (line-height - 1.178em) / 2, where 1.178em is the
   font's ascent plus descent. So the headline's capitals sit 0.095em below
   its box and the paragraph's sit 0.455em below its own. Those ems differ by
   a factor of four, so the gap is plainly visible. Pull the paragraph up by
   exactly that difference and the two first lines start on the same pixel at
   every size. Only while the columns are side by side: 730px is where the
   grid stops fitting them both, and stacked there is nothing to align to. */
@media (min-width: 730px) {
  .hero-sub {
    margin-top: calc(0.095 * var(--h1-size) - 0.455 * var(--sub-size));
  }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}


/* ---------- buttons ---------- */
.btn-primary,
.btn-outline {
  display: inline-block;
  padding: 16px 28px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.btn-primary { background: var(--accent); color: #FFFFFF; }

/* the one action most visitors should take, so it outweighs its neighbour */
.btn-primary--lg {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 20px 34px;
  font-size: clamp(11px, 1.05vw, 13px);
  letter-spacing: 0.18em;
}

.btn-arrow {
  transition: transform 0.25s ease;
}

.btn-primary--lg:hover .btn-arrow { transform: translateX(4px); }
.btn-primary:hover { background: var(--ink); color: #FFFFFF; }

.btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-outline:hover { background: var(--ink); color: #FFFFFF; }

/* ---------- hero queue ----------
   Six cut-out figures standing on one shared ground line. Nothing is cropped:
   each image IS the figure (tight-cropped to its alpha bounds), sized by height
   with width:auto, so the natural silhouette width is what spaces the line out.
   Every transform below has exactly one owner so they can never fight:
     .q-fig   -> arrival (translateY + opacity)
     .q-body  -> pointer dolly (translateX, set from JS via --px)
     img      -> idle sway (rotate about the feet)
*/
.queue-stage {
  --stage-h: clamp(250px, 31vw, 470px);
  --label-zone: clamp(20px, 2.1vw, 30px);
  position: relative;
  width: 100%;
  /* headroom for the unit's callout, which sits above the tallest head */
  padding-top: clamp(40px, 4.4vw, 70px);
}

.queue-cluster {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(8px, 3vw, 64px);
  height: var(--stage-h);
  padding-bottom: var(--label-zone);
  /* shifts the line toward the entrance at the right, so the slack collects on
     the left under "line continues" and reads as a queue running off-frame */
  padding-left: clamp(0px, 6vw, 110px);
  box-sizing: content-box;
}

.q-fig {
  position: relative;
  margin: 0;
  flex: 0 0 auto;
  height: calc(var(--h) * 100%);
  animation: q-arrive 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: calc(var(--d) * 0.5s);
}

@keyframes q-arrive {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* contact shadow — stays put while the figure pivots above it, because a
   standing person rotates about the ankles and the feet never leave the ground */
.q-fig::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: clamp(52px, 7.5vw, 120px);
  height: clamp(9px, 1.2vw, 18px);
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    rgba(21, 23, 26, 0.42) 0%,
    rgba(21, 23, 26, 0.20) 42%,
    rgba(21, 23, 26, 0) 74%);
  z-index: -1;
  pointer-events: none;
}

.q-body {
  display: block;
  height: 100%;
  transform: translate3d(var(--px, 0px), 0, 0);
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.q-body img {
  display: block;
  height: 100%;
  width: auto;
  transform-origin: 50% 100%;
  animation: q-sway 4.6s ease-in-out infinite;
}

@keyframes q-sway {
  0%, 100% { transform: rotate(calc(var(--sway, 0.6deg) * -1)) translateY(0); }
  50% { transform: rotate(var(--sway, 0.6deg)) translateY(-1.5px); }
}

/* impatience rises toward the door: the man at the front fidgets most,
   the two at the back have settled in. The unit does none of it. */
.q-fig:nth-child(1) .q-body img { --sway: 0.62deg; animation-duration: 5.2s; animation-delay: -1.1s; }
.q-fig:nth-child(2) .q-body img { --sway: 1.00deg; animation-duration: 4.1s; animation-delay: -2.7s; }
.q-fig:nth-child(4) .q-body img { --sway: 0.86deg; animation-duration: 4.7s; animation-delay: -0.6s; }
.q-fig:nth-child(5) .q-body img { --sway: 0.55deg; animation-duration: 5.7s; animation-delay: -3.4s; }
.q-fig:nth-child(6) .q-body img { --sway: 1.10deg; animation-duration: 3.8s; animation-delay: -1.9s; }

.q-index {
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--label-zone) + 5px);
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: clamp(8px, 0.72vw, 10px);
  letter-spacing: 0.14em;
  color: var(--text-faint);
}

.q-index--accent { color: var(--accent); }

/* ---- the unit ---- */
.q-fig--unit {
  animation-duration: 1s;
  animation-delay: 0.5s;
}

/* it holds no sway animation at all; the only thing that moves is the
   indicator dot on its tag */
.q-fig--unit .q-body img { animation: none; }

/* the ground segment it is occupying on your behalf */
.q-fig--unit::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: calc(100% + clamp(14px, 1.8vw, 32px));
  height: 2px;
  transform: translateX(-50%);
  background: var(--accent);
}

.q-callout {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  animation: q-callout-in 0.5s ease both;
  animation-delay: 1.25s;
}

@keyframes q-callout-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.q-callout-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: clamp(9px, 0.82vw, 11px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.q-callout-tag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: q-live 2.4s ease-in-out infinite;
}

@keyframes q-live {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214, 33, 17, 0.45); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(214, 33, 17, 0); }
}

.q-callout-sub {
  font-family: var(--mono);
  font-size: clamp(7.5px, 0.66vw, 9.5px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.q-callout-stem {
  width: 1px;
  height: clamp(12px, 1.6vw, 24px);
  background: var(--accent);
  margin-top: 3px;
}

/* ---- the ground ---- */
.queue-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--label-zone);
  border-top: 1px solid var(--ink);
  pointer-events: none;
}

.queue-ground::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5px;
  background: repeating-linear-gradient(to right,
    var(--border) 0 1px, transparent 1px 28px);
}

.queue-ground-label {
  position: absolute;
  top: 9px;
  font-family: var(--mono);
  font-size: clamp(8px, 0.72vw, 10px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.queue-ground-label--back { left: 0; }
.queue-ground-label--door { right: 0; color: var(--text-dim); }

.queue-ground-label--door::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 100%;
  margin-bottom: 4px;
  width: 1px;
  height: clamp(16px, 2vw, 30px);
  background: var(--ink);
}

/* below this the line no longer fits six abreast, so the back two walk
   off-frame — which is what "line continues" already promises */
@media (max-width: 640px) {
  .q-fig:nth-child(1),
  .q-fig:nth-child(6) { display: none; }
  /* at this width they would sit on top of the position numbers */
  .queue-ground-label { display: none; }
  /* with four figures there is no slack left to spend on shifting the line */
  .queue-cluster { padding-left: 0; }
  /* the four remaining silhouettes are ~1.18 stage-heights wide in total plus
     three 8px gaps, so this is the tallest the line can be and still fit the
     screen with room to spare — it has to track width, not sit at a fixed px */
  .queue-stage { --stage-h: min(calc(82vw - 60px), 272px); }
}

/* ---------- shared section bits ---------- */
.section-title {
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0;
}

.eyebrow-mono {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* present for assistive tech and search/LLM crawlers; the design intentionally
   shows no heading here, but the section still needs one in the document */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- manifesto ---------- */
.manifesto {
  padding: clamp(48px, 7vw, 104px) clamp(16px, 4vw, 56px);
}

.trait-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.trait-card {
  background: var(--surface);
  padding: 28px 24px 32px;
  min-width: 0;
}

.trait-index {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--text-faint);
}

.trait-title {
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 14px 0 14px;
}

.trait-body {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
}

/* ---------- how it works ---------- */
.how-section {
  position: relative;
  padding: clamp(48px, 7vw, 104px) clamp(16px, 4vw, 56px);
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section-head-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: clamp(30px, 4vw, 52px);
}

.how-title { font-size: clamp(28px, 3.6vw, 48px); }

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: clamp(20px, 2.6vw, 36px);
}

.step-card {
  min-width: 0;
  border-top: 2px solid var(--ink);
  padding-top: 18px;
}

.step-card--accent { border-top-color: var(--accent); }

.step-num {
  font-weight: 700;
  font-size: 58px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--ink);
}

.step-num--accent { -webkit-text-stroke-color: var(--accent); }

.step-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 20px 0 12px;
}

.step-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
}

/* ---------- where it works ---------- */
.where-section {
  padding: clamp(48px, 7vw, 104px) clamp(16px, 4vw, 56px);
}

.where-title { font-size: clamp(28px, 3.6vw, 48px); margin: 0 0 clamp(28px, 4vw, 48px); }

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(16px, 2vw, 28px);
}

.category-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 26px 24px 30px;
  min-width: 0;
}

.category-title {
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1.15;
  margin: 0;
}

.category-divider {
  border-top: 1px solid var(--border);
  margin: 16px 0;
  height: 1px;
}

.category-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
}

/* ---------- faq ---------- */
.faq-section {
  padding: clamp(48px, 7vw, 104px) clamp(16px, 4vw, 56px);
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.faq-title { font-size: clamp(28px, 3.6vw, 48px); }

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(1px, 0.2vw, 1px);
  background: var(--border);
  border: 1px solid var(--border);
}

.faq-card {
  background: var(--surface);
  padding: clamp(24px, 3vw, 32px);
  min-width: 0;
}

.faq-num {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--accent);
}

.faq-q {
  font-weight: 700;
  font-size: clamp(17px, 1.8vw, 20px);
  letter-spacing: -0.015em;
  margin: 10px 0 12px;
}

.faq-a {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
}

/* ---------- booking ---------- */
.booking-section {
  position: relative;
  padding: clamp(48px, 7vw, 104px) clamp(16px, 4vw, 56px);
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.booking-dotgrid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--dot-booking) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

.booking-head {
  position: relative;
  max-width: 46ch;
  margin-bottom: clamp(28px, 3.5vw, 48px);
}

.booking-lede {
  margin: 16px 0 0;
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.7;
  color: var(--text-muted);
}

.booking-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

/* Below this the two cards cannot sit side by side, so the divider lies flat
   between them instead of standing between columns. */
@media (min-width: 900px) {
  .booking-grid { grid-template-columns: 1fr auto 1fr; }
}

/* An explicit either/or, so nobody reads the two cards as steps one and two. */
.booking-or {
  position: relative;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.booking-or span {
  background: var(--surface);
  padding: 10px 14px;
  border: 1px solid var(--border);
  position: relative;
  z-index: 1;
}

.booking-or::before {
  content: '';
  position: absolute;
  background: var(--border);
  inset: 50% 0 auto;
  height: 1px;
}

@media (min-width: 900px) {
  .booking-or { padding: 0 clamp(20px, 2.6vw, 40px); }
  .booking-or::before { inset: 0 50% auto; width: 1px; height: 100%; }
}

@media (max-width: 899px) {
  .booking-or { padding: 26px 0; }
}

.booking-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top-width: 5px;
  border-top-style: solid;
  padding: clamp(24px, 3vw, 40px);
  transition: opacity 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

/* The two sides are told apart before a word is read: the one most visitors
   want carries the accent the rest of the page reserves for the unit, the
   other is plain ink. */
.booking-card--you { border-top-color: var(--accent); }
.booking-card--biz { border-top-color: var(--ink); }

/* The hero's buttons land on one of these rather than on a card, so the
   question above stays on screen. A flat offset rather than a vh one, because
   the thing being cleared is the sticky header, whose height depends on
   whether its own contents have wrapped, not on the viewport. */
.booking-anchor {
  display: block;
  height: 0;
  scroll-margin-top: 175px;
}

/* Arriving from a button: light up the card that button was about, and let the
   other recede, so there is no question which one to fill in. */
.booking-section:has(#for-you:target) .booking-card--you,
.booking-section:has(#for-restaurants:target) .booking-card--biz {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  animation: booking-attention 1.9s ease 0.25s 2;
}

@keyframes booking-attention {
  0%, 100% { box-shadow: 0 0 0 3px var(--accent-soft); }
  40% { box-shadow: 0 0 0 9px rgba(214, 33, 17, 0.16); }
}

.booking-section:has(#for-you:target) .booking-card--biz,
.booking-section:has(#for-restaurants:target) .booking-card--you { opacity: 0.55; }

.booking-card:hover { opacity: 1; }

/* who each side is for, stated before anything else on the card */
.booking-role {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.booking-role-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: var(--ink);
  padding: 5px 10px;
}

.booking-card--you .booking-role-tag { background: var(--accent); }

.booking-role-note {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.booking-points {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  font-size: clamp(13px, 1.2vw, 14.5px);
  line-height: 1.6;
  color: var(--text-muted);
}

.booking-points li {
  position: relative;
  padding-left: 20px;
}

.booking-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 1px;
  background: var(--ink);
}

/* pins both submit buttons to the same line however unevenly the two forms fill */
.booking-foot { margin-top: auto; padding-top: clamp(24px, 3vw, 36px); }

.booking-title {
  font-weight: 700;
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 22px 0 26px;
  line-height: 1;
}

.booking-fields {
  display: grid;
  gap: 22px;
}

.field {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.field-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.field input,
.field textarea {
  /* without this an input keeps its ~20ch intrinsic width and refuses to
     shrink inside the grid track, pushing the page wider than the phone */
  width: 100%;
  min-width: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  padding: 9px 2px;
  font-size: 15px;
  outline: none;
  font-family: var(--sans);
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  border-bottom: 1px solid var(--accent);
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
  gap: 22px;
}

.btn-submit-solid,
.btn-submit-outline {
  margin-top: 0;
  width: 100%;
  padding: 17px 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  border: 0;
}

.btn-submit-solid { background: var(--accent); color: #FFFFFF; }
.btn-submit-solid:hover { background: var(--ink); }

.btn-submit-outline { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-submit-outline:hover { background: var(--ink); color: #FFFFFF; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--ink);
  color: #FFFFFF;
  padding: clamp(40px, 5vw, 72px) clamp(16px, 4vw, 56px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 32px;
  align-items: end;
}

.footer-headline {
  font-weight: 700;
  font-size: clamp(22px, 2.8vw, 36px);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height: 1.05;
  max-width: 24ch;
}

.footer-meta {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 2.1;
  color: var(--text-faint-alt);
  justify-self: end;
  text-align: right;
  max-width: 100%;
  padding-right: 0.4em;
}

.footer-meta .accent-text { color: var(--accent); }

/* ---------- scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .q-fig,
  .q-body img,
  .q-callout,
  .q-callout-tag::before {
    animation: none;
  }
  .q-fig { opacity: 1; }
  .q-body { transition: none; }
}

@media (max-width: 640px) {
  .nav-status .nav-unit { display: none; }
  .footer-meta { justify-self: start; text-align: left; }
}

/* ---------- booking: the pricing ask ---------- */
.booking-intro {
  margin: 14px 0 28px;
  font-size: clamp(13px, 1.2vw, 14.5px);
  line-height: 1.7;
  color: var(--text-muted);
  text-wrap: pretty;
}

.field--price {
  padding: 16px;
  margin-top: 4px;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
}

.field--price .field-label { color: var(--accent); }

.field--price input {
  border-bottom-color: var(--accent);
}

.field-hint {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.booking-after {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}