/* The actions and artwork share the lower mobile composition.
   The globe starts at 10% of the source image: reserve its remaining height
   below the 96px action stack so the head meets the first action. */
@media (max-width: 720px) {
  .hero {
    --hero-scene-height: clamp(330px, 102vw, 440px);
    --hero-action-stack: 96px;
    --hero-action-width: clamp(160px, 44.8vw, 184px);
  }
  .hero .hero-copy.shell {
    padding-bottom: calc(var(--hero-scene-height) * .9 - var(--hero-action-stack));
  }
  .hero .hero-actions {
    grid-template-columns: minmax(0, 1fr);
    width: var(--hero-action-width);
    gap: 8px;
  }
  .hero .hero-actions .primary-cta,
  .hero .hero-actions .hero-cases-link {
    height: 44px;
    min-height: 44px;
    padding-inline: 10px;
    font-size: 13px;
  }
  .hero .hero-art {
    position: absolute;
    inset: auto 0 0;
    width: 100%;
    height: var(--hero-scene-height);
    min-height: 0;
    background-size: auto 100%;
    background-position: calc(100% + 90px) bottom;
  }
}