/* ============================================================
   AtoB Travel & Executive — styles
   Dark by default, adapts to the visitor's light mode.
   No external fonts, no libraries, no CDN.
   ============================================================ */

:root {
  --bg:        #14161a;
  --bg-2:      #191c21;
  --surface:   #1e222a;
  --surface-2: #23272f;
  --line:      rgba(255,255,255,.10);
  --line-2:    rgba(255,255,255,.16);
  --text:      #eae8e5;
  --muted:     #9aa1ac;
  --gold:      #d8b458;
  --gold-2:    #f0d488;
  --gold-dim:  rgba(216,180,88,.13);
  --wa:        #25d366;
  --wa-ink:    #06301a;
  --shadow:    0 18px 44px rgba(0,0,0,.42);
  /* The company name, and only the company name, is set in this. Same stack
     as the emails and the business cards, so the brand reads identically
     wherever someone meets it. Georgia and Times New Roman are on every Mac,
     Windows, iPhone and Android — nothing is fetched, nothing slows down. */
  --font-brand: Georgia, "Times New Roman", serif;
  --radius:    16px;
  --wrap:      1140px;
  --ease:      cubic-bezier(.22,.68,.36,1);
}

/* The background is always dark - Adrian's decision, 4 August 2026.
   The site deliberately does NOT follow the phone's light mode.
   To bring that back, add an @media (prefers-color-scheme: light) block here. */
:root { color-scheme: dark; }

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold); color: #14161a; padding: 12px 18px; border-radius: 0 0 10px 0;
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Typography ---------- */

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.15; letter-spacing: -.02em; font-weight: 700; }
h1 { font-size: clamp(2rem, 6.4vw, 3.6rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.6rem, 4.4vw, 2.5rem); }
h3 { font-size: 1.14rem; letter-spacing: -.01em; }
p  { margin: 0 0 1em; }

.eyebrow {
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: .7em;
}
.dot { color: var(--gold); }

.section-lede {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 62ch;
  margin-bottom: 2.4em;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 24px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  font-size: .98rem;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn .ico { width: 20px; height: 20px; fill: currentColor; flex: none; }

.btn-wa { background: var(--wa); color: var(--wa-ink); box-shadow: 0 8px 22px rgba(37,211,102,.26); }
.btn-wa:hover { box-shadow: 0 12px 28px rgba(37,211,102,.34); }

.btn-gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #14161a;
  box-shadow: 0 8px 22px rgba(216,180,88,.22);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-2);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

.btn-sm { padding: 10px 18px; font-size: .88rem; }
.btn-block { display: flex; width: 100%; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, background .25s;
}
.site-header.scrolled { border-bottom-color: var(--line); }

.header-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 68px;
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .02em;
  color: var(--gold);
  border: 1.5px solid var(--gold);
  border-radius: 9px;
  padding: 6px 9px;
  line-height: 1;
  flex: none;
}
.brand-arrow { font-size: .78em; opacity: .85; margin-inline: 1px; }

.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: 1.06rem;
  letter-spacing: .01em;
}
.brand-text em {
  font-family: var(--font-brand);
  font-style: normal;
  font-size: .66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav { display: flex; gap: 21px; }
.nav a {
  text-decoration: none;
  font-size: .93rem;
  color: var(--muted);
  font-weight: 500;
  position: relative;
  padding: 4px 0;
  transition: color .18s;
}
.nav a::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1.5px; background: var(--gold);
  transition: right .25s var(--ease);
}
.nav a:hover { color: var(--text); }
.nav a:hover::after { right: 0; }

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  background: none; border: 1px solid var(--line-2); border-radius: 11px;
  cursor: pointer; padding: 0 11px;
}
.burger span {
  display: block; height: 2px; width: 100%; background: var(--text); border-radius: 2px;
  transition: transform .28s var(--ease), opacity .18s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: clamp(56px, 12vw, 118px) 0 clamp(52px, 9vw, 96px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background-image:
    linear-gradient(180deg, rgba(20,22,26,.92) 0%, rgba(20,22,26,.83) 40%, rgba(20,22,26,.98) 100%),
    url("hero.jpg");
  background-size: cover;
  background-position: center 62%;
  background-repeat: no-repeat;
}
.hero-glow {
  position: absolute;
  top: -32%; left: 50%; transform: translateX(-50%);
  width: min(1000px, 132vw); aspect-ratio: 1;
  background: radial-gradient(circle at 50% 42%, var(--gold-dim), transparent 62%);
  pointer-events: none;
}
.hero-inner { position: relative; max-width: 800px; }

.hero h1 { margin-bottom: .34em; }

.lede {
  font-size: clamp(1.04rem, 2.4vw, 1.24rem);
  color: var(--muted);
  max-width: 55ch;
  margin-bottom: 2em;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 1.4em; }

.hero-note { font-size: .87rem; color: var(--muted); margin: 0; }

/* ---------- Trust bar ---------- */

.trustbar { background: var(--bg-2); border-bottom: 1px solid var(--line); padding: 18px 0; }
.trust-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  justify-content: center;
}
.trust-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .84rem; color: var(--muted); font-weight: 500;
}
.tick { color: var(--gold); font-weight: 800; }

