/* ============================================================
   Dubai Transfers — PHONES, TABLETS AND TOUCH (2026-09-17).

   The brief, of the desktop redesign: "absolutely perfect… don't change a
   thing (for computer view) but make them mobile friendly completely."

   So this file has one rule it never breaks: EVERY declaration in it sits
   inside a media query that a desktop with a mouse, 1024px or wider, does
   not match. The only queries used are

     (max-width: 1023.98px)                   anything narrower than a laptop
     (max-width: 999.98px) and narrower        the same, tighter
     (hover: none) and (pointer: coarse)       a touch-first screen of any size

   and combinations of those. There is no bare selector in this file. The
   desktop page was fingerprinted element by element, in both themes, at
   1440 and 1280, before and after this file existed, and did not move.

   It is loaded last so it wins ties on source order, and the few
   !important flags here each override an inline style="" in index.html.

   Everything that moves still moves by transform or opacity, and all
   colour comes from the tokens in main.css so both themes hold.
   ============================================================ */


/* ============================================================
   THE EDGES OF THE SCREEN
   index.html asks for viewport-fit=cover, so an iPhone reports its notch
   and home-indicator insets. Content keeps clear of both; photographs and
   rules still run to the glass.
   ============================================================ */
@media (max-width: 1023.98px), (hover: none) and (pointer: coarse) {
  .wrap {
    padding-inline-start: max(1.25rem, env(safe-area-inset-left));
    padding-inline-end: max(1.25rem, env(safe-area-inset-right));
  }
  .to-top { inset-inline-end: max(1.25rem, calc(env(safe-area-inset-right) + 0.75rem)); }
}

@media (max-width: 1023.98px) {
  .rail-head {
    padding-inline-start: max(1.25rem, env(safe-area-inset-left));
    padding-inline-end: max(1.25rem, env(safe-area-inset-right));
  }
  .rail-track {
    padding-inline-start: max(1.25rem, env(safe-area-inset-left));
    padding-inline-end: max(1.25rem, env(safe-area-inset-right));
    scroll-padding-inline: max(1.25rem, env(safe-area-inset-left));
  }
}


/* ============================================================
   THE BAR
   ============================================================ */

/* 76px is a lot of a 667px screen to spend on chrome. 64 still holds a
   44px control with room round it. --nav-h drives the body padding, the
   handle and every anchor's scroll margin, so they all follow. */
@media (max-width: 639.98px) {
  :root { --nav-h: 64px; }
}
/* A phone on its side. tools.css already drew the bar at 56px here but
   left the page reserving 76 for it. */
@media (max-width: 1023.98px) and (max-height: 480px) {
  :root { --nav-h: 56px; }
}

@media (max-width: 1023.98px), (hover: none) and (pointer: coarse) {
  /* the mark alone is the home link under 430px: a 30px target */
  .logo { min-height: 2.75rem; min-width: 2.75rem; }

  /* A touch screen wide enough for the handle (a tablet on its side): the
     hit area reaches 44px downward, never up into the bar's own buttons. */
  .nav-tab::after {
    content: ""; position: absolute; inset-inline-start: -0.5rem; inset-inline-end: -0.5rem; top: -0.25rem; bottom: -1.125rem;
  }
  body.nav-min .nav-tab::after { top: 0; bottom: -1.375rem; }

  /* The menu sheet (styles/header.css) carries its own close button, top
     end, so the bar no longer has to ride above it. */
}

@media (max-width: 1023.98px) {
  .nav-right > * { flex-shrink: 0; }
}
/* The wordmark ran into an ellipsis — "Dubai Transf…" — between 430 and
   about 600px. The booking and the menu are icons now, and the name shows
   from 480px up, where it fits whole. */
@media (max-width: 479.98px) {
  .logo > span:not(.logo-mark) { display: none; }
}


/* ============================================================
   HERO
   ============================================================ */
