:root {
    --primary: #FF5A1F;
    --primary-dark: #E04510;
    --primary-light: #FFF1EB;
    --black: #0A0A0A;
    --gray-900: #18181B;
    --gray-800: #27272A;
    --gray-700: #3F3F46;
    --gray-600: #52525B;
    --gray-500: #71717A;
    --gray-400: #A1A1AA;
    --gray-300: #D4D4D8;
    --gray-200: #E4E4E7;
    --gray-100: #F4F4F5;
    --gray-50: #FAFAFA;
    --white: #FFFFFF;
    --green: #10B981;
    --yellow: #F59E0B;
    --blue: #3B82F6;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.04);
    --shadow-xl: 0 20px 40px rgba(0,0,0,0.1);
  }

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

  body {
    font-family: 'Manrope', sans-serif;
    color: var(--gray-900);
    background: var(--white);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  .display { font-family: 'Bricolage Grotesque', sans-serif; letter-spacing: -0.02em; line-height: 1.05; }

  .container { --gutter: 1.5rem; max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }

  /* ============ TOP BAR ============ */
  .topbar {
    background: var(--black);
    color: var(--white);
    padding: 0.55rem 0;
    font-size: 0.82rem;
  }
  .topbar-content {
    display: flex; justify-content: space-between; align-items: center;
    gap: 2rem; flex-wrap: wrap;
  }
  .topbar-left { display: flex; gap: 1.5rem; align-items: center; }
  .topbar-left span { display: flex; align-items: center; gap: 0.4rem; color: var(--gray-300); }
  .topbar-left svg { width: 14px; height: 14px; }
  .topbar-right { display: flex; gap: 1.5rem; align-items: center; }
  .topbar-right a { color: var(--gray-300); text-decoration: none; transition: color 0.2s; }
  .topbar-right a:hover { color: var(--white); }
  .lang-switch {
    display: flex; gap: 0.3rem; align-items: center;
    background: var(--gray-800);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
  }

  /* ============ NAV ============ */
  nav {
    position: sticky; top: 0;
    background: var(--white);
    border-bottom: 1px solid var(--gray-200);
    z-index: 100;
    padding: 1rem 0;
  }
  .nav-content {
    display: flex; justify-content: space-between; align-items: center; gap: 2rem;
  }
  .logo {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    display: flex; align-items: center; gap: 0.5rem;
    color: var(--black);
    text-decoration: none;
  }
  .logo-mark {
    width: 38px; height: 38px;
    background: var(--primary);
    color: var(--white);
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    transform: rotate(-5deg);
    position: relative;
    box-shadow: 0 2px 8px rgba(255, 90, 31, 0.25);
  }
  .logo-mark svg {
    width: 22px;
    height: 22px;
  }
  .nav-links { display: flex; gap: 0.3rem; }
  .nav-links a {
    color: var(--gray-700);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    transition: all 0.2s;
  }
  .nav-links a:hover, .nav-links a.active {
    background: var(--gray-100);
    color: var(--black);
  }
  .nav-actions { display: flex; gap: 0.7rem; align-items: center; }
  .btn {
    padding: 0.7rem 1.3rem;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    white-space: nowrap;
  }
  .btn-primary { background: var(--primary); color: var(--white); }
  .btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
  .btn-outline { background: transparent; color: var(--gray-900); border: 1px solid var(--gray-300); }
  .btn-outline:hover { background: var(--gray-100); border-color: var(--gray-400); }
  .btn-dark { background: var(--black); color: var(--white); }
  .btn-dark:hover { background: var(--gray-800); }

  /* ============ HERO ============ */
  .hero {
    position: relative;
    background: linear-gradient(135deg, #0A0A0A 0%, #1a1a1a 100%);
    color: var(--white);
    padding: 3.5rem 0 9rem;
    overflow: hidden;
  }
  .hero::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 60%; height: 100%;
    background-image: radial-gradient(circle at 70% 30%, rgba(255, 90, 31, 0.25), transparent 50%);
  }
  .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
  }
  .hero-content {
    position: relative; z-index: 2;
    max-width: 720px;
  }
  .hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    position: relative;
    z-index: 2;
  }
  .hero-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }
  .hero-image img {
    width: 91%;
    max-width: 580px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.4));
    transform: translateX(2%);
    animation: heroFloat 6s ease-in-out infinite;
  }
  @keyframes heroFloat {
    0%, 100% { transform: translateX(2%) translateY(0); }
    50% { transform: translateX(2%) translateY(-12px); }
  }
  .hero-tag {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-size: 0.82rem;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(10px);
  }
  .hero-tag .pulse {
    width: 6px; height: 6px;
    background: var(--green);
    border-radius: 50%;
    box-shadow: 0 0 0 0 var(--green);
    animation: pulse 2s infinite;
  }
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
    70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
  }
  .hero h1 {
    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 1.2rem;
    /* No hard break: a fixed one suited the Romanian phrase and pushed the
       longer English and Russian wordings onto a third line. Balancing lets
       each language break wherever it actually fits, evenly. */
    text-wrap: balance;
  }
  .hero h1 .accent { color: var(--primary); }
  .hero p.lede {
    font-size: 1.15rem;
    color: var(--gray-300);
    margin-bottom: 2rem;
    max-width: 560px;
  }
  .hero-trust {
    display: flex; gap: 2rem; flex-wrap: wrap;
    margin-bottom: 1rem;
  }
  .trust-item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.92rem; color: var(--gray-300); }
  .trust-item svg { color: var(--green); width: 18px; height: 18px; flex-shrink: 0; }

  /* ============ BOOKING WIDGET ============ */
  .booking-widget {
    position: relative;
    z-index: 5;
    margin-top: -5.5rem;
    background: var(--white);
    border-radius: 16px;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
  }
  .booking-tabs {
    display: flex;
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
  }
  .booking-tab {
    flex: 1;
    padding: 1rem 1.5rem;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-600);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    transition: all 0.2s;
    border-bottom: 3px solid transparent;
    position: relative;
  }
  .booking-tab.active {
    color: var(--black);
    background: var(--white);
    border-bottom-color: var(--primary);
  }
  .booking-tab svg { width: 18px; height: 18px; }

  .booking-form {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr auto;
    gap: 1px;
    background: var(--gray-200);
  }
  .booking-field {
    background: var(--white);
    padding: 1.1rem 1.3rem;
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
  }
  .booking-field:hover { background: var(--gray-50); }
  .booking-field label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-500);
    display: block;
    margin-bottom: 0.3rem;
  }
  .booking-field .value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    display: flex; align-items: center; gap: 0.5rem;
  }
  .booking-field .value svg { color: var(--gray-400); width: 16px; height: 16px; }
  .booking-field .sub {
    font-size: 0.8rem;
    color: var(--gray-500);
    margin-top: 0.15rem;
  }
  .booking-checkbox {
    grid-column: 1 / -1;
    background: var(--gray-50);
    padding: 0.8rem 1.3rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: var(--gray-700);
  }
  .booking-checkbox input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
  .booking-submit {
    background: var(--primary);
    color: var(--white);
    padding: 0 2.5rem;
    border: none;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    display: flex; align-items: center; gap: 0.6rem;
  }
  .booking-submit:hover { background: var(--primary-dark); }

  /* ============ BENEFITS BAR ============ */
  .benefits-bar {
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--gray-200);
  }
  .benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
  .benefit {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
  }
  .benefit-icon {
    width: 44px; height: 44px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .benefit-icon svg { width: 22px; height: 22px; }
  .benefit h4 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
  }
  .benefit p {
    font-size: 0.85rem;
    color: var(--gray-600);
  }

  /* ============ SECTION HEADER ============ */
  .section { padding: 4rem 0; }
  .section-header {
    margin-bottom: 2rem;
    display: flex; justify-content: space-between; align-items: end;
    gap: 2rem; flex-wrap: wrap;
  }
  .section-header h2 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.4rem;
  }
  .section-header p {
    color: var(--gray-600);
    font-size: 1rem;
    max-width: 600px;
  }
  .view-all {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex; align-items: center; gap: 0.3rem;
  }
  .view-all:hover { text-decoration: underline; }

  /* ============ CATEGORY CHIPS ============ */
  .categories {
    background: var(--gray-50);
    padding: 3rem 0;
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
  }
  /* Categories with no cars are hidden, so the row rarely holds all eight.
     Flex with a one-eighth basis keeps every tile the size the design draws
     them at, and centres the row when fewer survive — a fixed eight-column
     grid would have stranded four tiles on the left with half the band empty. */
  .category-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem;
  }
  .category-chip { flex: 0 1 calc((100% - 7 * 0.7rem) / 8); min-width: 112px; }
  .category-chip[hidden] { display: none; }
  .category-chip {
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: 12px;
    padding: 1.1rem 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    font-family: inherit;
  }
  .category-chip:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
  .category-chip.active {
    border-color: var(--primary);
    background: var(--primary-light);
  }
  .category-chip svg {
    width: 38px; height: 38px;
    margin-bottom: 0.5rem;
    color: var(--gray-700);
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .category-chip.active svg { color: var(--primary); }
  .category-chip .name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 0.15rem;
  }
  .category-chip .count {
    font-size: 0.72rem;
    color: var(--gray-500);
  }

  /* ============ BRAND LOGOS ============ */
  .brands {
    padding: 2.5rem 0;
    background: var(--white);
  }
  .brands-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 1.2rem;
    text-align: center;
  }
  .brand-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    align-items: center;
  }
  .brand-chip {
    flex: 0 0 104px;
    aspect-ratio: 1.3;
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0.5rem;
  }
  .brand-chip:hover {
    border-color: var(--gray-900);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
  .brand-chip svg, .brand-chip img {
    width: 70%;
    max-height: 60%;
    object-fit: contain;
    color: var(--gray-800);
  }

  /* ============ FILTERS + LISTING ============ */
  .listing-section {
    padding: 4rem 0;
    background: var(--gray-50);
  }
  .listing-layout {
    display: block;
  }

  /* Horizontal Filter Bar (top, minimalistic) */
  .filters-bar {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1.25rem;
    padding: 0.85rem 1rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    position: sticky;
    top: 72px;
    z-index: 50;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
  }
  .filter-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-800);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    position: relative;
  }
  .filter-pill-btn:hover {
    border-color: var(--gray-400);
    background: var(--gray-50);
  }
  .filter-pill-btn.active {
    border-color: var(--gray-900);
    background: var(--gray-900);
    color: var(--white);
  }
  .filter-pill-btn .chev {
    width: 12px; height: 12px;
    transition: transform 0.2s;
    color: var(--gray-500);
  }
  .filter-pill-btn.active .chev { color: var(--gray-300); }
  .filter-pill-btn.open .chev { transform: rotate(180deg); }
  .filter-pill-btn .badge-count {
    background: var(--primary);
    color: var(--white);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    margin-left: 0.2rem;
  }
  .filter-pill-btn.active .badge-count { background: var(--white); color: var(--gray-900); }

  /* Filter option styles (used in dropdowns and mobile sidebar) */
  .filter-options { display: flex; flex-direction: column; gap: 0.55rem; }
  .filter-option {
    display: flex; align-items: center; gap: 0.6rem;
    cursor: pointer; padding: 0.3rem 0;
    font-size: 0.9rem;
    color: var(--gray-700);
    transition: color 0.2s;
  }
  .filter-option:hover { color: var(--gray-900); }
  .filter-option input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--primary);
    cursor: pointer;
  }
  .filter-option .filter-count {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--gray-500);
  }
  .price-range {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
  }
  .price-range input[type="range"] {
    width: 100%;
    accent-color: var(--primary);
  }
  .price-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--gray-700);
    font-weight: 600;
  }
  .filter-group { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--gray-200); }
  .filter-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
  .filter-group h4 {
    font-size: 0.92rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    display: flex; justify-content: space-between; align-items: center;
  }
  .filter-group h4 .count { font-size: 0.75rem; color: var(--gray-500); font-weight: 500; }

  .filters-bar .divider {
    width: 1px;
    height: 22px;
    background: var(--gray-200);
    margin: 0 0.3rem;
  }
  .filters-bar .clear-filters {
    background: transparent;
    border: none;
    color: var(--gray-500);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.4rem 0.6rem;
    margin-left: auto;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .filters-bar .clear-filters:hover { color: var(--gray-900); }

  /* Filter dropdown panels */
  .filter-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 1rem;
    min-width: 240px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    z-index: 60;
    display: none;
    cursor: default;
  }
  /* Right-align dropdowns for filters that are likely close to the right edge */
  .filter-pill-btn[data-filter="features"] .filter-dropdown,
  .filter-pill-btn[data-filter="year"] .filter-dropdown {
    left: auto;
    right: 0;
  }
  .filter-pill-btn.open .filter-dropdown { display: block; }
  .filter-dropdown h5 {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--gray-500);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.7rem;
    text-align: left;
  }
  .filter-dropdown .filter-options {
    max-height: 220px;
    overflow-y: auto;
  }
  .filter-dropdown .filter-option {
    text-align: left;
    color: var(--gray-700);
  }
  .filter-dropdown .price-range { padding: 0.3rem 0; }

  /* ============ LISTING TOOLBAR ============ */
  .listing-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .listing-count {
    font-size: 0.95rem;
    color: var(--gray-700);
  }
  .listing-count strong { color: var(--gray-900); font-weight: 700; }
  .sort-by {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--gray-700);
  }
  .sort-by select {
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: var(--white);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
  }

  /* Layout switcher (grid columns) */
  .layout-switcher {
    display: inline-flex;
    align-items: center;
    background: var(--gray-100);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
  }
  .layout-btn {
    background: transparent;
    border: none;
    padding: 0.45rem 0.55rem;
    border-radius: 6px;
    cursor: pointer;
    color: var(--gray-500);
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .layout-btn svg { width: 18px; height: 18px; }
  .layout-btn:hover { color: var(--gray-800); }
  .layout-btn.active {
    background: var(--white);
    color: var(--gray-900);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }

  /* Car grid - 3 columns default + variants */
  .car-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
  }
  .car-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
  .car-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
  .car-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }

  /* List view */
  .car-grid[data-view="list"] {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }
  .car-grid[data-view="list"] .car-card {
    flex-direction: row;
    max-height: 200px;
  }
  .car-grid[data-view="list"] .car-image {
    width: 320px;
    flex-shrink: 0;
    aspect-ratio: auto;
    height: 100%;
  }
  .car-grid[data-view="list"] .car-body {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem 2rem;
    align-items: center;
  }
  .car-grid[data-view="list"] .car-header,
  .car-grid[data-view="list"] .car-title,
  .car-grid[data-view="list"] .car-similar {
    grid-column: 1 / -1;
  }
  .car-grid[data-view="list"] .car-similar { margin-bottom: 0; }
  .car-grid[data-view="list"] .car-specs {
    grid-column: 1;
    border: none;
    padding: 0;
    margin: 0;
    grid-template-columns: repeat(4, auto);
    gap: 1.5rem;
    justify-content: start;
  }
  .car-grid[data-view="list"] .spec { flex-direction: row; gap: 0.4rem; align-items: center; }
  .car-grid[data-view="list"] .car-features { display: none; }
  .car-grid[data-view="list"] .car-footer {
    grid-column: 2;
    grid-row: 3;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.6rem;
    padding: 0;
  }
  .car-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.3s;
    display: flex; flex-direction: column;
    position: relative;
  }
  .car-card:hover {
    border-color: var(--gray-300);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
  }
  .car-image {
    position: relative;
    aspect-ratio: 16/10;
    background: linear-gradient(135deg, #f4f4f5 0%, #e4e4e7 100%);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }
  .car-image.dark { background: linear-gradient(135deg, #18181b 0%, #27272a 100%); }
  .car-image svg.car-vis { width: 80%; height: auto; }
  .car-image img.car-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }
  .car-card:hover .car-image img.car-photo { transform: scale(1.05); }
  /* In a slider each slide is exactly 100% wide; scaling one to 105% spills
     it into the next and the neighbour shows at the edge. */
  .car-card:hover .car-slides img.car-photo { transform: none; }
  .car-badges {
    position: absolute;
    top: 0.8rem; left: 0.8rem;
    display: flex; gap: 0.4rem; flex-wrap: wrap;
  }
  .badge {
    background: var(--white);
    color: var(--gray-900);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.3rem 0.6rem;
    border-radius: 5px;
    box-shadow: var(--shadow-sm);
  }
  .badge.deal { background: var(--primary); color: var(--white); }
  .badge.popular { background: var(--green); color: var(--white); }
  .badge.new { background: var(--blue); color: var(--white); }
  .badge.lux { background: var(--black); color: var(--white); }


  .placeholder-tag {
    position: absolute;
    bottom: 0.6rem; right: 0.6rem;
    font-size: 0.65rem;
    color: var(--gray-400);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .car-image.dark .placeholder-tag { color: rgba(255,255,255,0.3); }

  .car-body { padding: 1.2rem; flex: 1; display: flex; flex-direction: column; }
  .car-header { display: flex; justify-content: space-between; align-items: start; gap: 1rem; margin-bottom: 0.3rem; }
  .car-header .category {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--gray-500);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .car-header .rating {
    display: flex; align-items: center; gap: 0.3rem;
    font-size: 0.82rem;
    font-weight: 600;
  }
  .car-header .rating svg { width: 14px; height: 14px; color: var(--yellow); fill: var(--yellow); }
  .car-header .rating .count { color: var(--gray-500); font-weight: 500; }

  .car-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
    line-height: 1.2;
  }
  .car-similar {
    font-size: 0.82rem;
    color: var(--gray-500);
    margin-bottom: 1rem;
  }

  .car-specs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    padding: 0.8rem 0;
    border-top: 1px dashed var(--gray-200);
    border-bottom: 1px dashed var(--gray-200);
    margin-bottom: 1rem;
  }
  .spec {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    text-align: center;
  }
  .spec svg { width: 18px; height: 18px; color: var(--gray-600); }
  .spec span {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gray-700);
    /* "Plug-in hybrid" is the longest value a spec cell carries and wraps to
       two lines in a quarter-width column; tightening the leading keeps that
       from stretching the whole row. */
    line-height: 1.25;
  }

  .car-features {
    display: flex; flex-wrap: wrap; gap: 0.35rem;
    margin-bottom: 1rem;
  }
  .feature-tag {
    font-size: 0.72rem;
    background: var(--gray-100);
    color: var(--gray-700);
    padding: 0.25rem 0.55rem;
    border-radius: 4px;
    font-weight: 600;
  }
  .feature-tag.green { background: #d1fae5; color: #065f46; }

  .car-footer {
    display: flex; justify-content: space-between; align-items: end;
    margin-top: auto;
    padding-top: 0.5rem;
  }
  .price-block .from-label {
    font-size: 0.72rem;
    color: var(--gray-500);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .price-block .price {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--gray-900);
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .price-block .price-original {
    font-size: 0.88rem;
    color: var(--gray-400);
    text-decoration: line-through;
    margin-right: 0.4rem;
  }
  .price-block .per-day {
    font-size: 0.85rem;
    color: var(--gray-500);
    font-weight: 500;
  }
  .car-cta-btn {
    background: var(--gray-900);
    color: var(--white);
    border: none;
    padding: 0.65rem 1.2rem;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: flex; align-items: center; gap: 0.4rem;
  }
  .car-cta-btn:hover { background: var(--primary); transform: translateY(-1px); }

  .load-more-wrap { text-align: center; margin-top: 2.5rem; }
  .btn-load-more {
    background: var(--white);
    color: var(--gray-900);
    border: 1.5px solid var(--gray-300);
    padding: 0.85rem 2rem;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
  }
  .btn-load-more:hover { border-color: var(--gray-900); background: var(--gray-50); }

  /* ============ HOW IT WORKS ============ */
  .how-it-works {
    background: var(--white);
    padding: 5rem 0;
  }
  .steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 3rem;
    position: relative;
  }
  .step {
    text-align: center;
    position: relative;
  }
  .step::after {
    content: '';
    position: absolute;
    top: 35px; left: 60%;
    width: 80%; height: 2px;
    background: repeating-linear-gradient(90deg, var(--gray-300) 0, var(--gray-300) 6px, transparent 6px, transparent 12px);
  }
  .step:last-child::after { display: none; }
  .step-num {
    display: inline-flex;
    width: 70px; height: 70px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 50%;
    align-items: center; justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 1.2rem;
    position: relative;
    z-index: 2;
    background-image: linear-gradient(135deg, #FFF1EB 0%, #FFE5D6 100%);
  }
  .step-num svg { width: 30px; height: 30px; }
  .step h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
  }
  .step p {
    color: var(--gray-600);
    font-size: 0.9rem;
    max-width: 220px;
    margin: 0 auto;
  }

  /* ============ LOCATIONS ============ */
  .locations { background: var(--gray-50); padding: 5rem 0; }
  .locations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
  }
  .location-card {
    background: var(--white);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--gray-200);
    transition: all 0.3s;
    cursor: pointer;
  }
  .location-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
  }
  .location-image {
    aspect-ratio: 16/10;
    position: relative;
    overflow: hidden;
  }
  .location-image img.loc-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }
  .location-card:hover .location-image img.loc-photo { transform: scale(1.05); }
  .location-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.4) 100%);
    pointer-events: none;
  }
  .location-image.kiv { background: linear-gradient(135deg, #1e3a8a, #3b82f6); }
  .location-image.center { background: linear-gradient(135deg, #7c2d12, #ea580c); }
  .location-image.botanica { background: linear-gradient(135deg, #14532d, #16a34a); }
  .location-image .city-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.3;
    background-image:
      linear-gradient(45deg, rgba(255,255,255,0.1) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(255,255,255,0.1) 25%, transparent 25%);
    background-size: 30px 30px;
  }
  .location-image .badge {
    position: absolute; top: 1rem; left: 1rem;
    background: var(--white);
    color: var(--gray-900);
    z-index: 3;
  }
  .location-image .open-badge {
    position: absolute; top: 1rem; right: 1rem;
    background: rgba(16, 185, 129, 0.95);
    color: var(--white);
    z-index: 3;
    display: flex; align-items: center; gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    border-radius: 5px;
    font-size: 0.7rem;
    font-weight: 700;
  }
  .open-badge .dot { width: 6px; height: 6px; background: var(--white); border-radius: 50%; }
  .location-image svg.location-icon {
    position: absolute;
    bottom: 1rem; right: 1rem;
    width: 40px; height: 40px;
    color: rgba(255,255,255,0.4);
  }
  .location-image .placeholder-tag { color: rgba(255,255,255,0.5); }
  .location-body { padding: 1.2rem; }
  .location-body h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
  }
  .location-body .address {
    color: var(--gray-600);
    font-size: 0.88rem;
    margin-bottom: 0.7rem;
  }
  .location-body .hours {
    color: var(--gray-700);
    font-size: 0.85rem;
    display: flex; align-items: center; gap: 0.4rem;
  }
  .location-body .hours svg { width: 14px; height: 14px; color: var(--gray-500); }

  /* ============ TESTIMONIALS ============ */
  .testimonials { padding: 5rem 0; background: var(--white); }
  .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
  }
  .testimonial-card {
    background: var(--gray-50);
    border-radius: 14px;
    padding: 1.5rem;
    border: 1px solid var(--gray-200);
  }
  .stars {
    display: flex; gap: 0.15rem;
    margin-bottom: 0.8rem;
  }
  .stars svg { width: 16px; height: 16px; color: var(--yellow); fill: var(--yellow); }
  .testimonial-card blockquote {
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--gray-800);
    margin-bottom: 1.2rem;
  }
  .reviewer {
    display: flex; align-items: center; gap: 0.7rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200);
  }
  .reviewer-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--white);
    font-weight: 700;
    font-size: 0.95rem;
  }
  /* The photo sits on top of the initials; if it fails to load it is removed
     and the coloured initials show through. */
  .reviewer-avatar { position: relative; overflow: hidden; flex-shrink: 0; }
  .reviewer-avatar img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }
  .avatar-1 { background: linear-gradient(135deg, #f97316, #dc2626); }
  .avatar-2 { background: linear-gradient(135deg, #3b82f6, #1e40af); }
  .avatar-3 { background: linear-gradient(135deg, #10b981, #047857); }
  .reviewer-info strong { display: block; font-weight: 700; font-size: 0.92rem; }
  .reviewer-info span { color: var(--gray-500); font-size: 0.78rem; }

  .trust-strip {
    margin-top: 2.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #FFF1EB 0%, #FFFAF6 100%);
    border-radius: 14px;
    display: flex; justify-content: space-around; align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    border: 1px solid #FFE5D6;
  }
  .trust-stat { text-align: center; }
  .trust-stat .num {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .trust-stat .label {
    font-size: 0.78rem;
    color: var(--gray-700);
    font-weight: 600;
    margin-top: 0.3rem;
  }

  /* ============ FAQ ============ */
  .faq-section { padding: 5rem 0; background: var(--gray-50); }
  .faq-layout {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 3rem;
  }
  .faq-aside h2 {
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
  }
  .faq-aside p { color: var(--gray-600); margin-bottom: 1.5rem; }

  .faq-list { display: flex; flex-direction: column; gap: 0.7rem; }
  .faq-item {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.2s;
  }
  .faq-item:hover { border-color: var(--gray-300); }
  .faq-item.open { border-color: var(--primary); box-shadow: var(--shadow); }
  .faq-q {
    padding: 1.1rem 1.3rem;
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
  }
  .faq-q .icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--gray-100);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s;
    flex-shrink: 0;
  }
  .faq-item.open .icon { background: var(--primary); color: var(--white); transform: rotate(45deg); }
  .faq-q .icon svg { width: 14px; height: 14px; }
  .faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s, padding 0.4s;
    color: var(--gray-700);
    font-size: 0.93rem;
    line-height: 1.6;
    padding: 0 1.3rem;
  }
  .faq-item.open .faq-a { max-height: 250px; padding: 0 1.3rem 1.2rem; }

  /* ============ FOOTER ============ */
  footer {
    background: var(--black);
    color: var(--gray-300);
    padding: 4rem 0 1.5rem;
  }
  .footer-top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr;
    gap: 2rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--gray-800);
  }
  .footer-brand .logo { color: var(--white); margin-bottom: 1rem; }
  .footer-brand p { font-size: 0.9rem; line-height: 1.6; margin-bottom: 1.2rem; max-width: 300px; }
  .app-badges { display: flex; gap: 0.5rem; }
  .app-badge {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.8rem;
    background: var(--gray-900);
    border: 1px solid var(--gray-800);
    border-radius: 6px;
    text-decoration: none;
    color: var(--white);
    transition: all 0.2s;
  }
  .app-badge:hover { background: var(--gray-800); }
  .app-badge svg { width: 18px; height: 18px; }
  .app-badge .small { font-size: 0.65rem; color: var(--gray-400); }
  .app-badge .big { font-size: 0.82rem; font-weight: 700; line-height: 1; }

  .footer-col h5 {
    color: var(--white);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 1rem;
  }
  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
  .footer-col a {
    color: var(--gray-400);
    text-decoration: none;
    font-size: 0.92rem;
    transition: color 0.2s;
  }
  .footer-col a:hover { color: var(--white); }
  .footer-col .info-line {
    color: var(--gray-400);
    font-size: 0.92rem;
    line-height: 1.6;
    margin-bottom: 0.8rem;
  }
  .footer-col .info-line strong { color: var(--white); display: block; font-weight: 600; }

  .footer-social {
    display: flex; gap: 0.5rem;
    margin-top: 1rem;
  }
  .footer-social a {
    width: 36px; height: 36px;
    background: var(--gray-900);
    border: 1px solid var(--gray-800);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--gray-400);
    transition: all 0.2s;
  }
  .footer-social a:hover { background: var(--primary); color: var(--white); border-color: var(--primary); }
  .footer-social svg { width: 16px; height: 16px; }

  .payment-methods {
    display: flex; align-items: center; gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
  }
  .payment-method {
    height: 28px;
    padding: 0 0.6rem;
    background: var(--white);
    border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--gray-900);
    letter-spacing: 0.02em;
  }

  .footer-bottom {
    margin-top: 1.5rem;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 1rem;
    font-size: 0.82rem;
    color: var(--gray-500);
  }
  .footer-bottom-links { display: flex; gap: 1.2rem; flex-wrap: wrap; }
  .footer-bottom-links a { color: var(--gray-500); text-decoration: none; }
  .footer-bottom-links a:hover { color: var(--white); }

  /* Layout switcher: mobile-only hidden by default, shown via media query */
  .layout-switcher.mobile-only { display: none; }

  /* Mobile-only elements - hidden by default on desktop */
  .filters-bar .clear-filters { display: inline-flex; }

  /* Mobile menu button - hidden on desktop */
  .mobile-menu-btn {
    display: none;
    background: transparent;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    padding: 0.5rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--gray-900);
  }
  .mobile-menu-btn svg { width: 22px; height: 22px; }

  .mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 360px;
    height: 100vh;
    background: var(--white);
    z-index: 200;
    padding: 1.5rem;
    transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    box-shadow: -10px 0 40px rgba(0,0,0,0.1);
  }
  .mobile-menu.open { right: 0; display: block; animation: menuSlideIn 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
  @keyframes menuSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
  .mobile-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 199;
    opacity: 0;
    transition: opacity 0.3s;
  }
  .mobile-menu-overlay.open { opacity: 1; display: block; }
  .mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 1rem;
  }
  .mobile-menu-close {
    background: var(--gray-100);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mobile-menu-close svg { width: 18px; height: 18px; }
  .mobile-menu-links {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 1.5rem;
  }
  .mobile-menu-links a {
    color: var(--gray-900);
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 600;
    padding: 0.85rem 0.75rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.2s;
  }
  .mobile-menu-links a:hover, .mobile-menu-links a.active {
    background: var(--gray-100);
    color: var(--primary);
  }
  .mobile-menu-links a svg { width: 16px; height: 16px; color: var(--gray-400); }
  .mobile-menu-cta {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200);
  }
  .mobile-menu-cta .btn { width: 100%; justify-content: center; padding: 0.9rem; }
  .mobile-menu-info {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
    color: var(--gray-600);
    font-size: 0.88rem;
    line-height: 1.6;
  }
  .mobile-menu-info strong { color: var(--gray-900); display: block; margin-bottom: 0.2rem; }

  /* ============================================================== */
  /* TABLET (≤ 1024px) - light adjustments, desktop-like experience  */
  /* ============================================================== */
  @media (max-width: 1024px) {
    .hero-container { grid-template-columns: 1fr; gap: 0; }
    .hero-image { display: none; }
    .hero-meta { display: none; }
    .booking-form { grid-template-columns: 1fr 1fr; }
    .booking-submit { grid-column: 1 / -1; padding: 1.1rem; }
    .booking-checkbox { flex-wrap: wrap; }
    .benefits-grid { grid-template-columns: repeat(2, 1fr); }
    .category-chip { flex-basis: calc((100% - 3 * 0.7rem) / 4); }
    .brand-chip { flex-basis: 96px; }
    .car-grid { grid-template-columns: repeat(2, 1fr); }
    .car-grid[data-cols="3"], .car-grid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }
    .car-grid[data-view="list"] .car-image { width: 240px; }
    .steps { grid-template-columns: repeat(2, 1fr); gap: 2rem; row-gap: 3rem; }
    .step::after { display: none; }
    .locations-grid { grid-template-columns: repeat(2, 1fr); }
    .locations-grid .location-card:last-child { grid-column: 1 / -1; max-width: 50%; margin: 0 auto; }
    .testimonials-grid { grid-template-columns: 1fr; }
    .faq-layout { grid-template-columns: 1fr; gap: 1.5rem; }
    .footer-top { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
    .hero { padding: 3rem 0 8rem; }
  }

  /* ============================================================================ */
  /* MOBILE FIRST EXPERIENCE (≤ 768px)                                            */
  /* ----------------------------------------------------------------------------- */
  /* Complete redesign for mobile: optimized for one-thumb use, high-conversion    */
  /* booking flow, native-feeling UI patterns, large touch targets, less clutter   */
  /* ============================================================================ */
  @media (max-width: 768px) {

    /* -------------------- Foundation -------------------- */
    body {
      -webkit-tap-highlight-color: transparent;
      -webkit-text-size-adjust: 100%;
    }
    .container { --gutter: 1rem; }
    .section, .categories, .listing-section, .how-it-works, .locations, .testimonials, .faq-section, .benefits-bar {
      padding: 2.5rem 0;
    }

    /* -------------------- Topbar: hide on mobile (clutter) -------------------- */
    .topbar { display: none; }

    /* -------------------- Nav: clean app-like header -------------------- */
    nav {
      padding: 0.75rem 0;
      backdrop-filter: blur(20px) saturate(180%);
      background: rgba(255, 255, 255, 0.92);
    }
    .nav-links { display: none; }
    .nav-actions .btn-outline { display: none; }
    .nav-actions .btn-primary {
      padding: 0.55rem 1rem;
      font-size: 0.85rem;
    }
    .mobile-menu-btn {
      display: inline-flex;
      width: 42px;
      height: 42px;
      padding: 0;
      border-radius: 10px;
      border: 1px solid var(--gray-200);
      background: var(--white);
    }
    .mobile-menu-btn svg { width: 20px; height: 20px; }
    .logo { font-size: 1.25rem; }
    .logo-mark { width: 32px; height: 32px; }
    .logo-mark svg { width: 18px; height: 18px; }

    /* -------------------- Mobile menu drawer: full-bleed sheet -------------------- */
    .mobile-menu {
      width: 100%;
      max-width: 100%;
      padding: 1.25rem;
    }
    .mobile-menu-links a {
      font-size: 1.1rem;
      padding: 1rem 0.75rem;
    }
    .mobile-menu-cta .btn {
      padding: 1rem;
      font-size: 1rem;
      font-weight: 700;
      border-radius: 12px;
    }

    /* -------------------- HERO: keep desktop's dark gradient style on mobile -------------------- */
    .hero {
      padding: 2rem 0 5.5rem;
      /* keep dark gradient from desktop */
    }
    .hero::before {
      width: 100%; /* on mobile, let the orange glow span full width for atmosphere */
      background-image: radial-gradient(circle at 80% 20%, rgba(255, 90, 31, 0.35), transparent 55%);
    }
    /* keep grid pattern (::after) from desktop intact */
    .hero-container { display: block; }
    .hero-content { max-width: 100%; }
    .hero-tag {
      font-size: 0.72rem;
      padding: 0.4rem 0.8rem 0.4rem 0.7rem;
      margin-bottom: 1rem;
      border-radius: 999px;
      gap: 0.45rem;
    }
    .hero-tag .pulse { width: 6px; height: 6px; }
    .hero h1 {
      font-size: 2.9rem;
      line-height: 1.04;
      letter-spacing: -0.03em;
      margin-bottom: 0.95rem;
    }
    .hero p.lede {
      font-size: 0.98rem;
      line-height: 1.5;
      margin-bottom: 1.4rem;
      color: rgba(255,255,255,0.7);
    }
    .hero-trust {
      flex-direction: column;
      gap: 0.65rem;
      margin-top: 0;
    }
    .trust-item {
      font-size: 0.85rem;
      font-weight: 500;
      gap: 0.55rem;
      color: rgba(255,255,255,0.85);
    }
    .trust-item svg { width: 16px; height: 16px; color: var(--primary); flex-shrink: 0; }

    /* -------------------- BOOKING WIDGET: the conversion centerpiece -------------------- */
    /* Big, friendly, easy to tap. This is THE most important element on mobile. */
    .booking-widget {
      margin-top: -3rem;
      border-radius: 18px;
      padding: 0;
      box-shadow: 0 4px 20px rgba(0,0,0,0.06), 0 20px 40px rgba(0,0,0,0.08);
      border: 1px solid var(--gray-100);
    }
    .booking-tabs {
      padding: 0.4rem;
      gap: 0.3rem;
      background: var(--gray-100);
      border-radius: 18px 18px 0 0;
      border-bottom: none;
    }
    .booking-tab {
      flex: 1;
      padding: 0.7rem 0.4rem;
      font-size: 0.82rem;
      font-weight: 700;
      border-radius: 12px;
      border: none;
      background: transparent;
      color: var(--gray-600);
      gap: 0.35rem;
    }
    .booking-tab svg { width: 15px; height: 15px; }
    .booking-tab.active {
      background: var(--white);
      color: var(--gray-900);
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
      border-bottom: none;
    }
    .booking-form {
      grid-template-columns: 1fr;
      gap: 0;
      padding: 1.1rem;
    }
    .booking-field {
      padding: 1.05rem 1.15rem;
      border-radius: 12px;
      border: 1.5px solid var(--gray-100);
      margin-bottom: 0.6rem;
      background: var(--gray-50);
      transition: all 0.2s;
    }
    .booking-field:active, .booking-field:focus-within {
      border-color: var(--primary);
      background: var(--white);
    }
    .booking-field label {
      font-size: 0.74rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--gray-500);
      margin-bottom: 0.25rem;
    }
    .booking-field .value {
      font-size: 1.08rem;
      font-weight: 600;
      gap: 0.5rem;
    }
    .booking-field .value svg { width: 18px; height: 18px; color: var(--primary); }
    .booking-field .sub { font-size: 0.8rem; margin-top: 0.1rem; }

    .booking-submit {
      padding: 1.2rem;
      font-size: 1.1rem;
      font-weight: 700;
      border-radius: 12px;
      margin-top: 0.6rem;
      letter-spacing: -0.01em;
      box-shadow: 0 4px 12px rgba(255, 90, 31, 0.25);
    }
    .booking-checkbox { display: none; } /* removed for cleaner mobile */

    /* -------------------- BENEFITS BAR: scrollable highlights, no clutter -------------------- */
    .benefits-bar {
      background: var(--white);
      padding: 2rem 0;
      border-top: 1px solid var(--gray-100);
      border-bottom: 1px solid var(--gray-100);
    }
    .benefits-grid {
      grid-template-columns: 1fr 1fr;
      gap: 0.85rem;
    }
    .benefit {
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      gap: 0.55rem;
      padding: 1rem;
      background: var(--gray-50);
      border-radius: 12px;
    }
    .benefit-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: var(--white);
    }
    .benefit-icon svg { width: 18px; height: 18px; }
    .benefit h4 { font-size: 0.88rem; font-weight: 700; margin-bottom: 0.15rem; }
    .benefit p { font-size: 0.74rem; color: var(--gray-600); line-height: 1.35; }

    /* -------------------- SECTION HEADERS: bigger, more breathing room -------------------- */
    .section-header {
      margin-bottom: 1.5rem;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.6rem;
    }
    .section-header h2 {
      font-size: 1.6rem;
      line-height: 1.1;
      letter-spacing: -0.02em;
    }
    .section-header p { font-size: 0.9rem; color: var(--gray-600); }
    .section-header > a {
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--primary);
    }

    /* -------------------- CATEGORY CHIPS: snap-scroll carousel -------------------- */
    .categories { padding: 2rem 0 2.5rem; }
    .category-grid {
      display: flex;
      /* Overrides the wrapping, centred row used above this breakpoint: here
         the strip scrolls sideways instead. `safe center` centres the chips
         while they fit and falls back to the start once they overflow, so the
         first one is never clipped out of reach. */
      flex-wrap: nowrap;
      justify-content: safe center;
      gap: 0.6rem;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      scroll-snap-type: x mandatory;
      padding: 0.25rem var(--gutter, 1rem);
      margin-inline: calc(var(--gutter, 1rem) * -1);
      scroll-padding-inline-start: var(--gutter, 1rem);
    }
    .category-grid::-webkit-scrollbar { display: none; }
    .category-chip {
      flex: 0 0 96px;
      scroll-snap-align: start;
      padding: 0.9rem 0.5rem 0.8rem;
      border-radius: 14px;
      border: 1.5px solid var(--gray-100);
      background: var(--white);
    }
    .category-chip.active {
      border-color: var(--gray-900);
      background: var(--gray-900);
      color: var(--white);
    }
    .category-chip.active .name,
    .category-chip.active .count { color: inherit; }
    .category-chip.active svg { color: var(--white); }
    .category-chip svg { width: 32px; height: 32px; margin-bottom: 0.4rem; }
    .category-chip .name { font-size: 0.8rem; font-weight: 700; }
    .category-chip .count { font-size: 0.68rem; opacity: 0.7; }

    /* -------------------- BRAND LOGOS: tighter scroll-snap row -------------------- */
    .brands { padding: 1.5rem 0; background: var(--white); }
    .brand-grid {
      display: flex;
      flex-wrap: nowrap;
      justify-content: flex-start;
      gap: 0.5rem;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      scroll-snap-type: x mandatory;
      padding: 0 var(--gutter, 1rem);
      margin-inline: calc(var(--gutter, 1rem) * -1);
      scroll-padding-inline-start: var(--gutter, 1rem);
    }
    .brand-grid::-webkit-scrollbar { display: none; }
    .brand-chip {
      flex: 0 0 75px;
      aspect-ratio: 1.3;
      scroll-snap-align: start;
      border-radius: 12px;
      padding: 0.6rem;
      background: var(--gray-50);
      border: 1px solid transparent;
    }

    /* -------------------- LISTING: filter bar + grid switcher tuned for thumb -------------------- */
    .listing-section { padding: 2.5rem 0 3rem; }
    .filters-bar {
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      /* backdrop-filter would make this bar the containing block for the
         position:fixed dropdown below, trapping the sheet inside a
         horizontally scrolling, overflow-hidden box. */
      backdrop-filter: none;
      background: var(--white);
      padding: 0.7rem var(--gutter, 1rem);
      gap: 0.5rem;
      position: sticky;
      top: 60px;
      margin-inline: calc(var(--gutter, 1rem) * -1);
      margin-bottom: 1.25rem;
      scroll-padding-inline-start: var(--gutter, 1rem);
      border-radius: 0;
      border-left: none;
      border-right: none;
      box-shadow: 0 1px 0 var(--gray-100);
    }
    .filters-bar::-webkit-scrollbar { display: none; }
    .filter-pill-btn {
      flex-shrink: 0;
      padding: 0.55rem 0.95rem;
      font-size: 0.83rem;
      border-radius: 999px;
    }
    .filters-bar .clear-filters { display: none; }
    .filters-bar .divider { display: none; }

    /* Filter dropdowns become bottom sheets - native iOS/Android pattern */
    .filter-dropdown {
      position: fixed;
      top: auto;
      bottom: 0;
      left: 0;
      right: 0;
      max-height: 75vh;
      overflow-y: auto;
      border-radius: 20px 20px 0 0;
      border-bottom: none;
      padding: 1.5rem 1.2rem 2rem;
      box-shadow: 0 -10px 50px rgba(0,0,0,0.2);
      animation: slideUpSheet 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      z-index: 1200;
    }
    /* Dimmed backdrop behind an open sheet; tapping it closes the filter. */
    .filter-pill-btn.open::after {
      content: '';
      position: fixed;
      inset: 0;
      background: rgba(10, 10, 10, 0.45);
      z-index: 1100;
      animation: fadeBackdrop 0.2s ease both;
    }
    @keyframes fadeBackdrop { from { opacity: 0; } to { opacity: 1; } }
    .filter-pill-btn[data-filter="features"] .filter-dropdown,
    .filter-pill-btn[data-filter="year"] .filter-dropdown {
      left: 0; right: 0;
    }
    @keyframes slideUpSheet {
      from { transform: translateY(100%); }
      to { transform: translateY(0); }
    }
    .filter-dropdown::before {
      content: '';
      display: block;
      width: 40px;
      height: 4px;
      background: var(--gray-300);
      border-radius: 999px;
      margin: -0.5rem auto 1rem;
    }
    .filter-dropdown h5 {
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--gray-900);
      text-transform: none;
      letter-spacing: 0;
      margin-bottom: 1rem;
    }
    .filter-dropdown .filter-options {
      max-height: none;
      gap: 0.1rem;
    }
    .filter-option {
      padding: 0.85rem 0.5rem;
      font-size: 1rem;
      border-radius: 10px;
    }
    .filter-option input[type="checkbox"] { width: 20px; height: 20px; }

    .listing-toolbar {
      padding: 0;
      gap: 0.7rem;
      margin-bottom: 1rem;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
    .listing-count { font-size: 0.8rem; color: var(--gray-600); }
    .sort-by { font-size: 0.8rem; }
    .sort-by select {
      padding: 0.5rem 0.7rem;
      font-size: 0.82rem;
      border-radius: 8px;
      background: var(--gray-50);
      border-color: var(--gray-200);
    }

    /* Hide desktop layout switcher, show mobile-specific compact one */
    .layout-switcher.desktop-only { display: none !important; }
    .layout-switcher.mobile-only { display: inline-flex !important; padding: 2px; }
    .layout-switcher.mobile-only .layout-btn { padding: 0.4rem 0.55rem; }
    .layout-switcher.mobile-only .layout-btn svg { width: 16px; height: 16px; }

    /* Car grid - mobile-first stack */
    .car-grid { grid-template-columns: 1fr; gap: 0.85rem; }
    .car-grid[data-cols="2"], .car-grid[data-cols="3"], .car-grid[data-cols="4"] { grid-template-columns: 1fr; }

    .car-card {
      border-radius: 16px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 10px rgba(0,0,0,0.04);
      border: 1px solid var(--gray-100);
    }
    .car-image { aspect-ratio: 16/10; }
    .car-body { padding: 1rem 1.1rem 1.1rem; }
    .car-header { margin-bottom: 0.35rem; }
    .car-header .category { font-size: 0.65rem; }
    .car-header .rating { font-size: 0.78rem; }
    .car-title { font-size: 1.05rem; margin-bottom: 0.25rem; }
    .car-similar { font-size: 0.74rem; margin-bottom: 0.7rem; color: var(--gray-500); }
    .car-specs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.3rem;
      padding: 0.7rem 0;
      margin-bottom: 0.7rem;
    }
    .spec { gap: 0.25rem; }
    .spec svg { width: 16px; height: 16px; }
    .spec span { font-size: 0.7rem; font-weight: 600; }
    .car-features { gap: 0.3rem; margin-bottom: 0.8rem; }
    .feature-tag { font-size: 0.68rem; padding: 0.25rem 0.55rem; border-radius: 6px; }
    .car-footer {
      padding-top: 0.85rem;
      border-top: 1px solid var(--gray-100);
      gap: 0.5rem;
    }
    .price-block { gap: 0; }
    .price-block .from-label { font-size: 0.62rem; }
    .price-block .price { font-size: 1.5rem; letter-spacing: -0.02em; }
    .price-block .per-day { font-size: 0.7rem; }
    .price-block .price-original { font-size: 0.78rem; }
    .car-cta-btn {
      padding: 0.65rem 1.1rem;
      font-size: 0.85rem;
      font-weight: 700;
      border-radius: 10px;
    }

    /* Grid 2x compact mode */
    .car-grid[data-mobile-view="grid"] {
      grid-template-columns: repeat(2, 1fr);
      gap: 0.65rem;
    }
    .car-grid[data-mobile-view="grid"] .car-body { padding: 0.8rem; }
    .car-grid[data-mobile-view="grid"] .car-title { font-size: 0.92rem; }
    .car-grid[data-mobile-view="grid"] .car-similar { display: none; }
    .car-grid[data-mobile-view="grid"] .car-features { display: none; }
    .car-grid[data-mobile-view="grid"] .car-specs {
      grid-template-columns: repeat(2, 1fr);
      gap: 0.3rem;
      padding: 0.5rem 0;
    }
    .car-grid[data-mobile-view="grid"] .spec span { font-size: 0.6rem; }
    .car-grid[data-mobile-view="grid"] .spec svg { width: 13px; height: 13px; }
    .car-grid[data-mobile-view="grid"] .car-header .category { font-size: 0.58rem; }
    .car-grid[data-mobile-view="grid"] .car-header .rating { font-size: 0.68rem; }
    .car-grid[data-mobile-view="grid"] .price-block .price { font-size: 1.1rem; }
    .car-grid[data-mobile-view="grid"] .price-block .price-original,
    .car-grid[data-mobile-view="grid"] .price-block .from-label,
    .car-grid[data-mobile-view="grid"] .price-block .per-day { display: none; }
    .car-grid[data-mobile-view="grid"] .car-cta-btn {
      padding: 0.4rem 0.55rem;
      font-size: 0.68rem;
    }
    .car-grid[data-mobile-view="grid"] .car-cta-btn span { display: none; }

    /* List view falls back to stack on mobile (more readable) */
    .car-grid[data-view="list"] { grid-template-columns: 1fr; }
    .car-grid[data-view="list"] .car-card { flex-direction: column; max-height: none; }
    .car-grid[data-view="list"] .car-image { width: 100%; aspect-ratio: 16/10; height: auto; }
    .car-grid[data-view="list"] .car-body { display: flex; flex-direction: column; }
    .car-grid[data-view="list"] .car-features { display: flex; }
    .car-grid[data-view="list"] .car-footer { flex-direction: row; }

    .load-more-wrap { margin-top: 1.5rem; }
    .btn-load-more { width: 100%; padding: 0.95rem; font-size: 0.95rem; border-radius: 12px; }

    /* -------------------- HOW IT WORKS: vertical timeline -------------------- */
    .how-it-works {
      background: var(--gray-50);
    }
    .steps {
      grid-template-columns: 1fr;
      gap: 1.25rem;
      margin-top: 1.5rem;
      position: relative;
    }
    .step {
      display: grid;
      grid-template-columns: 56px 1fr;
      gap: 1rem;
      text-align: left;
      align-items: flex-start;
      padding: 1.1rem;
      background: var(--white);
      border-radius: 14px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    .step-num {
      width: 48px;
      height: 48px;
      margin: 0;
      font-size: 1.1rem;
      border-radius: 12px;
    }
    .step-num svg { width: 22px; height: 22px; }
    .step-content { padding-top: 0.2rem; }
    /* The markup is icon + h3 + p with no wrapper, so both text nodes have to
       be placed in the second column explicitly or the paragraph wraps inside
       the narrow icon column. */
    .step h3 { grid-column: 2; font-size: 1rem; margin-bottom: 0.25rem; align-self: center; }
    .step p  { grid-column: 2; font-size: 0.85rem; line-height: 1.45; max-width: none; margin: 0; }
    .step-num { grid-row: 1; }

    /* -------------------- LOCATIONS: card stack with prominent badges -------------------- */
    .locations-grid { grid-template-columns: 1fr; gap: 0.85rem; }
    .locations-grid .location-card:last-child { max-width: 100%; grid-column: auto; }
    .location-card {
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04);
    }
    .location-image { aspect-ratio: 16/9; }
    .location-body { padding: 1.1rem; }
    .location-body h3 { font-size: 1.05rem; margin-bottom: 0.25rem; }
    .location-body .address { font-size: 0.85rem; }
    .location-body .hours { font-size: 0.8rem; }

    /* -------------------- TESTIMONIALS: single column, larger cards -------------------- */
    .testimonials-grid { grid-template-columns: 1fr; gap: 0.85rem; }
    .testimonial-card {
      padding: 1.4rem 1.25rem;
      border-radius: 14px;
    }
    .testimonial-card .stars { margin-bottom: 0.7rem; }
    .testimonial-card blockquote {
      font-size: 0.95rem;
      line-height: 1.55;
      margin-bottom: 1rem;
    }
    .reviewer-info strong { font-size: 0.92rem; }
    .reviewer-info span { font-size: 0.76rem; }

    .trust-strip {
      flex-wrap: wrap;
      gap: 1.2rem 0.5rem;
      padding: 1.5rem 1rem;
      margin-top: 1.5rem;
      border-radius: 14px;
    }
    .trust-stat { flex: 1 1 calc(50% - 0.5rem); text-align: center; }
    .trust-stat .num { font-size: 1.5rem; }
    .trust-stat .label { font-size: 0.72rem; }

    /* -------------------- FAQ: native accordion feel -------------------- */
    .faq-section { background: var(--white); }
    .faq-aside {
      text-align: left;
      margin-bottom: 1.25rem;
    }
    .faq-aside h2 { font-size: 1.7rem; line-height: 1.1; }
    .faq-aside p { font-size: 0.92rem; }
    .faq-item {
      border-radius: 12px;
      border: 1px solid var(--gray-100);
      margin-bottom: 0.6rem;
      background: var(--white);
      overflow: hidden;
    }
    .faq-item:last-child { margin-bottom: 0; }
    .faq-q {
      font-size: 0.95rem;
      padding: 1.1rem 1rem;
      gap: 0.85rem;
      font-weight: 600;
    }
    .faq-q::after { width: 18px; height: 18px; }
    .faq-a { padding: 0 1rem; font-size: 0.88rem; line-height: 1.55; color: var(--gray-700); }
    .faq-item.open .faq-a { padding: 0 1rem 1.1rem; }

    /* -------------------- FOOTER: collapsible, compact -------------------- */
    footer { padding: 2.5rem 0 1.25rem; }
    .footer-top {
      grid-template-columns: 1fr 1fr;
      gap: 1.75rem 1.25rem;
      padding-bottom: 1.75rem;
    }
    .footer-brand { grid-column: 1 / -1; }
    .footer-brand p {
      max-width: 100%;
      font-size: 0.88rem;
      margin-bottom: 1rem;
    }
    .footer-brand .logo { font-size: 1.2rem; margin-bottom: 0.75rem; }
    .footer-col h5 {
      font-size: 0.78rem;
      letter-spacing: 0.08em;
      margin-bottom: 0.8rem;
    }
    .footer-col ul { gap: 0.45rem; }
    .footer-col a { font-size: 0.88rem; }
    .footer-social {
      grid-column: 1 / -1;
      flex-direction: row;
      align-items: flex-start;
    }
    .footer-social .social-icons { gap: 0.5rem; }
    .footer-bottom {
      flex-direction: column-reverse;
      align-items: flex-start;
      gap: 0.7rem;
      font-size: 0.75rem;
      padding-top: 1.25rem;
    }
    .footer-bottom-links {
      gap: 1rem;
      flex-wrap: wrap;
    }
    .footer-bottom-links a { font-size: 0.78rem; }

    /* -------------------- Sticky bottom CTA bar (mobile only, conversion booster) -------------------- */
    /* Optional micro-pattern: a sticky CTA at the bottom for above-fold conversion */
    body::after { display: none; } /* placeholder, can be enabled by adding markup */
  }

  /* ============================================================================ */
  /* SMALL PHONES (≤ 480px)                                                       */
  /* Even tighter spacing, slightly smaller type, but never sacrificing tap area  */
  /* ============================================================================ */
  @media (max-width: 480px) {
    .container { --gutter: 0.875rem; }

    /* Hero */
    .hero { padding: 1.25rem 0 4.5rem; }
    .hero h1 { font-size: 1.85rem; }
    .hero p.lede { font-size: 0.9rem; margin-bottom: 1rem; }

    /* Booking widget tighter */
    .booking-widget { margin-top: -2.5rem; border-radius: 16px; }
    .booking-tab { font-size: 0.78rem; padding: 0.6rem 0.3rem; }
    .booking-tab svg { width: 14px; height: 14px; }
    .booking-field { padding: 0.95rem 1rem; }
    .booking-field label { font-size: 0.7rem; }
    .booking-field .value { font-size: 1rem; }
    .booking-submit { padding: 1.1rem; font-size: 1.05rem; }

    /* Benefits */
    .benefits-grid { gap: 0.65rem; }
    .benefit { padding: 0.85rem; }
    .benefit-icon { width: 32px; height: 32px; }
    .benefit-icon svg { width: 16px; height: 16px; }
    .benefit h4 { font-size: 0.82rem; }
    .benefit p { font-size: 0.7rem; }

    /* Section headers */
    .section-header h2 { font-size: 1.4rem; }
    .section-header p { font-size: 0.85rem; }

    /* Categories more compact */
    .category-chip { flex: 0 0 88px; padding: 0.8rem 0.4rem 0.7rem; }
    .category-chip svg { width: 28px; height: 28px; }
    .category-chip .name { font-size: 0.75rem; }
    .category-chip .count { font-size: 0.63rem; }

    /* Brands tighter */
    .brand-chip { flex: 0 0 68px; padding: 0.5rem; }

    /* Car card */
    .car-body { padding: 0.9rem 1rem 1rem; }
    .car-title { font-size: 1rem; }
    .price-block .price { font-size: 1.35rem; }
    .car-cta-btn { padding: 0.6rem 0.95rem; font-size: 0.8rem; }

    /* How it works */
    .step { grid-template-columns: 48px 1fr; padding: 1rem; gap: 0.8rem; }
    .step-num { width: 42px; height: 42px; }
    .step-num svg { width: 20px; height: 20px; }
    .step h3 { font-size: 0.95rem; }
    .step p { font-size: 0.82rem; }

    /* Trust stats */
    .trust-stat .num { font-size: 1.35rem; }
    .trust-stat .label { font-size: 0.68rem; }

    /* FAQ */
    .faq-aside h2 { font-size: 1.5rem; }
    .faq-q { font-size: 0.9rem; padding: 1rem 0.9rem; }
    .faq-a { font-size: 0.85rem; padding: 0 0.9rem; }
    .faq-item.open .faq-a { padding: 0 0.9rem 1rem; }

    /* Footer */
    .footer-top { grid-template-columns: 1fr; gap: 1.5rem; }
    .footer-col h5 { margin-bottom: 0.65rem; }
    .footer-col a { font-size: 0.85rem; }
  }

