/* ==========================================================================
   Fonts, served from here instead of fonts.googleapis.com.
   The Google stylesheet was render-blocking on a third-party origin:
   a DNS lookup, a TLS handshake and a round trip before a single
   glyph could be asked for. These are the same files, 356KB on disk,
   but unicode-range means a visitor downloads only what the page
   actually sets. Greek is kept because the registration line in every
   footer reads ΑΦΜ / ΓΕΜΗ / ΜΗΤΕ; latin-ext was dropped after checking
   that not one accented latin character appears on the site.
   ========================================================================== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-greek.woff2') format('woff2');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-greek.woff2') format('woff2');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-greek.woff2') format('woff2');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700-greek.woff2') format('woff2');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/inter-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/inter-800-greek.woff2') format('woff2');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ==========================================================================
   MAREVA Rent a Car — Design System
   Cinematic dark / premium automotive. Brand: orange #E6570A on charcoal.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --brand:            #E6570A;   /* accents, borders, glows — graphical, 5.3:1 on --bg */
  --brand-cta:        #C64B08;   /* filled surfaces carrying white text — 4.76:1 vs #fff */
  --brand-cta-hover:  #B34408;   /* hover darkens, so contrast only improves — 5.6:1 */
  --brand-bright:     #FF7A2E;
  --brand-soft:       #F5892B;
  --brand-ink:        #FFFFFF;

  /* Surfaces (cinematic dark — never pure #000, avoids OLED smear) */
  --bg:               #0B0C0E;
  --surface-1:        #121316;
  --surface-2:        #191B1F;
  --surface-3:        #212429;
  --hairline:         rgba(255,255,255,.09);
  --hairline-strong:  rgba(255,255,255,.16);

  /* Text */
  --fg:               #F4F5F7;
  --fg-muted:         #A9AEB6;   /* 6.4:1 on --bg */
  --fg-dim:           #7C828C;   /* 4.80:1 on --surface-1, 5.06:1 on --bg */

  /* Feedback */
  --ok:               #4ADE80;
  --danger:           #F0603E;

  /* Type scale (fluid) */
  --step--1: clamp(.82rem, .78rem + .18vw, .9rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.075rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.05rem);
  --step-3:  clamp(1.95rem, 1.6rem + 1.8vw, 3rem);
  --step-4:  clamp(2.5rem, 1.9rem + 3vw, 4.4rem);
  --step-5:  clamp(3rem, 2rem + 5.2vw, 7rem);

  /* Spacing — standard density (4/8 rhythm) */
  --space-1: .5rem;   --space-2: 1rem;   --space-3: 1.5rem;
  --space-4: 2rem;    --space-5: 3rem;   --space-6: 4rem;
  --space-7: 6rem;    --space-8: 8rem;

  --radius:    14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 12px 32px -12px rgba(0,0,0,.7);
  --shadow-3: 0 32px 80px -24px rgba(0,0,0,.85);
  --glow:     0 0 0 1px rgba(230,87,10,.35), 0 18px 50px -18px rgba(230,87,10,.55);

  --ease:      cubic-bezier(.16,1,.3,1);   /* expo.out */
  --ease-in:   cubic-bezier(.7,0,.84,0);
  --dur-fast:  .18s;
  --dur:       .32s;
  --dur-slow:  .6s;

  --container: 1240px;
  --gutter: clamp(1.15rem, 4vw, 3rem);

  /* z-scale */
  --z-base: 0; --z-raised: 10; --z-sticky: 40; --z-header: 100; --z-overlay: 1000;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
  font-feature-settings: 'cv11' 1, 'ss01' 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.035em;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }

::selection { background: var(--brand-cta); color: #fff; }

/* Focus — always visible, never removed */
:focus-visible {
  outline: 2px solid var(--brand-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

.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: var(--gutter); top: -100px; z-index: var(--z-overlay);
  background: var(--brand-cta); color: #fff; padding: .75rem 1.25rem;
  border-radius: var(--radius); font-weight: 600;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: 1560px; }

.section { padding-block: clamp(4.5rem, 10vw, 9rem); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--step--1); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-soft);
}
.eyebrow::before {
  content: ''; width: 28px; height: 1px; background: var(--brand); flex: none;
}

.serif {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic; font-weight: 400;
  letter-spacing: -.01em;
  color: var(--brand-soft);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--fg-muted);
  max-width: 58ch;
  letter-spacing: -.011em;
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: 0 1.65rem;
  border-radius: var(--radius-pill);
  font-weight: 600; font-size: var(--step-0); letter-spacing: -.01em;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  touch-action: manipulation;
}
.btn:active { transform: scale(.97); }

.btn--primary {
  background: var(--brand-cta); color: #fff;
  box-shadow: 0 10px 30px -12px rgba(230,87,10,.8);
}
.btn--primary:hover { background: var(--brand-cta-hover); box-shadow: var(--glow); }

.btn--ghost {
  border: 1px solid var(--hairline-strong);
  color: var(--fg);
  background: rgba(255,255,255,.03);
}
.btn--ghost:hover { border-color: var(--brand); background: rgba(230,87,10,.1); color: #fff; }

.btn--lg { min-height: 60px; padding: 0 2.1rem; font-size: var(--step-1); }
.btn--block { width: 100%; }

.btn__arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Text link with underline sweep */
.link-sweep {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; color: var(--fg);
  background-image: linear-gradient(var(--brand), var(--brand));
  background-size: 0% 1.5px; background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease);
  padding-bottom: 2px;
}
.link-sweep:hover { background-size: 100% 1.5px; color: var(--brand-soft); }

