/* Contact-form layout */
.contact-form-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 32px;
  margin-top: 40px;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow);
}
.contact-form-intro .section-title { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.contact-form-intro .section-lead { font-size: 1rem; }
.contact-form { min-width: 0; }
.contact-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.form-field { display: grid; align-content: start; gap: 6px; min-width: 0; }
.form-field--wide { grid-column: 1 / -1; }
.form-field label { font-weight: 700; color: var(--ink); }
.field-optional { font-size: 0.875rem; font-weight: 400; color: var(--muted); }
.form-field input, .form-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid #989383;
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font: inherit;
}
.form-field textarea { min-height: 160px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus { outline: 3px solid var(--teal); outline-offset: 2px; border-color: var(--teal); }
.form-status { min-height: 0; margin: 0 0 16px; padding: 0; }
.form-status:not(:empty) { padding: 12px 16px; border-left: 4px solid var(--teal); border-radius: 4px; background: #e7f2ef; }
.contact-form .btn { margin-top: 20px; cursor: pointer; font: inherit; font-weight: 700; }

@media (max-width: 820px) {
  .contact-form-wrap { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 560px) {
  .contact-form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-field--wide { grid-column: auto; }
}