.contact-panel {
  margin: 0 0 clamp(2rem, 5vw, 4rem);
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 4px solid #111;
  background: #65d9ff;
  box-shadow: 7px 7px 0 #111;
}

.contact-panel h2 { margin-top: 0; }
.contact-panel__intro { max-width: 70ch; }
.contact-panel__direct { font-weight: 850; }
.contact-form { display: grid; gap: 1rem; margin-top: 1.4rem; }
.contact-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.contact-form label { display: grid; gap: 0.4rem; font-weight: 850; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border: 3px solid #111;
  background: #fff;
  color: #111;
  font: inherit;
  padding: 0.8rem 0.9rem;
}
.contact-form textarea { min-height: 180px; resize: vertical; }
.contact-form button {
  width: fit-content;
  border: 3px solid #111;
  background: #111;
  color: #fff;
  padding: 0.9rem 1.2rem;
  font: inherit;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 5px 5px 0 #f58220;
}
.contact-form button:disabled { opacity: 0.55; cursor: wait; }
.contact-form__privacy { margin: 0; max-width: 72ch; font-size: 0.9rem; line-height: 1.5; }
.contact-form__status { min-height: 1.5em; margin: 0; font-weight: 900; }
.contact-form__status[data-state="success"] { background: #b8f26b; padding: 0.65rem; border: 2px solid #111; }
.contact-form__status[data-state="error"] { background: #ffb3d7; padding: 0.65rem; border: 2px solid #111; }
.contact-form__honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

@media (max-width: 720px) {
  .contact-form__row { grid-template-columns: 1fr; }
  .contact-panel { box-shadow: 4px 4px 0 #111; }
  .contact-form button { width: 100%; }
}