/* ==========================================================================
   Header
   ========================================================================== */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  padding-block: 1rem;
  transition: background-color var(--dur) var(--ease),
              backdrop-filter var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              padding var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.header.is-stuck {
  background: rgba(11,12,14,.82);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--hairline);
  padding-block: .6rem;
}
.header__inner { display: flex; align-items: center; gap: var(--space-3); }
.header__logo { flex: none; display: block; }
.header__logo img { width: clamp(118px, 12vw, 152px); height: auto; }

.nav { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.nav__link {
  position: relative;
  padding: .6rem .9rem;
  font-size: var(--step--1); font-weight: 500;
  color: var(--fg-muted); border-radius: var(--radius-pill);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav__link:hover { color: var(--fg); background: rgba(255,255,255,.05); }
.nav__link[aria-current="page"] { color: var(--fg); }
.nav__link[aria-current="page"]::after {
  content: ''; position: absolute; left: .9rem; right: .9rem; bottom: .3rem;
  height: 2px; border-radius: 2px; background: var(--brand);
}

.header__actions { display: flex; align-items: center; gap: .5rem; margin-left: .5rem; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  color: var(--fg);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.icon-btn:hover { border-color: var(--brand); background: rgba(230,87,10,.12); }
.icon-btn:active { transform: scale(.94); }

.burger { display: none; }
.burger svg path { transition: d var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.burger[aria-expanded="true"] .burger__top { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__mid { opacity: 0; }
.burger[aria-expanded="true"] .burger__bot { transform: translateY(-5px) rotate(-45deg); }
.burger__top, .burger__mid, .burger__bot {
  transform-origin: center;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

/* Mobile nav */
.mobile-nav {
  position: fixed; inset: 0; z-index: calc(var(--z-header) - 1);
  background: rgba(11,12,14,.97);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  padding: 6.5rem var(--gutter) var(--gutter);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.mobile-nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.mobile-nav__link {
  /* Opened from a control on the right, so it reads from the right:
     the number trails the label instead of leading it. */
  /* row-reverse flips the main axis, so flex-START is the right edge here.
     flex-end would pack these against the left. */
  display: flex; align-items: baseline; justify-content: flex-start;
  flex-direction: row-reverse; gap: .85rem; text-align: right;
  padding: 1rem 0; border-bottom: 1px solid var(--hairline);
  font-size: var(--step-2); font-weight: 600; letter-spacing: -.03em;
  opacity: 0; transform: translateX(18px);
  transition: opacity .45s var(--ease), transform .45s var(--ease), color var(--dur) var(--ease);
}
.mobile-nav__link[aria-current="page"] { color: var(--brand-soft); }
.mobile-nav.is-open .mobile-nav__link { opacity: 1; transform: none; }
.mobile-nav__foot .btn { justify-content: center; }
.mobile-nav__link:hover { color: var(--brand-soft); }
.mobile-nav__link span { font-size: var(--step--1); color: var(--fg-dim); font-weight: 500; }
.mobile-nav__foot { margin-top: auto; padding-top: var(--space-4); display: grid; gap: .75rem; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: 7rem;
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute; inset: 0; z-index: -2;
  will-change: transform;
}
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.12);
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    /* readability wash over the headline column */
    linear-gradient(100deg, rgba(8,9,10,.93) 0%, rgba(8,9,10,.86) 34%, rgba(8,9,10,.55) 60%, rgba(8,9,10,.42) 100%),
    /* vertical anchor: header at top, page blend at bottom */
    linear-gradient(180deg, rgba(8,9,10,.8) 0%, rgba(8,9,10,.25) 30%, rgba(8,9,10,.85) 78%, var(--bg) 100%),
    /* brand glow */
    radial-gradient(80% 62% at 6% 88%, rgba(230,87,10,.26), transparent 60%);
}
/* vignette */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 42%, rgba(8,9,10,.6) 100%);
}

.hero__body { padding-bottom: var(--space-4); }

.hero__title {
  font-size: clamp(2.9rem, 6.4vw, 5.6rem);
  font-weight: 800;
  letter-spacing: -.045em;
  max-width: 13ch;
  margin-bottom: var(--space-3);
  text-shadow: 0 2px 30px rgba(0,0,0,.55);
}
.hero__title .serif { font-weight: 400; letter-spacing: -.02em; }

.hero__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.5rem;
  margin-bottom: var(--space-3);
  font-size: var(--step--1); color: var(--fg-muted);
}
.hero__meta span { display: inline-flex; align-items: center; gap: .5rem; }
.hero__meta svg { color: var(--brand-soft); flex: none; }

/* Kinetic line reveal */
.reveal-line { display: block; overflow: hidden; }
.js .reveal-line > span {
  display: block;
  transform: translateY(105%);
  transition: transform .95s var(--ease);
}
.js .is-in .reveal-line > span { transform: none; }
.js .is-in .reveal-line:nth-child(2) > span { transition-delay: .09s; }
.js .is-in .reveal-line:nth-child(3) > span { transition-delay: .18s; }

.scroll-cue {
  display: none;
  position: absolute; right: var(--gutter); bottom: var(--space-4);
  display: flex; align-items: center; gap: .6rem;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--fg-dim);
}
.scroll-cue__track {
  width: 1px; height: 46px; background: var(--hairline-strong); position: relative; overflow: hidden;
}
.scroll-cue__track::after {
  content: ''; position: absolute; inset: 0; background: var(--brand);
  animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue { 0% { transform: translateY(-100%); } 60%,100% { transform: translateY(100%); } }

/* ==========================================================================
   Booking search widget
   ========================================================================== */
.searchbar {
  background: rgba(18,19,22,.78);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-lg);
  padding: .5rem;
  box-shadow: var(--shadow-3);
}
.searchbar__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr auto;
  gap: .25rem;
  align-items: stretch;
}
.field {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  gap: .1rem;
  padding: .85rem 1rem;
  border-radius: calc(var(--radius-lg) - 8px);
  transition: background-color var(--dur) var(--ease);
  min-width: 0;
}
.field:hover, .field:focus-within { background: rgba(255,255,255,.05); }
.field + .field { box-shadow: -1px 0 0 var(--hairline); }
.field__label {
  font-size: .68rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--fg-dim);
}
.field__control {
  display: flex; align-items: center; gap: .5rem; min-width: 0;
}
.field__control input[type="date"] { flex: 1 1 8.5rem; }
.field__control input[type="time"] { flex: 0 1 5.2rem; }
/* one picker affordance per field is enough — the whole row is tappable */
.field__control input[type="time"]::-webkit-calendar-picker-indicator { display: none; }
.field__control svg { color: var(--brand-soft); flex: none; }
.field select, .field input {
  width: 100%; min-width: 0;
  background: transparent; border: 0; padding: 0;
  font-size: var(--step-0); font-weight: 600; letter-spacing: -.015em;
  color: var(--fg);
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
}
.field select:focus, .field input:focus { outline: none; }
.field select option { background: var(--surface-2); color: var(--fg); }
.field input[type="date"], .field input[type="time"] { cursor: pointer; }
.field input::-webkit-calendar-picker-indicator {
  filter: invert(1); opacity: .45; cursor: pointer;
}
.searchbar__submit { padding: .25rem; display: flex; }
.searchbar__submit .btn { height: 100%; min-height: 64px; }