@media (max-width: 759.98px) {
  /* The frame rail's tabs were 22px tall. 44px to the finger, with the
     extra height taken out of the margins so the hero does not grow. */
  .hx-tab { padding: 1.25rem 0 1.375rem; margin: -0.375rem 0 -1rem; }
}
/* At 375x667 the hero is exactly the screen, and that hit area — a 20px
   top pad pulled up by the -6px margin — started 14px under the two CTA
   buttons, which is 2px inside them while they were still rising into
   place. On a screen this short the same 44px is taken from the bottom
   instead: the bar is drawn on the same line, the target starts 20px
   clear of the buttons, and the hero does not grow. */
@media (max-width: 759.98px) and (max-height: 700px) {
  .hx-tab { padding: 0.875rem 0 1.75rem; margin: 0 0 -1.375rem; }
}
@media (max-width: 374.98px) {
  /* 320-374px: two buttons side by side ran "See the cars" off the edge */
  .hx .hero-cta { flex-wrap: wrap; }
  .hx .hero-cta .btn { flex: 1 1 auto; }
  .hx-eyebrow { letter-spacing: .12em; }
}
/* On its side a phone is 390px tall: the words start near the top. */
@media (max-width: 1023.98px) and (max-height: 500px) and (orientation: landscape) {
  .hero-in.hx-in { padding-block: 1.75rem 0.875rem; gap: 0.75rem; }
  .hero h1 { font-size: 2.2rem; max-width: 20ch; }
  .hero p.lede { margin-top: 0.625rem; }
  .hx .hero-cta { margin-top: 1rem; }
}
@media (max-width: 1023.98px) {
  section.cta { min-height: clamp(32.5rem, 80svh, 50rem); }
}


/* ============================================================
   THE FARE CALCULATOR — the product, so it gets the most care
   ============================================================ */

/* The field before "When" carries an inline margin-bottom:0, which ran the
   "When" label straight into the stop chips. */
@media (max-width: 1023.98px) {
  #stopChips { margin-bottom: 1.5rem; }
}

@media (max-width: 639.98px) {
  /* Full-bleed on a phone. Inside the page margin AND its own 26px padding
     the form had 296px to work in at 390, and 226px at 320. */
  #quote .engine { margin-inline: -1.25rem; border-inline-start: 0; border-inline-end: 0; border-radius: 0; }
  .engine-form, .engine-out { padding: 1.625rem 1.25rem; }
  .engine-form .field { margin-bottom: 1.5rem; }

  /* choices that belong together sit together, at equal width */
  #dirChips { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.5rem; }
  #dirChips .chip, #tripChips .chip { padding: 0.375rem 0.625rem; line-height: 1.25; }
  #airChips, #stopChips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
  #tripChips { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 0.5rem; }
  #termChips { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  /* equal-width cells in a grid, some of them two lines tall: a segmented
     control's corner rather than a pill's */
  #dirChips .chip, #airChips .chip, #tripChips .chip, #stopChips .chip { border-radius: 14px; }
  #termChips .chip { width: 100%; }

  /* the helper lines were 13.5px, set inline */
  #vehNote, #airNote, #termRow > p.muted, #addrHelp, #whenHelp, #capNote, #flightHelp {
    font-size: 0.9063rem !important; line-height: 1.6;
  }
  .bd-note, .src-badge { font-size: 0.875rem; }

  /* steppers a thumb can hit without looking */
  .stepper { min-height: 3.25rem; padding: 0 2px; }
  .step-btn { width: 3rem; height: 3rem; font-size: 1.375rem; }

  /* the actions: the booking first and full width, the rest in pairs */
  .engine-acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.625rem; }
  .engine-acts .btn { width: 100%; min-width: 0; padding: 0 0.75rem; }
  .engine-acts #addBtn, .engine-acts #bookWa { grid-column: 1 / -1; }
}

@media (max-width: 374.98px) {
  .veh-shot { flex-basis: 92px; }
  .engine-form .when { grid-template-columns: minmax(0, 1fr); }
  .engine-acts { grid-template-columns: minmax(0, 1fr); }
  .engine-acts .btn { grid-column: 1 / -1; }
}

/* Native date and time pickers on iOS draw an empty control at the height
   of its text and centre the value. */
