:root {
  --ink: #12123B;
  --ink-soft: #1E1E4D;
  --title: #0C0C10; /* near-black, used specifically for headings per design feedback -- body text stays --ink */
  --amber: #F4A300;
  --amber-text: #95590A; /* darker burnt-amber for text use -- --amber itself is only 2.08:1 on white/cream, failing WCAG AA even for large bold text; this passes 4.5:1+ on both */
  --teal: #0E7C7B;
  --teal-tint: #E5F4F3;
  --primary: #2E4C8C;      /* lighter navy blue -- new primary accent per design feedback, replaces teal for icons/links/accents */
  --primary-tint: #EAEFF9;
  --cream: #F7F4EC;
  --coral: #E1523D;
  --text-muted: #6b6b85;
  --card-border: #E7E5F0;
  --radius: 16px;
  --wrap: 1120px;
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(255, 255, 255, 0.65);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.5;
  position: relative;
}

/* Liquid Glass UI: soft, fixed color blobs behind everything, so the
   translucent/blurred surfaces (header, cards) have real depth and color
   to refract -- glass over a flat solid color just looks like a tint. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(600px circle at 12% 8%, rgba(46, 76, 140, 0.10), transparent 60%),
    radial-gradient(700px circle at 92% 18%, rgba(244, 163, 0, 0.09), transparent 60%),
    radial-gradient(650px circle at 25% 85%, rgba(46, 76, 140, 0.07), transparent 60%),
    radial-gradient(550px circle at 88% 92%, rgba(244, 163, 0, 0.07), transparent 60%);
  pointer-events: none;
}

h1, h2, h3, h4 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: var(--title);
  margin: 0 0 14px;
  line-height: 1.15;
}

p { margin: 0 0 12px; color: var(--ink); }

a { color: inherit; text-decoration: none; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--ink); color: var(--cream);
  padding: 10px 16px; z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; }

.eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 10px;
}
.eyebrow-light { color: var(--amber); }

/* ── Buttons (Liquid Glass) ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, opacity 0.15s ease;
}
/* Fluid = motion that feels physical, not just a fade. A quick scale-down
   on press, then a springy overshoot back -- every control gets a little
   give, the way glass-and-light actually behaves under a touch. */
.btn:hover { transform: translateY(-1px) scale(1.015); }
.btn:active { transform: scale(0.94); transition-duration: 0.12s; }
.btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0.05) 60%), rgba(244,163,0,0.68);
  backdrop-filter: url(#liquid-glass-refraction) blur(14px) saturate(190%);
  -webkit-backdrop-filter: blur(14px) saturate(190%);
  color: var(--ink);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 -1px 0 rgba(0,0,0,0.1) inset, 0 8px 20px rgba(244,163,0,0.22);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, background 0.3s ease;
  --mx: 30%;
  --my: 25%;
}
/* The real hallmark of Liquid Glass reference material (WWDC25): a bright,
   concentrated highlight -- not a flat tint -- that reads as light bouncing
   off a curved wet surface. This one sits at a fixed resting spot by
   default and actually tracks the cursor on hover (see glass-effects.js),
   which is what makes it feel dynamic rather than a static texture. */
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,0.95), rgba(255,255,255,0.25) 30%, transparent 55%);
  mix-blend-mode: overlay;
  pointer-events: none;
  transition: background 0.4s ease;
}
/* Real Liquid Glass doesn't tint on interaction -- it just catches more
   light. On hover the fill thins out (more of what's behind shows through)
   and the rim brightens, the way a curved glass surface looks when it
   tips toward a light source. No color added anywhere. */
.btn-primary:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.07) 60%), rgba(244,163,0,0.58);
  box-shadow: 0 1px 0 rgba(255,255,255,0.75) inset, 0 -1px 0 rgba(0,0,0,0.1) inset, 0 10px 26px rgba(244,163,0,0.3);
}
/* A quick one-shot diagonal shine, like the header's ambient sheen but
   triggered by intent (hover) rather than looping forever -- the same
   "light catching glass" cue, applied to a moment of interaction. */
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.65) 50%, transparent 60%);
  background-size: 250% 250%;
  background-position: 200% 200%;
  pointer-events: none;
}
.btn-primary:hover::after { animation: ctaShine 0.7s ease; }
@keyframes ctaShine {
  from { background-position: 200% 200%; }
  to { background-position: -50% -50%; }
}
.btn-ghost {
  position: relative;
  overflow: hidden;
  background: var(--glass-bg);
  backdrop-filter: url(#liquid-glass-refraction) blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease, background 0.2s ease;
  --mx: 30%;
  --my: 25%;
}
.btn-ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,0.9), rgba(255,255,255,0.2) 30%, transparent 55%);
  mix-blend-mode: overlay;
  pointer-events: none;
  transition: background 0.4s ease;
}
.btn-ghost:hover { background: rgba(255,255,255,0.75); border-color: rgba(18,18,59,0.5); }
@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover::after { animation: none; }
}
.btn-sm { padding: 11px 20px; font-size: 12.5px; min-height: 40px; box-sizing: border-box; display: inline-flex; align-items: center; white-space: nowrap; }

