/* Homepage-only phone corrections. Loaded by functions.php on the front page. */
.q-home-mobile-copy {
  display: none;
}

/* Only portrait phones replace the composition's tiny lettering. */
@media screen and (orientation: portrait) and (max-width: 576px) {
  #home-ani-22.q-home-mobile-copy-ready {
    flex-direction: column;
    gap: 20px;
  }

  #home-ani-22.q-home-mobile-copy-ready .q-home-native-copy {
    visibility: hidden;
  }

  #home-ani-22.q-home-mobile-copy-ready .q-home-mobile-copy {
    display: contents;
  }

  #home-ani-22 .q-home-mobile-heading {
    order: -1;
    text-align: center;
    color: #90A9EB;
    opacity: 0;
  }

  #home-ani-22 .q-home-mobile-heading span {
    display: block;
    /* Match the desktop Lottie 'Build' layer's brand blue. */
    color: #1355FF;
    font: 300 16px/24px "interstate";
    margin-bottom: 4px;
  }

  #home-ani-22 .q-home-mobile-heading strong {
    display: block;
    font: 300 26px/32px "interstate";
  }

  #home-ani-22 .q-home-mobile-messages {
    position: relative;
    flex: 0 0 auto;
    width: calc(100% - 48px);
    max-width: 420px;
    min-height: 180px;
  }

  #home-ani-22 .q-home-mobile-messages p {
    position: absolute;
    inset: 0 0 auto;
    margin: 0;
    color: #D5E2EA;
    font: 300 17px/25.5px "interstate";
    opacity: 0;
  }
}

@media screen and (max-width: 576px) {
  /* Keep the hero and framed introduction distinct without a long empty band. */
  section.home-first {
    margin-bottom: 72px;
  }

  section.home-second .section-content-border {
    margin-top: 40px;
    margin-bottom: 40px;
  }

  /* The review previously had 200px of margin plus 200px of top padding. */
  section.home-fifth {
    margin-top: 0;
    padding-top: 64px;
    padding-bottom: 64px;
  }

  section.home-fifth .vc_single_image-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  section.home-fifth a {
    color: #90A9EB;
  }

  /* Give the Noise Field a pause before the pinned system animation. */
  section.quiescent-noise-field {
    margin-bottom: 64px;
  }

  /* Pin a full, stable phone viewport and centre the landscape Lottie in it. */
  #home-ani-22 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100svh;
    min-height: 100svh;
  }

  #home-ani-22 #lottieMain2 {
    width: 100%;
    aspect-ratio: 8 / 5;
    flex: 0 0 auto;
  }

  /* WPBakery's 400px spacer follows the animation's inline script. ScrollMagic
     wraps the section in a pin spacer once active, so cover both DOM states. */
  #home-ani-22 + script + .vc_empty_space,
  .scrollmagic-pin-spacer + script + .vc_empty_space {
    height: 72px !important;
  }

  section.home-highligth-products {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  section.home-highligth-products .product-second-col {
    padding-top: 64px;
  }

  /* Counter the older theme's desktop overlap and 200px section spacing. */
  section.home-fourth {
    margin-top: 0 !important;
    padding: 0 0 80px !important;
  }

  section.home-sixth {
    margin-top: 0 !important;
    margin-bottom: 72px !important;
    padding-top: 64px;
    padding-bottom: 64px;
  }

  /* The newsletter field otherwise extends beyond a 320px phone viewport. */
  .footer-mailling-subscribe .frm_form_field.frm_two_thirds {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100%;
  }

  .footer-mailling-subscribe input[type="email"] {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }
}

/* Landscape phones only: keep the portrait corrections above unchanged. */
@media screen and (orientation: landscape) and (max-width: 992px) and (max-height: 500px) {
  #home-ani-22 {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100svh;
    min-height: 100svh;
    padding: 16px;
  }

  /* Native composition is 1920 × 1200. The landscape header scrolls away,
     so fit the whole canvas to the viewport with just 16px above and below.
     Width is (viewport height - 32px) × 8/5, capped by available width. */
  #home-ani-22 #lottieMain2 {
    width: min(100%, calc(160svh - 51.2px));
    height: auto;
    min-width: 0;
    aspect-ratio: 8 / 5;
    flex: 0 0 auto;
  }

  #home-ani-22 #lottieMain2 > svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Keep readable text independent of the SVG's composition scale. The
     overlay follows the same canvas bounds and the original text locations. */
  #home-ani-22.q-home-mobile-copy-ready .q-home-native-copy {
    visibility: hidden;
  }

  #home-ani-22.q-home-mobile-copy-ready .q-home-mobile-copy {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(calc(100% - 32px), calc(160svh - 51.2px));
    aspect-ratio: 8 / 5;
    pointer-events: none;
  }

  #home-ani-22 .q-home-mobile-heading {
    position: absolute;
    top: 45%;
    left: 20%;
    width: 60%;
    text-align: center;
    color: #90A9EB;
    opacity: 0;
  }

  #home-ani-22 .q-home-mobile-heading span {
    display: block;
    color: #1355FF;
    font: 300 15px/20px "interstate";
    margin-bottom: 2px;
  }

  #home-ani-22 .q-home-mobile-heading strong {
    display: block;
    font: 300 22px/28px "interstate";
  }

  #home-ani-22 .q-home-mobile-messages {
    position: absolute;
    inset: 0;
  }

  #home-ani-22 .q-home-mobile-messages p {
    position: absolute;
    margin: 0;
    color: #D5E2EA;
    font: 300 15px/20px "interstate";
    opacity: 0;
  }

  #home-ani-22 .q-home-mobile-growth {
    top: 2%;
    left: 44%;
    width: 56%;
  }

  #home-ani-22 .q-home-mobile-stability {
    bottom: 0;
    left: 0;
    width: 58%;
  }

  section.home-fifth {
    margin-top: 0;
    padding-top: 48px;
    padding-bottom: 48px;
  }

  section.home-fifth .vc_single_image-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  #home-ani-22 + script + .vc_empty_space,
  .scrollmagic-pin-spacer + script + .vc_empty_space {
    height: 48px !important;
  }
}

/* Short landscape viewports still need room between the two text areas. */
@media screen and (orientation: landscape) and (max-width: 992px) and (max-height: 360px) {
  #home-ani-22 .q-home-mobile-messages p {
    font-size: 14px;
    line-height: 18px;
  }

  #home-ani-22 .q-home-mobile-heading strong {
    font-size: 20px;
    line-height: 26px;
  }
}