.mdi-form {
  --mdi-ink: #111111;
  --mdi-ink-soft: #e4e7ea;
  --mdi-accent: #188077;
  --mdi-accent-title: #188077;
  --mdi-err: #d1242f;
  --mdi-focus: #ffffff;
  --mdi-muted: #5a6570;
  --mdi-field-ink: #767d84;
  --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;
}

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

.mdi-form__form .hs-input,
.mdi-form__form input.hs-input,
.mdi-form__form textarea.hs-input,
.mdi-form__form select.hs-input {
  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 -------------------------------------------------------------
   Consolidated: the previous stylesheet declared .mdi-hp twice with competing
   values. 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.
------------------------------------------------------------------------- */
.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. Used
   for the "(required)" text in the specialties legend.
------------------------------------------------------------------------- */
.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;
}

/* <fieldset> and <legend> carry heavy UA defaults; strip them so the group
   inherits the normal field styling. */
.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;
}

.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-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);
  font-size: 12px;
  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);
}
.mdi-ms__placeholder {
  color: var(--mdi-muted);
  font-size: 16px;
}
.mdi-ms__placeholder.is-filled {
  color: #354c47; /* measured 8.65:1 on the field background — unchanged */
  font-size: 15px;
}
.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; /* measured 9.58:1 on the white panel — unchanged */
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  min-height: 24px; /* WCAG 2.2 2.5.8 target size */
}
.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;
}

.mdi-dd-native {
  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;
}

/* --- Data privacy & consent ---------------------------------------------- */
.mdi-form .mdi-consent {
  margin: 1.5rem 0 1.25rem;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.8125rem;
  line-height: 1.55;
  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: #5a6570;
  font-size: 12px !important;
}

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

.mdi-form .mdi-consent__opt {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0 0 0.5rem;
  cursor: pointer;
  min-height: 24px;
  font-size: 12px !important;
}
.mdi-form .mdi-consent__opt 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 {
  flex: 1 1 auto;
}
.mdi-form .mdi-consent__opt.mdi-field--invalid span {
  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;
}

/* Network / API failures only. Field errors go to the error summary. */
.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: var(--mdi-field-ink);
}

/* --- Motion -------------------------------------------------------------
   module.js uses smooth scrolling to reach the error summary and confirmation.
   Honour a reduced-motion preference (WCAG 2.3.3).
------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mdi-form * {
    scroll-behavior: auto !important;
  }
}

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