.bp-hero {
            --bp-header-height: 0px;
        }

        /*
         * DIVI SHELL
         * Add class "bp-hero-shell" to the Divi Section containing
         * the shortcode. This removes Divi's wrapper constraints only
         * around the full-bleed hero itself.
         */
        .bp-hero-shell,
        .bp-hero-shell .et_pb_row,
        .bp-hero-shell .et_pb_column,
        .bp-hero-shell .et_pb_code,
        .bp-hero-shell .et_pb_code_inner {
            width: 100% !important;
            max-width: none !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        .bp-hero,
        .bp-hero * {
            box-sizing: border-box;
        }

        .bp-hero {
            /* Hero fills the viewport below the global header. */
            --bp-hero-height: calc(100svh - var(--bp-header-height));

            /*
             * SHARED SITE GRID:
             * 1080px maximum width with 24px responsive side gutters.
             *
             * This is the key alignment fix. Both the hero copy and
             * hero controls use this exact same container.
             */
            --bp-site-width: calc(100% - 48px);
            --bp-site-max-width: 1080px;

            position: relative;
            isolation: isolate;
            width: 100%;
            min-height: var(--bp-hero-height);
            overflow: hidden;
            background: #111;
            color: #fff;
        }

        .bp-hero__track,
        .bp-hero__slide,
        .bp-hero__inner {
            min-height: var(--bp-hero-height);
        }

        .bp-hero__track,
        .bp-hero__slide,
        .bp-hero__media,
        .bp-hero__image,
        .bp-hero__video,
        .bp-hero__overlay {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
        }

        .bp-hero__slide {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 600ms ease, visibility 600ms ease;
        }

        .bp-hero__slide.is-active {
            z-index: 1;
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .bp-hero__media {
            overflow: hidden;
            background: #111;
        }

        .bp-hero__image,
        .bp-hero__video {
            object-fit: cover;
            object-position: var(--bp-focal-x, 50%) var(--bp-focal-y, 50%);
        }

        .bp-hero__image {
            z-index: 0;
        }

        .bp-hero__video {
            z-index: 1;
            display: block;
            border: 0;
            background: transparent;
        }

        /* Readability gradient — strongest behind left-aligned copy. */
        .bp-hero__overlay {
            z-index: 2;
            background: linear-gradient(
                90deg,
                rgba(0, 0, 0, 0.82) 0%,
                rgba(0, 0, 0, 0.66) 38%,
                rgba(0, 0, 0, 0.26) 68%,
                rgba(0, 0, 0, 0.10) 100%
            );
            pointer-events: none;
        }

        /*
         * EXACT SITE GRID
         * No extra horizontal padding lives inside this container.
         * The copy now starts exactly where a standard Divi row starts.
         */
        .bp-hero__inner {
            position: relative;
            z-index: 3;
            display: flex;
            align-items: center;
            width: min(var(--bp-site-width), var(--bp-site-max-width));
            margin-inline: auto;
            padding-block: clamp(96px, 10vh, 160px) clamp(112px, 12vh, 176px);
            padding-inline: 0;
        }

        /* Keep copy readable without changing the left edge. */
        .bp-hero__content {
            width: min(100%, 700px);
        }

        .bp-hero__title {
            max-width: 18ch;
            margin: 0;
            padding: 0;
            color: var(--bp-heading-color, #fff);
            font-size: clamp(2.5rem, 5.4vw, 5.6rem);
            line-height: 0.98;
            letter-spacing: -0.035em;
            text-wrap: balance;
        }

        .bp-hero__description {
            color: var(--bp-description-color, #fff);
            max-width: 60ch;
            margin-top: clamp(18px, 2.2vw, 28px);
            font-size: clamp(1rem, 1.25vw, 1.22rem);
            line-height: 1.55;
        }

        .bp-hero__description p {
            margin: 0;
        }

        .bp-hero__actions {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            margin-top: clamp(24px, 2.8vw, 36px);
        }

        .bp-hero__button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 52px;
            padding: 14px 26px;
            border: 0;
            border-radius: 0;
            font-family: inherit;
            font-size: 0.925rem;
            font-weight: 700;
            line-height: 1;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            text-decoration: none;
            transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
        }

        .bp-hero__button:focus-visible,
        .bp-hero__control:focus-visible,
        .bp-hero__toggle:focus-visible,
        .bp-hero__dot:focus-visible {
            outline: 3px solid #fff;
            outline-offset: 3px;
        }

        .bp-hero__button--primary {
            background-color: var(--bp-primary-background-color, #b9d533);
            color: var(--bp-primary-text-color, #39454c);
        }

        .bp-hero__button--primary:hover,
        .bp-hero__button--primary:focus-visible {
            background-color: var(--bp-primary-hover-color, #c8e044);
            color: var(--bp-primary-text-color, #39454c);
        }

        .bp-hero__button--secondary {
            background-color: var(--bp-secondary-background-color, #df1683);
            color: var(--bp-secondary-text-color, #fff);
        }

        .bp-hero__button--secondary:hover,
        .bp-hero__button--secondary:focus-visible {
            background-color: var(--bp-secondary-hover-color, #c91374);
            color: var(--bp-secondary-text-color, #fff);
        }

        /*
         * CONTROLS USE THE SAME EXACT WIDTH AS THE COPY.
         * This fixes the previous desktop mismatch.
         */
        .bp-hero__controls {
            position: absolute;
            z-index: 5;
            bottom: clamp(20px, 4vh, 48px);
            left: 50%;
            display: flex;
            align-items: center;
            gap: 12px;
            width: min(var(--bp-site-width), var(--bp-site-max-width));
            margin: 0;
            padding: 0;
            transform: translateX(-50%);
        }

        .bp-hero__control,
        .bp-hero__toggle,
        .bp-hero__dot {
            border: 1px solid rgba(255, 255, 255, 0.72);
            background: rgba(0, 0, 0, 0.34);
            color: #fff;
            cursor: pointer;
        }

        .bp-hero__control {
            display: grid;
            flex: 0 0 48px;
            width: 48px;
            height: 48px;
            padding: 0;
            border-radius: 0;
            place-items: center;
            transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
        }

        .bp-hero__control:hover {
            border-color: #b9d533;
            background-color: #b9d533;
            color: #39454c;
            transform: translateY(-2px);
        }

        .bp-hero__control-icon {
            display: block;
            width: 24px;
            height: 24px;
            overflow: visible;
        }

        .bp-hero__control-icon path {
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: square;
            stroke-linejoin: miter;
        }

        .bp-hero__dots {
            display: flex;
            align-items: center;
            gap: 9px;
        }

        .bp-hero__dot {
            width: 10px;
            height: 10px;
            padding: 0;
            border-radius: 50%;
        }

        .bp-hero__dot.is-active {
            background: #fff;
        }

        .bp-hero__toggle {
            min-height: 42px;
            margin-left: auto;
            padding: 8px 14px;
            border-radius: 0;
            font-size: 0.875rem;
            font-weight: 700;
        }

        .bp-hero__editor-notice {
            padding: 24px;
            border: 2px dashed currentColor;
            background: #fff4cc;
            color: #4b3b00;
            font-weight: 700;
        }

        /* ---------------------------------------------------------
         * TABLET
         * Preserve the same shared grid while tightening typography.
         * --------------------------------------------------------- */
        @media screen and (max-width: 980px) {
            .bp-hero {
                --bp-site-width: calc(100% - 48px);
            }

            .bp-hero__content {
                width: min(100%, 660px);
            }

            .bp-hero__title {
                font-size: clamp(2.5rem, 7vw, 4.8rem);
            }
        }

        /* ---------------------------------------------------------
         * MOBILE
         * --------------------------------------------------------- */
        @media screen and (max-width: 767px) {
            .bp-hero__image,
            .bp-hero__video {
                object-position: var(--bp-mobile-focal-x, var(--bp-focal-x, 50%)) var(--bp-mobile-focal-y, var(--bp-focal-y, 50%));
            }

            .bp-hero {
                --bp-site-width: calc(100% - 36px);
            }

            .bp-hero__overlay {
                background: linear-gradient(
                    180deg,
                    rgba(0, 0, 0, 0.16) 0%,
                    rgba(0, 0, 0, 0.34) 34%,
                    rgba(0, 0, 0, 0.82) 76%,
                    rgba(0, 0, 0, 0.92) 100%
                );
            }

            .bp-hero__inner {
                align-items: flex-end;
                padding-top: 96px;
                padding-bottom: 132px;
            }

            .bp-hero__content {
                width: 100%;
                max-width: 620px;
            }

            .bp-hero__title {
                max-width: 15ch;
                font-size: clamp(2.35rem, 11vw, 4rem);
                line-height: 1;
            }

            .bp-hero__description {
                max-width: 56ch;
                margin-top: 16px;
                font-size: 1rem;
                line-height: 1.5;
            }

            .bp-hero__actions {
                gap: 10px;
                margin-top: 22px;
            }

            .bp-hero__button {
                min-height: 50px;
                padding: 14px 18px;
                font-size: 0.875rem;
            }

            .bp-hero__controls {
                bottom: calc(18px + env(safe-area-inset-bottom));
                gap: 8px;
            }

            .bp-hero__control {
                flex-basis: 44px;
                width: 44px;
                height: 44px;
            }

            .bp-hero__toggle {
                min-height: 42px;
                padding-inline: 11px;
            }
        }

        /* ---------------------------------------------------------
         * NARROW PORTRAIT PHONES
         * Allow the active slide to grow if copy/buttons need more
         * than one viewport. Background media remains full-bleed.
         * --------------------------------------------------------- */
        @media screen and (max-width: 600px) and (orientation: portrait) {
            .bp-hero {
                --bp-site-width: calc(100% - 36px);
                height: auto;
                min-height: var(--bp-hero-height);
                overflow: hidden;
            }

            .bp-hero__track {
                position: relative;
                inset: auto;
                width: 100%;
                height: auto;
                min-height: var(--bp-hero-height);
            }

            .bp-hero__slide {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                min-height: var(--bp-hero-height);
            }

            .bp-hero__slide.is-active {
                position: relative;
                inset: auto;
                width: 100%;
                height: auto;
                min-height: var(--bp-hero-height);
            }

            .bp-hero__media,
            .bp-hero__image,
            .bp-hero__video,
            .bp-hero__overlay {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
            }

            .bp-hero__inner {
                width: var(--bp-site-width);
                min-height: var(--bp-hero-height);
                margin-inline: auto;
                padding-top: clamp(90px, 12vh, 124px);
                padding-right: 0;
                padding-bottom: calc(150px + env(safe-area-inset-bottom));
                padding-left: 0;
            }

            .bp-hero__content {
                width: 100%;
                max-width: none;
            }

            .bp-hero__title {
                width: 100%;
                max-width: 15ch;
                font-size: clamp(2.1rem, 10.5vw, 3.4rem);
                overflow-wrap: anywhere;
            }

            .bp-hero__description {
                width: 100%;
                max-width: 54ch;
                overflow-wrap: anywhere;
            }

            .bp-hero__actions {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                width: 100%;
                gap: 10px;
            }

            .bp-hero__button {
                width: 100%;
                max-width: 100%;
                min-height: 52px;
                padding: 15px 16px;
                white-space: normal;
                text-align: center;
                line-height: 1.2;
                overflow-wrap: anywhere;
            }

            .bp-hero__dots {
                flex: 0 1 auto;
                max-width: calc(100% - 188px);
                overflow-x: auto;
                scrollbar-width: none;
            }

            .bp-hero__dots::-webkit-scrollbar {
                display: none;
            }
        }

        @media screen and (max-width: 420px) and (orientation: portrait) {
            .bp-hero {
                --bp-site-width: calc(100% - 32px);
            }

            .bp-hero__title {
                font-size: clamp(2rem, 10vw, 3rem);
            }

            .bp-hero__description {
                font-size: 0.975rem;
            }

            .bp-hero__button {
                font-size: 0.84rem;
                letter-spacing: 0.045em;
            }

            .bp-hero__dots {
                display: none;
            }
        }

        /*
         * Reduced motion:
         * - transitions disabled
         * - JS also prevents automatic video playback and slider motion
         */
        @media (prefers-reduced-motion: reduce) {
            .bp-hero__slide,
            .bp-hero__button,
            .bp-hero__button::after,
            .bp-hero__control {
                transition: none;
            }
        }

        /* Match the shared slate, green, square-button design. */
        .bp-hero{background:#39454c;--bp-hero-height:max(420px,calc(100svh - var(--bp-header-height)));}
        .bp-hero__media{background:#39454c}
        .bp-hero__track{position:relative;height:auto}
        .bp-hero__slide.is-active{position:relative;height:auto}
        .bp-hero__inner{padding-block:clamp(64px,8vh,112px) 112px}
        .bp-hero__overlay{background:linear-gradient(90deg,rgba(26,36,41,.9),rgba(26,36,41,.65) 55%,rgba(26,36,41,.18))}
        .bp-hero__title{font-weight:500;line-height:1.06}
        .bp-hero__description{max-width:54ch;line-height:1.65}
        .bp-hero__description p+p{margin-top:1em}
        .bp-hero .bp-hero__button{gap:22px;min-height:48px;padding:12px 20px;font-size:13px;line-height:1.5;border:1px solid currentColor;transform:none}
        .bp-hero__button::before,.bp-hero__button::after{content:none!important;display:none!important}
        .bp-hero .bp-hero__button--primary{border-color:var(--bp-primary-background-color,#b9d533);color:var(--bp-primary-text-color,#39454c)}
        .bp-hero .bp-hero__button--secondary{background:var(--bp-secondary-background-color,transparent);border-color:var(--bp-secondary-background-color,rgba(255,255,255,.8));color:var(--bp-secondary-text-color,white)}
        .bp-hero .bp-hero__button--secondary:hover,.bp-hero .bp-hero__button--secondary:focus-visible{background:var(--bp-secondary-hover-color,rgba(255,255,255,.12))}
        .bp-hero__cta-arrow{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform 180ms ease}
        .bp-hero__button--arrow-diagonal .bp-hero__cta-arrow{transform:rotate(-45deg)}
        .bp-hero__button--arrow-horizontal:hover .bp-hero__cta-arrow{transform:translateX(3px)}
        .bp-hero__button--arrow-diagonal:hover .bp-hero__cta-arrow{transform:translate(2px,-2px) rotate(-45deg)}
        .bp-hero__video{opacity:0;transition:opacity 200ms ease}
        .bp-hero__video.is-playing{opacity:1}
        .bp-hero .bp-hero__dot{width:28px;height:44px;border:0;background:transparent;position:relative}
        .bp-hero .bp-hero__dot::after{content:'';position:absolute;width:8px;height:8px;top:18px;left:10px;border:1px solid white;border-radius:50%}
        .bp-hero .bp-hero__dot.is-active::after{background:#b9d533;border-color:#b9d533}
        .bp-hero__dots{gap:0}
        @media(max-width:767px){
            .bp-hero{--bp-site-width:calc(100% - 40px)}
            .bp-hero__inner{padding-top:64px;padding-bottom:calc(112px + env(safe-area-inset-bottom))}
            .bp-hero__overlay{background:linear-gradient(180deg,rgba(26,36,41,.25),rgba(26,36,41,.85) 65%,rgba(26,36,41,.94))}
            .bp-hero .bp-hero__button{white-space:normal}
        }
        @media(prefers-reduced-motion:reduce){.bp-hero__cta-arrow,.bp-hero__video{transition:none}.bp-hero__button:hover .bp-hero__cta-arrow{transform:none}.bp-hero__button--arrow-diagonal:hover .bp-hero__cta-arrow{transform:rotate(-45deg)}}
    
.bp-hero { --bp-hero-height: max(0px, calc(100svh - var(--bp-header-height, 0px))); }

/* Automatic full-bleed Divi hosting: insert the shortcode in its own section. */
.et_pb_section:has(.bp-hero),
.et_pb_section:has(.bp-hero) .et_pb_row:has(.bp-hero),
.et_pb_section:has(.bp-hero) .et_pb_column:has(.bp-hero),
.et_pb_section:has(.bp-hero) .et_pb_module:has(.bp-hero),
.et_pb_section:has(.bp-hero) .et_pb_code_inner:has(.bp-hero),
.et_pb_section:has(.bp-hero) .et_pb_text_inner:has(.bp-hero){width:100%!important;max-width:none!important;margin:0!important;padding:0!important;}
.et_pb_section:has(.bp-hero){overflow:visible!important;}
.bp-hero{width:var(--bp-viewport-width,100%);max-width:none!important;margin-inline:calc((100% - var(--bp-viewport-width,100%))/2);}

/* Optional per-slide eyebrow, above the headline. */
.bp-hero .bp-hero__eyebrow{margin:0 0 clamp(12px,1.5vw,20px);padding:0;color:var(--bp-heading-color,#fff);font-family:"Canaro Semibold",Helvetica,Arial,sans-serif;font-weight:400;font-style:normal;font-size:clamp(.75rem,1.1vw,.9375rem);line-height:1.45;letter-spacing:.12em;text-transform:uppercase;overflow-wrap:anywhere;}

/* Long-copy resilience: readable text and complete controls at every size. */
.bp-hero__content{min-width:0;overflow-wrap:anywhere}
.bp-hero__title,.bp-hero__description,.bp-hero__eyebrow{overflow-wrap:anywhere}
.bp-hero__track{position:relative;height:auto}
.bp-hero__slide.is-active{position:relative;height:auto}
.bp-hero__inner{height:auto}