.searchbar__note {
  display: flex; flex-wrap: wrap; gap: .4rem 1.25rem;
  padding: .7rem 1rem .35rem;
  font-size: .78rem; color: var(--fg-dim);
}
.searchbar__note span { display: inline-flex; align-items: center; gap: .4rem; }
.searchbar__note svg { color: var(--ok); flex: none; }

/* ==========================================================================
   Marquee (brands / promises)
   ========================================================================== */
.marquee {
  border-block: 1px solid var(--hairline);
  padding-block: 1.15rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex; align-items: center; gap: 3.5rem;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: var(--step--1); font-weight: 600; letter-spacing: .04em;
  color: var(--fg-muted); white-space: nowrap;
}
.marquee__item svg { color: var(--brand); flex: none; }
.marquee__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--brand); flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   Scroll reveal primitives
   ========================================================================== */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .07s; }
[data-reveal-delay="2"] { transition-delay: .14s; }
[data-reveal-delay="3"] { transition-delay: .21s; }
[data-reveal-delay="4"] { transition-delay: .28s; }
[data-reveal-delay="5"] { transition-delay: .35s; }
[data-reveal-delay="6"] { transition-delay: .42s; }

/* ==========================================================================
   Section header
   ========================================================================== */
.section-head {
  display: grid; gap: var(--space-2);
  margin-bottom: var(--space-5);
  max-width: 70ch;
}
.section-head--split {
  max-width: none;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: end; gap: var(--space-3);
}
.section-head h2 { font-size: var(--step-4); }
.section-head--split .section-head__text { display: grid; gap: var(--space-2); max-width: 62ch; }

/* ==========================================================================
   Included / promises grid
   ========================================================================== */
.included {
  position: relative;
  background:
    radial-gradient(70% 100% at 100% 0%, rgba(230,87,10,.12), transparent 60%),
    var(--surface-1);
  border-block: 1px solid var(--hairline);
}
.included__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.promise {
  background: var(--surface-1);
  padding: var(--space-3) var(--space-3) var(--space-4);
  display: grid; gap: .55rem; align-content: start;
  transition: background-color var(--dur) var(--ease);
}
.promise:hover { background: var(--surface-2); }
.promise__icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(230,87,10,.14); color: var(--brand-soft);
  margin-bottom: .35rem;
}
.promise h3 { font-size: var(--step-0); letter-spacing: -.02em; }
.promise p { font-size: var(--step--1); color: var(--fg-muted); line-height: 1.55; }

