/* ==========================================================================
   Mobile (Max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {

    /* 1. Global & Base */
    :root {
        --section-pad: 3rem 0;
    }
    .section-title {
        font-size: clamp(1.8rem, 9vw, 3.5rem);
    }
    .section-title.has-outline::before {
        left: -6px;
        top: -6px;
    }
    .hazard-stripe {
        height: 12px;
    }

    /* 2. Header & Navigation */
    .site-header {
        height: 70px;
    }
    .brand-logo img.site-logo {
        height: 52px;
    }
    .mobile-drawer-backdrop,
    .mobile-drawer {
        top: 68px;
        height: calc(100vh - 68px);
    }
    /* Hide desktop nav, show mobile toggle */
    .main-nav {
        display: none !important;
    }
    .contact-actions {
        display: none !important;
    }
    .mobile-menu-toggle {
        display: flex !important;
    }

    /* 3. Hero Section */
    .hero {
        min-height: 100svh;
    }
    .hero-content-clean {
        padding: 0 1.5rem;
    }
    .hero-eyebrow-clean {
        font-size: 0.75rem;
        letter-spacing: 0.1em;
    }
    .hero-title-clean {
        font-size: clamp(1.8rem, 7vw, 2.8rem);
    }
    .hero-desc-clean {
        font-size: 0.95rem;
        margin-bottom: 2rem;
    }

    /* 4. Legacy / Pioneering */
    .legacy-title {
        font-size: clamp(1.8rem, 9vw, 3rem);
    }
    .legacy-desc {
        font-size: 1rem !important;
    }

    /* 5. Equipment */
    .equip-card {
        padding: 1.5rem 1rem;
    }
    .equip-bg {
        font-size: 3rem;
    }
    /* Disable hover scaling on mobile */
    .equip-card:hover .equip-bg-img {
        transform: none;
    }

    /* 6. Services & Directory */
    .services-scroll-container {
        padding-left: 1.5rem;
    }
    .service-card {
        min-width: 260px;
    }
    .card-title {
        font-size: 1.2rem;
    }
    .svc-card-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    /* Redesign .svc-card for Touch (No Hover) */
    .svc-card {
        flex-direction: column !important;
        height: auto !important; /* Allow height to grow */
        min-height: 280px;
        padding-bottom: 1rem;
    }
    .svc-card-img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
    .svc-card-title {
        font-size: 1.1rem;
    }
    .svc-card-sub {
        font-size: 0.8rem;
    }
    /* Remove "VIEW SERVICES" cue */
    .svc-hover-cue {
        display: none !important;
    }
    /* Permanently show the dropdown list */
    .svc-dropdown {
        max-height: none !important;
        opacity: 1 !important;
        padding-bottom: 0 !important;
        padding-top: 0.5rem;
    }
    .svc-dropdown ul li {
        font-size: 0.7rem; /* Smaller text to fit */
        padding: 0.35rem 0;
    }
    .svc-dropdown ul li:hover {
        padding-left: 0; /* Remove hover indent */
        color: #fff;
    }

    /* 7. Impact / Works */
    /* Permanently show overlay on touch devices */
    .impact-overlay {
        opacity: 1 !important;
        transform: none !important;
        /* Add a permanent gradient so text is readable */
        background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
    }
    /* Disable image scaling on tap/hover */
    .impact-tile:hover .impact-img {
        transform: none;
    }

    /* 8. Clients */
    .clients-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .client-card {
        padding: 1.5rem 1rem;
        gap: 0.75rem;
    }
    .client-logo {
        max-height: 65px;
        max-width: 140px;
    }
    .client-name {
        font-size: 0.6rem;
    }
    .clients-header {
        max-width: 100%;
    }
    /* Disable gold background on touch/hover */
    .client-card:hover {
        background: rgba(255, 255, 255, 0.02);
    }
    .client-card:hover .client-logo {
        transform: none;
        filter: grayscale(100%) opacity(0.7);
    }

    /* 9. Who We Are (Values, Mission, Testimonials) */
    .mission-vision .lead {
        font-size: 1rem;
    }
    .spec-list-item {
        padding: 1rem 0;
    }
    .testimonial-card {
        padding: 2rem 1.5rem;
    }
    .testimonial-card .quote {
        font-size: 1rem;
    }

    /* 10. Sustainability */
    .sustain-img-wrapper img {
        width: 100%;
    }
    .spec-overlay {
        display: none !important;
    }

    /* 11. Contact & Drawer */
    .spec-form {
        padding: 0;
    }
    .contact-title {
        font-size: clamp(1.8rem, 8vw, 3rem);
    }

    /* 12. Footer */
    .footer-nav {
        gap: 0.5rem 1rem;
        font-size: 0.85rem;
    }
    .footer-certs {
        font-size: 0.75rem;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 0.5rem;
    }

    /* Service Pages Responsiveness */
    .service-hero .container {
        padding-top: 120px !important;
        padding-bottom: 80px !important;
    }
    .hero-title-clean {
        font-size: 3rem !important;
    }
    .service-hero .lead {
        font-size: 1.1rem !important;
    }
    .service-intro h2 {
        font-size: 1.8rem !important;
    }
    .service-feature h2, .service-subservices h2, .service-capabilities h2, .service-action h2 {
        font-size: 2rem !important;
    }
    .service-quote .quote-text {
        font-size: 1.5rem !important;
    }
    .sub-service-card img {
        height: 250px !important;
    }

}