/* Revert in one step: remove hero-promo-experiment from the homepage section.
   Original hero styles and logo markup remain intact. Homepage only. */
.hero.hero-promo-experiment {
    background-color: var(--sm-deep-navy);
    background-image:
        linear-gradient(90deg, rgb(6 31 54 / 94%) 0%, rgb(6 31 54 / 86%) 36%, rgb(6 31 54 / 30%) 63%, rgb(6 31 54 / 12%) 100%),
        url('/Content/Images/soapmonkeys-hero-promo.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* Preserve the existing grid footprint, without a second mascot over the photo. */
.hero-promo-experiment .hero-art { visibility: hidden; }
.hero-promo-experiment .button-outline { background-color: var(--sm-deep-navy); }
.hero-promo-experiment .button-outline:hover { background-color: var(--sm-ocean); }

@media (max-width: 760px) {
    /* Give the existing lower art area the photo, keeping copy on deep ocean. */
    .hero.hero-promo-experiment {
        background-image:
            linear-gradient(180deg, var(--sm-deep-navy) 0%, var(--sm-deep-navy) 48%, rgb(8 42 74 / 70%) 60%, rgb(8 42 74 / 8%) 82%),
            url('/Content/Images/soapmonkeys-hero-promo.png');
        background-size: 100% 100%, auto 350px;
        background-position: center, right calc(100% - 57px);
    }
}