/* A1 Rides shared styles: tokens, typography, header, footer, reveal animation.
   Load after Bootstrap 5.3 and the Satoshi font:
   <link rel="stylesheet" href="https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap">
   Breakpoints follow the Figma frames: base = 1024+, max-width 1023.98px = 768 frame, max-width 767.98px = 400 frame. */

:root {
  --a1-font: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --a1-ink: #131313;
  --a1-text: #404040;
  --a1-muted: #808080;
  --a1-placeholder: #b9b9b9;
  --a1-line: #e3e3e3;
  --a1-surface: #f3f3f3;
  --a1-white: #ffffff;
  --a1-blue: #1976d2;

  --a1-radius-pill: 1000px;
  --a1-radius-btn: 100px;

  --a1-header-h: 74px;
  --a1-gutter: 24px;

  --a1-ease-out: cubic-bezier(.22, .61, .36, 1);
}
@media (max-width: 1023.98px) {
  :root { --a1-header-h: 60px; }
}

html { scroll-padding-top: var(--a1-header-h); }
body {
  margin: 0;
  min-width: 320px;
  font-family: var(--a1-font);
  color: var(--a1-ink);
  background: var(--a1-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; }
img, svg { display: block; max-width: 100%; }

/* ---------- Buttons ---------- */
.a1-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  border: 0;
  border-radius: var(--a1-radius-btn);
  background: var(--a1-ink);
  color: var(--a1-surface);
  font: 700 16px/normal var(--a1-font);
  letter-spacing: -0.48px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s, transform .2s;
}
.a1-btn:hover { background: #2a2a2a; color: var(--a1-surface); }
.a1-btn:active { transform: scale(.98); }

/* iPhone status bar. Safari 26 ignores theme-color and tints its top bar from a real
   position:fixed element touching the top (full width, at least 6px tall); pseudo-elements don't
   count. .a1-statusbar is that element; on iOS it also fills the status bar area under
   viewport-fit=cover. The header starts just below it so only the black strip touches the top. */
.a1-statusbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: max(6px, env(safe-area-inset-top, 0px));
  z-index: 1040;
  background-color: #000;
  pointer-events: none;
}
/* Phones only: on tablet and desktop the strip would just be a black line across the top. */
@media (min-width: 768px) { .a1-statusbar { display: none; } }

