.contact-page { max-width: 48rem; margin-inline: auto; }
.contact-intro { font-size: 1.15rem; color: #465d64; margin-block-end: 2rem; }
.contact-form { padding: clamp(1.2rem, 4vw, 2.5rem); border: 1px solid #d8e5e7; border-radius: 1rem; background: #fff; }
.contact-field { display: flex; flex-direction: column; gap: .4rem; margin-block-end: 1.1rem; min-width: 0; }
.contact-field label, .contact-form legend { font-weight: 700; }
.contact-field input, .contact-field textarea { width: 100%; min-width: 0; border: 1px solid #81979d; border-radius: .4rem; padding: .65rem .8rem; font: inherit; color: #062b35; background: #fff; }
.contact-field textarea { resize: vertical; min-height: 10rem; }
.contact-form fieldset { margin: 0 0 1.2rem; padding: .8rem 1rem 0; border: 1px solid #cbdcde; border-radius: .5rem; min-width: 0; }
.contact-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-help { font-size: .9rem; color: #465d64; margin-block: .3rem 1rem; }
.contact-button { display: inline-flex; justify-content: center; padding: .75rem 1.5rem; border: 1px solid #006b76; border-radius: .4rem; background: #006b76; color: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.contact-button:hover { background: #064956; }
.contact-page :is(input, textarea, button, a):focus-visible { outline: 3px solid #0099a8; outline-offset: 3px; }
.contact-errors.validation-summary-errors { color: #842020; background: #fff3f2; padding: 1rem; border-inline-start: 4px solid #a62c2c; margin-block-end: 1.5rem; overflow-wrap: anywhere; }
.contact-errors.validation-summary-valid, .contact-field-error.field-validation-valid { display: none; }
.contact-field-error { color: #842020; font-size: .9rem; }
.contact-field .input-validation-error { border-color: #a62c2c; }
@media (max-width: 40rem) { .contact-methods { grid-template-columns: 1fr; gap: 0; } .contact-button { width: 100%; } }