/* ---------- Sections ---------- */

.section { padding: clamp(56px, 9vw, 100px) 0; }
.section-alt { background: var(--bg-2); border-block: 1px solid var(--line); }

/* ---------- Service cards ---------- */

.cards {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--line-2);
  box-shadow: var(--shadow);
}
.card p { color: var(--muted); font-size: .95rem; }
.card-accent { border-color: color-mix(in srgb, var(--gold) 40%, transparent); }

.card-ico {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--gold-dim);
  margin-bottom: 18px;
}
.card-ico svg { width: 24px; height: 24px; fill: var(--gold); }

/* ---------- Tick lists ---------- */

.ticks { list-style: none; margin: 16px 0 0; padding: 0; }
.ticks li {
  position: relative;
  padding-left: 24px;
  font-size: .89rem;
  color: var(--muted);
  margin-bottom: 8px;
}
.ticks li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: var(--gold); font-weight: 800; font-size: .9em;
}
.ticks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 4px 24px; }
.ticks-lg li { font-size: .97rem; margin-bottom: 12px; }
.ticks-lg strong { color: var(--text); }

/* ---------- Airport steps ---------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  counter-reset: step;
}
@media (min-width: 700px)  { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 14px; } }

.steps li {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px 22px;
}
.steps h3 { margin-bottom: .4em; font-size: 1.04rem; }
.steps p { margin: 0; font-size: .91rem; color: var(--muted); }

.stepnum {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--gold-dim);
  border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
  color: var(--gold);
  font-weight: 800;
  font-size: .92rem;
}

/* ---------- Fleet ---------- */

.fleet { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .fleet { grid-template-columns: repeat(2, 1fr); } }

.fleet-note {
  margin: 26px 0 0;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 12px;
  font-size: .9rem;
  color: var(--muted);
  max-width: 78ch;
}

.vehicle {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.photo {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--surface-2), var(--bg-2));
  border-bottom: 1px solid var(--line);
}
.photo svg {
  width: 62%; max-width: 240px; height: auto;
  fill: none; stroke: var(--gold); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .34;
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.interiors { margin-top: 26px; }
.interiors-head {
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 12px;
}
.interiors-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .interiors-grid { grid-template-columns: repeat(2, 1fr); } }
.shot {
  margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--surface);
}
.shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

.photo-tag {
  position: absolute; bottom: 12px; right: 12px;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); background: color-mix(in srgb, var(--bg) 72%, transparent);
  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line);
}

.vehicle-body { padding: 24px; flex: 1; }
.vehicle-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 2px; }
.vehicle-head h3 { margin: 0; }
.vehicle-sub { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 1em; }
.vehicle-body > p { color: var(--muted); font-size: .95rem; }

.pill {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  background: var(--gold-dim); color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
}
.pill-eco {
  background: color-mix(in srgb, var(--wa) 16%, transparent);
  color: var(--wa);
  border-color: color-mix(in srgb, var(--wa) 40%, transparent);
}