/* ── Header (Liquid Glass) ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  margin: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: url(#liquid-glass-refraction) blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid transparent;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 8px 24px rgba(18,18,59,0.08);
  transition: top 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), margin 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-radius 0.35s ease, background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  /* Deliberately no overflow:hidden here -- the language dropdown and
     mobile menu both render below this box and must not be clipped.
     The sheen below is contained within its own bounds instead. */
}
/* On initial load the header sits flush against the top -- no gap above
   it, so on pages like the hero (a full-bleed photo) there's nothing
   showing through behind it. It only becomes the floating pill once the
   person has actually scrolled past the very top (see script.js), at
   which point there's always page content behind that gap regardless of
   which page you're on, so it never exposes a stray strip of plain
   background. This was a real, reported bug -- a cream sliver was
   visible above the header specifically at the top of the hero page,
   because the hero photo only starts below the header in document flow,
   not behind it. */
.site-header.is-scrolled {
  top: 12px;
  margin: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255,255,255,0.35);
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 12px 34px rgba(18,18,59,0.18);
}
@media (max-width: 470px) {
  .site-header.is-scrolled {
    /* Full 12px margins on the narrowest phones previously caused real
       overflow (the header content was already fitted right to the
       edge) -- a smaller margin here still gives the pill/floating look
       without losing the width the header actually needs. */
    margin: 0 6px;
    top: 6px;
  }
}
@media (max-width: 340px) {
  .site-header.is-scrolled {
    /* Even 6px margins are one 320px device too many -- genuinely zero
       room to spare at this width, so the pill look is dropped in favor
       of not overflowing. */
    margin: 0;
    top: 0;
    border-radius: 0;
  }
}
/* The moving sheen -- a soft diagonal highlight that drifts slowly across
   the glass, like light catching a curved surface. Uses background-position
   on a fixed-size box (not transform + overflow:hidden) specifically so it
   never clips the language dropdown or mobile nav menu that render below
   the header. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit; /* without this, the sheen is a plain rectangle sitting inside a rounded pill header -- its square corners poke out past the rounded boundary as it animates, since overflow:hidden can't be used here (it would also clip the language dropdown and mobile menu) */
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.55) 47%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0.55) 53%, transparent 65%);
  background-size: 300% 300%;
  animation: glassSheen 9s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 0;
}
@keyframes glassSheen {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header::before { animation: none; }
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 14px;
  padding-bottom: 14px;
  position: relative;
  z-index: 1;
}
.brand {
  display: flex;
  align-items: center;
  /* Tightened from 8px -- at 8px the pin and wordmark read as two separate
     logos sitting next to each other rather than one designed lockup.
     Matched to .footer-brand's 8px gap below so the pin-to-wordmark
     spacing reads identically in both places. */
  gap: 8px;
  font-family: 'Poppins', 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: var(--ink);
  flex-shrink: 0;
  padding: 8px 0;
  box-sizing: border-box;
}
.brand-mark {
  border-radius: 8px;
  position: relative;
  z-index: 2;
  /* Soft amber halo behind the pin mark so it doesn't float bare against
     whatever's behind the nav (cream hero, dark footer, or a photo
     background) -- a subtle rounded glow rather than a hard box. */
  box-shadow: 0 0 0 8px rgba(244, 163, 0, 0.10), 0 2px 14px rgba(244, 163, 0, 0.30);
}
.brand-ride { color: var(--ink); }
/* Default usage is body copy on light backgrounds (e.g. index.html's "Who
   RideArrivo is for" on .section-tint) -- full-strength --amber there is
   only 2.08:1 against white/cream, failing WCAG AA even for large bold
   text. --amber-text is the same hue darkened for legibility. The
   dark-background contexts below (hero/safety glass panels, footer) keep
   the original bright --amber, which already reads fine there -- mirrors
   the existing .brand-ride overrides just below, in reverse. */
.brand-arrivo { color: var(--amber-text); }
.site-footer .brand-ride { color: var(--cream); } /* footer background is dark navy throughout -- any "Ride" text needs a light color here instead, not just the logo */
.hero-glass-panel .brand-arrivo,
.safety-hero .brand-arrivo,
.site-footer .brand-arrivo { color: var(--amber); }