/* ---------- Header (fixed) ---------- */
.a1-header {
  position: fixed;
  inset: 0 0 auto 0;
  top: env(safe-area-inset-top, 0px);
  z-index: 1030;
  height: var(--a1-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px max(24px, env(safe-area-inset-right, 0px)) 10px max(24px, env(safe-area-inset-left, 0px));
}
/* Figma: linear gradient fill + progressive background blur, strongest at the top fading to 0.
   A single masked backdrop-filter can only fade one blur in and out, so the blur is built from
   stacked layers (.a1-header__blur in the markup). Each layer blurs the ones beneath it, and their
   strengths are picked so the combined blur grows evenly from 0 at the bottom to about 7px at the top. */
.a1-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}
.a1-header__blur { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.a1-header__blur > i { position: absolute; inset: 0; }
.a1-header__blur > i:nth-child(1) { -webkit-backdrop-filter: blur(0.85px); backdrop-filter: blur(0.85px); -webkit-mask-image: linear-gradient(to top, transparent 0.0%, #000 12.5%); mask-image: linear-gradient(to top, transparent 0.0%, #000 12.5%); }
.a1-header__blur > i:nth-child(2) { -webkit-backdrop-filter: blur(1.47px); backdrop-filter: blur(1.47px); -webkit-mask-image: linear-gradient(to top, transparent 12.5%, #000 25.0%); mask-image: linear-gradient(to top, transparent 12.5%, #000 25.0%); }
.a1-header__blur > i:nth-child(3) { -webkit-backdrop-filter: blur(1.9px); backdrop-filter: blur(1.9px); -webkit-mask-image: linear-gradient(to top, transparent 25.0%, #000 37.5%); mask-image: linear-gradient(to top, transparent 25.0%, #000 37.5%); }
.a1-header__blur > i:nth-child(4) { -webkit-backdrop-filter: blur(2.25px); backdrop-filter: blur(2.25px); -webkit-mask-image: linear-gradient(to top, transparent 37.5%, #000 50.0%); mask-image: linear-gradient(to top, transparent 37.5%, #000 50.0%); }
.a1-header__blur > i:nth-child(5) { -webkit-backdrop-filter: blur(2.55px); backdrop-filter: blur(2.55px); -webkit-mask-image: linear-gradient(to top, transparent 50.0%, #000 62.5%); mask-image: linear-gradient(to top, transparent 50.0%, #000 62.5%); }
.a1-header__blur > i:nth-child(6) { -webkit-backdrop-filter: blur(2.82px); backdrop-filter: blur(2.82px); -webkit-mask-image: linear-gradient(to top, transparent 62.5%, #000 75.0%); mask-image: linear-gradient(to top, transparent 62.5%, #000 75.0%); }
.a1-header__blur > i:nth-child(7) { -webkit-backdrop-filter: blur(3.06px); backdrop-filter: blur(3.06px); -webkit-mask-image: linear-gradient(to top, transparent 75.0%, #000 87.5%); mask-image: linear-gradient(to top, transparent 75.0%, #000 87.5%); }
.a1-header__blur > i:nth-child(8) { -webkit-backdrop-filter: blur(3.29px); backdrop-filter: blur(3.29px); -webkit-mask-image: linear-gradient(to top, transparent 87.5%, #000 100.0%); mask-image: linear-gradient(to top, transparent 87.5%, #000 100.0%); }
.a1-header__logo { flex: 1 0 0; display: flex; }
.a1-header__logo img { width: 51px; height: 32px; transition: filter .3s ease; }
/* Logo turns white while the header sits over dark hero imagery (main.js sets is-on-dark). */
.a1-header.is-on-dark .a1-header__logo img { filter: brightness(0) invert(1); }
.a1-header__nav {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 14px 24px;
  border-radius: var(--a1-radius-pill);
  background: rgba(238,238,238,.5);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
}
.a1-header__nav a,
.a1-header__lang {
  color: var(--a1-text);
  font: 700 16px/normal var(--a1-font);
  letter-spacing: -0.32px;
  text-decoration: none;
  white-space: nowrap;
}
.a1-header__nav a:hover { color: var(--a1-ink); }
.a1-header__lang {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 0;
}
.a1-header__lang img { width: 24px; height: 24px; }
.a1-header__cta { flex: 1 0 0; display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
/* Homepage: Book a ride stays hidden while the header is over the hero (the booking panel is right there). */
.a1-header__cta .a1-btn { transition: opacity .25s ease, visibility .25s; }
/* Hides instantly (no half-faded button over the booking panel); fades in only when appearing. */
.a1-header.is-on-hero .a1-header__cta .a1-btn { opacity: 0; visibility: hidden; pointer-events: none; transition: none; }
.a1-header__menu { display: none; }

/* ---------- Header below 1024 (Figma 72:1669 / 72:3118: px16, small CTA, menu pill) ---------- */
@media (max-width: 1023.98px) {
  .a1-header { padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); }
  .a1-header__nav { display: none; }
  .a1-header__cta { gap: 12px; }
  .a1-header__cta .a1-btn {
    padding: 10px 16px;
    font-size: 14px;
    letter-spacing: -.42px;
  }
  .a1-header__menu {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    border: 0;
    border-radius: var(--a1-radius-pill, 1000px);
    background: rgba(238, 238, 238, .5);
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
  }
}
/* Phones: 24px side padding; header sits under the 6px status-bar strip. */
@media (max-width: 767.98px) { .a1-header { top: max(6px, env(safe-area-inset-top, 0px)); padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); } }

/* Menu panel for <1024. js/main.js builds it from .a1-header__nav when the page has none. */
.a1-header__menu { cursor: pointer; }
.a1-header__panel {
  position: absolute;
  top: calc(100% - 4px);
  right: 16px;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-radius: 24px;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  box-shadow: 0 14px 30px -8px rgba(0,0,0,.25);
  opacity: 0;
  transform: translateY(-8px) scale(.98);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity .2s var(--a1-ease-out), transform .2s var(--a1-ease-out);
}
.a1-header.is-menu-open .a1-header__panel { opacity: 1; transform: none; pointer-events: auto; }
.a1-header__panel a,
.a1-header__panel .a1-header__lang {
  padding: 12px 16px;
  border-radius: 16px;
  color: var(--a1-text);
  font: 700 16px/normal var(--a1-font);
  letter-spacing: -0.32px;
  text-decoration: none;
}
.a1-header__panel a:hover { background: var(--a1-surface); color: var(--a1-ink); }
@media (min-width: 1024px) { .a1-header__panel { display: none; } }

/* Language menu: js/main.js wraps each .a1-header__lang in .a1-lang and adds the list.
   Only English works for now; the other languages are placeholders for development. */
.a1-lang { position: relative; display: flex; flex-direction: column; }
.a1-header__lang { cursor: pointer; }
.a1-header__lang img:last-child { transition: transform .25s var(--a1-ease-out); }
.a1-header__lang[aria-expanded="true"] img:last-child { transform: rotate(180deg); }
.a1-lang__menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 30;
  min-width: 180px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--a1-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 20px rgba(0,0,0,.1), 0 30px 40px rgba(0,0,0,.05);
}
.a1-lang__menu[hidden] { display: none; }
.a1-lang__menu button {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border: 0;
  border-radius: 14px;
  background: none;
  color: var(--a1-ink);
  font: 700 16px/normal var(--a1-font);
  letter-spacing: -0.32px;
  text-align: left;
  white-space: nowrap;
}
.a1-lang__menu button:hover,
.a1-lang__menu button:focus-visible { background: var(--a1-surface); outline: 0; }
.a1-lang__menu button[aria-selected="true"] { background: var(--a1-ink); color: #fff; }
.a1-header__panel .a1-lang__menu { position: static; min-width: 0; margin: 4px 0 0; border: 0; box-shadow: none; background: var(--a1-surface); }

/* ---------- Footer (shared markup: partials/footer.html) ---------- */
.site-footer {
  background: #fff;
  overflow: clip;
  padding: 48px 32px;
}
.site-footer__inner {
  max-width: 640px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "social" "links" "offices" "mark" "copy";
}
.site-footer__brand { display: contents; }
.site-footer__col--links { grid-area: links; }
.site-footer__col--offices { grid-area: offices; }
.site-footer__social { grid-area: social; }
.site-footer__mark { grid-area: mark; }
.site-footer__copy { grid-area: copy; }

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.footer-group__title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.36px;
  line-height: normal;
  color: #131313;
}
.footer-group__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  line-height: normal;
  color: #565656;
}
.footer-group__list a { color: inherit; text-decoration: none; }
.footer-group__list a:hover { color: #131313; }

.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 48px;
}
.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  position: relative;
  border: 1px solid transparent;
  border-radius: 50%;
  /* Figma: 48px circle, 1px outside gradient stroke. Painted as a border-box
     gradient under a white padding-box so the ring stays a clean circle. */
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(180deg, #e6e6e6, #727272) border-box;
  transition: transform .2s ease;
}
.social-btn:hover { transform: translateY(-2px); }
.social-btn--play { padding-left: 4px; }
.social-btn img { display: block; }

.site-footer__col--links { margin-bottom: 32px; }
.site-footer__col--offices { margin-bottom: 48px; }

/* A1 outline mark. Figma applies a progressive layer blur (0 at 62.4% of the
   height, 40px radius at the bottom); emulated with a crisp copy fading out
   over a blurred copy fading in. Mobile: 180px strip, art pinned right. */
.site-footer__mark {
  display: flex;
  justify-content: flex-end;
  height: 180px;
  overflow: clip;
}
.site-footer__mark-art {
  position: relative;
  width: 311px;
  height: 180px;
  flex: none;
}
.site-footer__mark-art picture,
.site-footer__mark-art img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}
.site-footer__mark-art picture:not(.is-blur) {
  -webkit-mask-image: linear-gradient(to bottom, #000 62.4%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 62.4%, transparent 100%);
}
.site-footer__mark-art picture.is-blur {
  filter: blur(20px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 62.4%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 62.4%, #000 100%);
}

.site-footer__copy {
  margin: 0;
  font-size: 14px;
  line-height: normal;
  color: #969696;
  text-align: center;
}

/* tablet */
@media (min-width: 768px) {
  .site-footer { padding: 80px 32px 0; }
  .site-footer__inner {
    max-width: 720px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 32px;
    grid-template-areas:
      "links offices"
      "social offices"
      "copy mark";
    grid-template-rows: auto 1fr auto;
  }
  .site-footer__col--links,
  .site-footer__col--offices { margin-bottom: 0; }
  .site-footer__col--offices { gap: 40px; align-self: start; }
  .site-footer__social { margin: 32px 0 0; align-self: start; width: 230px; }
  .site-footer__copy {
    margin-top: 64px;
    align-self: center;
    text-align: left;
    white-space: nowrap;
  }
  .site-footer__mark {
    margin-top: 64px;
    justify-self: end;
    display: block;
    width: 383px;
    height: 240px;
    overflow: visible;
  }
  .site-footer__mark-art { width: 383px; height: 240px; }
}

/* desktop */
@media (min-width: 1024px) {
  .site-footer { padding: 80px 48px; }
  .site-footer__inner {
    max-width: 1320px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 24px;
    grid-template-areas: "links offices offices brand brand";
  }
  .site-footer__col--links { gap: 40px; align-self: stretch; }
  .site-footer__col--offices { gap: 40px; }
  .site-footer__brand {
    grid-area: brand;
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 24px;
  }
  .site-footer__social { margin: 0; align-self: auto; }
  .site-footer__mark {
    order: -1;
    margin: 0;
    width: 100%;
    height: auto;
    overflow: clip;
  }
  .site-footer__mark-art {
    width: 100%;
    height: auto;
    aspect-ratio: 513.6 / 322.259;
  }
  .site-footer__copy {
    margin: 0;
    width: 100%;
    text-align: right;
    white-space: normal;
  }
}

/* ---------- Reveal animation ----------
   Add .reveal to any element; js/main.js adds .is-visible when it scrolls into view.
   Optional: data-reveal="up|fade|left|right|zoom", style="--reveal-delay:120ms".
   Content stays visible if JS never runs (no .js-reveal on <html>) or motion is reduced. */
.js-reveal .reveal {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition: opacity .8s var(--a1-ease-out), transform .8s var(--a1-ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js-reveal .reveal[data-reveal="fade"] { transform: none; }
.js-reveal .reveal[data-reveal="left"] { transform: translate3d(-40px, 0, 0); }
.js-reveal .reveal[data-reveal="right"] { transform: translate3d(40px, 0, 0); }
.js-reveal .reveal[data-reveal="zoom"] { transform: scale(1.06); }
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Gradient outlines (Figma gradient strokes). Each element keeps a transparent border for its size and sets
   --gs (and --gs-w when not 1px); ::before paints the gradient ring over the border so translucent fills still work. */
/* Translucent surfaces keep the masked ring; solid ones paint it as a border-box layer in home.css. */
.booking::before, .deal__tag::before {
  content: '';
  position: absolute;
  inset: calc(var(--gs-w, 1px) * -1);
  padding: var(--gs-w, 1px);
  border-radius: inherit;
  background: var(--gs);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}