@media (max-width: 768px) {

    .nav-toggle {
        display: flex;
    }

    .main-nav {
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background: white;
        border-top: 1px solid #e5e5e5;

        max-height: 0;
        overflow: hidden;

        transition: max-height 0.3s ease;
    }

    .main-nav.active {
        max-height: 500px;
    }

    .nav-links {
        flex-direction: column;
        align-items: stretch;
        padding: 1rem;
        gap: 1rem;
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links a {
        display: block;
        padding: 0.75rem;
    }

    .nav-cta {
        text-align: center;
    }
}