/* ============ HERO DATE PICKER (calendar popover) ============ */
.hero-cal {
  display: none;
  border-top: 1px solid var(--gray-200);
  background: var(--white);
  padding: 1.2rem 1.4rem 1.4rem;
  animation: heroCalIn 0.2s ease;
}
.hero-cal.open { display: block; }
@keyframes heroCalIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.hero-cal .cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
.hero-cal .cal-title { font-weight: 700; font-size: 0.92rem; color: var(--gray-600); }
.cal-navbtn {
  width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--gray-200);
  background: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--gray-700); transition: all 0.15s;
}
.cal-navbtn:hover:not(:disabled) { background: var(--gray-100); border-color: var(--gray-400); }
.cal-navbtn:disabled { opacity: 0.3; cursor: not-allowed; }
.cal-navbtn svg { width: 16px; height: 16px; }
.hero-cal .cal-months { display: flex; gap: 2.5rem; }
.hero-cal .cal-month { flex: 1; min-width: 0; }
.cal-month-title { text-align: center; font-weight: 700; font-size: 0.95rem; margin-bottom: 0.7rem; color: var(--gray-900); text-transform: capitalize; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-dow { text-align: center; font-size: 0.7rem; font-weight: 700; color: var(--gray-400); text-transform: uppercase; padding-bottom: 0.4rem; }
.cal-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 0.88rem; font-weight: 600; color: var(--gray-800);
  border-radius: 8px; cursor: pointer; border: none; background: transparent;
  font-family: inherit; transition: background 0.1s;
}
.cal-day.empty { visibility: hidden; }
.cal-day:hover:not(.disabled):not(.selected) { background: var(--primary-light); }
.cal-day.disabled { color: var(--gray-300); cursor: not-allowed; text-decoration: line-through; }
.cal-day.in-range { background: var(--primary-light); border-radius: 0; color: var(--primary-dark); }
.cal-day.selected { background: var(--primary); color: var(--white); }
.cal-day.range-start { border-radius: 8px 0 0 8px; }
.cal-day.range-end { border-radius: 0 8px 8px 0; }
.cal-day.range-start.range-end { border-radius: 8px; }
.hero-cal-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px dashed var(--gray-200); flex-wrap: wrap;
}
.hero-cal-foot .sum { font-size: 0.9rem; color: var(--gray-600); font-weight: 600; }
.hero-cal-foot .sum strong { color: var(--gray-900); }
.hero-cal-apply {
  background: var(--primary); color: #fff; border: none; border-radius: 9px;
  padding: 0.65rem 1.6rem; font-family: inherit; font-weight: 700; font-size: 0.92rem;
  cursor: pointer; transition: background 0.2s;
}
.hero-cal-apply:hover:not(:disabled) { background: var(--primary-dark); }
.hero-cal-apply:disabled { background: var(--gray-300); cursor: not-allowed; }
.booking-field.active-date { background: var(--primary-light) !important; box-shadow: inset 0 0 0 2px var(--primary); }
.booking-field .value span { font-size: 1rem; font-weight: 600; color: var(--gray-900); }

