/* ===========================================================================
 * run.css - Melbourne Airport Transfers token layer.
 *
 * The single source of colour, type, spacing and shape for the whole site.
 * Pages compose these tokens; they never hard-code a hex value or a font.
 *
 * Direction is derived from addisonlee.com/airport-transfers: black ground,
 * one loud accent, wide uppercase display type, sharp 2px corners, and
 * promises stated as numbers. Two deliberate departures from that reference:
 * the price appears in the hero, and a real suburb fare grid ships on the
 * page. See docs/BRAND-DIRECTION.md.
 *
 * Deliberately not the sister brand's palette. That one is white-ground with a
 * sky accent and Manrope. If a shared component starts looking like both
 * brands at once, that is a bug, not a convergence.
 * ======================================================================== */

:root {
  /* ── Colour ─────────────────────────────────────────────────────────── */
  --run-ink:          #0A0A0A;   /* hero and band grounds, body text on white */
  --run-ink-soft:     #1A1A1A;   /* raised surfaces on the black ground */
  --run-paper:        #FFFFFF;   /* content band ground */
  --run-paper-warm:   #FAFAF8;   /* alternate white band, table zebra */
  --run-accent:       #FFC800;   /* buttons, headline line two, icon strokes */
  --run-accent-dim:   #E0AE00;   /* accent hover / pressed */
  --run-accent-ink:   #0A0A0A;   /* text ON the accent, always near-black */
  --run-muted:        #6B6B6B;   /* secondary text on white */
  --run-muted-dark:   #A8A8A8;   /* secondary text on black */
  --run-hairline:     #E4E4E4;   /* borders and table rules on white */
  --run-hairline-dk:  #2A2A2A;   /* borders on black */
  --run-ok:           #1D7A3D;   /* confirmation states only */
  --run-warn:         #B4401A;   /* errors and hard warnings only */

  /* ── Type ───────────────────────────────────────────────────────────── */
  /* Display is Archivo Expanded; body is Archivo. One family, two widths.
     Never Manrope or Anton: those belong to the sister brand. */
  --run-font-display: 'Archivo Expanded', 'Archivo', system-ui, sans-serif;
  --run-font-body:    'Archivo', system-ui, -apple-system, sans-serif;

  --run-h1:      clamp(2.75rem, 7vw, 5.5rem);  /* 44 → 88px */
  --run-h2:      clamp(1.75rem, 3.5vw, 2.75rem);
  --run-h3:      1.25rem;
  --run-body:    1rem;
  --run-small:   0.8125rem;

  --run-display-tracking: 0.01em;   /* wide uppercase, just barely open */
  --run-display-leading:  0.95;     /* tight, so two lines lock together */

  /* ── Shape and space ────────────────────────────────────────────────── */
  --run-radius:     2px;            /* everything. buttons, cards, inputs. */
  --run-band:       clamp(3rem, 7vw, 6rem);   /* vertical band padding */
  --run-gutter:     clamp(1.25rem, 4vw, 3rem);
  --run-max:        1200px;
  --run-transition: 120ms ease;     /* colour and border only. no reveals. */
}

/* ── Base ──────────────────────────────────────────────────────────────── */

