@font-face {
  font-family: 'Inter';
  src: url('../vendor/fonts/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

/* Brand: TransferKings International.
   Sampled straight out of the client's mock-up rather than guessed: the chrome is a deep navy
   black #010E1F, raised dark surfaces such as the search card are #1A2738, and the gold is
   #DAA94F. The gold is too light for text on white, so --accent-2 is the darkened version used
   for words while --gold stays for fills with dark text on top. */
:root {
  --ink: #010e1f;
  --ink-2: #2b3644;
  --muted: #5d6874;
  --faint: #8a939e;
  --line: #e3e6ea;
  --line-2: #eef1f4;
  --bg: #ffffff;
  --bg-2: #f6f8fa;
  --bg-3: #eceff3;
  --navy: #010e1f;
  --navy-2: #1a2738;
  --navy-3: #26364a;
  --brand: #010e1f;
  --brand-2: #1a2738;
  --brand-ink: #ffffff;
  --accent: #daa94f;
  --accent-2: #8a6a12;
  --gold: #daa94f;
  --gold-2: #c9983e;
  --gold-soft: #f7eed6;
  --good: #0e7a4d;
  --good-bg: #e6f6ee;
  --warn: #8a6a12;
  --warn-bg: #fdf6e3;
  --bad: #b42318;
  --bad-bg: #fdeceb;
  --info-bg: #f2f4f7;
  --radius: 10px;
  --radius-s: 8px;
  --radius-l: 14px;
  --shadow-1: 0 1px 2px rgba(1, 14, 31, .06), 0 1px 3px rgba(1, 14, 31, .04);
  --shadow-2: 0 4px 14px rgba(1, 14, 31, .09), 0 1px 3px rgba(1, 14, 31, .05);
  --shadow-3: 0 18px 44px rgba(1, 14, 31, .22);
  --head: 62px;
  --wrap: 1240px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.2; letter-spacing: -.02em; font-weight: 700; }
h1 { font-size: 2.1rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 .8em; }
a { color: var(--brand-2); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
svg { flex: none; }
input, select, textarea, button { font: inherit; color: inherit; }
hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap-s { max-width: 760px; }
.row { display: flex; gap: 12px; align-items: center; }
.row-t { align-items: flex-start; }
.col { display: flex; flex-direction: column; gap: 12px; }
.gap-s { gap: 6px; }
.gap-l { gap: 20px; }
.wrapflex { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
/* A flex item shrinks all the way to its longest word before the row ever wraps, so a heading
   beside a search box ends up as a column of single words instead of dropping the box onto the
   next line. Giving the growing item a full line on a phone makes the row stack the way it
   looks like it should, everywhere this pattern is used. */
@media (max-width: 640px) {
  .row.wrapflex > .grow { flex: 1 1 100%; }
}
.right { margin-left: auto; }
.center { text-align: center; }
.hide { display: none !important; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: .82rem; }
.tiny { font-size: .74rem; }
.strong { font-weight: 650; }
.nowrap { white-space: nowrap; }
.mt { margin-top: 16px; }
.mt-l { margin-top: 28px; }
.mb { margin-bottom: 16px; }
/* padding-block, not the shorthand. `class="wrap section"` puts both rules on one element, and
   the shorthand `padding: 52px 0` silently wiped the 20px side gutter .wrap had just set, so
   the account, booking and quote pages ran flush into the edge of the phone. */
.section { padding-block: 52px; }
.section-2 { background: var(--bg-2); }
.eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-2); }
.lead { font-size: 1.05rem; color: var(--muted); max-width: 62ch; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 10px; z-index: 100; background: #fff; padding: 8px 14px; border-radius: 8px; box-shadow: var(--shadow-2); }

/* ---------- header ----------
   Dark bar with gold accents, following the client's mock-up rather than the light bar the
   first build used. */
.head {
  position: sticky; top: 0; z-index: 40; height: var(--head);
  background: var(--ink); border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.head .wrap { display: flex; align-items: center; gap: 14px; height: 100%; }
.head .logo, .head .right { flex: none; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.12rem; letter-spacing: -.03em; color: #fff; }
.logo:hover { text-decoration: none; }
.head .logo-text b { color: #fff; font-size: 1.02rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; line-height: 1.05; }
.head .logo-text b em { color: var(--gold); font-style: normal; }
.head .logo-text span { color: rgba(255, 255, 255, .45); font-size: .5rem; font-weight: 500; letter-spacing: .19em; margin-top: 3px; }
.head .logo-mark { background: transparent; padding: 0; width: 34px; height: 34px; }
.head .logo { gap: 11px; }
.head .nav a { color: rgba(255, 255, 255, .86); }
.head .nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.head .nav a.on { background: rgba(222, 184, 73, .16); color: var(--gold); }
.head .btn-g { color: rgba(255, 255, 255, .8); }
.head .btn-g:hover { background: rgba(255, 255, 255, .1); }
.head .head-auth { gap: 9px; }
.head .head-auth .btn { background: transparent; border-color: rgba(255, 255, 255, .3); color: #fff; padding: 8px 17px; font-size: .84rem; font-weight: 600; border-radius: var(--radius-s); }
.head .head-auth .btn:hover { background: rgba(255, 255, 255, .12); }
.head .head-auth .btn-p { background: var(--gold); border-color: var(--gold); color: #17110a; font-weight: 700; }
.head .head-auth .btn-p:hover { background: var(--gold-2); border-color: var(--gold-2); color: #17110a; }
.head .avatar { background: var(--gold); color: #17110a; }
.badge-new { background: var(--gold); color: #17110a; font-size: .55rem; font-weight: 800; letter-spacing: .1em; padding: 2px 6px; border-radius: 4px; margin-left: 6px; vertical-align: middle; line-height: 1.5; }
/* A hairline between the pickers and the buttons, as in the mock-up. */
.head-divider { width: 1px; height: 22px; background: rgba(255, 255, 255, .16); margin: 0 4px; }

/* language and currency pickers */
.head-pick { display: flex; align-items: center; gap: 2px; }
.head-pick select {
  appearance: none; background: transparent; border: 0; color: rgba(255, 255, 255, .8);
  font-size: .82rem; font-weight: 600; padding: 6px 16px 6px 8px; border-radius: 7px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%23ffffff' stroke-opacity='.6' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 4px center;
}
.head-pick select:hover { background-color: rgba(255, 255, 255, .1); color: #fff; }
.head-pick option { color: var(--ink); background: #fff; }
@media (max-width: 1180px) { .head-pick { display: none; } }
.logo-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--brand); display: grid; place-items: center; padding: 5px; }
.logo-mark img { width: 100%; height: 100%; object-fit: contain; }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-text b { font-size: 1.02rem; font-weight: 800; letter-spacing: -.02em; }
.logo-text span { font-size: .56rem; font-weight: 600; letter-spacing: .22em; color: var(--muted); text-transform: uppercase; }
/* The mock-up centres the navigation rather than butting it against the logo. min-width:0
   matters: without it the links refuse to shrink and slide under the logo. */
.nav { display: flex; gap: 2px; flex: 1 1 auto; min-width: 0; justify-content: center; overflow: hidden; }
.nav a { display: inline-flex; align-items: center; gap: 5px; padding: 8px 13px; border-radius: 8px; color: var(--ink-2); font-weight: 500; font-size: .875rem; white-space: nowrap; }
.nav .caret { opacity: .55; }
@media (max-width: 1320px) { .nav a { padding: 8px 9px; font-size: .84rem; } }
.nav a:hover { background: var(--bg-3); text-decoration: none; }
.nav a.on { color: var(--brand); background: var(--info-bg); }
/* Scoped to .head deliberately: a bare .burger rule loses to .btn further down the file,
   which left the button on screen doing nothing on a desktop. */
.head .burger { display: inline-flex; }
.nav-auth { display: none; }

/* ---------- explore drawer ---------- */
.drawer-bg { position: fixed; inset: 0; background: rgba(18, 19, 21, .5); z-index: 60; animation: fade .15s; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 92vw); z-index: 61;
  background: #fff; box-shadow: var(--shadow-3); overflow-y: auto;
  animation: slidein .2s ease-out; display: flex; flex-direction: column;
}
@keyframes slidein { from { transform: translateX(100%); } }
.drawer-h { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; z-index: 2; }
.drawer-b { padding: 6px 12px 22px; }
.drawer-g { padding: 14px 6px 6px; }
.drawer-g > h4 { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--accent-2); margin-bottom: 4px; padding: 0 8px; }
.drawer a, .drawer button.drawer-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 11px 10px; border: 0; background: none; border-radius: var(--radius-s);
  font-size: .94rem; font-weight: 550; color: var(--ink); cursor: pointer;
}
.drawer a:hover, .drawer button.drawer-item:hover { background: var(--bg-2); text-decoration: none; }
.drawer a.on { background: var(--info-bg); color: var(--brand); }
.drawer .sub { display: block; font-size: .75rem; font-weight: 450; color: var(--muted); }
.drawer-ico { width: 34px; height: 34px; border-radius: 9px; background: var(--bg-3); display: grid; place-items: center; color: var(--brand); flex: none; }
.drawer-f { margin-top: auto; padding: 16px 18px; border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
/* The header has to survive a 320px phone, so below 440px the auth buttons live in the drawer. */
/* Signed in, the header carries messages, notifications, the avatar menu and the burger. That
   is one button too many for a 390px phone and it pushed the page sideways. Messages is in the
   Explore drawer and in the avatar menu, so the standalone button is the one that gives way. */
/* On a phone the avatar menu is a second copy of the Explore drawer, which already lists the
   account, messages, the office and the way out. Two buttons doing one job is what pushed the
   signed-in header past the screen, so the drawer keeps the job and the avatar stands down. */
@media (max-width: 560px) {
  .head-inbox, .head-user { display: none !important; }
}
/* The strapline under the wordmark is the widest thing in the header: twenty five letter-spaced
   capitals, about 145px of the logo's 206px. Signed in, that is exactly what tipped a 390px
   phone into scrolling sideways. The brand name stays, the decoration goes. */
@media (max-width: 560px) {
  .head .logo-text span { display: none; }
  .head .logo-text { justify-content: center; }
}
@media (max-width: 440px) {
  .head-auth { display: none !important; }
  .nav.open .nav-auth { display: flex; flex-direction: column; gap: 8px; padding: 8px 3px 2px; border-top: 1px solid var(--line-2); margin-top: 6px; }
  .logo-text b { font-size: .95rem; }
  .logo-text span { font-size: .5rem; letter-spacing: .16em; }
  .logo-mark { width: 30px; height: 30px; }
  .head .wrap { padding: 0 12px; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--radius-s); border: 1px solid var(--line);
  background: #fff; color: var(--ink); font-weight: 600; font-size: .9rem; cursor: pointer;
  transition: background .12s, border-color .12s, transform .06s; white-space: nowrap; text-decoration: none;
}
.btn:hover { background: var(--bg-2); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-p { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-p:hover { background: var(--brand-2); }
.btn-a { background: var(--gold); border-color: var(--gold); color: #1a1508; font-weight: 700; }
.btn-a:hover { background: #cfa832; border-color: #cfa832; color: #14100a; }
.btn-d { background: #fff; border-color: #f1c7c3; color: var(--bad); }
.btn-d:hover { background: var(--bad-bg); }
.btn-g { border: 0; background: transparent; padding: 7px 10px; }
.btn-g:hover { background: var(--bg-3); }
.btn-l { padding: 12px 22px; font-size: .98rem; }
.btn-s { padding: 6px 11px; font-size: .82rem; }
.btn-w { width: 100%; }
/* A long email or URL inside a button must not be able to widen the page on a small phone. */
.btn { max-width: 100%; }
/* Wrapping between words is fine on a phone. Breaking INSIDE a word is not: "anywhere" was
   setting "Get offers" one letter per line wherever a button sat in a narrow column, which is
   what the operator spotted in his screen recording. break-word only splits a single word that
   genuinely cannot fit, which is what the long-email case actually needed. */
@media (max-width: 460px) {
  .btn { white-space: normal; overflow-wrap: break-word; }
}
.btn .spin { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > label { font-size: .78rem; font-weight: 650; color: var(--ink-2); letter-spacing: .01em; }
.inp {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-s);
  background: #fff; font-size: .93rem; transition: border-color .12s, box-shadow .12s;
}
.inp:focus { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(222, 184, 73, .3); }
.inp[aria-invalid="true"] { border-color: var(--bad); }
textarea.inp { min-height: 78px; resize: vertical; }
select.inp { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%235b7085' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; padding-right: 32px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
/* A grid item defaults to min-width:auto, so one nowrap button can widen the whole page. */
.grid2 > *, .grid3 > *, .cards > *, .split > *, .airports > *, .routes > * { min-width: 0; }

/* Main content beside a sticky summary. This has to be a class and not an inline style,
   because an inline grid-template-columns beats the media query below and the two columns
   then stay side by side on a phone, squeezing the summary off the screen. */
.split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.split-even { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.sticky-side { position: sticky; top: calc(var(--head) + 16px); }
@media (max-width: 900px) {
  .split, .split-even { grid-template-columns: 1fr; gap: 22px; }
  .sticky-side { position: static; }
}
.err-text { color: var(--bad); font-size: .8rem; }
.check { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-s); }
.check:hover { background: var(--bg-2); }
.check input { margin: 3px 0 0; accent-color: var(--brand); }
.check.on { border-color: var(--brand-2); background: var(--info-bg); }
.stepper { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden; }
.stepper button { width: 34px; height: 38px; border: 0; background: #fff; cursor: pointer; color: var(--ink-2); font-size: 1.05rem; }
.stepper button:hover { background: var(--bg-3); }
.stepper span { min-width: 30px; text-align: center; font-weight: 650; font-size: .92rem; }

/* ---------- cards / panels ---------- */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.card-p { padding: 18px; }
.card-h { padding: 14px 18px; border-bottom: 1px solid var(--line-2); display: flex; align-items: center; gap: 10px; }
.card-h h3 { font-size: .98rem; }
/* On a phone the pills on the right leave the title about fifty pixels, so it comes out one
   word per line. Wrapping the header puts the title on its own line and the pills under it. */
@media (max-width: 640px) {
  .card-h { flex-wrap: wrap; }
  .card-h > .grow { flex: 1 1 100%; }
}
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-2); padding: 22px; }
.tile { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background: #fff; }
.tile .n { font-size: 1.5rem; font-weight: 750; letter-spacing: -.03em; }
.tile .k { font-size: .76rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.note { padding: 12px 14px; border-radius: var(--radius-s); background: var(--info-bg); font-size: .87rem; border: 1px solid #d5e5ee; }
.note-w { background: var(--warn-bg); border-color: #f3dfae; }
.note-b { background: var(--bad-bg); border-color: #f4cbc7; color: #7a231b; }
.note-g { background: var(--good-bg); border-color: #b9e4cd; color: #0b5b3a; }

.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: .74rem; font-weight: 650; background: var(--bg-3); color: var(--ink-2); }
.pill-g { background: var(--good-bg); color: var(--good); }
.pill-w { background: var(--warn-bg); color: var(--warn); }
.pill-b { background: var(--bad-bg); color: var(--bad); }
.pill-a { background: var(--gold-soft); color: var(--accent-2); }
.pill-i { background: var(--bg-3); color: var(--ink-2); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.live .dot { animation: pulse 1.6s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs button { border: 0; background: none; padding: 10px 14px; font-weight: 600; font-size: .9rem; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--brand); border-bottom-color: var(--brand); }

table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 11px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--bg-2); }
/* A table inside this box scrolls sideways rather than crushing its columns. Without the
   min-width the table happily shrinks to fit the phone and every cell collapses to one word,
   so overflow-x had nothing to scroll. */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 720px) {
  .tablewrap > table { min-width: 560px; }
  /* A two or three column table has nothing to protect and everything to lose from that
     minimum: forced to 560px inside a 340px card it has to be swiped sideways, and once swiped
     the names are off the left edge and only the numbers show. The owner's phone showed a list
     of "times searched" with no destinations. These fit the screen instead. */
  .tablewrap.fit > table { min-width: 0; width: 100%; }
  .tablewrap.fit th:first-child, .tablewrap.fit td:first-child { overflow-wrap: anywhere; white-space: normal; }
  /* Every column after the first shrinks to its content, so the names get the room. The
     numbers stay on one line; their headings may wrap, so "Had a price" does not decide how
     narrow a destination name has to be. */
  .tablewrap.fit td:not(:first-child) { white-space: nowrap; width: 1%; }
  .tablewrap.fit th:not(:first-child) { white-space: normal; width: 1%; line-height: 1.15; }
}

/* ---------- published fare table on a phone ----------
   A six column price list is unreadable on a 390px screen however it scrolls, so each row
   becomes a small card. The markup stays one table, which keeps the desktop view and the
   screen readers honest. */
@media (max-width: 720px) {
  .fares > table { min-width: 0; }
  .fares thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fares table, .fares tbody, .fares tr, .fares td { display: block; width: auto; }
  .fares tr {
    display: grid; gap: 4px 10px; padding: 13px 14px; align-items: center;
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas: "town town town price" "time dist . offers" "btn btn btn btn";
    border-bottom: 1px solid var(--line-2);
  }
  .fares tr:last-child { border-bottom: 0; }
  .fares td { border: 0; padding: 0; }
  .fares td:nth-child(1) { grid-area: town; font-size: 1rem; }
  .fares td:nth-child(2) { grid-area: time; font-size: .78rem; }
  .fares td:nth-child(3) { grid-area: dist; font-size: .78rem; }
  .fares td:nth-child(3)::before { content: '· '; }
  .fares td:nth-child(4) { grid-area: price; justify-self: end; font-size: 1.05rem; }
  .fares td:nth-child(5) { grid-area: offers; justify-self: end; }
  .fares td:nth-child(5)::before { content: 'offers from'; font-size: .72rem; color: var(--muted); margin-right: 6px; }
  .fares td:nth-child(6) { grid-area: btn; margin-top: 6px; }
  .fares td:nth-child(6) .btn { width: 100%; justify-content: center; }
}

/* ---------- hero ---------- */
/* No overflow:hidden here, and it must not come back. The place suggestions hang out of the
   bottom of the search card, which is inside this block, so clipping the hero chopped the list
   off at the hero's edge: the operator saw one suggestion, the rest of the list painted behind
   the trust bar below, and there was no way to scroll to it. The background image and the
   gradient are both inset:0, so neither can escape and neither needs the clip. */
.hero { position: relative; color: #fff; background: #0d1117; }
.hero-img { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; opacity: .5; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10, 13, 18, .93) 0%, rgba(10, 13, 18, .72) 45%, rgba(10, 13, 18, .45) 100%); }
/* z-index 3, above the route cards that follow: the suggestion list lives inside this box and
   a sixth suggestion reaching down over "Popular routes" was being covered by a card. */
.hero .wrap { position: relative; z-index: 3; padding-top: 46px; padding-bottom: 34px; }
.hero h1 { font-size: clamp(2rem, 4.3vw, 2.9rem); max-width: 17ch; line-height: 1.08; letter-spacing: -.025em; }
/* The mock-up sets the second line of the headline in gold. */
.hero h1 em { display: block; font-style: normal; color: var(--gold); }
.hero p { color: #d4d8de; max-width: 54ch; font-size: 1rem; margin-top: 12px; }
.hero .mt-l { margin-top: 22px; }
.hero-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.hero-badges .pill { background: rgba(255, 255, 255, .13); color: #eaf1f6; backdrop-filter: blur(3px); }

/* Trustpilot style rating line under the headline */
.rating { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 14px; font-size: .84rem; color: #cfd2d8; }
.rating b { color: #fff; }
.rating-stars { display: inline-flex; gap: 2px; }
.rating-star { width: 17px; height: 17px; background: #00b67a; display: grid; place-items: center; }
.rating-star svg { width: 12px; height: 12px; fill: #fff; }


/* ---------- white trust bar ---------- */
.trustbar { border-bottom: 1px solid var(--line); background: #fff; }
.trustbar .wrap { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; padding-top: 15px; padding-bottom: 15px; }
.trustbar > .wrap > div { display: flex; align-items: center; gap: 11px; padding: 3px 16px; border-right: 1px solid var(--line-2); }
/* Only the item that actually STARTS a row gives up its left padding, so it lines up with the
   page gutter. A blanket :first-child rule did this to "Fixed Prices" at every width, which on
   a two column phone left it sitting 16px to the left of the two items underneath it in the
   same column. That is the misalignment the operator photographed. */
.trustbar > .wrap > div:nth-child(6n + 1) { padding-left: 0; }
.trustbar > .wrap > div:nth-child(6n) { border-right: 0; padding-right: 0; }
.trustbar .t { font-weight: 650; font-size: .8rem; line-height: 1.3; }
.trustbar .s { font-size: .715rem; color: var(--muted); line-height: 1.3; }
.trustbar svg { color: var(--gold-2); flex: none; }
/* A fixed, centred cell per icon. The drawn shapes inside a 24 unit viewBox are not all the
   same width, so laying the bare svg out as a flex child left each row's text starting at a
   slightly different place, and the widest glyph looked out of line with the other five. */
.trust-ico { flex: none; width: 22px; height: 22px; display: grid; place-items: center; }
/* Bounded at both ends on purpose. An open ended max-width block still applies on a phone, and
   because :nth-child beats a plain element selector the three column rules kept overriding the
   two column ones underneath, leaving one item in the right hand column out of line. */
@media (min-width: 621px) and (max-width: 1080px) {
  .trustbar .wrap { grid-template-columns: repeat(3, 1fr); }
  .trustbar > .wrap > div { padding-left: 16px; padding-right: 16px; border-right: 1px solid var(--line-2); }
  .trustbar > .wrap > div:nth-child(3n + 1) { padding-left: 0; }
  .trustbar > .wrap > div:nth-child(3n) { border-right: 0; padding-right: 0; }
}
@media (max-width: 620px) {
  .trustbar .wrap { grid-template-columns: repeat(2, 1fr); row-gap: 10px; }
  .trustbar > .wrap > div { padding-left: 16px; padding-right: 16px; border-right: 1px solid var(--line-2); }
  .trustbar > .wrap > div:nth-child(2n + 1) { padding-left: 0; }
  .trustbar > .wrap > div:nth-child(2n) { border-right: 0; padding-right: 0; }
}

/* The quiet "View all …" link the mock-up puts to the right of each section heading. */
.seeall { font-size: .8rem; font-weight: 500; color: var(--muted); }
.seeall:hover { color: var(--ink); text-decoration: none; }

/* ---------- popular route cards ---------- */
.routes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.route {
  /* isolate: the z-index on the card's own children stays inside the card, instead of
     competing with the search suggestions above it on the page. */
  position: relative; isolation: isolate; border-radius: var(--radius); overflow: hidden; aspect-ratio: 5/4;
  display: flex; flex-direction: column; justify-content: space-between; padding: 14px;
  color: #fff; background: var(--ink); transition: transform .16s, box-shadow .16s;
}
.route:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); text-decoration: none; color: #fff; }
.route img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Many stops, because three made a visible band across the photograph. */
.route::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 13, 18, .55) 0%, rgba(10, 13, 18, .25) 22%, rgba(10, 13, 18, 0) 40%),
    linear-gradient(0deg, rgba(10, 13, 18, .96) 0%, rgba(10, 13, 18, .86) 14%, rgba(10, 13, 18, .55) 30%, rgba(10, 13, 18, .18) 45%, rgba(10, 13, 18, 0) 60%);
}
.route > * { position: relative; z-index: 2; }
.route .from { font-size: .72rem; color: rgba(255, 255, 255, .82); }
.route .to { font-size: 1.3rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.1; margin-top: 2px; }
/* Named route-foot, not foot: .foot is the site footer and was handing this row a black
   background, sixty pixels of margin and the footer's padding. */
.route-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.route .trip { font-size: .74rem; color: rgba(255, 255, 255, .85); }
.route .price-sm { color: rgba(255, 255, 255, .8); }
.route .price { font-size: 1.3rem; color: #fff; }
@media (max-width: 1000px) { .routes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .routes { grid-template-columns: 1fr; } }

/* ---------- worldwide airport tiles ---------- */
.airports { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.airport-tile {
  display: flex; align-items: center; gap: 11px; padding: 12px 13px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink); transition: border-color .14s, box-shadow .14s, transform .14s;
}
.airport-tile:hover { border-color: var(--gold); box-shadow: var(--shadow-1); transform: translateY(-2px); text-decoration: none; }
/* The airport's own mark.
   It used to be a black rounded square with the code in it, which reads as a button sitting
   inside a card that is already a link, so people press the square and wonder why nothing
   separate happens. A round medallion with a gold ring is the same language as the seals on
   the vehicle photographs, and nobody mistakes a medallion for a button. */
/* The airport's own seal.
   It was a black rounded square with the code in it, which is the shape of a button, so a
   reader inside a card that is ALREADY a link sees two things to press and finds only one:
   "those black boxes like button is very unprofessional". A disc with a gold rim and the house
   plane faint behind the letters is the same language as the stamps on the vehicle
   photographs, and nobody mistakes a seal for a control.
   Everything here is on the badge itself rather than in extra markup, so all four places that
   show an airport code get it without changing a line of page code. The rim is a box shadow
   and not a pseudo element, because an absolutely positioned pseudo element paints over a bare
   text node and would put a gold ring across the letters. */
.airport-code {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  /* The dark disc is a real background colour. Drawn inside an SVG it was invisible to
     anything reasoning about colour: the contrast checker walked up from the code, found the
     card's white and reported gold on white at 2.15 to 1. The letters were always on black;
     now everything that reads this page can tell. */
  background-color: var(--navy); border-radius: 50%;
  color: var(--gold); font-weight: 800; font-size: .72rem; letter-spacing: .06em; text-indent: .06em; line-height: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23deb849' stroke-opacity='.3' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M10.2 3.5 3 12l3 .7 1.4 3.2 2-2.7 5.8 4.3 3.3-12.7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 30px 30px;
  box-shadow: inset 0 0 0 1px rgba(222, 184, 73, .7);
  transition: box-shadow .16s;
}
.airport-tile:hover .airport-code { box-shadow: inset 0 0 0 1px rgba(222, 184, 73, 1); }
.airport-tile > span:last-child { min-width: 0; }
.airport-tile .t, .airport-tile .s { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.airport-tile .t { font-weight: 650; font-size: .84rem; line-height: 1.25; }
.airport-tile .s { font-size: .72rem; color: var(--muted); line-height: 1.25; }
@media (max-width: 1100px) { .airports { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px) { .airports { grid-template-columns: repeat(2, 1fr); } }

/* ---------- popular international routes ---------- */
.intl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.intl > * { min-width: 0; }
.intl-card {
  display: flex; flex-direction: column; gap: 9px; padding: 14px 15px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink); transition: border-color .14s, box-shadow .14s, transform .14s;
}
.intl-card:hover { border-color: var(--gold); box-shadow: var(--shadow-2); transform: translateY(-2px); text-decoration: none; }
.intl-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.intl-where { display: flex; flex-direction: column; min-width: 0; }
.intl-where .t { font-weight: 650; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.intl-where .s { font-size: .74rem; color: var(--muted); }
.intl-to { display: flex; align-items: center; gap: 5px; font-size: .82rem; color: var(--muted); min-width: 0; }
.intl-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 4px; border-top: 1px solid var(--line-2); }
@media (max-width: 1100px) { .intl { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) { .intl { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .intl { grid-template-columns: 1fr; } }

/* ---------- bottom call to action band ---------- */
.ctaband {
  background: linear-gradient(100deg, #151a22, #1e2733); color: #fff; border-radius: var(--radius);
  padding: 18px 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.ctaband .ico { width: 44px; height: 44px; border-radius: 50%; background: rgba(222, 184, 73, .16); display: grid; place-items: center; color: var(--gold); flex: none; }
.ctaband .t { font-weight: 700; }
.ctaband .s { font-size: .84rem; color: #b9bdc4; }
/* flex-wrap alone never fires here, because the text block happily shrinks to its longest
   word first. Giving it the whole line on a phone drops the button underneath. */
@media (max-width: 640px) {
  .ctaband { padding: 16px; }
  .ctaband > .grow { flex: 1 1 100%; }
  .ctaband .btn { width: 100%; justify-content: center; }
}

/* ---------- search widget ----------
   The mock-up puts a dark slate card under the tabs, not a white one: small grey labels sit
   above white input boxes, the place fields carry their icon on the RIGHT and the date, time
   and passenger fields carry theirs on the LEFT, and the promise strip lives inside the card. */
.search {
  background: var(--navy-2); border-radius: 0 var(--radius) var(--radius) var(--radius);
  box-shadow: var(--shadow-3); padding: 16px 18px 14px; color: #fff;
  border: 1px solid rgba(255, 255, 255, .07);
}
.search-tabs { display: flex; gap: 2px; }
.search-tabs button {
  border: 0; background: rgba(26, 39, 56, .55); padding: 10px 20px; cursor: pointer;
  font-size: .84rem; font-weight: 600; color: rgba(255, 255, 255, .6);
  border-radius: var(--radius) var(--radius) 0 0; display: inline-flex; align-items: center; gap: 7px;
  transition: background .14s, color .14s;
}
.search-tabs button:hover { color: rgba(255, 255, 255, .85); }
.search-tabs button.on { background: var(--navy-2); color: #fff; }
.search-tabs svg { opacity: .9; }
.search-grid { display: grid; grid-template-columns: 1.55fr 1.55fr 1.05fr .8fr .8fr auto; gap: 10px; align-items: end; }
.search .field > label { color: rgba(255, 255, 255, .58); font-size: .72rem; font-weight: 500; letter-spacing: .01em; margin-bottom: 1px; }
.search .inp {
  background: #fff; border-color: transparent; height: 42px; font-size: .88rem;
  border-radius: var(--radius-s); color: var(--ink);
}
.search .inp::placeholder { color: #9aa3ad; }
.search .inp:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(218, 169, 79, .28); }
.search .btn-a { height: 42px; padding: 0 22px; font-size: .9rem; }

/* The return date and time, a second row under the search that only exists once Return is
   chosen. Full width at every size, two boxes side by side, one under the other on a phone. */
.search-grid .full { grid-column: 1 / -1; }
.ret-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .ret-row { grid-template-columns: 1fr; } }

/* An icon inside the field. Places put it on the right, the rest on the left. */
.field-ico { position: relative; }
.field-ico > svg { position: absolute; top: 50%; transform: translateY(-50%); color: #97a1ac; pointer-events: none; z-index: 1; }
.field-ico.ico-left > svg { left: 12px; }
.field-ico.ico-left .inp { padding-left: 36px; }
.field-ico.ico-right > svg { right: 12px; }
.field-ico.ico-right .inp { padding-right: 36px; }
.field-ico .ac-list { left: 0; right: 0; }

/* Passengers, children and luggage in one field that opens a small panel, so the search bar
   keeps the mock-up's six columns instead of growing to nine. */
.pax-field { position: relative; }
.pax-btn {
  width: 100%; height: 42px; border: 1px solid transparent; border-radius: var(--radius-s);
  background: #fff; color: var(--ink); font-size: .88rem; text-align: left;
  padding: 0 12px 0 36px; cursor: pointer; display: flex; align-items: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pax-btn:focus { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(218, 169, 79, .28); }
/* Fixed, not absolute: the hero clips its overflow to keep the photograph inside its corners,
   which would cut this panel in half. It is positioned from the button on open instead. */
.pax-panel {
  position: fixed; z-index: 62; width: 280px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-3); padding: 12px; color: var(--ink);
}
.pax-row { display: flex; align-items: center; gap: 12px; padding: 7px 2px; }
.pax-row + .pax-row { border-top: 1px solid var(--line-2); }
.pax-row .t { font-weight: 600; font-size: .86rem; display: block; }
.pax-row .s { font-size: .72rem; color: var(--muted); }
.pax-done { width: 100%; margin-top: 8px; }

/* the gold note that appears when the return tab is chosen */
.search-note {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 12px;
  padding: 9px 12px; border-radius: var(--radius-s); font-size: .8rem;
  background: rgba(218, 169, 79, .13); border: 1px solid rgba(218, 169, 79, .3); color: #f0e6d2;
}
.search-note .strong { color: var(--gold); }
.search-note svg { color: var(--gold); flex: none; margin-top: 1px; }

/* the strip of promises inside the search card */
.search-assure {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px 18px;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(255, 255, 255, .09);
}
.search-assure > div { display: flex; align-items: center; gap: 9px; }
.search-assure svg { color: var(--gold); flex: none; }
.search-assure .t { color: #fff; font-weight: 600; font-size: .78rem; display: block; line-height: 1.25; }
.search-assure .s { color: rgba(255, 255, 255, .5); font-size: .71rem; line-height: 1.25; }
@media (max-width: 1080px) { .search-assure { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .search-assure { grid-template-columns: repeat(2, 1fr); } }
.ac { position: relative; }
/* This is a WHITE panel that gets dropped inside whatever container holds the input, and the
   biggest of those is the dark search card, which sets color:#fff. Buttons inherit colour in
   this stylesheet, so the place name came out white on white: the operator could see the grey
   second line and nothing else, and filmed himself typing "alicante airport" into what looked
   like a broken search. A popover must never inherit its text colour from where it happens to
   be mounted, so it states its own. */
.ac-list { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-s); box-shadow: var(--shadow-3); max-height: 290px; overflow-y: auto; overscroll-behavior: contain; }
.ac-list button { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; border: 0; background: none; color: var(--ink); padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--line-2); }
.ac-list button:last-child { border-bottom: 0; }
.ac-list button:hover, .ac-list button.on { background: var(--info-bg); }
.ac-list .t { font-weight: 600; font-size: .89rem; color: var(--ink); }
/* While a search is out: a line saying so, and the previous suggestions faded, not gone. */
.ac-list .ac-wait { padding: 8px 12px; font-size: .78rem; color: var(--muted); border-bottom: 1px solid var(--line-2); }
.ac-list.searching button { opacity: .55; }
.ac-list .s { font-size: .77rem; color: var(--muted); }
.ac-ico { width: 30px; height: 30px; border-radius: 8px; background: var(--bg-3); display: grid; place-items: center; color: var(--brand); }

/* ---------- destination + package cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 20px; }
.pk { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s; }
.pk:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); text-decoration: none; }
.pk-img { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--bg-3); }
.pk-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.pk:hover .pk-img img { transform: scale(1.05); }
.pk-tag { position: absolute; top: 10px; left: 10px; background: rgba(13, 27, 42, .82); color: #fff; padding: 3px 9px; border-radius: 999px; font-size: .72rem; font-weight: 650; backdrop-filter: blur(3px); }
.pk-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.pk-body h3 { font-size: 1.02rem; color: var(--ink); }
.pk-where { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-2); font-weight: 700; }
.pk-sum { font-size: .86rem; color: var(--muted); flex: 1; }
.pk-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-top: 4px; border-top: 1px solid var(--line-2); margin-top: 4px; }
.price { font-size: 1.3rem; font-weight: 750; letter-spacing: -.03em; }
.price-sm { font-size: .74rem; color: var(--muted); font-weight: 500; }
/* Gold stars on a white card measure 2.15:1, which is decoration, not information. The palette
   already carries a darkened gold for exactly this reason, so light surfaces use it and the
   dark ones keep the bright gold, where it has all the contrast it needs. */
.stars { color: var(--accent-2); font-size: .8rem; letter-spacing: .5px; }
.hero .stars, .search .stars, .foot .stars, .route .stars, .ctaband .stars { color: var(--accent); }

/* ---------- fleet carousel ---------- */
.fleet { position: relative; }
.fleet-rail {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 6px 2px 18px; scroll-behavior: smooth;
  /* No scrollbar under the cars. A grey bar across the bottom of a showroom row reads as a
     browser part that escaped into the design, and the arrows above already say it moves.
     The cards still scroll by swipe, by wheel and by keyboard. */
  scrollbar-width: none; -ms-overflow-style: none;
  /* And the row fades out at both edges instead of being chopped, so a card half off screen
     looks like the row continues rather than like the layout broke. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 34px), transparent 100%);
}
.fleet-rail::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* The cards arrive rather than appear, one after the next, once the row is on screen. It runs
   once and only forwards, so nothing moves while somebody is reading a price. */
.fleet-rail.flow > .fleet-card { animation: fleet-in .5s cubic-bezier(.2, .7, .3, 1) both; }
.fleet-rail.flow > .fleet-card:nth-child(1) { animation-delay: .02s; }
.fleet-rail.flow > .fleet-card:nth-child(2) { animation-delay: .09s; }
.fleet-rail.flow > .fleet-card:nth-child(3) { animation-delay: .16s; }
.fleet-rail.flow > .fleet-card:nth-child(4) { animation-delay: .23s; }
.fleet-rail.flow > .fleet-card:nth-child(5) { animation-delay: .3s; }
.fleet-rail.flow > .fleet-card:nth-child(n+6) { animation-delay: .37s; }
@keyframes fleet-in { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .fleet-rail { scroll-behavior: auto; }
  .fleet-rail.flow > .fleet-card { animation: none; }
}
/* The mock-up puts the class and price on the left and the car photo on the right, on a
   white card, so the eye reads name, seats, price, then the vehicle. */
.fleet-card {
  flex: 0 0 min(268px, 84vw); scroll-snap-align: start; position: relative;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 0 14px 16px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto;
  column-gap: 6px; align-items: start; box-shadow: var(--shadow-1); transition: box-shadow .16s, transform .16s;
}
.fleet-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); text-decoration: none; }
.fleet-card h3 { grid-column: 1 / -1; font-size: 1rem; letter-spacing: -.02em; }
.fleet-meta { grid-column: 1 / -1; display: flex; gap: 12px; color: var(--muted); font-size: .78rem; font-weight: 600; margin-top: 3px; }
.fleet-meta span { display: inline-flex; align-items: center; gap: 4px; }
.fleet-price { grid-column: 1; align-self: end; margin-top: 14px; }
.fleet-price .price-sm { font-size: .68rem; }
.fleet-from { font-size: 1.32rem; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; }
.fleet-photo { grid-column: 2; grid-row: 3; position: relative; width: 148px; height: 76px; align-self: end; margin-top: 8px; }
.fleet-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; border-radius: 10px 0 0 10px; }
/* A drawn vehicle must be shown whole, not cropped like a photograph. */
.fleet-photo img[src$=".svg"] { object-fit: contain; border-radius: 0; }
.fleet-stamp { position: absolute; left: -12px; bottom: -8px; width: 52px; height: 52px; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .3)); }
.fleet-leaf { color: var(--good); }
@media (max-width: 560px) { .fleet-card { flex-basis: 250px; } .fleet-photo { width: 124px; height: 66px; } }
.fleet-nav { display: flex; gap: 8px; }
.fleet-nav button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; cursor: pointer; }
.fleet-nav button:hover { background: var(--bg-3); }
.fleet-nav button:disabled { opacity: .35; cursor: default; }
@media (max-width: 760px) {
  .fleet-nav { display: none; }
  .fleet-card { flex-basis: min(280px, 84vw); }
}

/* ---------- vehicle option rows ---------- */
.veh { display: flex; gap: 14px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.veh:hover { border-color: var(--brand-2); }
.veh.on { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(222, 184, 73, .35); background: #fffdf6; }
.veh.off { opacity: .5; cursor: not-allowed; }
.veh-ico { width: 62px; height: 46px; border-radius: 9px; background: var(--bg-3); display: grid; place-items: center; color: var(--brand); flex: none; }
/* A real photograph of the car, cropped the same way as the home page rail. */
.veh-ico.photo { width: 96px; height: 62px; overflow: hidden; }
.veh-ico.photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; display: block; }
@media (max-width: 560px) { .veh-ico.photo { width: 78px; height: 52px; } }
/* The booked car on the booking page, wide and low like the fleet rail. */
.trip-photo { width: 100%; max-width: 340px; aspect-ratio: 2 / 1; object-fit: cover; object-position: center 58%; border-radius: 10px; display: block; margin-bottom: 6px; }
.trip-photo[src$=".svg"] { object-fit: contain; background: var(--bg-3); }
/* Room under the last row of every office screen, so the chat bubble in the corner never sits
   on a button. The "Received from driver" button at the end of the money page was under it. */
.adm-main { padding-bottom: 110px; }

/* ---------- map ---------- */
.map { height: 300px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--bg-3); }
.map-l { height: 420px; }
.leaflet-container { font: inherit; background: var(--bg-3); }
.car-pin { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: var(--gold); box-shadow: 0 0 0 4px rgba(222, 184, 73, .45), var(--shadow-2); }
.pt-pin { width: 15px; height: 15px; border-radius: 50%; border: 3px solid #fff; box-shadow: var(--shadow-1); }

/* ---------- timeline ---------- */
.tl { position: relative; padding-left: 26px; }
.tl::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl-i { position: relative; padding-bottom: 14px; }
.tl-i:last-child { padding-bottom: 0; }
.tl-i::before { content: ''; position: absolute; left: -24px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--faint); }
.tl-i.done::before { background: var(--good); border-color: var(--good); }
.tl-i.now::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(240, 140, 0, .2); }

/* ---------- bidding ---------- */
.bid-row { display: flex; gap: 10px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.bid-row:last-child { border-bottom: 0; }
.bid-amt { font-weight: 750; font-size: 1.05rem; letter-spacing: -.02em; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: var(--gold); display: grid; place-items: center; font-weight: 700; font-size: .8rem; flex: none; }
.avatar-l { width: 46px; height: 46px; font-size: 1rem; }
.countdown { font-variant-numeric: tabular-nums; font-weight: 700; }
.countdown.warn { color: var(--bad); }
.thread { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.thread + .thread { margin-top: 14px; }
.thread-h { padding: 12px 14px; background: var(--bg-2); border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: center; }
.thread-b { padding: 6px 14px; }
.msg { display: flex; gap: 10px; padding: 9px 0; align-items: flex-start; }
.msg + .msg { border-top: 1px solid var(--line-2); }
.msg.me { flex-direction: row-reverse; text-align: right; }
.msg.me .msg-body { align-items: flex-end; }
.msg-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* ---------- toast / modal ---------- */
/* ---------- support button ---------- */
.chatdock { position: fixed; right: 18px; bottom: 18px; z-index: 70; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.wa {
  display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px 11px 13px; border-radius: 999px;
  background: #25d366; color: #05331a; font-weight: 700; font-size: .9rem; border: 0; cursor: pointer;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .42), var(--shadow-2); transition: transform .14s, box-shadow .14s;
}
.wa:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(37, 211, 102, .5), var(--shadow-2); text-decoration: none; color: #05331a; }
.wa:active { transform: translateY(0); }
.wa svg { flex: none; }
.wa-label { white-space: nowrap; }
@media (max-width: 560px) {
  .wa-label { display: none; }
  .wa { padding: 13px; }
}

/* ---------- upload preview ---------- */
.up-prev { width: 84px; height: 60px; object-fit: cover; border-radius: var(--radius-s); border: 1px solid var(--line); background: var(--bg-2); flex: none; }

/* ---------- nearest airport suggestion ---------- */
.nearby { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.nearby-t { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: #b9bdc4; }
.nearby-b {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
  color: #fff; border-radius: 999px; padding: 6px 12px; font-size: .8rem; font-weight: 600;
}
.nearby-b:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.nearby-km { font-weight: 500; opacity: .7; font-size: .74rem; }

/* ---------- small bar chart ---------- */
.spark { display: flex; align-items: flex-end; gap: 3px; height: 92px; }
.spark-b { flex: 1; min-width: 3px; background: var(--gold); border-radius: 3px 3px 0 0; opacity: .85; }
.spark-b:hover { opacity: 1; }

/* ---------- private chat ---------- */
.chat { display: flex; flex-direction: column; min-height: 0; }
.chat-list { display: flex; flex-direction: column; gap: 12px; padding: 16px; overflow-y: auto; height: 460px; background: var(--bg-2); }
.chat-c .chat-list { height: 300px; }
.chat-empty { text-align: center; margin: auto; max-width: 34ch; }
.chat-m { display: flex; gap: 9px; align-items: flex-end; max-width: 86%; }
.chat-m.mine { margin-left: auto; flex-direction: row-reverse; }
.chat-b { background: #fff; border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 9px 12px; min-width: 0; }
.chat-m.mine .chat-b { background: var(--info-bg); border-color: var(--brand-2); border-radius: 14px 14px 4px 14px; }
.chat-who { font-size: .76rem; font-weight: 650; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.chat-role { font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
/* overflow-wrap matters here: somebody will paste a flight link or a long address. */
.chat-t { font-size: .89rem; margin-top: 2px; white-space: pre-wrap; overflow-wrap: break-word; }
.chat-at { font-size: .68rem; color: var(--faint); margin-top: 3px; }
/* The support bubble floats over the bottom right corner of the window, which is exactly where
   this composer puts its Send button, so the button was half covered on the booking page. The
   extra right padding keeps Send clear of it. The bubble is about 72px plus its margin. */
.chat-foot { display: flex; gap: 9px; align-items: flex-end; padding: 12px 104px 12px 12px; border-top: 1px solid var(--line); background: #fff; }
/* No dock, no need to make room for it. */
body:not(:has(.chatdock)):not(:has(iframe[title*="Webchat" i])) .chat-foot { padding-right: 12px; }
.chat-box { resize: none; flex: 1; min-width: 0; }
.chat-foot .btn { flex: none; }
.thread { display: flex; flex-direction: column; gap: 3px; align-items: stretch; text-align: left; width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; cursor: pointer; }
.thread:hover { border-color: var(--brand-2); }
.thread.on { border-color: var(--gold); background: #fffdf6; }
@media (max-width: 640px) {
  .chat-list { height: 62vh; padding: 12px; }
  .chat-c .chat-list { height: 46vh; }
  .chat-m { max-width: 94%; }
  /* The label would push the box down to two lines on a narrow phone. */
  .chat-foot .btn span { display: none; }
}

.toasts { position: fixed; right: 16px; bottom: 82px; z-index: 90; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.toast { background: var(--ink); color: #fff; padding: 11px 15px; border-radius: var(--radius-s); box-shadow: var(--shadow-3); font-size: .88rem; animation: rise .22s ease-out; display: flex; gap: 9px; align-items: flex-start; }
.toast.bad { background: var(--bad); }
.toast.good { background: var(--good); }
@keyframes rise { from { transform: translateY(10px); opacity: 0; } }
/* Above the support chat widget, which is a third party iframe pinned bottom right with a
   z-index near the maximum. It was sitting on top of the confirm button in every dialog and
   eating the click, so "Post it" appeared to do nothing. Raising the dialog is not enough on
   its own, because the widget's wrapper still catches pointer events over that corner, so it
   is also switched off for as long as a dialog is open. */
.modal-bg { position: fixed; inset: 0; background: rgba(13, 27, 42, .5); z-index: 2147483600; display: grid; place-items: center; padding: 16px; animation: fade .15s; overflow-y: auto; }
body.has-modal .chatdock { display: none !important; }
body.has-modal iframe[title="Webchat Widget"] { pointer-events: none !important; visibility: hidden !important; }
body.has-modal div:has(> iframe[title="Webchat Widget"]) { pointer-events: none !important; }

/* The closed support widget is not the little round button it looks like. Measured on the live
   site it is a 1280 x 302 transparent iframe lying across the whole bottom of the window, and
   a browser sends a click to an iframe whether or not anything is drawn there. So every button
   in the lower part of any page was being swallowed, which is what made "Post it" look dead.
   clip-path is the lever here, because clipping changes hit testing as well as painting, so the
   button keeps working and the rest of that band stops eating clicks.

   Clipped to the button itself rather than to the button plus its greeting speech bubble. The
   greeting is worth less than a Send button that works, and it was covering page content on its
   own account anyway. Turning the auto greeting off in the respond.io settings is the tidier
   fix, and then this rule costs nothing. */
iframe[title*="Webchat" i][state="widgetClose"] {
  clip-path: inset(calc(100% - 130px) 0 0 calc(100% - 130px));
}
@keyframes fade { from { opacity: 0; } }
.modal { background: #fff; border-radius: var(--radius-l); box-shadow: var(--shadow-3); width: 100%; max-width: 480px; margin: auto; animation: rise .2s ease-out; }
.modal-h { padding: 18px 20px 0; display: flex; align-items: flex-start; gap: 12px; }
.modal-b { padding: 14px 20px; }
.modal-f { padding: 14px 20px 18px; display: flex; gap: 10px; justify-content: flex-end; }

.drop { position: relative; }
.drop-m { position: absolute; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-3); min-width: 230px; z-index: 50; overflow: hidden; }
.drop-m a, .drop-m button { display: flex; gap: 9px; align-items: center; width: 100%; text-align: left; padding: 9px 14px; border: 0; background: none; cursor: pointer; font-size: .88rem; color: var(--ink); }
.drop-m a:hover, .drop-m button:hover { background: var(--bg-2); text-decoration: none; }
.drop-m hr { margin: 4px 0; }
.badge-n { position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--bad); color: #fff; font-size: .66rem; font-weight: 700; display: grid; place-items: center; }

.skel { background: linear-gradient(90deg, var(--bg-3) 25%, var(--bg-2) 50%, var(--bg-3) 75%); background-size: 200% 100%; animation: sweep 1.2s infinite; border-radius: var(--radius-s); }
@keyframes sweep { to { background-position: -200% 0; } }
.empty { text-align: center; padding: 44px 20px; color: var(--muted); }
.empty svg { color: var(--faint); margin-bottom: 10px; }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: #a8acb4; margin-top: 60px; padding: 42px 0 26px; font-size: .88rem; }
.foot h4 { color: var(--gold); font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 11px; }
.foot a { color: #a8acb4; display: block; padding: 3px 0; }
.foot .logo-text b { color: #fff; }
.foot .logo-text span { color: var(--gold); }
.foot a:hover { color: #fff; }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 30px; }
.foot-bot { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; font-size: .8rem; }

/* ---------- admin shell ---------- */
.adm { display: grid; grid-template-columns: 226px 1fr; min-height: calc(100vh - var(--head)); }
.adm-side { border-right: 1px solid var(--line); background: var(--bg-2); padding: 18px 12px; }
.adm-side a { display: flex; gap: 9px; align-items: center; padding: 8px 11px; border-radius: 8px; color: var(--ink-2); font-size: .89rem; font-weight: 550; }
.adm-side a:hover { background: var(--bg-3); text-decoration: none; }
.adm-side a.on { background: var(--brand); color: #fff; }
.adm-main { padding: 24px; min-width: 0; }
/* One or two days of data must not render as a single black slab, so bars are capped. */
.bars { display: flex; align-items: flex-end; gap: 6px; height: 110px; }
.bars div { flex: 1 1 0; max-width: 54px; background: var(--brand-2); border-radius: 4px 4px 0 0; min-height: 3px; position: relative; }
.bars div:hover { background: var(--gold); }

@media (max-width: 980px) {
  .search-grid { grid-template-columns: 1fr 1fr; }
  .search-grid .span { grid-column: 1 / -1; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .adm { grid-template-columns: 1fr; }
  .adm-side { border-right: 0; border-bottom: 1px solid var(--line); display: flex; gap: 4px; overflow-x: auto; padding: 10px; }
  .adm-side a { white-space: nowrap; }
}
@media (max-width: 1080px) { .head .nav { display: none; } }
@media (max-width: 760px) {
  body { font-size: 14.5px; }
  /* The same trap as the place suggestions, and it was live. On a phone the menu stops being
     part of the dark bar and becomes a white panel hanging under it, but the links kept the
     white colour they need up in the bar, so the opened menu was a blank white sheet. The
     panel is light here, so the links in it are dark here. */
  .nav { display: none; position: absolute; top: var(--head); left: 0; right: 0; background: #fff; flex-direction: column; padding: 10px; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-2); margin: 0; }
  .nav.open { display: flex; }
  .nav a { padding: 11px 13px; }
  .head .nav a { color: var(--ink); }
  .head .nav a:hover { background: var(--bg-2); color: var(--ink); }
  .head .nav a.on { background: var(--gold-soft); color: var(--accent-2); }
  .search-grid { grid-template-columns: 1fr; }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .section { padding-block: 36px; }
  .hero .wrap { padding-top: 34px; padding-bottom: 38px; }
  .panel { padding: 16px; border-radius: var(--radius); }
  .foot-grid { grid-template-columns: 1fr; gap: 20px; }
  .modal-f { flex-direction: column-reverse; }
  .modal-f .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}