/* Keep the mobile cloud artwork proportional; extend only the grid above it. */
.mobile-logo-plane {display:none;}
@media (max-width: 768px) {
  .hero {
    --mobile-cloud-height: 49.414824vw;
    --mobile-grid-height: calc(100% - var(--mobile-cloud-height) + 1px);
    background-color: var(--navy);
    background-image:
      url('../images/hero-bg-mobile.png'),
      repeating-linear-gradient(90deg, transparent 0 19px, #f5f5f5 19px 21px),
      repeating-linear-gradient(0deg, transparent 0 35px, #f5f5f5 35px 37px),
      linear-gradient(#fff, #fff);
    background-repeat: no-repeat;
    background-position: center bottom, left top, left top, left top;
    background-size: 100% auto, 100% var(--mobile-grid-height), 100% var(--mobile-grid-height), 100% var(--mobile-grid-height);
  }
  .details-hero::after {display: none;}

  /* Keep the TUK-IAT mark left aligned with the copy and pair it with a small plane. */
  .hero-content {align-items: stretch;text-align: left;}
  .logo-box {width: min(100%, 360px);height: auto;min-height: 0;margin: 0 0 24px;justify-content: space-between;gap: 10px;}
  .logo-box > img {width: 150px;height: auto;flex: 0 1 150px;}
  .mobile-logo-plane {display: block;flex: 0 0 clamp(110px, 40vw, 140px);width: clamp(110px, 34vw, 140px);}
  .mobile-logo-plane img {width: 100%;height: auto;}
  .hero-visual .paper-plane {display: none;}
  .hero-details-button {align-self: flex-start;align-items: center;margin: 18px 0 0;font-size: 12px;line-height: 1.2;text-align: left;}
  .hero-details-button > span:first-child {padding: 5px 8px;}
  .hero-details-arrow {width: 26px;padding: 4px;}
  .hero-details-arrow svg {width: 16px;height: 16px;}

  .stats-main .stats-row {justify-content: center;justify-items: center;margin-inline: auto;}
  .stats-main .stats-row > .blob {justify-self: center;}

  .clientle-bg .carousel {width: 100%;padding: 0 44px;}
  .clientle-bg {padding-bottom: 28px;}
  .clientle-bg .slide {padding-inline: 4px;}
  .clientle-bg .logo-card {width: 100%;height: auto;max-width: none;aspect-ratio: 302 / 199;flex: 0 0 100%;}

  /* Match the three color segments to the full heading content on mobile. */
  .hero-heading {align-items: stretch;}
  .hero-heading .heading-line {height: auto;align-self: stretch;margin-block: 0;display: flex;flex-direction: column;}
  .hero-heading .heading-line > span {height: auto;flex: 1 1 0%;}

  /* Size the stripe from the text block, not a fixed mobile height. */
  .hero-message {align-items: stretch;}
  .hero-message .message-stripe {height: auto;align-self: stretch;margin-block: 0;}
  .details-heading-text > p:last-child {margin-bottom: 0;}

  /* Let the mobile hero follow its content instead of reserving desktop height. */
  .details-hero {min-height: 0;}
  .details-hero-inner {
    min-height: 0;
    padding-bottom: clamp(56px, 16vw, 110px);
  }
  .details-visual {
    width: 100%;
    min-height: 0;
    aspect-ratio: 1.55;
    margin-top: 24px;
    translate: none;
  }
  .details-visual .details-shape {
    top: 0;
    bottom: auto;
  }
  .details-visual > .details-students {
    width: 110%;
    height: auto;
    left: -5%;
    right: auto;
    top: auto;
    bottom: 0;
  }
}