@media (hover: none) and (pointer: coarse) {
  .inp[type="date"], .inp[type="time"] {
    -webkit-appearance: none; appearance: none;
    display: block; min-height: 3rem; line-height: 2.875rem; text-align: start;
  }
  .inp[type="date"]::-webkit-date-and-time-value,
  .inp[type="time"]::-webkit-date-and-time-value { text-align: start; margin: 0; }
}

/* ---------- the address search, full screen ----------
   js/mobile.js lifts the address field out of the form into a sheet when it
   is focused below 1024px, so the suggestions have the whole screen above
   the keyboard instead of a 300px box that the keyboard covers. */
@media (max-width: 1023.98px) {
  .field.addr-sheet {
    position: fixed; inset: 0; z-index: 95; margin: 0;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start;
    grid-template-areas: "lbl done" "input input" "help help" "pop pop" "picks picks";
    column-gap: 0.75rem;
    padding: calc(0.625rem + env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
             calc(1.5rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    background: var(--surface); overflow-y: auto; overscroll-behavior: contain;
    max-width: none;
  }
  .addr-sheet > .lbl { grid-area: lbl; align-self: center; margin: 0; }
  .addr-sheet > .addr-done { grid-area: done; }
  .addr-sheet > .addr-wrap { grid-area: input; margin-top: 0.625rem; }
  .addr-sheet > #addrHelp { grid-area: help; }
  .addr-sheet > #addrResults {
    grid-area: pop; position: static; max-height: none; overflow: visible;
    margin-top: 0.75rem; padding: 0; border: 0; border-top: 1px solid var(--border);
    background: transparent; box-shadow: none; border-radius: 0;
  }
  .addr-sheet > #quickPicks { grid-area: picks; margin-top: 1rem !important; }
  .addr-sheet > #addrResults.open ~ #quickPicks { display: none; }
  .addr-sheet:has(> #addrResults.open) > #addrHelp { display: none; }
  .addr-sheet .pop-item {
    min-height: 3.5rem; padding: 0.625rem 2px; border-radius: 0;
    border-bottom: 1px solid var(--border); align-items: flex-start; flex-direction: column; gap: 2px;
  }
  .addr-sheet .pop-item .p-name { font-size: 1.0313rem; }
  .addr-sheet .pop-item .p-area { font-size: 0.875rem; }
  .addr-done {
    min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--border-control); border-radius: 999px;
    background: none; color: var(--text); font-size: 0.9375rem; font-weight: 600; cursor: pointer;
  }
}


/* ============================================================
   THE FIXED FARE BAR
   Keeps clear of the home indicator, and gets out of the way of the
   keyboard (js/mobile.js sets body.kb-open while a field has focus).
   ============================================================ */
@media (max-width: 899.98px) {
  .sticky-quote { padding-bottom: calc(0.625rem + env(safe-area-inset-bottom)); }
  body { padding-bottom: calc(5.25rem + env(safe-area-inset-bottom)); }
  .to-top { bottom: calc(6rem + env(safe-area-inset-bottom)); }
  /* Over the calculator's send button and a rail card's price button the
     back-to-top sat on the control itself. While the fixed fare bar is up
     the page already has a way back to the fare; the button waits. */
  body:has(.sticky-quote.show) .to-top { display: none; }
  /* The body padding above clears the fare bar, but nothing cleared the
     button: 48px tall and 96px up, it sat on the last line of the footer
     — the map attribution — at the end of the page. The footer ends with
     room for the button and a breath under it (motion.css draws the
     footer with 26px at the foot). */
  footer.ft { padding-bottom: 5.75rem; }
}
@media (max-width: 1023.98px) {
  body.kb-open .sticky-quote, body.kb-open .to-top, body.addr-sheet-open .to-top { display: none; }
}


/* ============================================================
   YOUR BOOKING
   A bottom sheet on a phone. Everything in it scrolls together under a
   header that stays put, and the total and the send button hold at the
   foot — the note and "Empty the booking" follow them in the flow. Before,
   a 371px footer that never scrolled left a phone room for one booking.
   ============================================================ */
@media (max-width: 639.98px), (max-width: 1023.98px) and (max-height: 640px) {
  .drawer { display: block; overflow-y: auto; overscroll-behavior: contain; }
  .drawer-head { position: sticky; top: 0; z-index: 3; background: var(--surface); }
  .drawer-body { overflow: visible; padding: 0 1.25rem; }
  .drawer-foot { display: contents; }
  .drawer-total {
    position: sticky; bottom: calc(5.375rem + env(safe-area-inset-bottom)); z-index: 2;
    margin: 0; padding: 0.875rem 1.25rem 0.375rem; background: var(--surface);
    border-top: 1px solid var(--border);
  }
  .drawer-foot > p.muted { margin: 0.25rem 1.25rem 1rem !important; font-size: 0.875rem !important; }
  #cartSend {
    display: flex; position: sticky; bottom: calc(0.875rem + env(safe-area-inset-bottom)); z-index: 2;
    width: auto; margin: 0 1.25rem;
    /* paint the band behind the button, edge to edge and down past the
       home indicator, so the list scrolls under a solid foot */
    box-shadow: 0 0 0 20px var(--surface), 0 calc(24px + env(safe-area-inset-bottom)) 0 20px var(--surface);
  }
  /* after the button in the flow, so they only arrive once it has come
     unstuck; above its painted band so the band never crops them */
  #cartWarn { position: relative; z-index: 3; margin: 1.25rem 1.25rem 0; }
  #cartClear {
    display: flex; position: relative; z-index: 3; width: calc(100% - 2.5rem);
    margin: 1.875rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
  }
  /* the copy fallback, where to send it, and the reasons a send was refused
     follow the send button in the flow, inside the sheet's gutter */
  #cartCopy { display: flex; position: relative; z-index: 3; width: calc(100% - 2.5rem); margin: 1.375rem 1.25rem 0; }
  #cartOr, #cartHelp, #cartText { position: relative; z-index: 3; margin: 0.75rem 1.25rem 0; width: auto; }
}
@media (max-width: 639.98px) {
  .drawer {
    top: auto; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; width: 100%;
    max-height: calc(100vh - 1.75rem);
    max-height: calc(100dvh - 1.75rem - env(safe-area-inset-top));
    border-inline-start: 0; border-top: 1px solid var(--border-control); border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    box-shadow: 0 -24px 60px -30px rgba(0, 0, 0, .45);
  }
  .drawer.show { transform: none; }
  .drawer-head {
    padding: 1.75rem 1.25rem 0.875rem; border-radius: 16px 16px 0 0;
    touch-action: none;   /* js/mobile.js: pull the handle down to close */
  }
  .drawer-head::before {
    content: ""; position: absolute; top: 0.625rem; inset-inline-start: 50%; width: 2.5rem; height: 0.25rem; margin-inline-start: -1.25rem;
    border-radius: 2px; background: var(--border-control);
  }
  .drawer-head h2 { font-size: 1.5625rem; }
  .cart-route { font-size: 1.1875rem; }
}
@media (max-width: 1023.98px) and (max-height: 640px) and (min-width: 640px) {
  .drawer { padding-inline-end: env(safe-area-inset-right); }
  /* a phone on its side has 390px for the whole sheet */
  .drawer-head { padding: 0.75rem 1.25rem 0.625rem; }
  .drawer-head h2 { font-size: 1.4375rem; }
  .drawer-total { padding-top: 0.625rem; }
}


