/* ============================================================
   Zero Max — home.css (new homepage, built section by section)
   Prefix: zm-  |  H1→H2→H3 hierarchy enforced
   Color tokens (--zm-orange, --gv-gray-900, --gv-black, etc.)
   come from header.css, already loaded sitewide before this file.
   ============================================================ */

/* ══════════════════════════════════════════
   RESET (index.php has no other stylesheet to
   inherit this from — header.css doesn't reset)
   ══════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; }
body {
    font-family: var(--gv-font, 'Poppins', sans-serif);
    background: var(--gv-black, #0A0A0A);
    min-height: 100vh;
    overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }

/* Visually hidden but present for SEO/screen readers — same clip-rect
   technique home_old.css already used for its hidden search submit. */
.zm-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;
}

/* Shared contained-width wrap, matching the 1380px convention already
   used sitewide (all-cars.css, contact.css, location.css, etc.). */
.zm-wrap { max-width: 1380px; margin: 0 auto; padding: 0 32px; }

/* ══════════════════════════════════════════
   HERO / BANNER
   ══════════════════════════════════════════ */
.zm-hero {
    position: relative;
    width: 100%;
    min-height: clamp(460px, 58vw, 720px);
    background: var(--gv-black, #0A0A0A);
    /* No overflow:hidden here — the crossfading background layers below
       are inset:0 so they can never exceed this box (nothing to clip),
       and the live-search dropdown needs to render past the hero's
       bottom edge without being cut off. */
}

/* Three full-bleed photo layers, crossfaded via CSS only (no JS). */
.zm-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    animation: zmHeroCrossfade 30s ease-in-out infinite;
}
.zm-hero-bg-a {
    background-image: url('../../img/web/HomeBannerA.png');
}
.zm-hero-bg-b {
    background-image: url('../../img/web/HomeBannerB.webp');
    /* Each layer shares the same hold-then-fade keyframe, just phase
       shifted by 1/3 of the cycle (not animation-direction:reverse —
       reversing the keyframe doesn't keep 3 layers complementary at
       every instant; they'd all hit opacity 0 at once somewhere in the
       cycle, showing the section's black fallback through as a flash).
       A negative delay makes a layer's timeline start further ahead, so
       it reaches its own hold sooner — B needs -(2/3 of the period) so
       it's the 2nd to hold, C needs -(1/3) so it's the 3rd. Verified by
       sampling computed opacity across a full cycle: A+B+C always sums
       to 1, and the visible order is A → B → C → back to A. */
    animation-delay: -20s;
}
.zm-hero-bg-c {
    background-image: url('../../img/web/HomeBannerC.webp');
    animation-delay: -10s;
}

/* Hold each image 5s, then a slow 5s crossfade into the next — three
   equal 10s slots (hold+fade) per 30s loop, see .zm-hero-bg-b comment. */
@keyframes zmHeroCrossfade {
    0%      { opacity: 1; }
    16.667% { opacity: 1; }
    33.333% { opacity: 0; }
    83.333% { opacity: 0; }
    100%    { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .zm-hero-bg { animation: none; }
    .zm-hero-bg-a { opacity: 1; }
    .zm-hero-bg-b { opacity: 0; }
    .zm-hero-bg-c { opacity: 0; }
    /* Matches -bg-c's forced-hidden state above, since frozen banner A
       has no title text baked in for this slot. */
    .zm-hero-title { animation: none; opacity: 0; }
}

.zm-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: clamp(460px, 58vw, 720px);

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: clamp(28px, 8vw, 64px) 24px 40px;
}

/* Overrides the .zm-sr-only clip — visible only while the "C" background
   layer (HomeBannerC.webp, the tunnel shot) is showing, positioned in the
   open space above its three cars. Sharing .zm-hero-bg-c's exact
   animation + delay makes this track that layer's opacity frame-for-frame
   (both are driven by the same zmHeroCrossfade keyframe), rather than
   just being roughly timed to it. */
.zm-hero-title {
    position: absolute;
    top: 9%;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: auto;
    max-width: 900px;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    z-index: 2;

    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: clamp(24px, 4.2vw, 48px);
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    color: var(--zm-orange, #FF6A2B);

    text-shadow: 0 4px 24px rgba(0, 0, 0, .6);

    animation: zmHeroCrossfade 30s ease-in-out infinite;
    animation-delay: -10s;
}

/* ══════════════════════════════════════════
   SEARCH ROW + CTA
   Anchored near the bottom of the hero, matching
   the designer's proportions (~80% down, centered).
   ══════════════════════════════════════════ */
.zm-hero-search {
    margin-top: auto;
    width: 100%;
    display: flex;
    justify-content: center;

    opacity: 0;
    animation: zmHeroSearchIn 1s ease .3s both;
}

@keyframes zmHeroSearchIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.zm-hero-search-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: min(90vw, 640px);
    flex-wrap: wrap;
}

