/* =========================================================
   G&G VIP Transfer — "Prestige Lineage"
   Editorial luxury: deep noir + gold hairlines
   ========================================================= */

:root {
  /* Surfaces */
  --surface: #131313;
  --surface-lowest: #0e0e0e;
  --surface-low: #1c1b1b;
  --surface-container: #201f1f;
  --surface-high: #2a2a2a;
  --surface-highest: #353534;

  /* Text */
  --on-surface: #e5e2e1;
  --on-surface-variant: #d1c5b4;
  --muted: #9a8f80;

  /* Gold / bronze */
  --primary: #e9c176;
  --primary-dim: #c5a059;
  --on-primary: #412d00;
  --bronze: #8e7342;
  --outline: #9a8f80;
  --outline-variant: #4e4639;
  --charcoal-border: #2a2a2a;

  /* Error */
  --error: #ffb4ab;
  --on-error: #690005;

  /* Type */
  --display: "Zodiak", "Playfair Display", Georgia, serif;
  --body: "Manrope", -apple-system, system-ui, sans-serif;

  /* Layout */
  --margin-safe: 5vw;
  --gutter: 24px;
  --section-gap: 120px;
  --max-w: 1200px;

  /* Radius */
  --r-sm: 0.125rem;
  --r: 0.25rem;
  --r-lg: 0.5rem;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Zodiak ships Latin only. Without this, a Greek heading would render its
   Greek letters in the Georgia fallback while Latin runs inside it ("VIP",
   "24/7", "Ford Tourneo") stayed in Zodiak — two faces inside one line.
   js/main.js sets lang="el" on <html> for Greek, so swap the whole face. */
html[lang="el"] {
  --display: "Playfair Display", Georgia, serif;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

::selection { background: var(--primary); color: var(--on-primary); }

/* ---------- Shared primitives ---------- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--margin-safe);
}
.container--narrow { max-width: 820px; }

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 20px;
}

.section { padding-block: var(--section-gap); }

/* Tonal rhythm between sections — subtle alternation of the design
   system's black tones (Design.md "Tonal Layers"). Cards keep their
   contrast because each section alternates against its inner surfaces. */
#services, #how, #booking, #contact { background: var(--surface-low); }  /* #1c1b1b */
#fleet, #about, #faq { background: var(--surface-lowest); }              /* #0e0e0e */

.section__head { max-width: 680px; margin-bottom: 64px; }
.section__head--center { margin-inline: auto; text-align: center; }

.section__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--on-surface);
}

.section__intro {
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--on-surface-variant);
  max-width: 620px;
}
.section__head--center .section__intro { margin-inline: auto; }

/* Signature: the gold line threading the page */
.gold-line {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--bronze) 30%, var(--primary) 50%, var(--bronze) 70%, transparent);
  opacity: 0.5;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 26px;
  border-radius: var(--r);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  white-space: nowrap;
}
.btn--primary {
  background: var(--primary);
  color: var(--on-primary);
}
.btn--primary:hover {
  background: #f3d08c;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -12px rgba(233, 193, 118, 0.6);
}
.btn--secondary {
  border: 1px solid var(--primary);
  color: var(--primary);
}
.btn--secondary:hover {
  background: rgba(233, 193, 118, 0.08);
  transform: translateY(-2px);
}

/* =========================================================
   PRELOADER (intro animation)
   ========================================================= */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--surface-lowest);
  transition: opacity 0.8s var(--ease), visibility 0.8s var(--ease);
}
.preloader.is-done {
  opacity: 0;
  visibility: hidden;
}
.preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.preloader__logo {
  width: min(300px, 62vw);
  height: auto;
  opacity: 0;
  transform: translateY(14px) scale(0.94);
  animation: pl-logo 1.2s var(--ease) 0.1s forwards;
}
.preloader__line {
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  animation: pl-line 0.9s var(--ease) 0.6s forwards;
}
@keyframes pl-logo {
  to { opacity: 1; transform: none; }
}
@keyframes pl-line {
  to { width: min(260px, 54vw); }
}
body.is-loading { overflow: hidden; }