/* ── Animated logo: drops in once on load, then a soft continuous "location ping" pulse ── */
.logo-wrap {
  position: relative;
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
@keyframes logoDropIn {
  0% { transform: translateY(-14px); opacity: 0; }
  60% { transform: translateY(2px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

/* The "soft continuous location ping pulse" promised in the comment above
   never actually existed as a second animation -- the halo was a static
   box-shadow with nothing animating it. This ring is the pulse: it expands
   outward from the pin and fades, on loop, starting right as the drop-in
   lands (0.6s delay) so the two read as one continuous motion instead of
   the ping cutting in abruptly before the pin has even settled. */
.logo-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: rgba(244, 163, 0, 0.55);
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  animation: logoPing 2.4s ease-out 0.6s infinite;
}

/* Previously scaled to only 1.65x at 0.45 starting opacity -- against most
   nav backgrounds that read as barely-there by the time it actually
   expanded outward. Bigger max scale + a brighter starting opacity makes
   the pulse itself clearly visible instead of just a faint flicker. */
@keyframes logoPing {
  0% { transform: scale(1); opacity: 0.55; }
  70%, 100% { transform: scale(2.1); opacity: 0; }
}

/* A second, tighter halo layered right on the pin itself (not just the
   outward-expanding ring) so there's always a warm glow directly behind
   the mark, not only during the brief expanding-ring moment. */
.logo-wrap .brand-mark {
  animation: logoDropIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both, logoGlow 2.4s ease-in-out 0.6s infinite;
}

@keyframes logoGlow {
  0%, 100% { box-shadow: 0 0 0 8px rgba(244, 163, 0, 0.10), 0 2px 14px rgba(244, 163, 0, 0.30); }
  50% { box-shadow: 0 0 0 12px rgba(244, 163, 0, 0.22), 0 2px 20px rgba(244, 163, 0, 0.55); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-wrap .brand-mark { animation: none; }
  .logo-wrap::before { animation: none; opacity: 0; }
}
.main-nav {
  display: none;
  gap: 4px;
  font-size: 13.5px;
  font-weight: 600;
}
.main-nav a {
  padding: 8px 16px;
  border-radius: 999px;
  transition: color 0.2s ease, background 0.25s ease;
}
.main-nav a:hover { color: var(--amber); background: rgba(244,163,0,0.14); }
.header-actions { display: flex; align-items: center; gap: 12px; }

/* ── Mobile hamburger nav -- the secondary links (How it works / Who it's
   for / Safety) are hidden below 860px via .main-nav; this is the only way
   to reach them on a phone, since the primary "Book a ride" CTA already
   stays visible in .header-actions regardless of screen width. ── */
.mobile-nav-toggle {
  all: unset;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  cursor: pointer;
  box-sizing: border-box;
  flex-shrink: 0;
}
.mobile-nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.15s ease;
}
/* Hamburger → X, so it's unmistakable that tapping again closes the menu */
.mobile-nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.mobile-nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav-menu {
  position: absolute;
  top: 100%;
  margin-top: 10px;
  left: 0;
  right: 0;
  border-radius: 22px;
  background: rgba(247, 244, 236, 0.4);
  backdrop-filter: url(#liquid-glass-refraction) blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.45);
  display: none;
  flex-direction: column;
  padding: 4px 24px 16px;
  box-shadow: 0 16px 34px rgba(18,18,59,0.2);
  z-index: 55;
}
/* This is the actual fix: [hidden] was being beaten by the "display: flex"
   rule above because author CSS always outranks the UA [hidden] stylesheet
   rule, no matter what the hidden property/attribute says. That silently
   made the menu render at all times on mobile, so tapping the toggle
   changed its internal state but nothing ever visibly happened. */
.mobile-nav-menu:not([hidden]) {
  display: flex;
  animation: mobileNavIn 0.2s ease both;
}
@keyframes mobileNavIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mobile-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(18,18,59,0.32);
  z-index: 48;
}
.mobile-nav-backdrop:not([hidden]) { display: block; }
.mobile-nav-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 16px;
  border-bottom: 1px solid var(--card-border);
  margin-bottom: 4px;
}
.mobile-nav-close {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--text-muted);
  border-radius: 50%;
}
.mobile-nav-close:hover { background: rgba(18,18,59,0.06); }
.mobile-nav-menu a {
  padding: 14px 4px;
  font-size: 14.5px;
  font-weight: 600;
  border-bottom: 1px solid var(--card-border);
  transition: color 0.2s ease;
}
.mobile-nav-menu a:last-child { border-bottom: none; }
.mobile-nav-menu a:hover, .mobile-nav-menu a:active { color: var(--amber); }
@media (min-width: 860px) {
  .mobile-nav-toggle, .mobile-nav-menu, .mobile-nav-backdrop { display: none; }
}

.live-clock {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  margin-right: 4px;
  overflow: hidden;
}
.live-clock .clock-date {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.live-clock .clock-time {
  font-family: 'Space Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.live-clock .clock-colon {
  animation: clockBlink 1s steps(1) infinite;
  color: var(--amber);
}
@keyframes clockBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.15; }
}
@media (max-width: 780px) {
  .live-clock { display: none !important; }
}

.footer-credit-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.footer-credit-label {
  font-size: 10.5px;
  color: #8a8ab0;
  opacity: 0.7;
}
.footer-parasyte-link {
  display: inline-flex;
  align-items: center;
  opacity: 0.75;
  transition: opacity 0.15s ease;
}
.footer-parasyte-link:hover { opacity: 1; }
.footer-parasyte-logo {
  height: 18px;
  width: auto;
  display: block;
}
.footer-wordmark {
  height: 20px;
  width: auto;
  display: block;
}
/* ridearrivo-wordmark.png is the same design/font/kerning as the footer's
   ridearrivo-wordmark-light.png (in fact re-colored from that exact file:
   the cream "Ride" swapped for ink, "Arrivo" left amber, transparent bg
   preserved) -- sized identically to .footer-wordmark below so the navbar
   and footer lockups match pixel-for-pixel in proportion, not just color. */
.brand-wordmark {
  height: 20px;
  width: auto;
  display: block;
}
.mobile-nav-menu-header .brand-wordmark { height: 18px; }
.lang-dropdown { position: relative; }
.lang-trigger {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  min-height: 40px;
  box-sizing: border-box;
}

/* Relocated below every base rule it overrides (.header-inner,
   .brand/.brand-wordmark, .header-actions, .lang-trigger, .btn-sm,
   .nav-account-link) -- CSS resolves same-specificity ties by source
   order, so when this narrow-phone tightening block sat ABOVE those
   base rules (as it originally did, right under the unrelated .btn-sm
   rule near the top of the file), every property it shares with a base
   rule declared further down got silently clobbered back to the base,
   full-width value: .brand-wordmark's `display: none` in particular
   never actually applied at ≤400px because the unconditional
   `.brand-wordmark { display: block }` further down in the file always
   won the tie. The wordmark (and the untightened gaps/padding) staying
   at full size ate exactly the ~80-90px that "Book a ride" + the
   hamburger needed, pushing the hamburger past the header's right edge
   entirely -- the reported "hamburger floating outside the pill" bug.
   Same rules, same breakpoints, just positioned so they're actually the
   last word for every property they touch. */
/* On the narrowest phones, the header-actions row (clock, language, book
   button, hamburger) gets tight enough that "Book a ride" was wrapping
   into 2-3 lines -- tighten spacing here instead of letting that happen. */