/* ============================================================
   THE COMMAND BAR
   A sheet from the top on a touch screen, where the keyboard comes up from
   the bottom. The ⌘K and arrow-key hints mean nothing without a keyboard,
   so a close button stands in for "esc".
   ============================================================ */
@media (max-width: 1023.98px) {
  .pal {
    padding: calc(0.5rem + env(safe-area-inset-top)) max(0.5rem, env(safe-area-inset-right))
             0.5rem max(0.5rem, env(safe-area-inset-left));
  }
  .pal-in { max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem - env(safe-area-inset-top)); }
  .pal-top { padding: 0.5rem 0.5rem 0.5rem 1rem; }
  .pal-item { grid-template-columns: 84px minmax(0, 1fr); }
}
@media (max-width: 1023.98px), (hover: none) and (pointer: coarse) {
  .pal-input { min-height: 2.75rem; }
  .pal-list { overscroll-behavior: contain; }
  .pal-item { min-height: 3.25rem; align-content: center; }
  .pal-kind { font-size: 0.75rem; }
  .pal-x {
    display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; padding: 0;
    border: 1px solid var(--border-control); border-radius: 2px; background: none;
    color: var(--muted); cursor: pointer;
  }
}
@media (hover: none) and (pointer: coarse) {
  .pal-esc, .pal-foot { display: none; }
}


