/* Mobile Devices */
@media (max-width: 768px) {
    :root {
        --spacing-xl: 4rem;
        --spacing-lg: 3rem;
    }

    .header-container {
        flex-direction: column;
        gap: 1rem;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-section {
        padding-top: 180px;
        /* Increased to account for stacked header + button */
    }

    .grid-4,
    .grid-3,
    .benefits-list {
        grid-template-columns: 1fr;
    }

    /* Authority Grid Mobile */
    .authority-grid {
        flex-direction: column-reverse;
        /* Stack image below text usually, or reverse to have image on top? Let's try column-reverse to put image above on mobile if defined? No, flex-direction:column puts items top-to-bottom. If we want image first, we'd need to reorder or put image first in HTML. 
        Actually, usually image is secondary to headline. Let's stack vertically.
        Wait, flex-direction: column-reverse puts the last item first? No, last item at top.
        HTML order: Text Col (1), Image Col (2).
        column: Text then Image.
        column-reverse: Image then Text.
        Let's try column-reverse to showcase the person first? Or Text first? Let's check user preference implicitly.
        Let's stick to standard flow: Text then Image on mobile. So just flex-direction: column.
        */
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }

    .authority-text-col {
        text-align: center;
    }

    .stats-grid {
        justify-content: center;
    }

    .stat-item {
        align-items: center;
    }

    .authority-img-col {
        width: 100%;
        max-width: 320px;
        /* Limit width */
        margin: 0 auto;
    }
}