@media (max-width: 470px) {
  .header-inner { gap: 6px; }
  .lang-trigger { padding: 9px 7px; font-size: 10px; }
  .btn-sm { padding: 10px 9px; font-size: 11px; }
  .nav-account-link { padding: 6px; }
  /* Wordmark is an image again (properly cropped/transparent this time),
     so it shrinks by height instead of the old text-based font-size rules. */
  .brand-wordmark { height: 16px; }
  .brand { gap: 6px; }
}
@media (min-width: 401px) and (max-width: 440px) {
  .brand-wordmark { height: 15px; } /* shrink instead of hiding -- still legible, just doesn't crowd the header */
}
@media (max-width: 400px) {
  .brand-wordmark { display: none; } /* genuinely no room left at this width even at the smallest readable size */
}
@media (max-width: 330px) {
  .header-inner { gap: 4px; }
  .header-actions { gap: 6px; }
  .lang-trigger { padding: 8px 6px; }
  .btn-sm { padding: 9px 8px; }
  .nav-account-link { padding: 4px; }
}

.lang-trigger:hover { background: rgba(18,18,59,0.06); }
.lang-trigger svg { transition: transform 0.15s ease; flex-shrink: 0; }
.lang-dropdown.open .lang-trigger svg { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(18,18,59,0.14);
  list-style: none;
  margin: 0;
  padding: 6px;
  min-width: 140px;
  z-index: 60;
}
.lang-menu .lang-opt {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.lang-menu .lang-opt:hover { background: rgba(18,18,59,0.06); }
.lang-menu .lang-opt.active { background: var(--ink); color: var(--cream); }

/* ── Services nav dropdown -- same open/close interaction as .lang-dropdown
   above, just listing the four Arrivo products (Express/Move/Boat/Air)
   instead of languages. Lives in .main-nav, replacing what used to be a
   single flat "ArrivoExpress" link. ArrivoBoat/ArrivoAir render as
   non-interactive "Coming soon" rows until their subdomains are actually
   live -- see initServicesDropdown() in script.js/booking.js/express.js. */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: inherit;
  transition: color 0.2s ease, background 0.25s ease;
}
.nav-dropdown-trigger:hover,
.nav-dropdown.open .nav-dropdown-trigger { color: var(--amber); background: rgba(244,163,0,0.14); }
.nav-dropdown-trigger svg { transition: transform 0.15s ease; flex-shrink: 0; }
.nav-dropdown.open .nav-dropdown-trigger svg { transform: rotate(180deg); }

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(18,18,59,0.14);
  list-style: none;
  margin: 0;
  padding: 6px;
  min-width: 224px;
  z-index: 60;
}
.nav-dropdown-menu li { display: block; }
.nav-dropdown-menu a,
.nav-dropdown-soon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.nav-dropdown-menu a:hover { background: rgba(18,18,59,0.06); }
.nav-dropdown-soon { cursor: default; color: var(--text-muted); }
.nav-dropdown-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--amber);
  background: rgba(244,163,0,0.14);
  padding: 3px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Mobile nav: no dropdown behavior needed (the hamburger menu already
   scrolls), so Services is just a small-caps label followed by the four
   rows inline in .mobile-nav-menu. */
.mobile-nav-menu-label {
  padding: 14px 4px 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mobile-nav-menu .nav-row-soon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 4px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--card-border);
}

@media (min-width: 860px) {
  .main-nav { display: flex; }
}

/* ── Hero ── */
.hero {
  position: relative;
  padding: 100px 0 64px;
  margin-bottom: 20px;
  margin-top: -74.5px; /* pulls the photo up behind the header (measured at 74.5px tall) so the translucent nav shows the photo blurred through it, rather than just sitting adjacent to a section that starts below it */
  padding-top: 174.5px; /* compensates the negative margin so the actual hero content doesn't end up hidden underneath the header */
  overflow: hidden;
  isolation: isolate;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url("assets/hero-bg.jpg");
  background-size: cover;
  background-position: center 25%;
  z-index: -2;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(12,12,16,0.75) 0%, rgba(12,12,16,0.6) 40%, rgba(12,12,16,0.25) 100%);
  z-index: -1;
}
.hero-inner { display: block; }
.hero-glass-panel {
  position: relative;
  overflow: hidden;
  max-width: 620px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: url(#liquid-glass-refraction) blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 24px;
  padding: 32px 24px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.16) inset, 0 24px 60px rgba(0,0,0,0.35);
  --mx: 25%;
  --my: 20%;
}
.hero-glass-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,0.25), rgba(255,255,255,0.06) 30%, transparent 55%);
  mix-blend-mode: overlay;
  pointer-events: none;
  transition: background 0.4s ease;
}
.hero-glass-panel h1 {
  font-size: clamp(30px, 6vw, 48px);
  letter-spacing: -0.01em;
  color: #fff;
}
.hero-sub {
  font-size: 15.5px;
  color: rgba(255,255,255,0.82);
  max-width: 480px;
  margin-bottom: 26px;
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }

.trust-strip {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  padding: 0;
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
}
.trust-strip li { display: flex; align-items: center; gap: 7px; margin-right: 0; margin-bottom: 0; }
.trust-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex-shrink: 0; margin-right: 7px; }

@media (min-width: 780px) {
  .hero { padding: 130px 0 90px; }
  .hero-glass-panel { padding: 44px 40px; max-width: 660px; }
}

.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
}