body {
  margin: 0;
  background: var(--run-paper);
  color: var(--run-ink);
  font-family: var(--run-font-body);
  font-size: var(--run-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  font-family: var(--run-font-display);
  text-transform: uppercase;
  letter-spacing: var(--run-display-tracking);
  line-height: var(--run-display-leading);
  font-weight: 600;
  margin: 0;
}
h1 { font-size: var(--run-h1); }
h2 { font-size: var(--run-h2); }
h3 { font-size: var(--run-h3); font-weight: 600; margin: 0; }

/* The signature: line two of the headline carries the accent. */
.run-h1-accent { color: var(--run-accent); display: block; }

/* ── Bands ─────────────────────────────────────────────────────────────── */
/* The page alternates black and white full-width bands. The accent is never
   used as a large fill: type, rules and buttons only. */

.run-band       { padding: var(--run-band) var(--run-gutter); }
.run-band-dark  { background: var(--run-ink); color: var(--run-paper); }
.run-band-dark h3      { color: var(--run-paper); }
.run-band-dark .run-sub { color: var(--run-muted-dark); }
.run-band-warm  { background: var(--run-paper-warm); }
.run-inner      { max-width: var(--run-max); margin: 0 auto; }
.run-sub        { color: var(--run-muted); font-size: 1.0625rem; max-width: 46ch; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
/* Solid accent, near-black uppercase label, trailing arrow, no shadow. */

.run-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.6em;
  background: var(--run-accent);
  color: var(--run-accent-ink);
  font-family: var(--run-font-body);
  font-size: var(--run-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  border-radius: var(--run-radius);
  cursor: pointer;
  transition: background var(--run-transition);
}
.run-btn:hover { background: var(--run-accent-dim); }

.run-btn-ghost {
  background: transparent;
  color: var(--run-paper);
  border: 1px solid var(--run-paper);
}
.run-btn-ghost:hover { background: var(--run-paper); color: var(--run-ink); }

/* ── Inputs ────────────────────────────────────────────────────────────── */

.run-field {
  width: 100%;
  padding: 0.9em 1em;
  font-family: var(--run-font-body);
  font-size: 1rem;
  color: var(--run-ink);
  background: var(--run-paper);
  border: 1px solid var(--run-hairline);
  border-radius: var(--run-radius);
  transition: border-color var(--run-transition);
}
.run-field:focus {
  outline: 2px solid var(--run-accent);
  outline-offset: 0;
  border-color: transparent;
}
.run-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--run-muted);
  margin-bottom: 0.35em;
}

/* ── Cards ─────────────────────────────────────────────────────────────── */
/* Hairline borders, never shadows. */

.run-card {
  background: var(--run-paper);
  border: 1px solid var(--run-hairline);
  border-radius: var(--run-radius);
  padding: 1.5rem;
}
.run-band-dark .run-card {
  background: var(--run-ink-soft);
  border-color: var(--run-hairline-dk);
}

/* ── Price ─────────────────────────────────────────────────────────────── */
/* Fares are the argument of this brand, so they get the accent and the
   display face. Never hand-typed: every figure is generated from the shared
   pricing config. */

.run-price {
  font-family: var(--run-font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--run-ink);
}
.run-band-dark .run-price { color: var(--run-accent); }
.run-price-from {
  font-family: var(--run-font-body);
  font-size: var(--run-small);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--run-muted);
}

/* ── Fare table ────────────────────────────────────────────────────────── */
/* Wide content scrolls inside itself; the page body never scrolls sideways. */

.run-table-scroll { overflow-x: auto; }
.run-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
/* A 42-row fare table scrolls past its own header, and a column of bare dollar
   figures means nothing once you cannot see which vehicle it belongs to. The
   header sticks under the site header instead. */
.run-table th {
  position: sticky;
  top: 3.25rem;
  z-index: 5;
  background: var(--run-paper);
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--run-muted);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--run-hairline);
  white-space: nowrap;
}
.run-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--run-hairline);
}
.run-table tbody tr:nth-child(even) { background: var(--run-paper-warm); }
/* The warm band already tints the page, so the header must match it there or it
   reads as a floating white bar. */
.run-band-warm .run-table th { background: var(--run-paper-warm); }

/* ── Asking about a quote ──────────────────────────────────────────────── */
/* Quiet on purpose. It sits under the pay button, and anything that competes
   with Pay for attention is working against the page. */

.offer-ask {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--run-hairline);
}
.offer-ask-h { font-size: 1rem; margin: 0 0 0.75rem; }
.offer-ask textarea {
  width: 100%;
  min-height: 5.5rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--run-hairline);
  border-radius: 10px;
  font: inherit;
  resize: vertical;
}
.offer-ask .run-btn { margin-top: 0.75rem; }