.specs { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
.specs > div {
  flex: 1 1 90px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 10px 12px;
}
.specs dt { font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.specs dd { margin: 2px 0 0; font-weight: 700; font-size: 1.02rem; }

/* ---------- Prices ---------- */

.pricehead {
  display: none;
  gap: 10px;
  padding: 0 22px 10px;
  font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 700;
}
.pricehead-col { text-align: right; line-height: 1.3; }
.pricehead-col small {
  display: block;
  font-size: .82em;
  letter-spacing: .04em;
  font-weight: 500;
  opacity: .62;
  text-transform: none;
}

.pricelist { list-style: none; margin: 0 0 40px; padding: 0; display: grid; gap: 10px; }

.pricerow {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 22px;
  display: grid;
  gap: 12px;
  transition: border-color .2s, background .2s;
}
.pricerow:hover { border-color: var(--line-2); }

.route strong { display: block; font-size: 1.02rem; }
.route span { display: block; font-size: .86rem; color: var(--muted); }

.pcell { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.plabel { font-size: .82rem; color: var(--muted); }
.price { font-size: 1.28rem; font-weight: 800; color: var(--gold); letter-spacing: -.02em; white-space: nowrap; }
.price small { font-size: .58em; font-weight: 600; color: var(--muted); letter-spacing: 0; }

.quotelink { color: var(--gold); font-weight: 700; text-decoration: none; font-size: .95rem; }
.quotelink:hover { text-decoration: underline; }

.included {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 14px;
  padding: 26px 24px;
}
.included h3 { margin-bottom: 14px; }
.included .ticks { margin-top: 0; }

/* ---------- Why ---------- */

.whygrid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.why {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  position: relative;
}
.whynum {
  display: block;
  font-size: .78rem; font-weight: 800; letter-spacing: .14em;
  color: var(--gold); margin-bottom: 14px;
}
.why p { color: var(--muted); font-size: .95rem; margin: 0; }

/* ---------- Reviews ---------- */
.reviewgrid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.review {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.rv-stars { margin: 0; line-height: 0; }
.rv-star { width: 17px; height: 17px; fill: var(--gold); }
.rv-text {
  margin: 0; border: 0; padding: 0;
  font-size: .95rem; line-height: 1.65; color: var(--text);
}
.rv-by { margin: auto 0 0; font-size: .88rem; }
.rv-by strong { display: block; color: var(--text); }
.rv-src { display: block; color: var(--muted); font-size: .8rem; margin-top: 2px; }
.rv-cta { margin: 26px 0 0; }

/* ---------- Business ---------- */

.section-business { background: var(--bg-2); border-block: 1px solid var(--line); }
.business-inner { display: grid; gap: 30px; grid-template-columns: 1fr; align-items: start; }
.business-copy .btn { margin-top: 22px; }

.business-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
}
.bc-label {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin-bottom: 14px;
}
.bc-list { list-style: none; margin: 0; padding: 0; }
.bc-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: .93rem;
  color: var(--muted);
}
.bc-list li:last-child { border-bottom: 0; padding-bottom: 0; }

/* ---------- Contact ---------- */

.contact-grid { display: grid; gap: 22px; grid-template-columns: 1fr; }

.contact-direct { display: flex; flex-direction: column; gap: 12px; }

.contact-line {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  text-decoration: none;
  transition: border-color .2s, transform .2s var(--ease);
}
.contact-line:hover { border-color: var(--gold); transform: translateY(-2px); }
.cl-ico {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 11px; background: var(--gold-dim);
}
.cl-ico svg { width: 21px; height: 21px; fill: var(--gold); }
.contact-line em { display: block; font-style: normal; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.contact-line strong { font-size: .97rem; word-break: break-word; }

.hours {
  background: var(--surface-2);
  border: 1px dashed var(--line-2);
  border-radius: 14px;
  padding: 16px 18px;
  margin-top: 2px;
}
.hours strong { display: block; color: var(--gold); font-size: .95rem; }
.hours span { font-size: .87rem; color: var(--muted); }

/* ---------- Form ---------- */

.quoteform {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 22px;
}
.hp { position: absolute; left: -9999px; }

.f-row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.f-row-3 { grid-template-columns: repeat(3, 1fr); }

.field { margin-bottom: 14px; display: flex; flex-direction: column; }
.field label { font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.field-label { font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.opt { font-weight: 400; opacity: .7; }

/* One way / Return — two big targets rather than a dropdown, because on a
   phone this is the choice people get wrong and it deserves one tap. */
.triptype { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* position:relative matters — without it the absolutely positioned radio
   escapes the label and pushes the page sideways on a narrow phone. */
.triptype label { position: relative; display: block; margin: 0; }
.triptype input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.triptype span {
  display: block;
  text-align: center;
  padding: 11px 10px;
  font-size: .96rem;
  color: var(--muted);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 11px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.triptype input:checked + span {
  color: var(--text);
  border-color: var(--gold);
  background: var(--surface-2);
}
.triptype input:focus-visible + span { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 28%, transparent); }

/* Rows are toggled with the hidden attribute and .f-row is a grid,
   so this has to win over display:grid. */
[hidden] { display: none !important; }

/* One way: a single column, exactly as the form has always looked.
   Return: the same lines split into two, side by side from tablet up. */
.tripcols { display: grid; gap: 18px; grid-template-columns: 1fr; }
.tripcol { min-width: 0; }
.tripcol .colhead { display: none; }
.tripcol .field:last-child { margin-bottom: 0; }

.tripcols.is-return .colhead {
  display: block;
  margin-bottom: 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line-2);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--gold);
}
/* Two date pickers side by side inside a half-width column is too tight, so
   inside a split column the paired rows stack - except the passengers and bags
   row, which is two short dropdowns and stays comfortably two-up. */
.tripcols.is-return .tripcol .f-row { grid-template-columns: 1fr; }
.tripcols.is-return .tripcol .f-row.pax-row { grid-template-columns: 1fr 1fr; }

@media (min-width: 700px) {
  .tripcols.is-return { grid-template-columns: 1fr 1fr; gap: 22px; }
}

/* "+ Add a stop" — a plain text button, so the form stays short for the
   journeys that have no extra stop, which is most of them. */
.labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.linkbtn {
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  color: var(--gold);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.linkbtn:hover { text-decoration: underline; }
.linkbtn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
.addstop { margin: -4px 0 14px; }

.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: .96rem;
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 11px;
  padding: 12px 14px;
  width: 100%;
  transition: border-color .18s, background .18s;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { resize: vertical; min-height: 84px; }
.field select {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--gold); outline: none; background: var(--surface-2); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: .68; }

.formnote { font-size: .82rem; color: var(--muted); text-align: center; margin: 14px 0 0; }

/* ---------- Footer ---------- */

.site-footer { background: var(--bg-2); border-top: 1px solid var(--line); padding-top: 52px; }
.footer-inner { display: grid; gap: 30px; grid-template-columns: 1fr; }
.f-brand { display: flex; gap: 14px; align-items: flex-start; }
.f-brand p { font-size: .9rem; color: var(--muted); margin: 0; }
.f-brand strong {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: 1.02rem;
  color: var(--gold);
}
.f-review { margin-top: 14px; }
.f-col h4 { font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.f-col p { font-size: .88rem; color: var(--muted); margin: 0; }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  margin-top: 44px;
  padding-block: 20px 24px;
}
.footer-bottom p { font-size: .82rem; color: var(--muted); margin: 0; }
.fb-links a { color: var(--gold); text-decoration: none; }
.fb-links a:hover { text-decoration: underline; }

/* ---------- Sticky mobile bar ---------- */

.stickybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}

/* ============================================================
   Responsive
   ============================================================ */

@media (min-width: 640px) {
  .footer-inner { grid-template-columns: repeat(2, 1fr); }
}

/* Price table goes multi-column only when there is genuinely room for five columns. */
@media (min-width: 880px) {
  .pricerow {
    grid-template-columns: minmax(190px, 1.45fr) repeat(4, minmax(74px, 1fr));
    align-items: center;
    gap: 10px;
  }
  .pricehead {
    display: grid;
    grid-template-columns: minmax(190px, 1.45fr) repeat(4, minmax(74px, 1fr));
  }
  .pcell { display: block; text-align: right; }
  .plabel { display: none; }
  .pcell-wide { grid-column: 2 / -1; }
  .price { font-size: 1.18rem; }
}

@media (min-width: 900px) {
  .business-inner { grid-template-columns: 1.35fr 1fr; gap: 46px; }
  .contact-grid { grid-template-columns: .82fr 1.18fr; gap: 26px; }
  .footer-inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; }
  .quoteform { padding: 32px 30px; }
}

@media (max-width: 959px) {
  .header-cta { display: none; }
  .burger { display: flex; }

  .nav {
    position: fixed;
    inset: 68px 0 auto 0;
    flex-direction: column;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 8px 20px 20px;
    box-shadow: var(--shadow);
    transform: translateY(-125%);
    transition: transform .32s var(--ease);
  }
  .nav.open { transform: translateY(0); }
  .nav a { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 1.02rem; color: var(--text); }
  .nav a:last-child { border-bottom: 0; }
  .nav a::after { display: none; }

  .stickybar { display: block; }
  body { padding-bottom: 78px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { padding-inline: 16px; }
  .hero-actions .btn { width: 100%; }
  .trust-grid { justify-content: flex-start; gap: 8px 20px; }
  .f-row, .f-row-3 { grid-template-columns: 1fr; }
  .quoteform { padding: 22px 18px; }
  .pricerow { padding: 16px 18px; }
  .brand-text em { display: none; }
}

@media (max-width: 380px) {
  .trust-item { font-size: .8rem; }
  .card, .why, .business-card, .included { padding-inline: 18px; }
  .vehicle-body { padding: 20px 18px; }
}

/* ---------- Thank-you page ---------- */

.thanks-wrap {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 8vw, 76px) 0 clamp(48px, 8vw, 84px);
  min-height: 70vh;
}
.thanks-inner { position: relative; max-width: 720px; }

.thanks-tick {
  width: 62px; height: 62px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--wa) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--wa) 42%, transparent);
  margin-bottom: 24px;
}
.thanks-tick svg { width: 32px; height: 32px; fill: var(--wa); }

