/* ============================================================
   Dubai Transfers — THE MOTION LAYER (2026-09-16).

   Wil, on nwp.ae the same day: "too static and tacky, actually do
   something". This is the same transformation for this site, in its own
   clothes — the monochrome ink-on-paper accent, Manrope doing both jobs,
   and a light and a dark theme that both have to hold.

   Rules the whole file keeps:
     * everything that moves moves by transform or opacity (the two
       exceptions are the SVG routes drawing themselves, which is a stroke
       offset on a few short paths, and nothing else);
     * nothing here carries information a still page loses — with reduced
       motion (main.css flattens every animation and transition) the page
       is the same page, standing still;
     * nothing auto-advances off screen or in a hidden tab (js/motion.js);
     * nothing pins or scroll-drives below 1024px, and nothing is allowed to
       make the page scroll sideways.

   All colour comes from main.css's tokens.
   ============================================================ */

:root { --ease: cubic-bezier(.22, 1, .36, 1); --wide: 1320px; }

/* The hero scrim is declared with the photographs' dark token set in
   styles/main.css (.hero, section.cta): one black scrim, both themes. */

/* ---------- shared vocabulary ---------- */
@keyframes mo-rise   { from { transform: translateY(105%); } to { transform: none; } }
@keyframes mo-draw   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mo-fadeup { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes mo-ping   { from { transform: scale(1); opacity: .85; } to { transform: scale(3.2); opacity: 0; } }

.go { display: inline-block; transition: transform .35s var(--ease); }
.btn:hover .go { transform: translateX(4px); }

/* One to press, one to send, and two quiet ones under them (the flow pass,
   2026-09-25): four buttons of equal weight made the reader choose between
   them before the one that books. */
.engine-acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.625rem; margin-top: 1.5rem; }
.engine-acts #addBtn, .engine-acts #bookWa { grid-column: 1 / -1; }
.engine-acts #copyBtn { justify-self: start; }
.engine-acts #saveBtn { justify-self: end; }

/* Stagger: a container's children arrive one after another. JS arms the
   container, counts the children into --st, and removes both classes once
   everything has landed so each child gets its own transitions back. */
.st-armed > * {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s ease, transform .9s var(--ease) !important;
  transition-delay: calc(var(--st, 0) * 65ms) !important;
}
.st-armed.st-in > * { opacity: 1; transform: none; }

/* ============================================================
   HERO
   ============================================================ */
.hx-frame { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease; }
.hx-frame.on { opacity: 1; }
.hx-frame img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 62%;
  opacity: calc(var(--hero-op) - var(--hero-p, 0) * var(--hero-fade));
  filter: saturate(var(--hero-sat));
}
/* a slow settle rather than a push: the calmer pass, 2026-09-25 */
.hx-frame.on img, .hx-frame.was img { animation: hx-kb 14s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes hx-kb { from { transform: scale(1.05); } to { transform: none; } }

.hx-dim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgb(var(--bg-rgb)); opacity: calc(var(--hero-p, 0) * .55);
}

.hx-in {
  max-width: var(--wide); display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 1.625rem; width: 100%;
}
@media (min-width: 1100px) {
  .hx-in { grid-template-columns: minmax(0, 1fr) 330px; column-gap: 3.5rem; align-items: end; }
  .hx-rail { grid-column: 1 / -1; }
}

.hx-eyebrow { display: flex; align-items: center; margin: 0; }
.hx-rule {
  display: inline-block; width: 2.5rem; height: 1px; margin-inline-end: 0.875rem; flex: none;
  background: currentColor; transform-origin: left;
  animation: mo-draw 1.1s var(--ease) both;
}

