/* English contact page. Paperform controls the inline form's height and fields. */
.contact-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(275px, 24vw, 395px);
  background: #f3f7fc;
  border-block: 1px solid #dae4ef;
}
.contact-hero img {
  position: absolute;
  z-index: -1;
  inset: 0 0 0 auto;
  width: auto;
  height: 100%;
  object-fit: contain;
  object-position: right center;
  mask-image: linear-gradient(90deg, transparent, black 20%);
}
.contact-intro {
  padding-block: 38px;
}
.contact-intro h1 {
  max-width: 58%;
  font-size: clamp(44px, 4.7vw, 72px);
}
.contact-intro p {
  margin-top: 15px;
  max-width: min(48%, 520px);
  color: var(--ink);
  font-size: clamp(18px, 1.5vw, 23px);
  line-height: 1.45;
}
.contact-section {
  max-width: 900px;
  padding-block: clamp(32px, 4vw, 60px);
}
.contact-instructions {
  max-width: 62ch;
  margin-top: 12px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55;
}
.contact-form {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid #c3d4e5;
}
.contact-form p {
  color: var(--muted);
  line-height: 1.55;
}
/* Reserve room while Paperform loads. The live embed sizes itself. */
.contact-form:has(#form-status:not([hidden]) + #form-fallback[hidden]) {
  min-height: 680px;
}
.contact-form a {
  text-decoration: underline;
  text-underline-offset: .16em;
}
@media (max-width: 680px) {
  .contact-hero {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .contact-hero img {
    position: static;
    width: 100%;
    height: clamp(130px, 31vw, 200px);
    object-fit: cover;
    mask-image: none;
  }
  .contact-intro {
    padding-block: 30px 18px;
  }
  .contact-intro h1, .contact-intro p {
    max-width: 100%;
  }
}