/* ============================================================
   THE GALLERY
   ============================================================ */
@media (max-width: 1023.98px), (hover: none) and (pointer: coarse) {
  .lb-top {
    padding: calc(0.625rem + env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
             0.625rem max(1rem, env(safe-area-inset-left));
  }
  /* horizontal swipes are ours (js/mobile.js); a pinch still zooms */
  .lb-stage { touch-action: pan-y pinch-zoom; }
  .lb-strip {
    padding: 0.625rem max(1rem, env(safe-area-inset-right))
             calc(0.75rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    overscroll-behavior-x: contain;
  }
}


/* ============================================================
   THE PUBLISHED RATES — cards on a phone
   Scrolling sideways hid the three columns that matter, base fare,
   included distance and the per-km rate, behind the car and seat count.
   ============================================================ */
@media (max-width: 639.98px) {
  .rates { background: none; overflow: visible; }
  .rate-table { display: block; min-width: 0; }
  .rate-table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .rate-table tbody { display: block; border-top: 1px solid var(--border); }
  .rate-table tbody tr {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "car car car" "base inc km" "seats bags .";
    gap: 0.75rem 0.875rem; padding: 0.375rem 0 1.125rem; border-bottom: 1px solid var(--border);
  }
  .rate-table tbody th, .rate-table tbody td {
    display: block; padding: 0; border: 0; white-space: normal; text-align: start;
  }
  .rate-table tbody tr:hover td, .rate-table tbody tr:hover th { background: none; }
  .rate-table tbody .num { text-align: start; }
  .rate-table tbody th { grid-area: car; }
  .rate-table .rate-pick { padding: 0; min-height: 3rem; display: flex; align-items: center; font-size: 1.0625rem; }
  /* bottom-aligned, so a label that wraps at 320px does not drop its value
     below its neighbours' */
  .rate-table tbody td { align-self: end; font-size: 1rem; color: var(--text); font-variant-numeric: tabular-nums; }
  .rate-table tbody td::before {
    display: block; margin-bottom: 0.1875rem; font-size: 0.75rem; font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted);
  }
  .rate-table tbody td:nth-of-type(1) { grid-area: seats; }
  .rate-table tbody td:nth-of-type(2) { grid-area: bags; }
  .rate-table tbody td:nth-of-type(3) { grid-area: base; }
  .rate-table tbody td:nth-of-type(4) { grid-area: inc; }
  .rate-table tbody td:nth-of-type(5) { grid-area: km; }
  .rate-table tbody td:nth-of-type(1)::before { content: "Seats"; }
  .rate-table tbody td:nth-of-type(2)::before { content: "Bags"; }
  .rate-table tbody td:nth-of-type(3)::before { content: "Base fare"; }
  .rate-table tbody td:nth-of-type(4)::before { content: "Included"; }
  .rate-table tbody td:nth-of-type(5)::before { content: "Per km after"; }
}


/* ============================================================
   COVERAGE — maps and routes
   ============================================================ */
@media (max-width: 1023.98px), (hover: none) and (pointer: coarse) {
  .ops-view-btn { min-height: 2.75rem; }
}
@media (hover: none) and (pointer: coarse) {
  /* Leaflet's zoom buttons are 30px; its own stylesheet loads after this
     one, hence the extra `html` in the selector. */
  html .leaflet-touch .leaflet-bar a { width: 2.75rem; height: 2.75rem; line-height: 2.75rem; font-size: 1.375rem; }

  /* js/mobile.js shows this when one finger tries to drag a map whose
     dragging is off: one finger scrolls the page, two move the map. */
  .map-hint {
    position: absolute; inset: 0; z-index: 1001; display: grid; place-items: center;
    padding: 1.25rem; text-align: center; pointer-events: none;
    background: rgba(var(--bg-rgb), .62); color: var(--text);
    font-size: 0.9688rem; font-weight: 700; letter-spacing: -0.005em;
    opacity: 0; transition: opacity .25s ease;
  }
  .map-hint.on { opacity: 1; }
}


/* ============================================================
   THE TOOLS
   ============================================================ */
@media (max-width: 999.98px) {
  /* Seventeen tabs in a strip that scrolls sideways. The strip fades at
     both edges so it reads as more-to-the-side rather than cut off; the
     padding lets the first and last tab sit clear of the fade. */
  .dock-nav {
    margin: 0 calc(-1 * max(1.25rem, env(safe-area-inset-left)));
    padding-inline-start: max(1.25rem, env(safe-area-inset-left));
    padding-inline-end: max(2.25rem, env(safe-area-inset-right));
    scroll-padding-inline: 1.25rem;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 32px), transparent 100%);
    overscroll-behavior-x: contain;
  }
}
/* a tablet held sideways gets the desktop's vertical tab list */
@media (hover: none) and (pointer: coarse) {
  .dock-tab { min-height: 2.75rem; }
}
@media (max-width: 639.98px) {
  /* a select sized for a desktop column cut its own label off */
  .tool-field-sm, .dock-stage .tool-field-sm { flex: 1 1 100%; }
  .share-row .btn { flex: 1 1 100%; }

  /* two-way switches split the width evenly and may wrap their words */
  .seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
  .seg-btn { padding: 0.5rem 0.625rem; line-height: 1.25; }

  /* the route library's rows are the buttons */
  .mx-go { display: flex; align-items: center; width: 100%; min-height: 2.75rem; }
}


