/* Offset only the hero copy and its animated artwork. The independent
   translation preserves Webflow's existing scroll-animation transforms. */
body.body-4 .page-section-title,
body.body-4 .product-title-image {
  translate: 0 16px;
}

/* This fixed, decorative layer spans the page even after fading out. */
body.body-4 .product-title-image {
  pointer-events: none;
}

/* Use Mackenzie's title alignment on mobile; only the display title
   receives this additional offset, leaving the artwork in place. */
@media (max-width: 767px) {
  body.body-4 .page-section-title .product-title-full {
    translate: 0 16px;
  }

  #Hero-IGAPP .callout-copy-copy,
  #Hero-IGRedesign .callout-copy-copy {
    top: 0;
  }
}