.contact-form {
    max-width: 520px;
    margin: 36px auto;
    text-align: left
}

.contact-prompt {
    margin: 0 0 8px;
    color: #1B1F27;
    font-weight: 600
}

.contact-fields {
    display: flex;
    gap: 8px
}

.contact-email {
    box-sizing: border-box;
    min-width: 0;
    flex: 1;
    padding: 11px 12px;
    border: 1px solid #AEB7C2;
    border-radius: 3px;
    background: #FFFFFF;
    color: #1B1F27;
    font: inherit
}

.contact-email::placeholder {
    color: #737E8B
}

.contact-email:focus-visible {
    border-color: #185ABD;
    outline: 3px solid rgba(24, 90, 189, .18)
}

.contact-submit {
    border: 0;
    border-radius: 3px;
    padding: 11px 20px;
    background: #185ABD;
    color: #FFFFFF;
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer
}

.contact-submit:hover,
.contact-submit:focus-visible {
    background: #12489C
}

.contact-submit:focus-visible {
    outline: 3px solid rgba(24, 90, 189, .22);
    outline-offset: 2px
}

.contact-form.htmx-request .contact-submit {
    cursor: wait;
    opacity: .65
}

.contact-submit .htmx-indicator {
    display: none
}

.contact-form.htmx-request .contact-submit-label {
    display: none
}

.contact-form.htmx-request .contact-submit .htmx-indicator {
    display: inline
}

.contact-status {
    min-height: 24px;
    margin: 8px 0 0;
    color: #5B6572;
    font-size: 15px
}

.contact-result-success {
    color: #17633A
}

.contact-result-error {
    color: #A52A2A
}

@media (max-width: 520px) {
    .contact-fields {
        flex-direction: column
    }

    .contact-submit {
        width: 100%
    }
}