.offer-thread { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.th-msg {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  margin-bottom: 0.5rem;
  max-width: 90%;
}
/* Theirs on the left, ours on the right, so a thread can be read at a glance
   without labels doing all the work.

   The colours are stated on BOTH sides rather than inherited. This page is dark
   and the light bubble inherited white text, so a customer's own message was
   white on near-white: present, and unreadable. */
.th-you { background: var(--run-paper-warm); color: var(--run-ink); }
.th-you .th-who { color: #6b6b6b; }
.th-ops { background: rgba(255, 200, 0, 0.14); color: var(--run-paper); margin-left: auto; }
.th-who {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--run-muted);
}
.th-text { white-space: pre-wrap; line-height: 1.55; }

/* ── Airport meeting points ────────────────────────────────────────────── */
/* Read in a baggage hall, one-handed, on a phone. Two columns on a laptop,
   stacked on a phone, and the instruction is the part that gets the space. */

.mp-jumps { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.mp-jump {
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.875rem;
  text-decoration: none;
  color: inherit;
}
.mp-jump:hover { border-color: currentColor; }

.mp-table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.mp-table td {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--run-hairline);
  vertical-align: baseline;
}
.mp-table tr:last-child td { border-bottom: 0; }
.mp-t { width: 12rem; padding-right: 1.5rem; }
/* The terminal code is the thing you scan for, so it stays the accent rather
   than the default link colour, which reads as a stray blue on this ground. */
.mp-t a { font-weight: 600; text-decoration: none; color: var(--run-accent); }
.mp-t a:hover { text-decoration: underline; }
.mp-who, .mp-wait {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--run-muted);
}
.mp-who { margin-top: 0.15rem; }
.mp-wait { margin-top: 0.5rem; }
.mp-where { line-height: 1.6; }

@media (max-width: 640px) {
  .mp-table td { display: block; border-bottom: 0; padding: 0.35rem 0; }
  .mp-table tr { display: block; padding: 1rem 0; border-bottom: 1px solid var(--run-hairline); }
  .mp-t { width: auto; padding-right: 0; }
}

/* ── Trust strip ───────────────────────────────────────────────────────── */
/* Sits under the hero. Every item carries a number or a fact, never an
   adjective. */

.run-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: var(--run-small);
  letter-spacing: 0.04em;
  color: var(--run-muted-dark);
}
.run-trust li { list-style: none; }

/* ── Accessibility ─────────────────────────────────────────────────────── */

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--run-accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── Why there is no accent field behind type ──────────────────────────────
 * A solid yellow panel with black type knocked out of it, sitting on a black
 * ground, is the Pornhub lockup. It does not matter that the hue differs or
 * that the intent was airport wayfinding: the construction is read before the
 * detail is. Do not reintroduce it, in the wordmark or in a headline.
 * Emphasis on this brand is carried by accent-coloured type, not by a field. */

/* ── The car, moving ──────────────────────────────────────────────────────
   A portrait clip between "what sets us apart" and the questions. It is
   muted, looped and silent by design: it carries nothing a reader could
   miss by ignoring it, so it is marked aria-hidden and taken out of the tab
   order rather than announced. preload="none" keeps it off the critical
   path and the poster holds the frame until someone actually scrolls here,
   so it costs a visitor nothing who never reaches this far down. */