@media (max-width: 600px) {
  .hero-cal .cal-months { gap: 0; }
  .hero-cal .cal-month.second { display: none; }
  .hero-cal-foot { flex-direction: column; align-items: stretch; }
  .hero-cal-apply { width: 100%; }
}

/* ============ STICKY CONTACT DOCK (WhatsApp / Viber) ============ */
.contact-dock {
  position: fixed;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.contact-dock[hidden] { display: none; }
.contact-dock-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  height: 48px;
  padding: 0 0.85rem;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: 0 6px 20px -4px rgba(10, 10, 10, 0.28);
  /* Collapsed to a circle until hovered, so it never covers the page. */
  max-width: 48px;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.28s cubic-bezier(.22,.61,.36,1), transform 0.18s ease;
}
.contact-dock-btn svg { width: 22px; height: 22px; flex-shrink: 0; }
.contact-dock-btn span { opacity: 0; transition: opacity 0.2s ease 0.06s; }
@media (hover: hover) and (pointer: fine) {
  .contact-dock-btn:hover,
  .contact-dock-btn:focus-visible { max-width: 190px; transform: translateX(-2px); }
  .contact-dock-btn:hover span,
  .contact-dock-btn:focus-visible span { opacity: 1; }
}
.contact-dock-btn.wa { background: #25D366; }
.contact-dock-btn.vb { background: #7360F2; }

@media (hover: none) {
  /* No hover on touch, so keep it a fixed circle and drop the transition
     that would otherwise leave it half-open after the tab regains focus. */
  .contact-dock-btn { max-width: 48px; transition: none; }
  .contact-dock-btn span { display: none; }
}

@media (max-width: 900px) {
  /* Bottom-right on phones: the mid-right edge is where thumbs scroll. */
  .contact-dock {
    right: 0.85rem;
    top: auto;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    transform: none;
  }
  .contact-dock-btn { height: 46px; max-width: 46px; padding: 0 0.8rem; }
  .contact-dock-btn svg { width: 21px; height: 21px; }
}

/* Contact links are bound to settings but must not look like body links.
   :not(.btn) matters: these selectors outrank .btn-dark on specificity, so
   without it `color: inherit` repainted the WhatsApp button's white label to
   the section's dark text — black on black. */
a[data-site="phone"]:not(.btn),
a[data-site="phone2"]:not(.btn),
a[data-site="phone-link"]:not(.btn),
a[data-site="email"]:not(.btn),
a[data-site="whatsapp"]:not(.btn),
a[data-site="viber"]:not(.btn) {
  color: inherit;
  text-decoration: none;
}
a[data-site="phone"]:not(.btn):hover,
a[data-site="phone2"]:not(.btn):hover,
a[data-site="phone-link"]:not(.btn):hover,
a[data-site="email"]:not(.btn):hover { text-decoration: underline; }

/* The marque strip is presentational — nothing to click. */
.brand-chip { cursor: default; }
.brand-chip:hover { transform: none; box-shadow: none; border-color: var(--gray-200); }
.brand-chip .brand-name { font-weight: 700; font-size: 0.8rem; color: var(--gray-700); }

/* Empty / loading state inside a facet dropdown. */
.filter-empty {
  display: block;
  padding: 0.6rem 0.2rem;
  font-size: 0.85rem;
  color: var(--gray-500);
}
/* The Marcă list can get long once a real fleet is loaded. */
.filter-pill-btn[data-filter="brand"] .filter-options {
  max-height: 260px;
  overflow-y: auto;
}

@media (max-width: 900px) {
  body.filter-sheet-open { overflow: hidden; }
}

/* ============ SECOND PHONE NUMBER ============
   site.js clones the phone link wherever it appears and drops a "·" between
   the two. In the top bar they read as one line; under a heading — the mobile
   drawer and the footer's Contact block — they stack, and the separator goes
   away because the line break already separates them. */
.phone-sep { margin: 0 0.35rem; opacity: 0.5; }

.mobile-menu-info a[data-site="phone"],
.mobile-menu-info a[data-site="phone2"],
.footer-col .info-line a[data-site="phone"],
.footer-col .info-line a[data-site="phone2"] { display: block; }

.mobile-menu-info .phone-sep,
.footer-col .info-line .phone-sep { display: none; }

/* ============ LANGUAGE PICKER ============ */
.lang-switch { position: relative; display: inline-flex; }
.lang-switch .lang-current {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
  letter-spacing: 0.02em;
}
.lang-switch .lang-current svg { transition: transform 0.2s ease; }
.lang-switch.open .lang-current svg { transform: rotate(180deg); }
.lang-switch .lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: none;
  flex-direction: column;
  min-width: 78px;
  padding: 0.3rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
  z-index: 1000;
}
.lang-switch.open .lang-menu { display: flex; }
.lang-switch .lang-option {
  background: none; border: 0;
  padding: 0.5rem 0.7rem;
  border-radius: 7px;
  font: inherit;
  font-weight: 600;
  color: var(--gray-700);
  text-align: left;
  cursor: pointer;
}
.lang-switch .lang-option:hover { background: var(--gray-100); }
.lang-switch .lang-option[aria-current] { background: var(--primary); color: var(--white); }

@media (max-width: 900px) {
  /* Keep the menu on screen when the picker sits at the very edge. */
  .lang-switch .lang-menu { right: 0; left: auto; }
}

/* ---- Inline variant ----------------------------------------------------
   A flat row of choices for the mobile drawer and the footer, where the top
   bar's dropdown is either hidden or would open into an awkward corner.
   Everything visible at once, one tap to switch. */
.lang-switch.lang-inline { display: inline-flex; gap: 0.25rem; padding: 0.2rem; }
.lang-switch.lang-inline .lang-option {
  min-width: 2.75rem;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
  transition: background 0.18s ease, color 0.18s ease;
}

/* In the drawer: light panel, so the resting state is a soft grey chip. */
.mobile-menu-lang {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.9rem 1.5rem 1.1rem;
  border-top: 1px solid var(--gray-100);
}
.mobile-menu-lang > span {
  font-size: 0.82rem; font-weight: 600; color: var(--gray-500);
}
.mobile-menu-lang .lang-switch.lang-inline {
  background: var(--gray-100); border-radius: 10px; padding: 0.22rem;
}
.mobile-menu-lang .lang-option { color: var(--gray-600); }
.mobile-menu-lang .lang-option:hover { background: var(--gray-200); }
.mobile-menu-lang .lang-option[aria-current] {
  background: var(--white); color: var(--gray-900);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* In the footer: dark ground, so the chip inverts. */
.footer-lang { background: rgba(255, 255, 255, 0.07); border-radius: 10px; padding: 0.22rem; }
/* The row is space-between with three children; pushing the picker right
   keeps it beside the legal links instead of stranded mid-line. Below 768px
   the row stacks (column-reverse) and the margin would collapse the gap. */
@media (min-width: 769px) {
  .footer-bottom .footer-lang { margin-left: auto; margin-right: 1.4rem; }
}
.footer-lang .lang-option { color: var(--gray-400); }
.footer-lang .lang-option:hover { background: rgba(255, 255, 255, 0.1); color: var(--white); }
.footer-lang .lang-option[aria-current] { background: var(--primary); color: var(--white); }

/* Fetched brand marks: contain, never stretch, and keep the chip's padding. */
.brand-chip .brand-logo-img {
  width: 72%;
  height: 72%;
  object-fit: contain;
}

/* ============ HERO PICK-UP LOCATION ============ */
/* The field reads as one control: the select is stretched invisibly over the
   whole card so a tap anywhere opens it, with the chosen label and a chevron
   drawn underneath so it is obviously a choice rather than fixed text. */
.booking-field.has-select { position: relative; }
.booking-field .loc-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  z-index: 2;
}
.booking-field .loc-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.booking-field .loc-chev {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--gray-400);
  transition: transform 0.2s ease, color 0.2s ease;
}
.booking-field:hover .loc-chev { color: var(--gray-900); transform: translateY(1px); }
/* Keyboard users still get a visible focus ring even though the select is
   transparent. */
