/* ============================================================
   Σycamore Barber & Co. — Responsive
   ============================================================ */

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

    .nav-links { display: none; }
    .nav-book { display: none; }
    .nav-toggle { display: block; }

    .nav-menu {
        position: fixed;
        inset: 0;
        background: var(--paper);
        z-index: 100;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2rem;
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition);
    }

    .nav-menu.is-open {
        opacity: 1;
        visibility: visible;
    }

    .nav-menu a {
        font-family: var(--font-display);
        font-size: 1.8rem;
        color: var(--ink);
        letter-spacing: 0.04em;
    }

    .nav-menu .btn {
        margin-top: 1rem;
    }

    /* Layout */
    .split,
    .split--offset {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .features {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-md);
    }

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

    /* Mobile booking bar */
    .mobile-booking-bar {
        display: block;
    }

    body {
        padding-bottom: 70px;
    }

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

/* --- Mobile (480px and below) --- */
@media (max-width: 480px) {

    .section {
        padding: var(--space-lg) 0;
    }

    .hero h1 {
        font-size: clamp(1.8rem, 8vw, 3rem);
    }

    .hero-ctas {
        flex-direction: column;
        align-items: center;
    }

    .hero-ctas .btn {
        width: 100%;
        max-width: 280px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        gap: var(--space-sm);
        text-align: center;
    }

    .pull-quote {
        font-size: 1.4rem;
    }

    .nav-menu a {
        font-size: 1.4rem;
    }
}