.film-band { display: grid; gap: 2rem; align-items: center; }
.film-vid  { width: 100%; max-width: 300px; height: auto; aspect-ratio: 9 / 16;
             margin: 0 auto; display: block; object-fit: cover;
             border-radius: 18px; background: #000; }
.film-copy { max-width: 34rem; margin: 0 auto; text-align: center; }
.film-copy p:last-child { margin-bottom: 0; }
@media (min-width: 820px) {
  .film-band { grid-template-columns: 300px 1fr; gap: 3.5rem; }
  .film-copy { text-align: left; margin: 0; }
}

/* ── After payment ──────────────────────────────────────────────────────────
   The form is hidden entirely once the card is submitted. Previously the
   success line appeared UNDER a still-live "Pay $75 and book" button, which
   reads as though nothing happened and invites a second payment. */
.bookout { padding: 8px 0 24px; }
.bookout h2 { margin: 0 0 6px; font-size: 26px; letter-spacing: -0.02em; }
.bookout .muted { color: var(--run-muted, #86868b); margin: 0 0 18px; }
.bookout-work { text-align: center; padding: 48px 20px; }
.spinner {
  width: 34px; height: 34px; margin: 0 auto 20px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.18); border-top-color: var(--run-accent, #FFC800);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Somebody who has just been charged should not be shown a moving object they
   cannot stop if their system asks for less motion. */
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

.bookout-done { padding: 8px 0; }
.tick {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--run-accent, #FFC800); color: #0A0A0A; font-size: 24px; font-weight: 700;
  margin-bottom: 16px;
}
.doneList { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0 0 20px; }
.doneList dt { color: var(--run-muted, #86868b); white-space: nowrap; }
.doneList dd { margin: 0; font-weight: 600; }
.doneList .total { font-size: 18px; }
.doneNext { margin: 0 0 22px; padding: 14px 16px; border-radius: 10px;
            background: rgba(255,255,255,.05); line-height: 1.5; }
.doneActions { display: flex; gap: 10px; flex-wrap: wrap; }
.doneActions .run-btn { flex: 1 1 auto; text-align: center; text-decoration: none; }
.run-btn.ghost { background: transparent; color: inherit; border: 1px solid currentColor; }

/* Two hero buttons: the second is quieter on purpose. Someone ready to book
   should not have to pick the right one of two equal-looking options, and
   someone still deciding needs the price link to exist without competing. */
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.run-btn-lg.ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.45); }
.run-btn-lg.ghost:hover { border-color: #fff; }
@media (max-width: 520px) { .hero-cta .run-btn-lg { flex: 1 1 100%; text-align: center; } }

/* ── /offer/ — paying a quote we sent ───────────────────────────────────────
   No navigation into the rest of the site. Somebody arriving here has already
   decided; every other link is a way to leave without paying. */
.offer-sec { padding: 40px 0 64px; }
.offer-wrap { max-width: 560px; }
.offer-state { text-align: center; padding: 56px 20px; }
.offer-eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .12em;
                 text-transform: uppercase; color: var(--run-accent, #FFC800); }
.offer-h { margin: 0 0 6px; font-size: 30px; letter-spacing: -0.02em; }
.offer-total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 22px 0 6px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.16);
  border-bottom: 1px solid rgba(255,255,255,.16); font-size: 17px;
}
.offer-total strong { font-size: 30px; letter-spacing: -0.02em; }
.offer-inc { margin: 12px 0 0; }
/* The accept-by is stated plainly, never in red. It is a fact about the quote,
   not a countdown designed to rush somebody into a card field. */
.offer-expiry { margin: 12px 0 24px; color: var(--run-muted, #86868b); font-size: 14px; }
.offer-expiry a { color: var(--run-accent, #FFC800); }
.offer-form { margin-top: 8px; }
.offer-form .run-btn-lg { width: 100%; margin-top: 14px; }
.cardel { padding: 14px; border: 1px solid rgba(255,255,255,.22); border-radius: 10px;
          background: rgba(255,255,255,.04); }

/* ── Short-notice verification ──────────────────────────────────────────────
   Inline under the button they just pressed, not a dialog. A dialog on a phone
   hides the form they filled in and reads as though the page navigated away
   from their work, which is when people close the tab. */
.verifybox { margin-top: 20px; padding: 18px; border-radius: 12px;
             background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); }
.verify-p { margin: 0 0 14px; color: var(--run-muted, #86868b); font-size: 14px; line-height: 1.5; }
.verifybox input {
  width: 100%; height: 52px; margin-bottom: 12px; padding: 0 16px;
  border: 1px solid rgba(255,255,255,.22); border-radius: 10px;
  background: rgba(255,255,255,.04); color: inherit;
  /* Wide tracking and a big face: this is read off a lock screen and typed
     with a thumb, often one-handed at an airport. */
  font-size: 22px; letter-spacing: .3em; text-align: center;
}
.verifybox .run-btn { width: 100%; }
.verify-err { margin: 12px 0 0; color: #ff6b6b; font-weight: 600; font-size: 14px; }