.mdi-form {
    --mdi-ink: #111111;
    --mdi-ink-soft: #e4e7ea;
    --mdi-accent: #188077;
    --mdi-accent-title: #188077;
    --mdi-err: #d1242f;
    --mdi-focus: #188077;
    --mdi-muted: #5a6570;
    --mdi-field-ink: #33475b;

    --mdi-field-bg: #f5f8fa;
    --mdi-field-border: #b6b9bd;

    max-width: 1000px;
    margin: 0 auto;
    color: var(--mdi-ink);
    font-size: 14px;
    line-height: 1.4;
    padding: 0 20px 0 20px;
}

.mdi-form__form {
    padding: 0px 5px 5px 5px !important;
    background: transparent !important;
}

/* [FIX-5] Defensive sizing. A control that escapes its column is the exact
   failure mode that produced the horizontal-overflow bug; these two
   declarations make it impossible for any field to exceed its container. */
.mdi-form__form .hs-input,
.mdi-form__form input.hs-input,
.mdi-form__form textarea.hs-input,
.mdi-form__form select.hs-input {
    box-sizing: border-box;
    max-width: 100%;
    color: var(--mdi-field-ink);
}

.mdi-form__form input.hs-input::placeholder,
.mdi-form__form textarea.hs-input::placeholder {
    color: var(--mdi-muted);
    opacity: 1;
}

