@media (max-width: 767px) {
    body {
        font-size: 15px;
    }

    .container,
    .narrow,
    .readable {
        width: min(100% - 24px, var(--container));
    }

    .header-inner {
        min-height: 62px;
    }

    .desktop-nav {
        display: none;
    }

    .mobile-nav {
        display: block;
    }

    .brand span {
        font-size: 1rem;
    }

    .hero {
        padding: 32px 0 20px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
    }

    h1 {
        font-size: 2rem;
    }

    .section {
        padding: 32px 0;
    }

    .card {
        padding: 18px;
    }

    .vehicle-image,
    .vehicle-result-image,
    .vehicle-profile-image {
        width: 100%;
        height: auto;
    }

    .profile-layout {
        grid-template-columns: 1fr;
    }

    .profile-sidebar {
        position: static;
    }

    .profile-main-photo {
        width: 160px;
        height: 160px;
    }

    .dashboard-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .activation-actions,
    .activation-actions .btn {
        width: 100%;
    }

    .professional-layout {
        grid-template-columns: 1fr;
    }

    .professional-summary {
        position: static;
    }

    .client-dashboard-grid,
    .saved-address-grid {
        grid-template-columns: 1fr;
    }

    .segmented-control {
        grid-template-columns: 1fr;
    }

    .ride-search-card {
        max-width: none;
    }

    .results-filter,
    .result-card {
        grid-template-columns: 1fr;
    }

    .result-photo {
        width: 100%;
        height: auto;
    }

    .result-action .btn,
    .load-more-wrap .btn {
        width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }

    .desktop-nav {
        gap: 16px;
    }
}

@media (min-width: 1024px) {
    .compact-hero {
        min-height: 360px;
        display: flex;
        align-items: center;
    }
}