.contact-form-section {
  padding: 112px 64px;
  background: #f7f8fc;
  scroll-margin-top: 24px;
}

.contact-form__inner {
  width: min(820px, 100%);
  margin: 0 auto;
}

.contact-form__eyebrow {
  margin: 0 0 16px;
  color: #7a3b8c;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.contact-form__title {
  margin: 0;
  color: #111936;
  font-size: 42px;
  line-height: 1.4;
}

.contact-form__lead {
  margin: 18px 0 48px;
  color: #555b6c;
  font-size: 15px;
  line-height: 2;
}

.contact-form {
  padding: 48px 56px 56px;
  background: #fff;
  border: 1px solid #e4e6ef;
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(20, 28, 66, .07);
}

.contact-form__field + .contact-form__field { margin-top: 28px; }

.contact-form__label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: #171c31;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.contact-form__badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 3px;
  font-size: 10px;
  line-height: 1;
  flex: 0 0 auto;
}

.contact-form__badge--required { background: #663898; color: #fff; }
.contact-form__badge--optional { background: #eceef4; color: #606678; }

.contact-form input,
.contact-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #cdd1df;
  border-radius: 5px;
  background: #fff;
  color: #171c31;
  font: inherit;
  font-size: 16px;
  transition: border-color .2s, box-shadow .2s;
}

.contact-form input { height: 54px; padding: 0 16px; }
.contact-form textarea { min-height: 180px; padding: 15px 16px; line-height: 1.8; resize: vertical; }

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #493c96;
  box-shadow: 0 0 0 3px rgba(73, 60, 150, .12);
}

.contact-form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(320px, 100%);
  height: 60px;
  margin: 42px auto 0;
  border: 0;
  border-radius: 4px;
  background: linear-gradient(105deg, #243f84, #77368e);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .12em;
  cursor: pointer;
  transition: opacity .2s, transform .2s;
}

.contact-form__submit:hover { opacity: .9; transform: translateY(-1px); }


@media (max-width: 767px) {
.contact-form-section {padding: 68px var(--gutter) 72px;}
.contact-form__title {font-size: 30px;}
.contact-form__lead {margin: 14px 0 32px; font-size: 14px;}
.contact-form {padding: 28px clamp(16px, 5vw, 24px) 32px;}
.contact-form__label {font-size: 13px; flex-wrap: wrap; white-space: normal;}
.contact-form textarea {min-height: 160px;}
.contact-form__submit {height: auto; min-height: 56px; margin-top: 32px;}
}
.form-note {font-size: 13px; line-height: 1.8; margin-top: 20px; color: #555b6c;}
.contact-form__trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.contact-form__submit:disabled { cursor: default; opacity: .65; transform: none; }
#contact-destination { margin: 0 0 28px; }
#contact-status { overflow-wrap: anywhere; }
#contact-status:empty { display: none; }
#contact-status[data-state="error"] { color: #a22b37; }
#contact-status[data-state="success"] { color: #216741; }