/* === Mobile gutters + smaller type =================================== */
@media (max-width: 650px) {

    :root {
        /* 5–6 vw ≈ 20-24 px on common phones */
        --mobile-gutter: 5.5vw;
    }

    /* 1️⃣ Global font shrink */
    body {
        font-size: 15px;
    }

    /* was 17 px */

    /* 2️⃣ Consistent side-padding */
    .container,
    /* already has 10 px pad but we want more on tiny screens */
    .section,
    .hero-section,
    .hero-content-modern,
    .homepage-hero,
    .footer-container,
    .faq-section,
    .contact-details {
        padding-left: var(--mobile-gutter) !important;
        padding-right: var(--mobile-gutter) !important;
    }

    /* 3️⃣ Tighter hero headline + lead */
    .hero-section h1,
    .hero-content-modern h1,
    .hero-title {
        font-size: 1.45rem !important;
        line-height: 1.25;
    }

    /* was 2.7 rem desktop & 1.6 rem mobile */
    .hero-section p,
    .hero-content-modern p,
    .hero-lead {
        font-size: 0.96rem !important;
    }

    /* 4️⃣ Slightly smaller section headings */
    .section-title {
        font-size: 1.25rem !important;
    }

    /* was 1.36–2.1 rem */

    /* 5️⃣ Buttons & nav links get subtler too */
    .btn,
    .nav-menu .nav-link {
        font-size: 0.87rem !important;
        padding: .55rem 1rem !important;
    }
}

/* Ultra-small handsets (≤ 400 px) — a hair more gutter & type trim */
@media (max-width: 400px) {
    :root {
        --mobile-gutter: 6vw;
    }

    body {
        font-size: 14px;
    }
}