/* ============================================================
   HOW A BOOKING WORKS
   The steps light one at a time as the line reaches them (js/motion.js).
   A desktop shows one or two unlit steps at a time; a phone has most of
   the list on screen at once, and at the desktop's .38 the whole column
   read as grey on black until the line caught up. Still dimmer than a lit
   step, but legible while the thumb is moving.
   ============================================================ */
@media (max-width: 1023.98px) {
  .walk.is-live .walk-step:not(.lit) .walk-body { opacity: .62; }
}


/* ============================================================
   SMALL TEXT
   ============================================================ */
@media (max-width: 1023.98px) {
  .rail-tag, .ops-legend-note, .fx-peg, .ops-route-fare small { font-size: 0.75rem; }
}
@media (max-width: 639.98px) {
  .ft-base { font-size: 0.875rem; }
}


/* ============================================================
   FOOTER
   ============================================================ */
@media (max-width: 1023.98px), (hover: none) and (pointer: coarse) {
  .ft-col a { min-height: 2.75rem; min-width: 2.75rem; }
}


/* ============================================================
   HOVER, ON A SCREEN WITHOUT ONE
   A tap leaves :hover stuck on whatever was touched, so the lifts, slides
   and zooms that follow a pointer stay put and look like a glitch.
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  .logo:hover .logo-mark,
  .btn:hover .go,
  .pick-card:hover, .tbx-card:hover, .ops-air:hover, .svc-cta:hover,
  .tbx-card:hover .tbx-go,
  .rail-card:hover .rail-ph img,
  .rail-end:hover .rail-end-go,
  .svc-tab:hover .svc-name,
  .ops-route:not(.is-active):hover .ops-route-name { transform: none; }
  .svc-item:not(.on) .svc-tab:hover .svc-name { color: inherit; }
  .rail-end:hover .rail-end-go { background: transparent; color: inherit; }
  .ft-col a:hover::after { transform: scaleX(0); }
  .ft-mark:hover text { opacity: .09; }
}


/* ============================================================
   MOTION ON SMALLER SCREENS
   The band and closing photographs no longer drift below 1024px
   (js/motion.js); without the drift there is nothing to promote.
   ============================================================ */
@media (max-width: 1023.98px) {
  .band > picture > img, .band > img, .cta-media { will-change: auto; }
}

/* The picker's paging buttons are for a mouse that cannot scroll sideways.
   A finger swipes the strip, so on a touch screen they go. */
@media (hover: none) and (pointer: coarse) {
  .veh-nav { display: none !important; }
}