/* Homepage redesign layer. Loaded only by index.html, after styles.css, so the
   booking, account, driver and Express pages keep their existing look.
   Light is the existing design. Dark is html[data-theme="dark"]. */

/* ---------- Theme toggle ---------- */
.theme-toggle {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  flex-shrink: 0;
  transition: background .2s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.theme-toggle:hover { background: rgba(244,163,0,.16); }
.theme-toggle:active { transform: scale(.92); }
.theme-toggle:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
.theme-toggle-row {
  width: auto;
  height: auto;
  min-height: 44px;
  justify-content: flex-start;
  padding: 10px 4px;
  border: 0;
  border-bottom: 1px solid var(--card-border);
  border-radius: 0;
  font-size: 14.5px;
  font-weight: 600;
}
.theme-toggle-row:hover { background: transparent; color: var(--amber); }
/* Header toggle on desktop and tablet; the mobile menu carries it on phones. */
@media (max-width: 560px) {
  .header-actions > .theme-toggle { display: none; }
}
@media (min-width: 860px) {
  .theme-toggle-row { display: none; }
}

/* The extra toggle needs room: drop the decorative clock on mid-width screens. */
@media (max-width: 1359px) {
  .live-clock { display: none !important; }
}

/* Tighten the header between the point the full nav appears and wide desktop. */
@media (min-width: 860px) and (max-width: 1059px) {
  .nav-account-link span { display: none; }
  .main-nav a, .nav-dropdown-trigger { padding: 8px 9px; }
  .header-actions { gap: 8px; }
}

/* Dark wordmark on light, light wordmark on dark. */
.wm-on-dark { display: none; }
html[data-theme="dark"] .site-header .wm-on-light,
html[data-theme="dark"] .mobile-nav-menu .wm-on-light { display: none !important; }
/* styles.css hides .brand-wordmark at 400px and below; keep that behaviour. */
@media (min-width: 401px) {
  html[data-theme="dark"] .site-header .wm-on-dark,
  html[data-theme="dark"] .mobile-nav-menu .wm-on-dark { display: block; }
}

/* ---------- Hero: five tiers, bold ---------- */
.hero-family-label {
  margin: 4px 0 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
}
.hero-chips { gap: 10px; margin: 0 0 24px; }
.hero-chips a {
  min-height: 48px;
  padding: 0 22px;
  font-size: 15px;
  font-weight: 700;
  border-width: 1.5px;
}
.hero-chips a.chip-primary {
  background: var(--amber);
  border-color: var(--amber);
  color: #12123B;
}
.hero-chips a.chip-primary:hover { background: #FFB627; border-color: #FFB627; }

/* ---------- How it works: image steps ---------- */
.how-section { padding-top: 88px; }
.how-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 40px;
  margin-bottom: 40px;
}
.how-head > div { flex: 1 1 460px; min-width: 0; }
.how-head h2 { max-width: 640px; margin: 0; font-size: clamp(28px, 4.4vw, 44px); line-height: 1.1; letter-spacing: -.015em; }
.how-head p { flex: 0 1 360px; margin: 0; color: var(--text-muted); font-size: 16px; }
.how-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
  scrollbar-width: thin;
}
.how-step {
  flex: 0 0 290px;
  scroll-snap-align: start;
  position: relative;
  min-width: 0;
}
.how-step img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 860 / 1075;
  object-fit: cover;
  border-radius: 24px;
  border: 1px solid var(--card-border);
  box-shadow: 0 18px 40px rgba(18,18,59,.14);
}
.how-num {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--amber);
  color: #12123B;
  font-weight: 800;
  font-size: 16px;
  box-shadow: 0 6px 14px rgba(0,0,0,.35);
}
.how-cap-title { margin: 16px 4px 6px; font-size: 20px; line-height: 1.2; }
.how-cap-body { margin: 0 4px; color: var(--text-muted); font-size: 15px; line-height: 1.5; }
.how-step-cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 32px 26px;
  border-radius: 24px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 12px 28px rgba(18,18,59,.06);
}
.how-step-cta .eyebrow { margin: 0; }
.how-step-cta h3 { margin: 0; font-size: 26px; line-height: 1.18; }
.how-step-cta p { margin: 0; color: var(--text-muted); font-size: 15px; }
.how-step-cta .btn { align-self: flex-start; }
@media (min-width: 720px) {
  .how-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    overflow: visible;
    padding-bottom: 0;
  }
  .how-step { flex: none; }
}