/* the headline rises out of a mask, word by word, once */
.hx-m { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.hx-w { display: inline-block; animation: mo-rise 1.05s var(--ease) both; animation-delay: calc(120ms + var(--i, 0) * 80ms); }
.hx-fade { animation: mo-fadeup 1s var(--ease) both; animation-delay: var(--d, .48s); }

/* the turning line. Each slot is an inline grid holding every value it can
   show, invisibly, so the sentence never reflows as the words change. */
.hx-turn {
  margin: 1.25rem 0 0; font-size: clamp(1.1875rem, 2vw, 1.625rem); font-weight: 500;
  letter-spacing: -0.01em; line-height: 1.3; color: var(--muted);
}
/* one translated sentence round the two slots (audit DT-H8); its words and
   slots are the flex items, in whatever order the language puts them */
.hx-turn-line { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 .42em; }
/* laid out from the first paint and shown once filled, so the headline
   above does not move (audit DT-M5) */
.hx-turn.is-pending, .hx-card.is-pending { visibility: hidden; }
.hx-slot {
  position: relative; display: inline-grid; overflow: hidden; vertical-align: bottom;
  padding: 0 .04em .1em; margin: 0 -.04em -.1em;
  color: var(--text); font-weight: 600;
}
.hx-slot > span { grid-area: 1 / 1; justify-self: start; white-space: nowrap; }
.hx-size { visibility: hidden; }
.hx-val { transition: transform .62s var(--ease), opacity .5s ease; }
.hx-val.enter { transform: translateY(100%); opacity: 0; }
.hx-val.leave { transform: translateY(-100%); opacity: 0; }
.hx-slot-place .hx-val::after {
  content: ""; position: absolute; inset-inline-start: 0; inset-inline-end: 0; bottom: .02em; height: 2px;
  background: currentColor; transform-origin: left; animation: mo-draw .8s var(--ease) .2s both;
}
.hx-slot-place .hx-val { position: relative; }

/* the live fare card */
.hx-card {
  display: none; position: relative; text-align: start; cursor: pointer;
  padding: 1.25rem 1.375rem 1.125rem; border: 1px solid var(--border-control); border-radius: 16px;
  background: rgba(var(--bg-rgb), .74); color: var(--text);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: var(--shadow); font: inherit;
  transition: border-color .3s ease, transform .5s var(--ease);
}
@media (min-width: 1100px) { .hx-card { display: grid; gap: 0.25rem; } }
.hx-card:hover { border-color: var(--text); transform: translateY(-3px); }
.hx-card-top {
  display: flex; align-items: center; gap: 0.5625rem; font-size: 0.75rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.hx-live { position: relative; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--text); flex: none; }
.hx-live { background: var(--accent); }
.hx-card-route {
  display: flex; align-items: center; gap: 0.625rem; margin-top: 0.75rem;
  font-weight: 600; font-size: 1rem; letter-spacing: 0; min-height: 1.625rem;
}
.hx-card-arrow { width: 1.375rem; height: 1px; background: currentColor; position: relative; flex: none; opacity: .6; }
.hx-card-arrow::after { content: ""; position: absolute; inset-inline-end: 0; top: -0.1875rem; width: 0.4375rem; height: 0.4375rem; border-top: 1px solid currentColor; border-inline-end: 1px solid currentColor; transform: rotate(45deg); }
.hx-card-fare {
  display: flex; align-items: baseline; gap: 0.5rem; margin-top: 0.25rem;
  font-family: var(--font-b); font-weight: 600; font-size: 3rem; line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.hx-card-fare small { font-size: 0.875rem; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.hx-card-meta { font-size: 0.8125rem; color: var(--muted); margin-top: 0.375rem; }
.hx-card-bar { display: block; height: 2px; margin-top: 1rem; background: rgba(var(--fg-rgb), .12); overflow: hidden; }
.hx-card-bar i { display: block; height: 100%; background: var(--text); transform: scaleX(0); transform-origin: left; }
.hx-card-bar i.run { animation: mo-draw var(--turn, 3400ms) linear both; }
.hx.is-held .hx-card-bar i.run { animation-play-state: paused; }

/* the frame rail */
.hx-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 0.75rem; margin-top: 0.625rem; }
@media (min-width: 760px) { .hx-rail { gap: 0 1.375rem; } }
.hx-tab {
  display: block; width: 100%; background: none; border: 0; padding: 0.875rem 0 0.375rem; margin: 0;
  text-align: start; cursor: pointer; color: var(--muted); font-size: 0.8125rem; font-weight: 600;
}
.hx-bar { display: block; position: relative; height: 2px; background: rgba(var(--fg-rgb), .18); overflow: hidden; }
.hx-bar i { position: absolute; inset: 0; background: var(--text); transform: scaleX(0); transform-origin: left; }
.hx-tab.done .hx-bar i { transform: scaleX(1); opacity: .35; }
.hx-tab[aria-current="true"] .hx-bar i { transform: scaleX(1); }
.hx.is-auto .hx-tab[aria-current="true"] .hx-bar i { animation: mo-draw var(--frame, 6500ms) linear both; }
.hx.is-auto.is-held .hx-tab[aria-current="true"] .hx-bar i { animation-play-state: paused; }
.hx-cap { display: none; gap: 0.625rem; margin-top: 0.625rem; transition: color .3s ease; }
@media (min-width: 760px) { .hx-cap { display: flex; } }
.hx-cap b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.hx-tab[aria-current="true"] .hx-cap, .hx-tab:hover .hx-cap { color: var(--text); }


/* ============================================================
   MARQUEE
   ============================================================ */
section.mq { padding: clamp(1.375rem, 3.4vw, 2.5rem) 0; border-bottom: 1px solid var(--border); overflow: hidden; }
.mq-row { display: flex; overflow: hidden; }
.mq-track {
  display: flex; flex: none; width: max-content;
  animation: mq-move var(--mq-dur, 80s) linear infinite;
}
.mq-rev .mq-track { animation-direction: reverse; }
.mq-row:hover .mq-track, .mq.is-paused .mq-track { animation-play-state: paused; }
@keyframes mq-move { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.mq-item {
  display: inline-flex; align-items: center; gap: .42em; padding-inline-end: .42em; white-space: nowrap;
  font-family: var(--font-d); font-weight: 650; font-size: clamp(1.955rem, 5.6vw, 4.35rem);
  letter-spacing: -0.015em; line-height: 1.12; color: var(--text);
}
.mq-item.hollow { color: transparent; -webkit-text-stroke: 1px rgba(var(--fg-rgb), .55); }
.mq-mark { width: .36em; height: .36em; flex: none; color: var(--muted); opacity: .5; }
.mq-rev { margin-top: 0.625rem; }
.mq-rev .mq-item {
  font-family: var(--font-b); font-size: 0.75rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); gap: 1.6em; padding-inline-end: 1.6em; line-height: 2;
}
.mq-rev .mq-item::after { content: ""; width: 0.3125rem; height: 0.3125rem; border-radius: 50%; background: currentColor; opacity: .5; }

/* ============================================================
   FIGURES
   ============================================================ */
section.figs { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.fig-grid {
  display: grid; margin: 0; gap: 2.25rem 1.375rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 760px) { .fig-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .fig-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.fig { position: relative; display: flex; flex-direction: column-reverse; justify-content: flex-end; padding-top: 1.125rem; }
.fig::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-inline-end: 0; top: 0; height: 1px; background: var(--border-control);
  transform-origin: left; transition: transform 1.2s var(--ease);
}
.figs.armed .fig::before { transform: scaleX(0); }
.figs.armed.in .fig::before { transform: none; }
.fig dd {
  margin: 0; font-family: var(--font-b); font-weight: 600; font-size: clamp(2.75rem, 4.6vw, 4.125rem);
  line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fig dd small { font-size: .3em; font-weight: 700; letter-spacing: .04em; margin-inline-end: .32em; color: var(--muted); vertical-align: .95em; }
.fig dt { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.5; color: var(--muted); max-width: 24ch; }

/* ============================================================
   THE FLEET RAIL
   ============================================================ */
section.rail { padding: clamp(4.5rem, 8vw, 7rem) 0; }
.rail-head { max-width: var(--wrap); margin: 0 auto clamp(1.75rem, 3vw, 2.5rem); padding: 0 1.25rem; }
/* the meter and the paging buttons, one row under the heading (js/motion.js) */
.rail-ctl { display: flex; align-items: center; gap: 1.5rem; margin-top: 1.75rem; }
.rail-meter {
  display: flex; flex: 1; align-items: center; gap: 0.875rem; max-width: 32.5rem;
  font-size: 0.75rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums;
}
.rail-meter i { position: relative; flex: 1; height: 1px; background: var(--border-control); }
.rail-meter b { position: absolute; inset: 0; background: var(--text); transform: scaleX(0); transform-origin: left; transition: transform .2s linear; }
.rail-nav { display: flex; gap: 0.5rem; margin-inline-start: auto; }
.rail-nav[hidden] { display: none; }
.rail-nav-b {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1px solid var(--border-control); border-radius: 50%; background: none; color: var(--text);
  cursor: pointer; transition: border-color .2s ease, opacity .2s ease, background-color .2s ease;
}
.rail-nav-b:hover:not(:disabled) { border-color: var(--accent); background: rgba(var(--fg-rgb), .04); }
.rail-nav-b:disabled { opacity: .3; cursor: default; }
.rail-nav-next svg { transform: scaleX(-1); }
[dir="rtl"] .rail-nav-b svg { transform: scaleX(-1); }
[dir="rtl"] .rail-nav-next svg { transform: none; }
/* a finger swipes the row; the buttons are for a mouse */
@media (hover: none) and (pointer: coarse) { .rail-nav { display: none; } }
.rail-track {
  display: flex; gap: 1.25rem; align-items: stretch;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: 0.25rem 1.25rem 1.125rem; scroll-padding-inline: 1.25rem;
  scrollbar-width: none;
}
.rail-track::-webkit-scrollbar { display: none; }
@media (min-width: 1180px) {
  .rail-track { padding-inline: calc((100% - var(--wrap)) / 2 + 1.25rem); scroll-padding-inline: calc((100% - var(--wrap)) / 2 + 1.25rem); }
}
/* Chrome re-snaps to the element it last snapped to after a layout change,
   and before app.js writes the cards the only snap point is the end card —
   so the row opened at its far end. Until the cards exist it is not one. */
.rail-cards:empty ~ .rail-end { scroll-snap-align: none; }
.rail-cards { display: contents; }
.rail-card { flex: none; width: min(84vw, 22.5rem); scroll-snap-align: start; }
.rail-frame {
  position: relative; height: 100%; display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--surface);
  transition: border-color .3s ease;
}
.rail-card:hover .rail-frame { border-color: var(--border-control); }
.rail-card.is-on .rail-frame { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.rail-shot { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); flex: none; }
.rail-ph { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.rail-ph.on { opacity: 1; }
.rail-ph picture { display: contents; }
.rail-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.rail-card:hover .rail-ph img { transform: scale(1.03); }
.rail-top { position: absolute; inset-inline-start: 0; inset-inline-end: 0; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 0.875rem; }
.rail-n, .rail-cap {
  font-size: 0.75rem; font-weight: 700; letter-spacing: .06em; color: #fff;
  background: rgba(0, 0, 0, .5); padding: 0.3125rem 0.625rem; border-radius: 999px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.rail-body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.375rem 1.375rem; }
/* A car with no photograph has the same card (Wil, 2026-09-25: "every car
   in the same box"): the picture box holds its name in the display face on
   a quiet ground, with the number and the seats on it as on a photograph. */
.rail-shot-type {
  display: grid; place-items: center; padding: 3rem 1.5rem 1.5rem;
  background: linear-gradient(160deg, var(--surface-2), rgba(var(--fg-rgb), .02));
}
.rail-plate {
  font-family: var(--font-d); font-weight: 650; font-size: clamp(1.955rem, 3vw, 2.3925rem);
  line-height: 1.05; letter-spacing: -0.015em; text-align: center; color: var(--muted);
}
.rail-shot-type .rail-n, .rail-shot-type .rail-cap {
  color: var(--muted); background: rgba(var(--fg-rgb), .06);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.rail-tag { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.rail-name { margin: 0.5rem 0 0; font-family: var(--font-d); font-weight: 650; font-size: clamp(1.495rem, 2.2vw, 1.725rem); line-height: 1.08; letter-spacing: -0.015em; }
.rail-models { margin: 0.375rem 0 0; font-size: 0.9063rem; color: var(--muted); line-height: 1.45; }
.rail-best { margin: 0.75rem 0 0; font-size: 0.9375rem; color: var(--muted); line-height: 1.6; }
.rail-best { margin-bottom: 1.125rem; }
.rail-foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border); display: grid; gap: 0.75rem; }
.rail-from { margin: 0; display: flex; align-items: baseline; gap: 0.375rem; }
.rail-from span { font-size: 0.75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.rail-from small { font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.rail-from b { font-family: var(--font-b); font-size: 2rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.rail-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 1.125rem; }
.rail-gal {
  position: relative; background: none; border: 0; padding: 0.625rem 0; min-height: 2.75rem; min-width: 2.75rem; cursor: pointer;
  font-size: 0.875rem; font-weight: 600; color: var(--text);
}
.rail-gal::after {
  content: ""; position: absolute; inset-inline-start: 0; inset-inline-end: 0; bottom: 0.5rem; height: 1px; background: currentColor;
  opacity: .4; transform-origin: left; transition: transform .45s var(--ease), opacity .3s;
}
.rail-gal:hover::after { opacity: 1; }
.rail-end {
  flex: none; width: min(72vw, 18.75rem); scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 1.75rem;
  border: 1px solid var(--border-control); border-radius: 16px; color: var(--text); text-decoration: none;
}
.rail-end .kicker { color: var(--muted); }
.rail-end-h { margin-top: 0.75rem; font-family: var(--font-d); font-weight: 650; font-size: 1.61rem; line-height: 1.1; letter-spacing: -0.015em; }
.rail-end-go {
  display: grid; place-items: center; width: 3.625rem; height: 3.625rem; margin-top: 1.75rem; border-radius: 50%;
  border: 1px solid var(--text); font-size: 1.25rem;
  transition: transform .45s var(--ease), background-color .3s ease, color .3s ease;
}
.rail-end:hover .rail-end-go { transform: translateX(8px); background: var(--text); color: var(--bg); }

@media (min-width: 1024px) {
  .rail-card { width: 22.5rem; }
  .rail-end { width: 18.75rem; }
}

/* the published rates, under the rail */
/* .rates-sec was removed on 2026-09-18; its table now lives in the fare tool. */
.rates-h { margin: 0 0 0.875rem; font-size: 0.75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.rates-note { font-size: 0.875rem; margin: 0.875rem 0 0; max-width: 88ch; line-height: 1.7; }

/* ============================================================
   BANDS — the photograph drifts, the words arrive
   ============================================================ */
.band .kicker { color: var(--muted); }

/* ============================================================
   WHAT WE DO — the switcher
   ============================================================ */
.svc-grid { display: grid; gap: 2.5rem; }
@media (min-width: 1000px) { .svc-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: center; } }
.svc-list { margin-top: 1.875rem; border-bottom: 1px solid var(--border); }
.svc-item { position: relative; border-top: 1px solid var(--border); }
.svc-tab {
  position: static; width: 100%; display: flex; align-items: baseline; gap: 1.125rem;
  padding: 1.625rem 0 1.125rem; background: none; border: 0; text-align: start; cursor: pointer; color: var(--muted);
}
.svc-bar { position: absolute; inset-inline-start: 0; inset-inline-end: 0; top: -1px; height: 2px; overflow: hidden; pointer-events: none; }
.svc-bar i { display: block; height: 100%; background: var(--text); transform: scaleX(0); transform-origin: left; }
.svc-item.on .svc-bar i { transform: scaleX(1); }
.svc-list.is-auto .svc-item.on .svc-bar i { animation: mo-draw var(--svc, 6000ms) linear both; }
.svc-list.is-auto.is-held .svc-item.on .svc-bar i { animation-play-state: paused; }
.svc-n { font-size: 0.8125rem; font-weight: 700; color: var(--muted); min-width: 1.375rem; }
.svc-name {
  flex: 1; font-family: var(--font-d); font-weight: 650; font-size: clamp(1.725rem, 3.4vw, 2.5013rem);
  line-height: 1; letter-spacing: -0.015em; transition: transform .5s var(--ease), color .3s ease;
}
.svc-tab:hover .svc-name { transform: translateX(6px); color: var(--text); }
.svc-item.on .svc-name, .svc-item.on .svc-n { color: var(--text); }
.svc-item.on .svc-tab:hover .svc-name { transform: none; }
.svc-go { font-size: 1.375rem; transform: rotate(-45deg); transition: transform .5s var(--ease), color .3s; color: var(--muted); }
.svc-item.on .svc-go { transform: none; color: var(--text); }
.svc-more { display: none; padding: 0 0 1.625rem 2.5rem; }
.svc-item.on .svc-more { display: block; animation: mo-fadeup .6s var(--ease) both; }
.svc-list:not(.is-live) .svc-more { display: block; }
.svc-more p { margin: 0; color: var(--muted); font-size: 1.0313rem; line-height: 1.7; max-width: 46ch; }
.svc-more .svc-fact { margin-top: 0.75rem; font-size: 0.7813rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text); }

.svc-chrome { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.svc-dots { display: flex; gap: 0.375rem; }
.svc-dots i { width: 0.5625rem; height: 0.5625rem; border-radius: 50%; background: var(--border-control); }
.svc-label { font-size: 0.75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.svc-stage { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
.svc-shot { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); transition: opacity .9s ease, transform 1.4s var(--ease); }
.svc-shot.on { opacity: 1; transform: none; }
.svc-shot picture { display: contents; }
.svc-shot img { width: 100%; height: 100%; object-fit: cover; }
.svc-cta {
  position: absolute; inset-inline-end: 1rem; bottom: 1rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6875rem 1.125rem; border-radius: 999px;
  background: rgb(var(--bg-rgb)); color: var(--text); font-size: 0.875rem; font-weight: 700;
  box-shadow: var(--shadow); transition: transform .4s var(--ease);
}
.svc-cta:hover { transform: translateY(-2px); }

/* ============================================================
   COVERAGE — the schematic map
   ============================================================ */
.ops-grid { display: grid; gap: 2.125rem; }
@media (min-width: 1000px) { .ops-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.5rem; align-items: start; } }
.ops-sub { margin: 2.125rem 0 0; font-size: 0.75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ops-routes { margin-top: 0.75rem; border-top: 1px solid var(--border); }
.ops-route {
  position: relative; width: 100%; display: grid; align-items: baseline; gap: 0.75rem;
  grid-template-columns: 26px minmax(0, 1fr) auto auto;
  padding: 0.8125rem 0; min-height: 3rem; border: 0; border-bottom: 1px solid var(--border);
  background: none; color: var(--text); text-align: start; cursor: pointer;
}
.ops-route::before {
  content: ""; position: absolute; inset-inline-start: -0.875rem; top: 0.75rem; bottom: 0.75rem; width: 2px; background: var(--text);
  transform: scaleY(0); transition: transform .5s var(--ease);
}
.ops-route.is-active::before { transform: scaleY(1); }
.ops-route.is-active .ops-route-n { color: var(--text); }
.ops-route-n { font-size: 0.75rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.ops-route-name { font-weight: 600; font-size: 1rem; transition: transform .45s var(--ease); min-width: 0; }
.ops-route:hover .ops-route-name, .ops-route.is-active .ops-route-name { transform: translateX(3px); }
.ops-route-arrow { color: var(--muted); }
.ops-route-km { font-size: 0.8125rem; color: var(--muted); }
.ops-route-fare { font-family: var(--font-b); font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; min-width: 5.375rem; text-align: end; font-variant-numeric: tabular-nums; }
.ops-route-fare small { font-size: 0.6875rem; font-weight: 600; color: var(--muted); letter-spacing: .04em; }

.ops-window { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--surface); }
.ops-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.625rem 1rem;
  padding: 0.625rem 0.75rem 0.625rem 1rem; border-bottom: 1px solid var(--border);
}
.ops-live-wrap { display: flex; align-items: center; min-width: 0; }
.ops-bar .dclock { margin: 0; font-size: 0.8125rem; }
.ops-bar .dclock-l { display: none; }
@media (min-width: 1240px) { .ops-bar .dclock-l { display: inline; } }
.ops-live { display: none; }
.ops-views { display: inline-flex; padding: 0.1875rem; border: 1px solid var(--border-control); border-radius: 999px; }
.ops-view-btn {
  min-height: 2.75rem; padding: 0 1rem; border: 0; border-radius: 999px; background: none;
  font-size: 0.8125rem; font-weight: 600; color: var(--muted); cursor: pointer;
  transition: background-color .3s ease, color .3s ease;
}
.ops-view-btn[aria-selected="true"] { background: var(--accent); color: var(--on-accent); }
.ops-svg { display: block; width: 100%; height: auto; }
.ops-view .cover-map { min-height: clamp(20rem, 50vw, 37.5rem); border: 0; border-radius: 0; }
.ops-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; padding: 0.6875rem 1rem;
  border-top: 1px solid var(--border); font-size: 0.7813rem; color: var(--muted);
}
.ops-legend span { display: inline-flex; align-items: center; gap: 0.5rem; }
.ops-legend i { display: inline-block; flex: none; }
.lg-air { width: 0.5625rem; height: 0.5625rem; border-radius: 50%; background: var(--accent); }
.lg-place { width: 0.3125rem; height: 0.3125rem; border-radius: 50%; background: var(--text); }
.lg-route { width: 1.125rem; height: 2px; background: var(--accent); }
.ops-legend-note { margin-inline-start: auto; font-size: 0.75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

/* the SVG itself — every colour a token, so both themes hold */
.ops-svg .ops-dotfill { fill: rgba(var(--fg-rgb), .34); }
.ops-svg .ops-land { fill: url(#opsDots); stroke: rgba(var(--fg-rgb), .30); stroke-width: .6; stroke-linejoin: round; }
.ops-svg .ops-sea { fill: rgba(var(--fg-rgb), .26); font-size: 0.4063rem; font-weight: 700; letter-spacing: 2.4px; }
.ops-svg .ops-place { fill: var(--text); }
.ops-svg .ops-place.is-active { fill: var(--accent); }
.ops-svg .ops-label {
  fill: var(--muted); font-size: 0.4625rem; font-weight: 700; letter-spacing: .1px;
  paint-order: stroke; stroke: var(--surface); stroke-width: 2.6px; stroke-linejoin: round;
  transition: fill .3s ease;
}
.ops-svg .ops-label.is-active { fill: var(--text); }
.ops-svg .ops-code { fill: var(--text); font-size: 0.475rem; font-weight: 800; letter-spacing: 1px; paint-order: stroke; stroke: var(--surface); stroke-width: 2.6px; }
.ops-svg .ops-arc { fill: none; stroke: var(--accent); stroke-width: 1.1; stroke-linecap: round; opacity: .42; transition: opacity .45s ease, stroke-width .45s ease; }
.ops-svg .ops-arc.is-active { opacity: 1; stroke-width: 2; }
.ops-svg.will-draw .ops-arc { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ops-svg.will-draw.is-drawn .ops-arc { animation: ops-draw 1.8s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 150ms); }
@keyframes ops-draw { to { stroke-dashoffset: 0; } }
.ops-svg .ops-car { fill: var(--accent); stroke: var(--surface); stroke-width: 1.1; opacity: .7; transition: opacity .4s ease; }
.ops-svg .ops-car.is-active { opacity: 1; }
.ops-svg .ops-ring { fill: none; stroke: var(--accent); stroke-width: .8; transform-box: fill-box; transform-origin: center; animation: mo-ping 2.6s cubic-bezier(0, 0, .2, 1) infinite; }
.ops-svg .ops-core { fill: var(--accent); stroke: var(--surface); stroke-width: 1.2; }
.ops-svg.is-paused * { animation-play-state: paused !important; }
@media (max-width: 640px) {
  .ops-svg .ops-label { font-size: 0.6875rem; stroke-width: 3.4px; }
  .ops-svg .ops-code { font-size: 0.625rem; stroke-width: 3.4px; }
  .ops-svg .ops-minor { display: none; }
  .ops-svg .ops-sea { font-size: 0.5625rem; }
  .ops-route { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .ops-route-km { display: none; }
  .ops-air { padding: 1rem 1.125rem; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: baseline; }
  .ops-air-code { grid-row: span 2; font-size: 1.875rem; }
  .ops-air-name { margin-top: 0; }
  .ops-air-note { display: none; }
  .ops-air-fare { margin-top: 0; }
  .ops-airports { gap: 0.625rem; }
}

.ops-airports { margin-top: 2.25rem; }
.ops-air {
  display: grid; gap: 0.375rem; align-content: start; padding: 1.375rem; text-align: start; cursor: pointer;
  border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text);
  transition: border-color .3s ease, transform .45s var(--ease);
}
.ops-air:hover { border-color: var(--border-control); }
.ops-air-code { font-family: var(--font-d); font-weight: 650; font-size: 2.07rem; line-height: 1; letter-spacing: -0.015em; }
.ops-air-name { font-weight: 600; font-size: 0.9375rem; margin-top: 0.375rem; }
.ops-air-note { font-size: 0.875rem; line-height: 1.55; color: var(--muted); }
.ops-air-fare { margin-top: 0.5rem; font-size: 0.8438rem; color: var(--muted); }
.ops-air-fare b { color: var(--text); }
.ops-areas { margin-top: 1.875rem; }

/* ============================================================
   HOW A BOOKING WORKS — the line that fills
   ============================================================ */
.walk-grid { display: grid; gap: 1.875rem; }
@media (min-width: 1000px) {
  .walk-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; }
  .walk-head { position: sticky; top: calc(var(--nav-inset) + 3rem); align-self: start; }
}
.tool-walk { margin: 0; }
.walk { list-style: none; margin: 0; padding: 0; position: relative; }
.walk::before, .walk::after {
  content: ""; position: absolute; inset-inline-start: 1.3125rem; top: 1.375rem; bottom: 3.5rem; width: 2px;
}
.walk::before { background: var(--border); }
.walk::after { background: var(--text); transform-origin: top; transform: scaleY(var(--walk-p, 1)); }
/* THE CAR AT THE HEAD OF THE LINE.

   --walk-p is the same 0-1 the line scales by (js/motion.js), so the car sits
   exactly where the white line ends: it appears to be drawing it. The line
   runs from 22px down to 56px off the bottom, hence the 78px the track loses.
   Static (no --walk-p, reduced motion, no JS) it rests at the end of the line,
   which is where a finished journey leaves it. */
.walk-car {
  position: absolute; inset-inline-start: 1.375rem; top: calc(1.375rem + (100% - 4.875rem) * var(--walk-p, 1));
  z-index: 1; display: block; width: 2.5rem; height: 4.3125rem;
  transform: translate(-50%, -46%); color: var(--text);
  filter: drop-shadow(0 0 10px rgba(var(--bg-rgb), .9)) drop-shadow(0 6px 14px rgba(var(--bg-rgb), .55));
  pointer-events: none;
}
.walk-car svg { display: block; }
.walk-car-glass { fill: rgb(var(--bg-rgb)); }
/* The line is the road: it runs under the car. The numbered markers sit above
   both, so the car slips behind each one as it passes it. */
.walk::after { z-index: 0; }
.walk-n { z-index: 2; }
@media (max-width: 599px) {
  .walk-car { width: 1.875rem; height: 3.25rem; }
}
.walk-step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 1.375rem; padding-bottom: 2.125rem; }
.walk-step:last-child { padding-bottom: 0; }
.walk-n {
  position: relative; z-index: 1; display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border-radius: 50%; border: 1px solid var(--text); background: var(--text); color: var(--bg);
  font-size: 0.8125rem; font-weight: 600; box-shadow: 0 0 0 6px var(--bg);
  transition: background-color .5s ease, color .5s ease, border-color .5s ease, transform .5s var(--ease);
}
.walk-body { transition: opacity .7s ease, transform .7s var(--ease); }
.walk-t { margin: 0.5rem 0 0; font-family: var(--font-d); font-weight: 650; font-size: clamp(1.375rem, 2vw, 1.495rem); letter-spacing: -0.015em; line-height: 1.2; }
.walk-d { margin: 0.375rem 0 0; color: var(--muted); font-size: 1rem; line-height: 1.6; max-width: 56ch; }
.walk.is-live .walk-step:not(.lit) .walk-n { background: var(--bg); color: var(--muted); border-color: var(--border-control); transform: scale(.9); }
.walk.is-live .walk-step:not(.lit) .walk-body { opacity: .38; transform: translateY(8px); }

/* ============================================================
   THE DOCK
   ============================================================ */
/* The dock is an ink band now (.band-ink in styles/main.css): it was a white
   panel on a cream page, which is to say it was invisible, and the eight
   tools inside it read as a settings screen for want of any ground of their
   own. Nothing here needed changing but the surface. */
section.dock-sec { border-block: 0; }
.dock-top { max-width: 47.5rem; }
.dock { margin-top: 2.125rem; display: grid; gap: 1.375rem; }
@media (min-width: 1000px) {
  .dock { grid-template-columns: 280px minmax(0, 1fr); gap: 3.25rem; align-items: start; }
  .dock-nav {
    position: sticky; top: calc(var(--nav-inset) + 1.5rem);
    max-height: calc(100vh - var(--nav-inset) - 3rem); overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}
.dock-nav { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dock-nav:empty { display: none; }
.dock-group { margin: 1.25rem 0 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.dock-group:first-child { margin-top: 0; }
.dock-tab {
  position: relative; display: flex; align-items: baseline; gap: 0.75rem; width: 100%; min-height: 2.75rem;
  padding: 0.6875rem 0.75rem; border: 0; border-radius: 10px; background: none; text-align: start; cursor: pointer;
  font-size: 0.9375rem; font-weight: 500; color: var(--muted); transition: color .25s ease, background-color .25s ease;
}
.dock-tab:hover { color: var(--text); background: rgba(var(--fg-rgb), .04); }
.dock-tab[aria-selected="true"] { color: var(--text); background: rgba(var(--fg-rgb), .07); font-weight: 600; }
.dock-tab::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0.5625rem; bottom: 0.5625rem; width: 2px; background: var(--accent);
  transform: scaleY(0); transition: transform .4s var(--ease);
}
.dock-tab[aria-selected="true"]::before { transform: none; }
.dock-n { min-width: 1.25rem; font-size: 0.75rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 999px) {
  .dock-nav {
    flex-direction: row; gap: 0.5rem; overflow-x: auto; scroll-snap-type: x proximity;
    margin: 0 -1.25rem; padding: 2px 1.25rem 0.5rem; scrollbar-width: none;
  }
  .dock-nav::-webkit-scrollbar { display: none; }
  .dock-group { display: none; }
  .dock-tab {
    flex: none; width: auto; align-items: center; min-height: 2.75rem; padding: 0 1rem; white-space: nowrap;
    border: 1px solid var(--border-control); border-radius: 999px; scroll-snap-align: start; font-size: 0.875rem;
  }
  .dock-tab::before, .dock-n { display: none; }
  .dock-tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
}
.dock-stage { min-width: 0; }
.dock-panel { scroll-margin-top: calc(var(--nav-inset) + 20px); }
.dock:not(.is-live) .dock-panel + .dock-panel { margin-top: 2.75rem; padding-top: 2.5rem; border-top: 1px solid var(--border); }
.dock-panel.dock-in { animation: mo-fadeup .5s var(--ease) both; }
.dock-stage .tool, .dock-stage .tool-open, .dock-stage .tool-wide, .dock-stage .tool-quiet {
  margin-top: 0; border-top: 0; padding-top: 0;
}
.dock-stage .tool-quiet { border-inline-start: 0; padding-inline-start: 0; max-width: none; }
.dock-stage .tool-panel { margin-top: 0; }
.dock-stage .tool-field-sm { flex: 0 1 260px; }
.dock-stage .pick-route { font-size: clamp(1.0625rem, 1.8vw, 1.3125rem); line-height: 1.45; }
@media (min-width: 620px) { .dock-stage .pick-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }
.dock-stage .tool-wide { display: block; }
.dock-stage .tool-wide > .tool-head { position: static; }
.dock-stage .tool-wide > .tool-body { margin-top: var(--tool-gap); }
.dock-stage .tool-head .tool-title { font-size: clamp(1.625rem, 2.8vw, 2.25rem); }
.dock-stage .tool-quiet > .tool-head .tool-title { font-family: var(--font-d); font-weight: 650; letter-spacing: -0.015em; }

.formula { list-style: none; margin: 1.625rem 0 0; padding: 0; display: grid; gap: 0; counter-reset: f; }
@media (min-width: 760px) { .formula { grid-template-columns: 1fr 1fr; column-gap: 1.75rem; } }
.formula li { counter-increment: f; display: grid; gap: 0.375rem; padding: 1.125rem 0 1.125rem 2.375rem; border-top: 1px solid var(--border); position: relative; }
.formula li::before { content: "0" counter(f); position: absolute; inset-inline-start: 0; top: 1.25rem; font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.formula b { font-weight: 600; font-size: 1rem; }
.formula span { font-size: 0.9375rem; color: var(--muted); line-height: 1.65; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-grid { display: grid; gap: 1.375rem; }
@media (min-width: 1000px) {
  /* 4fr, not 5. With the kicker gone and the heading at 62px the left column
     says everything it has to say in four lines, and the questions are what
     people came to read. */
  .faq-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(3rem, 5vw, 5rem); }
  .faq-side { position: sticky; top: calc(var(--nav-inset) + 3rem); align-self: start; }
}
#faqList { border-top: 1px solid var(--border); }
details.faq summary .fq { transition: transform .35s var(--ease); }

/* ============================================================
   THE CLOSE
   ============================================================ */
section.cta {
  position: relative; isolation: isolate; overflow: hidden; padding: 0;
  min-height: clamp(32.5rem, 80vh, 50rem); display: flex; align-items: center;
}
.cta-media { position: absolute; inset-inline-start: 0; inset-inline-end: 0; top: -14%; bottom: -14%; z-index: -2; will-change: transform; }
.cta-media picture { display: contents; }
.cta-media img { width: 100%; height: 100%; object-fit: cover; opacity: var(--hero-op); filter: saturate(var(--hero-sat)); }
.cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(var(--bg-rgb), .96) 0%, rgba(var(--bg-rgb), .84) 42%, rgba(var(--bg-rgb), .30) 100%);
}
@media (max-width: 700px) {
  .cta::after { background: linear-gradient(180deg, rgba(var(--bg-rgb), .55) 0%, rgba(var(--bg-rgb), .9) 45%, rgb(var(--bg-rgb)) 100%); }
}
.cta-in { position: relative; padding-block: clamp(5rem, 11vw, 8.75rem); }
.cta .kicker { display: flex; align-items: center; margin: 0; }
.cta-h { margin: 1.125rem 0 0; font-size: clamp(2.175rem, 5.4vw, 4.1325rem); line-height: 1.02; letter-spacing: -0.015em; font-weight: 650; max-width: 16ch; }
.cta-w { display: inline-block; transition: transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.cta.armed .cta-w { transform: translateY(105%); }
.cta.armed.in .cta-w { transform: none; }
.cta.armed .hx-rule { transform: scaleX(0); animation: none; transition: transform 1.1s var(--ease); }
.cta.armed.in .hx-rule { transform: none; }
.cta-sub { max-width: 48ch; margin: 1.375rem 0 0; font-size: 1.0625rem; line-height: 1.6; color: var(--muted); }
.cta .hero-cta { margin-top: 2.125rem; }
.cta .wa-note { max-width: 56ch; margin: 1.125rem 0 0; }

/* ============================================================
   FOOTER — and the name, as big as the page is wide
   ============================================================ */
footer.ft { border-top: 1px solid var(--border); padding: clamp(3.5rem, 8vw, 6.25rem) 0 1.625rem; color: var(--muted); font-size: 0.9375rem; overflow: hidden; }
.ft-top { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .ft-top { grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); } }
.ft-logo { color: var(--text); font-size: 1.1875rem; }
.ft-line { margin: 1.375rem 0 1.75rem; max-width: 22ch; font-family: var(--font-d); font-weight: 650; font-size: clamp(1.495rem, 2.6vw, 1.955rem); line-height: 1.15; letter-spacing: -0.015em; color: var(--text); }
.ft-h { margin: 0 0 1rem; font-size: 0.75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ft-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ft-col a { position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem; color: var(--muted); transition: color .25s ease; }
.ft-col a::after {
  content: ""; position: absolute; inset-inline-start: 0; inset-inline-end: 0; bottom: 0.375rem; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease);
}
.ft-col a:hover { color: var(--text); }
.ft-col a:hover::after { transform: scaleX(1); transform-origin: left; }
.ft-sister { font-weight: 600; color: var(--text) !important; gap: 0.375rem; }
/* A second sister under its own heading (Private travel, 2026-09-25): the
   gap that makes it a new group rather than a caption under the link above. */
.ft-sister + .ft-h { margin-top: 1.5rem; }
.ft-mark { margin-top: clamp(3rem, 7vw, 5.625rem); color: var(--text); user-select: none; }
.ft-mark svg { display: block; width: 100%; height: auto; overflow: visible; }
.ft-mark text { font-family: var(--font-b); font-weight: 700; font-size: 8rem; letter-spacing: 0 !important; fill: currentColor; opacity: .09; transition: opacity .9s ease; }
.ft-mark:hover text { opacity: .18; }
.ft-base { display: grid; gap: 0.375rem; margin-top: 1.125rem; padding-top: 1.375rem; border-top: 1px solid var(--border); font-size: 0.8438rem; }
.ft-base p { margin: 0; }
footer.ft .credits { margin-top: 0; }

/* ============================================================
   PRINT — none of this belongs on paper
   ============================================================ */
@media print {
  .rail, .svc, .ops, .walk-sec, .dock-sec, .cta, .ft-mark, .hx-card, .hx-rail { display: none !important; }
}

/* The header strapline ("Fixed price · Dubai & the north") could never fit:
   the bar is a fixed 1180px row, and from 1280px up — the only widths that
   showed it — it was clipped mid-word beside the links. It also no longer
   describes a service that reaches Abu Dhabi and Al Ain. */
.logo small { display: none !important; }

/* ============================================================
   PHONES — the hero has to fit the screen it opens on
   ============================================================ */
@media (max-width: 640px) {
  .hero-in.hx-in { padding-block: 3.5rem 1.125rem; gap: 1.125rem; }
  .hx-eyebrow .hx-rule { display: none; }
  .hx-turn { margin-top: 0.875rem; }
  .hero p.lede { margin-top: 0.875rem; font-size: 1.0313rem; line-height: 1.6; }
  .hx .hero-cta { margin-top: 1.25rem; gap: 0.625rem; flex-wrap: wrap; }
  .hx .hero-cta .btn { padding: 0 1.25rem; min-height: 3rem; font-size: 0.875rem; }
  .hx-rail { margin-top: 2px; }
}
/* a longer second button ("Fahrzeuge ansehen", "Посмотреть автомобили") ran
   off a phone's edge; now the row wraps when the pair does not fit, and a
   button that has wrapped takes the full width (audit DT-M4) */
@media (max-width: 640px) {
  .hx .hero-cta .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---- 2026-09-28, audit round 2 ----
   The car drives the line while it fills, and goes once it has arrived; a
   page that does not move (reduced motion, no script) never shows it, since
   parked over step 07 it read as a face (DT-L36). */
.walk-car { transition: opacity .35s ease; }
.walk:not(.is-live) .walk-car, .walk.walk-done .walk-car { opacity: 0; }
/* the price floor on a car card is one translated phrase now ("from AED 160",
   "AED 160 起"); its words take the small muted style the "from" had */
.rail-from { font-size: 0.75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); flex-wrap: wrap; }
.rail-from b { color: var(--text); }
/* the footer strapline breaks evenly, not with one word alone (DT-L39) */
.ft-line { text-wrap: balance; }

/* ---------- glow: the light under the mouse on a card (js/glow.js) ----------
   A soft radial highlight at --gx/--gy, the foreground colour at low alpha so it
   reads on both themes. Flat: it never moves or resizes the card, takes no
   pointer events and stays faint enough not to touch text contrast. Mouse only
   (the script sets html.glow-on from a mouse pointer); off for reduced motion. */
.glow { position: relative; }
.glow::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(14rem circle at var(--gx, 50%) var(--gy, 50%),
    rgba(var(--fg-rgb), .09), rgba(var(--fg-rgb), .03) 45%, rgba(var(--fg-rgb), 0) 72%);
  opacity: 0; transition: opacity .25s ease;
}
.glow-on .glow:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce), (pointer: coarse) { .glow::after { display: none; } }