.contact { background: var(--white); padding: 4.5rem var(--pad-x) 7.5rem; }
.contact__intro { margin-top: 0.875rem; max-width: 49.375rem; font-size: 1.125rem; line-height: 1.8; color: #6b6b6b; font-weight: 300; }

.contact-form {
  position: relative; margin-top: 2.75rem; padding: 2.75rem 2.75rem 2.25rem;
  background: #fbf8f2; border: 1px solid #ebe1d0; border-radius: 0.75rem; box-shadow: 0 1.5rem 3rem -2rem rgba(74,21,14,.25);
}
.contact-form::before { content: ""; position: absolute; left: 2.75rem; top: -1px; width: 4.5rem; height: 3px; background: var(--gold); border-radius: 0 0 3px 3px; }
.contact-form__legend { display: flex; align-items: center; gap: 0.75rem; font-family: var(--f-nav); font-size: 0.9375rem; letter-spacing: .16em; text-transform: uppercase; color: #8f5c1c; }
.contact-form__legend span { display: inline-grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: 50%; border: 1px solid var(--gold); font-size: 0.75rem; letter-spacing: 0; color: var(--red-brand); background: #fff; }
.contact-form__legend::after { content: ""; flex: 1; height: 1px; background: #e6dac7; }
.contact-form__legend--gap { margin-top: 2.25rem; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

.input { display: block; margin-top: 1.25rem; }
.input > span:not(.visually-hidden) { display: block; margin-bottom: 0.5rem; font-size: 0.9375rem; font-weight: 600; color: #3a2a24; }
.input > span i, .contact-form__note i { font-style: normal; color: var(--red-brand); }
.input input, .input textarea {
  width: 100%; padding: 0.75rem 1rem; border: 1px solid #e2d8c8; border-radius: 0.5rem; background: #fff;
  font-family: var(--f-body); font-size: 1rem; font-weight: 400; color: #2d2d2d; transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.input input { height: 3rem; }
.input textarea { min-height: 9rem; resize: vertical; line-height: 1.6; }
.input input::placeholder, .input textarea::placeholder { color: #b5aaa0; }
.input input:hover, .input textarea:hover { border-color: #d3c3a8; }
.input input:focus, .input textarea:focus { outline: none; border-color: var(--red-brand); box-shadow: 0 0 0 0.25rem rgba(119,46,37,.1); }
.input.has-error input, .input.has-error textarea { border-color: #b3261e; background: #fff7f6; }

.contact-form__foot { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid #ebe1d0; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.contact-form__note { font-size: 0.875rem; line-height: 1.6; color: #6f6f6f; font-weight: 400; }
.contact-form__note a { color: var(--teal); }
.contact-form__send {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; flex: none; height: 3.25rem; padding: 0 1.75rem; border: 0; border-radius: 2rem;
  background: var(--red-brand); color: #fff8ec; font-size: 0.9375rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 0.75rem 1.5rem -0.75rem rgba(74,21,14,.6); transition: background-color .2s, transform .25s var(--ease), box-shadow .25s;
}
.contact-form__send svg { width: 1.125rem; height: 0.75rem; transition: transform .25s var(--ease); }
.contact-form__send:hover { background: #5d2419; transform: translateY(-2px); }
.contact-form__send:hover svg { transform: translateX(3px); }
.contact-form__send:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.contact-form__status { margin-top: 1rem; min-height: 1.4em; font-size: 0.9375rem; color: var(--teal-dark); font-weight: 400; }
.contact-form__status.is-error { color: #b3261e; }
.contact-form__status.is-ok { padding: 0.875rem 1rem; border-radius: 0.5rem; background: #eef5ef; border: 1px solid #cfe2d2; color: #2f5d3a; font-weight: 600; }
.contact-form button[disabled] { opacity: .65; cursor: progress; transform: none; }

@media (max-width: 760px) {
  .contact { padding: 3.5rem 1.375rem 5rem; }
  .contact-form { padding: 2rem 1.25rem 1.75rem; }
  .contact-form::before { left: 1.25rem; }
  .contact-form__row { grid-template-columns: 1fr; gap: 0; }
  .contact-form__foot { flex-direction: column-reverse; align-items: stretch; }
  .contact-form__send { width: 100%; }
}