.contact-dialog {
  width: min(600px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  padding: 40px;
  border: 0;
  background: #fff;
  color: var(--color-text);
  overscroll-behavior: contain;
}

.contact-dialog::backdrop { background: rgb(0 0 0 / 65%); }
body.contact-open { overflow: hidden; }
.contact-dialog h2 { padding-right: 24px; }
.contact-dialog__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  font-size: 28px;
}

#contact-form,
#contact-form label { display: grid; gap: 8px; }
#contact-form { gap: 20px; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
#contact-form label { min-width: 0; }
#contact-form input:not([type="hidden"]),
#contact-form textarea {
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid #777;
  border-radius: 6px;
  background: #fff;
}
#contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form__trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.contact-form__status { margin: 0; font-size: 12px; }
.contact-form__submit { border: 1px solid #000; }
.contact-form__submit:disabled { opacity: 0.45; }

@media (max-width: 540px) {
  .contact-dialog { padding: 40px 20px 24px; }
  .contact-form__row { grid-template-columns: 1fr; }
}

.contact-dialog--sent #contact-title,
.contact-dialog--sent #contact-description,
.contact-dialog--sent #contact-form > :not(#contact-turnstile):not(#contact-status) {
  display: none;
}