/* Big stat row */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: var(--space-4) var(--space-3);
}
.stat__value {
  font-size: var(--step-4); font-weight: 800; letter-spacing: -.05em; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(160deg, #fff 20%, var(--brand-soft));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat__label { margin-top: .6rem; font-size: var(--step--1); color: var(--fg-muted); max-width: 24ch; }

/* ==========================================================================
   Fleet
   ========================================================================== */
.filters {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-bottom: var(--space-4);
}
.chip {
  min-height: 44px; padding: 0 1.15rem;
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-pill);
  font-size: var(--step--1); font-weight: 600; color: var(--fg-muted);
  transition: all var(--dur) var(--ease);
  touch-action: manipulation;
}
.chip:hover { color: var(--fg); border-color: var(--fg-dim); }
.chip[aria-pressed="true"] {
  background: var(--brand-cta); border-color: var(--brand-cta); color: #fff;
}
.chip__count { font-size: .72rem; opacity: .7; font-variant-numeric: tabular-nums; }

.fleet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: var(--space-3);
}
/* Home preview: 4 cards, one clean row on desktop */
.fleet-grid--preview { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1180px) { .fleet-grid--preview { grid-template-columns: repeat(2, 1fr); } }

.car {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.car:hover {
  transform: translateY(-6px);
  border-color: rgba(230,87,10,.5);
  box-shadow: var(--shadow-3);
  background: var(--surface-2);
}
.car.is-hidden { display: none; }

.car__stage {
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid; place-items: center;
  padding: var(--space-3) var(--space-3) 0;
  background:
    radial-gradient(58% 62% at 50% 78%, rgba(230,87,10,.18), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface-1));
  overflow: hidden;
}
.car__stage::after {
  /* ground shadow */
  content: ''; position: absolute; left: 12%; right: 12%; bottom: 12%;
  height: 16px; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.6), transparent 72%);
  filter: blur(6px);
}
.car__img {
  position: relative; z-index: 1;
  width: 100%; max-height: 100%; object-fit: contain;
  transition: transform var(--dur-slow) var(--ease);
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.45));
}
.car:hover .car__img { transform: scale(1.06) translateY(-3px); }
.car__img--photo { object-fit: cover; height: 100%; border-radius: 10px; filter: none; }

.car__badge {
  position: absolute; top: .9rem; left: .9rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .7rem; border-radius: var(--radius-pill);
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(11,12,14,.7); backdrop-filter: blur(8px);
  border: 1px solid var(--hairline-strong); color: var(--fg-muted);
}
.car__badge--new { background: var(--brand-cta); border-color: var(--brand-cta); color: #fff; }
.car__badge--ev { background: #0F3D2E; border-color: #1B7A55; color: #6EE7B7; }

.car__body { padding: var(--space-3); display: grid; gap: .9rem; flex: 1; align-content: start; }
.car__cat {
  font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--brand-soft);
}
.car__name { font-size: var(--step-1); letter-spacing: -.03em; }

.car__specs {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin-top: -.2rem;
}
.spec {
  display: inline-flex; align-items: center; gap: .38rem;
  padding: .32rem .65rem;
  border: 1px solid var(--hairline); border-radius: 8px;
  font-size: .76rem; color: var(--fg-muted); white-space: nowrap;
}
.spec svg { color: var(--fg-dim); flex: none; }

.car__foot {
  margin-top: auto; padding-top: .9rem;
  border-top: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.car__price { display: grid; }
.car__price b {
  font-size: var(--step-1); letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.car__price small { font-size: .72rem; color: var(--fg-dim); }

/* ==========================================================================
   Steps timeline
   ========================================================================== */
.steps { position: relative; display: grid; gap: 0; counter-reset: step; }
.steps::before {
  content: ''; position: absolute; left: 23px; top: 12px; bottom: 12px; width: 2px;
  background: var(--hairline);
}
.steps__progress {
  position: absolute; left: 23px; top: 12px; width: 2px;
  background: linear-gradient(180deg, var(--brand), var(--brand-soft));
  height: 0; transition: height .1s linear;
  box-shadow: 0 0 14px rgba(230,87,10,.7);
}
.step {
  position: relative; display: grid; grid-template-columns: 48px 1fr;
  gap: var(--space-3); padding-block: 1.15rem;
  align-items: start;
}
.step__num {
  counter-increment: step;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2); border: 2px solid var(--hairline);
  font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums;
  color: var(--fg-dim);
  transition: all var(--dur) var(--ease);
  position: relative; z-index: 1;
}
.step__num::before { content: counter(step, decimal-leading-zero); }
.step.is-in .step__num {
  border-color: var(--brand-cta); color: #fff; background: var(--brand-cta);
  box-shadow: 0 0 0 6px rgba(230,87,10,.14);
}
.step__text h3 { font-size: var(--step-1); letter-spacing: -.025em; margin-bottom: .3rem; }
.step__text p { color: var(--fg-muted); font-size: var(--step--1); max-width: 52ch; }

/* ==========================================================================
   Locations
   ========================================================================== */
.locations {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1px; background: var(--hairline);
  border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden;
}
.loc {
  background: var(--surface-1); padding: var(--space-3);
  display: grid; gap: .4rem; align-content: start;
  transition: background-color var(--dur) var(--ease);
}
.loc:hover { background: var(--surface-2); }
.loc__pin { color: var(--brand-soft); }
.loc h3 { font-size: var(--step-0); letter-spacing: -.02em; }
.loc p { font-size: .82rem; color: var(--fg-muted); }
.loc__free {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .2rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ok);
}

/* ==========================================================================
   Split feature (image + text)
   ========================================================================== */
.split {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.split__media {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--hairline);
  aspect-ratio: 4 / 3;
}
.split__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); }
.split__media--tall { aspect-ratio: 3 / 4; }
.split__text { display: grid; gap: var(--space-2); align-content: start; }
.split__text h2 { font-size: var(--step-3); }