/* --- Honeypot -------------------------------------------------------------
   Deliberately NOT display:none / visibility:hidden — a meaningful share of
   scripted submitters skip fields hidden that way, defeating the trap.
   Zero size plus overflow:hidden keeps it out of layout without the
   horizontal scrollbar a left:-9999px absolute element can cause inside a
   positioned container. pointer-events:none guarantees no human can reach it.

   NOTE: every dimension here carries !important. That is what kept this rule
   working while .mdi-dd-native (same technique, no !important on width) was
   silently overridden. See [FIX-1].
------------------------------------------------------------------------- */
.mdi-form .mdi-hp {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.mdi-form .mdi-hp input {
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* --- Visually-hidden utility ---------------------------------------------
   Removes content from view while KEEPING it in the accessibility tree. Must
   not be display:none or visibility:hidden, which remove it from both.
------------------------------------------------------------------------- */
.mdi-form .mdi-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Layout -------------------------------------------------------------- */

.mdi-form__title {
    font-size: 40px;
    font-weight: 700;
    margin: 0 0 18px;
    color: var(--mdi-accent-title);
}

.mdi-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.mdi-field {
    margin: 0 0 24px;
}

/* Field labels. .mdi-legend carries identical declarations because the
   specialties group label is a <legend> inside a <fieldset>, which the
   `> label` child selector cannot reach. Keep these two in sync. */
.mdi-form__form .mdi-field > label,
.mdi-form__form .mdi-field .mdi-legend {
    display: block;
    font-weight: 400;
    margin: 0 0 8px;
    color: var(--mdi-field-ink);
    font-size: 18px;
}

.mdi-form .mdi-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.mdi-form .mdi-legend {
    width: 100%;
    padding: 0;
    float: left;
}

.mdi-form .mdi-legend + * {
    clear: both;
}

.req {
    color: var(--mdi-err);
    font-weight: 600;
    font-size: 16px;
}

.mdi-field textarea {
    resize: vertical;
}

.mdi-form__form select.hs-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* --- Focus ---------------------------------------------------------------- */

.mdi-form__form .mdi-ms__trigger:focus-visible,
.mdi-form__form .hs-input:focus-visible,
.mdi-form .mdi-consent__opt input[type="checkbox"]:focus-visible,
.mdi-form .mdi-consent__req input[type="checkbox"]:focus-visible,
.mdi-form .mdi-ms__opt input[type="checkbox"]:focus-visible,
.mdi-form .mdi-errsummary:focus-visible,
.mdi-form .mdi-errsummary__list a:focus-visible {
    outline: 3px solid var(--mdi-focus);
    outline-offset: 2px;
}

@supports not selector(:focus-visible) {
    .mdi-form__form .mdi-ms__trigger:focus,
    .mdi-form__form .hs-input:focus {
        outline: 3px solid var(--mdi-focus);
        outline-offset: 2px;
    }
}

/* --- Error presentation --------------------------------------------------
   Colour is never the only signal: aria-invalid plus the error text carry the
   meaning for assistive tech, and the border/outline is a non-colour visual
   cue (WCAG 1.4.1).
------------------------------------------------------------------------- */

.mdi-field--invalid .hs-input,
.mdi-form__form .mdi-field--invalid .mdi-ms__trigger,
.mdi-form__form [aria-invalid="true"] {
    border-color: var(--mdi-err);
}

.mdi-form__form .mdi-ms__trigger[aria-invalid="true"] {
    box-shadow: 0 0 0 1px var(--mdi-err);
}

.mdi-err {
    color: var(--mdi-err); /* 5.24:1 on #ffffff */
    font-size: 13px;
    margin: 6px 0 0;
    min-height: 0;
}

.mdi-err:empty {
    display: none;
}

/* --- Error summary --------------------------------------------------------
   role="alert" tabindex="-1" in the markup; module.js focuses this on a failed
   submit so the whole list is announced and each entry jumps to its field.
   Do not remove the tabindex or focus cannot land here.
------------------------------------------------------------------------- */

.mdi-form .mdi-errsummary {
    margin: 0 0 24px;
    padding: 14px 16px;
    border: 2px solid var(--mdi-err);
    border-radius: 3px;
}

.mdi-form .mdi-errsummary__title {
    margin: 0 0 8px;
    font-weight: 700;
    font-size: 15px;
    color: var(--mdi-err);
}

.mdi-form .mdi-errsummary__list {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
}

.mdi-form .mdi-errsummary__list li {
    margin: 4px 0;
}

.mdi-form .mdi-errsummary__list a {
    color: var(--mdi-err);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- Custom dropdowns ---------------------------------------------------- */

.mdi-ms {
    position: relative;
}

.mdi-form__form .mdi-ms__trigger {
    width: 100%;
    box-sizing: border-box;
    display: block;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
    font: inherit;
    color: var(--mdi-field-ink);
    padding: 10px;
    border: 1px solid var(--mdi-field-border);
    border-radius: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.9407 19.5595C11.5267 20.1454 12.4782 20.1454 13.0642 19.5595L22.0642 10.5595C22.6501 9.97354 22.6501 9.02197 22.0642 8.43604C21.4782 7.8501 20.5267 7.8501 19.9407 8.43604L12.0001 16.3767L4.05947 8.44072C3.47354 7.85478 2.52197 7.85478 1.93604 8.44072C1.3501 9.02666 1.3501 9.97822 1.93604 10.5642L10.936 19.5642L10.9407 19.5595Z' fill='%2309152B'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    background-color: var(--mdi-field-bg);
}

/* Font-size no longer changes between empty and filled — the 16px→15px shift
   caused a one-pixel reflow of the trigger on every selection. */
.mdi-ms__placeholder {
    color: var(--mdi-muted);
    font-size: 16px;
}

.mdi-ms__placeholder.is-filled {
    color: var(--mdi-field-ink);
    font-size: 16px;
}

.mdi-ms__panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid #cfcfcf;
    border-radius: 3px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    padding: 4px;
    list-style: none;
    margin: 0;
}

.mdi-form__form .mdi-ms__opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    margin: 0;
    font-weight: 400;
    color: #33475b;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    min-height: 24px; /* 2.5.8 Target Size (Minimum) */
}

.mdi-ms__opt:hover,
.mdi-ms__opt.is-active {
    background: #f4f4f4;
}

.mdi-ms__opt input {
    width: auto;
}

.mdi-ms__opt--single[aria-selected="true"] {
    font-weight: 400;
}

.mdi-ms__opt--single[aria-selected="true"]::after {
    content: "\2713";
    margin-left: auto;
    color: #33475b;
}

/* [FIX-1] ------------------------------------------------------------------
   .mdi-dd-native is applied by module.js to the native <select> once the
   custom widget takes over.

   The previous rule marked `position: absolute` !important but left `width`
   and `height` unflagged. A higher-specificity rule (`.hs-form select`, from
   HubSpot's form CSS / the theme's _forms.css — the form carries
   class="mdi-form__form hs-form form") won the width cascade, so the select
   was taken OUT of flow at full width. With no in-flow parent to constrain
   it and no ancestor clipping, it extended the document by 697–971px and
   produced horizontal scroll on /contact.

   Two changes: the selector is now 0,0,2,1 (beats `.hs-form select` at
   0,0,1,1 on specificity alone) and every dimension carries !important.

   Do not remove the !important flags. Do not replace this with display:none
   — the element must stay focusable for module.js and must keep submitting.
------------------------------------------------------------------------- */
.mdi-form select.mdi-dd-native,
.mdi-form__form select.mdi-dd-native,
.mdi-form__form .hs-input.mdi-dd-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    max-width: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --- Data privacy & consent ---------------------------------------------- */

.mdi-form .mdi-consent {
    margin: 1.5rem 0 1.25rem;
    padding-top: 10px;
    border-top: 1px solid var(--mdi-ink-soft);
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--mdi-ink);
}

