/* Contact page */

.contact__inner {
  display: flex;
  align-items: flex-start;
  gap: 62px;
  padding-top: 180px;
  padding-bottom: 120px;
}
.contact__intro {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  min-width: 0;
}
.contact__intro > :not(.pill) { align-self: stretch; }
.contact__lede { color: var(--ink-2); }
.contact__links { display: flex; flex-direction: column; gap: 24px; }
.contact__link {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 10px;
  border-radius: var(--radius-pill);
  background: var(--paper-2);
  color: var(--ink-2);
}
.contact__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--line);
  flex: none;
}
.contact__icon img { width: 20px; height: 20px; }

/* Form card */
.contact-card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
  padding: 32px;
  border-radius: var(--radius-card);
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.contact-card.is-hidden { visibility: hidden; }
.contact-card__head { display: flex; flex-direction: column; gap: 12px; }
.contact-card__head p { color: var(--ink-2); }
.contact-card__title { font-weight: 700; }

.form { display: flex; flex-direction: column; gap: 24px; }
.form__row { display: flex; gap: 24px; }
.form__row .field { flex: 1 1 0; min-width: 0; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--select { gap: 10px; }
.field__label { color: var(--ink); font: 14px/15.4px var(--font-book); }
.field__box {
  display: block;
  padding: 12px;
  border-radius: 10px;
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.field__box input,
.field__box select {
  display: block;
  width: 100%;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: 16px/19.2px "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
  outline: none;
}
.field__box input::placeholder { color: rgb(153, 153, 153); }
.field__box--short input { height: 18px; }
.field__box--select { padding: 0 12px 0 0; }
.field__box--select select { height: 42px; padding: 12px; appearance: none; }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__submit {
  height: 42px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  font: 14px/15.4px var(--font-book);
}
.form__submit:disabled { opacity: 0.6; }
.form__status:empty { display: none; }
.form__status { color: var(--ink-2); }

@media (max-width: 1439.98px) {
  .contact__inner { padding-top: 140px; }
}

@media (max-width: 809.98px) {
  .contact__inner { flex-direction: column; align-items: stretch; gap: 32px; padding-top: 120px; }
  .contact__intro { flex: none; gap: 16px; }
  .contact-card { flex: none; }
  .form__row { flex-direction: column; }
}