/* =========================================================
   NAVBAR
   ========================================================= */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(14, 14, 14, 0.82);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--charcoal-border);
}
.nav__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 16px var(--margin-safe);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav__logo img { height: 62px; width: auto; }

.nav__links { display: flex; gap: 34px; }
.nav__links a {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--on-surface);
  padding: 4px 0;
  transition: color 0.3s var(--ease);
}
/* Signature underline hover */
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--primary);
  transition: width 0.35s var(--ease);
}
.nav__links a:hover { color: var(--primary); }
.nav__links a:hover::after { width: 100%; }

.nav__actions { display: flex; align-items: center; gap: 20px; }

.lang { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; }
.lang__btn { color: var(--muted); transition: color 0.25s var(--ease); padding: 2px; }
.lang__btn.is-active { color: var(--primary); }
.lang__btn:hover { color: var(--on-surface); }
.lang__sep { color: var(--outline-variant); }

.nav__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--on-surface);
  transition: color 0.3s var(--ease);
}
.nav__phone svg { color: var(--primary); }
.nav__phone:hover { color: var(--primary); }

.nav__burger { display: none; flex-direction: column; gap: 5px; padding: 6px; }
.nav__burger span { display: block; width: 24px; height: 2px; background: var(--on-surface); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 120px var(--margin-safe) 80px;
}
.hero__media { position: absolute; inset: 0; z-index: 0; background: var(--surface-lowest); }
.hero__video {
  width: 100%; height: 108%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.85) contrast(1.05);
  will-change: transform;
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(14,14,14,0.25) 0%, rgba(14,14,14,0.13) 40%, rgba(14,14,14,0.68) 100%),
    radial-gradient(120% 80% at 20% 30%, transparent 58%, rgba(14,14,14,0.3) 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
  /* Wider than the page container on purpose: the copy is left-aligned so it
     stays put, and only the booking card slides further right. */
  max-width: 1320px;
  width: 100%;
  margin-inline: 0; /* left-aligned within the hero safe margin */
  text-align: left;

  /* Two columns: copy on the left, booking card on the right. The right column
     stays under 992px wide, which is what makes the BookingPlan widget render
     its stacked layout (its fields are col-md-3: 4-up at >=992, 1-up below). */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 460px);
  column-gap: 64px;
  align-items: center;
}
.hero__copy { grid-column: 1; }
.hero__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(38px, 7vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 15ch;   /* keep the headline breaking nicely, not one long line */
  margin-bottom: 24px;
}
/* word reveal */
.hero__title .word { display: inline-block; overflow: hidden; vertical-align: top; }
.hero__title .word > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 0.8s var(--ease);
}
.hero__title.is-in .word > span { transform: translateY(0); }

.hero__sub {
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.6;
  color: var(--on-surface-variant);
  max-width: 620px;
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s var(--ease) 0.5s, transform 0.8s var(--ease) 0.5s;
}
.hero.is-in .hero__sub { opacity: 1; transform: none; }

