.hero-home-logo.alignwide {
    position: absolute;
    bottom: var(--wp--style--root--padding-right);
    width: 100%;
    box-sizing: border-box;
     max-width: calc(100% - var(--wp--style--root--padding-right) - var(--wp--style--root--padding-left));
    width: var(--wp--style--global--wide-size);
}




.hero-home-logo img {
    width: 100%;
}

.hero-home-background-image img {
    width: 100vw;
    height: 80vh;
    object-fit: cover;
}
.hero-home-background-image figure {
    margin: 0;
}
.hero-home-inner-banner {
    position: relative;
     display: flex;
    justify-content: center;
}

.hero-home-intro {
    padding-right: var(--wp--style--root--padding-right);
    padding-left: var(--wp--style--root--padding-left);
    padding-top: var(--wp--preset--spacing--70);
    padding-bottom: var(--wp--preset--spacing--20);
}

.hero-home-intro {
    max-width: 60rem;
    margin: auto;
}

.hero-home-intro h2 {
    margin-top: 2rem !important;
}

/* The header logo stays hidden until the hero is scrolled past. .menu-logo
   belongs to the menu block, not this one, so the rules are scoped to a page
   that actually holds a hero — otherwise they blank the logo anywhere this
   stylesheet is loaded, which the editor now does for every block.

   Desktop only: below 1100px the menu block swaps in the full-screen nav, and
   there the logo just sits in place. */
@media (min-width: 1101px) {
    body:has(.block-hero-home) .menu-logo {
        opacity: 0;
        transition: .3s;
        transform: translateX(-50%) translateY(-100%);
    }

    body:has(.block-hero-home) .home-header-in-top .menu-logo {
        opacity: 1;
        transform: translateX(-50%);
    }
}


.hero-home-logo-mobile {
    display: none;
}



@media (max-width: 700px) {
.hero-home-logo-mobile {
    display: block;
}
.hero-home-logo-desktop {
    display: none;
}

}