@media (max-width: 1400px) {
    .container {
        padding-inline: var(--space-6);
        gap: var(--space-3)
    }

    h1 {
        font-size: var(--fs-3xl);
    }

    /*---Footer--*/

    .contact-pills {
        flex-direction: column;
        gap: var(--space-1);
        padding-block: 0;
    }

}

@media (max-width: 900px) {

    .container {
        padding-inline: var(--space-4);
    }

    h1 {
        font-size: var(--fs-2xl);
    }

    .site-header__toggle {
        display: flex;
        order: 2;
        /* toggle sits between logo and contact button */
    }

    .site-header__contact {
        order: 1;
    }

    .site-header-nav {
        display: none;
        /* collapsed by default */
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-1);
        padding: var(--space-3);
        background-color: var(--color-surface);
        border-bottom: var(--border-width) solid var(--color-border);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
        z-index: 1;
    }

    .site-header-nav.is-open {
        display: flex;
    }

    .site-header {
        position: relative;
        /* anchors the absolutely positioned dropdown */
    }

}

@media (max-width: 640px) {

    .section {
        padding-block: var(--space-4);
    }

    .container {
        padding-inline: var(--space-4);
    }

    h1 {
        font-size: var(--fs-3xl);
    }

    .btn--small {
        padding: var(--space-05) var(--space-3);
        font-size: var(--fs-base);
        border-radius: calc(var(--radius) / 2);
        color: var(--color-gray-900);
        border: var(--color-text-muted) solid calc(var(--border-width)* 1.95);
    }

    .site-footer .container {
            grid-template-columns: 1fr !important;
            gap: var(--space-5);
    }

    .site-footer .footer-contact {
        order: -1;
        justify-self: start;
    }

    .toggle-contact-button {
        display: flex;
        width: fit-content;
        margin-top: var(--space-1);
    }

    .main-contact-button {
        display: none;
    }

}