/* The first viewport prioritises the title and complete, uncropped line drawing. */
@media (max-width: 800px), (max-width: 950px) and (max-height: 500px) {
  .ms-page .mortgage-main { padding-top: 76px; }
  .ms-page .ms-hero.ml-section {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 8px 0 0;
  }
  .ms-hero-copy { display: contents; }
  .ms-hero h1 {
    order: 0;
    width: 100%;
    margin: 0;
    font-size: clamp(22px, 8.8vw, 40px);
    font-size: clamp(22px, min(8.8vw, 6svh), 40px);
    line-height: 1.14;
    text-align: center;
  }
  .ms-hero .ms-architecture--vector {
    order: 1;
    width: 100%;
    margin: 12px 0 0;
  }
  .ms-hero .ms-vector-stage {
    width: 100%;
    height: min(calc((100vw - 36px) * .755), calc(100vh - 240px));
    height: min(calc((100vw - 36px) * .755), calc(100svh - 240px));
    min-height: 80px;
    max-height: 420px;
    aspect-ratio: auto;
  }
  .ms-hero .ak-house-vector { overflow: visible; }
  .ms-hero .ms-vector-caption {
    justify-content: center;
    padding: 4px 0 8px;
  }
  .ms-hero .ms-hero-description {
    order: 2;
    margin: 14px 0 0;
    max-width: 40ch;
    text-align: center;
  }
  .ms-hero .ms-hero-sub {
    order: 3;
    margin: 14px 0 0;
    max-width: 40ch;
    text-align: center;
  }
  .ms-hero .ms-hero-actions {
    order: 4;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin: 24px 0 0;
  }
}