/*=========================================
        TABLET (≤900px)
=========================================*/

@media (max-width:900px){

    .contact-layout{

        grid-template-columns:1fr;

    }

    .two-columns{

        grid-template-columns:1fr;

    }

    .contact-form-card,
    .help-card{

        padding:30px;

    }

}

/*=========================================
        LARGE PHONES / SMALL TABLETS (≤768px)
=========================================*/

@media (max-width:768px){

    .container{

        width:92%;

    }

    /* Nav / logo */

    .contact-page-nav{

        padding:14px 0 0;

    }

    .contact-page-nav img{

        width:90px;

        height:90px;

    }

    /* Hero */

    .contact-hero{

        padding:50px 20px 90px;

    }

    .contact-badge{

        font-size:.85rem;

        padding:8px 16px;

        margin-bottom:18px;

    }

    .contact-hero h1{

        font-size:2.4rem;

        margin-bottom:14px;

    }

    .contact-hero p{

        font-size:1rem;

        line-height:1.7;

    }

    .hero-wave{

        height:70px;

    }

    /* Ways to connect */

    .contact-methods{

        padding:50px 0;

    }

    .section-title{

        margin-bottom:35px;

    }

    .section-title h2{

        font-size:1.7rem;

    }

    .section-title p{

        font-size:.95rem;

    }

    .contact-grid{

        grid-template-columns:repeat(2,1fr);

        gap:16px;

    }

    .contact-card{

        padding:24px 16px;

        border-radius:18px;

    }

    .contact-icon{

        width:60px;

        height:60px;

        font-size:1.5rem;

        margin-bottom:14px;

    }

    .contact-card h3{

        font-size:1.05rem;

        margin-bottom:8px;

    }

    .contact-card p{

        font-size:.85rem;

        margin-bottom:12px;

        word-break:break-word;

    }

    .contact-card span{

        font-size:.85rem;

    }

    /* Form + help section */

    .contact-content{

        padding:50px 0;

    }

    .contact-form-card,
    .help-card{

        padding:24px;

        border-radius:20px;

    }

    .section-heading{

        margin-bottom:24px;

    }

    .section-heading h2{

        font-size:1.5rem;

    }

    .section-heading p{

        font-size:.9rem;

    }

    .form-group{

        margin-bottom:16px;

    }

    .form-group label{

        font-size:.9rem;

    }

    .form-group input,
    .form-group select,
    .form-group textarea{

        padding:14px 16px;

        font-size:16px; /* prevents iOS auto-zoom on focus */

        border-radius:12px;

    }

    .primary-btn{

        padding:16px;

        font-size:1rem;

        border-radius:14px;

    }

    .help-card{

        margin-top:0;

    }

    .cupcake{

        font-size:52px;

        margin-bottom:16px;

    }

    .help-card h2{

        font-size:1.4rem;

        text-align:center;

    }

    .help-card p{

        font-size:.9rem;

        text-align:center;

    }

    .help-card li{

        font-size:.9rem;

        margin-bottom:14px;

    }

}

/*=========================================
        SMALL PHONES (≤480px)
=========================================*/

@media (max-width:480px){

    .contact-page-nav img{

        width:72px;

        height:72px;

    }

    .contact-hero{

        padding:40px 16px 70px;

    }

    .contact-hero h1{

        font-size:1.9rem;

    }

    .contact-hero p{

        font-size:.9rem;

    }

    .contact-grid{

        grid-template-columns:1fr;

        gap:14px;

    }

    .contact-card{

        padding:20px 16px;

    }

    .contact-form-card,
    .help-card{

        padding:18px;

        border-radius:16px;

    }

    .section-heading h2{

        font-size:1.3rem;

    }

    .form-group input,
    .form-group select,
    .form-group textarea{

        padding:13px 14px;

    }

    .primary-btn{

        font-size:.95rem;

        padding:15px;

    }

    /* Toast: full-width, doesn't overflow small screens */

    .toast{

        top:16px;

        right:16px;

        left:16px;

        min-width:auto;

        width:calc(100% - 32px);

        padding:14px 18px;

        font-size:.9rem;

    }

}