.container {
    width: 100%;
    max-width: 64rem;

    margin-left: auto;
    margin-right: auto;

    padding-left:
        var(--page-padding, clamp(1rem, 4vw, 2rem));

    padding-right:
        var(--page-padding, clamp(1rem, 4vw, 2rem));
}




/* ============================================================
   CONTACT INTRO
============================================================ */

.contact_section {
    width: 100%;

    margin-top:
        clamp(2.5rem, 7vw, 5rem);
}


.contact_intro {
    margin-top: 5rem;
    
    width:
        min(100%, 52rem);

    margin:
        0 auto clamp(2rem, 5vw, 3rem);
}


.contact_eyebrow {

    margin-bottom:
        0.45rem;

    color:
        var(--bluishhh);

    font-size:
        0.95rem;

    font-weight:
        700;

    letter-spacing:
        0.03em;

    text-transform:
        uppercase;
}


.contact_intro h1 {
    margin:
        0 0 1rem;

    color:
        black;

    font-family:
        "Boogaloo",
        sans-serif;

    font-size:
        clamp(3rem, 8vw, 5rem);

    font-weight:
        400;

    line-height:
        1;
}


.contact_intro_text {
    max-width:
        44rem;

    color:
        var(--blickishhh);

    font-size:
        clamp(1rem, 2vw, 1.15rem);

    line-height:
        1.6;
}


.required_notice {
    margin-top:
        1rem;

    color:
        #6b6b6b;

    font-size:
        0.9rem;

    font-weight:
        600;
}


.required_notice span,
.required_asterisk {
    color:
        #a52323;

    font-weight:
        800;
}


.required_asterisk {
    margin-left:
        0.15rem;
}


.optional_label {
    margin-left:
        0.4rem;

    color:
        #777777;

    font-size:
        0.78rem;

    font-weight:
        500;
}











/* ============================================================
   CONTACT FORM
============================================================ */

.contact_form {
    width:
        min(100%, 52rem);

    margin:
        clamp(3rem, 8vw, 5rem) auto 2rem;

    padding:
        clamp(1rem, 4vw, 2rem);

    border-radius:
        0.5rem;

    background-color:
        #f2f2f2;
}


.contact_form form {
    width: 100%;
}


.contact_form label {
    display: block;

    margin-bottom:
        0.4rem;

    color:
        var(--blickishhh);

    font-size:
        1rem;

    font-weight:
        700;
}


.contact_form input,
.contact_form textarea {
    width: 100%;

    margin-bottom:
        1.2rem;

    padding:
        0.75rem;

    border:
        1px solid #cccccc;

    border-radius:
        0.4rem;

    outline: none;

    background-color:
        white;

    color:
        black;

    font-family:
        "Google Sans",
        sans-serif;

    font-size:
        1rem;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.contact_form input:hover,
.contact_form textarea:hover {
    border-color:
        var(--blickishhh);
}


.contact_form input:focus,
.contact_form textarea:focus {
    border-color:
        var(--bluishhh);

    box-shadow:
        0 0 3px var(--bluishhh);
}

.contact_form input:required:invalid:not(:placeholder-shown),
.contact_form textarea:required:invalid:not(:placeholder-shown) {
    border-color:
        #b94a4a;
}


.contact_form input:required:valid,
.contact_form textarea:required:valid {
    border-color:
        #6f9879;
}


.contact_form input:user-invalid,
.contact_form textarea:user-invalid {
    border-color:
        #b94a4a;

    box-shadow:
        0 0 0 1px rgba(185, 74, 74, 0.15);
}


.contact_form textarea {
    min-height:
        12rem;

    resize:
        vertical;
}


.contact_name_fields {
    display: grid;

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

    gap:
        1rem;
}


.contact_field {
    min-width: 0;
}


.form_buttons {
    display: flex;

    flex-wrap: wrap;

    gap:
        0.75rem;

    margin-top:
        0.5rem;
}


.submit_btn {
    min-height:
        44px;

    display:
        inline-flex;

    align-items:
        center;
    justify-content:
        center;

    padding:
        12px 20px;

    overflow:
        hidden;

    border:
        none;

    border-radius:
        5px;

    background-color:
        var(--blickishhh);

    color:
        white;

    font-size:
        1rem;

    font-weight:
        700;

    line-height:
        1.2;

    cursor:
        pointer;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease,
        opacity 0.2s ease;
}


.submit_btn:disabled {
    opacity:
        0.6;

    cursor:
        wait;
}


.submit_btn span {
    position:
        relative;

    display:
        inline-block;

    padding-right:
        1.25rem;
}


.submit_btn span::after {
    content:
        "\00bb";

    position:
        absolute;

    top:
        50%;
    right:
        0;

    opacity:
        0;

    transform:
        translate(6px, -50%);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}


.contact_form_status {
    margin:
        0 0 1rem;

    padding:
        0.75rem 1rem;

    border-radius:
        0.4rem;

    background-color:
        white;

    font-size:
        0.95rem;

    line-height:
        1.4;
}


.contact_form_status[data-state="success"] {
    color:
        #226636;

    border:
        1px solid #4a9b61;
}


.contact_form_status[data-state="error"] {
    color:
        #871b1b;

    border:
        1px solid #b94a4a;
}


@media (hover: hover) and (pointer: fine) {

    .submit_btn:hover:not(:disabled) {
        background-color:
            #2f2f2f;

        transform:
            translateY(-2px);
    }


    .submit_btn:hover:not(:disabled) span::after {
        opacity:
            1;

        transform:
            translate(0, -50%);
    }

}


@media (max-width: 560px) {

    .contact_name_fields {
        grid-template-columns:
            1fr;

        gap:
            0;
    }


    .form_buttons {
        flex-direction:
            column;
    }


    .submit_btn {
        width: 100%;
    }

}


@media (prefers-reduced-motion: reduce) {

    .submit_btn,
    .submit_btn span::after,
    .contact_form input,
    .contact_form textarea {
        transition:
            none;
    }


    .submit_btn:hover:not(:disabled) {
        transform:
            none;
    }

}