/* Hero booking widget */
.widget {
  display: block;
  overflow: hidden;
  border: 1px solid var(--outline-variant);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.75);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--ease) 0.7s, transform 0.8s var(--ease) 0.7s;
}
.hero.is-in .widget { opacity: 1; transform: none; }
.widget__field { display: flex; flex-direction: column; gap: 8px; flex: 1 1 160px; }
.widget__field--sm { flex: 0 1 110px; }
.widget__field label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
.widget__field input {
  background: var(--surface-low);
  border: none;
  border-bottom: 1px solid var(--charcoal-border);
  color: var(--on-surface);
  font-family: var(--body);
  font-size: 15px;
  padding: 10px 8px;
  border-radius: var(--r) var(--r) 0 0;
  transition: border-color 0.3s var(--ease);
}
.widget__field input::placeholder { color: #6c6459; }
.widget__field input:focus { outline: none; border-bottom-color: var(--primary); }
.widget__submit { flex: 1 1 100%; margin-top: 4px; }

.hero__scroll {
  position: absolute;
  z-index: 2;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
}
.hero__scroll svg { animation: bob 2s var(--ease) infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* =========================================================
   TICKER — trust band (mobile-first marquee, right → left)
   Continuous loop; edges feathered; pauses on hover.
   ========================================================= */
.ticker {
  overflow: hidden;
  padding-block: 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 40s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }

.ticker__group {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ticker__group li {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}
/* Gold diamond separator before every item — architectural, on-brand */
.ticker__group li::before {
  content: "";
  flex: none;
  width: 5px; height: 5px;
  margin: 0 30px;
  background: var(--primary);
  transform: rotate(45deg);
}
.ticker__k { color: var(--primary); font-weight: 700; margin-right: 10px; }

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (min-width: 768px) {
  .ticker { padding-block: 26px; }
  .ticker__group li { font-size: 15px; }
  .ticker__group li::before { margin: 0 40px; }
}

/* Reduced motion: no scroll — center the items and wrap */
@media (prefers-reduced-motion: reduce) {
  .ticker { -webkit-mask-image: none; mask-image: none; }
  .ticker__track { animation: none; width: 100%; }
  .ticker__group { flex-wrap: wrap; justify-content: center; }
  .ticker__group[aria-hidden="true"] { display: none; }
}

/* =========================================================
   SERVICES — editorial index (mobile-first)
   ========================================================= */
.slist { list-style: none; }

/* Signature "gold line" ruling between every entry (Design.md dividers).
   Each hairline draws itself open (scaleX) as its row scrolls in. */
.srow {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  align-items: baseline;
  padding: 26px 0;
}
.srow::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bronze), transparent);
  transform: scaleX(0);
  transition: transform 1.2s var(--ease) 0.15s;
}
.srow.is-in::before { transform: scaleX(1); }
.slist::after {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bronze), transparent);
}

/* Title + text place directly on the row grid, so the numeral sits inline
   with the title on phones and in its own column on desktop. */
.srow__body { display: contents; }

.srow__num {
  font-family: var(--display);
  font-size: 19px;
  line-height: 1;
  color: var(--primary-dim);
  transition: color 0.5s var(--ease);
}
.srow__num::after {
  content: "—";
  margin-left: 12px;
  color: var(--bronze);
}
.srow__title {
  position: relative;
  font-family: var(--display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.15;
  color: var(--on-surface);
  text-wrap: balance;
  transition: transform 0.5s var(--ease);
}
.srow__title::after {
  content: "";
  position: absolute;
  left: 0; bottom: -8px;
  height: 1px; width: 0;
  background: var(--primary);
  transition: width 0.55s var(--ease);
}
.srow__text {
  grid-column: 1 / -1;
  margin-top: 12px;
  color: var(--on-surface-variant);
  line-height: 1.65;
  max-width: 54ch;
  text-wrap: pretty;
  transition: transform 0.5s var(--ease);
}

/* Accent state — :hover on desktop, .is-active from scroll position on
   touch devices (js/main.js). */
.srow:hover .srow__num,
.srow.is-active .srow__num { color: var(--primary); }
.srow:hover .srow__title::after,
.srow.is-active .srow__title::after { width: 44px; }

/* -------- Desktop enhancement: editorial 3-column layout -------- */
@media (min-width: 768px) {
  .srow {
    grid-template-columns: 104px minmax(0, 30fr) minmax(0, 34fr);
    column-gap: 40px;
    padding: 46px 0;
  }
  .srow__num {
    font-size: 44px;
    text-align: right;
  }
  .srow__num::after { content: none; }
  .srow__title { font-size: 30px; }
  .srow__title::after { bottom: -10px; }
  .srow__text {
    grid-column: 3;
    grid-row: 1;
    margin-top: 0;
  }

  .srow:hover .srow__title,
  .srow:hover .srow__text { transform: translateX(10px); }
  .srow:hover .srow__title::after { width: 52px; }
}

/* =========================================================
   FLEET
   ========================================================= */
.fleet {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: center;
}
/* min-width keeps the nowrap thumb strip from inflating the grid track
   (grid items refuse to shrink below min-content without it) */
.fleet__gallery { min-width: 0; }
.fleet__main {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--charcoal-border);
  /* The photos are 3:4 portraits. A square frame keeps most of each shot
     without towering over the specs column. */
  aspect-ratio: 1 / 1;
  touch-action: pan-y; /* horizontal swipes belong to the gallery (js/main.js) */
}
.fleet__main img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9); }
/* Incoming frame during a crossfade — cloned over the base img by js/main.js */
.fleet__ghost {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.fleet__ghost.is-in { opacity: 1; }
.fleet__count {
  position: absolute;
  right: 12px; bottom: 12px;
  z-index: 2;
  font-family: var(--display);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--primary);
  background: rgba(14, 14, 14, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(233, 193, 118, 0.25);
  border-radius: var(--r);
  padding: 5px 10px;
  pointer-events: none;
}
.fleet__thumbs { position: relative; display: flex; gap: 12px; margin-top: 14px; }
.fleet__thumb {
  flex: 1;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--charcoal-border);
  aspect-ratio: 3 / 4;
  opacity: 0.55;
  transition: opacity 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.fleet__thumb img { width: 100%; height: 100%; object-fit: cover; }
.fleet__thumb:hover { opacity: 0.85; transform: translateY(-2px); }
.fleet__thumb.is-active { opacity: 1; border-color: var(--primary); }

.fleet__specs { display: flex; flex-direction: column; }
.spec {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 0;
}
/* Same gold hairline language as the services dividers */
.spec::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bronze), transparent);
}
.spec:first-child { padding-top: 0; }
.spec__label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--primary-dim);
}
.spec__value { font-size: 19px; color: var(--on-surface); font-weight: 500; }