/* ---------- Services polish ---------- */
.service-card h3 { font-size: 20px; }
.service-card-cta { color: var(--amber-text); }

/* ---------- Dark theme ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #F3F3FA;
  --title: #FFFFFF;
  --text-muted: #A9ADC9;
  --card-border: rgba(255,255,255,.12);
  --glass-bg: rgba(255,255,255,.06);
  --glass-border: rgba(255,255,255,.14);
  --primary: #A9C0F5;
  --primary-tint: rgba(255,255,255,.08);
  --amber-text: #F4A300;
}
html[data-theme="dark"] body { background: #0A0C24; }
html[data-theme="dark"] h1 .brand-arrivo,
html[data-theme="dark"] h2 .brand-arrivo { color: var(--amber); }

/* Header and menus */
html[data-theme="dark"] .site-header {
  background: rgba(10,12,36,.62);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 8px 24px rgba(0,0,0,.35);
}
html[data-theme="dark"] .site-header.is-scrolled {
  background: rgba(10,12,36,.5);
  border-color: rgba(255,255,255,.16);
}
html[data-theme="dark"] .mobile-nav-menu {
  background: rgba(10,12,36,.9);
  border-color: rgba(255,255,255,.14);
}
html[data-theme="dark"] .lang-menu,
html[data-theme="dark"] .nav-dropdown-menu {
  background: #151A40;
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 12px 28px rgba(0,0,0,.5);
}
html[data-theme="dark"] .lang-menu .lang-opt:hover,
html[data-theme="dark"] .nav-dropdown-menu a:hover,
html[data-theme="dark"] .lang-trigger:hover,
html[data-theme="dark"] .mobile-nav-close:hover { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .lang-menu .lang-opt.active { background: var(--amber); color: #12123B; }
html[data-theme="dark"] .mobile-nav-backdrop { background: rgba(0,0,0,.55); }

/* Buttons keep dark text on the amber glass */
html[data-theme="dark"] .btn-primary { color: #12123B; }
html[data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.6); }

/* Surfaces */
html[data-theme="dark"] .section-tint { background: #0E1131; }
html[data-theme="dark"] .card { box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 12px 28px rgba(0,0,0,.35); }
/* The light-mode glass highlight is far too bright on navy; soften it. */
html[data-theme="dark"] .card::before {
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.16), rgba(255,255,255,.04) 30%, transparent 55%);
}
html[data-theme="dark"] .how-step img { box-shadow: 0 18px 40px rgba(0,0,0,.5); border-color: rgba(255,255,255,.12); }
html[data-theme="dark"] .how-step-cta { box-shadow: 0 12px 28px rgba(0,0,0,.35); }
html[data-theme="dark"] .fleet-photo-frame { box-shadow: 0 14px 34px rgba(0,0,0,.5); }
html[data-theme="dark"] .waitlist-form input {
  background: rgba(255,255,255,.07);
  color: var(--ink);
  border-color: rgba(255,255,255,.2);
}
html[data-theme="dark"] .waitlist-form input::placeholder { color: #8E92B3; }

/* Footer and badges stay deep navy */
html[data-theme="dark"] .site-footer { background: #070919; color: #F5F3EE; }
html[data-theme="dark"] .footer-social-icon { color: #F5F3EE; }
html[data-theme="dark"] .footer-social-icon:hover { background: var(--amber); color: #12123B; }
html[data-theme="dark"] .store-badge { background: #1B1F45; color: #F5F3EE; }
html[data-theme="dark"] .skip-link { background: var(--amber); color: #12123B; }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle, .theme-toggle:active { transition: none; transform: none; }
}

/* ---------- Header: smaller type so every link sits on one line ---------- */
.header-inner { gap: 14px; }
.main-nav { gap: 2px; font-size: 13px; }
.main-nav a,
.nav-dropdown-trigger {
  padding: 8px 11px;
  font-size: 13px;
  white-space: nowrap;
}
.nav-account-link, .nav-account-link span { font-size: 13px; white-space: nowrap; }
.header-actions { gap: 10px; }
@media (min-width: 860px) and (max-width: 1059px) {
  .main-nav a, .nav-dropdown-trigger { padding: 8px 8px; font-size: 12.5px; }
}

/* ---------- Hero: copy on the left, booking form on the right ---------- */
.hero-split-inner { display: grid; gap: 28px; align-items: center; }
@media (min-width: 980px) {
  .hero-split-inner { grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; }
}
.hero-copy { max-width: 640px; min-width: 0; }
.hero-copy h1 {
  color: #fff;
  font-size: clamp(34px, 5.4vw, 60px);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 10px 0 18px;
}
.hero-copy h1 {
  font-family: 'Poppins', 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 700;
}
.hero-copy h1 .brand-ride { color: #fff; }
.hero-copy h1 .brand-arrivo { color: var(--amber); }
.hero-copy .hero-sub { max-width: 520px; font-size: 16.5px; line-height: 1.55; }
.hero-trust {
  margin-top: 44px;
  padding: 16px 24px;
  justify-content: space-between;
  gap: 12px 24px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: rgba(10,12,36,.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.hero-trust li { font-size: 13px; }

.hero-form {
  position: relative;
  min-width: 0;
  padding: 22px;
  border-radius: 24px;
  color: #fff;
  background: rgba(14,16,48,.74);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 28px 60px rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
.hf-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
}
.hf-tab {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  text-align: center;
  padding: 11px 8px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,.78);
  transition: background .2s ease, color .2s ease;
}
.hf-tab:hover { color: #fff; }
.hf-tab.is-active { background: #fff; color: #12123B; }
.hf-tab:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.hf-label {
  display: block;
  margin: 14px 0 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.hf-input {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  color: #fff;
  font: inherit;
  font-size: 15px;
  color-scheme: dark;
}
.hf-input::placeholder { color: rgba(255,255,255,.55); }
.hf-input:focus { outline: 3px solid rgba(244,163,0,.55); outline-offset: 0; border-color: var(--amber); }
.hf-when { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hf-when[hidden] { display: none; }
.hf-error { margin: 12px 0 0; font-size: 13px; color: #FFB4A8; }
.hf-submit { width: 100%; justify-content: center; margin-top: 18px; min-height: 52px; font-size: 15.5px; }
.hf-note { margin: 12px 0 0; text-align: center; font-size: 12.5px; color: rgba(255,255,255,.7); }
.pac-container { z-index: 2000; }

/* Flat amber on the hero buttons: the glass sheen was washing out the label. */
.hf-submit,
.hero-ctas .btn-primary {
  background: var(--amber);
  background-image: none;
  color: #12123B;
  border-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.hf-submit::before,
.hero-ctas .btn-primary::before,
.hf-submit::after,
.hero-ctas .btn-primary::after { display: none; }
.hf-submit:hover,
.hero-ctas .btn-primary:hover { background: #FFB627; }

/* ---------- Shorter header ---------- */
:root { --hdr-h: 52px; }
.header-inner { padding-top: 6px; padding-bottom: 6px; }
.brand { padding: 2px 0; }
.main-nav a, .nav-dropdown-trigger { padding-top: 6px; padding-bottom: 6px; }
.theme-toggle { width: 34px; height: 34px; }
.lang-trigger { min-height: 34px; padding: 6px 12px; }
.btn-sm { min-height: 34px; padding: 8px 18px; }
.mobile-nav-toggle { width: 38px; height: 38px; padding: 8px; }
.nav-account-link { padding-top: 2px; padding-bottom: 2px; }
/* The hero photo runs up behind the header; keep content where it was. */
.hero { margin-top: calc(-1 * var(--hdr-h)); padding-top: calc(100px + var(--hdr-h)); }
@media (min-width: 780px) {
  .hero { padding-top: calc(130px - 74.5px + var(--hdr-h)); }
}

/* ---------- Header: double-click to unpin, drag anywhere ---------- */
@media (min-width: 860px) {
  .site-header:not(.is-floating) .header-inner { cursor: default; }
}
.site-header.is-floating {
  position: fixed;
  right: auto;
  margin: 0;
  z-index: 80;
  border-radius: 999px;
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.72);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 18px 44px rgba(18,18,59,.28);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.site-header.is-floating { width: max-content; max-width: calc(100vw - 24px); }
.site-header.is-floating .header-inner { max-width: none; width: auto; margin: 0; gap: 16px; padding-left: 18px; padding-right: 18px; }
.site-header.is-floating.is-dragging { cursor: grabbing; box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 26px 60px rgba(18,18,59,.38); }
html[data-theme="dark"] .site-header.is-floating {
  background: rgba(14,16,48,.82);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 18px 44px rgba(0,0,0,.6);
}

/* ---------- Audit fixes ---------- */
/* Hero photo: a 960px file for phones and tablets, the full one on desktop. */
.hero-bg { background-image: url("assets/hero/slide-1-960.webp"); }
@media (min-width: 1000px) { .hero-bg { background-image: url("assets/hero/slide-1-1672.webp"); } }

/* iOS zooms the page when a field under 16px gets focus. */
@media (max-width: 979px) {
  .hf-input { font-size: 16px; }
}
/* A finger dragging the floating header should move it, not scroll the page. */
.site-header.is-floating { touch-action: none; }

/* Keyboard focus on the new hero controls. */
.hero-chips a:focus-visible,
.hero-ctas .btn:focus-visible,
.hf-submit:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hf-input[aria-invalid="true"] { border-color: #FFB4A8; }

/* Contrast: footer and "coming soon" badges (WCAG AA needs 4.5:1 for small text). */
.footer-credit-label { color: #B4B4D6; opacity: 1; }
.footer-legal-entity { color: #B4B4D6; }
.store-badge { opacity: 1; background: #26265C; border: 1px dashed rgba(255,255,255,.28); }
.store-badge-text small { color: #E4E4F4; }
.store-badge-text strong { color: #fff; }

/* On the narrowest phones the longer French and Portuguese "Book a ride" label
   pushes the header past the screen edge. The hero has the same button. */
@media (max-width: 359px) {
  .header-actions > .btn-sm { display: none; }
}
/* Double-clicking the header to move it should not select the words under it. */
@media (min-width: 860px) {
  .site-header { -webkit-user-select: none; user-select: none; }
}

/* Address suggestions (our own list; Google only supplies the text). */
.hf-field { position: relative; }
.hf-suggest {
  position: absolute;
  z-index: 30;
  left: 0; right: 0; top: calc(100% + 6px);
  margin: 0; padding: 6px;
  list-style: none;
  border-radius: 14px;
  background: rgba(14,16,48,.97);
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 18px 40px rgba(0,0,0,.5);
  max-height: 260px;
  overflow-y: auto;
}
.hf-suggest[hidden] { display: none; }
.hf-suggest li {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14.5px;
  line-height: 1.35;
  color: #fff;
  cursor: pointer;
}
.hf-suggest li:hover,
.hf-suggest li.is-active { background: rgba(244,163,0,.22); }

/* ---------- Phone menu fixes ---------- */
/* The menu header lost both wordmarks (styles.css hides them at 400px and
   below); show the one that matches the theme. */
.mobile-nav-menu-header .brand-wordmark { display: none; }
html:not([data-theme="dark"]) .mobile-nav-menu-header .wm-on-light { display: block !important; }
html[data-theme="dark"] .mobile-nav-menu-header .wm-on-dark { display: block !important; }
/* The theme row was shrinking to 34px wide and wrapping its label onto the next links. */
.mobile-nav-menu .theme-toggle-row {
  display: flex;
  width: 100%;
  align-self: stretch;
  white-space: nowrap;
  gap: 10px;
}
/* A solid menu panel: the glass blur let the page text show through the links. */
.mobile-nav-menu { background: rgba(247, 244, 236, .98); }
html[data-theme="dark"] .mobile-nav-menu { background: #0E1131; }

/* How it works: each step lifts on hover, with the same springy motion the
   photo cards used to have. Keyboard focus inside a step does the same. */
.how-step:not(.how-step-cta) {
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.how-step:not(.how-step-cta) img {
  transition: box-shadow .35s ease, border-color .25s ease;
}
.how-step:not(.how-step-cta):hover,
.how-step:not(.how-step-cta):focus-within { transform: translateY(-6px); }
.how-step:not(.how-step-cta):hover img,
.how-step:not(.how-step-cta):focus-within img {
  box-shadow: 0 26px 52px rgba(18,18,59,.24);
  border-color: var(--amber);
}
html[data-theme="dark"] .how-step:not(.how-step-cta):hover img,
html[data-theme="dark"] .how-step:not(.how-step-cta):focus-within img {
  box-shadow: 0 26px 52px rgba(0,0,0,.65);
}
.how-step:hover .how-num { transform: scale(1.08); }
.how-num { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
@media (prefers-reduced-motion: reduce) {
  .how-step:not(.how-step-cta), .how-num { transition: none; }
  .how-step:not(.how-step-cta):hover, .how-step:not(.how-step-cta):focus-within { transform: none; }
  .how-step:hover .how-num { transform: none; }
}
/* Room above and below the steps so the lift and its shadow are not clipped by the scroll area. */
.how-steps { padding-top: 12px; margin-top: -12px; padding-bottom: 36px; margin-bottom: -26px; }

/* ---------- FAQ ---------- */
.faq-section { padding-top: 24px; }
.faq-head { max-width: 640px; margin-bottom: 28px; }
.faq-head h2 { margin: 0; font-size: clamp(28px, 4.4vw, 44px); line-height: 1.1; letter-spacing: -.015em; }
.faq-list { display: grid; gap: 12px; max-width: 820px; }
.faq-item {
  border: 1px solid var(--card-border);
  border-radius: 18px;
  background: var(--glass-bg);
  transition: border-color .2s ease, box-shadow .3s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.faq-item:hover { border-color: var(--amber); transform: translateY(-2px); }
.faq-item[open] { border-color: var(--amber); box-shadow: 0 14px 32px rgba(18,18,59,.10); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.35;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 18px; }
.faq-icon {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  transition: transform .3s ease, background .2s ease, border-color .2s ease;
}
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 12px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .3s ease, background .2s ease;
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-icon { background: var(--amber); border-color: var(--amber); transform: rotate(180deg); }
.faq-item[open] .faq-icon::before, .faq-item[open] .faq-icon::after { background: #12123B; }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-body { padding: 0 22px 20px; color: var(--text-muted); font-size: 16px; line-height: 1.6; }
.faq-body p { margin: 0 0 10px; max-width: 680px; }
.faq-body p:last-child { margin-bottom: 0; }
.faq-body a { color: var(--primary); font-weight: 600; text-decoration: underline; }
html[data-theme="dark"] .faq-body a { color: #A9C0F5; }
html[data-theme="dark"] .faq-item[open] { box-shadow: 0 14px 32px rgba(0,0,0,.45); }
@media (prefers-reduced-motion: reduce) {
  .faq-item, .faq-icon, .faq-icon::before, .faq-icon::after { transition: none; }
  .faq-item:hover { transform: none; }
}

/* Hero icons (Font Awesome Free, CC BY 4.0). Sized in em so they follow the text,
   coloured with currentColor so hover and focus states carry over. */
.ico { width: 1.15em; height: 1.15em; flex: none; }
.hero-chips a { gap: 9px; }
.hero-chips a .ico { width: 1.2em; height: 1.2em; }
.hero-trust li { gap: 12px; }
.hero-trust .ico { width: 1.7em; height: 1.7em; color: var(--amber); }

/* Logo lettering as the last line of the English headline. */
.hero-copy h1 .hero-wm { display: block; position: relative; width: fit-content; margin-top: .12em; }
.hero-copy h1 .hero-wordmark { display: block; height: 1.02em; width: auto; }
/* A second copy of the lettering that carries the glow. It is cut off just before
   the A, so only "Arrivo" lights up. The cut uses negative insets so the glow can
   spill past the top, bottom and right edges (a filter is applied before the clip). */
.hero-copy h1 .hero-wordmark-glow {
  position: absolute; left: 0; top: 0; height: 100%; width: auto;
  clip-path: inset(-40% -12% -40% 47%);
  filter: drop-shadow(0 0 14px rgba(255,150,10,.85));
  opacity: 0; pointer-events: none;
}

/* Play icon on the secondary hero button. */
.btn-ghost .ico-play { width: 1.5em; height: 1.5em; margin-left: 10px; vertical-align: -0.38em; }

/* Pin inside the pickup and destination fields. */
.hf-field .hf-pin { position: absolute; left: 14px; top: 24px; transform: translateY(-50%); width: 1em; height: 1em; color: #fff; pointer-events: none; }
.hf-field .hf-input { padding-left: 42px; }

/* Headline intro, "touchdown": each line glides in from the left with extra slant
   and settles into the normal italic; the logo lettering lands last and gives
   one soft glow. Runs only while html has .hero-intro (set in the page head, and
   never set when the visitor prefers reduced motion). Transform, opacity and
   filter only, so it stays on the compositor. */
.hero-copy h1 .hl-line { display: block; }
@keyframes hl-touchdown {
  from { opacity: 0; transform: translateX(-46px) skewX(-12deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes hl-logo-in {
  from { opacity: 0; transform: translateX(-34px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hl-glow { 0%, 100% { opacity: 0; } 45% { opacity: 1; } }
@keyframes hl-fade { from { opacity: 0; } to { opacity: 1; } }
.hero-intro .hero-copy h1 .hl-line { animation: hl-touchdown .85s cubic-bezier(.16,1,.3,1) both; }
.hero-intro .hero-copy h1 .hl-line:nth-child(2) { animation-delay: .16s; }
.hero-intro .hero-copy h1 .hero-wm { animation: hl-logo-in .8s cubic-bezier(.16,1,.3,1) .42s both; }
.hero-intro .hero-copy h1 .hero-wordmark-glow { animation: hl-glow 1.3s ease-in-out 1.15s 1 both; }
/* Other languages have no split lines: a plain fade of the whole headline. */
.hero-intro .hero-copy h1:not(:has(.hl-line)) { animation: hl-fade .7s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .hero-intro .hero-copy h1, .hero-intro .hero-copy h1 * { animation: none !important; }
}

/* ---- Hero background slideshow (hero-slides.js) -------------------------------
   Every slide is a .hero-bg stacked in the hero. The active one fades in on top,
   the one leaving stays underneath until the fade has finished, and each drifts
   with a slow zoom. --hero-fade must match FADE in hero-slides.js. */
.hero { --hero-fade: 1400ms; --hero-drift: 10000ms; }
.hero-slide {
  opacity: 0;
  z-index: -3;
  transition: opacity var(--hero-fade) ease-in-out;
  will-change: opacity;
}
.hero-slide.is-leaving { opacity: 1; z-index: -3; }
.hero-slide.is-active { opacity: 1; z-index: -2; }
.hero-slide.is-active,
.hero-slide.is-leaving { animation: hero-drift var(--hero-drift) ease-out both; }
.hero-slide[data-kb="1"] { transform-origin: 70% 45%; }
.hero-slide[data-kb="2"] { transform-origin: 40% 65%; }
.hero-slide[data-kb="0"] { transform-origin: 30% 40%; }
@keyframes hero-drift {
  from { transform: scale(1); }
  to   { transform: scale(1.09); }
}
.hero-still .hero-slide { transition: none; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; animation: none !important; }
}

/* Controls: a pause button and one dot per picture. */
.hero-slider-ui {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px; z-index: 3;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(10,12,28,.45); border: 1px solid rgba(255,255,255,.14);
}
.hero-pause, .hero-dot {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  width: 28px; height: 28px; display: grid; place-items: center; color: #fff; border-radius: 50%;
}
.hero-pause[hidden] { display: none; }
.hero-pause svg { width: 14px; height: 14px; fill: currentColor; }
.hero-pause .ic-play { display: none; }
.hero-pause.is-paused .ic-play { display: block; }
.hero-pause.is-paused .ic-pause { display: none; }
.hero-dot span {
  width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5);
  transition: background .2s ease, transform .2s ease;
}
.hero-dot.is-on span { background: var(--amber); transform: scale(1.35); }
.hero-pause:hover, .hero-dot:hover span { background-color: rgba(255,255,255,.18); }
.hero-dot:hover span { background: #fff; }
.hero-pause:focus-visible, .hero-dot:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
@media (max-width: 779px) { .hero-slider-ui { bottom: 10px; } }

/* Phones and tablets: the hero is tall (headline, form and trust strip stack), so a
   wide photo set to "cover" would be blown up and blurry. Show it instead as a band
   behind the headline at about its natural size, focused on --pos (set per photo in
   hero-slides.js), and fade the bottom of the band into the dark hero colour. */
@media (max-width: 999px) {
  .hero { background-color: #0b0d1c; }
  .hero-slide {
    bottom: auto;
    height: 620px;
    background-position: var(--pos, 50% 50%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 58%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0, #000 58%, transparent 100%);
  }
}

/* ---------- Header: dock to a screen edge as a vertical pill ---------- */
/* header-move.js adds .is-side (and -left / -right) when the floating header is
   dragged to a window edge. Every control becomes an icon button; its label
   shows on hover or keyboard focus, read from data-tip. */
@media (min-width: 860px) {
  .site-header.is-side { overflow: visible; width: max-content; }
  .site-header.is-side .header-inner { flex-direction: column; align-items: center; gap: 8px; padding: 10px 8px 14px; width: auto; }
  .site-header.is-side .header-inner::before { content: ""; width: 22px; height: 4px; border-radius: 4px; background: currentColor; opacity: .3; margin-bottom: 2px; }
  .site-header.is-side .brand .brand-wordmark { display: none; }
  .site-header.is-side .brand { gap: 0; }
  .site-header.is-side .main-nav,
  .site-header.is-side .header-actions { flex-direction: column; align-items: center; gap: 8px; margin: 0; padding: 0; }
  .site-header.is-side .mobile-nav-toggle,
  .site-header.is-side .mobile-nav-menu { display: none; }

  /* One round button per control. */
  .site-header.is-side .main-nav > a,
  .site-header.is-side .nav-dropdown-trigger,
  .site-header.is-side .nav-account-link,
  .site-header.is-side .header-actions > .btn,
  .site-header.is-side .header-actions > .theme-toggle {
    position: relative; display: grid; place-items: center;
    width: 44px; height: 44px; min-width: 0; padding: 0; margin: 0;
    border-radius: 50%; font-size: 0; line-height: 0; overflow: visible;
  }
  .site-header.is-side .nav-dropdown-trigger > *,
  .site-header.is-side .nav-account-link > span { display: none; }
  .site-header.is-side .nav-account-link svg { width: 22px; height: 22px; }

  /* Icons for the text-only controls. */
  .site-header.is-side .main-nav > a::before,
  .site-header.is-side .nav-dropdown-trigger::before,
  .site-header.is-side .header-actions > .btn::before {
    content: ""; display: block; width: 21px; height: 21px; background: currentColor;
    -webkit-mask: var(--pill-ico) center / contain no-repeat; mask: var(--pill-ico) center / contain no-repeat;
  }
  .site-header.is-side .main-nav > a[href$="#how"] { --pill-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M15.5 8.5l-2 5-5 2 2-5z'/></svg>"); }
  .site-header.is-side .main-nav > a[href$="#audiences"] { --pill-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='3'/><path d='M3 20c.8-3.4 3.2-5 6-5s5.2 1.6 6 5'/><path d='M16 5.2a3 3 0 010 5.6M18 15c1.8.7 3 2.2 3.5 5'/></svg>"); }
  .site-header.is-side .main-nav > a[href$="#safety"] { --pill-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l8 3v6c0 4.5-3.4 7.8-8 9-4.6-1.2-8-4.5-8-9V6z'/><path d='M9 12l2 2 4-4'/></svg>"); }
  .site-header.is-side .nav-dropdown-trigger { --pill-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'><rect x='4' y='4' width='6.5' height='6.5' rx='1.5'/><rect x='13.5' y='4' width='6.5' height='6.5' rx='1.5'/><rect x='4' y='13.5' width='6.5' height='6.5' rx='1.5'/><rect x='13.5' y='13.5' width='6.5' height='6.5' rx='1.5'/></svg>"); }
  .site-header.is-side .header-actions > .btn { --pill-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 16l1.6-5.2A2 2 0 017.5 9.4h9a2 2 0 011.9 1.4L20 16'/><path d='M3 16h18v3H3z'/><circle cx='7.5' cy='19.5' r='1'/><circle cx='16.5' cy='19.5' r='1'/></svg>"); }

  /* Label on hover or keyboard focus, on the side facing the page. */
  .site-header.is-side [data-tip]::after {
    content: attr(data-tip); display: block; position: absolute; top: 50%; transform: translateY(-50%);
    white-space: nowrap; padding: 7px 12px; border-radius: 999px;
    background: #12123B; color: #fff; font: 600 12.5px/1 Inter, system-ui, sans-serif; letter-spacing: 0;
    box-shadow: 0 8px 22px rgba(18,18,59,.3);
    opacity: 0; pointer-events: none; transition: opacity .14s ease; z-index: 5;
  }
  html[data-theme="dark"] .site-header.is-side [data-tip]::after { background: #F7F4EC; color: #12123B; }
  .site-header.is-side-left [data-tip]::after { left: calc(100% + 12px); }
  .site-header.is-side-right [data-tip]::after { right: calc(100% + 12px); }
  .site-header.is-side [data-tip]:hover::after,
  .site-header.is-side [data-tip]:focus-visible::after { opacity: 1; }
  .site-header.is-side.is-dragging [data-tip]::after { opacity: 0; }

  /* The Services menu opens sideways, toward the page. */
  .site-header.is-side .nav-dropdown { position: relative; }
  .site-header.is-side .nav-dropdown-menu { top: 0; bottom: auto; min-width: 190px; }
  .site-header.is-side-left .nav-dropdown-menu { left: calc(100% + 12px); right: auto; }
  .site-header.is-side-right .nav-dropdown-menu { right: calc(100% + 12px); left: auto; }
}

/* Side dock, slimmer: drop the date and time (it made the pill twice as wide)
   and shrink the language switch to a round icon-sized button. */
.site-header.is-side .live-clock { display: none !important; }
.site-header.is-side .lang-dropdown { display: flex; justify-content: center; }
.site-header.is-side .lang-trigger { width: 44px; min-width: 0; padding: 0; justify-content: center; }
.site-header.is-side .lang-trigger > svg { display: none; }

/* Three tabs: tighter padding so longer translations still fit one row, and
   [hidden] must win over the display set on labels and blocks above. */
.hf-tab { padding: 11px 6px; font-size: 13.5px; }
.hero-form [hidden] { display: none !important; }
/* Phones and small tablets: put the quote form directly under the headline.
   The service chips and secondary links follow it instead of pushing it
   below the first screen. display:contents lets the copy's children be
   ordered alongside the form without changing the HTML. */
@media (max-width: 979px) {
  .hero-split-inner { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
  .hero-copy { display: contents; }
  .hero-copy .eyebrow { order: 1; }
  .hero-copy h1 { order: 2; margin-bottom: 0; }
  .hero-copy .hero-sub {
    order: 3; margin: 0; font-size: 15px; line-height: 1.45;
  }
  .hero-form { order: 4; }
  .hero-copy .hero-ctas { order: 5; margin: 0; }
  .hero-copy .hero-family-label { order: 6; margin: 4px 0 -8px; }
  .hero-copy .hero-chips { order: 7; margin: 0; }
}


/* The written logo inside a heading ("One app. Five ways to [RideArrivo]").
   Sized from the heading's own font size so it scales with the text. The light
   and dark artwork swap with the theme, like the header logo. */
.inline-wm { height: .86em; width: auto; vertical-align: -.14em; margin-left: .04em; }
.inline-wm.wm-on-dark { display: none; }
.inline-wm.wm-on-light { display: inline-block; }
html[data-theme="dark"] .inline-wm.wm-on-light { display: none; }
html[data-theme="dark"] .inline-wm.wm-on-dark { display: inline-block; }