/* Contact-only native form; no framework or script dependency. */
.ecu-contact {
  box-sizing: border-box; max-width: 46rem; margin-block: 2rem;
  padding: clamp(1.25rem, 4vw, 2.5rem); border: 1px solid #284960;
  border-radius: .8rem; background: #102b40; color: #f5f8fa;
  box-shadow: 0 .6rem 1.5rem rgb(16 43 64 / 12%);
}
.ecu-contact > p, .ecu-contact .ecu-contact-help { color: #cbdbe5; }
.ecu-contact .ecu-contact-grid { display: grid; gap: 1.25rem; margin-block: 1.5rem; }
.ecu-contact .ecu-contact-field { min-width: 0; }
.ecu-contact label { display: block; color: #f5f8fa; font-weight: 600; margin-bottom: .5rem; }
.ecu-contact input:not([type="hidden"]), .ecu-contact textarea {
  display: block; box-sizing: border-box; width: 100%; min-width: 0;
  padding: .8rem; border: 1px solid #a5b7c4; border-radius: .35rem;
  background: #fff; color: #142a3c; font: inherit;
}
.ecu-contact textarea { resize: vertical; }
.ecu-contact :focus-visible { outline: 3px solid #67e3d4; outline-offset: 3px; }
.ecu-contact [aria-invalid="true"] { border: 2px solid #ae2929; }
.ecu-contact .ecu-contact-error { color: #ffd0cd; }
.ecu-contact .ecu-contact-field > p { margin: .5rem 0 0; font-size: .9rem; overflow-wrap: anywhere; }
.ecu-contact .button {
  padding: .85rem 1.5rem; border: 2px solid transparent; border-radius: .4rem;
  background: #43d4bc; color: #102b40; font: inherit; font-weight: 700; cursor: pointer;
}
.ecu-contact .button:hover { background: #83ecda; }
.ecu-contact-feedback {
  box-sizing: border-box; max-width: 46rem; margin-block: 1.5rem; padding: 1.25rem;
  border: 1px solid #adc7d4; border-left: 4px solid #086491; border-radius: .4rem;
  color: #142a3c; background: #eef5f8; overflow-wrap: anywhere;
}
.ecu-contact-feedback[role="alert"] { border-left-color: #a32323; }
.ecu-contact-feedback a { color: #07577a; text-decoration: underline; }
.ecu-contact-feedback a:focus-visible { outline: 3px solid #086491; outline-offset: 3px; }
.ecu-contact [hidden] { display: none; }
@media (min-width: 640px) {
  .ecu-contact .ecu-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ecu-contact .ecu-contact-field:last-child { grid-column: 1 / -1; }
}