/* ===================================================================
   Batch 2 — reference-fidelity refinements
   1) Public footer information architecture (brand + Pages + Utility Pages)
   2) Home header overlay + full-bleed hero
   3) Fleet carousel card ratio
   4) How-it-works panel typography rhythm
   5) Mobile statistics stacking in Driving excellence
   ================================================================== */

/* ---------- 1. Footer: two link groups, wider utility column ---------- */
.footer-cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
    gap: 32px;
}

.footer-col-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 26px;
}

.footer-col-split > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.site-footer .footer-col a {
    font-size: 14px;
    line-height: 1.6;
}

.site-footer .footer-col p {
    font-size: 14px;
    line-height: 1.7;
}

/* ---------- 2. Home: header over hero, hero flush to the viewport ---------- */
html.home-shell .site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
    backdrop-filter: none;
    z-index: 40;
}

html.home-shell .site-header .brand-name {
    color: #FFFFFF;
}

html.home-shell .site-header .nav-pill {
    background: rgba(20, 21, 15, .82);
    border-color: rgba(255, 255, 255, .14);
}

html.home-shell .site-header .nav-link {
    color: #EDEDE6;
}

html.home-shell .site-header .nav-link.is-active {
    color: #F2E34C;
}

html.home-shell .hero-full {
    margin: 0;
    padding: 0;
}

html.home-shell .hero-full__frame {
    margin: 0;
    border-radius: 0;
    min-height: clamp(560px, 88vh, 880px);
}

html.home-shell .hero-full__inner {
    padding-top: clamp(96px, 13vh, 150px);
    padding-bottom: clamp(40px, 6vh, 80px);
    padding-left: max(24px, calc((100% - 1240px) / 2));
    padding-right: max(24px, calc((100% - 1240px) / 2));
}

html.home-shell .hero-full__title {
    color: #FFFFFF;
    text-shadow: 0 2px 24px rgba(10, 12, 8, .28);
}

/* ---------- 3. Fleet carousel: about 2.2 cards visible on desktop ---------- */
.fleet-card {
    flex: 0 0 calc((100% - 24px) / 2.2);
}

/* ---------- 4. How it works panel: two-line heading, roomier steps ---------- */
.how__panel {
    padding: clamp(28px, 3.4vw, 48px);
}

.how__panel > h2,
.how__panel .how-title {
    font-size: clamp(30px, 2.7vw, 40px);
    line-height: 1.12;
    max-width: 12ch;
    letter-spacing: -.02em;
    margin-bottom: 8px;
}

.how__panel .how-step {
    margin-top: 26px;
}

.how__panel .how-step p {
    max-width: 44ch;
    line-height: 1.62;
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
    .fleet-card {
        flex: 0 0 calc((100% - 20px) / 2);
    }
}

@media (max-width: 900px) {
    .footer-cols {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}

@media (max-width: 860px) {
    html.home-shell .hero-full__frame {
        min-height: clamp(420px, 70vh, 580px);
    }

    html.home-shell .hero-full__inner {
        padding-top: 92px;
    }

    html.home-shell .hero-full__frame::after {
        background: linear-gradient(180deg, rgba(12, 13, 10, .70) 0%, rgba(12, 13, 10, .44) 46%, rgba(12, 13, 10, .64) 100%);
    }

    .fleet-card {
        flex: 0 0 100%;
    }
}

@media (max-width: 620px) {
    .site-footer {
        margin: 16px 16px 26px;
        border-radius: 26px;
        overflow: hidden;
    }

    .site-footer .footer-top {
        padding-top: 32px;
    }

    .site-footer .container {
        padding-left: 22px;
        padding-right: 22px;
    }

    .footer-col-split {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .excellent__stats {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
}