/* narrower page: caps header, content and footer containers (global.css default is 1220px) */
:root { --max: 1024px; }

/* contact form */
.contact-form { display: flex; flex-direction: column; gap: 6px; max-width: 560px; margin-top: 8px; }
.contact-form label { font-weight: 700; margin-top: 12px; }
.contact-form input,
.contact-form textarea {
  font: inherit;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
}
.contact-form textarea { resize: vertical; min-height: 150px; }
.contact-form input:focus,
.contact-form textarea:focus { outline: 2px solid var(--purple); outline-offset: 1px; }
.contact-form .btn { align-self: flex-start; margin-top: 18px; font: inherit; font-weight: 1000; cursor: pointer; }
.contact-status { margin-top: 28px; font-weight: 700; color: var(--purple-dark); }
.contact-status:empty { margin-top: 0; }
.contact-status.is-error { color: #c62828; }