.fleet__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  margin-top: 26px;
  font-family: var(--display);
  font-size: 17px;
  color: var(--primary);
}
.fleet__cta span:first-child {
  border-bottom: 1px solid var(--outline-variant);
  padding-bottom: 3px;
  transition: border-color 0.4s var(--ease);
}
.fleet__cta-arrow { transition: transform 0.4s var(--ease); }
.fleet__cta:hover span:first-child { border-color: var(--primary); }
.fleet__cta:hover .fleet__cta-arrow { transform: translateX(6px); }

/* =========================================================
   HOW IT WORKS — connected stepper (mobile-first)
   The signature "Gold Line" runs as a thread through the steps;
   the display-face numerals sit on it like beads / stations.
   ========================================================= */
.steps { position: relative; }
/* The thread — vertical on mobile, feathered at both ends.
   It draws itself in (scale from the start) when the section scrolls in. */
.steps::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 22px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--bronze) 12%, var(--bronze) 88%, transparent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.6s var(--ease) 0.2s;
}
.steps.is-in::before { transform: scaleY(1); }
.step {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 22px;
  padding-block: 16px;
}
/* Numeral = a bead on the thread; its fill masks the line behind it.
   Must match the #how section background (--surface-low), not --surface,
   or the numerals sit in visible off-tone boxes. */
.step__num {
  grid-column: 1;
  align-self: start;
  text-align: center;
  font-family: var(--display);
  font-size: 26px;
  line-height: 1;
  color: var(--primary-dim);
  background: var(--surface-low);
  padding-block: 8px;
  transition: color 0.5s var(--ease);
}
/* Accent state — :hover on desktop, .is-active from scroll position on
   touch devices (same observer as the services rows, js/main.js) */
.step.is-active .step__num { color: var(--primary); }
.step__body { grid-column: 2; }
.step__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 24px;
  margin-bottom: 10px;
  color: var(--primary);
}
.step__text { color: var(--on-surface-variant); line-height: 1.65; max-width: 54ch; }

.steps__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
  font-family: var(--display);
  font-size: 17px;
  color: var(--primary);
}
.steps__cta span:first-child {
  border-bottom: 1px solid var(--outline-variant);
  padding-bottom: 3px;
  transition: border-color 0.4s var(--ease);
}
.steps__cta-arrow { transition: transform 0.4s var(--ease); }
.steps__cta:hover span:first-child { border-color: var(--primary); }
.steps__cta:hover .steps__cta-arrow { transform: translateX(6px); }

