/* Claystone Studies Writing Academy — Responsive Styles */
@media (max-width: 1100px) {
    .container {
        width: 95%;
        padding: 0 15px;
    }
}

@media (max-width: 820px) {
    .brand-name {
        font-size: 1.1rem;
        line-height: 1.2;
        max-width: calc(100vw - 135px);
    }

    .nav-links {
        display: none;
        flex-direction: column;
        background-color: #2f2a23;
        position: absolute;
        top: 62px;
        left: 0;
        width: 100%;
        text-align: center;
        z-index: 10;
        padding: 8px 0;
    }

    .nav-links li {
        padding: 10px 0;
    }

    .nav-links.active {
        display: flex;
    }

    .menu-toggle {
        display: block;
        background: none;
        border: none;
        font-size: 26px;
        color: #fff;
        cursor: pointer;
    }

    .hero {
        padding: 70px 18px;
    }

    .hero h1 {
        font-size: 2.35rem;
    }

    .hero h2 {
        font-size: 1.2rem;
    }

    .features,
    .cards {
        flex-direction: column;
    }

    .tutoring-options {
        grid-template-columns: 1fr;
    }

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

    .two-column {
        grid-template-columns: 1fr;
    }

    .tutor-portrait {
        float: none;
        display: block;
        margin: 0 auto 20px;
    }
}