.thanks-wrap h1 { font-size: clamp(1.8rem, 5.4vw, 2.9rem); margin-bottom: .34em; }

.thanks-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  margin: 30px 0 22px;
}
.thanks-card h2 { font-size: 1.12rem; margin-bottom: 18px; }

.steps-stack { grid-template-columns: 1fr !important; gap: 12px; }
.steps-stack li { background: var(--surface-2); padding: 18px 20px; }
.steps-stack .stepnum { width: 30px; height: 30px; margin-bottom: 10px; font-size: .85rem; }

.thanks-urgent {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--wa);
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 22px;
}
.thanks-urgent p { color: var(--muted); font-size: .95rem; margin-bottom: 16px; }
.thanks-urgent strong { color: var(--text); }

.thanks-spam {
  font-size: .87rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-bottom: 22px;
}
.thanks-spam strong { color: var(--gold); font-weight: 600; word-break: break-word; }

@media (max-width: 560px) {
  .thanks-urgent .btn { width: 100%; }
  .thanks-wrap .btn-ghost { width: 100%; }
  .thanks-card, .thanks-urgent { padding-inline: 18px; }
}

/* ---------- Reveal on scroll ---------- */

.reveal { opacity: 0; transform: translateY(18px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .stickybar, .hero-glow { display: none !important; }
  body { background: #fff; color: #000; }
}


/* ============================================================
   LEGAL PAGES — terms, privacy, complaints, driver terms
   ============================================================
   Long-form reading, which the rest of the site is not. Narrow
   measure, generous line-height, and section numbers in gold so
   somebody can find "clause 7" without hunting.

   Same dark background as everywhere else - Adrian's rule, the
   site does not follow the phone's light mode.
   ============================================================ */

.legal { padding: 96px 0 72px; }

.legal-inner {
  max-width: 68ch;                     /* comfortable reading measure */
  margin-inline: auto;
}

.legal-eyebrow {
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 10px;
}

.legal h1 {
  font-size: clamp(1.9rem, 5.2vw, 2.7rem);
  margin: 0 0 .4em;
}

.legal-meta {
  color: var(--muted);
  font-size: .95rem;
  margin: 0 0 34px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.legal h2 {
  font-size: clamp(1.15rem, 2.8vw, 1.35rem);
  letter-spacing: -.01em;
  margin: 44px 0 .6em;
  padding-top: 4px;
  scroll-margin-top: 90px;
}

.legal h3 {
  font-size: 1.02rem;
  color: var(--gold-2);
  margin: 30px 0 .5em;
}

.legal p,
.legal li { line-height: 1.72; }

.legal p { margin: 0 0 1.05em; }

.legal ul { margin: 0 0 1.2em; padding-left: 1.15em; }
.legal li { margin-bottom: .5em; }

.legal strong { color: #fff; font-weight: 600; }

.legal a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--gold-2); }

/* Tables - the waiting-time rates and similar. They must not push the
   page sideways on a phone, so they scroll inside their own box. */
.legal-table { overflow-x: auto; margin: 0 0 1.4em; }
.legal table {
  border-collapse: collapse;
  width: 100%;
  font-size: .95rem;
}
.legal th, .legal td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.legal th { color: var(--gold); font-weight: 600; white-space: nowrap; }

.legal blockquote {
  margin: 0 0 1.2em;
  padding: 2px 0 2px 18px;
  border-left: 2px solid var(--gold-dim);
  color: var(--muted);
}

/* The footer of each document - contact line and licence number. */
.legal-foot {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .92rem;
}
.legal-foot .biz { font-family: var(--font-brand); color: var(--gold); }

/* Sister documents, so somebody landing on one can reach the others. */
.legal-also {
  margin-top: 40px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.legal-also h4 { margin: 0 0 .6em; font-size: .82rem; letter-spacing: .14em;
                 text-transform: uppercase; color: var(--muted); font-weight: 600; }
.legal-also ul { margin: 0; padding: 0; list-style: none; }
.legal-also li { margin: 0 0 .45em; }

@media (max-width: 640px) {
  .legal { padding: 76px 0 56px; }
  .legal h2 { margin-top: 34px; }
}