/*
 * Site header on Hero Banner v2 pages.
 * The parent theme (sprayfoam/inc/theme/setup.php) adds `site-page--no-background`
 * to <body> when a page doesn't start with one of its own ACF heroes, which turns
 * the header logo blue and the menu navy. This hero has a dark photo, so keep the
 * transparent header (white logo + white menu) until the header gets `.scrolled`.
 */
body.site-page--no-background:has(.hero-banner-v2) .site-header:not(.scrolled) .site-header-logo--white:not(.switch) { visibility: visible; opacity: 1; }
body.site-page--no-background:has(.hero-banner-v2) .site-header:not(.scrolled) .site-header-logo--blue:not(.switch) { visibility: hidden; opacity: 0; }
body.site-page--no-background:has(.hero-banner-v2) .site-header:not(.scrolled) .site-header-burger__open { color: #eaeaea; }

@media (min-width: 768px) {
    /* Top-level menu items only – the Services dropdown (.site-menu__sub) keeps its own colours. */
    body.site-page--no-background:has(.hero-banner-v2) .site-header:not(.scrolled) .site-menu__main-list > li > a,
    body.site-page--no-background:has(.hero-banner-v2) .site-header:not(.scrolled) .site-menu__main-list > li > a span::before,
    body.site-page--no-background:has(.hero-banner-v2) .site-header:not(.scrolled) .site-menu__main-list > li > .site-menu__btn-drop::before { color: #eaeaea; }
    body.site-page--no-background:has(.hero-banner-v2) .site-header:not(.scrolled) .site-menu__main-list > li > a:hover { color: #002b3e; }
    body.site-page--no-background:has(.hero-banner-v2) .site-header:not(.scrolled) .site-menu__button a { color: #fff; }
}

.wp-block-sprayfoam-hero-banner-v2.hero-banner-v2 {
    --hero-overlay-color: #00384d;
    --hero-overlay-opacity: .88;
    --hero-content-width: 45rem;
    --hero-heading-font-size: 4.5rem;
    --hero-eyebrow-font: 'Sprayfoam Manrope', sans-serif;
    --hero-heading-font: 'Sprayfoam Manrope', sans-serif;
    --hero-description-font: 'Sprayfoam Manrope', sans-serif;
    --hero-eyebrow-color: #b3ef28;
    --hero-heading-color: #fff;
    --hero-description-color: #fff;
    --hero-primary-bg: #91d400;
    --hero-primary-color: #062434;
    --hero-primary-border: #91d400;
    --hero-secondary-bg: transparent;
    --hero-secondary-color: #fff;
    --hero-secondary-border: rgba(255,255,255,.55);
    --hero-badges-width: 37.5rem;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    box-sizing: border-box;
    min-height: 43rem;
    padding: clamp(5rem, 10vw, 8rem) 0 3.4rem;
    color: #fff;
    font-family: 'Sprayfoam Manrope', sans-serif;
    background: #0b4257;
}

.hero-banner-v2 *, .hero-banner-v2 *::before, .hero-banner-v2 *::after { box-sizing: border-box; }

.hero-banner-v2__media, .hero-banner-v2__overlay { position: absolute; inset: 0; }
.hero-banner-v2__media { z-index: -2; background: #0b4257 center / cover no-repeat; }
.hero-banner-v2__media--video { overflow: hidden; }
.hero-banner-v2__media--video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-banner-v2__overlay { z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--hero-overlay-color) calc(var(--hero-overlay-opacity) * 100%), transparent) 0%, color-mix(in srgb, var(--hero-overlay-color) calc(var(--hero-overlay-opacity) * 78%), transparent) 42%, color-mix(in srgb, var(--hero-overlay-color) calc(var(--hero-overlay-opacity) * 20%), transparent) 100%); }

.hero-banner-v2__grid { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 87.5rem; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3.25rem); }
.hero-banner-v2__content { max-width: var(--hero-content-width); }
.hero-banner-v2__badges { padding-top:4rem; display: block; width: min(100%, var(--hero-badges-width)); height: auto; justify-self: end; }
.hero-banner-v2__grid--with-image-groups, .hero-banner-v2__grid--with-side-asset { grid-template-columns: minmax(0, 1fr) minmax(19rem, .72fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero-banner-v2__grid--with-image-groups > .hero-banner-v2__content, .hero-banner-v2__grid--with-side-asset > .hero-banner-v2__content { grid-column: 1; }
.hero-banner-v2__grid--with-image-groups > .hero-banner-v2__badges, .hero-banner-v2__grid--with-side-asset > .hero-banner-v2__badges { grid-column: 2; padding-top: 1.5rem; }
.hero-banner-v2__image-groups { position: relative; grid-column: 2; grid-row: 1; width: 100%; min-height: clamp(29rem, 43vw, 40rem); }
.hero-banner-v2__image-group { margin: 0; color: #fff; }
.hero-banner-v2__image-group img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-banner-v2__image-group--1 { position: absolute; z-index: 1; top: 0; right: 0; width: min(100%, 41rem); height: clamp(28rem, 40vw, 37rem); overflow: hidden; border: 1px solid rgba(255,255,255,.48); border-radius: 1.6rem; background: #0b4257; box-shadow: 0 1.2rem 3rem rgba(0,0,0,.2); }
.hero-banner-v2__image-group--1 figcaption { position: absolute; top: 2rem; right: -1.5rem; width: min(45rem, 74%); padding: 1.4rem 1.5rem; border: 1px solid rgba(255,255,255,.18); border-radius: 1rem; background: #063c50; box-shadow: 0 .8rem 2rem rgba(0,0,0,.18); }
.hero-banner-v2__image-group figcaption span { display: block; color: #b3ef28; font-size: .68rem; font-weight: 800; letter-spacing: .17em; line-height: 1.25; text-transform: uppercase; }
.hero-banner-v2__image-group figcaption strong { display: block; margin-top: .65rem; color: #fff; font-size: clamp(1.05rem, 1.55vw, 1.35rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.18; white-space: pre-line; }
.hero-banner-v2__image-group--2 { position: absolute; z-index: 2; bottom: 1.5rem; left: 0; width: clamp(8.5rem, 15vw, 11rem); overflow: hidden; border: 4px solid #063c50; border-radius: .9rem; background: #063c50; box-shadow: 0 .9rem 2rem rgba(0,0,0,.28); transform: rotate(-7deg); }
.hero-banner-v2__image-group--2 img { height: clamp(8.5rem, 15vw, 11rem); }
.hero-banner-v2__image-group--2 figcaption { padding: .8rem .85rem .9rem; background: #063c50; }
.hero-banner-v2__image-group--2 figcaption strong { margin-top: .35rem; font-size: .7rem; letter-spacing: .08em; line-height: 1.35; text-transform: uppercase; }
.hero-banner-v2__insulation-visualiser { grid-column: 2; grid-row: 1; width: 100%; color: #002b3e; }
.hero-banner-v2__insulation-preview { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid #dce5e8; border-radius: .75rem; background: #f3f7f7; }
.hero-banner-v2__insulation-preview img { width: 100%; height: 100%; object-fit: contain; }
.hero-banner-v2__insulation-placeholder { margin: 1rem; color: #52676d; font-size: .85rem; line-height: 1.4; text-align: center; }
.hero-banner-v2__insulation-selected { position: absolute; bottom: .75rem; left: .75rem; padding: .5rem .65rem; background: #002b3e; color: #fff; font-size: .72rem; font-weight: 800; line-height: 1.2; }
.hero-banner-v2__insulation-heading { margin: 1rem 0 .55rem; color: #fff; font-size: .66rem; font-weight: 800; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; }
.hero-banner-v2__insulation-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .45rem; }
.hero-banner-v2__insulation-button { min-height: 2.8rem; padding: .5rem; border: 1px solid rgba(255,255,255,.6); border-radius: 0; background: rgba(255,255,255,.96); color: #002b3e; cursor: pointer; font: inherit; font-size: .75rem; font-weight: 800; line-height: 1.25; text-align: center; }
.hero-banner-v2__insulation-button:hover, .hero-banner-v2__insulation-button:focus-visible, .hero-banner-v2__insulation-button.is-selected { border-color: #b3ef28; background: #002b3e; color: #fff; outline: 2px solid transparent; }
.hero-banner-v2__insulation-disclaimer { margin: .7rem 0 0; color: rgba(255,255,255,.78); font-size: .61rem; line-height: 1.45; }
/* Hero Banner v2 version one saved its content without the grid wrapper. */
.wp-block-sprayfoam-hero-banner-v2.hero-banner-v2 > .hero-banner-v2__content { width: 100%; max-width: 87.5rem; margin: 0 auto; padding-inline: clamp(1.25rem, 4vw, 3.25rem); }
.wp-block-sprayfoam-hero-banner-v2.hero-banner-v2 > .hero-banner-v2__content > * { max-width: var(--hero-content-width); }
.hero-banner-v2__eyebrow { margin: 3rem 1rem 0.5rem 0.2rem; color: #fff; font-family: var(--hero-eyebrow-font); font-size: .69rem; font-weight: 800; letter-spacing: .16em; line-height: 1.3; text-transform: uppercase; }
.hero-banner-v2__heading { margin: 0; color: var(--hero-heading-color); font-family: var(--hero-heading-font); font-size: var(--hero-heading-font-size); font-weight: 800; letter-spacing: -.06em; line-height: .98; }
.hero-banner-v2__heading strong, .hero-banner-v2__heading em { color: var(--hero-eyebrow-color); font-style: inherit; }
.hero-banner-v2__description { max-width: 36rem; margin: 1.4rem 0 0; color: var(--hero-description-color); font-family: var(--hero-description-font); font-size: 1rem; line-height: 1.55; }
.hero-banner-v2__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }
.hero-banner-v2__button { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: .9rem 1.35rem; border: 1px solid var(--hero-primary-border); border-radius: 0; background: var(--hero-primary-bg); color: var(--hero-primary-color); font-size: .86rem; font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none; transition: filter 160ms ease, transform 160ms ease; }
.hero-banner-v2__button:hover { color: var(--hero-primary-color); filter: brightness(1.08); transform: translateY(-1px); }
.hero-banner-v2__button--secondary { border-color: var(--hero-secondary-border); background: var(--hero-secondary-bg); color: var(--hero-secondary-color); }
.hero-banner-v2__button--secondary:hover { color: var(--hero-secondary-color); }
.hero-banner-v2__proof { display: none; }

@media (max-width: 700px) { 
    
    .hero-banner-v2__heading {
    font-size: 3rem;
}

.wp-block-sprayfoam-hero-banner-v2.hero-banner-v2 { min-height: 0; padding-block: 5rem 2rem; } .hero-banner-v2__overlay { background: color-mix(in srgb, var(--hero-overlay-color) calc(var(--hero-overlay-opacity) * 100%), transparent); } .hero-banner-v2__grid--with-image-groups, .hero-banner-v2__grid--with-side-asset { grid-template-columns: 1fr; row-gap: 2rem; } .hero-banner-v2__image-groups { grid-column: 1; grid-row: auto; width: min(100%, 22rem); min-height: 31rem; justify-self: center; } .hero-banner-v2__insulation-visualiser { grid-column: 1; grid-row: auto; width: min(100%, 30rem); justify-self: center; } .hero-banner-v2__grid--with-image-groups > .hero-banner-v2__badges, .hero-banner-v2__grid--with-side-asset > .hero-banner-v2__badges { grid-column: 1; justify-self: center; padding-top: 0; } .hero-banner-v2__image-group--1 { height: 29rem; } .hero-banner-v2__image-group--1 figcaption { right: .8rem; } }