/* -------- Desktop: the thread turns horizontal — a journey, A → B -------- */
@media (min-width: 768px) {
  .steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
  }
  .steps::before {
    top: 23px; bottom: auto;
    left: 0; right: 0;
    width: auto; height: 1px;
    background: linear-gradient(90deg, transparent, var(--bronze) 6%, var(--bronze) 94%, transparent);
    transform: scaleX(0);
    transform-origin: left;
  }
  .steps.is-in::before { transform: scaleX(1); }
  .step { display: block; padding-block: 0; }
  .step__num {
    display: inline-flex;
    align-items: center;
    height: 46px;
    padding: 0 16px 0 0;
    font-size: 46px;
    text-align: left;
    transition: color 0.5s var(--ease), transform 0.5s var(--ease);
    transform-origin: left center;
  }
  .step__body { margin-top: 22px; }
  .step__title { font-size: 26px; margin-bottom: 12px; }

  /* Station "lights up" on hover — brighter gold + subtle lift (Design.md states) */
  .step:hover .step__num { color: var(--primary); transform: scale(1.06); }
}

/* =========================================================
   ABOUT
   ========================================================= */
.about__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 0 64px;
  align-items: center;
}
/* Desktop: collage left spanning both rows; title + story stack right.
   (On mobile the single column simply follows DOM order: head, images, body.) */
@media (min-width: 981px) {
  .about__head { grid-column: 2; grid-row: 1; }
  .about__images { grid-column: 1; grid-row: 1 / 3; }
  .about__body { grid-column: 2; grid-row: 2; }
}
.about__images { position: relative; min-height: 460px; }
.about__img {
  position: absolute;
  border-radius: var(--r-lg);
  border: 1px solid var(--charcoal-border);
  object-fit: cover;
  filter: saturate(0.85);
}
/* The van leads; the interior shot is the accent overlapping its corner.
   Mind the aspect ratios when tuning these — --1 is landscape and --2 is
   portrait, so equal widths would make the *narrower* image the taller one. */
.about__img--1 { width: 82%; aspect-ratio: 4/3; top: 0; left: 0; z-index: 1; }
.about__img--2 { width: 42%; aspect-ratio: 3/4; bottom: 0; right: 0; z-index: 2; box-shadow: -20px 20px 50px -20px rgba(0,0,0,0.7); }

.about__text { color: var(--on-surface-variant); line-height: 1.7; margin-top: 20px; }

/* Editorial drop cap on the opening paragraph */
.about__body > .about__text:first-of-type::first-letter {
  float: left;
  font-family: var(--display);
  font-size: 3.1em;
  line-height: 0.82;
  padding: 5px 10px 0 0;
  color: var(--primary);
}

/* Signoff reads as a signature: hairline above, attribution below */
.about__signoff {
  position: relative;
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  color: var(--primary);
  margin-top: 32px;
  padding-top: 22px;
}
.about__signoff::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 72px; height: 1px;
  background: linear-gradient(90deg, var(--bronze), transparent);
}
.about__credit {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* =========================================================
   BOOKING
   ========================================================= */
.booking__frame {
  border: 1px solid var(--charcoal-border);
  border-radius: var(--r-lg);
  background: var(--surface-lowest);
  overflow: hidden;
}
/* BookingPlan compact search widget (used in the hero and in #booking) */
/* Height must fit the widget's own layout, which it picks from the frame width:
   wide frame -> horizontal (3 rows), narrow frame -> stacked. Too short and the
   widget shows its own scrollbar. */
.bookingframe {
  width: 100%;
  height: 400px;
  border: 0;
  display: block;
  /* Their page loads Bootstrap, which paints body #fff inside the iframe, and
     it's cross-origin so we can't restyle it. We CAN filter our own <iframe>
     element: invert flips their white page to near-black and their dark text to
     light; hue-rotate puts the (few) colours back near where they started.
     Same trick as the Google map above. */
  filter: invert(0.92) hue-rotate(180deg) saturate(0.9) contrast(0.95);
  background: #0e0e0e;
}

/* Hero card: "smoked glass" over the video. */
#heroWidget { background: rgba(14, 14, 14, 0.35); backdrop-filter: blur(2px); }

/* --- Hero booking card: opens the full form in #bookingModal ------------- */
.widget__head {
  padding: 18px 26px 14px;
  border-bottom: 1px solid var(--outline-variant);
  background: rgba(14, 14, 14, 0.55);
}
.widget__head .eyebrow { margin-bottom: 6px; }
.widget__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.15;
  color: var(--on-surface);
}
.widget__body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 24px 26px 26px;
  background: rgba(14, 14, 14, 0.55);
}
.widget__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-surface-variant);
}
.widget__cta { width: 100%; padding-top: 16px; padding-bottom: 16px; }

