/* Consultation form shared by the homepage, contact and the pricing calculator. */
.mt-contact {
    --mail-accent: #2829b8;
    --mail-line: #c9c7d7;
    --mail-muted: #4c4b5e;
    min-width: 0;
    max-width: 100%;
    color: #15151d;
}
.mt-contact .mt-contact-heading {
    margin: 0 0 1.4rem;
    padding-bottom: 1.15rem;
    border-bottom: 1px solid var(--mail-line);
}
.mt-contact .eyebrow {
    display: block;
    color: var(--mail-accent);
    margin-bottom: .55rem;
}
.mt-contact .mt-contact-heading h3 {
    margin: 0 0 .5rem;
    font-size: clamp(1.35rem, 2.7vw, 1.9rem);
    line-height: 1.15;
    letter-spacing: -.045em;
    overflow-wrap: anywhere;
}
.mt-contact .mt-contact-heading p { margin: 0; color: var(--mail-muted); font-size: .91rem; }
.mt-contact .grid.two { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: .95rem; }
.mt-contact .field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin: 0 0 1rem;
}
.mt-contact .field > span, .mt-contact .field > label { font-size: .87rem; font-weight: 720; overflow-wrap: anywhere; }
.mt-contact .field--wide { grid-column: 1 / -1; }
.mt-contact .field > small { font-size: .72rem; color: var(--mail-muted); }
.mt-contact :is(input:not([type=checkbox]), textarea, select) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 2.8rem;
    padding: .62rem .7rem;
    border: 1px solid var(--mail-line);
    border-radius: .6rem;
    background: #fff;
    color: #15151d;
    font: inherit;
    font-size: 1rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.mt-contact :is(input:not([type=checkbox]), textarea, select):focus {
    border-color: var(--mail-accent);
    outline: 2px solid transparent;
    box-shadow: 0 0 0 3px #2829b82b;
}
.mt-contact :is(input, textarea)::placeholder { color: #625f76; opacity: 1; }
.mt-contact textarea { resize: vertical; min-height: 8.2rem; }
.mt-contact input[type=checkbox] {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 1.15rem;
    padding: 0;
    margin: .14rem 0 0;
    accent-color: var(--mail-accent);
}
.mt-contact .check {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: .9rem 0;
    color: #363545;
    font-size: .8rem;
    line-height: 1.55;
}
.mt-contact :is(.check, .public-privacy) a {
    color: var(--mail-accent);
    text-decoration: underline;
    text-underline-offset: .18em;
}
.mt-contact .upload-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .7rem;
    margin: 0 0 1.25rem;
    padding: .85rem;
    border: 1px dashed #a7a5bc;
    border-radius: .75rem;
    background: #f6f5ff;
    font-size: .84rem;
    cursor: pointer;
}
.mt-contact .upload-field > svg { flex: 0 0 1.35rem; color: var(--mail-accent); }
.mt-contact .upload-field > span { min-width: 0; flex: 1 1 7rem; overflow-wrap: anywhere; }
.mt-contact .upload-field small { display: block; margin-top: .22rem; color: var(--mail-muted); font-size: .72rem; }
.mt-contact .upload-field input[type=file] {
    width: 100%;
    padding: .35rem;
    cursor: pointer;
    font-size: 1rem;
}
.mt-contact .upload-field input::file-selector-button {
    min-height: 2rem;
    padding: .35rem .55rem;
    border: 0;
    border-radius: .35rem;
    background: #eeedff;
    color: #242497;
    font: 680 .75rem/1.2 system-ui, sans-serif;
}
.mt-contact .file-name:empty { display: none; }
.mt-contact .send-button {
    display: flex;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    min-height: 3.05rem;
    padding: .7rem 1rem;
    border: 1px solid var(--mail-accent);
    border-radius: 100vw;
    background: var(--mail-accent);
    color: #fff;
    font-size: .95rem;
    font-weight: 730;
    white-space: normal;
    cursor: pointer;
}
.mt-contact .send-button:hover { background: #1b1c87; color: #fff; }
.mt-contact .send-button:disabled { opacity: .7; cursor: wait; }
.mt-contact .form-note { margin: .65rem 0 0; color: var(--mail-muted); font-size: .72rem; text-align: center; }
.mt-contact .honeypot {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%);
    white-space: nowrap;
    pointer-events: none;
}
.mt-contact .notice {
    margin-bottom: 1.2rem;
    padding: .85rem;
    border: 1px solid var(--mail-line);
    border-radius: .65rem;
    background: #f6f5ff;
    font-size: .85rem;
    overflow-wrap: anywhere;
}
.mt-contact .notice p { margin: .4rem 0 0; }
.mt-contact .notice.error { background: #fff4f2; border-color: #ebccc7; color: #842b24; }
.mt-contact .notice.success { background: #edf6ef; border-color: #c7dfce; color: #285f38; }
.mt-contact .public-privacy { margin: .75rem 0; font-size: .8rem; color: var(--mail-muted); }
.mt-contact .public-privacy summary { cursor: pointer; }
.mt-contact .public-privacy p { white-space: normal; overflow-wrap: anywhere; }
.mt-contact :is(a, button, summary, input[type=checkbox]):focus-visible {
    outline: 2px solid var(--mail-accent);
    outline-offset: 3px;
}
@media (min-width: 601px) {
    .mt-contact .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .mt-contact :is(input, textarea, select) { transition: none; }
}
@media (forced-colors: active) {
    .mt-contact :is(input:not([type=checkbox]), textarea, select):focus { outline-color: Highlight; }
}