.check-list { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.check-list li {
  display: grid; grid-template-columns: 22px 1fr; gap: .75rem; align-items: start;
  font-size: var(--step-0); color: var(--fg-muted);
}
.check-list svg { color: var(--brand); margin-top: 5px; }
.check-list b { color: var(--fg); font-weight: 600; }

.x-list { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.x-list li {
  display: grid; grid-template-columns: 20px 1fr; gap: .7rem; align-items: start;
  font-size: var(--step--1); color: var(--fg-muted);
}
.x-list svg { color: var(--danger); margin-top: 4px; }

/* ==========================================================================
   Quote
   ========================================================================== */
.quote { max-width: 26ch; }
.quote blockquote {
  margin: 0;
  font-size: var(--step-3); line-height: 1.24; letter-spacing: -.035em;
  font-weight: 500;
}
.quote__mark { color: var(--brand); font-size: var(--step-5); line-height: .5; display: block; }
.quote__by { margin-top: var(--space-3); display: flex; align-items: center; gap: .75rem; }
.quote__avatar {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-cta); color: #fff; font-weight: 700; flex: none;
}
.quote__by div { font-size: var(--step--1); }
.quote__by small { color: var(--fg-dim); display: block; }

.stars { display: flex; gap: 2px; color: var(--brand-soft); margin-bottom: var(--space-2); }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 6vw, 5rem);
  background: linear-gradient(135deg, #1A1C20, #101114);
  border: 1px solid var(--hairline-strong);
}
.cta-band::before {
  content: ''; position: absolute; inset: -40% -10% auto auto; z-index: -1;
  width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(230,87,10,.4), transparent 70%);
  filter: blur(30px);
}
.cta-band h2 { font-size: var(--step-4); max-width: 18ch; margin-bottom: var(--space-2); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--space-4); }

/* ==========================================================================
   Forms
   ========================================================================== */
.form { display: grid; gap: var(--space-3); }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: var(--space-2); }
.form__field { display: grid; gap: .4rem; }
.form__field label { font-size: var(--step--1); font-weight: 600; color: var(--fg-muted); }
.form__field .req { color: var(--brand-soft); }
.form__field input, .form__field select, .form__field textarea {
  min-height: 52px; padding: .8rem 1rem;
  background: var(--surface-2); border: 1px solid var(--hairline-strong);
  border-radius: var(--radius); color: var(--fg);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  width: 100%;
}
.form__field textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.form__field input:hover, .form__field select:hover, .form__field textarea:hover { border-color: var(--fg-dim); }
.form__field input:focus, .form__field select:focus, .form__field textarea:focus {
  outline: none; border-color: var(--brand); background: var(--surface-3);
  box-shadow: 0 0 0 3px rgba(230,87,10,.18);
}
.form__field input::placeholder, .form__field textarea::placeholder { color: var(--fg-dim); }
.form__help { font-size: .78rem; color: var(--fg-dim); }
.form__field select { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23A9AEB6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem; }
.form__field select option { background: var(--surface-2); }

/* Phone with country selector */
.phone-input { display: grid; grid-template-columns: minmax(112px, auto) 1fr; gap: .5rem; }
.phone-input select { font-variant-numeric: tabular-nums; }

.form__error { display: none; font-size: .8rem; color: var(--danger); }
.form__field.has-error input, .form__field.has-error select, .form__field.has-error textarea { border-color: var(--danger); }
.form__field.has-error .form__error { display: flex; align-items: center; gap: .35rem; }

.form__status {
  display: none; align-items: center; gap: .6rem;
  padding: 1rem 1.15rem; border-radius: var(--radius);
  font-size: var(--step--1); font-weight: 500;
}
.form__status.is-visible { display: flex; }
.form__status--ok { background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.3); color: #86EFAC; }

/* ==========================================================================
   Contact cards
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: var(--space-2); }
.contact-card {
  display: grid; gap: .5rem; align-content: start;
  padding: var(--space-3);
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
a.contact-card:hover { border-color: var(--brand); transform: translateY(-4px); background: var(--surface-2); }
.contact-card__icon {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(230,87,10,.14); color: var(--brand-soft); margin-bottom: .3rem;
}
.contact-card h3 { font-size: var(--step--1); color: var(--fg-dim); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; }
.contact-card p { font-size: var(--step-1); font-weight: 600; letter-spacing: -.025em; }
.contact-card small { color: var(--fg-muted); font-size: .82rem; }

/* Map */
.map-embed {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--hairline);
  aspect-ratio: 16/10; background: var(--surface-2);
}
.map-embed iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.35) invert(.92) hue-rotate(180deg) contrast(.9); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { display: grid; gap: .5rem; }
.faq__item {
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--surface-1);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.faq__item[open] { border-color: rgba(230,87,10,.4); background: var(--surface-2); }
.faq__item summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem var(--space-3);
  font-weight: 600; font-size: var(--step-0); letter-spacing: -.015em;
  min-height: 56px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ''; flex: none; width: 12px; height: 12px;
  border-right: 2px solid var(--brand-soft); border-bottom: 2px solid var(--brand-soft);
  transform: rotate(45deg) translate(-2px,-2px);
  transition: transform var(--dur) var(--ease);
}
.faq__item[open] summary::after { transform: rotate(225deg) translate(-2px,-2px); }
.faq__body { padding: 0 var(--space-3) var(--space-3); color: var(--fg-muted); font-size: var(--step--1); }
.faq__body p + p { margin-top: .7rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  border-top: 1px solid var(--hairline);
  background: var(--surface-1);
  padding-block: var(--space-6) var(--space-3);
  margin-top: var(--space-5);
}
/* NOTE: this used to read `1.4fr repeat(auto-fit, minmax(150px,1fr))`.
   CSS Grid forbids auto-fit/auto-fill alongside an fr track, so the whole
   declaration was invalid and dropped — the footer silently collapsed to a
   single 1344px column and ran over 1000px tall. Explicit tracks instead. */
