/* Mobile Overrides - Standardizing Mobile Experience */

@media screen and (max-width: 968px) {

    /* -----------------------------------------------------------
     GLOBAL RESET & PRESETS
     ----------------------------------------------------------- */
    :root {
        --container-padding: 24px;
        /* Increased slightly for better breathing room */
        --section-spacing: 60px;
        --header-height-mobile: 70px;
    }

    /* Prevent horizontal overflow */
    html,
    body {
        overflow-x: hidden;
        width: 100%;
        position: relative;
        -webkit-text-size-adjust: 100%;
    }

    /* Universal Image Fix */
    img {
        max-width: 100%;
        height: auto;
    }

    .container {
        padding-left: var(--container-padding);
        padding-right: var(--container-padding);
        width: 100%;
        max-width: 100%;
    }

    /* -----------------------------------------------------------
     TYPOGRAPHY SCALE
     ----------------------------------------------------------- */
    .display-text {
        font-size: 2.25rem !important;
        /* Reduced for better fit on small screens */
        line-height: 1.2;
        letter-spacing: -0.01em;
        word-break: break-word;
    }

    .section-title {
        font-size: 2rem !important;
        text-align: center;
        /* Generally center titles on mobile */
    }

    h1 {
        font-size: 2.25rem !important;
    }

    h2 {
        font-size: 1.8rem !important;
    }

    h3 {
        font-size: 1.5rem !important;
    }

    .lead-text {
        font-size: 1rem !important;
        line-height: 1.6;
        max-width: 100%;
        text-align: justify;
        /* Optional, but standard left or center is usually better */
        text-align: center;
    }

    p {
        font-size: 1rem;
        line-height: 1.6;
    }

    /* -----------------------------------------------------------
     HEADER & NAVIGATION
     ----------------------------------------------------------- */
    .site-header {
        height: var(--header-height-mobile);
        background-color: rgba(255, 255, 255, 0.95);
        /* Nearly opaque for legibility */
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .header-inner {
        height: 100%;
        justify-content: space-between;
        padding: 0 20px;
    }

    .logo img {
        height: 28px;
        /* Slightly smaller */
        width: auto;
        filter: invert(1);
        /* Ensure logo is dark if background is white? 
                          Original CSS: .logo img { filter: brightness(0) invert(1) } -> White?
                          Wait. On Desktop: .site-header is transparent. Logo matches background.
                          Actually, check Desktop CSS:
                          .logo img { filter: brightness(0) invert(1) } -> Makes it White.
                          .logo:hover img { filter: none } -> Original color.
                          
                          If I make header white background on mobile, I need the logo to be DARK (Original).
                          So I need to RESET the filter.
                       */
        filter: none !important;
    }

    /* Hide Desktop Nav */
    .nav-links {
        display: none !important;
    }

    /* CTA Button adjustments */
    .site-header .btn {
        padding: 8px 16px;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    /* -----------------------------------------------------------
     HERO SECTION
     ----------------------------------------------------------- */
    .hero {
        padding-top: 140px;
        padding-bottom: 60px;
        height: auto;
        min-height: auto;
        background-attachment: scroll;
        /* Use linear gradient to ensure text readability if image fails or is messy */
        background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(/assets/hero-image.png);
    }

    /* Performance optimization: remove blur on mobile hero background if needed */
    .hero:before {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: transparent;
        /* We handled darkening in background-image */
    }

    .hero-content.centered {
        text-align: center;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero .display-text {
        margin-bottom: 16px;
        font-size: 2.5rem !important;
        /* Keep Hero slightly larger */
    }

    .hero-body {
        display: none !important;
    }

    .cta-group {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .cta-group .btn {
        width: 100%;
        max-width: 100%;
    }

    /* -----------------------------------------------------------
     DISCOVERY SECTION (VIDEOS)
     ----------------------------------------------------------- */
    .discovery-section {
        padding: 40px 0;
    }

    .discovery-header {
        margin-bottom: 32px;
    }

    .discovery-header h2 {
        text-align: center;
    }

    .discovery-video-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    /* Phone Portrait */
    @media (max-width: 480px) {
        .discovery-video-grid {
            grid-template-columns: 1fr !important;
            /* Stack videos on phone to see them properly */
            max-width: 320px;
            /* Limit width */
            margin: 0 auto;
        }
    }

    .video-card {
        border-radius: 16px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    /* -----------------------------------------------------------
     FEATURE SECTION
     ----------------------------------------------------------- */
    .feature-section {
        padding: 20px 0;
    }

    .feature-section .container {
        padding: 0 16px;
    }

    .feature-card {
        padding: 40px 24px;
        border-radius: 24px;
        /* Ensure text color is correct since card is likely dark */
        text-align: center;
    }

    .feature-grid {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .feature-text {
        order: 1;
        /* Text first */
    }

    .feature-image {
        order: 2;
        /* Image second */
    }

    .feature-text h2 {
        font-size: 1.75rem;
        margin-bottom: 16px;
    }

    .feature-text p {
        margin-bottom: 24px;
        font-size: 0.95rem;
    }

    .feature-text .btn {
        width: 100%;
    }

    /* -----------------------------------------------------------
     CLIENTS & SERVICES
     ----------------------------------------------------------- */
    /* Clients */
    .client-slider {
        margin-top: 10px;
    }

    .client-logo {
        flex: 0 0 120px;
        height: 70px;
    }

    .client-logo img {
        max-height: 80%;
    }

    /* Services */
    .services-slider {
        padding: 10px 0 30px;
    }

    .services-track {
        gap: 20px;
    }

    .service-card {
        flex: 0 0 260px;
        padding: 24px 20px;
        border-radius: 16px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
        /* Slight shadow for depth */
        background: #fff;
        /* Ensure contrast */
        border: 1px solid rgba(0, 0, 0, 0.05);
    }

    /* -----------------------------------------------------------
     CONTACT SECTION
     ----------------------------------------------------------- */
    .contact-section {
        background-attachment: scroll;
        padding: 60px 0;
        /* Ensure background image is covered or use color if image is heavy */
    }

    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 40px;
    }

    .contact-info {
        text-align: center;
        order: 2;
        /* Info second (after form) */
    }

    .contact-form-container {
        order: 1;
        /* Form first */
    }

    .contact-info .display-text {
        font-size: 2rem !important;
    }

    .social-channels {
        margin-top: 30px;
    }

    .channel-btn {
        width: 100%;
        padding: 14px 24px;
    }

    /* Form */
    .contact-form-container {
        padding: 24px 20px;
        border-radius: 20px;
        order: 1;
        /* Explicitly first */
    }

    .form-group-row {
        grid-template-columns: 1fr !important;
        gap: 16px;
        display: flex;
        flex-direction: column;
    }

    .form-group {
        margin-bottom: 16px;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        padding: 14px;
        font-size: 16px;
        /* Prevents auto-zoom on iPhone */
    }

    /* -----------------------------------------------------------
     FOOTER
     ----------------------------------------------------------- */
    .site-footer {
        padding: 40px 0;
        text-align: center;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 40px;
    }

    .footer-brand,
    .footer-col {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}