.contact-card {
  margin: 3rem auto 0;
  max-width: 52rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  background: #fff;
  text-align: left;
  box-shadow: 0 24px 70px rgb(0 0 0 / 7%);
}

.contact-grid { display: grid; gap: 1.25rem; }
@media (min-width: 700px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-field--full { grid-column: 1 / -1; }

.contact-field label {
  display: block;
  margin-bottom: .5rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.contact-field input,
.contact-field textarea {
  width: 100%;
  border: 1px solid #d5d5d5;
  border-radius: 0;
  padding: .95rem 1rem;
  background: #fafafa;
  color: #111;
  font: 1rem/1.5 Inter, sans-serif;
  transition: border-color .2s, box-shadow .2s, background .2s;
}

.contact-field textarea { min-height: 9rem; resize: vertical; }
.contact-field input:focus,
.contact-field textarea:focus {
  outline: 0;
  border-color: #111;
  background: #fff;
  box-shadow: 0 0 0 3px rgb(0 0 0 / 8%);
}

.contact-submit {
  border: 0;
  padding: 1.1rem 2rem;
  background: #000;
  color: #fff;
  cursor: pointer;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1rem;
  font-weight: 800;
}
.contact-submit:hover { background: #282828; }
.contact-submit:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
.contact-note { margin: 1rem 0 0; text-align: center; color: #5e5e5e; font-size: .875rem; }
.contact-honeypot { position: absolute !important; left: -9999px !important; }