.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; max-width: 760px; margin-top: 8px; }
.contact-form .field { display: grid; gap: 8px; min-width: 0; }
.contact-form .field.wide { grid-column: 1 / -1; }
.contact-form label { font-family: var(--label); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.contact-form label .opt { text-transform: none; letter-spacing: 0; opacity: .7; }
.contact-form input, .contact-form textarea {
  width: 100%; box-sizing: border-box; background: transparent; color: var(--fg); border: 0; border-bottom: 1px solid var(--line);
  padding: 10px 0 12px; font: 400 17px/1.5 var(--body); border-radius: 0; transition: border-color .5s var(--ease);
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-bottom-color: var(--tungsten); }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: color-mix(in srgb, var(--muted) 60%, transparent); }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form .actions-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 6px; }
.contact-form button { cursor: pointer; background: transparent; color: var(--fg); font: 500 12.5px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; }
.contact-form button:disabled { opacity: .5; cursor: progress; }
.form-status { margin: 0; color: var(--muted); font-size: 15px; }
.form-status[data-kind="ok"] { color: var(--fg); }
.form-status[data-kind="error"] { color: #e08a72; }
@media (max-width: 640px) { .contact-form { grid-template-columns: 1fr; } }