/* #booking: same card body, centred, while the form is a link (see index.html). */
.booking__cta {
  align-items: center;
  text-align: center;
  padding: 48px 26px;
  background: none;
}
.booking__cta .widget__text { max-width: 520px; }
.booking__cta .widget__cta { width: auto; min-width: 260px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.widget__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  padding: 16px 20px;
  border-top: 1px solid var(--outline-variant);
  background: rgba(14, 14, 14, 0.55);
}
.widget__trust li {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Gold diamond separator — same device as the ticker, so the card reads as
   part of the same system rather than a bolted-on iframe. */
.widget__trust li + li::before {
  content: "";
  flex: none;
  width: 4px; height: 4px;
  margin: 0 14px;
  background: var(--primary);
  transform: rotate(45deg);
}
/* Phones: the three items don't fit on one line (Greek even less), and wrapping
   strands the diamonds at line starts. Stack them as a list instead, every item
   with its diamond, left-aligned to each other and centred as a block. */
@media (max-width: 640px) {
  .widget__trust {
    display: grid;
    justify-content: center;
    justify-items: start;
    gap: 10px;
  }
  .widget__trust li::before,
  .widget__trust li + li::before {
    content: "";
    flex: none;
    width: 4px; height: 4px;
    margin: 0 12px 0 0;
    background: var(--primary);
    transform: rotate(45deg);
  }
}

/* Below the two-column breakpoint the hero goes back to a single stacked flow,
   and the widget spans full width again. */
@media (max-width: 1000px) {
  .hero__content { display: block; }
}
/* On narrow screens the widget stacks and gets tall. Rather than let it stretch
   the hero, cap the frame and let it scroll internally. */
@media (max-width: 1000px) { .bookingframe { height: 480px; } }
@media (max-width: 640px) { .bookingframe { height: 420px; } }

/* The heights above are only the first paint: once the v2 form loads it posts its
   real height and main.js sets it inline. */

/* --- Full-screen results + checkout (BookingPlan v2 / Viva Wallet) ------- */
/* Deliberately NOT inverted like .bookingframe: card logos, the payment form and
   the bank's 3-D Secure page must look exactly as their owners made them. */
.bookingmodal {
  position: fixed;
  inset: 0;
  z-index: 2000; /* above nav (100), preloader (1000) and FABs (90) */
  background: rgba(0, 0, 0, 0.72);
}
.bookingmodal[hidden] { display: none; }
.bookingmodal__panel {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: #fff;
}
.bookingmodal__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
.bookingmodal__close {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 1;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-lowest);
  color: var(--primary);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}
.bookingmodal__close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.booking__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: 80px 24px;
  min-height: 420px;
  color: var(--muted);
}
.booking__placeholder svg { color: var(--outline-variant); }
.booking__placeholder p { font-size: 16px; }
.booking__placeholder-sub { color: var(--on-surface-variant); }
.booking__contact { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }

/* =========================================================
   FAQ
   ========================================================= */
.faq { display: flex; flex-direction: column; }
.faq__item {
  border-bottom: 1px solid var(--charcoal-border);
}
.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 26px 40px 26px 0;
  position: relative;
  font-family: var(--display);
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 500;
  color: var(--on-surface);
  transition: color 0.3s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  font-size: 26px;
  color: var(--primary);
  transition: transform 0.3s var(--ease);
  font-family: var(--body);
}
.faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq__item summary:hover { color: var(--primary); }
.faq__item p {
  padding: 0 40px 26px 0;
  color: var(--on-surface-variant);
  line-height: 1.7;
  max-width: 68ch;
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 64px;
  align-items: center;
}
.contact__rule {
  display: block;
  width: 64px;
  height: 1px;
  background: var(--primary);
  margin: 28px 0;
}
.contact__intro {
  color: var(--on-surface-variant);
  line-height: 1.7;
  max-width: 42ch;
  margin-bottom: 44px;
}
.contact__list { display: flex; flex-direction: column; gap: 26px; }
.crow {
  display: flex;
  align-items: center;
  gap: 20px;
  transition: transform 0.3s var(--ease);
}
a.crow:hover { transform: translateX(4px); }
.crow__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border: 1px solid var(--charcoal-border);
  border-radius: var(--r);
  color: var(--primary);
  background: var(--surface-lowest);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