.booking-field .loc-select:focus-visible + .value,
.booking-field:focus-within { background: var(--gray-50); }
.booking-field:focus-within .loc-chev { color: var(--primary); }

/* Styled to match the sibling date fields: the select carries no chrome of its
   own so the whole .booking-field still reads as one control. */
.booking-field .loc-select {
  flex: 1;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-900);
  cursor: pointer;
  outline: none;
}
.booking-field .loc-select:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============ CAR CARD PHOTO SLIDER ============ */
.car-image { position: relative; overflow: hidden; }
.car-slides {
  display: flex;
  height: 100%;
  transition: transform 0.35s cubic-bezier(.22,.61,.36,1);
}
.car-slides .car-photo {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--gray-900);
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 2px 10px rgba(10, 10, 10, 0.18);
  /* Hidden until the card is hovered, so the photo stays clean. */
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.gal-nav svg { width: 17px; height: 17px; }
.gal-nav.prev { left: 10px; }
.gal-nav.next { right: 10px; }
.gal-nav:hover { background: #fff; }
.car-card:hover .gal-nav,
.gal-nav:focus-visible { opacity: 1; }

/* Thumbnails, revealed on hover along the bottom of the photo. */
.gal-thumbs {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  display: flex;
  gap: 5px;
  padding: 26px 8px 8px;
  /* Centred under the photo. "safe" keeps the first thumbnail reachable if
     a car ever has enough photos to overflow, which plain centring clips. */
  justify-content: center;
  justify-content: safe center;
  overflow-x: auto;
  scrollbar-width: none;
  background: linear-gradient(to top, rgba(10,10,10,0.55), rgba(10,10,10,0));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.gal-thumbs::-webkit-scrollbar { display: none; }
.car-card:hover .gal-thumbs,
.gal-thumbs:focus-within { opacity: 1; transform: none; }

.gal-thumb {
  flex: 0 0 44px;
  height: 32px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,0.15);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.gal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-thumb:hover { opacity: 1; }
.gal-thumb.on { border-color: #fff; opacity: 1; }

@media (hover: none) {
  /* No hover on touch: arrows stay visible, thumbnails would crowd a small
     card so the strip is left out there. */
  .gal-nav { opacity: 1; background: rgba(255, 255, 255, 0.85); }
  .gal-thumbs { display: none; }
}

/* A pick-up card with no photo configured yet: a neutral panel with the brand
   mark rather than an empty box or a broken image. */
.location-image.no-photo {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,90,31,0.12), transparent 60%),
    var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
}
.location-image.no-photo::after {
  content: '';
  width: 54px; height: 54px;
  border-radius: 14px;
  background: var(--primary);
  opacity: 0.16;
}