.mdi-form .mdi-consent__intro,
.mdi-form .mdi-consent__privacy,
.mdi-form .mdi-consent__notice,
.mdi-form .mdi-consent__process {
    margin: 0 0 0.75rem;
    color: var(--mdi-muted); /* 5.58:1 on #ffffff */
    font-size: 12px !important;
}

.mdi-form .mdi-consent__privacy a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mdi-form .mdi-consent__opt,
.mdi-form .mdi-consent__req {
    display: flex;
    gap: 1rem;
    margin: 0 0 0.5rem;
    cursor: pointer;
    min-height: 24px; /* 2.5.8 — the label is the target, not the 16px box */
    font-size: 12px !important;
}

.mdi-form .mdi-consent__req {
    gap: 0.25rem;
}

/* [FIX-2] ------------------------------------------------------------------
   Was `.mdi-form .mdi-consent__opt .mdi-consent__req input[type="checkbox"]`.
   .mdi-consent__req is a SIBLING of .mdi-consent__opt in the markup, not a
   descendant, so that selector never matched and the required consent
   checkbox rendered unstyled and visually inconsistent with the two optional
   boxes above it. Both are now covered.
------------------------------------------------------------------------- */
.mdi-form .mdi-consent__opt input[type="checkbox"],
.mdi-form .mdi-consent__req input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin: 0.125rem 0 0;
    cursor: pointer;
    border-radius: 10px;
}

.mdi-form .mdi-consent__opt span,
.mdi-form .mdi-consent__req span:not(.req) {
    flex: 1 1 auto;
}

.mdi-form .mdi-consent__opt.mdi-field--invalid span,
.mdi-form .mdi-consent__req.mdi-field--invalid span:not(.req) {
    color: var(--mdi-err);
    opacity: 1;
}

.mdi-form .mdi-consent .mdi-err {
    margin: -0.5rem 0 1rem;
}

/* --- Submit, status, success --------------------------------------------- */

.mdi-submitwrap {
    margin-top: 8px;
    max-inline-size: fit-content;
    margin-inline: auto;
}

.mdi-submit[disabled],
.hs-button[disabled] {
    opacity: 0.55;
    cursor: default;
}

.mdi-status {
    margin-top: 18px;
    padding: 12px 14px;
    border-radius: 3px;
    font-weight: 500;
}

.mdi-status--err {
    background: #fdecec;
    color: #b3221d;
    border: 1px solid #f3b6b4;
}

.mdi-success {
    padding: 4px 0;
}

.mdi-success:focus-visible {
    outline: 3px solid var(--mdi-focus);
    outline-offset: 4px;
}

.mdi-success__title {
    font-size: 40px;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--mdi-accent-title);
}

.mdi-success__body {
    margin: 0;
    color: #767d84;
    font-size: 18px;
}

/* --- Motion & responsive -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .mdi-form *,
    .mdi-form *::before,
    .mdi-form *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (max-width: 720px) {
    .mdi-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}