a.crow:hover .crow__icon { border-color: var(--primary); background: var(--surface); }
.crow__text { display: flex; flex-direction: column; gap: 5px; }
.crow__label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.crow__value {
  font-family: var(--display);
  font-size: 19px;
  color: var(--on-surface);
  word-break: break-word;
}

/* Map */
.contact__map {
  position: relative;
  border: 1px solid var(--charcoal-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 520px;
  background: var(--surface-lowest);
}
.contact__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* Dark-mode the standard Google embed to match the noir theme */
  filter: invert(0.92) hue-rotate(180deg) saturate(0.55) contrast(0.92) brightness(0.95);
}

/* Click-to-load map: self-hosted OSM still until the user opts into the live embed */
.mapembed { position: absolute; inset: 0; }
.mapembed__still {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Same treatment as the live embed so the swap is visually seamless */
  filter: invert(0.92) hue-rotate(180deg) saturate(0.55) contrast(0.92) brightness(0.95);
}
.mapembed__btn {
  position: absolute;
  right: 18px; bottom: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  background: rgba(14, 14, 14, 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid var(--outline-variant);
  border-radius: var(--r);
  cursor: pointer;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.mapembed__btn:hover { color: var(--on-surface); border-color: var(--primary-dim); transform: translateY(-2px); }
.mapembed__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.mapembed__note {
  position: absolute;
  left: 18px; bottom: 18px;
  z-index: 2;
  max-width: calc(100% - 200px);
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}
.mapembed__note a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.mapembed__note a:hover { color: var(--on-surface-variant); }
@media (max-width: 640px) {
  .mapembed__btn { right: 14px; bottom: 14px; padding: 10px 14px; }
  .mapembed__note { left: 14px; bottom: 14px; max-width: calc(100% - 170px); }
}
.contact__mapcard {
  position: absolute;
  top: 18px; left: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 22px 14px 16px;
  background: rgba(14, 14, 14, 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid var(--outline-variant);
  border-radius: var(--r);
  max-width: calc(100% - 36px);
}
.contact__mapcard img { height: 46px; width: auto; }
.contact__mapcard-text { display: flex; flex-direction: column; gap: 3px; border-left: 1px solid var(--outline-variant); padding-left: 16px; }
.contact__mapcard-text strong {
  font-size: 13px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--on-surface); text-transform: uppercase;
}
.contact__mapcard-text span { font-size: 12px; color: var(--muted); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background: var(--surface-lowest); }
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr;
  gap: 48px;
  padding-block: 72px 48px;
}
.footer__logo { height: 64px; width: auto; margin-bottom: 20px; }
.footer__tag { color: var(--muted); max-width: 34ch; line-height: 1.6; }
.footer__col h4 {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--primary);
  margin-bottom: 20px;
}
.footer__col a, .footer__hours {
  display: block;
  color: var(--on-surface-variant);
  padding: 6px 0;
  transition: color 0.3s var(--ease);
}
.footer__col a:hover { color: var(--primary); }
.footer__hours { color: var(--muted); margin-top: 6px; }
.footer__bottom {
  padding-block: 28px;
  border-top: 1px solid var(--charcoal-border);
  font-size: 13px;
  color: var(--muted);
}

/* =========================================================
   FLOATING ACTION BUTTONS (mobile)
   ========================================================= */
