/* Keep below-the-fold placeholder backgrounds from downloading the large hero image. */
.image-panel { background-image: linear-gradient(160deg, rgba(39, 60, 152, .93), rgba(71, 184, 71, .92)), url('../assets/images/hero.webp'); }
.story { background-image: none; background-color: #e8f8ea; }

/* Reserve the hero image's final box before it loads to avoid layout movement. */
.hero-image { aspect-ratio: 3 / 2; height: auto; }

/* Defer rendering work for sections well below the first mobile viewport. */
.stories, .transformations, .testimonials, .faq, .cta, .contact, .business-info, .community-links, footer { content-visibility: auto; contain-intrinsic-size: auto 600px; }