.contact-form {
  display: grid;
  gap: var(--space-2);
}
.contact-form h4 { color: #fff; }
.contact-form .field-row {
  display: grid;
  gap: var(--space-2);
}
@media (min-width: 30rem) {
  .contact-form .field-row--2 { grid-template-columns: 1fr 1fr; }
}
.contact-form label {
  display: block;
  font-weight: 800;
  font-size: var(--font-size-sm);
  margin-bottom: .3em;
  color: rgba(255,255,255,.85);
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: .8em .9em;
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--font-size-base);
  background: #fff;
  color: var(--color-ink);
}
.contact-form textarea { min-height: 7rem; resize: vertical; }
.contact-form .hp-wrap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status {
  margin: 0;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  font-size: var(--font-size-sm);
  font-weight: 700;
  display: none;
}
.form-status.is-visible { display: block; }
.form-status--ok { background: var(--color-secondary); color: #fff; border-color: var(--color-ink); }
.form-status--error { background: var(--color-error-tint); color: var(--color-error); border-color: var(--color-error); }