.fab {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 90;
  display: none;
  flex-direction: column;
  gap: 12px;
}
.fab__btn {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: 0 8px 24px -6px rgba(0,0,0,0.6);
  transition: transform 0.25s var(--ease);
}
.fab__btn:hover { transform: scale(1.06); }
.fab__btn--call { background: var(--primary); color: var(--on-primary); }
.fab__btn--whatsapp { background: #25d366; color: #fff; }

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
[data-reveal] {
  opacity: 0;
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  will-change: opacity, transform;
}
[data-reveal="up"] { transform: translateY(48px); }
[data-reveal="left"] { transform: translateX(-56px); }
[data-reveal="right"] { transform: translateX(56px); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* Stagger children within a grid */
.slist [data-reveal].is-in,
.steps [data-reveal].is-in { transition-delay: var(--d, 0s); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px) {
  :root { --section-gap: 88px; }
  .fleet { grid-template-columns: 1fr; gap: 36px; }
  .about__grid { grid-template-columns: 1fr; gap: 40px; }
  /* Tighter collage: bigger lead image, the interior shot sits ON its
     corner with a background-colour frame so the overlap reads deliberate */
  .about__images {
    min-height: 0;
    aspect-ratio: 20 / 21;
    max-width: 480px;
  }
  .about__img--1 { width: 88%; }
  .about__img--2 {
    width: 48%;
    border: 8px solid var(--surface-lowest);
  }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .contact__grid { grid-template-columns: 1fr; gap: 44px; }
  .contact__map { min-height: 380px; }
}

@media (max-width: 820px) {
  .nav__phone, .nav__book { display: none; }
  .nav__burger { display: flex; }

  /* The panel is always in the DOM and laid out — it's hidden with opacity /
     visibility / transform instead of `display`, which cannot be transitioned. */
  .nav__links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: rgba(14,14,14,0.97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--charcoal-border);
    padding: 24px var(--margin-safe);
    gap: 4px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s var(--ease);
  }
  .nav__links.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  /* Links drop in one after another, so opening reads as a sequence. */
  .nav__links a {
    padding: 14px 0;
    font-size: 16px;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  }
  .nav__links.is-open a { opacity: 1; transform: none; }
  .nav__links.is-open a:nth-child(1) { transition-delay: 0.08s; }
  .nav__links.is-open a:nth-child(2) { transition-delay: 0.13s; }
  .nav__links.is-open a:nth-child(3) { transition-delay: 0.18s; }
  .nav__links.is-open a:nth-child(4) { transition-delay: 0.23s; }
  .nav__links.is-open a:nth-child(5) { transition-delay: 0.28s; }
  .nav__links.is-open a:nth-child(6) { transition-delay: 0.33s; }

  .nav.is-open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .fab { display: flex; }

  /* Mobile hero: the 9:16 cut (set by main.js) already matches the screen, so
     it just covers — no zoom-out needed. transform stays off so the JS parallax,
     which we don't want on mobile, can't drift the framing. */
  .hero { min-height: 100svh; padding-top: 100px; }
  .hero__media { overflow: hidden; }
  .hero__video {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    transform: none !important;
  }
  /* Nudge only the copy + booking card down. transform doesn't affect layout,
     so the hero keeps its height and the background video stays exactly put.
     (Also overrides the JS parallax transform, which we don't want on mobile.) */
  .hero__content { transform: translateY(44px) !important; }
}

@media (max-width: 640px) {
  /* Thumbs become one edge-to-edge scroll strip with snap points */
  .fleet__thumbs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--margin-safe));
    padding-inline: var(--margin-safe);
  }
  .fleet__thumbs::-webkit-scrollbar { display: none; }
  .fleet__thumb {
    flex: 0 0 auto;
    width: 64px;
    scroll-snap-align: start;
  }
  .widget { gap: 14px; padding: 18px; }
  .widget__field { flex: 1 1 100%; }
  .widget__field--sm { flex: 1 1 100%; }
  .footer__grid { grid-template-columns: 1fr; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  [data-reveal], .hero__sub, .widget { opacity: 1 !important; transform: none !important; transition: none; }
  .srow::before { transform: none !important; transition: none; }
  .srow__num, .srow__title, .srow__text, .srow__title::after { transition: none; }
  .steps::before { transform: none !important; transition: none; }
  .step__num { transition: none; }
  .hero__title .word > span { transform: none !important; }
  .hero__video { filter: saturate(0.85) contrast(1.05) !important; }
  .preloader { display: none !important; }
}