/* Phone mockup, reusing the same visual language as the app screens */
.phone-frame {
  position: relative;
  width: 230px;
  background: var(--ink);
  border-radius: 30px;
  border: 7px solid var(--ink-soft);
  box-shadow: 0 30px 60px rgba(18,18,59,0.28);
  overflow: hidden;
}
.phone-notch {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 84px; height: 16px; background: var(--ink-soft); border-radius: 0 0 10px 10px; z-index: 3;
}
.phone-stripe { height: 5px; background: repeating-linear-gradient(90deg, var(--ink) 0 10px, var(--amber) 10px 20px); }

/* ── One-time intro: a big plane sweeps in from the left across the whole
   visual column, cross-dissolves into a car mid-flight, the car drives off,
   and the curtain fades away to reveal the phone screen underneath.
   Sized to hero-visual (not phone-frame) so the plane has real room to move. ── */
.intro-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: var(--ink);
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: introOverlayHide 3s ease forwards;
}
.intro-plane, .intro-car {
  position: absolute;
  width: 42%;
  max-width: 210px;
  opacity: 0;
}
.intro-plane {
  animation: introPlaneFly 3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.intro-car {
  width: 46%;
  max-width: 200px;
  animation: introCarReveal 3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes introPlaneFly {
  0%   { transform: translateX(-240%) translateY(-16%) rotate(-10deg) scale(0.85); opacity: 0; }
  10%  { opacity: 1; }
  46%  { transform: translateX(0) translateY(0) rotate(4deg) scale(1.15); opacity: 1; }
  56%  { transform: translateX(4%) translateY(6%) rotate(4deg) scale(0.95); opacity: 1; }
  64%  { transform: translateX(4%) translateY(8%) rotate(4deg) scale(0.6); opacity: 0; }
  100% { opacity: 0; }
}

@keyframes introCarReveal {
  0%, 56% { opacity: 0; transform: translateX(-14%) scale(0.55); }
  66%     { opacity: 1; transform: translateX(0) scale(1.05); }
  80%     { opacity: 1; transform: translateX(0) scale(1); }
  100%    { opacity: 0; transform: translateX(170%) scale(0.9); }
}

@keyframes introOverlayHide {
  0%, 80% { opacity: 1; pointer-events: auto; }
  100%    { opacity: 0; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-overlay { display: none; }
}

/* Mobile: same choreography, just scaled to the narrower column so it
   never feels oversized or forces horizontal scroll. */
@media (max-width: 600px) {
  .intro-plane { width: 50%; max-width: 150px; }
  .intro-car   { width: 54%; max-width: 145px; }
}

/* Desktop: give the hero its own two-column layout instead of stacking
   copy above a small centered card with acres of space around it. */
@media (min-width: 960px) {
  .hero-inner { grid-template-columns: 1.05fr 0.95fr; gap: 56px; }
  .hero-visual { min-height: 420px; }
}

.phone-screen { padding: 22px 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.ps-row { display: flex; justify-content: flex-end; }
.ps-chip { background: var(--cream); color: var(--ink); font-size: 9px; font-weight: 700; padding: 4px 8px; border-radius: 8px; }
.ps-map {
  height: 90px; border-radius: 12px;
  background: radial-gradient(circle at 30% 30%, rgba(14,124,123,0.35), transparent 45%),
              radial-gradient(circle at 70% 65%, rgba(244,163,0,0.3), transparent 45%), #0C0C2E;
}
.ps-card { display: flex; gap: 8px; align-items: center; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 9px; }
.ps-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ps-name { color: var(--cream); font-size: 10.5px; font-weight: 700; }
.ps-meta { color: #9494BE; font-size: 9px; margin-top: 1px; }
.ps-tag { display: inline-block; background: rgba(14,124,123,0.25); color: #5FE0DE; font-size: 8px; font-weight: 700; padding: 2px 6px; border-radius: 6px; margin-top: 4px; }
.ps-btn { background: var(--primary); color: #fff; text-align: center; font-size: 11px; font-weight: 700; padding: 10px; border-radius: 10px; }

/* ── Sections ── */
.section { padding: 72px 0; }
.section-tint { background: #FBF9F3; }
.section h2 { font-size: clamp(24px, 4vw, 34px); max-width: 620px; }

.section-dark {
  position: relative;
  background:
    radial-gradient(circle at 15% 20%, rgba(244,163,0,0.22), transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(46,76,140,0.35), transparent 50%),
    linear-gradient(135deg, #12123B 0%, #1a1a4d 55%, #12123B 100%);
  color: var(--cream);
  overflow: hidden;
}
/* Subtle route/dot texture standing in for a real photo -- a flat solid
   navy behind this text had no visual depth. I don't have an actual Lagos
   photo to use here; happy to swap this for one if you have a real shot
   you want featured instead. */
.section-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  opacity: 0.5;
  pointer-events: none;
}
.section-dark .wrap { position: relative; z-index: 1; }
.section-dark h2 { color: var(--cream); }
.section-dark p { color: #C9C9E6; }
.section-dark .brand-ride { color: var(--cream); } /* same dark-background issue as the footer -- "Ride" in navy would be invisible here too */
.hero-glass-panel .brand-ride { color: var(--cream); } /* hero now sits on a dark photo background too */
.safety-hero .brand-ride { color: var(--cream); } /* safety section also sits on a dark photo background */

/* ── Steps ── */
.steps {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.steps li { border-top: 2px solid var(--card-border); padding-top: 18px; }
.step-num {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--amber);
  margin-bottom: 10px;
}
.steps h3 { font-size: 17px; margin-bottom: 8px; }
.steps p { color: var(--text-muted); font-size: 14px; margin: 0; }

@media (min-width: 720px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .steps-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1020px) {
  .steps-5 { grid-template-columns: repeat(5, 1fr); }
}

/* ── How It Works -- dark photo background, glass cards ──
   This section sits on a dark blurred photo, unlike the rest of the
   (light/cream) site, so the glass here is dark translucent glass with
   white text, not the light glass used everywhere else. */
.how-it-works {
  position: relative;
  padding: 72px 0 64px;
  overflow: hidden;
  isolation: isolate;
}
.how-it-works-bg {
  position: absolute;
  inset: 0;
  background-image: url("assets/how-it-works-bg.jpg");
  background-size: cover;
  background-position: center;
  z-index: -2;
}
.how-it-works-overlay {
  position: absolute;
  inset: 0;
  /* A radial spotlight instead of a flat wash -- darkest behind the actual
     cards and heading (where text needs contrast), fading out toward the
     edges so the photo stays visible around the perimeter rather than
     the whole section reading as one uniform dark rectangle. */
  background: radial-gradient(ellipse 70% 65% at center, rgba(12,12,16,0.78) 0%, rgba(12,12,16,0.55) 45%, rgba(12,12,16,0.15) 75%, rgba(12,12,16,0) 100%);
  z-index: -1;
}
.how-glass-panel {
  position: relative;
  overflow: hidden;
  max-width: 1020px;
  margin: 0 auto;
  background: rgba(255,255,255,0.1);
  backdrop-filter: url(#liquid-glass-refraction) blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 24px;
  padding: 40px 24px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.16) inset, 0 24px 60px rgba(0,0,0,0.32);
}
.how-it-works-heading { text-align: center; margin-bottom: 44px; }
.how-it-works-accent {
  display: block;
  width: 56px;
  height: 3px;
  background: var(--amber);
  border-radius: 2px;
  margin: 0 auto 18px;
}
.how-it-works h2 { color: #fff; font-size: 34px; margin-bottom: 10px; }
.how-it-works-heading p { color: rgba(255,255,255,0.78); font-size: 15px; margin: 0; }

.how-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.how-card {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  backdrop-filter: url(#liquid-glass-refraction) blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 20px;
  padding: 24px 20px 28px;
  text-align: left;
  box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 16px 40px rgba(0,0,0,0.28);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  --mx: 25%;
  --my: 15%;
}
.how-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,0.35), rgba(255,255,255,0.08) 30%, transparent 55%);
  mix-blend-mode: overlay;
  pointer-events: none;
  transition: background 0.4s ease;
}
.how-card:hover { transform: translateY(-4px); }
.how-card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 22px;
}
.how-card h3 { color: #fff; font-size: 18px; margin-bottom: 8px; }
.how-card p { color: rgba(255,255,255,0.75); font-size: 13.5px; margin: 0 0 22px; }
.how-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
}
.how-card-icon svg { width: 24px; height: 24px; }

.how-it-works-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: fit-content;
  margin: 40px auto 0;
  padding: 14px 26px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}
.how-it-works-footer-icon { display: flex; color: var(--amber); }
.how-it-works-footer-icon svg { width: 18px; height: 18px; }

@media (min-width: 720px) {
  .how-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1020px) {
  .how-cards { grid-template-columns: repeat(5, 1fr); }
  .how-it-works h2 { font-size: 40px; }
}

/* ── Cards ── */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 36px;
}
.card {
  position: relative;
  overflow: hidden;
  background: var(--glass-bg);
  backdrop-filter: url(#liquid-glass-refraction) blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 12px 28px rgba(18,18,59,0.06);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  --mx: 20%;
  --my: 15%;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,0.7), rgba(255,255,255,0.15) 30%, transparent 55%);
  mix-blend-mode: overlay;
  pointer-events: none;
  transition: background 0.4s ease;
}
.card:hover { transform: translateY(-3px) scale(1.008); }
.icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--primary-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.icon-badge svg { width: 22px; height: 22px; }
.card h3 { font-size: 18px; margin-bottom: 10px; }
.card p { color: var(--text-muted); font-size: 14px; margin: 0; }

@media (min-width: 780px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

/* ── Homepage services section ("More ways to move") -- one card per
   Arrivo product (Express/Move/Boat/Air), reusing .card's glass styling.
   All four are live links with a photo header and a CTA. The old
   .service-card-soon styles below are kept for any future product that
   is not live yet. */
.services-cards { grid-template-columns: 1fr; }
@media (min-width: 780px) {
  .services-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1020px) {
  .services-cards { grid-template-columns: repeat(4, 1fr); }
}
.service-card { display: flex; flex-direction: column; }
.service-card-cta {
  margin-top: auto;
  padding-top: 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--primary);
}
.service-card-soon { opacity: 0.7; }
.service-card-soon:hover { transform: none; }
.service-card-tag {
  display: inline-block;
  margin-left: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--amber);
  background: rgba(244,163,0,0.14);
  padding: 3px 7px;
  border-radius: 999px;
  vertical-align: middle;
}

/* ── Safety hero -- full-bleed photo background with a glass panel ── */
.safety-hero {
  position: relative;
  padding: 48px 0;
  overflow: hidden;
  isolation: isolate;
}
.safety-hero-bg {
  position: absolute;
  inset: 0;
  background-image: url("assets/safety-hero-bg.jpg");
  background-size: cover;
  background-position: center 30%;
  z-index: -2;
}
.safety-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(12,12,16,0.72) 0%, rgba(12,12,16,0.55) 45%, rgba(12,12,16,0.3) 100%);
  z-index: -1;
}
.safety-glass-panel {
  position: relative;
  overflow: hidden;
  max-width: 640px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: url(#liquid-glass-refraction) blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 24px;
  padding: 32px 24px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.16) inset, 0 20px 50px rgba(0,0,0,0.3);
}.safety-glass-panel h2 { color: #fff; }
.safety-sub { color: rgba(255,255,255,0.82); font-size: 15px; max-width: 440px; }

.safety-chip-list {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.safety-chip {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 18px 16px;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s ease, border-color 0.25s ease;
  --mx: 30%;
  --my: 20%;
}
.safety-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,0.28), rgba(255,255,255,0.06) 30%, transparent 55%);
  mix-blend-mode: overlay;
  pointer-events: none;
  transition: background 0.4s ease;
}
.safety-chip:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.13);
  border-color: rgba(244,163,0,0.4);
}
.safety-chip-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(244,163,0,0.18);
  color: var(--amber);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.safety-chip:hover .safety-chip-icon { transform: scale(1.1); }
