/* ═══════════════════════════════════════════════
   NUMORO — Responsive Styles
   Mobile-first breakpoints
   ═══════════════════════════════════════════════ */

/* ─── Max 1200px — Large tablets / small desktops ─── */
@media (max-width: 1200px) {
    .mandates-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
}

/* ─── Max 1024px — Tablets ─── */
@media (max-width: 1024px) {
    .nav-list {
        gap: 20px;
    }
    
    .nav-item a {
        font-size: 12px;
    }
    
    .process-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .culture-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .solutions-intro-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* ─── Max 900px — Small tablets ─── */
@media (max-width: 900px) {
    .mandates-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mandates-grid .mandate-card:last-child {
        grid-column: 1 / -1;
    }
    
    .solutions-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .solutions-grid .solution-card:last-child {
        grid-column: 1 / -1;
    }
    
    .insights-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .insights-grid .insight-card:last-child {
        grid-column: 1 / -1;
    }
    
    .feedback-grid {
        grid-template-columns: 1fr;
    }
    
}

/* ─── Max 768px — Mobile landscape / large phones ─── */
@media (max-width: 768px) {
    /* Header mobile nav */
    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 360px;
        height: 100vh;
        background: var(--navy-deep);
        padding: 100px 40px 40px;
        transition: right var(--speed) var(--ease-out);
        z-index: 999;
    }
    
    .main-nav.open {
        right: 0;
    }
    
    .nav-list {
        flex-direction: column;
        gap: 0;
    }
    
    .nav-item a {
        display: block;
        padding: 14px 0;
        font-size: 15px;
        color: var(--white) !important;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    
    .nav-item a:hover {
        color: var(--lime) !important;
    }
    
    .header-cta {
        display: none;
    }
    
    .menu-toggle {
        display: block;
    }
    
    /* Mobile overlay */
    .nav-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        opacity: 0;
        visibility: hidden;
        transition: all var(--speed) var(--ease-smooth);
        z-index: 998;
    }
    
    .nav-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    
    /* Sections */
    .mandates-grid {
        grid-template-columns: 1fr;
    }
    
    .mandates-grid .mandate-card:last-child {
        grid-column: auto;
    }
    
    .mandate-card {
        min-height: auto;
    }
    
    /* Show hover content always on mobile */
    .mandate-hover {
        position: relative;
        inset: auto;
        opacity: 1;
        transform: none;
        padding: 12px 0 0;
    }
    
    .mandate-card:hover .mandate-front {
        opacity: 1;
        transform: none;
    }
    
    .mandate-hover p {
        text-align: left;
        font-size: 14px;
    }
    
    .solutions-grid {
        grid-template-columns: 1fr;
    }

    .solutions-grid .solution-card,
    .solutions-grid .solution-card:last-child {
        grid-column: auto;
    }
    
    .insights-grid {
        grid-template-columns: 1fr;
    }
    
    .insights-grid .insight-card:last-child {
        grid-column: auto;
    }
    
    .insight-image {
        height: 160px;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: center;
        justify-items: center;
    }
}

/* ─── Max 480px — Small phones ─── */
@media (max-width: 480px) {
    .loader-wordmark img {
        max-height: 40px;
    }

    .loader-glow {
        width: 220px;
        height: 220px;
    }

    .loader-bar {
        width: 120px;
    }

    .hero-headline {
        font-size: 28px;
    }
    
    .section-heading {
        font-size: 24px;
    }
    
    .hero-sub {
        font-size: 15px;
    }
    
    .pillar {
        padding: 20px 18px;
    }
    
    .process-pillars {
        grid-template-columns: 1fr;
    }
    
    .culture-quote {
        padding: 28px 24px;
    }
    
    .contact-form-wrap {
        padding: 28px 24px;
    }
    
    .site-header {
        padding: 0 16px;
    }
    
    .header-inner {
        height: 64px;
    }
}