/* ============================================================
   Responsive Styles
   ============================================================ */

/* ------------------------------------------------------------
   Large tablets / small laptops (≤ 1024px)
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .footer__grid {
        grid-template-columns: 1fr 1fr;
    }
    .service-cards--4 {
        --card-cols: 2;
    }
}

/* ------------------------------------------------------------
   Tablets (≤ 900px)
   ------------------------------------------------------------ */
@media (max-width: 900px) {
    .hero__inner,
    .about__inner,
    .smart__inner,
    .coverage__inner,
    .partners__inner,
    .future__inner,
    .about-page__grid,
    .fleet-page__grid,
    .tech-page__grid,
    .partners-page__grid {
        grid-template-columns: 1fr;
    }
    .about__media,
    .smart__media,
    .coverage__media,
    .partners__media,
    .future__media {
        order: 2;
    }
    .smart__features {
        grid-template-columns: 1fr;
    }
    .contact-page__grid {
        grid-template-columns: 1fr;
    }
    .primary-nav {
        position: absolute;
        top: var(--header-h);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--color-primary);
        padding: 1rem 1.5rem 1.5rem;
        box-shadow: var(--shadow-lg);
        display: none;
    }
    .primary-nav.is-open {
        display: flex;
    }
    .primary-nav__list {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }
    .primary-nav__item,
    .primary-nav__item--dropdown {
        width: 100%;
    }
    .primary-nav__link {
        display: block;
        padding: 0.7rem 0;
        width: 100%;
    }
    .dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: transparent;
        padding: 0 0 0 1rem;
    }
    .dropdown a {
        color: rgba(255, 255, 255, 0.85);
    }
    .dropdown a:hover {
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
    }
    .primary-nav__actions {
        margin-top: 1rem;
        flex-direction: column;
        align-items: stretch;
        gap: 0.8rem;
    }
    .nav-cta {
        text-align: center;
    }
    .nav-toggle {
        display: flex;
    }
}

/* ------------------------------------------------------------
   Mobile (≤ 640px)
   ------------------------------------------------------------ */
@media (max-width: 640px) {
    .section {
        padding: 3rem 0;
    }
    .hero {
        padding: 4.5rem 0;
        min-height: auto;
    }
    .hero__title {
        font-size: 2rem;
    }
    .hero__content {
        text-align: center;
        margin: 0 auto;
    }
    .hero__actions,
    .hero__stats {
        justify-content: center;
    }
    .hero__stats {
        gap: 1.5rem;
    }
    .section-title {
        font-size: 1.6rem;
    }
    .hero__stats {
        gap: 1.2rem;
    }
    .hero__stat strong {
        font-size: 1.4rem;
    }
    .why-grid {
        grid-template-columns: 1fr;
    }
    .service-cards--4,
    .service-cards--3,
    .service-cards--2 {
        --card-cols: 1;
    }
    .footer__grid {
        grid-template-columns: 1fr;
    }
    .footer__bottom {
        flex-direction: column;
        text-align: center;
    }
    .form-row--2 {
        grid-template-columns: 1fr;
    }
    .about-cards {
        grid-template-columns: 1fr;
    }
    .cta-banner__inner {
        flex-direction: column;
        text-align: center;
    }
    .brand__tagline {
        display: none;
    }
}