.safety-chip-icon svg { width: 19px; height: 19px; }
.safety-chip h4 { font-size: 14.5px; margin-bottom: 6px; color: #fff; }
.safety-chip p { color: rgba(255,255,255,0.72); font-size: 12.5px; margin: 0; line-height: 1.45; }

@media (min-width: 560px) {
  .safety-chip-list { grid-template-columns: 1fr 1fr; gap: 18px; }
}
@media (min-width: 780px) {
  .safety-hero { padding: 72px 0; }
  .safety-glass-panel { padding: 44px 40px; }
}
@media (min-width: 1020px) {
  .safety-glass-panel { max-width: 980px; }
  .safety-sub { max-width: 640px; }
  .safety-chip-list { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .safety-chip { padding: 22px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .safety-chip, .safety-chip-icon { transition: none; }
}


/* ── Language callout ── */
.lang-callout { max-width: 640px; }
.lang-callout p { font-size: 15px; }

/* ── Download / waitlist ── */
.download-wrap { max-width: 560px; }
.download-wrap p { color: var(--text-muted); font-size: 15px; }

.waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 24px 0 10px;
}
.waitlist-form input {
  padding: 13px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--card-border);
  font-family: 'Inter', sans-serif;
  font-size: 16px; /* same iOS zoom-on-focus fix as .field */
  background: #fff;
}
.waitlist-form input:focus { outline: 2px solid var(--amber); outline-offset: 1px; }

@media (min-width: 560px) {
  .waitlist-form { flex-direction: row; }
  .waitlist-form input { flex: 1; }
}

.form-note { font-size: 12px; color: var(--text-muted); margin-bottom: 28px; }

.store-badges { display: flex; gap: 12px; flex-wrap: wrap; }
.store-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 10px;
  padding: 8px 16px 8px 14px;
  opacity: 0.55;
}
.store-badge-text { display: flex; flex-direction: column; line-height: 1.25; }
.store-badge-text small { font-size: 9.5px; color: #C9C9E6; }
.store-badge-text strong { font-size: 13.5px; font-family: 'Space Grotesk', sans-serif; }

/* ── Footer ── */
.site-footer { background: var(--ink); color: var(--cream); padding: 48px 0 28px; }

.footer-brand {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Poppins', 'Space Grotesk', sans-serif; font-weight: 700; font-size: 17px;
}
.footer-legal { font-size: 12px; color: #8a8ab0; margin: 0; }
.footer-legal-entity { font-size: 11px; color: #6f6f96; margin: 3px 0 0; }
/* Small inline pin + wordmark lockup inside the "© 2026 RideArrivo..."
   copyright line, replacing what used to be plain colored text -- sized to
   the surrounding .footer-legal text (12px) so it sits on the same line
   without disrupting the paragraph's height or baseline. */
.footer-legal-brand {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
  transform: translateY(-1px);
}
.footer-legal-mark { width: 12px; height: 12px; display: block; }
.footer-legal-wordmark { height: 12px; width: auto; display: block; }

/* Top: brand + social on the left, three link columns on the right --
   stacks to a single column on mobile so nothing feels cramped. */
.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-brand-col { flex: 1 1 220px; }
.footer-tagline { font-size: 13px; color: #C9C9E6; margin: 10px 0 18px; max-width: 240px; line-height: 1.5; }

.footer-social-row { display: flex; gap: 10px; flex-wrap: wrap; }
.footer-social-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.footer-social-icon:hover { background: var(--amber); color: var(--ink); }
.footer-social-icon svg { width: 16px; height: 16px; }

.footer-col { flex: 1 1 130px; }
.footer-col h4 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
  color: #8a8ab0; margin: 0 0 14px; font-weight: 700;
}
.footer-col a {
  display: block; font-size: 13.5px; color: #C9C9E6;
  margin-bottom: 11px; text-decoration: none;
}
.footer-col a:hover { color: var(--amber); }
/* ArrivoBoat/ArrivoAir rows in the footer's "Get Started" column aren't
   links yet (see .nav-row-soon usage above), so they need their own
   sizing here instead of inheriting .mobile-nav-menu's padding/border,
   which assumes a light background. */
.footer-col .nav-row-soon {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: #6f6f96;
  margin-bottom: 11px;
  padding: 0;
  border-bottom: none;
}
.footer-col .nav-dropdown-tag {
  font-size: 9px;
  padding: 2px 6px;
}
.footer-contact-link { display: flex !important; align-items: center; gap: 8px; }
.footer-contact-icon { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.85; }

/* Bottom: legal + credit + wordmark, same row on wider screens */
.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
  padding-top: 24px;
}

@media (min-width: 720px) {
  .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.nav-account-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.nav-account-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-account-link:hover { color: var(--amber); }
@media (max-width: 640px) {
  .nav-account-link span { display: none; } /* icon-only on small screens to keep the header from crowding */
}

.panic-btn {
  width: 100%;
  background: #D64545;
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 16px;
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 16px;
  transition: background 0.15s ease;
}
.panic-btn:hover { background: #B93838; }
.panic-btn:active { background: #A02F2F; }
.panic-countdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFF3F3;
  border: 1px solid #F3C6C6;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: #B93838;
}
.panic-status-text {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.panic-active-banner {
  background: #FFF3F3;
  border: 1.5px solid #D64545;
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
  color: #8a2323;
}
.panic-active-banner strong { display: block; margin-bottom: 4px; font-size: 14px; }
.panic-active-banner p { margin: 0; font-size: 12.5px; }
.listening-btn {
  width: 100%;
  background: #fff;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  padding: 12px;
  font-family: inherit;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
  margin-bottom: 16px;
}
.listening-btn.is-active { border-color: var(--primary); background: var(--primary-tint); color: var(--primary); }

.tracking-notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--primary-tint);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.5;
}

/* ── Avatar / profile display, shared by account.html and driver.html ── */
.avatar-row { display:flex; align-items:center; gap:18px; margin-bottom: 28px; }
.avatar-circle {
  width: 76px; height: 76px; border-radius: 50%; background: #eee;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  cursor:pointer; border: 2px solid var(--card-border); flex-shrink:0; position:relative;
}
.avatar-circle img { width:100%; height:100%; object-fit:cover; }
.avatar-circle .initial { font-size:28px; font-weight:700; color:#999; }
.avatar-edit-badge {
  position:absolute; bottom:0; right:0; width:22px; height:22px; border-radius:50%;
  background: var(--amber); display:flex; align-items:center; justify-content:center;
  font-size:11px; border: 2px solid #fff;
}
.account-name { font-size: 19px; font-weight:700; }
.account-email { font-size:12.5px; color: var(--text-muted); }
.save-note { font-size:11.5px; color: var(--primary); font-weight:700; }

/* ── Fleet showcase: real vehicle photo, glass caption overlay ── */
.fleet-photo-frame {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(18,18,59,0.14);
}
.fleet-photo { width: 100%; height: auto; display: block; }
.fleet-caption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  background: rgba(18,18,59,0.55);
  backdrop-filter: url(#liquid-glass-refraction) blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 16px;
  padding: 16px 20px;
  color: #fff;
}
.fleet-caption .eyebrow { color: var(--amber); }
.fleet-caption h3 { color: #fff; margin: 4px 0 0; font-size: 19px; }

/* ── Showcase strip ──
   User-controlled (swipe/scroll), not a timer -- small cards, next one
   peeking at the edge so it reads as "more to see" without ever taking
   over the page or moving on its own. */
.showcase-strip {
  display: flex;
  gap: 14px;
  margin-top: 20px;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 4px;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.showcase-card {
  position: relative;
  flex: 0 0 auto;
  width: 260px;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  scroll-snap-align: start;
  box-shadow: 0 10px 24px rgba(18,18,59,0.12);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.showcase-card:hover { transform: translateY(-4px); }
.showcase-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.showcase-card-label {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background: rgba(18,18,59,0.5);
  backdrop-filter: url(#liquid-glass-refraction) blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  padding: 8px 10px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
}
@media (max-width: 640px) {
  .showcase-card { width: 210px; }
}
@media (max-width: 560px) {
  .fleet-caption { left: 12px; right: 12px; bottom: 12px; padding: 12px 16px; }
  .fleet-caption h3 { font-size: 16px; }
}

/* ── Booking: "who is this ride for" toggle (book.html step 1) ── */
.for-who-toggle { display: flex; gap: 8px; margin-bottom: 14px; }
.for-who-opt {
  flex: 1;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--card-border);
  background: #fff;
  font-family: inherit;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.for-who-opt.is-active {
  border-color: var(--primary);
  background: var(--primary-tint);
  color: var(--primary);
}
.for-who-opt:hover { border-color: var(--primary); }

/* Photo header on each service card */
.service-card-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 16px;
}

/* Membership band: copy beside a photo, stacked on phones */
.promo-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}
.promo-band-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 18px;
  order: -1;
}
.promo-band-copy h2 { margin: 6px 0 12px; }
.promo-band-copy p { color: var(--text-muted); margin: 0 0 20px; max-width: 46ch; }
.promo-band-ctas, .cross-sell-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 860px) {
  .promo-band { grid-template-columns: 1.05fr 1fr; gap: 48px; }
  .promo-band-photo { order: 0; }
}

.hero-more { margin: 14px 0 0; font-size: 14px; }
.hero-more a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.cross-sell h2 { margin: 6px 0 18px; }

/* Banner photo at the top of the ArrivoExpress page. The photo is the first
   visual, so it is not lazy loaded; width and height reserve its space. */
.page-banner {
  position: relative;
  margin: 0 0 22px;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 21 / 9;
  background: #0c1a2e;
}
.page-banner picture, .page-banner img { display: block; width: 100%; height: 100%; }
.page-banner img { object-fit: cover; object-position: 50% 40%; }
.page-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18,18,59,0) 55%, rgba(18,18,59,0.45) 100%);
  pointer-events: none;
}
@media (max-width: 640px) {
  .page-banner { border-radius: 14px; aspect-ratio: 3 / 2; margin-bottom: 16px; }
}