.footer__grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.25fr;
  gap: var(--space-4) var(--space-4);
  align-items: start;
}
.footer__brand { display: grid; gap: var(--space-2); align-content: start; max-width: 34ch; }
.footer__brand img { width: 150px; }
.footer__brand p { font-size: var(--step--1); color: var(--fg-muted); }
.footer .footer__title {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-dim); margin: 0 0 1rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer li a, .footer address a { font-size: var(--step--1); color: var(--fg-muted);
  transition: color var(--dur) var(--ease); }
.footer li a:hover, .footer address a:hover { color: var(--brand-soft); }
.footer address { font-style: normal; display: grid; gap: .6rem; font-size: var(--step--1);
  color: var(--fg-muted); }

.socials { display: flex; gap: .5rem; }
.socials a {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--hairline); color: var(--fg-muted);
  transition: all var(--dur) var(--ease);
}
.socials a:hover { border-color: var(--brand); background: rgba(230,87,10,.14); color: var(--brand-soft); }

.footer__bottom {
  margin-top: var(--space-5); padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: .75rem var(--space-3);
  align-items: center; justify-content: space-between;
  font-size: .78rem; color: var(--fg-dim);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; }

/* ==========================================================================
   Sticky mobile CTA
   ========================================================================== */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  display: none; gap: .5rem;
  padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(11,12,14,.9);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--hairline);
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease);
}
.mobile-cta.is-visible { transform: none; }
.mobile-cta .btn { flex: 1; min-height: 50px; }
.mobile-cta .icon-btn { flex: none; }

/* WhatsApp float (desktop) */
.wa-float {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: var(--z-sticky);
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: #06301A;
  box-shadow: 0 14px 34px -10px rgba(37,211,102,.6);
  transition: transform var(--dur) var(--ease);
}
.wa-float:hover { transform: scale(1.08); }
.wa-float:active { transform: scale(.95); }

/* ==========================================================================
   Page hero (inner pages)
   ========================================================================== */
.page-hero {
  position: relative; padding-top: clamp(8rem, 16vw, 12rem); padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  overflow: hidden; isolation: isolate;
  border-bottom: 1px solid var(--hairline);
}
.page-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(80% 90% at 20% 0%, rgba(230,87,10,.2), transparent 62%);
}
.page-hero h1 { font-size: var(--step-4); max-width: 18ch; margin-block: var(--space-2); }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .8rem; color: var(--fg-dim); }
.breadcrumbs a { transition: color var(--dur) var(--ease); }
.breadcrumbs a:hover { color: var(--brand-soft); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .searchbar__grid { grid-template-columns: 1fr 1fr; }
  .searchbar__submit { grid-column: 1 / -1; }
  .field + .field { box-shadow: none; }
  .searchbar__grid .field:nth-child(odd) { box-shadow: none; }
}

@media (max-width: 1020px) {
  .included__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .nav, .header__actions .btn { display: none; }
  .burger { display: inline-flex; }
  .header__actions { margin-left: auto; gap: .6rem; }
  .section-head--split { grid-template-columns: 1fr; align-items: start; }
  .footer__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
  .footer__brand { grid-column: 1 / -1; max-width: 52ch; }
}

@media (max-width: 720px) {
  .eyebrow { letter-spacing: .1em; }
  .searchbar__submit .btn { width: 100%; }
  .hero { min-height: 92svh; padding-top: 6.5rem; }
  .hero__title { font-size: clamp(2.6rem, 12vw, 4rem); }
  .searchbar__grid { grid-template-columns: 1fr; }
  .searchbar__grid .field { box-shadow: none; }
  .searchbar__grid .field + .field { border-top: 1px solid var(--hairline); border-radius: 0; }
  .scroll-cue { display: none; }
  .mobile-cta { display: flex; }
  .wa-float { display: none; }
  body { padding-bottom: 4.6rem; }
  .fleet-grid, .fleet-grid--preview { grid-template-columns: 1fr; }
  .included__grid { grid-template-columns: 1fr; }
  .steps::before, .steps__progress { left: 19px; }
  .step { grid-template-columns: 40px 1fr; gap: var(--space-2); }
  .step__num { width: 40px; height: 40px; font-size: .82rem; }
  /* Still parallel, just two-up — a single stack ran over 1000px tall. */
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-2); }
  .footer__grid > *:last-child { grid-column: 1 / -1; }
}

/* ==========================================================================
   Reduced motion — full respect
   ========================================================================== */
