/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 1200px) {
    .expertise-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .hero-content-overlay {
        top: clamp(120px, 18vh, 200px);
        left: var(--page-gutter);
        width: min(720px, calc(100vw - (var(--page-gutter) * 2)));
        max-width: 720px;
        padding: 2rem;
    }
    
    .hero-video-name h1 {
        font-size: clamp(3rem, 8vw, 6rem);
    }
    
    .philosophy-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

@media (max-width: 768px) {
    :root {
        --page-gutter: 2rem;
    }
    
    .nav {
        padding: 1.5rem 2rem;
    }
    
    .hero-content-overlay {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
        margin: 2rem;
        max-width: 100%;
        padding: 2rem;
    }
    
    .hero-title {
        font-size: 1.75rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .hero-cta-buttons {
        flex-direction: column;
    }
    
    .hero-video-name {
        padding: 1rem var(--page-gutter) 1.5rem;
    }
    
    .hero-video-name h1 {
        font-size: clamp(3rem, 12vw, 5rem);
        text-align: left;
        padding-left: 0;
    }
    
    .stats-banner {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 3rem 2rem;
    }
    
    .philosophy-section {
        padding: 4rem 2rem;
    }
    
    .philosophy-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .work-process-section {
        padding: 4rem 2rem;
    }
    
    .process-step {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .step-number {
        font-size: 2.5rem;
    }
    
    .expertise, .featured-work, .cta {
        padding: 4rem 2rem;
    }
    
    .expertise-grid {
        grid-template-columns: 1fr;
    }
    
    .footer {
        padding: 3rem 2rem;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }
    
    .footer-links {
        grid-template-columns: 1fr;
    }
    
    .cursor-frame-square, .cursor-circle, .cursor-dot {
        display: none !important;
    }
    
    .video-blur-layer .hero-video {
        filter: none;
    }
    
    .video-reveal-layer {
        display: none;
    }
    
    body {
        cursor: auto !important;
    }
}

/* Mobile Menu Overlay Responsive */
@media (max-width: 768px) {
    .menu-overlay {
        top: 70px;
        right: 30px;
        width: 60%;
        height: 60vh;
    }
    
    .menu-link {
        font-size: 28px;
    }

    .menu-arrow {
        width: 30px;
        height: 30px;
    }

    .vertical-menu {
        padding: 0 30px 30px 30px;
        gap: 20px;
    }
}