.zm-hero-search-pill {
    position: relative;
    flex: 1 1 320px;
    min-width: 0;
    height: 54px;

    background: var(--gv-gray-900, #1A1A1A);
    border: 1px solid var(--gv-gray-700, #2C2C2C);
    border-radius: 999px;

    box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}

.zm-hero-search-input {
    width: 100%;
    height: 100%;
    padding: 0 60px 0 24px;

    background: none;
    border: none;
    outline: none;

    color: var(--gv-white, #fff);
    font-family: inherit;
    font-size: 15px;
}
.zm-hero-search-input::placeholder { color: var(--gv-gray-300, #9A9A9A); opacity: 1; }

.zm-hero-search-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(160deg, var(--zm-orange-light, #FF8A52), var(--zm-orange, #FF6A2B));
    border: none;
    border-radius: 50%;
    color: var(--gv-white, #fff);
    cursor: pointer;

    transition: transform .25s ease, box-shadow .25s ease;
}
.zm-hero-search-btn:hover {
    transform: translateX(2px);
    box-shadow: 0 6px 18px rgba(255, 106, 43, .45);
}
.zm-hero-search-btn svg { width: 18px; height: 18px; }

.zm-hero-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 54px;
    padding: 0 30px;

    background: linear-gradient(160deg, var(--zm-orange-light, #FF8A52), var(--zm-orange, #FF6A2B));
    border-radius: 999px;
    color: var(--gv-white, #fff);

    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
    white-space: nowrap;

    box-shadow: 0 10px 28px rgba(0, 0, 0, .35);

    transition: transform .25s ease, box-shadow .25s ease;
}
.zm-hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(255, 106, 43, .4);
}

/* ══════════════════════════════════════════
   LIVE SEARCH RESULTS
   (class/id names match assets/js/home.js)
   ══════════════════════════════════════════ */
.zm-search-results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 12px);

    z-index: 20;

    max-height: min(430px, calc(100vh - 180px));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    border: 1px solid var(--gv-gray-700, #2C2C2C);
    border-radius: 22px;

    background: var(--gv-gray-900, #1A1A1A);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    pointer-events: none;

    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.zm-search-results.zm-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.zm-search-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
    align-items: center;

    padding: 12px 16px;

    border-bottom: 1px solid var(--gv-gray-800, #222);

    background: var(--gv-gray-900, #1A1A1A);
    color: var(--gv-white, #fff);
    text-decoration: none;

    transition: background .2s ease;
}

.zm-search-item:last-child { border-bottom: none; }
.zm-search-item:hover { background: var(--gv-gray-800, #222); }

.zm-search-item img {
    width: 72px;
    height: 52px;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
    background: var(--gv-gray-700, #2C2C2C);
}

.zm-search-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.zm-search-name {
    overflow: hidden;
    color: var(--gv-white, #fff);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zm-search-meta {
    overflow: hidden;
    color: var(--gv-gray-400, #9A9A9A);
    font-size: 12.5px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zm-search-empty {
    padding: 20px 16px;
    color: var(--gv-gray-400, #9A9A9A);
    font-size: 13.5px;
    line-height: 1.5;
    text-align: center;
}

.zm-search-all {
    position: sticky;
    bottom: 0;
    display: block;
    padding: 14px 16px;
    background: var(--zm-orange, #FF6A2B);
    color: var(--gv-white, #fff);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: background .2s ease;
}

.zm-search-all:hover { background: var(--zm-orange-dark, #D9531B); }

/* ══════════════════════════════════════════
   BRANDS — static logo grid (no carousel/JS)
   All 7 logos in one row down to 769px; below that
   it becomes a centred flex wrap (3 then 2 per row)
   so the odd last logo sits in the middle.
   ══════════════════════════════════════════ */
.zm-brands {
    background: var(--gv-gray-900, #1A1A1A);
    padding: 32px 0;
}

.zm-brands-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 14px;
}

.zm-brand-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 2.6 / 1;
    padding: 10px 14px;

    border: 1px solid var(--gv-gray-300, #9A9A9A);
    border-radius: 16px;

    transition: border-color .25s ease, transform .25s ease, background .25s ease;
}

.zm-brand-card:hover {
    border-color: var(--gv-white, #fff);
    background: rgba(255, 255, 255, .04);
    transform: translateY(-3px);
}

.zm-brand-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ══════════════════════════════════════════
   OUR FLEET
   ══════════════════════════════════════════ */
.zm-fleet {
    background: var(--gv-black, #0A0A0A);
    padding: 64px 0;
}

.zm-fleet-heading {
    margin: 0 0 14px;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: clamp(26px, 3.6vw, 40px);
    font-weight: 800;
    text-align: center;
    color: var(--gv-white, #fff);
}
.zm-fleet-heading-orange { color: var(--zm-orange, #FF6A2B); }

.zm-fleet-desc {
    max-width: 780px;
    margin: 0 auto 40px;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: 14.5px;
    line-height: 1.7;
    text-align: center;
    color: var(--gv-gray-300, #9A9A9A);
}

.zm-fleet-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.zm-fleet-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--zm-orange, #FF6A2B);
    border-radius: 12px;
    overflow: hidden;
    background: var(--gv-gray-900, #1A1A1A);
}

.zm-fleet-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: var(--gv-white, #fff);
}
.zm-fleet-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.zm-fleet-namebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    background: var(--gv-gray-800, #222222);
}

.zm-fleet-title-link { min-width: 0; text-decoration: none; }
.zm-fleet-title {
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--gv-white, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zm-fleet-brand-badge { flex-shrink: 0; display: flex; align-items: center; }
.zm-fleet-brand-badge img { height: 34px; width: auto; max-width: 90px; object-fit: contain; }

.zm-fleet-actions {
    display: flex;
    gap: 8px;
    padding: 12px 14px 14px;
    margin-top: auto;
}

.zm-fleet-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    border-radius: 8px;
    color: var(--gv-white, #fff);
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    transition: opacity .25s ease, transform .25s ease;
}
.zm-fleet-btn:hover { opacity: .88; transform: translateY(-1px); }
.zm-fleet-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

.zm-fleet-btn-call {
    background: linear-gradient(160deg, var(--zm-orange-light, #FF8A52), var(--zm-orange, #FF6A2B));
}
.zm-fleet-btn-wa { background: #25D366; }

.zm-fleet-view-all {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}
.zm-fleet-view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 34px;
    border-radius: 999px;
    background: linear-gradient(160deg, var(--zm-orange-light, #FF8A52), var(--zm-orange, #FF6A2B));
    color: var(--gv-white, #fff);
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
    transition: transform .25s ease, box-shadow .25s ease;
}
.zm-fleet-view-all-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(255, 106, 43, .4);
}

/* ══════════════════════════════════════════
   WHAT IS A LEASE-TO-OWN CAR? — Lease-to-Own_Car.webp
   has no baked-in boxes; cars sit on the right ~55%,
   left ~45% is genuinely empty. Mirror image of .zm-abu
   (there: photo left, text right — here: photo right,
   text left). Same full-bleed / decoupled-crop-wrapper /
   no-height-cap-on-text approach throughout.
   ══════════════════════════════════════════ */
.zm-what {
    background: var(--gv-black, #0A0A0A);
    padding: 64px 0;
}

.zm-what-media {
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 785;
}

.zm-what-media-img {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.zm-what-media-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zm-what-content {
    position: absolute;
    top: 28%;
    left: 7%;
    width: 36%;
}

.zm-what-heading {
    margin: 0 0 4%;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: clamp(22px, 3vw, 44px);
    font-weight: 800;
    line-height: 1.15;
    color: var(--gv-white, #fff);
}
.zm-what-heading strong { color: var(--zm-orange, #FF6A2B); font-weight: 800; }

.zm-what-content p {
    margin: 0;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: clamp(12px, 1.05vw, 16px);
    line-height: 1.7;
    color: rgba(255, 255, 255, .88);
}
.zm-what-content p a { color: var(--zm-orange, #FF6A2B); text-decoration: underline; }

/* ══════════════════════════════════════════
   WHY CHOOSE ZERO MAX — flip cards
   ══════════════════════════════════════════ */
.zm-why {
    position: relative;
    overflow: hidden;
    background: var(--gv-gray-900, #1A1A1A);
    padding: 64px 0;
}
/* Approximates the design's warm glow bleeding in from the bottom —
   no source background image for this, built with existing tokens. */
.zm-why::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 55%;
    background: radial-gradient(ellipse at center bottom, rgba(255, 106, 43, .25), transparent 70%);
    pointer-events: none;
}

.zm-why-heading {
    position: relative;
    margin: 0 0 14px;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: clamp(22px, 3.2vw, 34px);
    font-weight: 600;
    text-align: center;
    color: var(--gv-white, #fff);
}
.zm-why-heading strong { color: var(--zm-orange, #FF6A2B); font-weight: 800; }

.zm-why-desc {
    position: relative;
    max-width: 780px;
    margin: 0 auto 40px;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: 14.5px;
    line-height: 1.7;
    text-align: center;
    color: var(--gv-gray-300, #9A9A9A);
}

.zm-why-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.zm-why-card {
    aspect-ratio: 348 / 185;
    perspective: 1200px;
}

.zm-why-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform .6s cubic-bezier(.4, 0, .2, 1);
    transform-style: preserve-3d;
}
.zm-why-card:hover .zm-why-card-inner,
.zm-why-card:focus-within .zm-why-card-inner { transform: rotateY(180deg); }

.zm-why-card-front,
.zm-why-card-back {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    border-radius: 12px;
    backface-visibility: hidden;
}

.zm-why-card-front {
    gap: 16px;
    padding: 0 22px;
    background: var(--gv-gray-800, #222222);
}

.zm-why-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: linear-gradient(160deg, var(--zm-orange-light, #FF8A52), var(--zm-orange, #FF6A2B));
    color: var(--gv-black, #0A0A0A);
}
.zm-why-icon svg { width: 28px; height: 28px; }
.zm-why-icon-ar {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 800;
}

.zm-why-front-title {
    margin: 0;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--gv-white, #fff);
}

.zm-why-card-back {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    padding: 26px 28px;
    background: linear-gradient(160deg, var(--zm-orange-light, #FF8A52), var(--zm-orange, #FF6A2B));
    transform: rotateY(180deg);
}
.zm-why-back-title {
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: 19px;
    font-weight: 700;
    color: var(--gv-white, #fff);
}
.zm-why-back-desc {
    margin: 0;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .92);
}
.zm-why-back-desc a { color: var(--gv-white, #fff); text-decoration: underline; }

/* ══════════════════════════════════════════
   OUR PROCESS
   ══════════════════════════════════════════ */
.zm-process {
    background: var(--gv-black, #0A0A0A);
    padding: 64px 0;
}

.zm-process-heading {
    margin: 0 0 48px;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: clamp(24px, 3.2vw, 34px);
    font-weight: 800;
    text-align: center;
    color: var(--gv-white, #fff);
}

.zm-process-grid {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.zm-process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 220px;
    text-align: center;
}

.zm-process-num {
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: clamp(56px, 7vw, 88px);
    font-weight: 800;
    line-height: 1;
    color: var(--zm-orange, #FF6A2B);
}

.zm-process-title {
    margin: 14px 0 10px;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: 17px;
    font-weight: 700;
    color: var(--gv-white, #fff);
}

.zm-process-desc {
    margin: 0;
    max-width: 240px;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--gv-gray-200, #CCCCCC);
}

.zm-process-dash {
    flex: 0 1 160px;
    height: 0;
    margin: 0 -10px;
    /* Roughly half the .zm-process-num clamp, to sit level with its
       visual vertical center regardless of viewport width. */
    margin-top: clamp(28px, 3.5vw, 44px);
    border-top: 2px dashed rgba(255, 255, 255, .6);
}

/* ══════════════════════════════════════════
   OUR PARTNERS
   partner.webp already bakes in the pattern,
   logo cards and car photos — only the heading
   is real overlaid HTML.
   ══════════════════════════════════════════ */
.zm-partners {
    background: var(--gv-black, #0A0A0A);
    padding: 64px 0;
}

.zm-partners-media {
    position: relative;
    width: 100%;
    aspect-ratio: 1350 / 650;
    border-radius: 20px;
    overflow: hidden;
}

.zm-partners-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zm-partners-heading {
    position: absolute;
    top: 23%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: 100%;
    padding: 0 16px;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: clamp(20px, 3vw, 34px);
    font-weight: 800;
    text-align: center;
    color: var(--gv-white, #fff);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

/* ══════════════════════════════════════════
   HOW DOES LEASE TO OWN CAR WORK — how_does.webp
   bakes in two dark info-panel shapes (left/right of
   the folder+hand photo); the percentages below were
   measured directly from the image's pixels so the two
   .zm-how-box overlays land inside them at desktop
   widths. Full-bleed (no .zm-wrap), matching the design
   mockup — same edge-to-edge treatment as .zm-hero.
   .zm-how-media itself has NO overflow:hidden — only
   .zm-how-media-img (the photo) crops/rounds; the text
   layer is a sibling, so it can never get silently cut
   off if a paragraph needs more room than the drawn
   panel's height. Below 1024px the panels are too small
   for this much copy, so it switches to a stacked flow
   (see the 1024px query).
   ══════════════════════════════════════════ */
.zm-how {
    background: var(--gv-black, #0A0A0A);
    padding: 32px 0 0;
}

.zm-how-media {
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 899;
}

.zm-how-media-img {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.zm-how-media-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zm-how-heading {
    position: absolute;
    top: 8%;
    left: 9%;
    max-width: 42%;
    margin: 0;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: clamp(15px, 2.1vw, 30px);
    font-weight: 800;
    line-height: 1.25;
    color: var(--gv-white, #fff);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.zm-how-heading strong { color: var(--zm-orange, #FF6A2B); font-weight: 800; }

/* Anchored to the panel's top edge only — intentionally no fixed height
   and no overflow:hidden, so copy that needs more room than the drawn
   panel simply extends a little further down (blends fine, near-black
   on near-black) instead of ever being cut off. */
.zm-how-box {
    position: absolute;
    top: 37%;
    width: 24%;
    padding: 4% 5%;
}
.zm-how-box-left { left: 13%; }
.zm-how-box-right { left: 67%; }

.zm-how-box p {
    margin: 0;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: clamp(11px, .95vw, 13.5px);
    line-height: 1.5;
    text-align: justify;
    color: rgba(255, 255, 255, .9);
}
.zm-how-box a { color: var(--zm-orange, #FF6A2B); text-decoration: underline; }

/* ══════════════════════════════════════════
   LEASE TO OWN CAR UAE: WHO CAN APPLY —
   who_can.webp bakes in the rotated sticky-note +
   paperclip graphic (measured: centered at 50%/63.8%,
   ~53.6% wide, ~49.4% tall, rotated -1.45deg). Same
   full-bleed / decoupled-crop-wrapper / no-height-cap
   approach as .zm-how, applied from the start this time.
   ══════════════════════════════════════════ */
.zm-who {
    background: var(--gv-black, #0A0A0A);
    padding: 0;
}

.zm-who-media {
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 899;
}

.zm-who-media-img {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.zm-who-media-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zm-who-heading {
    position: absolute;
    top: 12%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 620px;
    padding: 0 16px;
    text-align: center;
}
.zm-who-heading-eyebrow {
    display: block;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: clamp(13px, 1.5vw, 21px);
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--zm-orange, #FF6A2B);
}
.zm-who-heading-main {
    margin: 4px 0 0;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: clamp(24px, 5vw, 58px);
    font-weight: 800;
    line-height: 1.05;
    color: var(--gv-white, #fff);
}

/* Anchored by its center point (matching the note's measured center) and
   rotated to match the baked-in note — no fixed height / overflow:hidden,
   so if this copy ever changes to something longer it simply extends
   past the drawn note rather than being clipped. */
.zm-who-note {
    position: absolute;
    top: 63.8%;
    left: 50%;
    width: 52%;
    transform: translate(-50%, -50%) rotate(-1.45deg);
    padding: 3% 5%;
    /* Matches the baked-in note's own color — this is a legibility safety
       net, not just decoration: the note text is dark-on-orange, so if
       this box ever needs more room than the photographed note (small
       screens, or copy changes), it must carry its own orange background
       or the overflow would sit on the plain black page and vanish. */
    background: linear-gradient(160deg, var(--zm-orange-light, #FF8A52), var(--zm-orange, #FF6A2B));
    border-radius: 3px;
}
.zm-who-note p {
    margin: 0;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: clamp(11px, 1vw, 16px);
    font-weight: 600;
    line-height: 1.55;
    text-align: center;
    color: #241206;
}

/* ══════════════════════════════════════════
   LEASE TO OWN CAR ABU DHABI — another_pointless_img.webp
   has no baked-in boxes this time; the right ~40% is flat
   orange (confirmed by pixel scan), so the text column is
   just anchored there directly. Same full-bleed / decoupled
   -crop-wrapper approach as .zm-how / .zm-who.
   ══════════════════════════════════════════ */
.zm-abu {
    background: var(--gv-black, #0A0A0A);
    padding: 0 0 32px;
}

.zm-abu-media {
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 899;
}

.zm-abu-media-img {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.zm-abu-media-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zm-abu-content {
    position: absolute;
    top: 18%;
    left: 59%;
    width: 33%;
}

.zm-abu-heading {
    margin: 0 0 5%;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: clamp(20px, 2.6vw, 40px);
    font-weight: 800;
    line-height: 1.15;
    color: var(--gv-white, #fff);
}

.zm-abu-content p {
    margin: 0;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: clamp(11px, 1vw, 15px);
    line-height: 1.6;
    color: rgba(255, 255, 255, .92);
}
.zm-abu-content p + p { margin-top: 5%; }

/* ══════════════════════════════════════════
   FIND YOUR CAR (static contact section)
   ══════════════════════════════════════════ */
.zm-contact {
    background: var(--gv-black, #0A0A0A);
    padding: 64px 0;
}

.zm-contact-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    grid-template-areas:
        "heading media"
        "desc    media"
        "form    media";
    column-gap: 40px;
    row-gap: 0;
    align-items: stretch;
}

.zm-contact-heading {
    grid-area: heading;
    margin: 0 0 18px;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 800;
    line-height: 1.2;
    color: var(--gv-white, #fff);
}
.zm-contact-heading span { color: var(--zm-orange, #FF6A2B); display: block; }

.zm-contact-desc {
    grid-area: desc;
    max-width: 480px;
    margin: 0 0 28px;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: 14px;
    line-height: 1.7;
    color: var(--gv-gray-300, #9A9A9A);
}
.zm-contact-desc a { color: var(--zm-orange, #FF6A2B); text-decoration: underline; }

.zm-contact-form { grid-area: form; display: flex; flex-direction: column; gap: 16px; }

.zm-contact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.zm-contact-field {
    width: 100%;
    padding: 15px 20px;
    background: var(--gv-gray-900, #1A1A1A);
    border: 1px solid var(--gv-gray-700, #2C2C2C);
    border-radius: 10px;
    color: var(--gv-white, #fff);
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: 14px;
    outline: none;
    transition: border-color .25s ease;
}
.zm-contact-field::placeholder { color: var(--gv-gray-400, #6A6A6A); }
.zm-contact-field:focus { border-color: var(--zm-orange, #FF6A2B); }
.zm-contact-field--error { border-color: #dc2626; }

textarea.zm-contact-field {
    min-height: 110px;
    resize: vertical;
    font-family: inherit;
}

.zm-contact-submit {
    align-self: flex-start;
    padding: 16px 44px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(160deg, var(--zm-orange-light, #FF8A52), var(--zm-orange, #FF6A2B));
    color: var(--gv-black, #0A0A0A);
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease;
}
.zm-contact-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(255, 106, 43, .4);
}
.zm-contact-submit:disabled {
    opacity: .65;
    cursor: default;
    transform: none;
    box-shadow: none;
}

.zm-contact-media {
    grid-area: media;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    min-height: 320px;
}
.zm-contact-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
}

/* ══════════════════════════════════════════
   CUSTOMER REVIEWS — edge-to-edge marquee
   (assets/js/reviews-carousel.js drives this;
   same IDs/technique as the old homepage.)
   ══════════════════════════════════════════ */
.zm-reviews {
    background: var(--gv-gray-900, #1A1A1A);
    padding: 48px 0 56px;
    overflow: hidden;
}

.zm-reviews-top {
    margin-bottom: 36px;
}

.zm-reviews-heading {
    margin: 0;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 800;
    color: var(--gv-white, #fff);
}
.zm-reviews-heading span { color: var(--zm-orange, #FF6A2B); }

/* Deliberately edge-to-edge — no .zm-wrap here, unlike every other
   section's content, matching the old homepage's own carousel. */
.zm-reviews-viewport { overflow: hidden; }

.zm-reviews-track {
    display: flex;
    align-items: stretch;
    gap: 22px;
    list-style: none;
    margin: 0;
    padding: 0 32px;
    will-change: transform;
}

.zm-reviews-slide { flex: 0 0 auto; width: min(320px, 78vw); }
.zm-reviews-slide[aria-hidden="true"] { pointer-events: none; }
.zm-reviews-slide .zm-reviews-card { height: 100%; }

.zm-reviews-card {
    height: 100%;
    background: var(--gv-black, #0A0A0A);
    border-radius: 12px;
    padding: 24px 22px;
    box-sizing: border-box;
}

.zm-reviews-card-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 16px;
}

.zm-reviews-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(160deg, var(--zm-orange-light, #FF8A52), var(--zm-orange, #FF6A2B));
    flex-shrink: 0;
}

.zm-reviews-meta { display: flex; flex-direction: column; gap: 6px; }

.zm-reviews-name {
    margin: 0;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--gv-gray-200, #CCCCCC);
}

/* One-off — doesn't match --gv-gold or --zm-orange closely enough to
   reuse either; sampled directly from the design's star glyphs. */
.zm-reviews-stars { color: #FFC116; font-size: 14px; letter-spacing: 2px; }

.zm-reviews-text {
    margin: 0;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--gv-gray-300, #9A9A9A);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Only shown by JS when a card's text actually overflows its 4-line
   clamp above (see assets/js/reviews-carousel.js) — same "affordance
   only when needed" approach as vehicle-details.php's Read More. */
.zm-reviews-readmore-btn {
    display: block;
    margin: 10px 0 0;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: 12px;
    font-weight: 700;
    color: var(--zm-orange, #FF6A2B);
    cursor: pointer;
}
.zm-reviews-readmore-btn:hover { text-decoration: underline; }

/* Review modal — mirrors .zm-reels-modal-* structure, dark-card themed
   to match .zm-reviews-card rather than the reels modal's white embed box. */
.zm-reviews-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    z-index: 9990;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.zm-reviews-modal-overlay.zm-reviews-modal-open { display: flex; }

.zm-reviews-modal-box {
    position: relative;
    width: 480px;
    max-width: min(480px, 96vw);
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 12px;
    background: var(--gv-black, #0A0A0A);
    padding: 28px 24px;
    box-sizing: border-box;
    scrollbar-width: none;
}
.zm-reviews-modal-box::-webkit-scrollbar { display: none; }

.zm-reviews-modal-close {
    position: fixed;
    top: 16px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: background .2s ease;
    z-index: 9991;
}
.zm-reviews-modal-close:hover { background: rgba(255, 255, 255, 0.28); }

.zm-reviews-modal-name {
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--gv-gray-200, #CCCCCC);
    margin-bottom: 6px;
}
.zm-reviews-modal-stars { color: #FFC116; font-size: 15px; letter-spacing: 2px; margin-bottom: 16px; }
.zm-reviews-modal-text {
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--gv-gray-300, #9A9A9A);
}

/* ══════════════════════════════════════════
   INSTAGRAM REELS
   (assets/js/instagram-reels.js drives the click-to-modal
   behavior; thumbnails are server-scraped + cached, see index.php)
   ══════════════════════════════════════════ */
.zm-reels {
    background: var(--gv-black, #0A0A0A);
    padding: 56px 0 64px;
}

.zm-reels-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}

.zm-reels-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.zm-reels-avatar {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.zm-reels-avatar-inner {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--gv-black, #0A0A0A);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.zm-reels-avatar-inner img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
}

.zm-reels-handle {
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: 17px;
    font-weight: 700;
    color: var(--gv-white, #fff);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zm-reels-follow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 10px 20px;
    border: 1.5px solid var(--zm-orange, #FF6A2B);
    border-radius: 999px;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: 14px;
    font-weight: 700;
    color: var(--zm-orange, #FF6A2B);
    text-decoration: none;
    white-space: nowrap;
    transition: background .25s ease, color .25s ease;
}
.zm-reels-follow:hover {
    background: var(--zm-orange, #FF6A2B);
    color: var(--gv-white, #fff);
}
.zm-reels-follow-icon { width: 16px; height: 16px; flex-shrink: 0; }

/* Fixed-width cards with generous, consistent gaps read as clearly
   separate tiles rather than a stretched, edge-to-edge filmstrip;
   centered so a small reel count (e.g. 4) looks intentional rather than
   left-stuck with dangling empty space. Falls back to horizontal scroll
   (see breakpoints below) once cards no longer fit at their min size. */
.zm-reels-grid {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 28px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 4px 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--gv-gray-600, #555) transparent;
}
.zm-reels-grid::-webkit-scrollbar { height: 4px; }
.zm-reels-grid::-webkit-scrollbar-track { background: transparent; }
.zm-reels-grid::-webkit-scrollbar-thumb { background: var(--gv-gray-600, #555); border-radius: 2px; }

.zm-reels-card {
    flex: 0 0 240px;
    width: 240px;
    aspect-ratio: 9 / 16;
    border: 1px solid var(--zm-orange, #FF6A2B);
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    display: block;
    text-decoration: none;
    background: var(--gv-gray-900, #1A1A1A);
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
    transition: transform .3s ease, box-shadow .3s ease;
}
.zm-reels-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(255, 106, 43, .25);
}
.zm-reels-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}
.zm-reels-card:hover .zm-reels-card-img { transform: scale(1.06); }

.zm-reels-card-placeholder {
    width: 100%;
    height: 100%;
    background: var(--gv-gray-800, #222222);
}

.zm-reels-card-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.zm-reels-card-badge svg { width: 17px; height: 17px; color: #111; }

/* Reel modal */
.zm-reels-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    z-index: 9990;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.zm-reels-modal-overlay.zm-reels-modal-open { display: flex; }

.zm-reels-modal-box {
    position: relative;
    width: 400px;
    max-width: min(400px, 96vw);
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 12px;
    background: #fff;
    scrollbar-width: none;
}
.zm-reels-modal-box::-webkit-scrollbar { display: none; }

.zm-reels-modal-close {
    position: fixed;
    top: 16px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: background .2s ease;
    z-index: 9991;
}
.zm-reels-modal-close:hover { background: rgba(255, 255, 255, 0.28); }

#zm-reels-modal-embed { min-height: 200px; }
#zm-reels-modal-embed .instagram-media { margin: 0 !important; min-width: 0 !important; width: 100% !important; }

@media (max-width: 900px) {
    .zm-reels { padding: 44px 0 52px; }
    .zm-reels-grid { justify-content: flex-start; gap: 18px; }
    .zm-reels-card { flex: 0 0 190px; width: 190px; }
}

@media (max-width: 600px) {
    .zm-reels-header { flex-direction: column; align-items: flex-start; gap: 14px; }
    .zm-reels-grid { gap: 14px; }
    .zm-reels-card { flex: 0 0 150px; width: 150px; }
}

/* ══════════════════════════════════════════
   FAQ — accordion, key/value content
   (assets/js/home.js drives the toggle behavior,
   ported from index_old.php's inline accordion script)
   ══════════════════════════════════════════ */
.zm-faq {
    background: var(--gv-black, #0A0A0A);
    padding: 64px 0;
}

.zm-faq-top { text-align: center; margin: 0 auto 40px; max-width: 720px; }

.zm-faq-heading {
    margin: 0 0 14px;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: clamp(24px, 3.2vw, 36px);
    font-weight: 800;
    color: var(--gv-white, #fff);
}
.zm-faq-heading strong { color: var(--zm-orange, #FF6A2B); font-weight: 800; }

.zm-faq-desc {
    margin: 0;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: 14px;
    line-height: 1.7;
    color: var(--gv-gray-300, #9A9A9A);
}

.zm-faq-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 40px;
}

.zm-faq-card {
    background: var(--gv-gray-800, #222222);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: background .3s ease;
}
.zm-faq-item--open .zm-faq-card {
    background: linear-gradient(160deg, var(--zm-orange-light, #FF8A52), var(--zm-orange, #FF6A2B));
}

.zm-faq-q-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
}

.zm-faq-qtext {
    margin: 0;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--gv-white, #fff);
    line-height: 1.4;
}

.zm-faq-toggle {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--gv-white, #fff);
    cursor: pointer;
    padding: 0;
}
.zm-faq-toggle svg { width: 18px; height: 18px; }
.zm-faq-vline { transition: opacity .25s ease; }
.zm-faq-item--open .zm-faq-vline { opacity: 0; }

.zm-faq-answer {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    padding: 0 22px;
    transition: max-height .4s cubic-bezier(.4, 0, .2, 1), opacity .3s ease, padding .3s ease;
}
.zm-faq-item--open .zm-faq-answer { opacity: 1; padding-bottom: 20px; }
.zm-faq-answer p a { color: var(--gv-white, #fff); text-decoration: underline; }
.zm-faq-answer p {
    margin: 0;
    font-family: var(--gv-font, 'Poppins', sans-serif);
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .92);
}

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */
@media (max-width: 1024px) {
    .zm-hero-title { font-size: clamp(22px, 5vw, 36px); }
    .zm-brands-grid { gap: 10px; }
    .zm-brand-card { padding: 8px 10px; border-radius: 12px; }
    .zm-fleet-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .zm-why-grid { grid-template-columns: repeat(2, 1fr); }

    /* .zm-how / .zm-who switch from the desktop overlay-on-image layout to
       a normal stacked flow here — there just isn't enough pictured panel
       at these widths to hold this much copy legibly no matter how small
       the font gets. The background image is dropped entirely rather than
       shown as a decorative crop — heading + cards, cleanly aligned, reads
       better on mobile than a short unexplained image strip. Same
       "no fixed height on text" safety principle carries over regardless. */
    .zm-how-media { padding-bottom: 24px; }
    .zm-how-media-img { display: none; }
    .zm-how-heading {
        position: static;
        max-width: none;
        margin: 32px 24px 0;
        text-align: center;
        font-size: clamp(20px, 4.5vw, 28px);
    }
    .zm-how-box {
        position: static;
        width: auto;
        margin: 16px 24px 0;
        padding: 24px;
        background: var(--gv-gray-900, #1A1A1A);
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 16px;
    }
    .zm-how-box:last-of-type { margin-bottom: 4px; }
    .zm-how-box p { font-size: 14.5px; line-height: 1.7; text-align: center; }

    .zm-who-media { padding-bottom: 24px; }
    .zm-who-media-img { display: none; }
    .zm-who-heading {
        position: static;
        width: auto;
        max-width: none;
        transform: none;
        margin: 32px 24px 0;
        padding: 0;
    }
    .zm-who-note {
        position: static;
        width: auto;
        transform: none;
        margin: 20px 24px 8px;
        padding: 24px;
        border-radius: 14px;
    }
    .zm-who-note p { font-size: 14.5px; line-height: 1.65; text-align: center; }

    .zm-abu-media { padding-bottom: 24px; }
    .zm-abu-media-img { display: none; }
    .zm-abu-content {
        position: static;
        width: auto;
        margin: 32px 24px 0;
        text-align: center;
    }
    .zm-abu-heading { font-size: clamp(20px, 4.5vw, 28px); }
    .zm-abu-content p { font-size: 14.5px; line-height: 1.7; text-align: center; }
    .zm-abu-content p + p { margin-top: 16px; }

    /* Unlike .zm-how/.zm-who/.zm-abu, this section keeps its photo on
       mobile — cropped to fill the card and darkened with a scrim so the
       centered text stays readable over it, rather than dropping to a
       flat black card. */
    .zm-what { padding: 40px 0; }
    .zm-what-media {
        aspect-ratio: auto;
        position: relative;
        width: auto;
        margin: 0 24px;
        border-radius: 20px;
        overflow: hidden;
    }
    .zm-what-media-img { display: block; }
    .zm-what-media-img::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(10, 10, 10, .5) 0%, rgba(10, 10, 10, .8) 55%, rgba(10, 10, 10, .95) 100%);
    }
    .zm-what-content {
        position: relative;
        top: auto;
        left: auto;
        z-index: 1;
        width: auto;
        padding: 40px 24px;
        text-align: center;
    }
    .zm-what-heading { font-size: clamp(20px, 4.5vw, 28px); text-align: center; }
    .zm-what-content p { font-size: 14.5px; line-height: 1.7; text-align: center; }
}

@media (max-width: 768px) {
    /* Brands: 3 per row, centred, so the 7th logo sits in the middle */
    .zm-brands-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px;
    }
    .zm-brand-card { flex: 0 0 calc((100% - 28px) / 3); }

    /* Portrait, purpose-built mobile banners (1080x1550) instead of the
       desktop landscape crossfade — sizing the hero to their exact ratio
       means background-size:cover (shared with desktop above) fits them
       perfectly with no cropping. */
    .zm-hero,
    .zm-hero-inner { min-height: 0; aspect-ratio: 1080 / 1550; }
    .zm-hero-bg-a { background-image: url('../../img/web/HomeMobileBannerA.webp'); }
    .zm-hero-bg-b { background-image: url('../../img/web/HomeMobileBannerB.webp'); }
    .zm-hero-bg-c { background-image: url('../../img/web/MobileHomeBannerC.webp'); }

    /* Matches where the current baked-in "Premium Car Lease in Dubai" text
       sits on MobileHomeBannerC.webp (~30% down, above the cars) — that
       baked text is slated for removal by the designer, but the file's
       dimensions stay the same, so this lands in the right spot either way. */
    .zm-hero-title {
        top: 30%;
        max-width: 85%;
        font-size: clamp(22px, 6.5vw, 32px);
    }

    .zm-hero-search-row { justify-content: center; }
    .zm-hero-cta { flex: 1 1 100%; }
    .zm-hero-search-pill { flex: 1 1 100%; }

    /* Dashes only make sense in the horizontal 3-across layout —
       dropped here rather than forced into an awkward vertical version. */
    /* Compact vertical timeline — swaps the desktop centered/stacked step
       (giant number, centered title/desc) for a left-aligned badge+text
       row so all 3 steps stay visible without the huge per-step height.
       Grid (not flex) lets the number badge span both text rows without
       needing a wrapper around title+desc in the markup. */
    .zm-process-grid { flex-direction: column; align-items: stretch; gap: 6px; }

    .zm-process-step {
        display: grid;
        grid-template-columns: 42px 1fr;
        grid-template-rows: auto auto;
        column-gap: 16px;
        row-gap: 4px;
        align-items: start;
        width: 100%;
        max-width: none;
        text-align: left;
    }
    .zm-process-num {
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: start;
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        line-height: 1;
        border-radius: 50%;
        background: linear-gradient(160deg, var(--zm-orange-light, #FF8A52), var(--zm-orange, #FF6A2B));
        color: var(--gv-black, #0A0A0A);
        position: relative;
        z-index: 1;
    }
    .zm-process-title {
        grid-column: 2;
        grid-row: 1;
        margin: 2px 0 0;
        font-size: 16px;
    }
    .zm-process-desc {
        grid-column: 2;
        grid-row: 2;
        max-width: none;
        font-size: 13px;
        line-height: 1.55;
    }
    /* Connector — the same .zm-process-dash elements the desktop layout
       uses as a horizontal dash between steps, restyled here as a short
       vertical line centered under the 42px badge: (42 - 2) / 2 = 20px. */
    .zm-process-dash {
        display: block;
        flex: 0 0 auto;
        width: 2px;
        height: 22px;
        margin: 2px 0 2px 20px;
        border-top: none;
        background: rgba(255, 255, 255, .18);
    }

    /* No form column to stretch-match once stacked — image gets its own
       fixed-ratio block instead. */
    .zm-contact-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "media"
            "desc"
            "form";
        row-gap: 0;
        column-gap: 0;
    }
    .zm-contact-heading {
        grid-area: media;
        align-self: center;
        justify-self: center;
        position: relative;
        z-index: 2;
        width: 100%;
        margin: 0;
        padding: 14px 20px;
        font-size: clamp(19px, 5.5vw, 24px);
        line-height: 1.3;
        text-align: center;
    }
    .zm-contact-media { grid-area: media; min-height: 0; aspect-ratio: 16 / 9; }
    .zm-contact-media::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom,
            transparent 0%,
            rgba(0, 0, 0, .35) 22%,
            rgba(0, 0, 0, .88) 38%,
            rgba(0, 0, 0, .88) 62%,
            rgba(0, 0, 0, .35) 78%,
            transparent 100%);
        pointer-events: none;
    }
    .zm-contact-desc { margin-top: 20px; }
    .zm-contact-row { grid-template-columns: 1fr; }

    .zm-faq-list { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .zm-hero-inner { padding-bottom: 28px; }
    .zm-hero-title { font-size: clamp(20px, 6.5vw, 28px); }
    .zm-hero-search-pill,
    .zm-hero-search-btn { height: 48px; }
    .zm-hero-search-btn { width: 38px; height: 38px; }

    .zm-brands { padding: 28px 0; }
    /* Same 2-per-row look as before, as a centred flex wrap so the
       odd last logo (Dongfeng) sits in the middle of its row */
    .zm-brands-grid { gap: 12px; width: 100%; box-sizing: border-box; }
    .zm-brand-card { flex: 0 0 calc((100% - 12px) / 2); border-radius: 12px; padding: 10px 12px; }

    .zm-fleet { padding: 40px 0; }
    .zm-fleet-grid { grid-template-columns: 1fr; gap: 16px; }

    .zm-why { padding: 40px 0; }
    .zm-why .zm-wrap { padding: 0 16px; }
    .zm-why-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .zm-why-card { aspect-ratio: auto; min-height: 170px; }
    .zm-why-card-front {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 8px;
        padding: 16px 10px;
    }
    .zm-why-icon { width: 40px; height: 40px; border-radius: 10px; }
    .zm-why-icon svg { width: 20px; height: 20px; }
    .zm-why-icon-ar { font-size: 12px; }
    .zm-why-front-title { font-size: 13px; line-height: 1.25; }
    .zm-why-card-back { padding: 18px 16px; gap: 6px; }
    .zm-why-back-title { font-size: 15px; }
    .zm-why-back-desc { font-size: 12px; line-height: 1.45; }

    .zm-reviews-track { padding: 0 20px; gap: 14px; }
    .zm-reviews-slide { width: 84vw; }

    .zm-how-heading { margin: 24px 16px 0; font-size: clamp(19px, 5.5vw, 24px); }
    .zm-how-box { margin: 14px 16px 0; padding: 20px; }
    .zm-how-box p { font-size: 13.5px; }

    .zm-who-heading { margin: 24px 16px 0; }
    .zm-who-heading-eyebrow { font-size: clamp(12px, 3.5vw, 15px); }
    .zm-who-heading-main { font-size: clamp(20px, 6vw, 26px); }
    .zm-who-note { margin: 16px 16px 6px; padding: 20px; }
    .zm-who-note p { font-size: 13.5px; }

    .zm-abu-content { margin: 24px 16px 0; }
    .zm-abu-heading { font-size: clamp(19px, 5.5vw, 24px); }
    .zm-abu-content p { font-size: 13.5px; }

    .zm-what-media { margin: 0 16px; }
    .zm-what-content { padding: 32px 20px; }
    .zm-what-heading { font-size: clamp(19px, 5.5vw, 24px); }
    .zm-what-content p { font-size: 13.5px; }
}

/* Extra-small phones (iPhone SE, older Android ~320-374px) — the 480px
   tweaks above still get tight at this width, so shrink further. */
@media (max-width: 380px) {
    .zm-why .zm-wrap { padding: 0 12px; }
    .zm-why-grid { gap: 8px; }
    .zm-why-icon { width: 36px; height: 36px; }
    .zm-why-icon svg { width: 18px; height: 18px; }
    .zm-why-front-title { font-size: 12px; }
    .zm-why-card { min-height: 160px; }
}