/* =============================================
   Responsive Breakpoints — Mobile First
   ============================================= */

/* Tablet: 768px */
@media (max-width: 768px) {

    /* Nav */
    .nav-menu {
        display: none;
        position: fixed;
        inset: 0;
        background-color: var(--colour-white);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--space-8);
        z-index: 99;
        font-size: var(--fs-xl);
    }

    .nav-menu.open { display: flex; }

    .nav-toggle {
        display: flex;
        flex-direction: column;
        gap: 5px;
        z-index: 100;
        position: relative;
    }

    .hamburger,
    .hamburger::before,
    .hamburger::after {
        display: block;
        width: 24px;
        height: 1.5px;
        background-color: var(--colour-primary);
        transition: transform var(--transition-base);
    }

    .hamburger::before,
    .hamburger::after {
        content: '';
        position: absolute;
    }

    .hamburger::before { transform: translateY(-7px); }
    .hamburger::after  { transform: translateY(7px);  }

    .nav-cta { display: none; }

    /* Hero */
    .hero-actions { flex-direction: column; }

    /* Footer */
    .footer-inner {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    /* Pillars */
    .pillars-grid {
        grid-template-columns: 1fr;
    }

    /* Lookbook */
    .lookbook-grid {
        grid-template-columns: 1fr;
    }

    /* Values */
    .values-grid {
        grid-template-columns: 1fr;
    }
}

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