/* ==========================================================================
   Small Phones (Max-width: 575px)
   ========================================================================== */

@media (max-width: 575px) {

    /* 1. Global & Base */
    :root {
        --section-pad: 2.5rem 0;
    }
    .container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    .section-title.has-outline::before {
        left: -4px;
        top: -4px;
    }
    .btn {
        padding: 0.85rem 1.5rem;
        font-size: 0.85rem;
    }

    /* 2. Header & Navigation */
    /* No specific changes at this breakpoint */

    /* 3. Hero Section */
    .hero-title-clean {
        font-size: clamp(1.6rem, 9vw, 2.4rem);
        line-height: 1.2;
    }
    .hero-content-inner {
        padding: 0 0.5rem;
    }
    .hero-bottom-ui {
        left: 1.25rem;
        right: 1.25rem;
        bottom: 1.25rem;
    }
    .carousel-pill {
        width: 24px;
    }

    /* 4. Legacy / Pioneering */
    /* No specific changes at this breakpoint */

    /* 5. Equipment */
    .equipment-grid {
        flex-direction: column;
    }

    /* 6. Services & Directory */
    .service-card {
        min-width: 230px;
    }

    /* 7. Impact / Works */
    .impact-tile {
        min-height: 180px;
    }

    /* 8. Clients */
    /* 2 per row still works */
    .clients-grid {
        gap: 0.6rem;
    }
    .client-card {
        padding: 1.2rem 0.75rem;
    }
    .client-logo {
        max-height: 55px;
        max-width: 110px;
    }
    .clients-stat-bar {
        flex-direction: column;
    }
    .stat-divider {
        width: 60px;
        height: 1px;
    }

    /* 9. Who We Are (Values, Mission) */
    /* No specific changes at this breakpoint */

    /* 10. Sustainability */
    /* No specific changes at this breakpoint */

    /* 11. Contact & Drawer */
    .contact-drawer {
        max-width: 100%;
    }
    .contact-drawer-inner {
        padding: 1.75rem 1.25rem 2.5rem;
    }
    .contact-drawer-title {
        font-size: 1.6rem;
    }

    /* 12. Footer */
    .footer-top .brand-logo img.site-logo {
        height: 44px;
    }
    .site-footer {
        padding: 2.5rem 0 1.5rem;
    }

    /* Service Pages Responsiveness */
    .service-hero .container {
        padding-top: 100px !important;
        padding-bottom: 60px !important;
    }
    .hero-title-clean {
        font-size: 2.2rem !important;
    }
    .service-hero .lead {
        font-size: 1rem !important;
    }
    .service-intro h2 {
        font-size: 1.5rem !important;
    }
    .service-feature h2, .service-subservices h2, .service-capabilities h2, .service-action h2 {
        font-size: 1.75rem !important;
    }
    .service-quote .quote-text {
        font-size: 1.25rem !important;
    }
    .sub-service-card img {
        height: 200px !important;
    }

}