@import url('variables.css');

@media (max-width: 1200px) {
    .nav-menu {
        gap: 0.8rem;
    }
}

@media (max-width: 1024px) {
    .primary-header {
        height: auto;
    }
    .nav-menu {
        position: fixed;
        inset: var(--header-height) 0 auto;
        flex-direction: column;
        padding: 1.5rem;
        background: rgba(2, 10, 26, 0.95);
        transform: translateY(-120%);
        transition: transform var(--animate-speed-fast);
    }
    .nav-menu.open {
        transform: translateY(0);
    }
    .hamburger {
        display: flex;
    }
    .side-quick-nav {
        display: none;
    }
    .grid-3,
    .grid-4,
    .grid-2 {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
    .contact-cta {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .hero {
        grid-template-columns: 1fr;
    }
    .hero-content,
    .hero-visual {
        padding: 3rem 1.5rem;
    }
    .hero-meta {
        flex-direction: column;
    }
    .news-grid {
        columns: 1 100%;
    }
}

@media (max-width: 576px) {
    .section {
        padding: 3.5rem 0;
    }
    .section-heading {
        font-size: 1.8rem;
    }
    .section-subtitle {
        font-size: 1rem;
    }
    .floating-inquiry {
        width: 58px;
        height: 58px;
        right: 20px;
        bottom: 20px;
    }
}