/* Workevie build 2026-08-23-v5 - layout fix loaded as a unique file to bypass stale CSS caches */
html,
body,
main,
#landingView {
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow-x: clip;
}

#landingView .hero {
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}

/* The old youth stylesheet intentionally shrank this figure to 80%.
   Workevie should use the full grid column instead. */
#landingView .hero-media {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-self: stretch !important;
  box-sizing: border-box !important;
}

#landingView .image-frame--motion,
#landingView .motion-stage,
#landingView .hero-caption {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Keep the decorative offset without allowing it to affect document width. */
#landingView .hero-media::before {
  pointer-events: none;
}

@media (max-width: 1120px) {
  #landingView .hero {
    grid-template-columns: minmax(0, 1fr) !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    gap: 42px !important;
    overflow: hidden !important;
  }

  #landingView .hero::before {
    display: none !important;
  }

  #landingView .hero-copy,
  #landingView .hero-media {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }

  #landingView .image-frame--motion {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 700px) {
  #landingView .hero {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  #landingView .hero-caption {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  #landingView .hero-caption p {
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }
}