/* ==========================================================================
   PRODUCTION GRADE RESPONSIVE SYSTEM MEDIA QUERIES (REFACTORED)
   ========================================================================== */

@media (max-width: 1400px) {
    .hero-title { font-size: 3.8rem; }
    .container { padding: 0 3rem; }
    .header-container { padding: 1.5rem 3rem; }
}

@media (max-width: 1150px) {
    .hero-title { font-size: 3.2rem; letter-spacing: -1.5px; }
    .hero-grid { grid-template-columns: 1fr; gap: 4rem; text-align: center; }
    .hero-subtitle { margin: 0 auto 2.5rem auto; max-width: 650px; }
    .hero-cta-group { justify-content: center; }
    .hero-visual-wrapper { max-width: 500px; margin: 0 auto; height: 420px; width: 100%; }
    
    .services-mesh { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
    .director-grid { grid-template-columns: 1fr; gap: 4rem; text-align: center; }
    .portrait-glass-card { max-width: 440px; margin: 0 auto; height: 440px; }
    
    .contact-split-box { grid-template-columns: 1fr; gap: 4rem; }
    .contact-meta-panel { position: static; }
}

/* ==========================================================================
   EXPLICIT ULTRA-PREMIUM NAVIGATION INTERFACES FOR HANDHELDS (IMAGE 1 & 2 FIX)
   ========================================================================== */
@media (max-width: 900px) {
    .hamburger-menu { display: flex; }
    
    /* Transforming Side Drawer for Elite UI Presentation */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 290px;
        height: 100vh;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
        box-shadow: -10px 0 40px rgba(7, 19, 33, 0.05);
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 4rem 3rem;
        gap: 2.5rem;
        transition: cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
        z-index: 995;
    }
    
    .nav-menu.responsive-active {
        right: 0;
    }
    
    .nav-link {
        font-size: 1.3rem;
        font-weight: 600;
        width: 100%;
    }
    
    /* Hamburger Active Transformations Animation */
    .hamburger-menu.active .bar:nth-child(1) {
        transform: rotate(45deg) translate(2px, 2px);
    }
    .hamburger-menu.active .bar:nth-child(2) {
        opacity: 0;
    }
    .hamburger-menu.active .bar:nth-child(3) {
        transform: rotate(-45deg) translate(2px, -2px);
    }

    .header-container { padding: 1.2rem 2rem; }
    /* Micro Screen Allocation Fix */
    .header-actions .cta-premium { display: none; } /* Hide raw wide buttons on small screen frames to stop block overlapping */
    
    .stats-flex { grid-template-columns: repeat(2, 1fr); display: grid; gap: 3rem; text-align: center; }
    .footer-grid { grid-template-columns: 1fr; gap: 3rem; text-align: center; }
    .footer-brand-column p { margin: 0 auto; }
}

@media (max-width: 700px) {
    .hero-title { font-size: 2.5rem; }
    .services-mesh { grid-template-columns: 1fr; }
    .section-title { font-size: 2.2rem; }
    .testimonial-text { font-size: 1.15rem; }
    .timeline-step-block { flex-direction: column; text-align: center; gap: 1rem; }
    
    .contact-form-glass-wrapper { padding: 2rem; border-radius: 20px; }
    .contact-panel-title { font-size: 2.4rem; }
}

/* ==========================================================================
   CRITICAL COMPLIANCE FIX FOR SCREEN CONTAINER BLEEDING (IMAGE 3 & 4 FIX)
   ========================================================================== */
@media (max-width: 480px) {
    .container { padding: 0 1.5rem; }
    .header-container { padding: 1rem 1.5rem; }
    
    .hero-section { padding-top: 10rem; }
    .hero-title { font-size: 2.1rem; letter-spacing: -0.8px; line-height: 1.2; }
    .hero-subtitle { font-size: 1rem; margin-bottom: 2rem; }
    
    /* Clean Auto Stacking for CTA Links Block Element */
    .hero-cta-group { flex-direction: column; width: 100%; gap: 1rem; }
    .btn-primary-glow, .btn-secondary-outline { width: 100%; text-align: center; padding: 1rem 1.5rem; font-size: 1rem; }
    
    /* Absolute Scaling Constraint for Logo Infinite Marquees Grid Layer (Image 4 Alignment) */
    .marquee-section { padding: 3rem 0; max-width: 100vw !important; overflow: hidden; }
    .marquee-title { font-size: 0.75rem; padding: 0 1rem; margin-bottom: 1.5rem; line-height: 1.4; }
    .marquee-content { gap: 2.5rem; font-size: 1.25rem; }
    
    /* Floating Glass Cards Hidden Under 480px to Retain Clean UX Spaces */
    .glass-card-floating { display: none !important; }
    .hero-visual-wrapper { height: 280px; }
}

/* Extreme Micro Display Constraints */
@media (max-width: 360px) {
    .hero-title { font-size: 1.85rem; }
    .logo-text { font-size: 1.3rem; }
}