.mx-contact {
    max-width: 760px;
}

.mx-contact-intro {
    margin: 0 0 20px;
    color: var(--mxr-muted, var(--won-grey, #858585));
}

.mx-contact-intro p {
    margin: 0;
}

.mx-contact-form {
    position: relative;
    padding: 22px;
    border: 1px solid var(--mxr-border, var(--won-line, #3a3a3a));
    background: var(--mxr-panel, var(--won-panel, #0b0b0b));
}

.mx-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.mx-contact-field--wide {
    grid-column: 1 / -1;
}

.mx-contact-field label {
    display: block;
    margin: 0 0 7px;
    color: var(--mxr-text, var(--won-white, #eeeeea));
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.mx-contact-field input,
.mx-contact-field select,
.mx-contact-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    color: var(--mxr-text, var(--won-white, #eeeeea));
    border: 1px solid var(--mxr-border, var(--won-line, #3a3a3a));
    border-radius: var(--mxr-radius, 3px);
    outline: 0;
    background: var(--mxr-bg-soft, var(--won-black-soft, #070707));
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.mx-contact-field textarea {
    min-height: 150px;
    resize: vertical;
}

.mx-contact-field input:focus,
.mx-contact-field select:focus,
.mx-contact-field textarea:focus {
    border-color: var(--mxr-orange-bright, var(--won-amber-hot, #ffc323));
    box-shadow: 0 0 0 1px var(--mxr-orange-bright, var(--won-amber-hot, #ffc323));
}

.mx-contact-field input[readonly] {
    color: var(--mxr-muted, var(--won-grey, #858585));
    background: var(--mxr-bg, var(--won-black, #000));
}

.mx-contact-turnstile {
    margin: 18px 0 0;
    min-height: 65px;
}

.mx-contact-submit-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
}

.mx-contact-submit {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 10px 18px;
    color: #fff;
    border: 1px solid var(--mxr-orange-bright, var(--won-amber-hot, #ffc323));
    border-radius: var(--mxr-radius, 3px);
    background: var(--mxr-orange-deep, var(--won-amber-deep, #8f5b00));
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
}

.mx-contact-submit:hover,
.mx-contact-submit:focus-visible {
    background: var(--mxr-orange, var(--won-amber, #e7a51e));
}

.mx-contact-privacy {
    margin: 0;
    color: var(--mxr-dim, var(--won-grey-dim, #5f5f5f));
    font-size: 12px;
    line-height: 1.5;
}

.mx-contact-notice {
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid var(--mxr-border, var(--won-line, #3a3a3a));
    background: var(--mxr-panel-raised, #171510);
}

.mx-contact-notice--success {
    border-left: 3px solid var(--mxr-green-bright, var(--won-green, #7fff00));
}

.mx-contact-notice--warning,
.mx-contact-notice--error {
    border-left: 3px solid var(--mxr-orange-bright, var(--won-amber-hot, #ffc323));
}

.mx-contact-hp {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 700px) {
    .mx-contact-form {
        padding: 16px;
    }

    .mx-contact-grid {
        grid-template-columns: 1fr;
    }

    .mx-contact-field--wide {
        grid-column: auto;
    }

    .mx-contact-submit-row {
        align-items: flex-start;
        flex-direction: column;
    }
}