/* ============================================
   NOMAC - Responsive Design
   ============================================ */

/* ---------- Tablet (max-width: 1024px) ---------- */
@media (max-width: 1024px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .about-visual-frame {
        max-width: 500px;
        margin: 0 auto;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .works-grid {
        gap: 20px;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
}

/* ---------- Mobile (max-width: 768px) ---------- */
@media (max-width: 768px) {
    :root {
        --section-pad: clamp(60px, 10vw, 100px);
    }

    /* Navigation */
    .nav-links {
        display: none;
    }

    .nav-burger {
        display: flex;
    }

    /* Hero */
    .hero {
        min-height: 100vh;
        min-height: 100dvh;
    }

    .hero-title-word {
        margin: 0 5px;
    }

    .hero-tag {
        font-size: 0.65rem;
    }

    .hero-tag-line {
        width: 25px;
    }

    .hero-sub {
        font-size: 0.85rem;
        padding: 0 10px;
    }

    .hero-cta {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .btn {
        padding: 14px 30px;
        font-size: 0.75rem;
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }

    .hero-scroll {
        bottom: 25px;
    }

    /* Marquee */
    .marquee-inner {
        gap: 25px;
    }

    /* About */
    .about-stats {
        gap: 30px;
    }

    .about-visual-frame {
        max-width: 100%;
    }

    /* Works */
    .works-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* Philosophy */
    .philosophy-quote p {
        font-size: 1rem;
        line-height: 2;
    }

    .philosophy-mark {
        font-size: 3rem;
    }

    /* Contact */
    .contact-social {
        gap: 15px;
    }

    .social-link {
        width: 40px;
        height: 40px;
    }

    /* Footer */
    .footer-info p {
        font-size: 0.75rem;
    }
}

/* ---------- Small Mobile (max-width: 480px) ---------- */
@media (max-width: 480px) {
    .section-title {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    .about-lead {
        font-size: 1rem;
    }

    .about-stats {
        flex-direction: column;
        gap: 20px;
    }

    .about-stat {
        display: flex;
        align-items: baseline;
        gap: 10px;
    }

    .about-stat-label {
        margin-top: 0;
    }

    .service-card {
        padding: 25px 20px;
    }

    .service-card-tags {
        gap: 6px;
    }

    .service-card-tags span {
        font-size: 0.6rem;
        padding: 4px 8px;
    }

    .work-card-media {
        aspect-ratio: 16/9;
    }

    .philosophy {
        padding: 60px 0;
    }

    .form-input {
        font-size: 0.9rem;
    }
}

/* ---------- Landscape Mobile ---------- */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: 100px 0 60px;
    }

    .hero-title-word {
        font-size: 3rem;
    }

    .hero-scroll {
        display: none;
    }

    .mobile-menu-link {
        font-size: 1.5rem;
    }

    .mobile-menu-inner {
        gap: 15px;
    }
}

/* ---------- Large Desktop (min-width: 1600px) ---------- */
@media (min-width: 1600px) {
    :root {
        --container-max: 1600px;
    }

    .hero-title-word {
        font-size: 10rem;
    }

    .services-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ---------- Prefers Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .marquee-inner {
        animation: none;
    }

    .placeholder-anim {
        animation: none;
    }

    .reveal-up {
        opacity: 1;
        transform: none;
    }
}

/* ---------- Print ---------- */
@media print {
    .nav, .cursor, .cursor-follower, .noise-overlay, .loader,
    .hero-canvas, .hero-scroll, .marquee-section {
        display: none !important;
    }

    body {
        color: #000;
        background: #fff;
    }

    .section-title-accent {
        color: #000;
    }
}