/* Reduced, not removed.
   The old block here was the copy-paste wildcard that flattens
   animation-duration and transition-duration on every element to .01ms,
   then pinned [data-reveal] to opacity 1. With Reduce Motion on — which a
   lot of people leave on, on iOS especially — the whole site arrived
   already finished: nothing faded, the page just sat there.

   What actually hurts a vestibular system is travel: sliding, parallax,
   zoom, and anything that loops forever. A cross-fade does not, and both
   WCAG 2.3.3 and Apple's own guidance say so. So movement stops and
   fading stays. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }

  /* fade in place — the travel is what goes, not the reveal */
  .js [data-reveal] { transform: none !important; transition: opacity .5s var(--ease); }
  .reveal-line > span { transform: none !important; }

  /* parallax and hover displacement: gone */
  .hero__media { transform: none !important; }
  .car:hover, .result:hover { transform: none !important; }
  .car:hover .car__img { transform: none !important; }
  .to-top { transform: none !important; }
  .result:hover .result__img { transform: none !important; }

  /* The marquee keeps running here on purpose. That is a deliberate
     deviation, asked for by the client on 2026-09-25 after being shown
     what the setting is for — do not "fix" it back without checking.
     It is slowed rather than left at full speed, so the band still reads
     as alive without whipping past: 38s becomes 60s. It still pauses on
     hover where a pointer exists. */
  .marquee__track { animation-duration: 60s; }

  /* This one stays off. It is a small looping nudge that carries no
     information — the page scrolls perfectly well without it. */
  .scroll-cue { animation: none; }
}

/* Print */
@media print {
  .header, .mobile-nav, .mobile-cta, .wa-float, .scroll-cue, .marquee { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   Phone field with country selector
   (component shared with the Starlight/Villa projects — dark theme skin)
   ========================================================================== */
.phone-field { display: flex; align-items: stretch; gap: .5rem; }
.phone-field input[type="tel"] { flex: 1 1 auto; min-width: 0; }

.phone-field__cc {
  position: relative; flex: 0 0 auto;
  display: flex; align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.phone-field__cc:hover { border-color: var(--fg-dim); }
.phone-field__cc:focus-within {
  border-color: var(--brand); background: var(--surface-3);
  box-shadow: 0 0 0 3px rgba(230,87,10,.18);
}
.phone-field__display {
  display: flex; align-items: center; gap: .45rem;
  padding: .8rem .7rem .8rem .9rem;
  font-size: 1rem; color: var(--fg); white-space: nowrap; pointer-events: none;
}
.phone-field__flag { font-size: 1.15em; line-height: 1; }
.phone-field__dial { font-variant-numeric: tabular-nums; }
.phone-field__cc::after {
  content: ""; margin-right: .85rem; pointer-events: none;
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--fg-muted); border-bottom: 1.5px solid var(--fg-muted);
  transform: translateY(-2px) rotate(45deg);
}
.phone-field__select {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; border: 0; padding: 0; margin: 0;
  font-size: 16px;            /* stops iOS zooming on focus */
  -webkit-appearance: none; appearance: none;
}
.phone-field__select option, .phone-field__select optgroup {
  background: var(--surface-2); color: var(--fg);
}


/* ==================================================================
   Sticky-chrome legibility — 2026-09-25
   The header is fixed over the content. At rgba(11,12,14,.82) plus blur
   that is fine on a desktop strip, but on a 390px phone the bar covers a
   real share of the screen and headings ghost straight through it — it
   reads as two sections sitting on top of each other. Below 900px the
   bar earns its keep by being opaque.
   ================================================================== */
@media (max-width: 900px) {
  .header.is-stuck { background: rgba(11,12,14,.97); }
  .mobile-cta      { background: rgba(11,12,14,.97); }
}

/* backdrop-filter is unevenly supported on Android browsers. Without it the
   rgba above is all that stands between text and text, so go solid. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header.is-stuck { background: #0B0C0E; }
  .mobile-cta      { background: #0B0C0E; }
  .mobile-nav      { background: #0B0C0E; }
}

/* Anchor jumps used to land under the fixed header, hiding the heading the
   visitor just asked for. */
html { scroll-padding-top: 5.5rem; }
@media (max-width: 900px) { html { scroll-padding-top: 4.75rem; } }

/* ==================================================================
   Depth pass — 2026-09-11
   Real perspective, not WebGL. The skill's "3D & Hyperrealism" preset
   is rated poor for performance and not accessible, and this is a page
   tourists open on airport wifi. So: CSS perspective, layered shadows
   and a lit stage — GPU-cheap, no extra bytes, and it degrades to flat
   when the visitor asks for reduced motion.
   ================================================================== */

/* Layered shadow scale. One soft ambient + one tight contact shadow
   reads as depth; a single large blur reads as fog. */
:root {
  --lift-1: 0 1px 2px rgba(0,0,0,.28), 0 4px 12px rgba(0,0,0,.22);
  --lift-2: 0 2px 4px rgba(0,0,0,.32), 0 12px 28px rgba(0,0,0,.34);
  --lift-3: 0 3px 6px rgba(0,0,0,.36), 0 24px 56px rgba(0,0,0,.42);
  --lift-brand: 0 18px 44px rgba(230,87,10,.20);
}

/* ---- fleet cards: tilt toward the cursor ---- */
.fleet-grid, .result-grid { perspective: 1400px; }

.car { transform-style: preserve-3d; box-shadow: var(--lift-1); }
.car:hover {
  transform: translateY(-6px) rotateX(2.2deg) scale(1.012);
  box-shadow: var(--lift-3), var(--lift-brand);
}
.car .car__img { transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.car:hover .car__img { transform: scale(1.05) translateZ(28px); }

/* the light the car sits in */
.car__stage { position: relative; }
.car__stage::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.07), transparent 60%);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.car:hover .car__stage::before { opacity: 1; }

/* ---- booking result cards ---- */
.result {
  transform-style: preserve-3d; box-shadow: var(--lift-1);
  transition: transform .35s cubic-bezier(.2,.7,.2,1),
              box-shadow .35s cubic-bezier(.2,.7,.2,1),
              border-color .25s ease;
}
.result:hover {
  transform: translateY(-6px) rotateX(2deg);
  border-color: rgba(230,87,10,.45);
  box-shadow: var(--lift-3), var(--lift-brand);
}

/* ---- raised surfaces ---- */
.searchbar { box-shadow: var(--lift-2); }
.contact-card, .promise, .quote, .step { box-shadow: var(--lift-1); }
.cta-band { box-shadow: var(--lift-2); }

/* ---- footer: a lit edge so it reads as a separate plane ---- */
.footer { position: relative; }
.footer::before {
  content: ''; position: absolute; inset-inline: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230,87,10,.55), transparent);
}

