/* ============================================== 
   MOBILE STATS & LOGOS FIX - HIGHEST PRIORITY
   ============================================== */

@media (max-width: 1024px) {

    /* 0. Section Wrapper - Add screen gutters */
    section.stats-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* 1. Stats Container - Full width to match other sections */
    #stats .stats-container,
    .stats-container {
        margin: 0 !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-top: 30px !important;
        padding-bottom: 30px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. NUCLEAR DIVIDER REMOVAL - Ultra specific */
    #stats .stats-container .stat-item::after,
    .stats-container .stat-item::after,
    .stats-container .stat-item:not(:last-child)::after,
    .stat-item::after,
    .stat-item::before {
        display: none !important;
        content: none !important;
        width: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
        background: none !important;
    }

    /* 3. Stats Grid - Centered */
    .stats-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: 1fr 1fr !important;
        gap: 20px !important;
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Client logos - FULL WIDTH ALIGNMENT */
    .clients-section {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* 4. Client Logos - MAXIMUM SIZE */
    .client-logo img {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: 120px !important;
        object-fit: contain !important;
        transform: scale(1.5) !important;
        /* 1.5x larger */
    }

    /* 5. Immersive Logo - Extra scaling */
    .client-logo[data-client="immersive"] img {
        transform: scale(2.0) !important;
        /* 2x for immersive */
    }

    .client-logo {
        padding: 15px 8px !important;
        /* Reduced padding since logos are bigger */
        min-height: 100px !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Grid adjustments */
    .clients-grid {
        gap: 10px !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* Hide Cape Town logo on mobile to ensure even grid (no orphan) */
    .client-logo[data-client="cape-town"] {
        display: none !important;
    }

    /* Fix spacing for 'Ready to create...' text */
    .clients-text {
        margin-top: 50px !important;
        margin-bottom: 30px !important;
        display: block !important;
    }

    /* Increase Section Titles by 50% on Mobile - NUCLEAR SPECIFICITY */
    body .section-title,
    section .section-title,
    h2.section-title,
    .section-title {
        font-size: 52px !important;
        /* Fixed large size for mobile */
        line-height: 1.1 !important;
        margin-bottom: 20px !important;
    }

    /* Adjust subtitle to match */
    .section-subtitle {
        font-size: 16px !important;
        margin-bottom: 40px !important;
    }

    /* ============================================== 
       HERO SECTION - SURGICAL BALANCE FIX
       ============================================== */

    /* 1. Increase Photo Size to 100% (max width) */
    #home .photo-container,
    .photo-container {
        width: 90vw !important;
        height: 90vw !important;
        max-width: 440px !important;
        max-height: 440px !important;
        margin: 0 auto 30px !important;
        /* Increased breathing room */
    }

    /* 2. Increase Name Size (Forcefully) */
    #home .hero-name,
    .hero-name {
        font-size: 46px !important;
        /* Balanced large size */
        line-height: 1.1 !important;
        margin-bottom: 15px !important;
        /* Tighter to title */
        letter-spacing: -0.02em !important;
        width: 100% !important;
        display: block !important;
    }

    /* 3. Tighten Title Spacing */
    #home .hero-titles,
    .hero-titles {
        font-size: 14px !important;
        margin-bottom: 20px !important;
        line-height: 1.4 !important;
    }

    /* 4. Hero Container Spacing - Balanced */
    #home .hero-container,
    .hero-container {
        padding-top: 110px !important;
        /* Perfect balance */
        padding-bottom: 50px !important;
        /* Perfect balance */
        gap: 0 !important;
        /* Remove grid gap if any */
        min-height: auto !important;
    }

    /* ============================================== 
       GLOBAL SECTION SPACING NORMALIZER
       ============================================== */

    /* Standardize ALL section padding */
    .clients-section,
    .projects-section,
    .showreel-section,
    .about-section,
    .expertise-section,
    .press-section,
    .contact-section {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin: 0 !important;
    }

    /* Stats container - Full width like other sections */
    .stats-container {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Remove extra margins that might double up */
    .section-title {
        margin-top: 0 !important;
    }
}