/* Contact Us — the "Need a hand?" block (injected by js/footer.js into
   #site-footer-lead) sits above a form that fills the rest of the
   viewport. Column flex so the two together come to one screen, rather
   than the intro pushing the full-height form down the page. */
.contact-page {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 48px);
  background: #fff;
}

.contact-page-iframe {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 620px;
  border: 0;
  background: #fff;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 900px) {
  .contact-page { min-height: calc(100vh - 48px); }
  /* On a phone the intro takes several lines, so let the form keep its
     own height and the page scroll rather than squeezing the form. */
  .contact-page-iframe { flex: 0 0 auto; min-height: calc(100vh - 48px); }
}