/* Everything above is decoration. Switch it off when asked. */

/* ==================================================================
   Insurance plans — 2026-09-25
   Two cards, the paid one carrying the brand edge. The client's sheet
   is offered as a download rather than printed into the page: at
   1024x1536 it is unreadable on a phone, and 1.6MB before recompression.
   ================================================================== */
.plans { display: grid; gap: var(--space-3); }
@media (min-width: 880px) { .plans { grid-template-columns: 1fr 1fr; align-items: start; } }

.plan {
  display: grid; gap: 1rem; align-content: start;
  padding: clamp(1.25rem, 3vw, 1.9rem);
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  background: var(--bg); box-shadow: var(--lift-1);
}
.plan--featured { border-color: rgba(230,87,10,.45); box-shadow: var(--lift-2), var(--lift-brand); }
.plan__kicker {
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-dim); margin: 0;
}
.plan--featured .plan__kicker { color: var(--brand-soft); }
.plan__name { font-size: var(--step-2); letter-spacing: -.02em; margin: 0; }
.plan__price { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: 0; }
.plan__price b { font-size: var(--step-3); letter-spacing: -.03em; color: var(--brand-soft); }
.plan__price small { color: var(--fg-muted); font-size: var(--step--1); }
.plan__note {
  margin-top: .25rem; padding: .9rem 1rem;
  border: 1px solid var(--hairline); border-radius: 12px;
  background: var(--surface-1);
}
.plan__note p { font-size: var(--step--1); color: var(--fg-muted); margin: 0; line-height: 1.55; }
.plan__note b { color: var(--fg); }

.plan__sheet { display: block; position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--hairline); background: var(--surface-1); max-width: 420px; }
.plan__sheet img { display: block; width: 100%; height: auto; }
.plan__sheet-cta {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .9rem 1rem calc(.9rem + 2px);
  background: linear-gradient(180deg, transparent, rgba(11,12,14,.92) 45%);
  color: #fff; font-size: var(--step--1); font-weight: 600;
}
.plan__sheet:hover { border-color: rgba(230,87,10,.5); }
.plan__sheet:hover .plan__sheet-cta { color: var(--brand-soft); }

/* WhatsApp sits beside the phone in the header. Brand green only on hover —
   a permanently green circle fights the orange for attention. */
.icon-btn--wa:hover { border-color: #25D366; background: rgba(37,211,102,.14); color: #25D366; }

/* ==================================================================
   Back to top — 2026-09-25
   Mobile only: the pages run long (the home page is over 12,000px on a
   phone) and the bottom bar is already the thumb's home. Sits above that
   bar so the two never fight for the same corner.
   ================================================================== */
.to-top {
  position: fixed; z-index: calc(var(--z-sticky) - 1);
  right: var(--gutter);
  bottom: calc(4.9rem + env(safe-area-inset-bottom));
  width: 46px; height: 46px; border-radius: 50%;
  display: none; place-items: center;
  border: 1px solid var(--hairline); background: rgba(11,12,14,.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: var(--fg); cursor: pointer;
  box-shadow: var(--lift-2);
  opacity: 0; transform: translateY(10px) scale(.9); pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover, .to-top:focus-visible { border-color: var(--brand); color: var(--brand-soft); }

@media (max-width: 720px) { .to-top { display: grid; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .to-top { background: #0B0C0E; }
}

/* ==================================================================
   Time flag — 2026-09-25
   The cut-off hour was sitting in --fg-dim meta grey, the quietest text
   on the page, while the link beside it was already bright. The hour is
   the fact that decides whether the form is for you at all, so it gets
   its own mark. Brand colour rather than white: the link next to it is
   white, and two whites would have been a tie.
   Tabular figures so 17:30 keeps its shape wherever it is reused.
   ================================================================== */
.time-flag {
  display: inline-block;
  padding: .1em .45em;
  margin-inline: .05em;
  border-radius: 6px;
  background: rgba(230,87,10,.16);
  border: 1px solid rgba(230,87,10,.42);
  color: var(--brand-soft);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}