.contact-form {
    --contact-color-ink: #003776;
    --contact-color-muted: #5c667a;
    --contact-color-border: #cbd3df;
    --contact-color-surface: #fff;
    --contact-color-accent: #8dc74c;
    --contact-color-accent-hover: #b7e682;
    --contact-color-focus: #8fb3ff;
    --contact-color-error: #b42318;
    --contact-color-error-bg: #fff1f0;
    --contact-color-success: #176b3a;
    --contact-color-success-bg: #edf9f1;
    --contact-radius: 0.625em;
    --contact-shadow: 0 1em 2.75em rgba(23, 32, 51, 0.1);
    box-sizing: border-box;
    width: min(100%, 48em);
    margin-inline: auto;
    padding: clamp(1.25em, 4vw, 2.5em);
    color: var(--contact-color-ink, #172033);
    background: var(--contact-color-surface, #fff);
    border: 1px solid #e5e9f0;
    border-radius: calc(var(--contact-radius, 0.625em) * 1.4);
    box-shadow: var(--contact-shadow, 0 1em 2.75em rgba(23, 32, 51, 0.1));
    font: 400 16px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.contact-form *, .contact-form *::before, .contact-form *::after { box-sizing: border-box; }
.contact-form__intro { margin-bottom: 1.75em; }
.contact-form__eyebrow { margin: 0 0 0.35em; color: var(--contact-color-accent, #2457d6); font-size: 0.78em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.contact-form__title { margin: 0; color: var(--contact-color-ink, #172033); font-size: clamp(1.65em, 5vw, 2.25em); line-height: 1.15; }
.contact-form__description { margin: 0.65em 0 0; color: var(--contact-color-muted, #5c667a); }
.contact-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15em; }
.contact-form__field { min-width: 0; }
.contact-form__field--wide { grid-column: 1 / -1; }
.contact-form__label { display: block; margin-bottom: 0.4em; color: var(--contact-color-ink, #172033); font-weight: 650; }
.contact-form__optional, .contact-form__hint { color: var(--contact-color-muted, #5c667a); font-size: 0.875em; font-weight: 400; }

.contact-form__input {
    display: block;
    width: 100%;
    min-height: 2.85em;
    padding: 0.7em 0.8em;
    color: var(--contact-color-ink, #172033);
    background: #fff;
    border: 1px solid var(--contact-color-border, #cbd3df);
    border-radius: var(--contact-radius, 0.625em);
    font: inherit;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.contact-form__textarea { min-height: 9em; resize: vertical; }
.contact-form__input:hover { border-color: #8f9bad; }
.contact-form__input:focus-visible, .contact-form__button:focus-visible, .contact-form__privacy a:focus-visible { outline: 3px solid var(--contact-color-focus, #8fb3ff); outline-offset: 2px; }
.contact-form__input[aria-invalid="true"] { border-color: var(--contact-color-error, #b42318); box-shadow: 0 0 0 2px rgba(180, 35, 24, 0.12); }
.contact-form__hint { margin: 0.35em 0 0; }

.contact-form__antispam {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.contact-form__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65em;
    min-width: 9.5em;
    min-height: 2.9em;
    margin-top: 1.25em;
    padding: 0.7em 1.2em;
    color: #fff;
    background: var(--contact-color-accent, #2457d6);
    border: 0;
    border-radius: var(--contact-radius, 0.625em);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 150ms ease, transform 150ms ease;
}

.contact-form__button:hover:not(:disabled) { background: var(--contact-color-accent-hover, #1946b7); transform: translateY(-1px); }
.contact-form__button:disabled { cursor: wait; opacity: 0.72; }
.contact-form__spinner { display: none; width: 1em; height: 1em; border: 2px solid rgba(255,255,255,0.45); border-top-color: #fff; border-radius: 50%; animation: contact-form-spin 700ms linear infinite; }
.contact-form[data-state="sending"] .contact-form__spinner { display: inline-block; }
.contact-form__status { min-height: 1.5em; margin-top: 0.85em; padding: 0; border-radius: var(--contact-radius, 0.625em); }
.contact-form__status:not(:empty) { padding: 0.75em 0.9em; }
.contact-form[data-state="error"] .contact-form__status { color: var(--contact-color-error, #b42318); background: var(--contact-color-error-bg, #fff1f0); }
.contact-form[data-state="success"] .contact-form__status { color: var(--contact-color-success, #176b3a); background: var(--contact-color-success-bg, #edf9f1); }
.contact-form[data-state="success"] .contact-form__intro,
.contact-form[data-state="success"] .contact-form__grid,
.contact-form[data-state="success"] .contact-form__antispam,
.contact-form[data-state="success"] .contact-form__button,
.contact-form[data-state="success"] .contact-form__privacy { display: none; }
.contact-form[data-state="success"] .contact-form__status { margin-top: 0; }
.contact-form__privacy { margin: 1.25em 0 0; color: var(--contact-color-muted, #5c667a); font-size: 0.875em; }
.contact-form__privacy a { color: var(--contact-color-accent, #2457d6); }

@keyframes contact-form-spin { to { transform: rotate(360deg); } }

@media (max-width: 37.5em) {
    .contact-form__grid { grid-template-columns: 1fr; }
    .contact-form__field--wide { grid-column: auto; }
    .contact-form__button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .contact-form__input, .contact-form__button { transition: none; }
}